/* ===== Orbit design tokens ===== */
:root {
  --bg: #f6f6fb; --surface: #ffffff; --surface-2: #f1f1f7; --surface-3: #e8e8f1;
  --border: #e3e3ee; --text: #16161f; --muted: #6b6b80; --track: #ececf4;
  --accent: #6d5efc; --accent-2: #5546f0; --accent-soft: #6d5efc1a; --on-accent: #fff;
  --study: #8b5cf6; --work: #0d9488; --personal: #e8890c;
  --ok: #16a34a; --warn: #d97706; --danger: #dc2626;
  --shadow: 0 1px 2px #1a1a3308, 0 4px 16px #1a1a330a; --shadow-lg: 0 20px 60px #10103040;
  --r: 14px; --r-sm: 9px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c14; --surface: #15151f; --surface-2: #1c1c29; --surface-3: #262636;
    --border: #2a2a3b; --text: #ececf5; --muted: #9393a8; --track: #252535;
    --accent: #8b7cf6; --accent-2: #a294ff; --accent-soft: #8b7cf622; --on-accent: #0c0c14;
    --study: #a78bfa; --work: #2dd4bf; --personal: #fbbf24;
    --ok: #4ade80; --warn: #fbbf24; --danger: #f87171;
    --shadow: 0 1px 2px #0006, 0 6px 20px #0004; --shadow-lg: 0 24px 70px #000a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0c14; --surface: #15151f; --surface-2: #1c1c29; --surface-3: #262636;
  --border: #2a2a3b; --text: #ececf5; --muted: #9393a8; --track: #252535;
  --accent: #8b7cf6; --accent-2: #a294ff; --accent-soft: #8b7cf622; --on-accent: #0c0c14;
  --study: #a78bfa; --work: #2dd4bf; --personal: #fbbf24;
  --ok: #4ade80; --warn: #fbbf24; --danger: #f87171;
  --shadow: 0 1px 2px #0006, 0 6px 20px #0004; --shadow-lg: 0 24px 70px #000a;
  color-scheme: dark;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 700; } h2 { font-size: 20px; } h3 { font-size: 15px; font-weight: 650; } h4 { font-size: 14px; margin: 10px 0 4px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
.ic { flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; justify-content: center; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.spacer { flex: 1; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warn { color: var(--warn); }
kbd { font: 11px var(--font); padding: 1px 6px; border-radius: 5px; background: #ffffff26; margin-left: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Buttons & inputs ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); font-weight: 550; font-size: 14px; white-space: nowrap; transition: background .15s, transform .1s, border-color .15s; color: var(--text); }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.icon { width: 38px; padding: 0; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.icon.sm { width: 30px; padding: 0; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.disabled { opacity: .5; pointer-events: none; }
input, select, textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
input[type=color] { padding: 2px; height: 40px; }
textarea { resize: vertical; line-height: 1.5; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 550; color: var(--muted); }
.form label.inline { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 450; }
.form h3 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { border: 0; padding: 0; margin: 0; }
.drop { position: relative; display: flex !important; align-items: center; gap: 10px; padding: 14px; border: 1.5px dashed var(--border); border-radius: var(--r-sm); color: var(--muted); cursor: pointer; }
.drop:hover { border-color: var(--accent); color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.big { flex-direction: column; padding: 40px 20px; text-align: center; gap: 6px; }

/* ===== Shell ===== */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px; border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; color: var(--text); padding: 2px 6px; letter-spacing: -.02em; }
.nav { display: grid; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--muted); font-weight: 550; font-size: 14px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); }
.nav-item.active .ic { color: var(--c, var(--accent)); }
.nav-item[style*="--c"] .ic { color: var(--c); }
.nav-item em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--c, var(--accent)); color: var(--on-accent); border-radius: 99px; padding: 0 7px; line-height: 18px; }
.nav-kids { display: grid; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1.5px solid var(--border); }
.nav-kids a { padding: 5px 10px; font-size: 13.5px; color: var(--muted); border-radius: 7px; }
.nav-kids a:hover { color: var(--text); background: var(--surface-2); }
.nav-kids a.active { color: var(--text); font-weight: 600; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 10px 4px; font-weight: 650; }
.side-foot { margin-top: auto; display: grid; gap: 6px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-left: auto; opacity: .5; }
.ai-dot.on { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.focus-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-weight: 650; font-variant-numeric: tabular-nums; }
.focus-pill small { font-weight: 500; opacity: .8; margin-left: auto; }
.main-col { min-width: 0; }
#view { outline: none; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 32px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.page.enter { animation: pageIn .25s ease; }
@keyframes pageIn { from { transform: translateY(6px); } }
.bottombar, .fab { display: none; }
.m-only { display: none !important; }

/* ===== Header bar ===== */
.topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; padding: 12px 32px; min-height: 60px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); min-width: 0; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--text); }
.crumbs .here { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.crumbs .ic { opacity: .5; }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; transition: color .2s; }
.saved .ic { color: var(--ok); } .saved.saving .ic { color: var(--muted); animation: spin 1s linear infinite; }
.saved.error, .saved.error .ic { color: var(--danger); }
.search-btn { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13.5px; min-width: 230px; }
.search-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); }
.search-btn kbd { margin-left: auto; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.avatar.sm { width: 34px; height: 34px; font-size: 12.5px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
a.avatar.sm:hover { box-shadow: 0 0 0 2px var(--accent); }

/* ===== Sidebar: XP card & profile ===== */
.nav-item em.muted-count { background: var(--surface-3); color: var(--muted); }
.xp-card { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface-2); color: var(--text); }
.xp-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.xp-top { display: flex; align-items: center; gap: 8px; font-size: 13px; } .xp-top > .ic { color: var(--accent); }
.xp-top span:not(.streak-chip) { flex: 1; min-width: 0; }
.streak-chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12.5px; color: var(--warn); }
.xp-track { display: block; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.xp-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--personal)); transition: width .6s cubic-bezier(.3, .7, .2, 1); }
.xp-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.profile { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); }
.profile:hover, .profile.active { background: var(--surface-2); }
.profile-txt { display: grid; flex: 1; min-width: 0; line-height: 1.25; } .profile-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-txt small { color: var(--muted); font-size: 12px; } .profile > .ic { color: var(--muted); }
.profile .ai-dot { margin: 0; }

/* XP feedback */
.xp-pop { position: fixed; right: 28px; bottom: 28px; z-index: 65; display: grid; justify-items: end; gap: 0; pointer-events: none; animation: xpUp 1.9s cubic-bezier(.2, .8, .2, 1) forwards; }
.xp-pop b { font-size: 20px; font-weight: 800; color: var(--accent); text-shadow: 0 2px 12px var(--accent-soft); }
.xp-pop span { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); }
@keyframes xpUp { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 12% { opacity: 1; transform: translateY(0) scale(1.05); } 75% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-34px); } }
.toast.level { background: linear-gradient(90deg, var(--accent), var(--personal)); color: #fff; display: flex; align-items: center; gap: 8px; font-size: 15px; }

/* ===== Search palette ===== */
#modal-root .modal.search-modal { width: min(640px, 100%); padding: 0; gap: 0; align-self: start; margin-top: 10vh; overflow: hidden; }
.search-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-input .ic { color: var(--accent); }
.search-input input { border: 0; background: transparent; font-size: 17px; padding: 4px 0; box-shadow: none !important; }
.search-input kbd { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin: 0; }
.search-results { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.search-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; padding: 10px 10px 4px; }
.search-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; color: var(--text); }
.search-item .ic { color: var(--muted); flex-shrink: 0; }
.search-item span { display: grid; min-width: 0; } .search-item b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item.active, .search-item:hover { background: var(--accent-soft); } .search-item.active .ic { color: var(--accent); }
.search-empty { padding: 20px; text-align: center; }

/* ===== Daily welcome ===== */
#modal-root .modal.welcome-modal { width: min(440px, 100%); padding: 28px 26px 20px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--personal) 16%, transparent), transparent 70%), var(--surface); }
.welcome { display: grid; justify-items: center; text-align: center; gap: 12px; }
.welcome-line { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text); max-width: 340px; font-style: italic; }
.welcome-flame { position: relative; display: grid; justify-items: center; margin: 6px 0 -2px; }
.flame-ic { color: var(--personal); filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--personal) 55%, transparent)); animation: flicker 2.4s ease-in-out infinite; }
.welcome-flame.hot .flame-ic { color: #f97316; }
.welcome-flame b { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-top: -4px; font-variant-numeric: tabular-nums; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.welcome h2 { font-size: 21px; }
.week-dots { display: flex; gap: 8px; margin: 4px 0; }
.week-dots span { display: grid; justify-items: center; gap: 4px; }
.week-dots i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--border); color: #fff; }
.week-dots .on i { background: var(--personal); border-color: var(--personal); }
.week-dots .today i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--personal) 30%, transparent); }
.week-dots small { font-size: 11px; color: var(--muted); font-weight: 600; }
.welcome-level { width: 100%; display: grid; gap: 7px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); text-align: left; }
.welcome-level > div { display: flex; gap: 6px; align-items: baseline; font-size: 14px; } .welcome-level .muted { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xp-earned { color: var(--accent); font-weight: 650; font-size: 12.5px; }
.welcome-today { font-size: 14px; color: var(--muted); }
.welcome .btn.block { margin-top: 4px; }
.welcome-opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.welcome-opt input { width: 15px; height: 15px; }

/* ===== My Day v2 ===== */
.today { display: grid; gap: 18px; }
.today-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.greet-ic { color: var(--personal); display: inline-flex; }
.today-head .eyebrow { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
.today-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.today-main, .today-side { display: grid; gap: 18px; min-width: 0; }
.today-side { position: sticky; top: 78px; }
.glance { display: flex; gap: 20px; align-items: center; background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.glance-main { flex: 1; display: grid; gap: 8px; min-width: 0; }
.glance-main h2 { font-size: 22px; }
.glance-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.glance-stats span { display: inline-flex; align-items: center; gap: 6px; } .glance-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.glance-stats .streak, .glance-stats .streak .ic { color: var(--warn); } .glance-stats .streak b { color: var(--warn); }
.glance-rings { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.glance-rings .orbit-rings { width: 170px; }
.ring-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ring-legend a { display: grid; grid-template-columns: 10px auto auto; column-gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; color: var(--text); font-size: 13.5px; }
.ring-legend a:hover { background: var(--surface-2); }
.ring-legend .dot { width: 9px; height: 9px; } .ring-legend b { font-variant-numeric: tabular-nums; }
.ring-legend small { grid-column: 2 / 4; color: var(--muted); font-size: 11.5px; margin-top: -2px; }
.card.intention { display: grid; gap: 4px; padding: 14px 18px; }
.card-head .count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; }
.tabs-line { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin: -4px 0 4px; }
.tabs-line button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 10px; font-size: 14px; font-weight: 550; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-line button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs-line button span { font-size: 11.5px; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.task.overdue { position: relative; }
.task.overdue::before { content: ''; position: absolute; left: -18px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger); }
.pri-card .task.overdue { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 7%, transparent), transparent 60%); margin: 0 -18px; padding-left: 22px; padding-right: 18px; }
.pri-card .task.overdue::before { left: 0; }
.over-badge { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.flag { display: inline-flex; align-items: center; gap: 4px; align-self: center; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.flag.p3 { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.flag.p2 { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.pad { padding: 14px 4px; }
.inline-add { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; margin-top: 4px; border-top: 1px solid var(--border); color: var(--muted); }
.inline-add input { border: 0; background: transparent; padding: 6px 0; box-shadow: none !important; }
.inline-add.boxed { border: 1px solid var(--border); border-radius: 11px; padding: 4px 12px; margin: 0; background: var(--surface-2); }
.thoughts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.thoughts li { font-size: 14px; padding: 8px 12px; border-radius: 9px; background: var(--surface-2); border-left: 3px solid var(--personal); }
.ritual-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ritual-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.r-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; flex-shrink: 0; }
.r-name { flex: 1; display: grid; font-weight: 550; font-size: 14.5px; min-width: 0; }
.r-name small { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); font-size: 11.5px; font-weight: 600; }
.r-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 60%, var(--border)); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: .15s; }
.r-check:hover { background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.ritual-list li.on .r-check { background: var(--c); border-color: var(--c); color: #fff; }
.ritual-list li.on .r-name { color: var(--muted); text-decoration: line-through; }
.ritual-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ritual-foot .mini-track { flex: 1; } .ritual-foot small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ritual-foot .mini-track span { background: var(--personal); }
.routine-mini { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.focus-card { display: grid; gap: 10px; background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--c) 10%, transparent), transparent), var(--surface); }
.focus-card .card-head { margin-bottom: 0; }
.fc-time { text-align: center; font-size: 50px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.focus-card.running .fc-time { color: var(--c); }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 99px; justify-self: center; }
.sound-toggle:hover { background: var(--surface-2); color: var(--text); } .sound-toggle.on { color: var(--accent); background: var(--accent-soft); }
.sound-seg { margin-top: 4px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-strip button { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.week-strip button:hover { background: var(--surface-2); }
.week-strip small { font-size: 11px; color: var(--muted); font-weight: 650; } .week-strip b { font-size: 15px; }
.week-strip i { width: 5px; height: 5px; border-radius: 50%; } .week-strip i.has { background: var(--accent); }
.week-strip .today b { color: var(--accent); }
.week-strip .sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.week-day { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.week-items { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.week-items li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); cursor: pointer; }
.week-items li span { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 1px; } .week-items li b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-items li.more { border: 0; background: none; display: block; }
.week-card > .btn { margin-top: 2px; }
.today-side .stats { grid-template-columns: 1fr 1fr; }
.today-side .snap-card { padding: 8px; }
/* ===== Tasks page ===== */
.page-head .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.task-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-tools .seg:not(.view-seg) button span { font-size: 11.5px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--muted); }
.task-tools .seg:not(.view-seg) button.on span { background: var(--accent-soft); color: var(--accent); }
.tool-select { width: auto; height: 38px; padding: 0 30px 0 12px; border-radius: 10px; background-color: var(--surface); font-size: 13.5px; font-weight: 550; }
.tool-select.sm { height: 30px; font-size: 13px; padding: 0 26px 0 10px; border-radius: 8px; }
.view-seg button span { font-size: 13px; }
.find { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); min-width: 220px; }
.find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.find input { border: 0; background: transparent; padding: 0; height: 100%; box-shadow: none !important; }
.overdue-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, var(--surface)), var(--surface)); }
.overdue-bar > .ic { color: var(--danger); } .overdue-bar > div { flex: 1; display: grid; min-width: 180px; }
.select-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: -4px 0 -8px 4px; cursor: pointer; width: fit-content; }
.tgroup.danger .card-head h3 { color: var(--danger); }
.tlist .trow { flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 4px; }
.tlist .trow > .task-body { min-width: 160px; }
.tsel { display: grid; place-items: center; width: 18px; opacity: 0; transition: opacity .12s; cursor: pointer; }
.tsel input { width: 16px; height: 16px; }
.trow:hover .tsel, .trow.selected .tsel, .tlist:has(.selected) .tsel, .tsel:focus-within { opacity: 1; }
@media (hover: none) { .tsel { opacity: .6; } }
.trow.selected { background: var(--accent-soft); border-radius: 10px; }
.trow.kb { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }
.task.flash, .kcard.flash { animation: taskFlash 2.2s ease; border-radius: 10px; }
@keyframes taskFlash { 0%, 60% { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 2px var(--accent); } 100% { background: transparent; box-shadow: none; } }
.tlist .task-body { cursor: pointer; }
.tgroup .task.overdue::before { left: -18px; }
.task-meta .sp { display: inline-flex; align-items: center; gap: 5px; }
.ttag { color: var(--accent); font-weight: 600; font-size: 12px; }
.rep, .subc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.rep .ic { color: var(--accent); }
.sub-prog { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.sub-prog:hover { background: var(--surface-2); color: var(--text); } .sub-prog .mini-track { width: 46px; }
.row-menu-btn { color: var(--muted); }
.subs { flex-basis: 100%; margin: 2px 0 4px 58px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.subs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.subs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.subs label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; cursor: pointer; flex: 1; }
.subs li.on span { text-decoration: line-through; color: var(--muted); }
.sub-add { display: flex; align-items: center; gap: 8px; color: var(--muted); padding-top: 4px; }
.sub-add input { border: 0; background: transparent; padding: 5px 0; font-size: 14px; box-shadow: none !important; }
.show-done { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--muted); font-weight: 550; padding: 12px; }
.show-done:hover { color: var(--text); }
.task-board .kcard { border-left: 3px solid var(--c); }
.task-board .kcard.over { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), var(--shadow); }
.task-board .kcard.kb { outline: 2px solid var(--accent); }
.kmeta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.bulk-bar { position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.bulk-bar b { margin-right: 6px; font-size: 14px; }
.kbd-hint { margin-top: 4px; } .kbd-hint kbd, .shortcuts kbd, .row-menu kbd { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); margin: 0; }
.row-menu { position: fixed; z-index: 55; width: 260px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; gap: 6px; animation: pop .14s ease; }
.rm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin-top: 2px; }
.rm-row { display: flex; flex-wrap: wrap; gap: 4px; }
.rm-row button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 550; background: var(--surface-2); }
.rm-row button:hover { background: var(--surface-3); } .rm-row button.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rm-date { display: flex; align-items: center; gap: 8px; color: var(--muted); } .rm-date input { padding: 5px 8px; font-size: 13px; }
.row-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.row-menu > button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; }
.row-menu > button span { flex: 1; } .row-menu > button:hover, .row-menu > button:focus-visible { background: var(--surface-2); }
.row-menu > button:last-child { color: var(--danger); }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: center; font-size: 14px; } .shortcuts dd { margin: 0; }
.day-picks { display: flex; gap: 6px; align-items: center; } .day-picks.hidden { display: none; }
.day-picks legend { font-size: 13px; color: var(--muted); font-weight: 550; margin-right: 8px; float: left; }
.day-picks label { display: block !important; cursor: pointer; } .day-picks input { position: absolute; opacity: 0; }
.day-picks span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border); font-size: 13px; font-weight: 650; color: var(--text); }
.day-picks input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.day-picks input:focus-visible + span { outline: 2px solid var(--accent); }

