:root{
  --ink:#14171F; --panel:#1C2029; --panel-2:#232836; --line:#2C3140;
  --gold:#D9A94F; --sage:#7FA88C; --clay:#C4694A; --blue:#8FA6C9; --violet:#B98FC9;
  --paper:#F2EFE7; --fog:#A8AEBC; --fog-dim:#6B7282;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: "SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme: dark;
}
body.theme-light{
  --ink:#F5F2EA; --panel:#FFFFFF; --panel-2:#EFEAE0; --line:#E1DACB;
  --paper:#221F17; --fog:#6B6455; --fog-dim:#9A9384;
  color-scheme: light;
}
body.theme-light .btn:not(.ghost):not(.danger){ color:#1A1406; }
body.theme-light #update-banner button{ color:var(--gold); }
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--ink); color:var(--paper); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{font-family:inherit;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

#app{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; position:relative;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(20,23,31,0.92); backdrop-filter:blur(10px);
  padding:14px 18px 10px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.topbar h1{font-family:var(--font-display); font-size:20px; font-weight:600; margin:0; letter-spacing:0.2px;}
.topbar .icon-btn{background:none;border:none;color:var(--paper);font-size:18px;cursor:pointer;padding:5px;border-radius:var(--r-sm);}
.topbar .icon-btn svg{width:21px; height:21px; display:block;}
.topbar .icon-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- Screens ---------- */
main{flex:1; padding:16px 18px 100px;}
.screen{display:none;}
.screen.active{display:block; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

/* ---------- Cards ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; margin-bottom:14px; box-shadow:0 2px 10px rgba(0,0,0,0.18); transition:transform .15s ease, box-shadow .15s ease;}
.card h2{font-family:var(--font-display); font-size:16px; margin:0 0 10px; font-weight:600; color:var(--paper);}
.card h2 .em{margin-right:6px;}
.section-label{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--fog-dim); margin:22px 0 8px; font-weight:600;}
.section-label:first-child{margin-top:0;}

/* ---------- Dashboard greeting ---------- */
.greeting{font-family:var(--font-display); font-size:26px; font-weight:600; margin:4px 0 2px; letter-spacing:0.2px;}
.greeting-date{color:var(--fog); font-size:13px; margin-bottom:18px;}

/* ---------- Life Ring (signature element) ---------- */
.ring-wrap{display:flex; align-items:center; gap:18px;}
.ring-legend{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:12px;}
.ring-legend .li{display:flex; align-items:center; gap:6px; color:var(--fog);}
.ring-legend .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.ring-legend b{color:var(--paper); font-weight:600;}

/* ---------- Stat grid ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.stat{background:var(--panel-2); border-radius:var(--r-md); padding:12px 10px; text-align:center; border:1px solid transparent; transition:border-color .15s ease;}
.stat .n{font-family:var(--font-mono); font-size:19px; font-weight:600; color:var(--gold);}
.stat .l{font-size:10.5px; color:var(--fog); margin-top:3px; line-height:1.3;}

/* ---------- List rows ---------- */
.row{
  display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .12s ease; border-radius:8px;
}
.row:active{background:var(--panel-2);}
.row:last-child{border-bottom:none;}
.row .row-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;background:var(--panel-2);}
.row .row-body{flex:1; min-width:0;}
.row .row-title{font-size:14.5px; font-weight:600; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row .row-sub{font-size:12px; color:var(--fog); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row .row-amt{font-family:var(--font-mono); font-size:13.5px; font-weight:600; flex:none;}
.chk{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--fog-dim); flex:none; display:flex; align-items:center; justify-content:center; transition:all .15s ease; cursor:pointer;}
.chk.done{background:var(--sage); border-color:var(--sage); color:var(--ink); font-weight:700;}
.empty{text-align:center; padding:36px 10px; color:var(--fog);}
.empty .em{font-size:32px; display:block; margin-bottom:10px; opacity:0.7;}
.empty svg{display:block; margin:0 auto 10px; opacity:0.6;}
.empty p{margin:0; font-size:13.5px; line-height:1.5;}

/* ---------- Plan tab hero + priority accents ---------- */
.plan-hero{display:flex; align-items:stretch; gap:8px; margin-bottom:16px;}
.plan-hero-stat{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 8px; text-align:center; cursor:pointer; transition:transform .12s ease;}
.plan-hero-stat:active{transform:scale(0.96);}
.plan-hero-stat .n{font-size:20px; font-weight:700; font-family:var(--font-display);}
.plan-hero-stat .l{font-size:10px; color:var(--fog-dim); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px;}
.plan-hero-cal{flex:1.1; background:var(--gold); color:#1A1406; border:none; border-radius:var(--r-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:700; cursor:pointer; transition:transform .12s ease;}
.plan-hero-cal:active{transform:scale(0.96);}
.plan-task{border-left:3px solid transparent; margin-left:-1px; padding-left:9px;}
.plan-task.high{border-left-color:var(--clay);}
.plan-task.top3{border-left-color:var(--gold);}
.streak-pill{display:flex; align-items:center; gap:3px; background:var(--panel-2); color:var(--gold); font-size:12px; font-weight:700; padding:4px 9px; border-radius:99px; flex:none;}
.goal-row{gap:12px;}

/* ---------- 2-column vertical card grid (Plan / Grow) ---------- */
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:2px;}
.grid-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; display:flex; flex-direction:column; gap:5px; cursor:pointer; border-left:3px solid transparent; transition:transform .12s ease, border-color .15s ease;}
.grid-card:active{transform:scale(0.97);}
.grid-card.high{border-left-color:var(--clay);}
.grid-card.top3{border-left-color:var(--gold);}
.grid-card .gc-title{font-size:13px; font-weight:600; color:var(--paper); line-height:1.3;}
.grid-card .gc-sub{font-size:11px; color:var(--fog-dim); line-height:1.3;}
.full-span{grid-column:1 / -1;}

/* ---------- Notes — masonry-style cards ---------- */
.notes-grid{column-count:2; column-gap:10px;}
.note-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 14px 14px; margin-bottom:12px; break-inside:avoid; cursor:pointer; position:relative; box-shadow:0 3px 10px rgba(0,0,0,0.18); transition:transform .15s ease, box-shadow .15s ease;}
.note-card:nth-child(3n+1){transform:rotate(-0.6deg);}
.note-card:nth-child(3n+2){transform:rotate(0.5deg);}
.note-card:nth-child(3n){transform:rotate(-0.3deg);}
.note-card:active{transform:scale(0.96) rotate(0deg) !important; box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.note-card::before{content:""; position:absolute; top:0; left:16px; right:16px; height:4px; border-radius:0 0 3px 3px; background:var(--accent,var(--gold));}
.note-card::after{content:""; position:absolute; top:-5px; right:18px; width:10px; height:10px; border-radius:50%; background:var(--accent,var(--gold)); box-shadow:0 2px 5px rgba(0,0,0,0.35);}
.note-card .nc-title{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--paper); margin-bottom:6px; line-height:1.3;}
.note-card .nc-body{font-size:12.5px; color:var(--fog); line-height:1.55; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap;}
.note-card .nc-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px;}
.note-card .nc-tag{font-size:10px; background:var(--panel-2); color:var(--fog); padding:2px 8px; border-radius:99px;}
.note-card .nc-date{font-size:10px; color:var(--fog-dim); margin-top:10px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--gold); color:#1A1406; border:none; border-radius:var(--r-md);
  padding:12px 16px; font-size:14px; font-weight:700; cursor:pointer; width:100%;
  box-shadow:0 2px 8px rgba(217,169,79,0.25); transition:transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.btn:active{transform:scale(0.97); box-shadow:0 1px 4px rgba(217,169,79,0.2);}
