@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --accent: #6255d9;
  --accent-strong: #4e42c2;
  --accent-soft: #eeecff;
  --accent-wash: #f6f5ff;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f0f0ee;
  --surface-3: #e8e8e5;
  --text: #1f2028;
  --muted: #777984;
  --muted-2: #9a9ba3;
  --border: #e9e9e5;
  --success: #27845f;
  --success-soft: #e7f6ee;
  --warning: #a86b24;
  --warning-soft: #fff3df;
  --danger: #c64b56;
  --danger-soft: #fff0f0;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-soft: 0 8px 28px rgba(31, 32, 40, .06);
  --shadow-sheet: 0 -18px 60px rgba(22, 22, 32, .16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15151b;
  --surface: #202027;
  --surface-2: #292931;
  --surface-3: #363640;
  --text: #f2f2f7;
  --muted: #b1b1bf;
  --muted-2: #8e8e9b;
  --border: #35353f;
  --accent-soft: #302c54;
  --accent-wash: #242238;
  --success-soft: #1d362a;
  --warning-soft: #3b3020;
  --danger-soft: #3b2428;
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, .18);
  --shadow-sheet: 0 -18px 60px rgba(0, 0, 0, .4);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.app-frame { position: relative; width: 100%; max-width: 520px; min-height: 100vh; min-height: 100dvh; margin-inline: auto; background: var(--bg); overflow: clip; }