/* ===== Habits ===== */
.hidden { display: none !important; }
.habit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.habit-stats.four { grid-template-columns: repeat(4, 1fr); }
.hstat { display: grid; gap: 4px; }
.hstat b { font-size: 32px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hstat b small { font-size: 15px; font-weight: 500; color: var(--muted); }
.habit-board { padding-bottom: 6px; }
.hg-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.hg { display: grid; min-width: 600px; }
.hg.wide { min-width: max-content; }
.hg-row { display: grid; grid-template-columns: minmax(180px, 1.7fr) repeat(var(--n), minmax(40px, 1fr)) 64px; align-items: center; gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.hg-row.compact { grid-template-columns: minmax(200px, 260px) repeat(var(--n), 24px) 56px; gap: 3px; }
.hg-row[draggable=true] { cursor: grab; } .hg-row.dragging { opacity: .4; } .hg-row.drop-over { box-shadow: inset 0 2px 0 var(--accent); }
.hg-head { border-bottom: 1px solid var(--border); padding-top: 0; }
.hg-head .hg-label { font-size: 11.5px; }
.hg-day { display: grid; justify-items: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hg-day b { font-size: 13px; color: var(--text); } .hg-day.today, .hg-day.today b { color: var(--accent); }
.hg-row.compact .hg-day b { font-size: 11px; }
.hg-label { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); padding-right: 8px; }
.hg-label:hover b { color: var(--accent); }
.h-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 18px; flex-shrink: 0; }
.h-ic.big { width: 60px; height: 60px; font-size: 32px; border-radius: 16px; }
.h-name { display: grid; min-width: 0; } .h-name b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-name small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-group { display: flex; align-items: center; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; color: var(--muted); padding: 14px 0 4px; }
.hc { position: relative; justify-self: center; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--muted); background: transparent; transition: .12s; font-weight: 700; font-size: 13px; }
.hc.sm { width: 22px; height: 22px; border-radius: 6px; border-width: 1px; }
button.hc:hover { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.hc.today { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.hc.on { background: var(--c); border-color: var(--c); color: #fff; }
.hc.part { border-color: color-mix(in srgb, var(--c) 60%, var(--border)); color: var(--text); }
.hc.part .ring { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.hc.part small { position: relative; font-size: 11px; font-weight: 700; }
.hc.skip { color: var(--muted); border-style: dashed; }
.hc.freeze { color: #38bdf8; border-color: #38bdf8; background: color-mix(in srgb, #38bdf8 12%, transparent); }
.hc.miss { border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); }
.hc.off { border: 0; } .hc.off i { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.hg-streak { display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hg-streak.hot { color: var(--warn); } .hg-streak small { font-weight: 600; font-size: 10.5px; }
.habit-board .inline-add { margin-top: 8px; }
.hg-paused { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: grid; gap: 6px; }
.hg-paused .eyebrow { display: flex; align-items: center; gap: 6px; }
.paused-row { display: flex; align-items: center; gap: 12px; opacity: .8; } .paused-row a { flex: 1; color: var(--text); font-weight: 550; }
.habit-bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.rhythm-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 150px; margin-bottom: 10px; }
.rb { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; }
.rb-pct { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; height: 14px; }
.rb-track { width: 30px; max-width: 100%; border-radius: 8px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.rb-track span { display: block; width: 100%; border-radius: 8px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--personal))); transition: height .5s; }
.rb small { font-size: 12px; color: var(--muted); font-weight: 600; } .rb.today small { color: var(--accent); }
.consistency p { font-size: 14.5px; line-height: 1.6; }
.freeze-inv { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.freeze-inv > span:last-child { display: grid; } .freeze-inv small { font-size: 12px; }
.freezes { display: flex; gap: 4px; } .freezes i { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); opacity: .45; font-size: 14px; }
.freezes i.on { background: color-mix(in srgb, #38bdf8 18%, transparent); color: #38bdf8; opacity: 1; }
.tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.archived { padding: 6px 14px; } .archived .link-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--border); }
.habit-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface)); }
.habit-hero > div:nth-child(2) { flex: 1; min-width: 200px; } .habit-hero p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.today-check { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.today-check > span:first-child { font-weight: 650; }
.heatmap { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.hm-days, .hm-col { display: grid; grid-template-rows: 16px repeat(7, 18px); gap: 4px; }
.hm-days small, .hm-col small { font-size: 10.5px; color: var(--muted); line-height: 16px; white-space: nowrap; }
.hm-days { margin-right: 4px; }
.hm { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--surface-2); border: 0; padding: 0; }
button.hm:hover { outline: 2px solid var(--c); }
.hm.l0 { background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.hm.l1 { background: color-mix(in srgb, var(--c) 28%, var(--surface-2)); } .hm.l2 { background: color-mix(in srgb, var(--c) 50%, var(--surface-2)); }
.hm.l3 { background: color-mix(in srgb, var(--c) 75%, var(--surface-2)); } .hm.l4 { background: var(--c); }
.hm.ls { background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 3px, var(--surface-2) 3px, var(--surface-2) 6px); }
.hm.lf { background: color-mix(in srgb, #38bdf8 45%, var(--surface-2)); }
.hm.off { background: transparent; box-shadow: inset 0 0 0 1px var(--border); opacity: .5; } .hm.future { background: transparent; }
.hm.today { box-shadow: 0 0 0 2px var(--accent); } .hm.noted::after { content: ''; display: block; width: 5px; height: 5px; margin: 1px 0 0 12px; border-radius: 50%; background: var(--text); }
.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; } .hm-legend span { display: inline-flex; align-items: center; gap: 6px; } .hm-legend .hm { width: 12px; height: 12px; border-radius: 3px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.badge { display: grid; justify-items: center; gap: 6px; text-align: center; opacity: .4; filter: grayscale(1); }
.badge.earned { opacity: 1; filter: none; }
.badge-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 3px solid var(--border); }
.badge.earned .badge-ring { border-color: var(--personal); background: color-mix(in srgb, var(--personal) 16%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--personal) 30%, transparent); }
.badge.earned .badge-ring.m30 { border-color: var(--accent); background: var(--accent-soft); } .badge.earned .badge-ring.m100 { border-color: #f43f5e; } .badge.earned .badge-ring.m365 { border-color: #22d3ee; }
.badge-ring b { font-size: 17px; } .badge small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.milestone-pop { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 4px; }
.badge-big { position: relative; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 48px; background: radial-gradient(circle, color-mix(in srgb, var(--personal) 30%, transparent), transparent 70%); border: 4px solid var(--personal); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.badge-big b { position: absolute; bottom: -10px; font-size: 15px; background: var(--personal); color: #111; padding: 2px 10px; border-radius: 99px; }
.reminder-row { display: flex; gap: 8px; align-items: center; } .reminder-row input { width: auto; }
.habit-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .habit-notes li { display: grid; gap: 2px; font-size: 14px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; }
.starter { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); text-align: left; transition: .12s; }
.starter:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.starter > span:nth-child(2) { flex: 1; display: grid; min-width: 0; } .starter small { color: var(--muted); font-size: 12px; }
.starter > .ic { color: var(--accent); } .starter.added { opacity: .6; } .starter.added > .ic { color: var(--ok); }
.row-menu .rm-row.amt { align-items: center; justify-content: space-between; } .row-menu .rm-row.amt button { width: 36px; justify-content: center; font-size: 16px; }
.row-menu .mi { font-style: normal; width: 15px; text-align: center; font-weight: 700; }
.row-menu > button small { font-size: 11.5px; }
.row-menu > button:last-child:not([data-op=clear]):not([data-op=delete]) { color: inherit; }
.r-check.part { border-color: var(--c); color: var(--text); background: conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) var(--p), transparent 0); }
.r-check small { font-size: 11px; font-weight: 700; }
a.r-name { color: var(--text); } a.r-name:hover { color: var(--accent); }

/* ===== Goals ===== */
.goals-reached { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); } .goals-reached b { color: var(--text); } .goals-reached .ic { color: var(--personal); }
.pace-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: -6px; }
.pace-pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.pace-pill.ahead { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pace-pill.ontrack { background: var(--accent-soft); color: var(--accent); }
.pace-pill.behind { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.pace-pill.late { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.pace-pill.done { background: color-mix(in srgb, var(--personal) 20%, transparent); color: var(--personal); }
.goal-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.goal-card { display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.goal-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c); opacity: .8; }
.goal-card:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); }
.gc-top { display: flex; align-items: center; gap: 6px; margin: -4px -6px -2px 0; }
.gc-space { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c, var(--muted)); }
.tag.auto { background: var(--accent-soft); color: var(--accent); text-transform: none; }
.gc-title { font-size: 17px; font-weight: 650; color: var(--text); line-height: 1.3; }
.gc-title:hover { color: var(--accent); }
.gc-num { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gc-num b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-num span { color: var(--muted); font-size: 14px; } .gc-num em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 13px; color: var(--c); }
.gc-num.big b { font-size: 46px; } .gc-num.big .pace-pill { margin-left: 8px; align-self: center; }
.gc-bar { position: relative; height: 8px; border-radius: 99px; background: var(--track); overflow: visible; }
.gc-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--accent)); transition: width .5s cubic-bezier(.3, .7, .2, 1); }
.gc-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--text); opacity: .45; transform: translateX(-1px); }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.gc-pace { font-size: 12.5px; color: var(--muted); } .gc-pace.late { color: var(--danger); font-weight: 600; }
.gc-foot .btn { max-width: 55%; } .gc-foot .btn .trunc { max-width: 140px; display: inline-block; }
.pace-done { opacity: .9; }
.review-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, var(--accent-soft), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.review-bar > .ic { color: var(--accent); } .review-bar > div { flex: 1; display: grid; min-width: 200px; }
.trophy-shelf { display: grid; gap: 10px; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.trophy-card { display: grid; gap: 3px; padding: 14px; border-radius: 14px; color: var(--text); background: linear-gradient(160deg, color-mix(in srgb, var(--personal) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--personal) 30%, var(--border)); }
.trophy-card:hover { transform: translateY(-2px); transition: transform .15s; }
.t-ic { font-size: 26px; } .trophy-card small { color: var(--muted); font-size: 12px; }
.goal-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface)); }
.gh-main { flex: 1; min-width: 260px; display: grid; gap: 10px; } .gh-main h1 { font-size: 26px; }
.hstat b.sm { font-size: 22px; }
.goal-chart { width: 100%; height: auto; display: block; }
.ch-target { stroke: var(--border); stroke-dasharray: 4 4; } .ch-ideal { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; opacity: .7; }
.ch-area { fill: color-mix(in srgb, var(--c) 16%, transparent); } .ch-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ch-proj { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }
.ch-dot { fill: var(--c); stroke: var(--surface); stroke-width: 3; }
.ch-label { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.ch-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--c); } .ch-legend .l-ideal { border-top: 2px dashed var(--muted); } .ch-legend .l-proj { border-top: 2px dotted var(--c); }
.ms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .ms-list label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.ms-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
.ms-list li.on .ms-n { background: var(--ok); color: #fff; } .ms-list li.on label span:last-child { text-decoration: line-through; color: var(--muted); }
.ms-list input { width: 16px; height: 16px; }
.goal-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.goal-log li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); } .goal-log li > span:nth-child(2) { flex: 1; display: grid; }
.gl-amt { min-width: 64px; font-weight: 750; color: var(--ok); font-variant-numeric: tabular-nums; } .gl-amt.neg { color: var(--danger); }
.why { font-size: 16px; font-style: italic; line-height: 1.55; }
.reward-card { background: linear-gradient(160deg, color-mix(in srgb, var(--personal) 10%, var(--surface)), var(--surface)); }
.goal-pop { width: 300px; } .log-form { gap: 10px; } .log-form label { font-size: 12.5px; }
.type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-pick label { display: block !important; cursor: pointer; } .type-pick input { position: absolute; opacity: 0; }
.type-pick span { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); color: var(--text); height: 100%; }
.type-pick span .ic { color: var(--accent); margin-bottom: 4px; } .type-pick small { color: var(--muted); font-weight: 450; font-size: 12px; }
.type-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); } .type-pick input:focus-visible + span { outline: 2px solid var(--accent); }
.goal-win .trophy { font-size: 72px; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--personal) 50%, transparent)); }
.reward-line { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--personal) 14%, transparent); }
.review-form { gap: 12px; max-height: 60vh; overflow-y: auto; }
.review-item { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--c); }
.ri-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.goal-nudge { display: grid; gap: 8px; } .goal-nudge .card-head { margin-bottom: 0; }
.gn-title { font-weight: 650; color: var(--text); } .gn-title:hover { color: var(--accent); }
.goal-nudge p { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ===== Notes v2 ===== */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.note-grid.list { grid-template-columns: 1fr; gap: 8px; }
.note-card { display: grid; gap: 8px; align-content: start; position: relative; overflow: hidden; padding: 16px; transition: border-color .15s, transform .15s; }
.note-card[style*="--nc"] { border-left: 4px solid var(--nc); background: linear-gradient(135deg, color-mix(in srgb, var(--nc) 8%, var(--surface)), var(--surface) 60%); }
.note-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.note-card.pinned { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow); }
.nc-top { display: flex; align-items: center; gap: 6px; margin: -4px -6px -2px 0; }
.nc-kind, .nc-pin { color: var(--muted); display: inline-flex; } .nc-pin { color: var(--accent); }
.nc-main { display: grid; gap: 6px; color: var(--text); justify-items: start; }
.nc-main h3 { font-size: 16.5px; line-height: 1.3; } .nc-main:hover h3 { color: var(--accent); }
.nc-prev { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; line-height: 1.5; }
.nc-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.note-grid.list .note-card { grid-template-columns: 1fr auto; padding: 12px 16px; } .note-grid.list .nc-top { grid-column: 1 / -1; } .note-grid.list .nc-main { grid-auto-flow: column; align-items: center; justify-content: start; }
.note-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.note-mini li { position: relative; } .note-mini a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--text); padding-right: 40px; }
.note-mini a:hover { background: var(--surface-2); } .note-mini a > span { display: grid; min-width: 0; } .note-mini a .ic { color: var(--accent); flex-shrink: 0; }
.note-mini b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-mini li:hover .note-del { opacity: 1; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tpl { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); text-align: left; transition: .12s; }
.tpl:hover { border-color: var(--accent); background: var(--accent-soft); } .tpl .ic { color: var(--accent); margin-bottom: 4px; } .tpl small { color: var(--muted); font-size: 12px; }
.tpl.ink .ic { color: var(--personal); }
.note-shell { display: grid; gap: 16px; align-items: start; }
.note-shell.has-pages { grid-template-columns: 230px minmax(0, 1fr); }
.note-main { display: grid; gap: 14px; min-width: 0; }
.nb-pages { position: sticky; top: 78px; padding: 12px; }
.nb-pages ol { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; }
.nb-pages li { display: flex; align-items: center; border-radius: 9px; }
.nb-pages li a { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: var(--text); font-size: 14px; min-width: 0; }
.nb-pages li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nb-pages li a .ic { color: var(--muted); flex-shrink: 0; }
.nb-pages li:hover { background: var(--surface-2); } .nb-pages li.on { background: var(--accent-soft); } .nb-pages li.on a { color: var(--accent); font-weight: 600; } .nb-pages li.on a .ic { color: var(--accent); }
.nb-pages li .btn { opacity: 0; } .nb-pages li:hover .btn, .nb-pages li.on .btn { opacity: 1; }
.nb-pages li.drop-over { box-shadow: inset 0 2px 0 var(--accent); }
.nb-add { display: flex; gap: 6px; flex-wrap: wrap; }
.note-editor[style], .note-shell[style*="--nc"] .note-editor { border-top: 3px solid var(--nc, var(--border)); }
.note-toolbar select { max-width: 170px; }
.btn.on-pin { color: var(--accent); background: var(--accent-soft); }
.page-title { border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--muted); padding: 0 22px 6px; box-shadow: none !important; }
.rt-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; position: sticky; top: 61px; z-index: 5; background: var(--surface); }
.rt-toolbar::-webkit-scrollbar { display: none; }
.rt-toolbar button { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; color: var(--muted); font-size: 14px; display: inline-grid; place-items: center; flex-shrink: 0; }
.rt-toolbar button:hover { background: var(--surface-2); color: var(--text); } .rt-toolbar mark { padding: 0 3px; border-radius: 3px; }
.rt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.rt-hint { margin-left: auto; white-space: nowrap; padding-left: 10px; } .rt-hint kbd { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin: 0 2px; }
.note-editor { overflow: clip; grid-template-columns: minmax(0, 1fr); }
.rt-editor { position: relative; min-height: 55vh; padding: 18px 22px 40px; outline: none; font-size: 15.5px; line-height: 1.7; }
.rt-editor:empty::before, .rt-editor > p:only-child:has(br:only-child)::before { content: attr(data-placeholder); color: var(--muted); opacity: .7; pointer-events: none; position: absolute; }
.rt-editor > p:only-child:has(br:only-child)::before { content: 'Start writing… Use # for headings, - for bullets, [ ] for a checklist, / for blocks, [[ to link a note.'; }
.rt-editor h1, .rt-view h1 { font-size: 26px; margin: 18px 0 6px; } .rt-editor h2, .rt-view h2 { font-size: 21px; margin: 16px 0 4px; } .rt-editor h3, .rt-view h3 { font-size: 17px; margin: 14px 0 2px; }
.rt-editor p, .rt-view p { margin: 2px 0; } .rt-editor ul, .rt-editor ol, .rt-view ul, .rt-view ol { padding-left: 24px; margin: 4px 0; }
.rt-editor blockquote, .rt-view blockquote { margin: 8px 0; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--muted); }
.rt-editor pre, .rt-view pre { background: var(--surface-2); padding: 12px 14px; border-radius: 10px; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; margin: 8px 0; }
.rt-editor code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.rt-editor hr, .rt-view hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.rt-editor mark, .rt-view mark { background: rgba(250, 204, 21, .4); color: inherit; padding: 0 2px; border-radius: 3px; }
.rt-editor img, .rt-view img { max-width: 100%; border-radius: 10px; margin: 8px 0; display: block; }
.rt-editor table, .rt-view table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.rt-editor td, .rt-editor th, .rt-view td, .rt-view th { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; min-width: 60px; }
.rt-editor th, .rt-view th { background: var(--surface-2); text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rt-editor table.cornell td:first-child, .rt-view table.cornell td:first-child { width: 32%; background: color-mix(in srgb, var(--study) 7%, transparent); font-weight: 600; }
.rt-editor .callout-block, .rt-view .callout-block { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.rt-editor ul.todo, .rt-view ul.todo { list-style: none; padding-left: 2px; }
.rt-editor ul.todo > li, .rt-view ul.todo > li { position: relative; padding-left: 28px; }
.rt-editor ul.todo > li::before, .rt-view ul.todo > li::before { content: ''; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--muted); cursor: pointer; }
.rt-editor ul.todo > li[data-done="true"], .rt-view ul.todo > li[data-done="true"] { color: var(--muted); text-decoration: line-through; }
.rt-editor ul.todo > li[data-done="true"]::before, .rt-view ul.todo > li[data-done="true"]::before { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--ok); }
.rt-editor a, .rt-view a { color: var(--accent); }
a.note-link { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-weight: 550; cursor: pointer; }
a.note-link::before { content: '↗'; font-size: .8em; }
.slash-menu, .sel-bar { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 12px; }
.slash-menu[hidden], .sel-bar[hidden] { display: none; }
.slash-menu { width: 260px; max-height: 320px; overflow-y: auto; padding: 6px; display: grid; gap: 1px; }
.slash-menu button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; text-align: left; }
.slash-menu button span { flex: 1; } .slash-menu button.on, .slash-menu button:hover { background: var(--accent-soft); } .slash-menu button .ic { color: var(--muted); }
.slash-menu kbd { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin: 0; }
.sm-empty { padding: 8px; }
.sel-bar { display: flex; align-items: center; gap: 2px; padding: 4px; }
.sel-bar button { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 600; justify-content: center; }
.sel-bar button:hover { background: var(--surface-2); } .sel-bar mark { background: rgba(250, 204, 21, .5); padding: 0 3px; border-radius: 3px; }
.sb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.note-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 22px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.nt-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.note-links { display: grid; gap: 10px; } .note-links > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .note-links .eyebrow { width: 100%; }
.nl { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text); font-size: 13px; } .nl:hover { color: var(--accent); } .nl.done { text-decoration: line-through; color: var(--muted); }
.ver-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 14px; max-height: 60vh; }
.ver-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.ver-list button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; } .ver-list button:hover { background: var(--surface-2); } .ver-list button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ver-preview { overflow-y: auto; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 14.5px; line-height: 1.6; }
.rm-row.colors { gap: 6px; padding: 2px 4px; } .nc-dot { width: 22px !important; height: 22px; padding: 0 !important; border-radius: 50% !important; background: var(--nc) !important; box-shadow: inset 0 0 0 1px var(--border); display: grid !important; place-items: center; color: var(--muted); }
.nc-dot.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent) !important; }
body.note-focus .sidebar, body.note-focus .topbar, body.note-focus .bottombar, body.note-focus .fab, body.note-focus .back, body.note-focus .nb-pages, body.note-focus .note-links, body.note-focus .note-toolbar .btn:not([data-act=noteFocus]), body.note-focus .note-toolbar select, body.note-focus .note-toolbar .seg, body.note-focus .ai-badge { display: none !important; }
body.note-focus .app { grid-template-columns: 1fr; } body.note-focus .page { max-width: 820px; padding-top: 40px; }
body.note-focus .note-shell.has-pages { grid-template-columns: 1fr; } body.note-focus .note-editor { border: 0; box-shadow: none; background: transparent; }
body.note-focus .rt-toolbar { top: 0; } body.note-focus .rt-editor { font-size: 17px; line-height: 1.8; }