.btn:focus-visible{outline:2px solid var(--paper); outline-offset:2px;}
.btn.ghost{background:var(--panel-2); color:var(--paper); border:1px solid var(--line); font-weight:600; box-shadow:none;}
.btn.ghost:active{background:var(--line);}
.btn.danger{background:var(--clay); color:#241009; box-shadow:0 2px 8px rgba(196,105,74,0.25);}
.btn.sm{width:auto; padding:9px 14px; font-size:13px;}
.btn-row{display:flex; gap:10px; margin-top:14px;}

/* ---------- Forms ---------- */
label{display:block; font-size:12px; color:var(--fog); margin:14px 0 6px; font-weight:600;}
label:first-child{margin-top:0;}
input,select,textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  border-radius:var(--r-sm); padding:11px 12px; font-size:14.5px; font-family:inherit;
  transition:border-color .15s ease;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
textarea{min-height:80px; resize:vertical;}
.field-hint{font-size:11px; color:var(--fog-dim); margin-top:4px;}

/* ---------- Lively module forms (icons + staggered entrance) ---------- */
.form-head{display:flex; align-items:center; gap:11px; margin-bottom:6px;}
.form-head-icon{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; box-shadow:0 3px 10px rgba(0,0,0,0.25);}
.form-head h2{margin:0;}
.field-row{opacity:0; animation:fieldIn .4s ease forwards; margin:18px 0;}
.field-row:first-of-type{margin-top:14px;}
@keyframes fieldIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.field-row-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.field-icon{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:var(--panel-2); font-size:12.5px; flex:none; transition:transform .15s ease;}
.field-row:focus-within .field-icon{transform:scale(1.15); background:var(--gold); }
.field-label-text{font-size:12px; color:var(--fog); font-weight:600;}
.field-row.field-error input, .field-row.field-error select, .field-row.field-error textarea{border-color:var(--clay); animation:shakeErr .3s ease;}
@keyframes shakeErr{0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);}}
#mf-save{position:relative; overflow:hidden;}
#mf-save::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent); transform:translateX(-100%); animation:shine 2.6s ease-in-out infinite;}
@keyframes shine{0%,60%{transform:translateX(-100%);} 100%{transform:translateX(100%);}}
.chip-grid{display:flex; flex-wrap:wrap; gap:8px;}
.chip-select{padding:9px 13px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); font-size:13px; color:var(--paper); cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease; user-select:none;}
.chip-select.active{background:var(--gold); color:#1A1406; border-color:var(--gold); font-weight:700; transform:scale(1.05);}
.chip-select:active{transform:scale(0.92);}
.stepper{display:flex; align-items:center; gap:8px;}
.stepper input{text-align:center;}
.stepper-btn{width:42px; height:42px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line); color:var(--gold); font-size:20px; flex:none; cursor:pointer; transition:transform .12s ease, background .12s ease;}
.stepper-btn:active{transform:scale(0.85); background:var(--gold); color:#1A1406;}

/* ---------- Bottom nav ---------- */
nav.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(28,32,41,0.96); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
.tabbar-inner{max-width:560px; width:100%; display:flex; padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.tab{flex:1; background:none; border:none; color:var(--fog-dim); display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; cursor:pointer; border-radius:var(--r-sm); transition:color .15s ease;}
.tab .ti{font-size:19px; transition:transform .15s ease;}
.tab .ti svg{width:21px; height:21px; display:block;}
.tab .tl{font-size:10px; font-weight:600; letter-spacing:0.2px;}
.tab.active{color:var(--gold);}
.tab.active .ti{transform:translateY(-1px) scale(1.08);}
.tab:focus-visible{outline:2px solid var(--gold);}

/* ---------- Sheet / modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(8,9,13,0.6); z-index:50; display:none;}
.overlay.open{display:block;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:51; background:var(--panel);
  border-radius:20px 20px 0 0; max-height:88vh; overflow-y:auto; padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s ease; max-width:560px; margin:0 auto;
}
.sheet.open{transform:translateY(0);}
.sheet-handle{width:36px; height:4px; background:var(--line); border-radius:2px; margin:0 auto 14px;}
.sheet-title{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 4px;}
.sheet-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--fog); font-size:20px; cursor:pointer;}

/* ---------- Quick add grid ---------- */
.qa-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px;}
.qa-item{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 6px; text-align:center; cursor:pointer;}
.qa-item .em{display:flex; justify-content:center; margin-bottom:6px;}
.qa-item .l{font-size:10.5px; color:var(--fog); font-weight:600;}

/* ---------- Module tiles (More screen) ---------- */
.tile-grid{display:grid; grid-template-rows:repeat(2,1fr); grid-auto-flow:column; grid-auto-columns:138px; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, black 94%, transparent 100%); mask-image:linear-gradient(to right, black 94%, transparent 100%);}
.scroll-arrow{position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,0.3); opacity:0.9;}
.scroll-arrow-left{left:-4px;}
.scroll-arrow-right{right:-4px;}
.scroll-arrow:active{transform:translateY(-50%) scale(0.88);}
.tile-grid::-webkit-scrollbar{display:none;}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; cursor:pointer; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:flex-start; min-height:92px;}
.tile .em{font-size:22px;}
.tile .l{font-size:12.5px; font-weight:600; margin-top:8px; line-height:1.25;}
.tile .d{font-size:10.5px; color:var(--fog); margin-top:2px; line-height:1.3;}

