* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  background:#1a1a2e;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#eee; height:100dvh; overflow:hidden; display:flex; flex-direction:column;
}
.hidden { display:none !important; }

#celebration-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ── App shell ── */
#app { position:relative; z-index:1; display:flex; flex-direction:column; height:100dvh; max-width:600px; margin:0 auto; width:100%; }

#app-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:20px 20px 14px; border-bottom:1px solid #1e3050; flex-shrink:0; }
#header-right { display:flex; align-items:center; gap:0; justify-self:end; }
#new-list-btn {
  background:none; border:1.5px solid #1e3050; border-radius:10px;
  color:#a0aec0; font-size:.8rem; font-family:inherit; font-weight:600;
  padding:5px 12px; cursor:pointer; letter-spacing:.04em;
  transition:border-color .15s, color .15s;
}
#new-list-btn:hover { border-color:#80d8ff; color:#80d8ff; }
#share-status { font-size:.7rem; color:#ff6b6b; white-space:nowrap; padding:0 4px; }
#app-title   { font-size:1.6rem; font-weight:700; color:#80d8ff; letter-spacing:0.04em; }
#app-version { font-size:.7rem; font-weight:400; color:#4a5568; letter-spacing:0; vertical-align:middle; }

.icon-btn { background:none; border:none; cursor:pointer; font-size:1.4rem; padding:6px; border-radius:8px; transition:background .15s; color:#eee; line-height:1; }
.icon-btn:hover { background:rgba(255,255,255,.08); }


/* ── List ── */
#list-area {
  flex:1; overflow-y:auto; padding:0 16px 24px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#list-area::-webkit-scrollbar { display:none; }
#todo-empty { text-align:center; padding:60px 20px; color:#4a5568; line-height:1.7; }
#todo-empty p:first-child { font-size:1rem; }
#todo-empty p:last-child  { font-size:.88rem; }
#todo-list { list-style:none; display:flex; flex-direction:column; gap:8px; padding-top:4px; }

/* ── Todo item ── */
.todo-item {
  background:#16213e; border:1.5px solid #1e3050; border-radius:12px;
  transition:opacity .3s; animation:slideIn .18s ease-out;
}
.todo-item.done { opacity:.5; }
@keyframes slideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.todo-row { display:flex; align-items:center; gap:8px; padding:7px 10px 7px 12px; }

.todo-grip, .list-grip {
  background:none; border:none; cursor:grab; padding:4px; margin-left:-6px;
  color:#5a7a95; flex-shrink:0; display:flex; align-items:center;
  touch-action:none; -webkit-user-select:none; user-select:none;
  border-radius:6px; transition:color .15s, background .15s;
}
.todo-grip:hover, .list-grip:hover { color:#80d8ff; background:rgba(255,255,255,.06); }
.todo-grip:active, .list-grip:active { cursor:grabbing; }
.todo-item.done .todo-grip { opacity:.2; pointer-events:none; }

.todo-check { background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; display:flex; align-items:center; transition:transform .15s; }
.todo-check:active { transform:scale(.85); }

.todo-text {
  flex:1; font-size:.95rem; line-height:1.35; min-width:0; cursor:text; outline:none;
  border-radius:4px; padding:1px 3px; margin:-1px -3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.todo-text.editing { white-space:normal; overflow:visible; background:rgba(128,216,255,.08); outline:1.5px solid #80d8ff; }
.todo-item.done .todo-text { text-decoration:line-through; color:#6b7280; }

/* ── Right-side controls ── */
.todo-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }

.repeat-val {
  background:transparent; border:none; color:#a0aec0; font-size:.78rem; font-family:inherit;
  cursor:pointer; padding:2px 2px 2px 4px; border-radius:4px; white-space:nowrap;
  display:flex; align-items:center; justify-content:space-between; gap:1px;
  min-width:50px; transition:color .15s,background .15s;
}
.repeat-val:hover { color:#eee; background:rgba(255,255,255,.06); }
.repeat-arrow { opacity:.45; font-size:.6rem; }

.todo-date {
  background:transparent; border:none; border-bottom:1px solid #2d3748; color:#a0aec0;
  font-size:.78rem; font-family:inherit; width:60px; padding:2px; text-align:center;
  outline:none; transition:border-color .15s,color .15s; cursor:text;
}
.todo-date::placeholder { color:#2d3748; }
.todo-date:focus { border-bottom-color:#80d8ff; color:#eee; }
.todo-date.date-error { border-bottom-color:#FF6B6B; color:#FF6B6B; }

/* Inline context selects (monthly day, yearly month+day) */
.ctx-sel {
  background:#0f1e3a; border:1px solid #1e3050; border-radius:6px; color:#a0aec0;
  font-size:.78rem; font-family:inherit; padding:2px 4px; cursor:pointer; outline:none;
  -webkit-appearance:none; appearance:none; transition:border-color .15s,color .15s;
}
.ctx-sel:focus { border-color:#80d8ff; color:#eee; }
.ctx-inline { max-width:52px; }

.todo-delete { background:none; border:none; cursor:pointer; color:#2d3748; font-size:.85rem; padding:4px 5px; border-radius:6px; flex-shrink:0; transition:color .15s; line-height:1; }
.todo-delete:hover { color:#FF6B6B; }

.daily-progress {
  font-size:.78rem; color:#a0aec0; cursor:pointer; padding:2px 5px;
  border-radius:4px; border-bottom:1px solid #2d3748; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.daily-progress:hover { color:#eee; border-bottom-color:#80d8ff; }
.daily-progress-edit {
  width:40px; font-size:.78rem; font-family:inherit; color:#eee;
  background:transparent; border:none; border-bottom:1.5px solid #80d8ff;
  outline:none; text-align:center; padding:2px 2px;
  -moz-appearance:textfield;
}
.daily-progress-edit::-webkit-inner-spin-button,
.daily-progress-edit::-webkit-outer-spin-button { -webkit-appearance:none; }

/* ── Weekly days inline + popup ── */
.weekly-days-val {
  font-size:.78rem; cursor:pointer; padding:2px 4px;
  border-radius:4px; border-bottom:1px solid #2d3748; white-space:nowrap;
  letter-spacing:.08em; font-family:monospace;
  transition:border-color .15s;
}
.weekly-days-val:hover { border-bottom-color:#80d8ff; }
.weekly-days-val .wd     { color:#25395a; }
.weekly-days-val .wd.on  { color:#a0aec0; }

#days-dropdown {
  position:fixed; z-index:300; background:#0f3460; border:1px solid #1e4a7a;
  border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:flex; gap:4px; animation:dropIn .12s ease-out;
}
#days-dropdown.drop-up { animation:dropUp .12s ease-out; }
.day-pick {
  width:30px; height:30px; border-radius:50%; border:1.5px solid #1e3050;
  background:#16213e; color:#4a5568; font-size:.75rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.day-pick:hover  { border-color:#2a4a6e; color:#eee; }
.day-pick.active { border-color:#80d8ff; color:#80d8ff; background:rgba(128,216,255,.12); }

/* ── Shared repeat dropdown ── */
#repeat-dropdown {
  position:fixed; z-index:300; background:#0f3460; border:1px solid #1e4a7a;
  border-radius:10px; padding:4px; min-width:110px; box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:dropIn .12s ease-out;
}
@keyframes dropIn   { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
@keyframes dropUp   { from{opacity:0;transform:translateY(4px)}  to{opacity:1;transform:translateY(0)} }
#repeat-dropdown.drop-up { animation:dropUp .12s ease-out; }
#repeat-dropdown button { display:block; width:100%; background:none; border:none; color:#eee; font-size:.88rem; font-family:inherit; padding:8px 12px; text-align:left; cursor:pointer; border-radius:7px; transition:background .1s; }
#repeat-dropdown button:hover  { background:rgba(255,255,255,.08); }
#repeat-dropdown button.active { color:#80d8ff; }

/* ── Custom modal ── */
#custom-modal { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; }
#custom-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
#custom-panel {
  position:relative; background:#0f3460; border-radius:18px; padding:22px 20px;
  width:100%; max-width:360px; animation:modalIn .18s ease-out;
  max-height:80dvh; overflow-y:auto;
}
@keyframes modalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
#custom-panel h2 { font-size:1.05rem; font-weight:600; color:#80d8ff; margin-bottom:16px; }

/* Type tabs */
#custom-type-tabs { display:flex; gap:6px; margin-bottom:18px; }
.type-tab {
  flex:1; padding:6px 4px; border-radius:8px; border:1.5px solid #1e3050;
  background:#16213e; color:#6b7280; font-size:.8rem; font-family:inherit; cursor:pointer;
  transition:all .15s;
}
.type-tab:hover  { color:#eee; border-color:#2a4a6e; }
.type-tab.active { border-color:#80d8ff; color:#80d8ff; background:rgba(128,216,255,.08); }

/* Custom context area */
.custom-section { margin-bottom:16px; }
.custom-label { display:block; font-size:.72rem; color:#4a5568; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }

/* Mode toggle (Date / Day of week) */
.mode-toggle { display:flex; gap:6px; margin-bottom:10px; }
.mode-btn { padding:5px 12px; border-radius:20px; border:1.5px solid #1e3050; background:#16213e; color:#6b7280; font-size:.8rem; font-family:inherit; cursor:pointer; transition:all .15s; }
.mode-btn:hover  { color:#eee; }
.mode-btn.active { border-color:#4ecdc4; color:#4ecdc4; background:rgba(78,205,196,.1); }

/* Day-of-week buttons in modal */
.cm-days { display:flex; gap:6px; flex-wrap:wrap; }
.day-btn {
  width:36px; height:36px; border-radius:50%; border:1.5px solid #1e3050;
  background:#16213e; color:#6b7280; font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.day-btn:hover  { border-color:#2a4a6e; color:#eee; }
.day-btn.active { border-color:#80d8ff; color:#80d8ff; background:rgba(128,216,255,.1); }

/* Sub-controls: selects inside modal */
#cm-sub { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.cm-select {
  background:#16213e; border:1.5px solid #1e3050; border-radius:8px; color:#eee;
  font-size:.85rem; font-family:inherit; padding:6px 8px; cursor:pointer; outline:none;
  transition:border-color .15s; -webkit-appearance:none; appearance:none;
}
.cm-select:focus { border-color:#80d8ff; }

/* Once date input in modal */
.cm-text-input {
  background:#16213e; border:1.5px solid #1e3050; border-radius:8px; color:#eee;
  font-size:.9rem; font-family:inherit; padding:8px 12px; outline:none; width:120px;
  transition:border-color .15s;
}
.cm-text-input:focus { border-color:#80d8ff; }

/* Times stepper */
.times-stepper { display:flex; align-items:center; gap:14px; }
.times-stepper button {
  width:34px; height:34px; border-radius:50%; border:1.5px solid #1e3050;
  background:#16213e; color:#eee; font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.times-stepper button:hover { background:#1e3050; }
#custom-times-val { font-size:1.4rem; font-weight:600; min-width:24px; text-align:center; }

.custom-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.custom-actions button { padding:8px 20px; border-radius:10px; border:none; font-size:.9rem; font-family:inherit; cursor:pointer; transition:background .15s; }
#custom-cancel { background:#16213e; color:#a0aec0; }
#custom-cancel:hover { background:#1e3050; }
#custom-save   { background:#80d8ff; color:#1a1a2e; font-weight:600; }
#custom-save:hover { background:#a0e4ff; }

/* ── Celebration sheet ── */
#celeb-sheet { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; }
#celeb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); }
#celeb-panel {
  position:relative; width:100%; max-width:600px; margin:0 auto;
  background:#0f3460; border-radius:20px 20px 0 0; padding:20px 20px 36px;
  max-height:70dvh; overflow-y:auto; animation:sheetUp .22s ease-out;
}
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
#celeb-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
#celeb-panel-header h2 { font-size:1.1rem; font-weight:600; color:#80d8ff; }
#coin-counter { font-size:.88rem; color:#80d8ff; padding:4px 6px; }
#celeb-coins  { font-size:.88rem; color:#80d8ff; margin-right:auto; padding-left:4px; }

#celeb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.celeb-item { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border-radius:14px; padding:10px 6px; border:2px solid transparent; background:#16213e; transition:border-color .15s,transform .1s; }
.celeb-item:hover { border-color:#2a4a6e; transform:scale(1.03); }
.celeb-item.selected { border-color:#80d8ff; }
.celeb-item.locked { cursor:default; opacity:.45; }
.celeb-item.locked:hover { border-color:transparent; transform:none; }
.celeb-item.purchasable { cursor:default; }
.celeb-item.purchasable:hover { border-color:transparent; transform:none; }
.celeb-item.purchasable.affordable { cursor:pointer; border-color:rgba(255,215,0,.4); }
.celeb-item.purchasable.affordable:hover { border-color:#ffd700; transform:scale(1.03); }
.celeb-preview-wrap { position:relative; width:100%; }
.celeb-preview { width:100%; height:100px; border-radius:8px; background:#1a1a2e; display:block; }
.celeb-preview-placeholder { width:100%; height:100px; border-radius:8px; background:#0d1b2e; display:block; }
.celeb-lock-cover { position:absolute; inset:0; border-radius:8px; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.lock-cost { font-size:.75rem; color:#ffd700; margin-top:-4px; }
.celeb-item span { font-size:.78rem; color:#a0aec0; text-align:center; }
.celeb-item.selected span { color:#80d8ff; }

/* ── List groups ── */
.list-group-header {
  display:flex; align-items:center; gap:7px; padding:10px 4px 5px;
}
.list-group-name {
  font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#718096;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.list-group-name[data-share-id] { cursor:text; }
.list-group-name.editing {
  white-space:normal; overflow:visible; text-overflow:clip;
  background:rgba(128,216,255,.08); outline:1.5px solid #80d8ff;
  border-radius:4px; padding:1px 4px;
}
.list-group-item.done .list-group-header { opacity:.45; }
.list-group-item.done .list-group-name { text-decoration:line-through; }
.list-group-tasks {
  list-style:none; display:flex; flex-direction:column; gap:8px; padding-left:12px;
}
.list-group-children {
  list-style:none; display:flex; flex-direction:column; gap:8px; padding-left:12px; margin-top:8px;
}
.list-group-toggle {
  background:none; border:none; cursor:pointer; color:#5a7a95;
  padding:2px; border-radius:4px; display:flex; align-items:center; flex-shrink:0;
  transition:color .15s;
}
.list-group-toggle:hover { color:#80d8ff; }
.list-collapse-icon { display:block; transition:transform .18s; }
.list-collapse-icon.expanded { transform:rotate(90deg); }
.list-group-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.list-group-add, .list-group-copy, .list-group-delete {
  background:none; border:none; cursor:pointer; color:#5a7a95;
  padding:2px 4px; border-radius:5px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.list-group-add { font-size:1.4rem; font-weight:300; }
.list-group-delete { font-size:.85rem; }
.list-group-add:hover, .list-group-copy:hover { color:#80d8ff; background:rgba(255,255,255,.06); }
.list-group-delete:hover { color:#FF6B6B; background:rgba(255,255,255,.06); }

/* ── Drag & drop reordering ── */
.todo-item.drag-source, .list-group-item.drag-source { opacity:.3; }
.drag-ghost {
  background:#16213e; border:1.5px solid #80d8ff; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); opacity:.95; margin:0 !important;
}
.drop-line {
  position:fixed; height:3px; border-radius:2px; background:#80d8ff;
  box-shadow:0 0 6px rgba(128,216,255,.8); pointer-events:none; z-index:999;
}
.list-group-item.drop-target-list {
  outline:2px solid #80d8ff; outline-offset:-2px; border-radius:10px; background:rgba(128,216,255,.07);
}

/* ── Shared task items (inline in main list) ── */
.share-item { border-left:3px solid var(--share-color,#3498db); }
.share-check { background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; display:flex; align-items:center; transition:transform .15s; }
.share-check:active { transform:scale(.85); }
.share-text {
  flex:1; font-size:.95rem; line-height:1.35; min-width:0; cursor:text; outline:none;
  border-radius:4px; padding:1px 3px; margin:-1px -3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.share-text.editing { white-space:normal; overflow:visible; background:rgba(128,216,255,.08); outline:1.5px solid #80d8ff; }
.share-item.done .share-text { text-decoration:line-through; color:#6b7280; }

/* ── Refresh spin ── */
@keyframes spin { to { transform:rotate(360deg); } }
#refresh-btn.spinning { animation:spin .65s linear; }