/* ===== Study home (round 1) ===== */
.eyebrow.accent { color: var(--accent); }
.hub-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hub-head > :not(.btn) { min-width: 0; max-width: 100%; }
.hub-head.course > div:not(.row) { flex: 1 1 220px; }
.hub-head h2 { font-size: 21px; margin-top: 2px; }
.hub-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); flex-shrink: 0; }
.focus-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, color-mix(in srgb, var(--study) 12%, var(--surface)), var(--surface)); }
.focus-banner > div { display: grid; gap: 2px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.ss { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-left: 1px solid var(--border); align-content: start; }
.ss:first-child { border-left: 0; } .ss > span { font-size: 13px; color: var(--muted); } .ss b { font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; } .ss b small { font-size: 15px; color: var(--muted); font-weight: 500; }
.ss > .ic { position: absolute; right: 16px; top: 18px; color: var(--muted); opacity: .7; } .ss a { font-size: 12.5px; font-weight: 600; }
.courses-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: -6px; }
.course-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.course-card2 { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); border-top: 3px solid var(--c); }
.cc-cover { position: relative; display: grid; gap: 4px; padding: 14px 16px 16px; color: #fff; min-height: 130px; align-content: start; }
.cc-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px); pointer-events: none; }
.cc-cover > * { position: relative; z-index: 1; }
.cc-cover-top { display: flex; justify-content: space-between; align-items: center; }
.cc-chip { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(4px); }
.btn.on-cover { color: #fff; background: rgba(0,0,0,.25); } .btn.on-cover:hover { background: rgba(0,0,0,.45); }
.cc-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; color: #fff; margin-top: 8px; }
.cc-title h3 { font-size: 19px; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.35); } .cc-title:hover h3 { text-decoration: underline; }
.cc-cover p { font-size: 13.5px; opacity: .9; }
.cc-body { display: grid; gap: 10px; padding: 14px 16px; align-content: start; }
.cc-prog { display: flex; justify-content: space-between; font-size: 13.5px; } .cc-prog span { font-weight: 600; } .cc-prog b { font-weight: 600; }
.course-card2 .mini-track span { background: var(--c); }
.cc-next2 { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); text-align: left; color: var(--text); }
.cc-next2 .ic { color: var(--c); } .cc-next2 span { display: grid; gap: 3px; } .cc-next2 b { font-weight: 600; font-size: 14px; }
.cc-next2 em, .ep-row em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); width: fit-content; }
.cc-next2 em.soon, .ep-row em.soon { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .cc-next2 em.late { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.cc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.cc-facts li { display: flex; align-items: center; gap: 8px; min-width: 0; } .cc-facts li > span, .cc-facts li > a:not(.btn) { overflow: hidden; text-overflow: ellipsis; } .cc-facts .ic { flex-shrink: 0; }
.cc-facts a[data-act] { cursor: pointer; }
.cc-links { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); margin: 4px -16px -14px; }
.cc-links a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 4px; font-size: 13px; color: var(--muted); font-weight: 550; }
.cc-links a:hover { background: var(--surface-2); color: var(--text); }
.cc-none { padding: 8px 0; }
.tt-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(110px, 1fr)); gap: 8px; overflow-x: auto; }
.tt-col { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 12px; background: var(--surface-2); min-height: 90px; }
.tt-col.today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.tt-day { font-size: 12px; color: var(--muted); font-weight: 650; } .tt-day b { color: var(--text); }
.tt-class { display: grid; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-left: 3px solid var(--c); color: var(--text); }
.tt-class b { font-size: 13px; } .tt-class small { font-size: 11.5px; color: var(--muted); } .tt-free { font-size: 12px; color: var(--muted); opacity: .7; }
.gs-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.gs-controls label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 550; }
.wk-bars { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.wk { flex: 1 0 58px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.wk:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.wk-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wk-track { width: 70%; height: 110px; border-radius: 6px; background: var(--surface-3); display: flex; align-items: flex-end; overflow: hidden; }
.wk-fill { width: 100%; border-radius: 6px 6px 0 0; background: color-mix(in srgb, #dc2626 calc(35% + var(--r) * 65%), #fecaca); }
.wk b { font-size: 15px; font-variant-numeric: tabular-nums; } .wk small { font-size: 10.5px; color: var(--accent); font-weight: 650; min-height: 13px; }
.wk.past { opacity: .6; } .wk.now { border-color: #22d3ee; box-shadow: 0 0 0 1px #22d3ee; } .wk.sel { border-style: dashed; border-color: var(--text); background: var(--surface-3); }
.wk-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.wk-grad { display: inline-block; width: 60px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #fecaca, #dc2626); }
.wk-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; } .wk-key.now { border: 2px solid #22d3ee; } .wk-key.sel { border: 2px dashed var(--text); }
.busy-callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); margin-bottom: 12px; }
.busy-callout > .ic { color: var(--danger); } .busy-callout p { flex: 1; min-width: 220px; font-size: 14px; }
.sel-week header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sel-week header > div { display: grid; }
.sw-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sw-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--c); cursor: pointer; }
.sw-list li:hover { background: var(--surface-2); } .sw-list li > span { flex: 1; display: grid; } .sw-list li.done b { text-decoration: line-through; color: var(--muted); }
.pts { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
details.how { margin-top: 10px; } details.how summary { cursor: pointer; font-size: 13.5px; color: var(--muted); font-weight: 550; } details.how p { margin-top: 6px; line-height: 1.55; }
.up-split { grid-template-columns: 1.4fr 1fr; }
.up-next { display: grid; gap: 10px; } .up-next .card-head { margin-bottom: 0; }
.un-list { list-style: none; margin: 0; padding: 0; display: grid; }
.un-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border); position: relative; flex-wrap: wrap; }
.un-row.overdue { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 8%, transparent), transparent 70%); }
.un-row.overdue::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--danger); }
.un-row.done .un-main b { text-decoration: line-through; color: var(--muted); }
.un-main { flex: 1; min-width: 180px; display: grid; gap: 3px; text-align: left; padding-left: 6px; } .un-main b { font-weight: 600; font-size: 14.5px; }
.un-main .over-badge { width: fit-content; }
.type-chip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.type-chip.exam, .type-chip.quiz { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.type-chip.assignment, .type-chip.project { background: var(--accent-soft); color: var(--accent); }
.status-sel { width: auto; min-width: 128px; padding: 6px 28px 6px 10px; font-size: 13px; font-weight: 600; border-radius: 9px; }
.status-sel.s-doing { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); color: var(--warn); }
.status-sel.s-submitted, .status-sel.s-graded { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); color: var(--ok); }
.exam-prep { display: grid; gap: 4px; align-content: start; }
.ep-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 4px 12px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--c); }
.ep-row > div { flex: 1; display: grid; gap: 3px; min-width: 160px; } .ep-row small { display: flex; align-items: center; gap: 6px; }
.course-pick { width: auto; max-width: 100%; font-size: 19px; font-weight: 650; padding: 4px 34px 4px 8px; border: 1px solid transparent; background-color: transparent; margin-left: -8px; }
.course-pick:hover { border-color: var(--border); background-color: var(--surface); }
.arch-note { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; color: var(--muted); }
.course-hero2 { position: relative; display: grid; gap: 6px; padding: 22px 22px 26px; border-radius: var(--r); color: #fff; overflow: hidden; }
.course-hero2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(100% 120% at 100% 0%, rgba(255,255,255,.18), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px); pointer-events: none; }
.course-hero2 > * { position: relative; z-index: 1; } .course-hero2 .cc-chip { width: fit-content; } .course-hero2 h1 { font-size: 28px; text-shadow: 0 1px 10px rgba(0,0,0,.35); } .course-hero2 p { opacity: .9; }
.course-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); width: fit-content; max-width: 100%; overflow-x: auto; }
.course-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 550; white-space: nowrap; }
.course-tabs a:hover { color: var(--text); background: var(--surface-2); } .course-tabs a.on { background: var(--surface-3); color: var(--text); }
.course-tabs a span { font-size: 11.5px; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.class-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.class-info .card { display: grid; gap: 6px; align-content: start; background: var(--surface-2); } .class-info b { font-size: 16px; }
.course-desc { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.weights { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.weights li { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 56px; gap: 10px; align-items: center; font-size: 14px; } .weights b { text-align: right; }
.w-bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; } .w-bar span { display: block; height: 100%; background: var(--study); border-radius: inherit; }
.syl-review h3 { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: baseline; }
.meet-list, .w-list, .it-list { display: grid; gap: 8px; }
.meet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .meet-row input[type=time] { width: auto; }
.meet-row .day-picks span { width: 28px; height: 28px; font-size: 12px; }
.w-row { display: grid; grid-template-columns: 1fr 90px auto auto; gap: 8px; align-items: center; } .w-row input { padding: 7px 10px; }
.w-foot { display: flex; justify-content: space-between; align-items: center; }
.it-row { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); } .it-row.off { opacity: .55; }
.it-top { display: flex; gap: 8px; align-items: center; } .it-top input[type=checkbox] { accent-color: var(--accent); } .it-top input:not([type]) , .it-top input[name^=i_t] { flex: 1; }
.it-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .it-meta > * { padding: 7px 10px; font-size: 13.5px; }
.evidence summary { cursor: pointer; font-size: 12.5px; color: var(--muted); } .evidence p { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 4px; padding: 8px 10px; border-left: 2px solid var(--border); }
.inline.reviewed { padding: 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-weight: 550; }
.cover-pick { display: flex; gap: 8px; flex-wrap: wrap; } .cover-pick label { display: block !important; cursor: pointer; } .cover-pick input { position: absolute; opacity: 0; }
.cover-pick span { display: block; width: 56px; height: 36px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.cover-pick input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cover-up { width: 56px; height: 36px; border-radius: 9px; border: 1.5px dashed var(--border); display: grid !important; place-items: center; color: var(--muted); }
.agenda li.class { background: color-mix(in srgb, var(--c) 6%, transparent); border-left-style: dashed; }
.tl-item.class .tl-card { border-left-style: double; border-left-width: 4px; }

.inbox-card { display: flex; align-items: center; gap: 14px; color: var(--text); }
.inbox-card > span { flex: 1; display: grid; } .inbox-card > .ic:first-child { color: var(--personal); }
.inbox-card:hover { border-color: color-mix(in srgb, var(--personal) 50%, var(--border)); }

/* ===== Common blocks ===== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
.page-head p.muted { margin-top: 4px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; font-weight: 550; width: fit-content; }
.back:hover { color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.card > h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h3 { display: flex; align-items: center; gap: 8px; }
.card-head a.small { display: inline-flex; align-items: center; color: var(--muted); }
.card-head a.small:hover { color: var(--accent); }
.section-head { margin: 4px 2px -6px; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; min-width: 0; }
.row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill-tabs { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 0; padding: 2px 16px; }
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.pill-tabs a.active { background: var(--text); color: var(--bg); border-color: transparent; }
.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 12px; color: var(--muted); }
.empty h3 { color: var(--text); }
.empty .btn { margin-top: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 6px; color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); text-transform: capitalize; white-space: nowrap; }
.tag.ok, .tag.paid { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tag.sent { background: var(--accent-soft); color: var(--accent); }
.tag.late { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; width: fit-content; }
.ai-badge.on { background: var(--accent-soft); color: var(--accent); }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 10px 0; font-size: 14px; }
.orbit-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--track); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mini-track { display: block; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.mini-track span { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: inherit; transition: width .4s; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; color: var(--text); border-bottom: 1px solid var(--border); }
.link-list li:last-child a { border-bottom: 0; }
.link-list a:hover { color: var(--accent); }
.link-list.card { padding: 6px 16px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; width: fit-content; }
.seg button, .seg label span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 550; color: var(--muted); cursor: pointer; }
.seg button { white-space: nowrap; }
.seg button.on, .seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg label { display: block !important; } .seg input { position: absolute; opacity: 0; pointer-events: none; }

/* ===== Modal & toast ===== */
#modal-root { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; }
#modal-root.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: #0a0a1866; backdrop-filter: blur(3px); animation: fade .15s; }
.modal { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); animation: pop .18s ease; display: grid; gap: 16px; }
.modal.wide { width: min(760px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fade { from { opacity: 0; } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head p { margin-top: 4px; font-size: 14px; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.confirm-layer { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.modal.confirm { width: min(400px, 100%); gap: 14px; }
.confirm-msg { font-size: 15.5px; font-weight: 550; line-height: 1.45; }
.btn.danger-solid { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger-solid:hover { filter: brightness(1.08); }
.acct-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.acct-plan { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.signin .form { text-align: left; }
.signin-code { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.signin-links { justify-content: center; }
.signin-note { display: flex; gap: 6px; align-items: flex-start; justify-content: center; text-align: left; }
.tab-warn { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-left: 4px solid var(--warn); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; }
.tab-warn span { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 60; background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 550; opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); color: #fff; } .toast.err { background: var(--danger); color: #fff; }

/* ===== Tasks ===== */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.task { display: flex; align-items: flex-start; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.check { width: 21px; height: 21px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 70%, var(--border)); display: grid; place-items: center; color: transparent; flex-shrink: 0; margin-top: 1px; transition: .15s; }
.check:hover { background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.check.on { background: var(--c); border-color: var(--c); color: #fff; }
.check.on .ic { animation: pop .2s; }
.task-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.task-title { font-weight: 520; overflow-wrap: anywhere; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: center; font-size: 12.5px; color: var(--muted); }
.due { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.due.over { color: var(--danger); font-weight: 600; }
.pri { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); font-weight: 600; }

/* ===== My Day ===== */
.today-head h1 { font-size: 30px; }
.today-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.today-grid > * { grid-column: span 6; }
.today-grid .hero { grid-column: span 7; display: flex; gap: 24px; align-items: center; background:
  radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.today-grid .pri-card { grid-column: span 5; grid-row: span 2; }
.today-grid .sched-card { grid-column: span 7; }
.today-grid .snap-card { grid-column: span 12; padding: 10px; }
.hero-rings { width: 210px; flex-shrink: 0; }
.orbit-rings { width: 100%; height: auto; display: block; }
.orbit-arc { transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .2, 1); }
.orbit-pct { font-size: 34px; font-weight: 750; fill: var(--text); letter-spacing: -.02em; }
.orbit-sub { font-size: 12px; fill: var(--muted); }
.hero-side { flex: 1; display: grid; gap: 18px; min-width: 0; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.legend li, .legend a { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 5px 6px; border-radius: 8px; }
.legend a:hover { background: var(--surface-2); }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend .dot { width: 10px; height: 10px; }
.intention { display: grid; gap: 6px; }
.intention input { background: transparent; border: 0; border-bottom: 1.5px dashed var(--border); border-radius: 0; padding: 6px 0; font-size: 16px; font-weight: 550; }
.intention input:focus { box-shadow: none; border-bottom-color: var(--accent); }
.live-timer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--work) 14%, transparent); color: var(--work); font-weight: 550; }
.live-timer span { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tl-item { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: stretch; }
.tl-time { font-size: 13px; font-weight: 650; padding-top: 8px; font-variant-numeric: tabular-nums; display: grid; align-content: start; }
.tl-time small { color: var(--muted); font-weight: 500; }
.tl-card { display: grid; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 11%, var(--surface)); border-left: 3px solid var(--c); cursor: pointer; }
.tl-card small { color: var(--muted); font-size: 12px; }
.tl-item.block .tl-card { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--c) 60%, transparent); border-left-width: 3px; }
.tl-item.past { opacity: .5; }
.now-line { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.now-line::after { content: ''; flex: 1; height: 1.5px; background: var(--danger); }
.upcoming { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.upcoming li { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; cursor: pointer; }
.upcoming li:hover { background: var(--surface-2); }
.up-date { width: 44px; height: 44px; border-radius: 10px; display: grid; place-content: center; text-align: center; font-size: 11px; text-transform: uppercase; font-weight: 650; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); line-height: 1.1; flex-shrink: 0; }
.up-date b { font-size: 17px; }
.up-body { display: grid; min-width: 0; } .up-body strong { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-body small { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 11px; color: var(--text); }
.stat:hover { background: var(--surface-2); }
.stat span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.stat b { font-size: 21px; font-variant-numeric: tabular-nums; }
.habit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.habit-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--border); font-size: 13.5px; font-weight: 550; transition: .15s; }
.habit-chip:hover { border-color: var(--c); }
.habit-chip.on { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); color: var(--text); }
.habit-chip .ic { color: var(--c); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.checklist label { display: flex; gap: 10px; align-items: center; padding: 6px 4px; cursor: pointer; border-radius: 7px; }
.checklist label:hover { background: var(--surface-2); }
.checklist input:checked + * , .checklist label:has(input:checked) { color: var(--muted); text-decoration: line-through; }

/* ===== Study ===== */
.semester-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); width: 100%; }
.semester-bar.empty { color: var(--muted); border-style: dashed; justify-content: center; gap: 8px; }
.sb-track { flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.sb-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--study), var(--accent)); border-radius: inherit; }
.sb-label { font-size: 13px; white-space: nowrap; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.course-card { position: relative; display: grid; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.course-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.course-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
.cc-top { display: flex; justify-content: space-between; align-items: center; }
.cc-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c); text-transform: uppercase; }
.cc-next { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.cc-next span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-next b { font-size: 12px; color: var(--c); }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.heat-day { display: grid; justify-items: center; padding: 6px 0; border-radius: 9px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.heat-day small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.heat-day.l1 { background: color-mix(in srgb, var(--study) 18%, var(--surface-2)); }
.heat-day.l2 { background: color-mix(in srgb, var(--study) 35%, var(--surface-2)); }
.heat-day.l3 { background: color-mix(in srgb, var(--study) 55%, var(--surface-2)); }
.heat-day.l4 { background: var(--study); color: #fff; } .heat-day.l4 small { color: #fffc; }
.tool-links { display: grid; padding: 6px; }
.tool-links a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; color: var(--text); }
.tool-links a:hover { background: var(--surface-2); }
.tool-links a span { flex: 1; } .tool-links a .ic:first-child { color: var(--study); }
.welcome-hero { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 24px; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--study) 18%, transparent), transparent), var(--surface); }
.welcome-hero h2 { font-size: 26px; max-width: 520px; } .welcome-hero p { max-width: 520px; }
.wh-art { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: color-mix(in srgb, var(--study) 18%, transparent); color: var(--study); }
.course-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 20px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--surface)), var(--surface)); border: 1px solid var(--border); }
.course-head p { margin-top: 4px; max-width: 640px; }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.week { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.week.current { border-color: var(--study); box-shadow: 0 0 0 3px color-mix(in srgb, var(--study) 20%, transparent); }
.week.past { opacity: .55; }
.week header { display: flex; align-items: center; gap: 8px; }
.load { width: 34px; height: 6px; border-radius: 99px; margin-left: auto; background: var(--track); }
.load.l1 { background: color-mix(in srgb, var(--study) 35%, var(--track)); } .load.l2 { background: color-mix(in srgb, var(--study) 60%, var(--track)); }
.load.l3 { background: var(--warn); } .load.l4 { background: var(--danger); }
.week ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.week li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; font-size: 13px; padding: 5px 8px; border-radius: 7px; background: color-mix(in srgb, var(--c) 10%, transparent); border-left: 3px solid var(--c); cursor: pointer; }
.week li span { color: var(--muted); font-size: 11.5px; font-weight: 600; padding-top: 1px; }
.week li b { font-weight: 550; }
.week li.exam b { color: var(--danger); } .week li.session { background: transparent; border-left-style: dashed; } .week li.done b { text-decoration: line-through; color: var(--muted); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.deck { position: relative; display: grid; gap: 4px; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); margin-top: 8px; transition: transform .15s; }
.deck:hover { transform: translateY(-2px); }
.deck-stack, .deck-stack::before { position: absolute; left: 10px; right: 10px; height: 10px; top: -6px; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--c) 40%, var(--surface)); z-index: -1; }
.deck-stack::before { content: ''; left: 10px; right: 10px; top: -5px; background: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.deck-due { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.deck-due.has { color: var(--c); }
.add-card { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; padding: 12px; }
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.card-list li { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.cl-front { font-weight: 600; } .cl-back { color: var(--muted); font-size: 14px; }
.box-pips { font-size: 9px; letter-spacing: 1px; color: var(--study); }
.review { max-width: 640px; width: 100%; margin: 0 auto; display: grid; gap: 14px; }
.review-progress { height: 6px; background: var(--track); border-radius: 99px; overflow: hidden; }
.review-progress span { display: block; height: 100%; background: var(--study); transition: width .3s; }
.flashcard { position: relative; height: 320px; perspective: 1200px; width: 100%; }
.fc-face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; padding: 32px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 24px; font-weight: 650; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.fc-face small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.fc-back { transform: rotateY(180deg); font-size: 19px; font-weight: 500; background: linear-gradient(160deg, color-mix(in srgb, var(--study) 12%, var(--surface)), var(--surface)); }
.flashcard.flipped .fc-front { transform: rotateY(-180deg); } .flashcard.flipped .fc-back { transform: rotateY(0); }
.rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rate .btn { height: 54px; flex-direction: column; gap: 0; }
.rate small { font-size: 11px; opacity: .6; }
.review:not(.is-flipped) .rate { visibility: hidden; }
.review.is-flipped .flip-hint { visibility: hidden; }
.rate-again { color: var(--danger); } .rate-good { color: var(--accent); } .rate-easy { color: var(--ok); }
.review-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px; color: var(--ok); }
.review-done h2, .review-done p { color: var(--text); } .review-done p { color: var(--muted); }
.quiz { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: q; }
.q { display: grid; gap: 12px; counter-increment: q; }
.q-text { font-weight: 600; font-size: 16px; } .q-text::before { content: counter(q) '. '; color: var(--muted); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--border); font-size: 14px; transition: .15s; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.opt:disabled { cursor: default; }
.explain { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.quiz-score { display: flex; align-items: center; gap: 18px; }
.ring-label { font-size: 15px; font-weight: 700; fill: var(--text); }
.extract-list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.extract-row { display: grid; grid-template-columns: auto 1fr 150px 120px; gap: 8px; align-items: center; }
.extract-row.simple { grid-template-columns: auto 1fr; }
.extract-row input:not([type=checkbox]), .extract-row select { padding: 7px 9px; font-size: 14px; }

/* ===== AI chat ===== */
.chat-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.boundary { display: grid; gap: 10px; position: sticky; top: 20px; }
.boundary h3 { margin: 0; }
.chat { display: flex; flex-direction: column; padding: 0; height: min(70vh, 720px); min-height: 420px; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; }
.msg ul { margin: 6px 0; padding-left: 20px; } .msg h4 { margin: 8px 0 2px; }
.msg code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.chat-empty { margin: auto; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--accent); }
.chat-empty h3 { color: var(--text); font-size: 18px; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; }
.chip-btn { padding: 8px 13px; border-radius: 99px; border: 1px solid var(--border); font-size: 13.5px; color: var(--text); background: var(--surface); }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input textarea { resize: none; min-height: 42px; max-height: 160px; field-sizing: content; }
.chat-input .btn { height: 42px; width: 42px; flex-shrink: 0; }

/* ===== Notes & docs ===== */
.note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.note-list a { display: grid; gap: 2px; padding: 9px 10px; border-radius: 9px; color: var(--text); }
.note-list a:hover { background: var(--surface-2); }
.note-list.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.note-list.grid a { border: 1px solid var(--border); padding: 14px; height: 100%; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.note-editor { display: grid; gap: 10px; padding: 0; overflow: hidden; }
.note-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.note-toolbar select { width: auto; padding: 5px 9px; font-size: 13px; background: var(--surface); }
.note-title { border: 0; background: transparent; font-size: 26px; font-weight: 700; padding: 10px 22px 0; }
.note-body { border: 0; background: transparent; min-height: 50vh; padding: 6px 22px; font-size: 15.5px; line-height: 1.7; resize: none; }
.note-title:focus, .note-body:focus { box-shadow: none; }
#save-state { padding: 0 22px 14px; }
.ai-out { display: flex; gap: 12px; margin: 0 16px 16px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: 14.5px; }
.modal > .ai-out { margin: 0; } .ai-out > .ic { color: var(--accent); margin-top: 2px; }
.ai-out ul { margin: 4px 0; padding-left: 18px; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.doc-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: var(--text); }
.doc-list a > span { display: grid; min-width: 0; } .doc-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.doc-list a:hover { background: var(--surface-2); } .doc-list .ic { color: var(--accent); }
.doc-list.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.doc-list.grid a { border: 1px solid var(--border); padding: 12px; }
.viewer { display: grid; gap: 18px; }
.viewer.pdf { grid-template-columns: 1fr 280px; align-items: start; }
.viewer-main { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.pdf-page { position: relative; background: #fff; box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; touch-action: pan-y; }
.viewer-main[data-tool=note] .pdf-page { cursor: copy; } .viewer-main[data-tool=highlight] .pdf-page { cursor: crosshair; touch-action: none; }
.pdf-page canvas { width: 100%; height: 100%; display: block; }
.annot { position: absolute; }
.annot.highlight { background: #facc1566; mix-blend-mode: multiply; border-radius: 2px; }
.annot.highlight.drawing { outline: 1.5px dashed #ca8a04; }
.annot.note { transform: translate(-6px, -6px); display: flex; gap: 6px; align-items: flex-start; max-width: 220px; padding: 6px 9px; border-radius: 4px 10px 10px 10px; background: #fde68a; color: #422006; font-size: 12.5px; box-shadow: 0 4px 12px #0003; line-height: 1.35; }
.annots { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.annots ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.annots li { display: flex; align-items: flex-start; gap: 6px; }
.annot-jump { flex: 1; padding: 7px 9px; border-radius: 8px; font-size: 13.5px; border-left: 3px solid #fde68a; }
.annots li.highlight .annot-jump { border-left-color: #facc15; }
.annot-jump:hover { background: var(--surface-2); }
.doc-img { max-width: 100%; border-radius: 10px; box-shadow: var(--shadow-lg); }
.doc-text { white-space: pre-wrap; background: var(--surface); padding: 20px; border-radius: 12px; width: 100%; border: 1px solid var(--border); }

/* Note list rows with delete */
.note-list li { position: relative; }
.note-list li > a { padding-right: 40px; }
.note-list b { display: flex; align-items: center; gap: 6px; } .note-list b .ic { color: var(--accent); }
.note-del { position: absolute; top: 6px; right: 6px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.note-list li:hover .note-del, .note-del:focus-visible { opacity: 1; }
.note-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
@media (hover: none) { .note-del { opacity: 1; } }
.note-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; margin-bottom: 6px; }
.row-gap.tight { gap: 4px; }
.seg.sm button { padding: 5px 10px; font-size: 13px; }

/* ===== Ink canvas ===== */
.note-editor.ink-mode { gap: 0; }
.note-editor.ink-mode .note-title { padding-bottom: 10px; font-size: 22px; }
.ink-host { min-height: 420px; }
.ink-wrap { display: flex; flex-direction: column; height: calc(100dvh - 230px); min-height: 460px; border-top: 1px solid var(--border); }
.ink-wrap.full { position: fixed; inset: 0; z-index: 45; height: auto; min-height: 0; background: var(--bg); border: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.ink-fullscreen { overflow: hidden; }
body.ink-fullscreen .bottombar, body.ink-fullscreen .fab, body.ink-fullscreen .topbar { display: none !important; }
.ink-bar { display: grid; gap: 6px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); user-select: none; -webkit-user-select: none; }
.ink-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; min-height: 40px; }
.ink-row::-webkit-scrollbar { display: none; }
.ink-row.opts { min-height: 34px; gap: 10px; }
.ink-group { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.ink-sep { width: 1px; height: 26px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.ink-tool { position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; }
.ink-tool:hover { background: var(--surface-2); color: var(--text); }
.ink-tool.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.ink-tool:disabled { opacity: .35; pointer-events: none; }
.ink-tool i { position: absolute; bottom: 4px; left: 50%; width: 14px; height: 3.5px; border-radius: 3px; transform: translateX(-50%); box-shadow: 0 0 0 1px #0002; }
.ink-label { font-size: 13px; font-weight: 650; white-space: nowrap; flex-shrink: 0; }
.ink-hint-inline { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ink-swatches { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.sw { width: 24px; height: 24px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px #0003; flex-shrink: 0; cursor: pointer; position: relative; transition: transform .1s; }
.sw:hover { transform: scale(1.12); }
.sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.sw.custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.sw.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; }
.ink-size { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ink-size input { width: 110px; padding: 0; accent-color: var(--accent); background: none; border: 0; box-shadow: none !important; }
.size-dot { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; }
.size-dot::before { content: ''; width: var(--d); height: var(--d); border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px #0002; }
.ink-zoomer { display: flex; align-items: center; background: var(--surface-2); border-radius: 9px; padding: 2px; flex-shrink: 0; }
.ink-zoomer button { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 13px; font-weight: 650; color: var(--muted); }
.ink-zoomer button:hover { background: var(--surface); color: var(--text); }
.ink-zoom { min-width: 52px !important; font-variant-numeric: tabular-nums; }
.palm-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.palm-pill.on { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.ink-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; cursor: crosshair; background: #fff; }
.ink-stage[data-tool=hand], .ink-stage.panning { cursor: grab; }
.ink-stage[data-tool=eraser] { cursor: none; }
.ink-stage[data-tool=text] { cursor: text; }
.ink-stage[data-tool=lasso] { cursor: default; }
.ink-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ink-selbar { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ink-selbar button:not(.sw) { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text); }
.ink-selbar button:not(.sw):hover { background: var(--surface-2); }
.ink-selbar .sw { width: 20px; height: 20px; }
.ink-selbar[hidden], .ink-menu[hidden] { display: none; }
.ink-selbar .danger { color: var(--danger) !important; }
.ink-selbar [data-ink=front] .ic { transform: rotate(-90deg); }
.ink-hint { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 10px); z-index: 3; padding: 8px 14px; border-radius: 99px; background: #111827e6; color: #fff; font-size: 13px; font-weight: 550; opacity: 0; pointer-events: none; transition: .2s; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.ink-hint.show { opacity: 1; transform: translate(-50%, 0); }
.ink-text { position: absolute; z-index: 4; min-width: 120px; border: 1.5px dashed #6d5efc; background: #ffffffd9; border-radius: 4px; padding: 0 2px; margin: 0; font-family: Inter, system-ui, sans-serif; font-weight: 500; line-height: 1.3; resize: none; overflow: hidden; box-shadow: none !important; outline: none; }
.ink-menu { position: absolute; top: 8px; right: 8px; z-index: 5; width: min(320px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px; display: grid; gap: 10px; cursor: default; }
.ink-menu h4 { margin: 4px 0 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.paper-row { display: flex; gap: 8px; }
.paper { width: 34px; height: 34px; border-radius: 9px; background: var(--p); box-shadow: inset 0 0 0 1px #0002; }
.paper.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tog { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.tog input { margin-top: 2px; }
.tog span { display: grid; gap: 2px; } .tog small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; font-weight: 550; }
.menu-item:hover { background: var(--surface-2); } .menu-item.danger { color: var(--danger); }
.gestures { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.gestures b { color: var(--text); font-weight: 600; }

/* ===== Work ===== */
.timer-bar { display: flex; align-items: center; gap: 10px; padding: 10px; }
.timer-bar select { width: 210px; flex-shrink: 0; }
.timer-bar.running { padding: 12px 14px; border-color: color-mix(in srgb, var(--c) 50%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface)); }
.timer-bar.running > div { display: grid; flex: 1; min-width: 0; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: pulse 1.6s infinite; flex-shrink: 0; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.timer-clock { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 2px; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); }
a.kpi:hover { border-color: var(--work); }
.kpi span { font-size: 13px; color: var(--muted); font-weight: 550; } .kpi b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi small { color: var(--muted); font-size: 12px; }
.kpis.small .kpi { padding: 12px 14px; box-shadow: none; } .kpis.small .kpi b { font-size: 19px; }
.card .kpis.small .kpi { background: var(--surface-2); border: 0; }
.proj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.proj-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); }
.proj-list a:hover { background: var(--surface-2); }
.pl-bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); }
.pl-main { display: grid; flex: 1; min-width: 0; }
.pl-prog { display: flex; align-items: center; gap: 8px; width: 120px; } .pl-prog .mini-track { flex: 1; } .pl-prog small { color: var(--muted); font-size: 12px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kanban.pipeline { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; transition: .15s; }
.kcol.drop-over { border-color: var(--work); background: color-mix(in srgb, var(--work) 8%, var(--surface-2)); }
.kcol header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.kcol.won header b { color: var(--ok); } .kcol.lost header b { color: var(--muted); }
.kcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kcard { display: grid; gap: 6px; padding: 11px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: grab; font-size: 14px; font-weight: 520; }
.kcard.hi { border-left: 3px solid var(--warn); }
.kcard.dragging { opacity: .4; }
.kadd { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; padding: 6px; border-radius: 8px; }
.kadd:hover { background: var(--surface-3); color: var(--text); }
.gantt { position: relative; display: grid; gap: 6px; padding-top: 20px; }
.g-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; cursor: pointer; }
.g-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-track { position: relative; height: 22px; background: var(--surface-2); border-radius: 6px; }
.g-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: var(--c); }
.g-bar.done { opacity: .35; }
.g-today { position: absolute; top: 0; bottom: 0; margin-left: 192px; width: 0; border-left: 1.5px dashed var(--danger); z-index: 1; pointer-events: none; }
.g-today span { position: absolute; top: -2px; left: 4px; font-size: 10.5px; color: var(--danger); font-weight: 700; }
.entries { list-style: none; padding: 0; margin: 0; display: grid; }
.entries li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.entries li:last-child { border-bottom: 0; }
.en-main { display: grid; flex: 1; min-width: 0; } .en-main b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-dur { font-variant-numeric: tabular-nums; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.client { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; color: var(--text); }
.client > div:not(.client-stats) { display: grid; }
.client:hover { border-color: var(--work); }
.client-stats { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--border); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--work) 18%, transparent); color: var(--work); }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.client-head { display: flex; align-items: center; gap: 14px; }
.dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin: 0; font-size: 14px; } .dl dt { color: var(--muted); } .dl dd { margin: 0; overflow-wrap: anywhere; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.table tbody tr[data-href] { cursor: pointer; } .table tbody tr[data-href]:hover { background: var(--surface-2); }
.table .r, .r { text-align: right; }
.table tfoot td { border: 0; font-size: 16px; }
.callout { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--work) 12%, var(--surface)), var(--surface)); }
.callout > div { flex: 1; } .callout > .ic { color: var(--work); }
.inv-actions { justify-content: flex-end; } .inv-actions select { width: auto; }
.invoice { padding: 40px; display: grid; gap: 28px; max-width: 820px; width: 100%; margin: 0 auto; }
.invoice header { display: flex; justify-content: space-between; gap: 20px; }
.invoice h1 { font-size: 32px; letter-spacing: -.02em; color: var(--work); }
.inv-meta { display: flex; justify-content: space-between; gap: 20px; }
.inv-meta > div { display: grid; gap: 2px; } .inv-meta small { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; margin-top: 6px; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 74px; gap: 10px; align-items: center; font-size: 13.5px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cols { display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; }
.col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.col-fill { width: 100%; max-width: 44px; min-height: 2px; border-radius: 6px 6px 3px 3px; }
.col-val { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ai-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tool { display: grid; gap: 6px; text-align: left; transition: border-color .15s, transform .15s; }
.tool:hover { border-color: var(--work); transform: translateY(-2px); } .tool .ic { color: var(--work); }
.draft { min-height: 340px; font-size: 14.5px; line-height: 1.6; }

/* ===== Shared tools ===== */
.quick-inline { display: flex; align-items: center; gap: 10px; padding: 6px 14px; }
.quick-inline .ic { color: var(--accent); }
.quick-inline input { border: 0; background: transparent; padding: 10px 0; font-size: 15px; }
.quick-inline input:focus { box-shadow: none; }
.qp, .qa-preview { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qp span, .qa-preview > span:not(.muted):not(.qa-title) { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 550; color: var(--muted); }
.fchip.on { background: var(--text); color: var(--bg); border-color: transparent; }
.fchip:hover:not(.on) { color: var(--text); }
.cal-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.calendar { padding: 14px; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cal-head h2 { min-width: 180px; text-align: center; font-size: 18px; }
.cal-head .btn.sm { margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 11.5px; font-weight: 650; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; letter-spacing: .05em; }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 6px; border-radius: 9px; border: 1px solid transparent; background: var(--surface-2); overflow: hidden; min-width: 0; }
.cal-day:hover { border-color: var(--border); }
.cal-day.other { opacity: .45; }
.cal-day.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cal-num { font-size: 13px; font-weight: 650; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-num { background: var(--accent); color: var(--on-accent); }
.cal-items { display: grid; gap: 2px; min-width: 0; }
.cal-it { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid var(--c); }
.cal-it.task { background: transparent; } .cal-it.done { text-decoration: line-through; opacity: .6; } .cal-it.exam { font-weight: 700; }
.cal-more { font-size: 10.5px; color: var(--muted); padding-left: 5px; }
.cal-dots { display: none; gap: 3px; justify-content: center; } .cal-dots i { width: 5px; height: 5px; border-radius: 50%; }
.day-panel { position: sticky; top: 20px; }
.agenda { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.agenda li { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, transparent); border-left: 3px solid var(--c); cursor: pointer; }
.agenda li > span:last-child { display: grid; } .agenda li.done b { text-decoration: line-through; color: var(--muted); }
.ag-time { width: 54px; font-size: 12.5px; font-weight: 650; color: var(--muted); flex-shrink: 0; padding-top: 1px; }
.habits { overflow-x: auto; }
.habit-grid { display: grid; grid-template-columns: minmax(160px, 1fr) repeat(var(--n), 40px) 64px; gap: 8px 6px; align-items: center; min-width: 560px; }
.hg-day { display: grid; justify-items: center; font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.hg-day b { font-size: 13px; color: var(--text); } .hg-day.today b { color: var(--accent); }
.hg-name { display: flex; align-items: center; gap: 9px; font-weight: 550; padding: 6px; border-radius: 8px; }
.hg-name:hover { background: var(--surface-2); } .hg-name .dot { margin-left: auto; }
.hg-cell { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; justify-self: center; transition: .15s; }
.hg-cell:hover { border-color: var(--c); }
.hg-cell.on { background: var(--c); border-color: var(--c); }
.hg-streak { display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 700; color: var(--warn); font-size: 14px; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.goal { display: grid; gap: 14px; }
.goal header { display: flex; gap: 14px; align-items: center; } .goal header > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.goal header .muted { display: flex; align-items: center; gap: 6px; }
.goal-prog { display: grid; gap: 6px; } .goal-prog small { color: var(--muted); }
.goal-update { display: flex; gap: 8px; } .goal-update input { padding: 6px 10px; }
.focus-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.focus-main { display: grid; justify-items: center; gap: 22px; padding: 32px 20px; background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--c) 12%, transparent), transparent), var(--surface); }
.focus-ring { position: relative; width: min(260px, 70vw); aspect-ratio: 1; }
.focus-ring svg { width: 100%; height: 100%; }
.focus-ring circle:nth-child(2) { transition: stroke-dashoffset 1s linear; }
.focus-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.focus-time { font-size: 52px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.focus-form { width: 100%; max-width: 440px; justify-items: center; }
.focus-form .grid2 { width: 100%; }
.routines { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.routine { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.routine header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .routine header .muted { margin-left: auto; }

/* ===== Settings & onboarding ===== */
.settings { display: grid; gap: 18px; max-width: 760px; }
.boundary-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.bd { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 14px 10px; border-radius: 12px; }
.bd.study { background: color-mix(in srgb, var(--study) 13%, transparent); color: var(--study); }
.bd.work { background: color-mix(in srgb, var(--work) 13%, transparent); color: var(--work); }
.bd b { color: var(--text); } .bd small { color: var(--muted); font-size: 12px; }
.bd-wall { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 0 8px; color: var(--muted); border-left: 2px dashed var(--border); border-right: 2px dashed var(--border); }
.bd-wall small { font-size: 11px; max-width: 70px; text-align: center; line-height: 1.2; }
.install-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.wrap { flex-wrap: wrap; }
.onboarding { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background:
  radial-gradient(60% 50% at 20% 10%, color-mix(in srgb, var(--study) 22%, transparent), transparent),
  radial-gradient(50% 50% at 90% 90%, color-mix(in srgb, var(--work) 20%, transparent), transparent), var(--bg); }
.onboard { width: 100%; display: grid; place-items: center; }
.ob-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 36px 30px; box-shadow: var(--shadow-lg); display: grid; gap: 14px; text-align: center; animation: pop .35s ease; }
.ob-card h1 { font-size: 30px; } .ob-card .form { text-align: left; margin-top: 8px; }
.ob-logo { justify-self: center; animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(4deg); } }
.ob-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-choices legend { font-size: 13px; font-weight: 550; color: var(--muted); margin-bottom: 6px; }
.ob-choices label { display: block !important; cursor: pointer; }
.ob-choices input { position: absolute; opacity: 0; }
.ob-choices span { display: grid; justify-items: center; gap: 3px; padding: 14px 6px; border-radius: 12px; border: 1.5px solid var(--border); color: var(--text); text-align: center; transition: .15s; }
.ob-choices span .ic { color: var(--accent); } .ob-choices small { color: var(--muted); font-size: 11.5px; font-weight: 450; }
.ob-choices input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.ob-choices input:focus-visible + span { outline: 2px solid var(--accent); }
.quick-add { display: grid; gap: 12px; }
.qa-row { display: flex; align-items: center; gap: 10px; } .qa-row .ic { color: var(--accent); }
.qa-row input { border: 0; background: transparent; font-size: 19px; padding: 6px 0; } .qa-row input:focus { box-shadow: none; }
.qa-preview { min-height: 28px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.qa-title { font-weight: 600; margin-right: 4px; }
.qa-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-spaces { display: flex; gap: 6px; flex-wrap: wrap; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.more-grid a { display: grid; justify-items: center; gap: 6px; padding: 16px 6px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 550; }
.more-grid .ic { color: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .today-layout { grid-template-columns: 1fr; } .today-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .search-btn { min-width: 0; }
  .today-grid > *, .today-grid .hero, .today-grid .pri-card, .today-grid .sched-card { grid-column: span 12; grid-row: auto; }
  .chat-wrap { grid-template-columns: 1fr; } .boundary { position: static; }
  .viewer.pdf { grid-template-columns: 1fr; } .annots { position: static; max-height: none; }
  .cal-wrap { grid-template-columns: 1fr; } .day-panel { position: static; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
  .m-only { display: inline-flex !important; align-items: center; } .d-only { display: none !important; }
  .topbar { min-height: 0; gap: 6px; }
  .search-btn { min-width: 0; width: 38px; height: 38px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .xp-pop { bottom: calc(150px + env(safe-area-inset-bottom)); right: 20px; }
  .glance { flex-direction: column; align-items: stretch; } .glance-rings { justify-content: center; } .glance-rings .orbit-rings { width: 150px; }
  .pri-card .task.overdue { margin: 0 -15px; padding-left: 19px; padding-right: 15px; }
  .task.overdue::before { left: -15px; }
  .fc-time { font-size: 44px; }
  .find { min-width: 0; flex: 1 1 100%; order: -1; } .task-tools .spacer { display: none; }
  .tlist .trow .flag { display: none; } .tlist .trow .flag.p3 { display: inline-flex; }
  .subs { margin-left: 0; }
  .bulk-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .kbd-hint { display: none; }
  .tgroup .task.overdue::before { left: -15px; }
  .habit-stats, .habit-stats.four { grid-template-columns: 1fr 1fr; gap: 10px; } .habit-stats > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .hstat b { font-size: 26px; }
  .habit-bottom { grid-template-columns: 1fr; }
  .hg-scroll { margin: 0 -15px; padding: 0 15px; }
  .hg { min-width: max-content; }
  .hg-row { grid-template-columns: 150px repeat(var(--n), 38px) 46px; }
  .hg-row.compact { grid-template-columns: 140px repeat(var(--n), 22px) 46px; }
  .hc { width: 32px; height: 32px; } .h-ic { width: 30px; height: 30px; font-size: 15px; }
  .badges { grid-template-columns: repeat(4, 1fr); } .badge-ring { width: 46px; height: 46px; }
  .goal-grid2 { grid-template-columns: 1fr; } .type-pick { grid-template-columns: 1fr; }
  .note-shell.has-pages { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; } .ss:nth-child(3) { border-left: 0; } .ss:nth-child(n+3) { border-top: 1px solid var(--border); } .ss b { font-size: 24px; }
  .course-grid2 { grid-template-columns: 1fr; } .up-split { grid-template-columns: 1fr; } .class-info { grid-template-columns: 1fr; } .gs-controls { grid-template-columns: 1fr; }
  .wk { flex-basis: 48px; } .wk-track { height: 80px; } .hub-head .btn { flex: 1; } .hub-head.course > div:not(.row) { flex: 1 1 100%; } .hub-head.course > .spacer { display: none; } .hub-head.course > .btn { flex: 1 1 calc(50% - 7px); } .hub-head.course > .btn.icon { flex: 0 0 auto; } .course-pick { width: 100%; font-size: 17px; text-overflow: ellipsis; }
  .it-meta { grid-template-columns: 1fr 1fr; } .it-meta select { grid-column: 1 / -1; } .w-row { grid-template-columns: 1fr 70px auto auto; }
  .un-row .un-main { flex: 1 1 100%; } .status-sel { min-width: 0; flex: 1; }
  .nb-pages { position: static; } .nb-pages ol { display: flex; overflow-x: auto; max-height: none; gap: 4px; } .nb-pages li { flex-shrink: 0; } .nb-pages li .btn { opacity: 1; }
  .rt-toolbar { top: 55px; padding: 6px 10px; } .rt-hint { display: none; }
  .rt-editor { padding: 14px 16px 30px; min-height: 45vh; }
  .note-toolbar select { max-width: 120px; }
  .ver-wrap { grid-template-columns: 1fr; } .ver-list { max-height: 140px; }
  .gc-num.big b { font-size: 36px; } .goals-reached { width: 100%; }
  #modal-root .modal.search-modal { margin-top: 0; align-self: end; border-radius: 22px 22px 0 0; }
  .topbar b.top-title { font-size: 17px; } .topbar .brand { padding: 0; } .topbar .focus-pill { padding: 5px 10px; font-size: 13px; } .topbar .focus-pill small { display: none; }
  .bottombar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .bottombar a, .bottombar button { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 4px 0; text-align: center; }
  .bottombar .active { color: var(--c, var(--accent)); }
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 31; width: 56px; height: 56px; border-radius: 18px; background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent); }
  .fab:active { transform: scale(.94); }
  .page { padding: 16px 16px calc(100px + env(safe-area-inset-bottom)); gap: 14px; }
  h1 { font-size: 23px; } .today-head h1 { font-size: 25px; }
  .page-head { align-items: flex-start; } .page-head .head-actions { width: 100%; }
  .pill-tabs { display: flex; }
  .split, .focus-wrap { grid-template-columns: 1fr; }
  .card { padding: 15px; }
  .today-grid .hero { flex-direction: column; gap: 14px; } .hero-rings { width: 180px; } .hero-side { width: 100%; gap: 12px; }
  .hero .legend { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hero .legend a { flex-direction: column; gap: 2px; padding: 8px 4px; background: var(--surface-2); text-align: center; }
  .hero .legend b { margin: 0; } .hero .legend li { display: block; padding: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpis.small { grid-template-columns: repeat(3, 1fr); }
  .kpi { padding: 12px; } .kpi b { font-size: 19px; } .kpis.small .kpi { padding: 10px; } .kpis.small .kpi b { font-size: 16px; }
  .kanban { grid-template-columns: repeat(4, 78vw); scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; }
  .kanban.pipeline { grid-template-columns: repeat(5, 74vw); }
  .kcol { scroll-snap-align: start; }
  .cal-day { min-height: 54px; align-items: center; padding: 4px 2px; }
  .cal-items { display: none; } .cal-dots { display: flex; }
  .cal-head h2 { min-width: 0; font-size: 16px; }
  .opts { grid-template-columns: 1fr; }
  .add-card { grid-template-columns: 1fr; }
  .card-list li { grid-template-columns: 1fr auto; } .card-list .cl-back { grid-column: 1 / -1; grid-row: 2; } .box-pips { display: none; }
  .extract-row { grid-template-columns: auto 1fr; } .extract-row input[type=date], .extract-row select { grid-column: 2; }
  .timer-bar:not(.running) { flex-wrap: wrap; } .timer-bar select { width: 100%; } .timer-bar input { flex: 1; min-width: 0; }
  .timer-clock { font-size: 20px; }
  .g-row { grid-template-columns: 110px 1fr; } .g-today { margin-left: 122px; }
  .invoice { padding: 22px; } .inv-meta, .invoice header { flex-direction: column; } .inv-meta .r, .invoice header .r { text-align: left; }
  .table { font-size: 13px; } .table th:nth-child(3), .table td:nth-child(3), .table th:nth-child(4), .table td:nth-child(4) { display: none; }
  .chat { height: calc(100dvh - 240px); }
  .msg { max-width: 90%; }
  #modal-root { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: sheet .25s cubic-bezier(.3, .7, .2, 1); }
  @keyframes sheet { from { transform: translateY(40px); opacity: .5; } }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .boundary-diagram { grid-template-columns: 1fr; } .bd-wall { border: 0; border-top: 2px dashed var(--border); border-bottom: 2px dashed var(--border); padding: 8px; grid-auto-flow: column; gap: 8px; } .bd-wall small { max-width: none; }
  .bar-row { grid-template-columns: 90px 1fr 60px; }
  .ink-wrap { height: calc(100dvh - 300px - env(safe-area-inset-bottom)); min-height: 380px; }
  .note-editor.ink-mode .note-toolbar .btn:not(.danger) { display: none; }
  .ink-tool { width: 38px; height: 38px; }
  .ink-size input { width: 84px; }
}
@media (max-width: 480px) {
  .grid2 { grid-template-columns: 1fr; }
  .ob-choices { grid-template-columns: 1fr; } .ob-choices span { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 10px; } .ob-choices span .ic { grid-row: span 2; align-self: center; }
  .flashcard { height: 280px; } .fc-face { font-size: 21px; padding: 22px; }
  .stats .stat b { font-size: 18px; }
  .focus-time { font-size: 44px; }
}

/* ===== Print (invoices) ===== */
/* ===== Grades & GPA ===== */
.tone-a { --gc: var(--ok); } .tone-b { --gc: #3b82f6; } .tone-c { --gc: var(--warn); } .tone-d { --gc: var(--danger); } .tone-none { --gc: var(--muted); }
b.tone-a, b.tone-b, b.tone-c, b.tone-d, em.tone-a, em.tone-b, em.tone-c, em.tone-d { color: var(--gc); }
.ok-txt { color: var(--ok); } .accent-txt { color: var(--accent); }
.grade-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; background: #0007; color: #fff; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(6px); margin-right: 6px; white-space: nowrap; }
.grade-chip:hover { background: #000a; }
.course-hero2 .cc-cover-top { margin-bottom: 4px; } .course-hero2 .cc-cover-top .grade-chip { margin-right: 0; font-size: 13.5px; padding: 4px 11px; }
.score-chip { padding: 4px 9px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--ok) 8%, transparent); }
.gr-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.gr-hero { display: flex; gap: 22px; align-items: center; }
.gr-ring { position: relative; flex-shrink: 0; width: 132px; height: 132px; }
.gr-ring-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gr-ring-txt b { font-size: 34px; line-height: 1; color: var(--gc); } .gr-ring-txt span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.gr-hero-main { flex: 1; min-width: 0; } .gr-hero-main h2 { font-size: 22px; margin: 2px 0 4px; }
.gr-range { margin-top: 16px; }
.gr-track { position: relative; height: 12px; border-radius: 99px; background: var(--track); margin: 18px 0 8px; }
.gr-span { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 70%, transparent)); }
.gr-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--muted); opacity: .55; } .gr-tick.minor { width: 1px; top: 0; bottom: 0; background: var(--border); opacity: 1; }
.gr-tick span { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 10px; font-style: normal; color: var(--muted); font-weight: 600; }
.gr-pin { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--surface); box-shadow: var(--shadow); transition: left .15s; }
.gr-pin.cur { background: var(--text); z-index: 2; } .gr-pin.proj { background: var(--accent); width: 12px; height: 12px; } .gr-pin.tgt { background: transparent; border: 2px dashed var(--ok); width: 18px; height: 18px; box-shadow: none; }
.gr-range-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.gr-range-legend span { display: inline-flex; align-items: center; gap: 6px; }
i.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } i.lg.span { width: 18px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
i.lg.cur { background: var(--text); } i.lg.proj { background: var(--accent); } i.lg.tgt { border: 2px dashed var(--ok); }
.gr-goal .card-head { gap: 10px; } .tgt-sel { width: auto; min-width: 150px; font-weight: 600; }
.need-line { font-size: 15px; line-height: 1.5; margin: 4px 0 12px; } .need-line .ic { vertical-align: -2px; }
.solver { border-top: 1px solid var(--border); padding-top: 12px; }
.solver-row label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 550; }
.solver-out { font-size: 15px; line-height: 1.55; margin: 10px 0 4px; }
.big-need { font-size: 22px; color: var(--accent); }
.gr-whatif { margin-bottom: 16px; }
.wi-sliders { display: grid; gap: 12px; margin: 10px 0 14px; }
.wi-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.4fr) 48px; gap: 14px; align-items: center; }
.wi-row > span { display: grid; gap: 2px; } .wi-row output { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wi-row input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.wi-result { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.wi-result b { font-size: 26px; } .wi-result em { font-style: normal; font-weight: 800; font-size: 18px; }
.gr-cats .card-head { flex-wrap: wrap; gap: 8px; }
.gr-cat { border-top: 1px solid var(--border); padding: 4px 0 10px; }
.gr-cat summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 64px 64px; gap: 12px; align-items: center; padding: 10px 2px; cursor: pointer; list-style: none; }
.gr-cat summary::-webkit-details-marker { display: none; }
.gc-name { display: grid; gap: 2px; } .gc-pct { text-align: right; font-variant-numeric: tabular-nums; } .gc-earn { text-align: right; font-variant-numeric: tabular-nums; }
.gc-bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; } .gc-bar span { display: block; height: 100%; width: var(--p); background: var(--gc); border-radius: 99px; }
.gr-items { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 2px; }
.gi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 52px 32px; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 9px; }
.gi:hover { background: var(--surface-2); } .gi.open .gi-main b { color: var(--muted); font-weight: 550; }
.gi.dropped .gi-main b, .gi.dropped .gi-pct { text-decoration: line-through; opacity: .6; }
.gi-main { display: grid; gap: 1px; min-width: 0; } .gi-main b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-score { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.gi-score input { width: 64px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.gi-pct { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.gi-cat { width: auto; max-width: 150px; padding: 5px 26px 5px 8px; font-size: 12.5px; }
.score-big { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.score-big input { font-size: 22px; font-weight: 700; padding: 10px 12px; text-align: center; }
.w-row.setup { grid-template-columns: 1fr 80px auto 110px; } .drop-n { display: inline-flex !important; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .drop-n input { width: 56px; padding: 6px 8px; }
.scale-seg { margin-bottom: 10px; }
.gpa-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.gpa-stat { display: grid; gap: 4px; } .gpa-stat b { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gpa-table-card { margin-bottom: 16px; }
.gpa-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px 90px 100px minmax(0, 1.5fr); gap: 14px; align-items: center; padding: 12px 10px 12px 14px; border-top: 1px solid var(--border); position: relative; }
.gpa-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--c); }
.gpa-course { display: grid; gap: 2px; color: inherit; min-width: 0; } .gpa-course small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpa-cr, .gpa-tgt, .gpa-now { display: grid; gap: 3px; } .gpa-now b { font-size: 18px; } .gpa-now small:last-child { font-size: 12px; color: var(--muted); }
.gpa-cr input, .gpa-tgt select { padding: 6px 8px; }
.gpa-need { display: grid; gap: 4px; justify-items: start; }
.pill { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .pill.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cal-it.session { opacity: .85; font-style: italic; }
@media (max-width: 860px) {
  .gr-top { grid-template-columns: 1fr; }
  .gr-hero { flex-direction: column; align-items: stretch; text-align: center; } .gr-ring { margin: 0 auto; } .gr-range-legend { justify-content: center; }
  .wi-row { grid-template-columns: 1fr 48px; } .wi-row > span { grid-column: 1 / -1; }
  .gr-cat summary { grid-template-columns: minmax(0, 1fr) 64px; } .gc-bar { grid-column: 1 / -1; grid-row: 2; } .gc-earn { display: none; }
  .gi { grid-template-columns: minmax(0, 1fr) auto 32px; } .gi-cat { grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%; } .gi-pct { display: none; } .gr-cat .gi-cat { display: none; }
  .gi-score input { width: 56px; }
  .gpa-hero { grid-template-columns: 1fr 1fr; } .gpa-hero .gpa-stat:first-child { grid-column: 1 / -1; }
  .gpa-row { grid-template-columns: 1fr 1fr 1fr; } .gpa-course { grid-column: 1 / -1; } .gpa-need { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
  .grid3 { grid-template-columns: 1fr; }
  .w-row.setup { grid-template-columns: 1fr 70px auto; } .w-row.setup .drop-n { grid-column: 1 / -1; }
}
/* ===== Work Round 1: profile, Today at work, projects, workflows, tasks ===== */
.work-head { align-items: flex-end; } .wq-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 16px; } .wfilter select { width: auto; min-width: 200px; font-weight: 600; }
.wf-on { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .wf-on i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .wf-on b { color: var(--text); }
.sec-head, .sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; flex-wrap: wrap; } .sec-head h2, .sec-row h2 { font-size: 20px; } .sec-row h2 small { font-size: 14px; font-weight: 500; margin-left: 6px; }
.sec-row:first-child, .wfilter + .sec-row, .tabs + .sec-row { margin-top: 4px; }
/* setup */
.setup-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; } .setup-steps li { padding: 6px 12px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.setup-steps li.on { background: var(--work); color: #fff; } .setup-steps li.done { color: var(--ok); }
.setup-q { font-size: 18px; font-weight: 650; margin-bottom: 12px; }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.profile-card { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 20px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: .15s; }
.profile-card .ic { color: var(--work); } .profile-card b { font-size: 16px; } .profile-card small { line-height: 1.45; }
.profile-card:hover { border-color: var(--work); transform: translateY(-2px); } .profile-card.on { border-color: var(--work); background: color-mix(in srgb, var(--work) 8%, var(--surface)); }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .setup-grid .card { display: grid; gap: 12px; }
.tab-preview { display: flex; flex-wrap: wrap; gap: 6px; } .tab-preview span { padding: 5px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; }
.mod-list { display: grid; gap: 6px; }
.mod-row { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; border: 1.5px solid var(--border); cursor: pointer; }
.mod-row.on { border-color: var(--work); background: color-mix(in srgb, var(--work) 7%, transparent); } .mod-row .ic { color: var(--work); } .mod-row > span { display: grid; } .mod-row input { width: auto; }
.soon { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--muted); margin-left: 4px; vertical-align: 1px; }
.setup-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
@media (max-width: 860px) { .setup-foot .btn.primary { flex: 1 1 100%; justify-content: center; } .setup-foot .spacer { display: none; } }
/* today at work */
.today-work { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 22px; margin-bottom: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--work) 12%, var(--surface)), var(--surface) 60%); }
.tw-main h2 { font-size: 24px; margin: 2px 0 4px; } .tw-main .row-gap { margin-top: 12px; }
.then-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.then-list button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px; font-size: 14px; text-align: left; border-radius: 8px; } .then-list button:hover { background: var(--surface-2); }
.tw-side { display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--border); padding-left: 20px; } .tw-side .btn { justify-self: start; }
.tw-stat b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.tw-agenda ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; } .tw-agenda li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13.5px; cursor: pointer; } .tw-agenda li b { color: var(--work); font-weight: 650; }
.kpi.warn b { color: var(--danger); }
.over { color: var(--danger); }
.wait-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.wait-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; padding: 9px 10px; border-radius: 10px; } .wait-list li > div { display: grid; min-width: 0; flex: 1 1 180px; }
.wait-list li > .row-gap { margin-left: auto; } .wait-list .btn.sm { padding: 4px 9px; }
.wait-list li.due { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.wait-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.wait-badge.due { background: var(--warn); color: #1c1300; }
.tw-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 120px; align-items: end; }
.tw-bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; height: 100%; gap: 4px; font-size: 11px; }
.tw-bars b { color: var(--muted); font-weight: 600; } .tw-bars i { display: block; background: var(--work); border-radius: 5px 5px 2px 2px; min-height: 2px; } .tw-bars small { color: var(--muted); }
.attention { margin-top: 16px; } .attn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.attn-list a { display: grid; grid-template-columns: 10px auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 6px; color: var(--text); border-radius: 9px; } .attn-list a:hover { background: var(--surface-2); }
.attn-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
/* health */
.health { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.h-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .h-risk { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.h-behind { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); } .h-done { color: var(--muted); background: var(--surface-2); }
.h-paused, .h-planning { color: #3b82f6; background: color-mix(in srgb, #3b82f6 13%, transparent); }
b.health { font-size: 16px; padding: 3px 12px; width: fit-content; }
/* projects */
.proj-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .proj-tools select { width: auto; margin-left: 6px; }
.proj-tools .seg small { color: var(--muted); font-weight: 500; margin-left: 2px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.proj-card { display: grid; gap: 10px; color: var(--text); border-top: 4px solid var(--c); transition: .15s; } .proj-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, var(--border)); }
.proj-card h3 { font-size: 17px; } .pc-top { display: flex; align-items: center; gap: 8px; } .pc-top .health { margin-left: auto; }
.pc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; margin-right: 6px; }
.pc-prog, .pc-burn { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .pc-prog small, .pc-burn small { color: var(--muted); font-size: 12px; }
.pc-prog .mini-track span { background: var(--c); } .pc-burn .mini-track span { background: var(--muted); } .pc-burn.warn .mini-track span { background: var(--warn); } .pc-burn.over .mini-track span { background: var(--danger); } .pc-burn.over small { color: var(--danger); }
.pc-foot { border-top: 1px solid var(--border); padding-top: 8px; margin: 0; }
.proj-hero { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--r); margin-bottom: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border)); }
.ph-main { min-width: 0; flex: 1 1 320px; } .ph-main h1 { font-size: 28px; margin: 4px 0; } .proj-hero .head-actions { flex-wrap: wrap; } .proj-hero .status-sel { width: auto; }
.proj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ps { display: grid; gap: 6px; align-content: start; } .ps > b { font-size: 22px; } .ps > b.over { color: var(--danger); } .mini-track.over span { background: var(--danger); }
.milestones { margin-bottom: 14px; }
.ms-track { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.ms-track li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 9px; }
.ms-track li:hover { background: var(--surface-2); } .ms-track label { display: flex !important; align-items: center; gap: 10px; cursor: pointer; } .ms-track input { width: auto; }
.ms-track li.done span { text-decoration: line-through; color: var(--muted); } .ms-track li.late small { color: var(--danger); }
.ms-add { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 8px; }
.proj-view-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* workflow boards */
.kanban.wflow { grid-template-columns: repeat(var(--n, 5), minmax(230px, 1fr)); } .kanban.wflow.cats { --n: 5; }
.kcol.cat-done header b { color: var(--ok); } .kcol.cat-review header b { color: #a78bfa; } .kcol.cat-waiting header b { color: var(--warn); } .kcol.cat-doing header b { color: #3b82f6; }
.wcard { display: grid; gap: 7px; padding: 11px 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--c); box-shadow: var(--shadow); cursor: grab; }
.wcard.hi { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); } .wcard.is-done { opacity: .6; } .wcard.is-done .wc-title { text-decoration: line-through; }
.wc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pri-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .pri-tag.low { color: var(--muted); background: var(--surface-2); }
.wc-proj { font-size: 11.5px; color: var(--muted); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.wc-title { text-align: left; font-weight: 600; font-size: 14.5px; line-height: 1.35; } .wc-title:hover { color: var(--accent); }
.wc-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--muted); align-items: center; } .wc-meta .over { font-weight: 650; }
.wc-status { padding: 5px 26px 5px 9px; font-size: 12.5px; border-radius: 8px; }
.kcol ul { grid-template-columns: minmax(0, 1fr); } .wcard { min-width: 0; } .wcard .wc-status { width: 100%; min-width: 0; }
.wc-top:empty { display: none; }
.wc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-top: 1px solid var(--border); padding-top: 6px; }
.wc-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; color: var(--muted); padding: 4px 2px; border-radius: 7px; min-width: 0; white-space: nowrap; overflow: hidden; } .wc-acts button:hover { color: var(--text); background: var(--surface-2); }
.wc-acts button.on { color: var(--danger); font-weight: 700; }
.wrows { list-style: none; padding: 0; margin: 0; display: grid; }
.wrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.wrow:last-child { border-bottom: 0; } .wrow .check { --c: var(--work); } .wrow.done .wr-main b { text-decoration: line-through; color: var(--muted); }
.wr-main { display: grid; text-align: left; min-width: 0; } .wr-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wr-acts { display: inline-flex; }
.wrow .wc-status { width: auto; max-width: 150px; }
.wt-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .wt-tools select { width: auto; } .wt-search { flex: 1 1 220px; min-width: 0; }
.wcal .cal-day { min-height: 92px; } .wcal .cal-it { width: 100%; text-align: left; cursor: grab; } .wcal .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .wcal .cal-head h3 { flex: 1; text-align: center; }
.gantt { --gl: 192px; } .gantt .g-today { margin-left: 0; }
.g-group { margin: 10px 0 2px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .g-group::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.g-ms { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dotted var(--work); z-index: 1; pointer-events: none; } .g-ms span { position: absolute; bottom: -18px; left: 3px; font-size: 10.5px; color: var(--work); font-weight: 700; white-space: nowrap; }
.g-bar.late { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 50%, transparent); }
.flow-rows { display: grid; gap: 8px; } .flow-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 8px; }
.endday { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ed-col { display: grid; gap: 8px; align-content: start; } .ed-col ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; } .ed-col li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
@media (max-width: 860px) {
  .profile-grid { grid-template-columns: 1fr; } .setup-grid, .today-work, .endday { grid-template-columns: 1fr; }
  .tw-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .proj-stats { grid-template-columns: 1fr 1fr; } .ms-add { grid-template-columns: 1fr auto; } .ms-add input[type=date] { grid-column: 1; }
  .kanban.wflow { grid-template-columns: repeat(var(--n, 5), 82vw); }
  .wrow { grid-template-columns: auto minmax(0, 1fr) auto; } .wrow .wait-badge, .wrow .wc-status { grid-column: 2 / -1; } .wrow .wr-acts { grid-column: 3; grid-row: 1; }
  .gantt { --gl: 122px; } .g-row { grid-template-columns: 110px 1fr; }
  .work-head { flex-direction: column; align-items: stretch; gap: 12px; } .work-head > div { min-width: 0; }
  .proj-tools .seg, .wt-tools .seg, .proj-view-bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 1; }
  .setup-grid select, .setup-grid label, .form select { max-width: 100%; min-width: 0; } .setup-grid .grid2 { grid-template-columns: 1fr; }
  .setup-steps { flex-wrap: wrap; }
  .work-head .wq-actions { width: 100%; } .work-head .wq-actions .btn:not(.icon) { flex: 1 1 auto; min-width: 0; }
}