/* ---------- Segmented control ---------- */
.segmented{display:flex; background:var(--panel-2); border-radius:var(--r-sm); padding:3px; margin-bottom:14px; border:1px solid var(--line);}
.segmented button{flex:1; background:none; border:none; color:var(--fog); padding:8px 4px; font-size:12.5px; font-weight:600; border-radius:6px; cursor:pointer;}
.segmented button.active{background:var(--gold); color:#1A1406;}

/* ---------- Chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.chip{background:var(--panel-2); border:1px solid var(--line); color:var(--fog); font-size:12px; padding:6px 12px; border-radius:99px; cursor:pointer; font-weight:600;}
.chip.active{background:var(--gold); color:#1A1406; border-color:var(--gold);}

/* ---------- Toast / banner ---------- */
#toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); background:var(--paper); color:#14171F; padding:11px 18px; border-radius:99px; font-size:13px; font-weight:600; z-index:80; opacity:0; transition:all .25s ease; pointer-events:none; white-space:nowrap;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#update-banner{position:fixed; top:0; left:0; right:0; z-index:90; background:var(--gold); color:#1A1406; padding:10px 16px; display:none; align-items:center; justify-content:space-between; font-size:13px; font-weight:600;}
#update-banner.show{display:flex;}
#update-banner button{background:#1A1406; color:var(--gold); border:none; border-radius:8px; padding:7px 12px; font-weight:700; font-size:12px; cursor:pointer;}

/* ---------- Lock screen ---------- */
#lock-screen{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s;
}
#lock-screen.show{opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s linear 0s;}
.lock-card{display:flex; flex-direction:column; align-items:center; text-align:center; transform:scale(0.96); transition:transform .24s cubic-bezier(.34,1.56,.64,1);}
#lock-screen.show .lock-card{transform:scale(1);}
.shake, .lock-card.shake{animation:shakeErr .38s ease;}
.lock-logo{width:60px; height:60px; margin-bottom:16px;}
.lock-brand{font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--fog-dim); margin-bottom:26px;}
.lock-welcome{font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--paper);}
.lock-sub{font-size:13px; color:var(--fog); margin-top:4px;}
.pin-dots{display:flex; gap:14px; margin:22px 0;}
.pin-dot{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--fog-dim); transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .16s ease, border-color .16s ease;}
.pin-dot.filled{background:var(--gold); border-color:var(--gold); transform:scale(1.15);}
.pin-dots.success .pin-dot{background:var(--sage); border-color:var(--sage); transform:scale(1.2);}
.pin-dots.error .pin-dot{background:var(--clay); border-color:var(--clay);}
.pin-pad{display:grid; grid-template-columns:repeat(3,64px); gap:14px;}
.pin-key{width:64px; height:64px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper); font-size:20px; font-weight:600; cursor:pointer; transition:transform .1s ease, background .1s ease;}
.pin-key:active{background:var(--panel); transform:scale(0.9);}

