/* ═══ Command Center PWA — Liquid Glass ═══════════════════════════ */
:root {
  /* dark, wallpaper-lit (default) */
  --ink: #eef3f7;
  --ink-dim: rgba(238, 243, 247, 0.62);
  --ink-faint: rgba(238, 243, 247, 0.38);
  --teal: #4fd8c4;
  --violet: #9d97e8;
  --gold: #e8c069;
  --success: #5fd8a2;

  --desk-base: #0b1220;
  --winbg1: rgba(30, 38, 56, 0.44);
  --winbg2: rgba(22, 28, 44, 0.52);
  --sidebg1: rgba(255, 255, 255, 0.05);
  --sidebg2: rgba(255, 255, 255, 0.02);
  --side-border: rgba(255, 255, 255, 0.08);

  --cardbg1: rgba(255, 255, 255, 0.09);
  --cardbg2: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.13);
  --card-topline: rgba(255, 255, 255, 0.2);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);

  --hairline: rgba(255, 255, 255, 0.08);
  --btnbg: rgba(255, 255, 255, 0.1);
  --btn-border: rgba(255, 255, 255, 0.16);
  --pillbg: rgba(255, 255, 255, 0.13);
  --chipbg: rgba(255, 255, 255, 0.07);
  --chip-border: rgba(255, 255, 255, 0.11);
  --barbg: rgba(18, 24, 38, 0.55);
  --bar-border: rgba(255, 255, 255, 0.12);

  --todo-bg: rgba(240, 138, 125, 0.2);    --todo-fg: #ffb3a8;
  --doing-bg: rgba(95, 216, 162, 0.18);   --doing-fg: #8ceebb;
  --done-bg: rgba(255, 255, 255, 0.08);   --done-fg: var(--ink-faint);
  --dream-bg: rgba(157, 151, 232, 0.2);   --dream-fg: #c5c1f5;
  --word-bg: rgba(232, 192, 105, 0.18);   --word-fg: #f2d694;
  --meeting-bg: rgba(232, 160, 90, 0.2);  --meeting-fg: #f0c48c;
  --biz-bg: rgba(79, 216, 196, 0.16);     --biz-fg: #8fe8db;
  --pers-bg: rgba(95, 216, 162, 0.16);    --pers-fg: #8ceebb;
  --high-fg: #ffb3a8; --med-fg: #f0c48c; --low-fg: var(--ink-faint);
  --live: #5fd8a2;

  --radius-card: 20px;
  --radius-pill: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Helvetica, Arial, sans-serif;
}
body[data-theme="light"] {
  --ink: #1c2634;
  --ink-dim: rgba(28, 38, 52, 0.66);
  --ink-faint: rgba(28, 38, 52, 0.42);
  --teal: #1e8d7d;
  --violet: #5d57b8;
  --gold: #9a7020;
  --success: #1f8a58;

  --desk-base: #dde6f2;
  --sidebg1: rgba(255, 255, 255, 0.35);
  --sidebg2: rgba(255, 255, 255, 0.18);
  --side-border: rgba(120, 140, 175, 0.16);
  --cardbg1: rgba(255, 255, 255, 0.55);
  --cardbg2: rgba(255, 255, 255, 0.34);
  --card-border: rgba(255, 255, 255, 0.8);
  --card-topline: rgba(255, 255, 255, 0.95);
  --card-shadow: 0 10px 30px rgba(60, 85, 130, 0.14);
  --hairline: rgba(30, 50, 80, 0.09);
  --btnbg: rgba(255, 255, 255, 0.55);
  --btn-border: rgba(255, 255, 255, 0.85);
  --pillbg: rgba(255, 255, 255, 0.65);
  --chipbg: rgba(255, 255, 255, 0.5);
  --chip-border: rgba(140, 160, 190, 0.25);
  --barbg: rgba(255, 255, 255, 0.62);
  --bar-border: rgba(255, 255, 255, 0.85);

  --todo-bg: rgba(200, 80, 60, 0.14);   --todo-fg: #9c3a2c;
  --doing-bg: rgba(35, 150, 95, 0.14);  --doing-fg: #186a44;
  --done-bg: rgba(40, 60, 90, 0.08);    --done-fg: var(--ink-faint);
  --dream-bg: rgba(110, 102, 215, 0.14); --dream-fg: #4a44a0;
  --word-bg: rgba(180, 135, 40, 0.14);  --word-fg: #7d5c18;
  --meeting-bg: rgba(180, 120, 40, 0.14); --meeting-fg: #8a5a18;
  --biz-bg: rgba(30, 141, 125, 0.14);   --biz-fg: #166055;
  --pers-bg: rgba(35, 150, 95, 0.14);   --pers-fg: #186a44;
  --high-fg: #9c3a2c; --med-fg: #8a5a18; --low-fg: var(--ink-faint);
  --live: #1f8a58;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: color 0.4s;
}

/* ── Wallpaper the glass refracts ─────────────────────────────── */
#wallpaper {
  position: fixed; inset: 0; z-index: -1;
  background: var(--desk-base);
  transition: background 0.6s;
}
#wallpaper::before, #wallpaper::after {
  content: ""; position: absolute; inset: -20%;
  filter: blur(70px); transition: opacity 0.8s;
}
#wallpaper[data-wall="aurora"]::before { background:
  radial-gradient(42% 55% at 22% 30%, #1e5f63 0%, transparent 70%),
  radial-gradient(38% 48% at 75% 22%, #3d3a7a 0%, transparent 70%),
  radial-gradient(50% 60% at 60% 85%, #14324d 0%, transparent 70%),
  radial-gradient(30% 40% at 88% 70%, #6a4a8f 0%, transparent 72%); }
#wallpaper[data-wall="dawn"]::before { background:
  radial-gradient(45% 60% at 20% 75%, #7a3b52 0%, transparent 70%),
  radial-gradient(40% 55% at 70% 20%, #8a6030 0%, transparent 70%),
  radial-gradient(55% 60% at 85% 80%, #2c2a55 0%, transparent 70%); }
#wallpaper[data-wall="deep"]::before { background:
  radial-gradient(50% 65% at 30% 25%, #123a5e 0%, transparent 72%),
  radial-gradient(45% 55% at 80% 65%, #0d4d49 0%, transparent 72%),
  radial-gradient(35% 45% at 55% 95%, #24244d 0%, transparent 70%); }
#wallpaper[data-wall="glory"]::before { background:
  radial-gradient(45% 58% at 25% 30%, #7a5c1e 0%, transparent 72%),
  radial-gradient(40% 50% at 75% 25%, #915f2d 0%, transparent 70%),
  radial-gradient(50% 55% at 60% 88%, #4a305f 0%, transparent 70%); }
body[data-theme="light"] #wallpaper[data-wall="aurora"]::before { background:
  radial-gradient(42% 55% at 22% 30%, #8fd9d0 0%, transparent 70%),
  radial-gradient(38% 48% at 75% 22%, #b6b1ef 0%, transparent 70%),
  radial-gradient(50% 60% at 60% 85%, #9cc4ea 0%, transparent 70%),
  radial-gradient(30% 40% at 88% 70%, #d3b6ea 0%, transparent 72%); }
body[data-theme="light"] #wallpaper[data-wall="dawn"]::before { background:
  radial-gradient(45% 60% at 20% 75%, #f3bccb 0%, transparent 70%),
  radial-gradient(40% 55% at 70% 20%, #f4dcae 0%, transparent 70%),
  radial-gradient(55% 60% at 85% 80%, #c4c0f0 0%, transparent 70%); }
body[data-theme="light"] #wallpaper[data-wall="deep"]::before { background:
  radial-gradient(50% 65% at 30% 25%, #a4cdf3 0%, transparent 72%),
  radial-gradient(45% 55% at 80% 65%, #9fe2d8 0%, transparent 72%),
  radial-gradient(35% 45% at 55% 95%, #c4c2ee 0%, transparent 70%); }
body[data-theme="light"] #wallpaper[data-wall="glory"]::before { background:
  radial-gradient(45% 58% at 25% 30%, #f4dcae 0%, transparent 72%),
  radial-gradient(40% 50% at 75% 25%, #f0c99e 0%, transparent 70%),
  radial-gradient(50% 55% at 60% 88%, #d3b6ea 0%, transparent 70%); }
#wallpaper::after {
  background: radial-gradient(24% 30% at 50% 50%, rgba(255,255,255,0.1), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
body[data-theme="light"] #wallpaper::after {
  background: radial-gradient(24% 30% at 50% 50%, rgba(255,255,255,0.5), transparent 70%);
}
@keyframes drift { from { transform: translate(-8%, -6%) scale(1); } to { transform: translate(10%, 8%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { #wallpaper::after { animation: none; } }

/* ── App frame: top bar / content / bottom tabs ───────────────── */
#app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: max(env(safe-area-inset-top), 10px) 16px 10px;
  background: var(--barbg);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-bottom: 1px solid var(--bar-border);
}
.topbar .title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.topbar .spacer { flex: 1; }
.iconbtn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--btnbg); border: 1px solid var(--btn-border);
  color: var(--ink); cursor: pointer; font-size: 15px;
}
.iconbtn:active { transform: scale(0.94); }

.sync-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  font-size: 12px; color: var(--ink-dim);
  background: var(--chipbg); border: 1px solid var(--chip-border);
  cursor: pointer;
}
.sync-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: gray; }
.sync-chip.synced .dot { background: var(--live); box-shadow: 0 0 8px var(--live); }
.sync-chip.syncing .dot { background: var(--teal); }
.sync-chip.offline .dot { background: #e8a05a; }

.content { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px; }
.view { display: none; animation: rise 0.3s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

.tabbar {
  flex: none;
  display: flex; justify-content: space-around;
  padding: 6px 4px max(env(safe-area-inset-bottom), 6px);
  background: var(--barbg);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-top: 1px solid var(--bar-border);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-family: inherit; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.02em; transition: color 0.2s;
}
.tab .glyph { font-size: 19px; line-height: 1; }
.tab[aria-current="true"] { color: var(--teal); }

/* ── View headers ─────────────────────────────────────────────── */
.view-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.view-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.view-head .sub { font-size: 12.5px; color: var(--ink-faint); }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--cardbg1), var(--cardbg2));
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 var(--card-topline), var(--card-shadow);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 16px; margin-bottom: 14px; overflow: hidden;
}
.card h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-dim); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.card h3 .tint { width: 8px; height: 8px; border-radius: 3px; }
.big { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.big small { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); margin-left: 8px; }

.row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 2px; border-bottom: 1px solid var(--hairline);
}
.row:last-child { border-bottom: none; }
.row .name { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0; }
.row .name.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.row.done .name { text-decoration: line-through; opacity: 0.55; }

.pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--radius-pill); border: 1px solid var(--chip-border);
  white-space: nowrap;
}
.pill.todo { background: var(--todo-bg); color: var(--todo-fg); }
.pill.doing { background: var(--doing-bg); color: var(--doing-fg); }
.pill.done { background: var(--done-bg); color: var(--done-fg); }
.pill.dream { background: var(--dream-bg); color: var(--dream-fg); }
.pill.word, .pill.voice { background: var(--word-bg); color: var(--word-fg); }
.pill.meeting { background: var(--meeting-bg); color: var(--meeting-fg); }
.pill.business { background: var(--biz-bg); color: var(--biz-fg); }
.pill.personal { background: var(--pers-bg); color: var(--pers-fg); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden;
  object-fit: cover;
}
.avatar.company { border-radius: 9px; }
img.avatar { object-fit: cover; }

.tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; margin-right: 4px;
  border-radius: var(--radius-pill); background: var(--chipbg);
  border: 1px solid var(--chip-border); color: var(--ink-dim);
}

.empty { text-align: center; padding: 40px 20px; color: var(--ink-faint); font-size: 13px; }

/* ── Sheets (settings) ────────────────────────────────────────── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-scrim.open { display: flex; }
.sheet {
  width: 100%; max-width: 520px; max-height: 90%;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--winbg1), var(--winbg2));
  backdrop-filter: blur(40px) saturate(1.7);
  -webkit-backdrop-filter: blur(40px) saturate(1.7);
  border: 1px solid var(--card-border);
  border-radius: 24px 24px 0 0;
  padding: 20px 20px max(env(safe-area-inset-bottom), 20px);
}
.sheet h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sheet .hint { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 16px; line-height: 1.5; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: var(--chipbg);
  border: 1px solid var(--chip-border); border-radius: 12px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.seg { display: flex; gap: 4px; padding: 3px; background: var(--chipbg); border-radius: var(--radius-pill); }
.seg button {
  flex: 1; padding: 8px; border: none; border-radius: var(--radius-pill);
  background: none; color: var(--ink-dim); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--pillbg); color: var(--ink); }
.wall-dots { display: flex; gap: 10px; }
.wall-dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.wall-dot[aria-pressed="true"] { border-color: var(--ink); }
.wall-dot.aurora { background: linear-gradient(135deg, #1e5f63, #3d3a7a); }
.wall-dot.dawn { background: linear-gradient(135deg, #7a3b52, #8a6030); }
.wall-dot.deep { background: linear-gradient(135deg, #123a5e, #0d4d49); }
.wall-dot.glory { background: linear-gradient(135deg, #7a5c1e, #915f2d); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 18px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  color: var(--ink); background: var(--btnbg); border: 1px solid var(--btn-border);
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(180deg, rgba(79, 216, 196, 0.92), rgba(53, 178, 160, 0.92));
  border-color: rgba(255, 255, 255, 0.4); color: #062621;
}
.btn.full { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 8px; }
.status-line { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }
.status-line.error { color: #e8a05a; }

.btn.danger { color: #ff7a6d; border-color: rgba(255, 122, 109, 0.35); }
.field textarea {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: var(--chipbg);
  border: 1px solid var(--chip-border); border-radius: 12px; resize: vertical;
}
.field textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 4px 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.check-list { max-height: 180px; overflow-y: auto; }
.repeat-fields { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-dim); }
.repeat-fields[hidden] { display: none; }

/* ── Task list interactivity ──────────────────────────────────── */
.check {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  border: 1.5px solid var(--ink-faint); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.check.checked { background: var(--success); border-color: transparent; }
.check.checked::after { content: "✓"; color: #062621; font-size: 13px; font-weight: 800; }
.row .name.tap, .row .meta.tap, .row .pill.tap { cursor: pointer; }

/* ── Floating action button ───────────────────────────────────── */
.fab {
  position: fixed; right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  width: 56px; height: 56px; border-radius: 50%; z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.4); cursor: pointer;
  font-size: 26px; font-weight: 300; line-height: 1; color: #062621;
  background: linear-gradient(180deg, rgba(79, 216, 196, 0.95), rgba(53, 178, 160, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(48, 178, 160, 0.4);
}
.fab:active { transform: scale(0.94); }
.fab[hidden] { display: none; }