/* ===== Work Round 2: people, pipeline, meetings, shifts ===== */
.avatar.rel-client { background: color-mix(in srgb, var(--work) 22%, var(--surface-2)); color: var(--work); }
.avatar.rel-lead { background: color-mix(in srgb, var(--warn) 22%, var(--surface-2)); color: var(--warn); }
.avatar.rel-colleague, .avatar.rel-manager { background: color-mix(in srgb, #3b82f6 22%, var(--surface-2)); color: #3b82f6; }
.avatar.rel-vendor, .avatar.rel-partner { background: color-mix(in srgb, #a855f7 22%, var(--surface-2)); color: #a855f7; }
.avatar.xs { width: 22px; height: 22px; font-size: 10px; display: inline-grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.person-hero .avatar, .ro-item .avatar, .person .avatar { display: grid; place-items: center; flex-shrink: 0; }
.follow .grid2 { grid-template-columns: 1fr; }
.rel-tag { font-size: 11.5px; } .rel-tag.rel-lead { color: var(--warn); } .rel-tag.rel-client { color: var(--work); }
.reach-out { border-left: 4px solid var(--warn); } .ro-list { display: grid; gap: 4px; }
.ro-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; } .ro-item > div { display: grid; min-width: 0; } .ro-item a { color: var(--text); }
.people-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .people-tools .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .people-tools select { width: auto; } .people-tools input { flex: 1 1 200px; min-width: 0; } .people-tools .seg small { color: var(--muted); font-weight: 500; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.person { display: grid; gap: 8px; color: var(--text); transition: .15s; } .person:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--work) 50%, var(--border)); }
.person.due { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); } .person > div:nth-child(2) { display: grid; } .person b { font-size: 16px; }
.person-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.person-hero, .meet-hero { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.person-hero .ph-main, .meet-hero .ph-main { flex: 1 1 280px; min-width: 0; } .person-hero h1, .meet-hero h1 { font-size: 26px; margin: 2px 0; } .person-hero .head-actions, .meet-hero .head-actions { flex-wrap: wrap; }
.person-grid, .meet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.pre { white-space: pre-wrap; }
.follow.due { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.log-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; } .log-add input[name=text] { grid-column: 1 / 3; grid-row: 2; } .log-add .btn { grid-row: 2; grid-column: 3; }
.ptimeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 2px solid var(--border); margin-left: 8px; }
.ptimeline li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0 8px 14px; position: relative; } .ptimeline li > .ic { color: var(--work); margin-top: 2px; }
.ptimeline li::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--work); }
.ptimeline p { margin: 2px 0 0; font-size: 14px; }
.kanban.pipeline7 { grid-template-columns: repeat(7, minmax(210px, 1fr)); }
.kcol.stage-won header b { color: var(--ok); } .kcol.stage-lost header b { color: var(--muted); }
.kcard.deal { gap: 4px; } .dl-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .dl-top b { font-weight: 600; }
.stale { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); white-space: nowrap; }
.dl-money { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .dl-money b { font-size: 15px; }
.dl-next { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--work); border-top: 1px dashed var(--border); padding-top: 5px; } .dl-next.late { color: var(--danger); font-weight: 650; }
.pipe-alerts { display: flex; gap: 12px; align-items: flex-start; border-left: 4px solid var(--warn); } .pipe-alerts p { margin: 0 0 4px; font-size: 14px; } .pipe-alerts .ic { color: var(--warn); flex-shrink: 0; }
.meet-next { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border-left: 4px solid var(--work); } .meet-next > div { flex: 1 1 300px; min-width: 0; } .meet-next h2 { font-size: 22px; margin: 2px 0; }
.prep-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; } .prep-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .prep-list .ic { color: var(--work); margin-top: 3px; flex-shrink: 0; }
.meet-list { list-style: none; padding: 0; margin: 0; display: grid; }
.meet-list a { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 4px; color: var(--text); border-bottom: 1px solid var(--border); } .meet-list li:last-child a { border-bottom: 0; }
.mr-when, .mr-main { display: grid; } .mr-when small { color: var(--muted); font-size: 12px; } .mr-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-list, .agenda-list, .dec-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.act-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 8px; } .act-list li:hover, .agenda-list li:hover { background: var(--surface-2); }
.act-list label, .agenda-list label { display: flex !important; gap: 10px; align-items: center; cursor: pointer; min-width: 0; } .act-list input, .agenda-list input { width: auto; flex-shrink: 0; }
.act-list li.done span, .agenda-list li.done span { text-decoration: line-through; color: var(--muted); } .act-list > li > small { grid-column: 1; padding-left: 26px; margin-top: -4px; }
.agenda-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 8px; }
.dec-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; } .dec-list .ic { color: var(--ok); }
.inline-add, .act-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .act-add { grid-template-columns: minmax(0, 1fr) 130px 140px auto; }
.meet-notes { font-size: 15px; line-height: 1.6; resize: vertical; min-height: 200px; margin-bottom: 10px; }
.who-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .who-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text); }
.people-picks { display: flex; flex-wrap: wrap; gap: 6px; } .pick { display: inline-flex !important; } .pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 99px; border: 1.5px solid var(--border); font-size: 13px; cursor: pointer; } .pick input:checked + span { border-color: var(--work); background: color-mix(in srgb, var(--work) 10%, transparent); }
.grid2.tight { gap: 8px; }
.clock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .clock > div { flex: 1 1 200px; display: grid; } .clock b { font-size: 20px; }
.clock.on { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 12%, var(--surface)), var(--surface)); }
.clock-time { font-size: 32px !important; font-variant-numeric: tabular-nums; }
.shift-week .card-head h3 { flex: 1; text-align: center; }
.sw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sw-day { display: grid; gap: 6px; align-content: start; min-height: 110px; padding: 8px; border-radius: 10px; background: var(--surface-2); } .sw-day.today { box-shadow: inset 0 0 0 2px var(--work); } .sw-day p { margin: 0; font-size: 12.5px; color: var(--muted); }
.shift-blk { display: grid; gap: 1px; text-align: left; padding: 7px 8px; border-radius: 8px; background: var(--surface); border-left: 3px solid #3b82f6; font-size: 12px; } .shift-blk b { font-size: 12.5px; } .shift-blk small { color: var(--muted); }
.shift-blk.worked { border-left-color: var(--ok); } .shift-blk.live { border-left-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 40%, transparent); } .sw-off { font-size: 12px; color: var(--muted); }
.shift-rows { list-style: none; padding: 0; margin: 0 0 10px; display: grid; } .shift-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.shift-rows span { display: grid; } .shift-rows .r { text-align: right; }
.tw-next { display: grid; gap: 1px; color: var(--text); padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--work) 8%, transparent); } .tw-next small { font-size: 12px; }
@media (max-width: 860px) {
  .person-grid, .meet-grid { grid-template-columns: 1fr; }
  .log-add { grid-template-columns: 1fr 1fr; } .log-add input[name=text] { grid-column: 1 / -1; }
  .act-add { grid-template-columns: 1fr 1fr; } .act-add input[name=text] { grid-column: 1 / -1; }
  .kanban.pipeline7 { grid-template-columns: repeat(7, 78vw); }
  .sw-grid { grid-template-columns: repeat(7, 120px); overflow-x: auto; }
  .clock > div { min-width: 0; flex-basis: 100%; } .clock .btn { flex: 1 1 auto; justify-content: center; }
  .ro-item { grid-template-columns: auto minmax(0, 1fr); } .ro-item > .row-gap { grid-column: 1 / -1; justify-content: flex-end; }
  .meet-list a { grid-template-columns: 74px minmax(0, 1fr); } .meet-list a > .tag { display: none; }
}