/* ---------- Onboarding ---------- */
#onboarding-screen{position:fixed; inset:0; z-index:220; background:radial-gradient(circle at 50% 0%, rgba(217,169,79,0.12), var(--ink) 60%); display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px; overflow-y:auto;}
#onboarding-screen.show{display:flex;}
.ob-dots{display:flex; gap:6px; justify-content:center; margin-bottom:18px;}
.ob-dots span{width:6px; height:6px; border-radius:50%; background:var(--line);}
.ob-dots span.active{background:var(--gold); width:18px; border-radius:3px; transition:all .2s ease;}

/* ---------- Progress bar ---------- */
.pbar{height:8px; background:var(--panel-2); border-radius:99px; overflow:hidden; margin-top:8px;}
.pbar > div{height:100%; border-radius:99px;}

/* ---------- Detail view header ---------- */
.detail-back{background:none; border:none; color:var(--fog); font-size:13px; font-weight:600; cursor:pointer; padding:6px 0; margin-bottom:10px; display:flex; align-items:center; gap:4px;}
.kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--fog);}
.kv .v{font-weight:600; text-align:right;}

::-webkit-scrollbar{width:0;height:0;}

/* ---------- Fingerprint key (in-grid, right of 0) ---------- */
.pin-key-fp{display:flex; align-items:center; justify-content:center; color:var(--gold);}
.pin-key-fp svg{width:24px; height:24px;}

/* ---------- Sidebar (desktop navigation) ---------- */
.sidebar{
  display:none; position:fixed; top:0; left:0; bottom:0; width:216px; z-index:25;
  background:var(--panel); border-right:1px solid var(--line);
  flex-direction:column; padding:18px 10px;
}
.sidebar-brand{font-family:var(--font-display); font-size:18px; font-weight:600; padding:8px 10px 24px; letter-spacing:0.2px;}
.sidebar-nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar .tab{
  flex-direction:row; justify-content:flex-start; gap:12px; width:100%;
  padding:10px 12px; border-radius:var(--r-md); color:var(--fog);
}
.sidebar .tab .ti{display:flex;}
.sidebar .tab .ti svg{width:19px; height:19px;}
.sidebar .tab .tl{font-size:13.5px; font-weight:600; letter-spacing:0;}
.sidebar .tab.active{background:var(--panel-2); color:var(--gold);}
.sidebar .tab.active .ti{transform:none;}
.sidebar-footer{border-top:1px solid var(--line); padding-top:10px; margin-top:8px; display:flex; flex-direction:column; gap:2px;}
.sidebar-footer .tab{flex-direction:row; justify-content:flex-start; gap:12px; width:100%; padding:10px 12px; color:var(--fog);}
.sidebar-footer .tab .ti svg{width:18px; height:18px;}
.sidebar-footer .tab .tl{font-size:13px; font-weight:600;}

