1  /* // straylight todo aesthetic // */
  2  
  3  :root {
  4    --bg: #0a0a0b;
  5    --card: #111113;
  6    --border: #1a1a1d;
  7    --text: #e5e5e7;
  8    --muted: #71717a;
  9    --primary: #3b82f6;
 10    --danger: #ef4444;
 11    --success: #22c55e;
 12  }
 13  
 14  * {
 15    box-sizing: border-box;
 16    margin: 0;
 17    padding: 0;
 18  }
 19  
 20  body {
 21    font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
 22    background: var(--bg);
 23    color: var(--text);
 24    min-height: 100vh;
 25    display: flex;
 26    justify-content: center;
 27    padding: 4rem 1rem;
 28    line-height: 1.6;
 29  }
 30  
 31  .todo-app {
 32    width: 100%;
 33    max-width: 500px;
 34  }
 35  
 36  .todo-title {
 37    font-size: 1.5rem;
 38    font-weight: 500;
 39    color: var(--primary);
 40    margin-bottom: 2rem;
 41    text-align: center;
 42  }
 43  
 44  .todo-input-container {
 45    display: flex;
 46    gap: 0.5rem;
 47    margin-bottom: 1.5rem;
 48  }
 49  
 50  .todo-input {
 51    flex: 1;
 52    background: var(--card);
 53    border: 1px solid var(--border);
 54    color: var(--text);
 55    padding: 0.75rem 1rem;
 56    font-family: inherit;
 57    font-size: 0.875rem;
 58    outline: none;
 59    transition: border-color 0.2s;
 60  }
 61  
 62  .todo-input:focus {
 63    border-color: var(--primary);
 64  }
 65  
 66  .todo-input::placeholder {
 67    color: var(--muted);
 68  }
 69  
 70  .todo-add-btn {
 71    background: var(--primary);
 72    border: none;
 73    color: var(--bg);
 74    width: 2.5rem;
 75    font-size: 1.25rem;
 76    cursor: pointer;
 77    transition: opacity 0.2s;
 78  }
 79  
 80  .todo-add-btn:hover {
 81    opacity: 0.8;
 82  }
 83  
 84  .todo-list {
 85    list-style: none;
 86    border: 1px solid var(--border);
 87    border-bottom: none;
 88  }
 89  
 90  .todo-item {
 91    display: flex;
 92    align-items: center;
 93    gap: 0.75rem;
 94    padding: 0.75rem 1rem;
 95    background: var(--card);
 96    border-bottom: 1px solid var(--border);
 97    transition: background 0.2s;
 98  }
 99  
100  .todo-item:hover {
101    background: #161618;
102  }
103  
104  .todo-item.completed .todo-text {
105    text-decoration: line-through;
106    color: var(--muted);
107  }
108  
109  .todo-checkbox {
110    appearance: none;
111    width: 1.25rem;
112    height: 1.25rem;
113    border: 1px solid var(--border);
114    background: transparent;
115    cursor: pointer;
116    position: relative;
117  }
118  
119  .todo-checkbox:checked {
120    background: var(--success);
121    border-color: var(--success);
122  }
123  
124  .todo-checkbox:checked::after {
125    content: "";
126    position: absolute;
127    left: 5px;
128    top: 2px;
129    width: 5px;
130    height: 10px;
131    border: solid var(--bg);
132    border-width: 0 2px 2px 0;
133    transform: rotate(45deg);
134  }
135  
136  .todo-text {
137    flex: 1;
138    font-size: 0.875rem;
139  }
140  
141  .todo-remove-btn {
142    background: transparent;
143    border: none;
144    color: var(--muted);
145    font-size: 0.875rem;
146    cursor: pointer;
147    padding: 0.25rem 0.5rem;
148    opacity: 0;
149    transition:
150      opacity 0.2s,
151      color 0.2s;
152  }
153  
154  .todo-item:hover .todo-remove-btn {
155    opacity: 1;
156  }
157  
158  .todo-remove-btn:hover {
159    color: var(--danger);
160  }
161  
162  .todo-footer {
163    display: flex;
164    justify-content: space-between;
165    align-items: center;
166    padding: 0.75rem 1rem;
167    background: var(--card);
168    border: 1px solid var(--border);
169    font-size: 0.75rem;
170    color: var(--muted);
171  }
172  
173  .clear-completed-btn {
174    background: transparent;
175    border: none;
176    color: var(--muted);
177    font-family: inherit;
178    font-size: 0.75rem;
179    cursor: pointer;
180    transition: color 0.2s;
181  }
182  
183  .clear-completed-btn:hover {
184    color: var(--text);
185  }