/* ===== Work Round 3: time, money, vault, studio, reports, content ===== */
.focus-banner.work { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .focus-banner.work > .ic { color: var(--work); } .focus-banner.work > div { display: grid; flex: 1 1 260px; }
.table-card { padding: 0; overflow-x: auto; } .table-card > .card-head { padding: 14px 16px 0; } .table-card > p { padding: 0 16px 14px; } .table-card .table { min-width: 560px; }
.entries-t td b, .entries-t td small { display: block; } .entries-t tr { cursor: pointer; } .entries-t td small { margin-top: 2px; }
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ts-scroll { overflow-x: auto; } .table.ts { min-width: 640px; } .table.ts th small { display: block; font-weight: 500; color: var(--muted); } .table.ts th.today { color: var(--work); }
.ts-cell { width: 64px; padding: 6px 6px; text-align: right; font-variant-numeric: tabular-nums; } .ts-add { margin-top: 10px; } .ts-add select { width: auto; margin-left: 6px; }
.focus-pick { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .focus-pick button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-align: left; border: 1px solid var(--border); }
.focus-pick button:hover { border-color: var(--work); } .focus-pick span { display: grid; }
.tag.inv-draft { color: var(--muted); } .tag.inv-sent { color: #3b82f6; background: color-mix(in srgb, #3b82f6 12%, transparent); } .tag.inv-partial { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tag.inv-paid { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .tag.inv-overdue { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.inv-t td small { display: block; }
.inv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-edit { display: grid; gap: 12px; }
.line-rows { display: grid; gap: 6px; } .line-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 80px 100px 100px auto; gap: 8px; align-items: center; } .line-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.exp-list { list-style: none; padding: 0; margin: 0; display: grid; } .exp-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.exp-list li:last-child { border-bottom: 0; } .exp-cat { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); } .exp-main { display: grid; min-width: 0; } .exp-list .r { font-variant-numeric: tabular-nums; }
.report-head h2 { font-size: 22px; margin: 2px 0 12px; } .rp-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .rp-tools label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); } .rp-tools input, .rp-tools select { width: auto; }
.wr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .wr-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .wr-grid li { display: flex; gap: 6px; align-items: baseline; font-size: 14px; } .wr-grid li .ic { flex-shrink: 0; }
.vault-list { list-style: none; padding: 0; margin: 0; display: grid; } .vault-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) 140px 130px auto 80px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.vault-list li:last-child { border-bottom: 0; } .v-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--work); }
.v-main { display: grid; min-width: 0; color: var(--text); } .v-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-kind, .v-status { padding: 5px 26px 5px 9px; font-size: 12.5px; } .v-status.status-review { color: var(--warn); } .v-status.status-approved { color: #3b82f6; } .v-status.status-delivered { color: var(--ok); } .v-when { text-align: right; font-size: 12px; }
.vault-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .vadd { display: grid !important; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 12px; border: 1.5px solid var(--border); cursor: pointer; } .vadd .ic { color: var(--work); } .vadd:hover { border-color: var(--work); }
.ver-notes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; } .ver-notes p { margin: 2px 0 0; font-size: 14px; }
.link-doc { display: flex; align-items: center; gap: 14px; } .link-doc > div { flex: 1; min-width: 0; } .link-doc .ic { color: var(--work); }
.studio { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.studio > .card { border: 0; box-shadow: none; border-radius: 0; } .studio-side { display: grid; gap: 10px; align-content: start; background: var(--surface-2); border-right: 1px solid var(--border) !important; } .studio-side h3 { font-size: 19px; }
.tool-list { display: grid; gap: 2px; } .tool-list button { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; text-align: left; font-size: 14px; color: var(--muted); } .tool-list button:hover { background: var(--surface); color: var(--text); }
.tool-list button.on { background: color-mix(in srgb, var(--work) 14%, var(--surface)); color: var(--text); font-weight: 600; } .tool-list .ic { color: var(--work); }
.draft-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .draft-list li { display: flex; align-items: center; border-radius: 8px; } .draft-list li.on, .draft-list li:hover { background: var(--surface); }
.draft-list li > button:first-child { flex: 1; min-width: 0; display: grid; text-align: left; padding: 6px 8px; } .draft-list b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-main { display: grid; gap: 12px; align-content: start; min-width: 0; } .studio-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .studio-head b { display: inline-flex; gap: 8px; align-items: center; color: var(--work); }
.studio-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .studio-row label { flex: 1 1 200px; } .studio-out { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.studio-main .chat-wrap { grid-template-columns: 1fr; } .studio-main .chat-wrap .boundary { display: none; }
.cal-it.ct-published { opacity: .6; text-decoration: line-through; } .cal-it.ct-scheduled { font-weight: 700; } .cal-it.ct-idea { font-style: italic; }
@media (max-width: 860px) {
  .line-row { grid-template-columns: 1fr 1fr; } .line-row input[data-f=desc] { grid-column: 1 / -1; grid-row: 1; } .line-row .r { text-align: left; }
  .exp-list li { grid-template-columns: minmax(0, 1fr) auto; } .exp-list .exp-cat, .exp-list .tag { display: none; }
  .wr-grid { grid-template-columns: 1fr; }
  .vault-list li { grid-template-columns: auto minmax(0, 1fr) auto; } .vault-list .v-kind, .vault-list .v-when { display: none; } .vault-list .v-status { grid-column: 2 / -1; }
  .studio { grid-template-columns: 1fr; } .studio-side { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; } .tool-list { grid-template-columns: 1fr 1fr; }
}
/* ---------- Personal (Round 1): setup, home, brain dump, lists, money ---------- */
.psetup { --work: var(--personal); }
.personal-head .eyebrow .ic { color: var(--personal); }
.pmod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pmod { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: .15s; }
.pmod input { position: absolute; opacity: 0; pointer-events: none; }
.pmod:hover { border-color: var(--personal); } .pmod:focus-within { outline: 2px solid var(--personal); outline-offset: 2px; }
.pmod.on { border-color: var(--personal); background: color-mix(in srgb, var(--personal) 8%, var(--surface)); }
.pmod-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--personal) 14%, transparent); color: var(--personal); }
.pmod b { font-size: 15.5px; } .pmod small { line-height: 1.45; }
.pmod-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); color: transparent; }
.pmod.on .pmod-check { background: var(--personal); border-color: var(--personal); color: #fff; }
.pmod.always { cursor: default; box-shadow: none; border-style: dashed; background: transparent; }
.psetup-money { display: grid; gap: 10px; margin-bottom: 14px; } .psetup-money h3 small { font-weight: 500; font-size: 13px; margin-left: 4px; }
.privacy-note { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13.5px; }
.privacy-note .ic { color: var(--personal); flex: none; }
.privacy-line { display: flex; align-items: center; gap: 6px; margin-top: 18px; }

.cap-card { padding: 14px 16px; }
.cap-form { display: grid; gap: 8px; }
.cap-row { display: flex; align-items: center; gap: 10px; } .cap-row > .ic { color: var(--personal); flex: none; }
.cap-row input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; padding: 6px 0; } .cap-row input:focus { box-shadow: none; }
.cap-mic.on { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); animation: pulse-mic 1.2s infinite; }
@keyframes pulse-mic { 50% { opacity: .55; } }
.cap-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); }
.cap-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cap-dest { display: flex; gap: 5px; flex-wrap: wrap; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 550; color: var(--muted); }
.dchip:hover { color: var(--text); } .dchip.on { background: var(--personal); border-color: var(--personal); color: #1a1205; }
.dchip.auto { border-style: dashed; border-color: var(--personal); }
.cap-keys { margin: 8px 0 0; } .cap-keys kbd { font-size: 11px; }
.qa-mode { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.qa-mode button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.qa-mode button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .qa-mode kbd { font-size: 10px; padding: 0 4px; }
.cap-modal .cap-row input { font-size: 19px; }

.inbox, .later { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inbox li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); } .inbox li > div { flex: 1 1 170px; }
.inbox li:last-child, .later li:last-child { border-bottom: 0; }
.inbox li > div { display: grid; min-width: 0; } .inbox b { font-weight: 550; overflow-wrap: anywhere; }
.route-sel { width: auto; padding: 4px 8px; font-size: 12.5px; }
.later li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.later label { display: flex !important; align-items: center; gap: 10px; min-width: 0; cursor: pointer; } .later label input { width: auto; flex: none; }
.later label > span:last-child { display: grid; min-width: 0; } .later b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-ic { font-size: 18px; flex: none; }
.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.list-card { display: grid; gap: 10px; } .list-card .card-head { margin-bottom: 0; flex-wrap: wrap; row-gap: 4px; } .list-card .card-head h3 { white-space: nowrap; } .list-card .card-head .row-gap { margin-left: auto; }
.li-add { display: flex; gap: 6px; } .li-add input { flex: 1; min-width: 0; padding: 7px 10px; }
.li-items { list-style: none; margin: 0; padding: 0; display: grid; }
.li-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px; padding: 3px 0; }
.li-items label { display: flex !important; align-items: center; gap: 9px; cursor: pointer; min-width: 0; } .li-items label input { width: auto; flex: none; }
.li-items label span { overflow-wrap: anywhere; } .li-items li.done label span { color: var(--muted); text-decoration: line-through; }
.li-star, .li-x { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); opacity: .55; font-size: 14px; }
.li-star.on { color: var(--personal); opacity: 1; } .li-items li:hover .li-star, .li-items li:hover .li-x { opacity: 1; }
.li-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (hover: none) { .li-star, .li-x { opacity: 1; } }
.aisle { margin: 6px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.li-done summary { cursor: pointer; padding: 4px 0; }
.sweep { display: grid; gap: 10px; padding: 6px 0 4px; }
.sweep-text { font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.sweep-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; } .sweep-acts .btn { justify-content: flex-start; }
.sweep-done p { font-size: 15px; }

.money-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; }
.money-bar .seg a { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 7px; font-size: 13.5px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.money-bar .seg a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.money-bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.month-pick { display: inline-flex; align-items: center; gap: 4px; } .month-pick b { min-width: 110px; text-align: center; }
.file-btn { cursor: pointer; }
.sample-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in srgb, var(--personal) 12%, transparent); font-size: 13.5px; }
.sample-banner > span { flex: 1; min-width: 200px; } .sample-banner .ic { color: var(--personal); }
.money-empty { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px; }
.money-empty h2 { font-size: 24px; margin: 4px 0 6px; } .money-empty .row-gap { margin: 14px 0 10px; }
.me-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.me-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--surface-2); } .me-points .ic { color: var(--personal); margin-top: 2px; flex: none; } .me-points span { display: grid; }
.pos { color: var(--ok); } .neg { color: var(--danger) !important; }
.money-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.cashflow { display: grid; gap: 12px; } .cashflow .card-head { margin-bottom: 0; }
.cf-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.cf-nums > div { display: grid; } .cf-nums b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cf-bar { display: flex; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 22%, var(--track)); overflow: hidden; }
.cf-out { background: var(--personal); } .cf-save { background: #3b82f6; }
.cashflow p { margin: 0; display: flex; align-items: center; gap: 6px; }
.safe-card { display: grid; align-content: center; gap: 4px; background: linear-gradient(150deg, color-mix(in srgb, var(--personal) 16%, var(--surface)), var(--surface)); }
.safe-card.over { background: linear-gradient(150deg, color-mix(in srgb, var(--danger) 14%, var(--surface)), var(--surface)); }
.safe-num { font-size: 38px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .safe-num small, .kpi-unit { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.safe-card p { margin: 0; }
.cat-rows, .budget-rows, .txn-mini, .heads, .spikes, .smallbuys, .recurring, .txn-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cat-emo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); font-size: 17px; flex: none; }
.cat-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; }
.cat-main, .br-main { display: grid; gap: 5px; min-width: 0; }
.cat-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .cat-top b { font-weight: 600; } .cat-top > span { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.budget-track { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--track); }
.budget-track > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width .4s; }
.budget-track i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: .45; }
.b-warn .budget-track > span { background: var(--warn); } .b-over .budget-track > span { background: var(--danger); }
.heads li { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; margin-bottom: 6px; font-size: 13.5px; line-height: 1.45; background: var(--surface-2); }
.heads li .ic { flex: none; margin-top: 2px; } .heads li.h-warn .ic { color: var(--warn); } .heads li.h-info .ic { color: var(--personal); }
.txn-mini li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.txn-mini li:hover .tm-main b { color: var(--accent); }
.tm-main { display: grid; min-width: 0; } .tm-main b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-mini li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.act-tools select { width: auto; } .act-tools input[type=search] { width: 200px; max-width: 100%; }
.act-tools > .muted { margin-left: auto; }
.hint-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin: 0 0 14px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.hint-line > span { flex: 1; min-width: 180px; } .hint-line .ic { color: var(--personal); }
.txn-day { padding-bottom: 6px; } .txn-day .card-head { margin-bottom: 4px; } .txn-day h3 { font-size: 14.5px; }
.txn-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.txn-main { display: grid; text-align: left; min-width: 0; } .txn-main b { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .txn-main:hover b { color: var(--accent); }
.txn-list .tag { text-transform: none; }
.txn-cat { width: auto; max-width: 170px; padding: 4px 8px; font-size: 12.5px; }
.txn-amt { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 84px; text-align: right; }
.budget-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.budget-row.idle { opacity: .6; } .budget-row.idle:hover, .budget-row.idle:focus-within { opacity: 1; }
.br-main small { font-size: 12px; }
.br-input input { text-align: right; font-variant-numeric: tabular-nums; }
.verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; margin-bottom: 18px; }
.verdict h2 { font-size: 22px; margin: 4px 0; } .verdict.bad h2 { color: var(--danger); }
.io-chart { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 150px; padding-bottom: 22px; }
.io-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; text-align: center; } .io-col small { font-size: 11.5px; color: var(--muted); } .io-col.on small { color: var(--text); font-weight: 700; }
.io-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.io-bars i { display: block; width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.io-bars i.in, .io-key i.in { background: color-mix(in srgb, var(--ok) 75%, transparent); } .io-bars i.out, .io-key i.out { background: var(--personal); } .io-bars i.out.over { background: var(--danger); }
.io-col:not(.on) .io-bars { opacity: .55; }
.io-key { position: absolute; right: 0; bottom: -2px; display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); } .io-key span { display: inline-flex; align-items: center; gap: 4px; } .io-key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.spikes li, .smallbuys li, .recurring li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.spikes li:first-child, .smallbuys li:first-child, .recurring li:first-child, .txn-list li:first-child { border-top: 0; }
.spikes li > div, .smallbuys li > span:nth-child(2), .recurring li > span:nth-child(2) { display: grid; min-width: 0; }
.smallbuys li { grid-template-columns: auto minmax(0, 1fr) auto; } .smallbuys li > b, .recurring li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.recurring li.stale { opacity: .6; }
.csv-preview { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.csv-preview table { border-collapse: collapse; font-size: 12.5px; width: 100%; } .csv-preview th, .csv-preview td { padding: 6px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.csv-preview th { background: var(--surface-2); font-weight: 650; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .pmod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pmod-grid, .money-hero, .money-empty, .verdict { grid-template-columns: minmax(0, 1fr); }
  .cap-row .btn.primary { padding-inline: 12px; } .cap-hint { white-space: normal; }
  .txn-list li { grid-template-columns: auto minmax(0, 1fr) auto; } .txn-list .txn-cat, .txn-list .tag { grid-column: 2 / -1; grid-row: 2; justify-self: start; max-width: 100%; }
  .budget-row { grid-template-columns: auto minmax(0, 1fr) 90px; }
  .act-tools > .muted { margin-left: 0; width: 100%; } .act-tools input[type=search] { flex: 1; }
  .month-pick b { min-width: 0; }
  .safe-num { font-size: 32px; }
}
/* ---------- Personal (Round 2): bills, plans, calculators, library ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; }
.link-btn { font-weight: 600; text-align: left; } .link-btn:hover { color: var(--accent); }
.bill-table td { white-space: nowrap; } .bill-table td:first-child { white-space: normal; }
.bill-list, .sugg-list, .mini-bills, .mini-lib, .pay-lines, .ret-facts, .lib-grid, .yr-top { list-style: none; margin: 0; padding: 0; }
.bill-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.bill-list li:first-child { border-top: 0; }
.bill-date { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); line-height: 1.05; }
.bill-date b { font-size: 16px; } .bill-date small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.bill-list li.late .bill-date { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.bill-main { display: grid; text-align: left; min-width: 0; } .bill-main b { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.bill-right { display: grid; justify-items: end; gap: 4px; } .bill-main:hover b { color: var(--accent); }
.bill-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-cal { display: grid; gap: 8px; } .bill-cal .card-head { margin-bottom: 0; }
.bc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bc-dow { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.bc-day { display: grid; align-content: start; justify-items: center; min-height: 46px; padding: 4px 2px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.bc-day.other { opacity: .35; } .bc-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.bc-day.has { background: color-mix(in srgb, var(--personal) 18%, var(--surface-2)); } .bc-day.late { background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); }
.bc-day small { font-size: 10.5px; font-weight: 700; color: var(--personal); font-variant-numeric: tabular-nums; } .bc-day.late small { color: var(--danger); }
.sugg-card { border-style: dashed; }
.sugg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sugg-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.sugg-list li > span:nth-child(2) { display: grid; min-width: 0; }
.align-end { align-self: end; padding-bottom: 10px; }
.mini-bills li, .mini-lib li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; }
.mini-bills li > span, .mini-lib li > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; } .mini-bills b, .mini-lib b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-lib li { grid-template-columns: auto minmax(0, 1fr) auto; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.plan-card { display: grid; gap: 10px; align-content: start; --c: var(--personal); }
.plan-card.st-done { --c: var(--ok); } .plan-card.st-behind, .plan-card.st-late { --c: var(--warn); }
.plan-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .plan-top > div { display: grid; min-width: 0; } .plan-top b { font-size: 16px; }
.plan-emo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 15%, transparent); font-size: 21px; }
.plan-nums { display: flex; align-items: baseline; gap: 6px; } .plan-nums b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan-pct { margin-left: auto; font-weight: 700; color: var(--c); }
.plan-card .mini-track { height: 8px; } .plan-card p { margin: 0; }
.warn-txt { color: var(--warn); }
.plan-total { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); } .plan-total b { font-size: 18px; }
.pay-card { display: grid; gap: 10px; margin-bottom: 4px; } .pay-card .card-head { margin-bottom: 0; } .pay-card p { margin: 0; }
.pay-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--track); }
.pay-bar span, .pay-lines i { background: var(--pc, var(--personal)); }
.pay-bar span.spend, .pay-lines .spend i { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.pay-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 18px; }
.pay-lines li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; } .pay-lines li span { flex: 1; min-width: 0; } .pay-lines li b { font-variant-numeric: tabular-nums; }
.pay-lines i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.modal .pay-lines { grid-template-columns: 1fr; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.pay-edit { display: grid; gap: 8px; } .pay-edit label { display: grid !important; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; }
.calc-tabs { margin-bottom: 14px; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.calc-in { display: grid; gap: 12px; } .calc-more summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; }
.calc-out { display: grid; gap: 14px; }
.ret-big { display: grid; gap: 2px; } .ret-big b { font-size: 38px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--personal); }
.ret-facts { display: grid; gap: 8px; }
.ret-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.ret-facts li .ic { flex: none; margin-top: 2px; color: var(--personal); } .ret-facts li.good .ic { color: var(--ok); }
.ret-chart { width: 100%; height: auto; display: block; } .ret-chart text { font-size: 11px; fill: var(--muted); }
.rc-area { fill: color-mix(in srgb, var(--personal) 18%, transparent); } .rc-line { fill: none; stroke: var(--personal); stroke-width: 2.5; } .rc-put { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.io-key.static { position: static; margin: 0; } .io-key i.put { background: transparent; border: 1.5px dashed var(--muted); } .io-key.static i.in { background: var(--personal); }
.debt-rows { display: grid; gap: 6px; }
.debt-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.debt-row.head span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.debt-row input { padding: 7px 8px; min-width: 0; }
.debt-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.debt-plan { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid transparent; }
.debt-plan.av { border-color: color-mix(in srgb, var(--personal) 50%, transparent); }
.debt-plan > b { font-size: 22px; letter-spacing: -.02em; } .debt-plan ol { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 3px; } .debt-plan p { margin: 4px 0 0; }

.stars { display: inline-flex; gap: 1px; color: var(--track); font-size: 14px; line-height: 1; } .stars i { font-style: normal; } .stars .on { color: #f5b301; }
.stars.edit button { font-size: 28px; padding: 0 2px; color: var(--track); transition: transform .1s; } .stars.edit button.on { color: #f5b301; } .stars.edit button:hover { transform: scale(1.15); }
.rate-box { display: grid; gap: 10px; justify-items: center; text-align: center; } .rate-box form { width: 100%; text-align: left; } .rate-box > p { margin: 0; font-weight: 600; }
.rate-row { display: flex; align-items: center; gap: 12px; }
.lib-tools { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.lib-tools input[type=search] { width: 240px; max-width: 100%; }
.fchip small, .lib-status small { opacity: .7; font-weight: 600; margin-left: 2px; }
.lib-status { margin-bottom: 14px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lib-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); }
.card .lib-card { background: var(--surface-2); border-color: transparent; }
.lib-card.dropped { opacity: .6; }
.lib-emo { display: grid; place-items: center; width: 44px; height: 54px; border-radius: 8px; background: color-mix(in srgb, var(--personal) 13%, var(--surface-2)); font-size: 22px; flex: none; }
.lib-emo.sm { width: 32px; height: 38px; font-size: 16px; }
.lib-main { display: grid; gap: 3px; min-width: 0; }
.lib-title { text-align: left; font-weight: 650; font-size: 14.5px; line-height: 1.3; } .lib-title:hover { color: var(--accent); }
.lib-meta, .lib-prog { display: flex; align-items: center; gap: 8px; } .lib-prog .mini-track { flex: 1 1 80px; max-width: 180px; } .lib-emo { grid-row: span 2; }
.lib-acts { grid-column: 2; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .lib-acts:empty { display: none; }
.year-card { margin-top: 18px; display: grid; gap: 10px; } .year-card .card-head { margin-bottom: 0; } .year-card p { margin: 0; }
.yr-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.yr-stats > div { display: grid; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); min-width: 96px; } .yr-stats b { font-size: 24px; letter-spacing: -.02em; }
.yr-top { display: grid; gap: 4px; } .yr-top li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.type-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.type-pick label { display: block !important; } .type-pick input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick span { display: inline-flex; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); font-size: 13px; font-weight: 550; cursor: pointer; color: var(--muted); }
.type-pick input:checked + span { background: var(--personal); border-color: var(--personal); color: #1a1205; } .type-pick input:focus-visible + span { outline: 2px solid var(--accent); }
.prog-pair { display: flex; align-items: center; gap: 6px; } .prog-pair input { min-width: 0; } .prog-pair span { color: var(--muted); font-size: 13px; }
.pick { display: grid; gap: 14px; } .pick-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pick-card { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 12px; border-radius: 14px; background: var(--surface-2); }
.pick-card h2 { font-size: 22px; margin: 0; } .pick-card p { margin: 0; } .pick-emo { font-size: 40px; line-height: 1; }
.row-gap.center { justify-content: center; }
@media (max-width: 860px) {
  .calc-grid, .debt-cmp { grid-template-columns: minmax(0, 1fr); }
  .debt-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } .debt-row.head { display: none; }
  .debt-row input[data-k=name] { grid-column: 1 / 4; } .debt-row .btn { grid-row: 1; grid-column: 4; }
  .lib-grid { grid-template-columns: minmax(0, 1fr); }
  .lib-tools input[type=search] { width: 100%; }
  .ret-big b { font-size: 32px; }
  .pay-edit label { grid-template-columns: minmax(0, 1fr) 100px; }
}
/* ---------- Personal (Round 3): reflect, life admin, keep in touch, weekly reset ---------- */
.center { text-align: center; }
.support-card { display: grid; gap: 8px; margin-bottom: 16px; border: 1.5px solid color-mix(in srgb, #3b82f6 45%, var(--border)); background: color-mix(in srgb, #3b82f6 8%, var(--surface)); }
.support-card h3 { display: flex; align-items: center; gap: 8px; } .support-card p { margin: 0; } .support-card .ic { color: #3b82f6; }
.support-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; } .support-list a { font-weight: 700; color: #3b82f6; }
.lock-card { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 20px; max-width: 420px; margin: 20px auto; }
.lock-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--personal) 15%, transparent); color: var(--personal); }
.pin-form { display: flex; gap: 8px; } .pin-form input { width: 160px; text-align: center; font-size: 22px; letter-spacing: .4em; }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mood-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mood-btn { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; min-width: 58px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); transition: transform .12s, border-color .12s; }
.mood-btn span { font-size: 28px; line-height: 1; } .mood-btn small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mood-btn:hover { transform: translateY(-2px); border-color: var(--personal); } .mood-btn.on { border-color: var(--personal); background: color-mix(in srgb, var(--personal) 14%, var(--surface)); }
.mood-row.big { justify-content: space-between; } .mood-row.big .mood-btn { flex: 1; min-width: 0; padding: 12px 4px; } .mood-row.big .mood-btn span { font-size: 34px; }
.mood-row.sm .mood-btn { min-width: 0; padding: 5px 8px; border-radius: 10px; } .mood-row.sm .mood-btn span { font-size: 21px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-modal .form { gap: 12px; } .ci-modal .eyebrow { margin: 4px 0 -4px; }
.ci-hero { display: grid; gap: 14px; margin-bottom: 18px; } .ci-hero h2 { font-size: 24px; margin: 2px 0 0; }
.ci-today { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ci-today li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.ci-today li > span:nth-child(2) { display: grid; min-width: 0; } .ci-emo { font-size: 24px; }
.daily-q { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; } .daily-q + .row-gap { margin-bottom: 14px; }
.week-moods { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-bottom: 8px; }
.week-moods span { display: grid; gap: 2px; padding: 8px 0; border-radius: 10px; background: var(--surface-2); } .week-moods b { font-size: 22px; line-height: 1.2; } .week-moods small { font-size: 11px; color: var(--muted); }
.journal-list { list-style: none; margin: 0; padding: 0; display: grid; }
.journal-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--border); color: var(--text); }
.journal-list li:first-child a { border-top: 0; } .journal-list a:hover b { color: var(--accent); }
.je-mood { font-size: 22px; width: 34px; text-align: center; } .je-main { display: grid; min-width: 0; } .je-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood-chart { width: 100%; height: auto; display: block; }
.mc-grid { stroke: var(--border); stroke-dasharray: 3 5; } .mc-lbl { font-size: 11px; fill: var(--muted); }
.mc-line { fill: none; stroke: var(--personal); stroke-width: 2.5; stroke-linejoin: round; }
.mc-dot { stroke: var(--surface); stroke-width: 2; } .mc-dot.m1 { fill: #ef4444; } .mc-dot.m2 { fill: #f97316; } .mc-dot.m3 { fill: #eab308; } .mc-dot.m4 { fill: #84cc16; } .mc-dot.m5 { fill: #22c55e; }
.feel-cloud { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.feel-cloud span { font-size: calc(var(--s, 1) * 14px); font-weight: 650; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.feel-cloud span.up { color: var(--ok); } .feel-cloud span.down { color: #f97316; } .feel-cloud small { font-size: 11px; color: var(--muted); font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); margin-bottom: 10px; } .back-link:hover { color: var(--accent); }
.entry-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.entry-card { display: grid; gap: 10px; }
.entry-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entry-title { flex: 1; min-width: 180px; border: 0; background: transparent; font-size: 22px; font-weight: 700; padding: 4px 0; } .entry-title:focus { box-shadow: none; }
.entry-date { width: auto; padding: 5px 8px; font-size: 13px; }
.entry-prompt { margin: 0; color: var(--personal); font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.entry-body { min-height: 340px; border: 0; background: var(--surface-2); border-radius: 12px; padding: 14px 16px; font-size: 16px; line-height: 1.7; resize: vertical; font-family: inherit; }
.entry-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.coach-card { display: grid; gap: 10px; position: sticky; top: 80px; } .coach-card .card-head { margin-bottom: 0; } .coach-card p { margin: 0; }
.coach-thread { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.coach-thread .msg { padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; max-width: 100%; }
.coach-thread .msg.assistant { background: color-mix(in srgb, var(--personal) 10%, var(--surface-2)); } .coach-thread .msg.user { background: var(--surface-2); justify-self: end; }
.coach-form { display: grid; gap: 6px; } .coach-form textarea { resize: vertical; } .coach-form .btn { justify-self: end; }
.coach-qs { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; font-weight: 550; }
.coach-note { display: flex; gap: 6px; align-items: flex-start; } .coach-note .ic { flex: none; margin-top: 3px; }
.home-mood p { margin: 0 0 8px; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ps-row > div { display: grid; }
.coach-opt { display: flex !important; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1.5px solid var(--border); cursor: pointer; }
.coach-opt.on { border-color: var(--personal); background: color-mix(in srgb, var(--personal) 7%, transparent); }
.coach-opt input { width: auto; margin-top: 3px; } .coach-opt > span { display: grid; gap: 4px; }
.date-list, .chore-list, .rs-tasks, .rs-done, .p-log { list-style: none; margin: 0; padding: 0; display: grid; }
.date-list li, .chore-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.date-list li:first-child, .chore-list li:first-child { border-top: 0; }
.dl-day { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); line-height: 1.05; }
.dl-day b { font-size: 16px; } .dl-day small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.date-list li.soon .dl-day { background: color-mix(in srgb, var(--personal) 18%, transparent); color: var(--personal); }
.dl-main { display: grid; text-align: left; min-width: 0; } .dl-main b { font-weight: 600; line-height: 1.3; } .dl-main:hover b { color: var(--accent); }
.chore-list li.late .cat-emo { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.tpl-list { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.person-card { display: grid; gap: 8px; align-content: start; } .person-card p { margin: 0; }
.person-card.due { border-color: color-mix(in srgb, var(--personal) 55%, var(--border)); }
.pc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .pc-head > div { display: grid; min-width: 0; } .pc-head b { font-size: 16px; }
.avatar.p-family { background: color-mix(in srgb, #ec4899 22%, var(--surface-2)); } .avatar.p-friend { background: color-mix(in srgb, #3b82f6 22%, var(--surface-2)); } .avatar.p-partner { background: color-mix(in srgb, #ef4444 22%, var(--surface-2)); }
.bday-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .bday-strip span { padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--personal) 12%, transparent); font-size: 13.5px; }
.p-log li { font-size: 13.5px; padding: 3px 0; } .p-log b { margin-right: 6px; }
.pill-radio { display: block !important; } .pill-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pill-radio span { display: inline-flex; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); font-size: 13px; font-weight: 550; cursor: pointer; color: var(--muted); }
.pill-radio input:checked + span { background: var(--personal); border-color: var(--personal); color: #1a1205; }
.rs-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.rs-steps button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.rs-steps li.on button { background: var(--personal); color: #1a1205; } .rs-steps li.done button { color: var(--ok); }
.rs-card { display: grid; gap: 14px; } .rs-card h2 { font-size: 22px; margin: 0; } .rs-card > p { margin: -8px 0 0; }
.rs-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); } .rs-row > div { display: grid; }
.rs-block { display: grid; gap: 6px; }
.rs-tasks li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); } .rs-tasks li > span:first-child { display: grid; min-width: 0; flex: 1 1 200px; }
.rs-done li { display: flex; gap: 6px; align-items: center; font-size: 13.5px; padding: 2px 0; } .rs-done .ic { color: var(--ok); }
.rs-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.rs-pick { display: flex !important; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; border: 1.5px solid var(--border); cursor: pointer; }
.rs-pick.on { border-color: var(--personal); background: color-mix(in srgb, var(--personal) 9%, transparent); } .rs-pick input { width: auto; margin-top: 3px; } .rs-pick > span { display: grid; min-width: 0; }
.rs-pick:has(input:disabled) { opacity: .5; cursor: default; }
.rs-sum { display: grid; gap: 10px; } .rs-sum p { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); line-height: 1.6; white-space: pre-line; } .rs-sum .eyebrow { display: block; margin-bottom: 4px; }
.reset-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--personal) 16%, var(--surface)), var(--surface)); }
.reset-card > div { display: grid; gap: 2px; } .reset-card b { display: flex; align-items: center; gap: 6px; } .reset-card.quiet { background: var(--surface); } .reset-card.quiet b { font-size: 16px; }
@media (max-width: 860px) {
  .entry-wrap { grid-template-columns: minmax(0, 1fr); } .coach-card { position: static; }
  .entry-body { min-height: 260px; }
  .mood-btn { min-width: 0; padding: 8px 6px; } .mood-row.big .mood-btn small { font-size: 10.5px; }
}
/* ---------- Focus room (Round 1) ---------- */
.focus-wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.focus-main { gap: 16px; }
.focus-status { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.focus-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-goal { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); text-align: center; } .focus-goal b { color: var(--text); }
.park-form { display: flex; gap: 6px; width: 100%; max-width: 440px; } .park-form input { flex: 1; min-width: 0; }
.focus-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .focus-tools .btn.on { color: var(--personal); }
.focus-form { gap: 14px; } .focus-form > label, .focus-form .grid2, .focus-form .prep { width: 100%; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; width: 100%; }
.mode-card { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface); }
.mode-card b { font-size: 13.5px; } .mode-card small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.mode-card:hover { border-color: var(--c, var(--accent)); } .mode-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.prep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .prep .fchip { font-size: 12.5px; padding: 4px 10px; }
.mixer { display: grid; gap: 12px; } .mixer .card-head { margin-bottom: 0; }
.mix-master { display: flex !important; align-items: center; gap: 10px; color: var(--muted); } .mix-master input { flex: 1; }
.mixer input[type=range] { accent-color: var(--personal); padding: 0; border: 0; background: transparent; box-shadow: none; height: 22px; }
.mix-presets .fchip { font-size: 12.5px; padding: 4px 10px; }
.fchip.saved { padding: 0; gap: 0; overflow: hidden; } .fchip.saved button { padding: 4px 6px 4px 10px; color: inherit; } .fchip.saved .x { padding: 4px 8px 4px 2px; opacity: .6; } .fchip.saved .x:hover { opacity: 1; }
.mix-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mix-rows li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 3px 6px; border-radius: 9px; }
.mix-rows li.on { background: color-mix(in srgb, var(--personal) 9%, transparent); }
.mix-name { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 13.5px; font-weight: 550; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-name span { font-size: 17px; } .mix-rows li.on .mix-name { color: var(--text); }
.mix-rows li:not(.on) input[type=range] { opacity: .45; }
.mix-break { display: flex !important; align-items: center; gap: 10px; } .mix-break select { width: auto; padding: 4px 8px; font-size: 13px; }
.lofi-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--border); } .lofi-card > span:first-child { font-size: 22px; } .lofi-card > div { display: grid; flex: 1; }
.q-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.q-btn { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface); }
.q-btn b { font-size: 18px; } .q-btn small { font-size: 11px; color: var(--muted); } .q-btn:hover { border-color: var(--accent); }
.q-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.wrap-form .eyebrow { margin: 4px 0 -4px; } .wrap-facts { display: grid; gap: 4px; margin: 0; } .wrap-facts span { display: flex; align-items: center; gap: 6px; }
body.zen .sidebar, body.zen .topbar, body.zen .bottombar, body.zen .fab, body.zen .focus-pill { display: none !important; }
body.zen .app { grid-template-columns: 1fr; } body.zen .main-col { min-height: 100vh; }
body.zen #view .page { max-width: none; padding: 0; }
.zen-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.zen-card { width: min(640px, 100%); background: transparent; border: 0; box-shadow: none; gap: 22px; }
.zen-card .focus-ring { width: min(340px, 78vw); } .zen-card .focus-time { font-size: 72px; } .zen-card .focus-label { max-width: 260px; font-size: 16px; }
@media (max-width: 860px) {
  .focus-wrap { grid-template-columns: minmax(0, 1fr); }
  .focus-main { padding: 24px 14px; }
  .mix-rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .q-row small { font-size: 9.5px; }
  .zen-card .focus-time { font-size: 56px; }
}
/* ---------- Focus room (Round 2) ---------- */
.break-help { display: grid; gap: 12px; justify-items: center; width: 100%; max-width: 440px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.breath { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.breath-ball { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ok) 55%, transparent), color-mix(in srgb, var(--ok) 15%, transparent)); transform: scale(.5); }
.breath-txt { position: relative; display: grid; justify-items: center; } .breath-label { font-size: 16px; } .breath-count { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stretch { display: grid; gap: 6px; justify-items: center; text-align: center; } .stretch p { margin: 0; max-width: 320px; } .stretch-emo { font-size: 40px; line-height: 1; }
.today-focus { display: flex; align-items: center; gap: 16px; }
.tf-ring { position: relative; width: 92px; height: 92px; flex: none; } .tf-ring svg { width: 100%; height: 100%; }
.tf-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; } .tf-ring b { font-size: 22px; } .tf-ring small { font-size: 11px; color: var(--muted); }
.tf-main { display: grid; gap: 4px; min-width: 0; }
.plan-day .card-head { flex-wrap: wrap; }
.plan-blocks, .sb-list, .top-focus { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.plan-blocks li, .sb-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 4px; border-radius: 9px; }
.sb-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
.plan-blocks li.now { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pb-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; color: #fff; }
.plan-blocks li.done .pb-dot { background: var(--c); } .plan-blocks li.done b { text-decoration: line-through; color: var(--muted); }
.pb-main { display: grid; min-width: 0; } .pb-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heatmap-wrap { display: grid; gap: 6px; overflow-x: auto; }
.hm-months { display: grid; grid-template-columns: repeat(19, 15px); gap: 3px; font-size: 10.5px; color: var(--muted); height: 14px; }
.heatmap { display: grid; grid-template-rows: repeat(7, 15px); grid-auto-flow: column; grid-auto-columns: 15px; gap: 3px; }
.hm { display: inline-block; width: 15px; height: 15px; border-radius: 4px; background: var(--track); }
.hm.l1 { background: color-mix(in srgb, var(--accent) 30%, var(--track)); } .hm.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--track)); } .hm.l3 { background: color-mix(in srgb, var(--accent) 80%, var(--track)); } .hm.l4 { background: var(--accent); }
.hm-pad { visibility: hidden; }
.hm-key { display: flex; align-items: center; gap: 4px; margin: 0; } .hm-key .hm { width: 11px; height: 11px; border-radius: 3px; } .hm-key span { margin-left: 4px; }
.hour-bars, .week-bars { display: grid; align-items: end; gap: 3px; height: 130px; }
.hour-bars { grid-template-columns: repeat(18, 1fr); } .week-bars { grid-template-columns: repeat(8, 1fr); gap: 8px; }
.hour-bars span, .week-bars span { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 2px; }
.hour-bars span { grid-template-rows: 1fr auto; }
.hour-bars i, .week-bars i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); align-self: end; }
.week-bars span { grid-template-rows: auto 1fr auto; } .week-bars b { font-size: 11px; color: var(--accent); min-height: 14px; } .week-bars i { grid-row: 2; }
.hour-bars small, .week-bars small { font-size: 10px; color: var(--muted); white-space: nowrap; min-height: 12px; }
.top-focus li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.top-focus li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-bar { display: block; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; } .tf-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
@media (max-width: 860px) {
  .top-focus li { grid-template-columns: minmax(0, 1fr) 80px auto; }
}
@media print { body.print-report .page > :not(.report-head):not(.kpis):not(.split):not(.table-card):not(.weekly-review) { display: none !important; } }