@media (min-width:900px){
  .sidebar{display:flex;}
  nav.tabbar{display:none;}
  #app{max-width:640px; margin:0 auto 0 236px;}
  main{padding-bottom:24px;}
}
@media (min-width:1180px){
  #app{margin:0 auto; margin-left:calc(50% - 320px + 216px);}
}

/* ---------- Account avatar + popovers ---------- */
.account-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--gold); color:#241A08;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none;
}
.account-avatar.sm{width:24px; height:24px; font-size:10.5px;}
#account-btn.icon-btn{padding:2px;}

.theme-popover, .account-popover{
  position:fixed; top:54px; right:14px; width:220px; z-index:60;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 12px 32px rgba(0,0,0,0.35); padding:10px; display:none;
}
.theme-popover.open, .account-popover.open{display:block; animation:popin .14s ease;}
@keyframes popin{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

.theme-popover .tp-title{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--fog-dim); font-weight:600; padding:4px 8px 8px;}
.theme-popover .tp-item{
  display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left;
  padding:9px 8px; border-radius:var(--r-sm); font-size:13.5px; color:var(--paper); cursor:pointer;
}
.theme-popover .tp-item .ti svg{width:17px; height:17px;}
.theme-popover .tp-item:active{background:var(--panel-2);}
.theme-popover .tp-item .tp-check{margin-left:auto; opacity:0; color:var(--gold);}
.theme-popover .tp-item.active{color:var(--gold); font-weight:600;}
.theme-popover .tp-item.active .tp-check{opacity:1;}

.account-popover .ap-head{display:flex; align-items:center; gap:10px; padding:6px 6px 12px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.account-popover .ap-name{font-size:14px; font-weight:600;}
.account-popover .ap-sub{font-size:11.5px; color:var(--fog-dim);}
.account-popover .ap-item{
  display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left;
  padding:9px 8px; border-radius:var(--r-sm); font-size:13.5px; color:var(--paper); cursor:pointer;
}
.account-popover .ap-item svg{width:17px; height:17px; flex:none;}
.account-popover .ap-item:active{background:var(--panel-2);}
.account-popover .ap-item.danger{color:var(--clay);}
.account-popover .ap-div{border:none; border-top:1px solid var(--line); margin:6px 0;}

/* ---------- Custom dialog (replaces alert/confirm/prompt) ---------- */
.dialog-backdrop{position:fixed; inset:0; background:rgba(8,9,13,0.6); z-index:110; display:none;}
.dialog-backdrop.open{display:block;}
.dialog{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); z-index:120;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; width:min(320px, calc(100vw - 48px));
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
  display:none; opacity:0; transition:opacity .16s ease, transform .16s ease;
}
.dialog.open{display:block; opacity:1; transform:translate(-50%,-50%);}
.dialog h3{font-family:var(--font-display); font-size:16.5px; margin:0 0 8px; font-weight:600;}
.dialog p{font-size:13.5px; color:var(--fog); line-height:1.5; margin:0 0 16px;}
.dialog p:empty{display:none;}
.dialog input{width:100%; margin-bottom:16px;}
.dialog .btn-row{margin-top:0; justify-content:flex-end;}

/* ---------- Search: highlight, keyboard focus, cmd-k hint ---------- */
mark{background:none; color:var(--gold); font-weight:700; padding:0;}
.row.focused{background:var(--panel-2); outline:1.5px solid var(--gold); outline-offset:-1.5px;}
.kbd-hint{
  display:none; align-items:center; gap:2px; font-family:var(--font-mono); font-size:10.5px;
  color:var(--fog-dim); background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:2px 6px; margin-left:6px; pointer-events:none;
}
@media (min-width:900px){ .kbd-hint{display:inline-flex;} }

/* ---------- Focus mode: hide nav chrome for a distraction-free session ---------- */
body.focus-active .topbar, body.focus-active nav.tabbar, body.focus-active .sidebar{
  display:none;
}
body.focus-active main{padding-bottom:16px;}
@media (min-width:900px){ body.focus-active #app{margin-left:0;} }