.topbar { position: sticky; top: 0; z-index: 10; height: 66px; padding: max(10px, env(safe-area-inset-top)) 20px 10px; display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--bg) 91%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.wordmark { display: inline-flex; gap: 9px; align-items: center; text-decoration: none; font: 800 21px/1 "Manrope", sans-serif; letter-spacing: -.8px; color: var(--text); }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:11px; color:white; background:var(--accent); font:800 22px/1 "Manrope",sans-serif; padding-bottom:3px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button, .avatar-button { border: 0; display:grid; place-items:center; cursor:pointer; transition:transform var(--motion-fast) var(--ease), background var(--motion-fast); }
.icon-button { width:40px; height:40px; border-radius:14px; background:var(--surface); color:var(--text); border:1px solid var(--border); }
.avatar-button { width:37px; height:37px; border-radius:50%; background:#efe0d6; color:#754b38; font-weight:700; }
.icon-button:active, .avatar-button:active, .nav-item:active, .btn:active { transform:scale(.97); }
[data-icon] svg { display:block; width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.screen { padding:26px 20px calc(120px + env(safe-area-inset-bottom)); min-height:calc(100dvh - 66px); outline:none; animation:screen-in 180ms var(--ease); }
@keyframes screen-in { from { opacity:.5; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.eyebrow { color:var(--muted); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:1.4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Manrope","DM Sans",sans-serif; letter-spacing:-.6px; }
h1 { margin-bottom:8px; font-size:29px; line-height:1.16; font-weight:800; }
h2 { font-size:20px; line-height:1.25; margin-bottom:8px; }
h3 { font-size:16px; line-height:1.3; margin-bottom:6px; }
.subtitle { color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:0; }
.greeting-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:24px; }
.greeting-copy { min-width:0; }
.greeting-copy h1 span { color:var(--accent); }
.day-chip { flex:none; display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:12px; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:600; }
.section-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 13px; }
.section-row h2 { margin:0; }
.text-button { border:0; padding:7px 0; background:transparent; color:var(--accent); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.screen > .text-button[data-action="back"] { display:flex; width:max-content; max-width:100%; align-items:center; justify-content:flex-start; gap:8px; min-height:36px; margin:0 0 16px; padding:4px 0; line-height:1.25; vertical-align:middle; }
.screen > .text-button[data-action="back"] svg { display:block; width:22px; height:22px; flex:none; }
.detail-back { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-height:36px; line-height:1.25; vertical-align:middle; }
.detail-back svg { display:block; width:22px; height:22px; flex:none; }
.today-summary { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; margin-bottom:24px; }
.summary-tile { min-height:100px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); padding:15px; display:flex; flex-direction:column; justify-content:space-between; }
.summary-tile.primary { background:var(--accent); color:white; border-color:transparent; }
.profile-summary { justify-content:flex-start; align-items:center; gap:18px; }
.profile-summary > div:last-child { min-width:0; flex:1; }
.profile-summary h2, .profile-summary .subtitle { overflow-wrap:anywhere; }
.summary-top { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; opacity:.82; gap:6px; }
.summary-number { font:800 28px/1.1 "Manrope",sans-serif; letter-spacing:-1px; margin-top:12px; }
.summary-caption { font-size:11px; opacity:.78; margin-top:4px; }
.board-tools { display:flex; gap:8px; overflow:auto; scrollbar-width:none; padding-bottom:2px; margin-bottom:14px; }
.board-tools::-webkit-scrollbar { display:none; }
.filter-pill { flex:none; border:1px solid var(--border); border-radius:999px; padding:9px 13px; background:var(--surface); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; transition:all var(--motion-fast); }
.filter-pill.is-active { background:var(--text); color:var(--bg); border-color:var(--text); }
.brick-list { display:grid; gap:10px; }
.brick-card { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:start; gap:12px; padding:15px 13px; border:1px solid var(--border); background:var(--surface); border-radius:19px; box-shadow:0 2px 4px rgba(25,25,40,.015); transition:transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast); }
.brick-card:active { transform:scale(.992); }
.brick-card.is-done { opacity:.72; }
.brick-card.is-done .brick-title { text-decoration:line-through; color:var(--muted); }
.brick-icon { width:44px; height:44px; display:grid; place-items:center; border:0; box-shadow:none; border-radius:15px; color:var(--tone); background:var(--tone-bg); }
.brick-icon svg { width:21px; height:21px; }
.brick-main { min-width:0; }
.brick-title { font-size:14px; font-weight:700; line-height:1.42; margin:1px 0 6px; overflow-wrap:anywhere; }
.brick-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--muted); font-size:11px; line-height:1.45; }
.meta-item { display:inline-flex; align-items:center; gap:4px; min-width:0; } .meta-item svg { display:block; width:13px; height:13px; flex:none; }
.meta-item [data-icon] svg { width:13px; height:13px; }
.brick-type { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; font-weight:700; }
.brick-right { display:flex; align-items:center; gap:4px; }
.check-button { border:1.5px solid var(--border); border-radius:50%; background:transparent; width:27px; height:27px; display:grid; place-items:center; cursor:pointer; color:transparent; transition:all var(--motion-fast); flex:none; }
.check-button:hover { border-color:var(--success); }
.is-done .check-button { background:var(--success); color:white; border-color:var(--success); }
.check-button svg { width:14px; height:14px; stroke-width:2.5; }
.more-button { border:0; background:transparent; color:var(--muted-2); width:27px; height:30px; display:grid; place-items:center; border-radius:9px; cursor:pointer; }
.more-button svg { width:18px; height:18px; }
.brick-share { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:10px; color:var(--accent); font-weight:700; }
.empty-state { text-align:center; padding:30px 19px; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg); }
.empty-art { width:58px; height:58px; margin:0 auto 14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); border-radius:20px; }
.empty-art svg { width:26px; height:26px; }
.empty-state h3 { margin-bottom:6px; }
.empty-state p { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:16px; }
.btn { border:1px solid transparent; border-radius:14px; min-height:46px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-size:13px; font-weight:700; transition:transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:var(--accent-strong); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-quiet { background:var(--accent-soft); color:var(--accent); }
.btn-danger { background:var(--danger-soft); color:var(--danger); }
.btn-block { width:100%; }
.bottom-dock { position:fixed; left:50%; bottom:0; z-index:20; transform:translateX(-50%); width:100%; max-width:520px; display:grid; grid-template-columns:1fr 1fr 64px 1.2fr 1fr; align-items:center; gap:2px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(20px); border-top:1px solid var(--border); }
.nav-item { min-width:0; min-height:51px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:4px 1px; color:var(--muted); background:transparent; border:0; border-radius:13px; font-size:9px; font-weight:700; cursor:pointer; }
.nav-item [data-icon] svg { width:20px; height:20px; }
.nav-item.is-active { color:var(--accent); background:var(--accent-wash); }
.nav-create { justify-self:center; display:grid; place-items:center; width:51px; height:51px; border:0; border-radius:18px; background:var(--accent); color:white; box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 25%, transparent); cursor:pointer; transition:transform var(--motion-fast); }
.nav-create:active { transform:scale(.93); }
.nav-create svg { width:24px; height:24px; stroke-width:2.2; }
.page-heading { margin-bottom:23px; }
.page-heading h1 { margin-bottom:7px; }
.content-stack { display:grid; gap:11px; }
.surface-row { width:100%; border:1px solid var(--border); background:var(--surface); border-radius:17px; padding:15px; display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; }
.surface-row .row-icon { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--surface-2); color:var(--accent); }
.surface-row .row-copy { flex:1; min-width:0; }
.surface-row .row-copy strong { display:block; font-size:13px; margin-bottom:4px; }
.surface-row .row-copy span { display:block; color:var(--muted); font-size:12px; line-height:1.4; }
.surface-row .row-arrow { color:var(--muted-2); }
.surface-row svg { width:19px; height:19px; }
.tag { display:inline-flex; align-items:center; padding:5px 8px; border-radius:8px; font-size:10px; font-weight:700; background:var(--surface-2); color:var(--muted); }
.tag.success { background:var(--success-soft); color:var(--success); }
.tag.warning { background:var(--warning-soft); color:var(--warning); }
.tag.accent { background:var(--accent-soft); color:var(--accent); }
.field { display:grid; gap:7px; margin-bottom:16px; }
.field label { font-size:12px; color:var(--text); font-weight:700; }
.field-hint { color:var(--muted); font-size:11px; line-height:1.4; }
.input, .textarea, .select { width:100%; min-height:48px; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--text); padding:12px 13px; outline:none; transition:border-color var(--motion-fast), box-shadow var(--motion-fast); }
.input:focus, .textarea:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.input::placeholder, .textarea::placeholder { color:var(--muted-2); }
.textarea { min-height:92px; resize:vertical; }
.form-actions { display:flex; gap:10px; margin-top:22px; }
.form-actions .btn { flex:1; }
.sheet-backdrop { position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; background:rgba(16,17,25,.4); backdrop-filter:blur(3px); animation:fade-in 150ms ease; }
.sheet { width:100%; max-width:520px; max-height:min(91dvh,780px); overflow-y:auto; overscroll-behavior:contain; border-radius:27px 27px 0 0; background:var(--bg); box-shadow:var(--shadow-sheet); padding:10px 20px calc(24px + env(safe-area-inset-bottom)); animation:sheet-in 220ms var(--ease); }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes sheet-in { from { transform:translateY(24px); opacity:.8; } to { transform:translateY(0); opacity:1; } }
.sheet-handle { width:38px; height:4px; background:var(--surface-3); border-radius:999px; margin:2px auto 20px; }
.sheet-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:22px; }
.sheet-heading h2 { margin-bottom:5px; }
.sheet-heading p { color:var(--muted); font-size:12px; line-height:1.4; margin:0; }
.close-button { width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); border-radius:12px; cursor:pointer; }
.step-line { display:flex; align-items:center; gap:6px; margin-bottom:22px; }
.step-segment { height:4px; flex:1; border-radius:999px; background:var(--surface-3); }
.step-segment.is-active { background:var(--accent); }
.step-label { color:var(--muted); font-size:11px; margin-bottom:8px; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.category-option { border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:12px 5px; text-align:center; display:grid; justify-items:center; gap:8px; font-size:11px; font-weight:700; cursor:pointer; }
.category-option .option-icon { display:grid; place-items:center; width:35px; height:35px; background:var(--surface-2); color:var(--accent); border-radius:12px; }
.category-option svg { width:18px; height:18px; }
.category-option.is-selected { border-color:var(--accent); background:var(--accent-wash); box-shadow:inset 0 0 0 1px var(--accent); }
.category-option.is-selected .option-icon { background:var(--accent); color:#fff; }
.icon-picker { display:flex; gap:7px; flex-wrap:wrap; }
.icon-option { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; }
.icon-option.is-selected { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--border); }
.toggle-copy strong { display:block; font-size:13px; margin-bottom:4px; }
.toggle-copy span { display:block; color:var(--muted); font-size:11px; line-height:1.35; }
.toggle { appearance:none; width:42px; height:25px; border:0; border-radius:999px; background:var(--surface-3); position:relative; cursor:pointer; transition:background var(--motion-fast); flex:none; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.15); transition:transform var(--motion-fast); }
.toggle:checked { background:var(--accent); }
.toggle:checked::after { transform:translateX(17px); }
.toast-root { position:fixed; z-index:70; left:50%; bottom:calc(91px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:calc(100% - 36px); max-width:460px; pointer-events:none; display:grid; gap:8px; }
.toast { border-radius:14px; background:var(--text); color:var(--bg); padding:13px 15px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; animation:toast-in 180ms var(--ease); }
@keyframes toast-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.search-box { display:flex; align-items:center; gap:9px; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:0 12px; margin-bottom:17px; }
.search-box input { flex:1; width:100%; min-width:0; background:transparent; border:0; outline:none; padding:13px 0; color:var(--text); font-size:13px; }
.search-box svg { color:var(--muted); width:18px; height:18px; }
.member-stack { display:flex; align-items:center; }
.member-avatar { width:31px; height:31px; border:2px solid var(--surface); border-radius:50%; display:grid; place-items:center; margin-left:-7px; background:#ead9cc; color:#684831; font-size:9px; font-weight:800; }
.member-avatar:first-child { margin-left:0; }
.member-avatar:nth-child(2) { background:#d9e6d8; color:#386441; }
.member-avatar:nth-child(3) { background:#e2dcf8; color:#6351a1; }
.member-avatar:nth-child(4) { background:var(--surface-2); color:var(--muted); }
.conversation-row { align-items:center; gap:11px; padding:14px 12px; }
.conversation-row .row-copy strong { font-size:13px; }
.conversation-row .row-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.conversation-meta { display:grid; justify-items:end; align-self:stretch; align-content:space-between; gap:7px; flex:none; color:var(--muted-2); font-size:10px; }
.conversation-unread { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; }
.chat-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.chat-avatar { width:40px; height:40px; display:grid; flex:none; background:var(--surface-2); color:var(--accent); }
.chat-heading-copy { flex:1; min-width:0; }
.chat-heading-copy h2 { margin:0 0 3px; font-size:16px; overflow-wrap:anywhere; }
.chat-heading-copy .subtitle { font-size:11px; }
.chat-demo-label { display:flex; align-items:center; gap:7px; padding:10px 12px; margin-bottom:18px; border-radius:12px; background:var(--accent-wash); color:var(--muted); font-size:10px; line-height:1.4; }
.chat-demo-label svg { width:14px; height:14px; flex:none; }
.messages-list { min-height:190px; padding:8px 0 14px; }
.composer-hint { margin:8px 2px 0; color:var(--muted-2); font-size:10px; line-height:1.4; }
.message-bubble { width:fit-content; max-width:83%; border-radius:17px 17px 17px 5px; background:var(--surface); border:1px solid var(--border); padding:11px 13px; font-size:13px; line-height:1.45; margin-bottom:8px; }
.message-bubble.own { margin-left:auto; background:var(--accent); color:#fff; border-color:var(--accent); border-radius:17px 17px 5px 17px; }
.message-time { color:var(--muted-2); font-size:10px; margin:0 4px 14px; }
.message-composer { display:flex; gap:8px; padding-top:12px; }
.message-composer .input { flex:1; min-width:0; }
.message-composer .btn { width:48px; padding:0; flex:none; }
.tree-canvas { display:grid; justify-items:center; gap:12px; padding:20px 0; }
.tree-node { display:grid; justify-items:center; gap:5px; min-width:100px; padding:12px 15px; background:var(--surface); border:1px solid var(--border); border-radius:15px; font-size:12px; font-weight:700; }
.tree-node .tree-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:12px; }
.tree-connector { height:17px; width:1px; background:var(--muted-2); }
.tree-branches { display:flex; align-items:flex-start; justify-content:center; gap:9px; width:100%; position:relative; }
.tree-branches::before { content:""; position:absolute; top:-7px; left:25%; right:25%; height:1px; background:var(--muted-2); }
.tree-branches .tree-node { min-width:0; flex:1; padding:10px 3px; font-size:10px; }
.tree-branches .tree-avatar { width:30px; height:30px; }
.notification-summary { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:16px; border:1px solid var(--border); border-radius:17px; background:var(--surface); }
.notification-summary-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:14px; background:var(--accent-soft); color:var(--accent); }
.notification-summary-icon svg { width:20px; height:20px; }
.notification-summary strong, .notification-summary small { display:block; }
.notification-summary strong { font-size:13px; margin-bottom:4px; }
.notification-summary small { font-size:11px; color:var(--muted); }
.notification-filters { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:3px; margin-bottom:14px; }
.notification-filters::-webkit-scrollbar { display:none; }
.notification-list { gap:10px; }
.notification { align-items:flex-start; }
.notification-read-dot { flex:none; width:8px; height:8px; margin:5px 3px 0 0; border-radius:50%; background:var(--surface-3); }
.notification:focus-visible, .conversation-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.notification .row-icon { position:relative; }
.notification.unread .row-icon::after { content:""; position:absolute; right:0; top:0; width:8px; height:8px; background:var(--accent); border:2px solid var(--surface); border-radius:50%; }
.preference-group { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:3px 15px; margin-bottom:14px; }
.preference-group .surface-row { padding:13px 0; border:0; border-radius:0; border-bottom:1px solid var(--border); }
.preference-group .surface-row:last-child { border-bottom:0; }
.theme-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-choice { border:1px solid var(--border); border-radius:14px; padding:12px 4px; background:var(--surface); cursor:pointer; display:grid; justify-items:center; gap:8px; font-size:11px; font-weight:700; }
.theme-choice.is-selected { border-color:var(--accent); background:var(--accent-wash); color:var(--accent); }
.theme-swatch { width:42px; height:30px; border:1px solid var(--border); border-radius:8px; display:flex; overflow:hidden; }
.theme-swatch span { flex:1; }
.plan-card { padding:19px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.plan-card.featured { border-color:color-mix(in srgb, var(--accent) 50%, var(--border)); background:var(--accent-wash); }
.plan-price { font:800 25px/1.2 "Manrope",sans-serif; margin:15px 0 6px; }
.plan-price small { font:500 12px "DM Sans",sans-serif; color:var(--muted); }
.plan-feature { display:flex; gap:8px; align-items:center; margin:11px 0; font-size:12px; color:var(--muted); }
.plan-feature svg { color:var(--success); width:15px; height:15px; flex:none; }
.divider { height:1px; background:var(--border); margin:17px 0; }
.helper-note { padding:12px 13px; border-radius:13px; background:var(--accent-wash); color:var(--muted); font-size:11px; line-height:1.5; }
@media (min-width: 521px) {
  body { padding:20px 0; background:var(--surface-2); }
  .app-frame { min-height:calc(100dvh - 40px); border-radius:28px; border:1px solid var(--border); box-shadow:0 15px 60px rgba(0,0,0,.08); }
  .bottom-dock { bottom:20px; border-radius:0 0 28px 28px; }
  .topbar { border-radius:28px 28px 0 0; }
}
@media (max-width:360px) {
  .screen { padding-inline:14px; }
  .topbar { padding-inline:14px; }
  .greeting-row { flex-direction:column; gap:10px; }
  .today-summary { gap:8px; }
  .summary-tile { padding:12px; }
  .brick-card { grid-template-columns:38px minmax(0,1fr) auto; gap:9px; padding:12px 10px; }
  .brick-icon { width:38px; height:38px; border-radius:13px; }
  .nav-item { font-size:8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}