/* ===== Study Round 3: flashcards, quizzes, Create with AI, Tutor ===== */
.src-chip { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.src-chip:hover, button.src-chip:hover { color: var(--accent); border-color: var(--accent); }
.src-chip b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; }
.mastery { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--track); gap: 2px; }
.mastery span { min-width: 0; } .m-new { background: color-mix(in srgb, var(--muted) 45%, transparent); } .m-learn { background: var(--warn); } .m-master { background: var(--ok); }
.fc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 16px; }
.daily-q { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--study) 16%, var(--surface)), var(--surface)); }
.daily-q h2 { font-size: 26px; margin: 2px 0 4px; } .daily-q .btn { align-self: flex-start; }
.fc-stats { display: grid; gap: 12px; }
.fs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .fs-row span { display: grid; } .fs-row b { font-size: 22px; font-variant-numeric: tabular-nums; }
.rev-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 54px; align-items: end; }
.rev-bars span { height: 100%; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .rev-bars i { display: block; width: 100%; background: var(--study); border-radius: 4px; min-height: 0; }
.deck .mastery { margin: 8px 0 6px; height: 6px; }
.mode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mode-tile { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); transition: .15s; }
.mode-tile .ic { color: var(--study); } .mode-tile:hover { border-color: var(--study); transform: translateY(-2px); }
.deck-stats { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-bottom: 16px; align-items: center; }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; } .ds-legend span { display: inline-flex; align-items: center; gap: 6px; } .ds-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fore-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 86px; align-items: end; }
.fore-bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-align: center; font-size: 11px; gap: 3px; }
.fore-bars b { font-size: 11px; color: var(--muted); }
.fore-bars i { flex: none; display: block; background: var(--accent); border-radius: 4px 4px 2px 2px; min-height: 2px; opacity: .85; }
.fore-bars small { color: var(--muted); }
.card-filter { margin: 4px 0 10px; max-width: 320px; }
.cl-back { display: grid; gap: 4px; } .cl-acts { display: inline-flex; gap: 2px; }
.match-head, .typed-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .match-head h2, .typed-head h2 { font-size: 22px; }
.match-time { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 70px; text-align: right; }
.match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.match-tile { min-height: 110px; padding: 12px; border-radius: var(--r); background: var(--surface); border: 2px solid var(--border); box-shadow: var(--shadow); font-size: 14px; font-weight: 550; line-height: 1.35; transition: transform .15s, border-color .15s, opacity .25s; display: grid; place-items: center; text-align: center; }
.match-tile span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.match-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.match-tile.sel { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.03); }
.match-tile.bad { border-color: var(--danger); animation: shake .35s; }
.match-tile.gone { opacity: 0; pointer-events: none; transform: scale(.85); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.typed { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.typed-card { padding: 28px; text-align: center; display: grid; gap: 8px; }
.typed-prompt { font-size: 22px; font-weight: 650; line-height: 1.35; }
.cloze { font-size: 16px; color: var(--muted); line-height: 1.6; } .cloze .blank { display: inline-block; min-width: 70px; border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 700; padding: 0 4px; }
.typed-form { display: flex; gap: 10px; align-items: flex-end; } .typed-form input, .typed-form textarea { font-size: 16px; padding: 12px 14px; }
.typed-result { display: grid; gap: 10px; border-width: 2px; }
.typed-result.right, .typed-result.close { border-color: var(--ok); } .typed-result.wrong { border-color: var(--danger); }
.tr-verdict { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.typed-result.right .tr-verdict, .typed-result.close .tr-verdict { color: var(--ok); } .typed-result.wrong .tr-verdict { color: var(--danger); }
.typed-result .btn.primary { justify-self: start; }
.missed-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; width: min(520px, 100%); text-align: left; }
.missed-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); } .missed-list span { color: var(--muted); font-size: 13.5px; }
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.quiz-card { display: grid; gap: 6px; color: var(--text); border-top: 4px solid var(--c); transition: .15s; } .quiz-card:hover { transform: translateY(-2px); border-color: var(--c); }
.qc-top { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.qc-best { font-weight: 800; color: var(--warn); } .qc-best.good { color: var(--ok); }
.quiz-start { display: grid; gap: 14px; justify-items: start; margin-bottom: 16px; }
.qs-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 100%; } .qs-row .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.attempt-bars { display: flex; gap: 8px; height: 110px; align-items: end; }
.attempt-bars span { flex: 1; max-width: 46px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11px; }
.attempt-bars i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; } .attempt-bars i.good { background: var(--ok); } .attempt-bars i.mid { background: var(--warn); } .attempt-bars i.low { background: var(--danger); }
.q-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .q-meta + .q-text::before { content: none; }
.qv { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; } .qv.ok { color: var(--ok); } .qv.bad { color: var(--danger); }
.q.is-right { border-left: 4px solid var(--ok); } .q.is-wrong { border-left: 4px solid var(--danger); }
.opt { display: flex; align-items: center; gap: 10px; text-align: left; }
.opt em { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.opts.tf { grid-template-columns: 1fr 1fr; } .opts.tf .opt { justify-content: center; font-weight: 650; }
.short-input { font-size: 15px; } .short-ans { font-size: 15px; }
.q-review { display: grid; gap: 8px; } .q-fb { font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; color: var(--accent); }
.quiz-bar { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--r); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow); }
.quiz-timer { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; } .quiz-timer.low { color: var(--danger); }
.cr-busy { padding: 60px 20px; display: grid; place-items: center; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 800; margin-right: 8px; }
.cr-mats .card-head select { width: auto; }
.mat-group { margin-top: 12px; display: grid; gap: 6px; } .mat-group .eyebrow { margin-bottom: 2px; }
.mat-row { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; border: 1.5px solid var(--border); cursor: pointer; transition: .12s; }
.mat-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .mat-row.on { border-color: var(--accent); background: var(--accent-soft); }
.mat-row > span { display: grid; min-width: 0; } .mat-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mat-row.sm { padding: 7px 10px; } .mat-row input { width: auto; }
.cr-paste { margin-top: 14px; } .cr-paste summary { cursor: pointer; color: var(--muted); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; } .cr-paste textarea { margin-top: 8px; }
.cr-opts { display: grid; gap: 14px; position: sticky; top: 76px; }
.what-tiles { display: grid; gap: 8px; }
.what-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border); transition: .12s; }
.what-tile .ic { color: var(--study); grid-row: 1 / 3; } .what-tile.on { border-color: var(--accent); background: var(--accent-soft); } .what-tile small { font-size: 12.5px; line-height: 1.35; }
.cr-go .btn { flex-shrink: 0; white-space: nowrap; }
.cr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chk-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cr-focus { display: grid; gap: 6px; }
.cr-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }
.cr-into { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.cr-review .card-head { flex-wrap: wrap; gap: 8px; }
.cr-sec { margin-top: 18px; } .cr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .cr-name { max-width: 340px; font-weight: 600; }
.cr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cr-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.cr-list > li.off { opacity: .45; } .cr-list > li > input { margin-top: 10px; width: auto; }
.cr-edit { display: grid; gap: 6px; } .cr-edit textarea { resize: vertical; field-sizing: content; min-height: 38px; } .cr-edit textarea:first-of-type { font-weight: 600; }
.cr-opts-list { margin: 0; padding-left: 22px; font-size: 13.5px; color: var(--muted); display: grid; gap: 2px; } .cr-opts-list li.right { color: var(--ok); font-weight: 650; }
.tu-course-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; overflow-x: auto; } .tu-course-pick .seg { flex-shrink: 0; }
.tutor { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.tu-side { display: grid; gap: 12px; position: sticky; top: 76px; }
.tu-convs { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.tu-convs li { display: flex; align-items: center; border-radius: 9px; } .tu-convs li.on { background: var(--accent-soft); } .tu-convs li:hover { background: var(--surface-2); }
.tu-convs li > button:first-child { flex: 1; min-width: 0; display: grid; text-align: left; padding: 8px 10px; } .tu-convs b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-convs li .btn { opacity: 0; } .tu-convs li:hover .btn, .tu-convs li.on .btn { opacity: 1; }
.tu-bound { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); padding: 10px; border-radius: 10px; background: var(--surface-2); line-height: 1.4; }
.tu-main { padding: 0; display: flex; flex-direction: column; height: min(76vh, 780px); min-height: 460px; }
.tu-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tu-head .btn.on { background: var(--accent-soft); color: var(--accent); }
.tu-mats { padding: 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.tu-mat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .tu-mat-list .mat-row { background: var(--surface); }
.tu-log .msg.assistant { max-width: 92%; }
.thinking-msg { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; vertical-align: 2px; line-height: 1; }
.cite:hover { background: var(--accent); color: var(--on-accent); }
.tu-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tu-acts { display: flex; gap: 2px; align-items: center; margin-top: 6px; } .tu-acts .btn.icon { font-size: 14px; } .tu-acts .btn.on { background: var(--accent-soft); }
.tu-off { padding: 0 14px 12px; margin: 0; }
.cite-quote { margin: 8px 0 14px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.55; }
.prog-bar { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 14px 0 8px; } .prog-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.pdf-page.flash-page { box-shadow: 0 0 0 3px var(--accent); }
@media (max-width: 860px) {
  .fc-top, .deck-stats, .cr-grid, .tutor { grid-template-columns: 1fr; }
  .fs-row { grid-template-columns: repeat(2, 1fr); }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .match-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .match-tile { min-height: 90px; font-size: 13px; padding: 8px; }
  .typed-form { flex-direction: column; align-items: stretch; } .typed-prompt { font-size: 19px; }
  .opts { grid-template-columns: 1fr; } .opts.tf { grid-template-columns: 1fr 1fr; }
  .quiz-bar { top: 56px; }
  .what-tiles { grid-template-columns: 1fr; } .cr-opts, .tu-side { position: static; }
  .tu-convs { max-height: 160px; } .tu-main { height: 72vh; }
}
@media print {
  .sidebar, .topbar, .bottombar, .fab, .no-print, #toast { display: none !important; }
  .app { display: block; } body { background: #fff; color: #000; } .page { padding: 0; }
  .invoice { box-shadow: none; border: 0; padding: 0; } .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }