*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* dark canvas + glows */
  --bg:#0C0B09;
  --glow-green:rgba(112,150,82,.50);
  --glow-peach:rgba(206,140,96,.42);
  --glow-gold:rgba(216,180,72,.48);
  --on-dark:#F2EDE4;--on-dark-soft:#C9BFAF;--on-dark-faint:#8E8372;
  --panel-dark:rgba(255,255,255,.05);--panel-dark-border:rgba(255,255,255,.10);
  /* white card internals */
  --sand:#F5F0E8;--sand-dark:#EDE7D9;--sand-border:#D8CFC0;
  --ink:#1B1510;--ink-soft:#6B5E4E;--ink-faint:#A8997F;
  --amber:#C8841A;--amber-light:#F5DBA0;--amber-faint:#FDF3DC;
  --teal:#2D7A6B;--teal-light:#C8EDE5;
  --red:#C04A3A;--red-faint:#FCE8E5;
  --fd:'Playfair Display',Georgia,serif;--fb:'DM Sans',system-ui,sans-serif;--fm:'DM Mono',monospace;
  --r:22px;--rs:12px;--pill:999px;
}
body{font-family:var(--fb);color:var(--on-dark);min-height:100vh;font-size:15px;line-height:1.6;background:var(--bg)}
.app{display:flex;flex-direction:column;min-height:100vh}

/* ── MINIMAL SCROLLBARS ──
   Dark surfaces get a soft white pill thumb; white cards get a sand one. */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.8)}
.note-editor::-webkit-scrollbar-thumb,
.cal-body::-webkit-scrollbar-thumb,
.cal-tasks::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb{background:#E5DECF}
.note-editor::-webkit-scrollbar-thumb:hover,
.cal-body::-webkit-scrollbar-thumb:hover,
.cal-tasks::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover{background:var(--sand-border)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent}
.note-editor,.cal-body,.tasks-wrap,.modal{scrollbar-color:#E5DECF transparent}
/* files sidebar gets its own look: extra-slim warm gold thumb */
.tt-files::-webkit-scrollbar{width:5px}
.tt-files::-webkit-scrollbar-thumb{background:rgba(216,180,72,.55)}
.tt-files::-webkit-scrollbar-thumb:hover{background:rgba(216,180,72,.95)}
.tt-files{scrollbar-color:rgba(216,180,72,.55) transparent}

/* FLOATING CORNER CONTROLS (settings + date, top right) */
.corner-ctrl{position:fixed;top:14px;right:18px;z-index:150;display:flex;align-items:center;gap:10px;padding:6px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:var(--pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.time-chip{font-size:13px;color:var(--on-dark);font-family:var(--fm);font-weight:500;white-space:nowrap}
.corner-sep{color:var(--on-dark-faint);font-size:12px}
.date-chip{font-size:12px;color:var(--on-dark-faint);font-family:var(--fm);white-space:nowrap}

/* FLOATING HOME BUTTON (top left, hidden on the hub) */
.home-fab{position:fixed;top:14px;left:18px;z-index:150;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:50%;color:var(--on-dark-soft);font-size:18px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .18s}
.home-fab:hover{background:#fff;color:var(--ink);box-shadow:0 0 26px rgba(255,255,255,.25)}

/* FILES-SIDEBAR TOGGLE (sits next to the home button, Think Tank only) */
.files-fab{left:68px;font-size:15px}
.files-fab.on{background:#fff;border-color:#fff;box-shadow:0 0 26px rgba(255,255,255,.25)}

/* VIEWS + fade transition */
.view{display:none;flex:1}
.view.active{display:flex;flex-direction:column;animation:viewIn .32s ease both}
.view.view-fade-out{opacity:0;transition:opacity .22s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.view.active:not(#view-home){padding-top:56px}

/* ════════ HOME HUB (Workspace) ════════ */
.hub{position:relative;flex:1;min-height:100vh;width:100%}
.hub-pill{position:absolute;transform:translate(-50%,-50%);background:#fff;border:none;border-radius:52px;width:clamp(280px,26vw,400px);padding:clamp(30px,5.5vh,52px) 0;text-align:center;font-family:var(--fd);font-weight:800;font-size:clamp(18px,1.9vw,26px);letter-spacing:.04em;color:#171310;cursor:pointer;white-space:nowrap;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}
.hub-pill .amp{font-style:italic;font-weight:700;text-transform:none}
.hub-pill:hover{transform:translate(-50%,-50%) scale(1.05)}
.hub-pill.hp-ws{cursor:default}
.hp-tt{left:29%;top:26%;box-shadow:0 0 90px 18px var(--glow-green)}
.hp-cal{left:71%;top:26%;box-shadow:0 0 90px 18px var(--glow-peach)}
.hp-ws{left:50%;top:50%;box-shadow:0 0 110px 24px var(--glow-gold)}
.hp-db{left:50%;top:76%;box-shadow:0 0 90px 18px var(--glow-peach)}
@media(max-width:720px){
  .hub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:4rem 1rem 2.5rem;min-height:100vh}
  .hub-pill{position:static;transform:none;width:min(320px,86vw);padding:26px 0}
  .hub-pill:hover{transform:scale(1.04)}
  .hub-pill.hp-ws{order:-1}
}

/* ════════ WORKSPACE DASHBOARD ════════ */
#view-workspace.view.active{height:100vh;overflow:hidden}
.ws-layout{display:grid;grid-template-columns:58px 240px 1fr;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;height:100vh}
.ws-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background:rgba(12,11,9,.6);border-right:1px solid rgba(255,255,255,.08)}
.ws-rail-btn{width:40px;height:40px;border:1px solid transparent;border-radius:var(--rs);background:none;color:var(--on-dark-soft);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ws-rail-btn:hover{background:rgba(255,255,255,.1);color:var(--on-dark)}
.ws-rail-self{color:var(--amber-light)}
.ws-rail-self:hover{background:rgba(216,180,72,.18)}
.ws-rail-sep{width:24px;height:1px;background:rgba(255,255,255,.14);margin:4px 0}

.ws-sidebar{display:flex;flex-direction:column;min-height:0;background:var(--panel-dark);border-right:1px solid var(--panel-dark-border);padding:16px 12px;gap:12px}
.ws-brand{font-family:var(--fd);font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--on-dark)}
.ws-newchat{padding:9px 14px;background:#fff;color:var(--ink);border:none;border-radius:var(--pill);font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.ws-newchat:hover{transform:scale(1.03)}
.ws-sessions{display:flex;flex-direction:column;gap:3px;overflow-y:auto;min-height:0;flex:1}
.ws-sessions-empty{color:var(--on-dark-faint);font-size:12px;font-style:italic;padding:8px 6px}
.ws-session{display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:var(--rs);cursor:pointer;color:var(--on-dark-soft);transition:background .12s}
.ws-session:hover{background:rgba(255,255,255,.08);color:var(--on-dark)}
.ws-session.active{background:rgba(255,255,255,.13);color:#fff}
.ws-session-title{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-session-del{background:none;border:none;color:var(--on-dark-faint);font-size:16px;cursor:pointer;opacity:0;line-height:1}
.ws-session:hover .ws-session-del{opacity:1}
.ws-session-del:hover{color:var(--red)}

.ws-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.ws-history{flex:1;min-height:0;overflow-y:auto;padding:24px clamp(16px,8%,120px);display:flex;flex-direction:column;gap:14px}
.ws-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--on-dark-faint);gap:10px;height:100%}
.ws-empty-icon{font-size:40px}
.ws-empty p{font-size:14px;max-width:380px;line-height:1.6}
.ws-msg{display:flex}
.ws-msg-user{justify-content:flex-end}
.ws-bubble{max-width:80%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.65;word-wrap:break-word;overflow-wrap:anywhere}
.ws-msg-user .ws-bubble{background:#fff;color:var(--ink);border-bottom-right-radius:5px}
.ws-msg-assistant .ws-bubble{background:var(--panel-dark);border:1px solid var(--panel-dark-border);color:var(--on-dark);border-bottom-left-radius:5px}
.ws-bubble .ws-code{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px;margin:8px 0;overflow-x:auto;font-family:var(--fm);font-size:12.5px;line-height:1.5}
.ws-msg-user .ws-bubble .ws-code{background:var(--sand);border-color:var(--sand-border);color:var(--ink)}
.ws-inline{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 5px;font-family:var(--fm);font-size:.92em}
.ws-msg-user .ws-inline{background:var(--sand-dark)}

.ws-composer{display:flex;align-items:flex-end;gap:8px;padding:14px clamp(16px,8%,120px) 20px;border-top:1px solid rgba(255,255,255,.08)}
.ws-composer textarea{flex:1;resize:none;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(0,0,0,.3);color:var(--on-dark);font-family:var(--fb);font-size:14px;line-height:1.5;padding:11px 16px;outline:none;max-height:160px;overflow-y:auto}
.ws-composer textarea::placeholder{color:var(--on-dark-faint)}
.ws-composer textarea:focus{border-color:var(--amber)}
.ws-send{flex-shrink:0;padding:11px 22px;background:#fff;color:var(--ink);border:none;border-radius:var(--pill);font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.ws-send:hover{transform:scale(1.04)}
.ws-send.ws-stop{background:var(--red);color:#fff}
.ws-composer.ws-offline{justify-content:center}
.ws-offline-note{font-size:13px;color:var(--on-dark-soft);line-height:1.6;text-align:center;padding:6px 0;max-width:520px}
.ws-offline-note code{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 6px;font-family:var(--fm);font-size:.9em}

/* SELF-CUSTOMIZATION WINDOW (reuses .os-window chrome) */
.ws-selfwin{display:flex;flex-direction:column}
.ws-selfwin-banner{flex-shrink:0;padding:9px 14px;background:rgba(216,180,72,.14);border-bottom:1px solid rgba(216,180,72,.3);font-size:11.5px;line-height:1.5;color:var(--on-dark-soft)}
.ws-selfwin-banner code{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 5px;font-family:var(--fm)}
.ws-selfwin-history{padding:16px}
.ws-selfwin-composer{padding:12px 14px 14px}
@media(max-width:760px){.ws-layout{grid-template-columns:48px 1fr}.ws-sidebar{display:none}}

/* ════════ MULTI-WINDOW (drag a hub pill) ════════ */
.pill-drag-ghost{position:fixed;z-index:300;transform:translate(-50%,-50%) scale(.55);opacity:.8;pointer-events:none;box-shadow:0 0 60px 12px var(--glow-gold)}
.pill-dragging-src{opacity:.35}
.pill-drag-hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:299;background:rgba(12,11,9,.85);border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:9px 22px;font-size:12.5px;color:var(--on-dark-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap}

/* split-screen panes (max 4 — Windows-Snap style tiling) */
#split-root{position:fixed;inset:0;z-index:90;background:var(--bg)}
.split-pane{position:absolute;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:var(--bg);transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.split-pane.flash{animation:paneFlash .7s ease}
@keyframes paneFlash{0%,100%{box-shadow:none}40%{box-shadow:inset 0 0 0 3px var(--amber)}}
.os-win-titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 7px 5px 14px;user-select:none;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;background:rgba(18,16,13,.92)}
.os-win-title{font-family:var(--fd);font-weight:800;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-win-btns{display:flex;align-items:center;gap:2px;flex-shrink:0}
.os-win-btn{width:28px;height:24px;border:none;border-radius:6px;background:none;color:var(--on-dark-faint);font-size:12px;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;justify-content:center}
.os-win-btn:hover{background:rgba(255,255,255,.12);color:var(--on-dark)}
.os-win-close:hover{background:var(--red);color:#fff}
.split-pane iframe{flex:1;min-height:0;width:100%;border:none;background:var(--bg)}
/* in split mode the top-level app hides — every pane carries its own chrome */
body.split-mode .app,
body.split-mode .corner-ctrl,
body.split-mode .home-fab,
body.split-mode .files-fab{display:none!important}

/* Shared view scaffolding on the dark canvas */
.view-title{font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark);padding:1.4rem 2rem .2rem}

/* ════════ THINK TANK — file panel + editor ════════ */
#view-research.view.active{flex:0 0 100vh;height:100vh;min-height:0;overflow:hidden}
.tt-layout{display:grid;grid-template-columns:300px 1fr;grid-template-rows:minmax(0,1fr);gap:18px;flex:1;min-height:0;padding:0 20px 20px;align-items:stretch}
.tt-layout.files-hidden{grid-template-columns:1fr}
.tt-layout.files-hidden .tt-files{display:none}
@media(max-width:820px){
  #view-research.view.active{flex:1;height:auto;overflow:visible}
  .tt-layout{grid-template-columns:1fr;grid-template-rows:none;height:auto;padding-bottom:20px}
  .tt-files{max-height:45vh;height:auto}
  .note-editor{min-height:300px}
}

/* FILE PANEL */
.tt-files{background:var(--panel-dark);border:1px solid var(--panel-dark-border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow-y:auto}
.tt-files-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-files-title{font-family:var(--fd);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.add-tb-top{padding:7px 14px;background:#fff;color:var(--ink);border:none;border-radius:var(--pill);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--fd);letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;transition:all .18s;box-shadow:0 0 24px rgba(216,180,72,.3)}
.add-tb-top:hover{transform:scale(1.05)}

/* FILE TREE */
.file-tree{display:flex;flex-direction:column;gap:2px}
.ft-empty{padding:14px 6px;color:var(--on-dark-faint);font-size:12px;font-style:italic;line-height:1.6}
.ft-topic{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:var(--rs);cursor:pointer;transition:background .12s;color:var(--on-dark);user-select:none}
.ft-topic:hover{background:rgba(255,255,255,.08)}
.ft-topic.current .ft-name{color:#fff;font-weight:600}
.ft-caret{font-size:11px;color:var(--on-dark-faint);width:12px;flex-shrink:0}
.ft-icon{font-size:13px;flex-shrink:0}
.ft-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-actions{display:none;align-items:center;gap:2px;flex-shrink:0}
.ft-topic:hover .ft-actions,.ft-page:hover .ft-actions{display:inline-flex}
.ft-act{background:none;border:none;color:var(--on-dark-faint);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:4px}
.ft-act:hover{color:var(--on-dark);background:rgba(255,255,255,.1)}
.ft-act-del:hover{color:var(--red)}
.ft-children{display:flex;flex-direction:column;gap:1px;margin-left:18px;border-left:1px solid rgba(255,255,255,.1);padding-left:8px}
.ft-notebook{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--rs);cursor:grab;transition:background .12s;color:var(--on-dark);user-select:none}
.ft-notebook:hover{background:rgba(255,255,255,.08)}
.ft-notebook.current .ft-name{color:#fff;font-weight:600}
.ft-notebook.dragging{opacity:.35}
.ft-notebook:hover .ft-actions{display:inline-flex}
.ft-topic.drop-hover{outline:2px dashed rgba(216,180,72,.85);outline-offset:-2px;background:rgba(216,180,72,.15)}
.ft-page{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--rs);cursor:pointer;transition:all .12s;color:var(--on-dark-soft)}
.ft-page:hover{background:rgba(255,255,255,.08);color:var(--on-dark)}
.ft-page.active{background:#fff;color:var(--ink)}
.ft-page.active .ft-name{font-weight:600}
.ft-page.active .ft-act{color:var(--ink-faint)}
.ft-page.active .ft-act:hover{color:var(--ink);background:rgba(0,0,0,.06)}
.ft-add-page{display:flex;align-items:center;gap:6px;padding:5px 10px;margin-top:2px;background:none;border:1px dashed rgba(255,255,255,.2);border-radius:var(--rs);color:var(--on-dark-faint);font-size:11px;font-family:var(--fb);cursor:pointer;transition:all .15s}
.ft-add-page:hover{color:var(--on-dark);border-color:rgba(255,255,255,.4)}
.empty-state{padding:2rem 1rem;text-align:center;color:var(--on-dark-faint);font-size:13px;font-style:italic;line-height:1.6}

/* ADD-TOPIC FORM (name only) */
.ntf{padding:12px;background:rgba(0,0,0,.25);border:1px solid var(--panel-dark-border);border-radius:var(--rs);display:none}
.ntf.open{display:block}
.nti{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:var(--rs);padding:8px 12px;font-size:13px;font-family:var(--fb);color:var(--on-dark);background:rgba(0,0,0,.3);outline:none;margin-bottom:10px}
.nti::placeholder{color:var(--on-dark-faint)}
.nti:focus{border-color:var(--amber)}
.nform-actions{display:flex;gap:8px}
.nform-add{flex:1;padding:8px;background:#fff;color:var(--ink);border:none;border-radius:var(--pill);font-size:12px;font-family:var(--fd);cursor:pointer;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.nform-cancel{padding:8px 14px;background:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--pill);font-size:12px;font-family:var(--fb);cursor:pointer;color:var(--on-dark-soft)}
.nm{display:flex;flex-direction:column;min-width:0;height:100%;min-height:0}
.ntb{padding:4px 0 12px;border-bottom:none;background:transparent;display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}
.nt{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark);flex:1}
.nt.placeholder{color:var(--on-dark-faint);font-weight:700}
.nc{flex:1;min-height:0;display:flex;flex-direction:column}
.note-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--on-dark-faint);gap:12px;padding:3rem}
.note-empty .big{font-size:40px}
.note-empty p{font-size:14px;line-height:1.6;max-width:300px}
.note-area{background:#fff;border:none;border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;box-shadow:0 0 70px 8px rgba(216,180,72,.18);color:var(--ink);flex:1;min-height:0;overflow:hidden}

/* RICH TEXT EDITOR */
.note-editor{width:100%;border:none;outline:none;font-family:var(--fb);font-size:14px;line-height:1.9;color:var(--ink);background:none;flex:1;min-height:0;overflow-y:auto;word-wrap:break-word}
.note-editor:empty::before{content:attr(data-placeholder);color:var(--ink-faint);pointer-events:none}
.note-editor h1{font-size:26px;line-height:1.4;margin:14px 0 6px}
.note-editor h2{font-size:21px;line-height:1.4;margin:12px 0 5px}
.note-editor h3{font-size:17px;line-height:1.4;margin:10px 0 4px}
.note-editor a{color:var(--teal)}
.note-editor blockquote{border-left:3px solid var(--sand-border);margin:8px 0;padding:2px 14px;color:var(--ink-soft)}
.note-editor table{border-collapse:collapse;margin:12px 0;max-width:100%}
.note-editor td,.note-editor th{border:1px solid var(--sand-border);padding:6px 12px;min-width:48px;vertical-align:top}
.note-editor ul.checklist{list-style:none;padding-left:6px}
.note-editor ul.checklist li{position:relative;padding-left:26px;cursor:default}
.note-editor ul.checklist li::before{content:'☐';position:absolute;left:0;cursor:pointer;font-size:16px;color:var(--ink-soft)}
.note-editor ul.checklist li.checked::before{content:'☑';color:var(--teal)}
.note-editor ul.checklist li.checked{text-decoration:line-through;color:var(--ink-faint)}
.note-editor img{max-width:100%;height:auto;border-radius:6px;cursor:pointer}
.note-editor img.img-selected{outline:2px solid var(--teal);outline-offset:2px}
.pdf-export{display:block!important}

/* FLOATING IMAGE TOOLBAR */
.img-toolbar{position:fixed;z-index:170;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--sand-border);border-radius:var(--pill);box-shadow:0 6px 24px rgba(0,0,0,.18);padding:4px 8px}
.img-del-btn{color:var(--red)}
.img-del-btn:hover{background:var(--red-faint)}

/* FORMATTING TOOLBAR */
.fmt-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:6px 0 10px;margin-bottom:10px;border-bottom:1px solid var(--sand-border);flex-shrink:0}
.fmt-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border:none;border-radius:6px;background:none;font-size:13px;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:background .12s;white-space:nowrap}
.fmt-btn:hover{background:var(--sand)}
.fmt-sep{width:1px;height:20px;background:var(--sand-border);margin:0 5px;flex-shrink:0}
.fmt-select{height:28px;border:1px solid var(--sand-border);border-radius:6px;background:#fff;font-size:12px;font-family:var(--fb);color:var(--ink-soft);padding:0 6px;cursor:pointer;outline:none;max-width:130px}
.fmt-select:hover{border-color:var(--amber)}
.fmt-size-label{font-size:12px;font-family:var(--fm);color:var(--ink);min-width:20px;text-align:center}
.fmt-color{position:relative;overflow:hidden}
.fmt-color input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}
.fmt-dd{position:relative}
.fmt-menu{position:absolute;top:32px;left:0;z-index:50;background:#fff;border:1px solid var(--sand-border);border-radius:var(--rs);box-shadow:0 6px 24px rgba(0,0,0,.15);padding:10px;min-width:190px;display:flex;flex-direction:column;gap:4px}
.fmt-menu-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:center;margin-bottom:4px}
.fmt-menu-grid label{font-size:11px;color:var(--ink-soft)}
.fmt-menu-grid input{width:100%;border:1px solid var(--sand-border);border-radius:6px;padding:4px 8px;font-size:12px;font-family:var(--fm);outline:none}
.fmt-menu-btn{border:none;border-radius:6px;background:none;text-align:left;font-size:12px;font-family:var(--fb);color:var(--ink-soft);padding:6px 8px;cursor:pointer}
.fmt-menu-btn:hover{background:var(--sand)}
.fmt-menu-btn.primary{background:var(--ink);color:#fff;text-align:center;font-weight:600}
.fmt-menu-btn.danger{color:var(--red)}
.fmt-menu-hr{height:1px;background:var(--sand-border);margin:4px 0}
.note-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--sand-border);flex-wrap:wrap;flex-shrink:0}

/* PAGE TABS (pages live as tabs above the paper) */
.page-tabs-row{display:flex;align-items:center;border-bottom:1px solid var(--sand-border);margin-bottom:10px;overflow-x:auto;flex-shrink:0}
.page-tab{user-select:none}
.page-tab.dragging{opacity:.4}
.page-tab.drop-before{box-shadow:inset 3px 0 0 var(--amber)}
.page-tab.drop-after{box-shadow:inset -3px 0 0 var(--amber)}
.page-tabs{display:flex;gap:2px;flex-wrap:nowrap;align-items:center}
.page-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--sand-border);border-bottom:none;border-radius:var(--rs) var(--rs) 0 0;background:var(--sand);font-size:12px;font-family:var(--fb);color:var(--ink-soft);cursor:pointer;transition:all .12s;position:relative;top:1px;white-space:nowrap}
.page-tab:hover{color:var(--ink);background:#fff}
.page-tab.active{background:#fff;color:var(--ink);border-bottom-color:#fff;font-weight:500}
.pt-tag{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:600;text-transform:uppercase}
.pt-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.pt-del{opacity:0;color:var(--ink-faint);font-size:14px;line-height:1;padding:0 2px;transition:opacity .12s}
.page-tab:hover .pt-del{opacity:1}
.pt-del:hover{color:var(--red)}
.page-tab-add{background:none;border:1px dashed var(--sand-border);border-bottom:none;border-radius:var(--rs) var(--rs) 0 0;padding:6px 10px;font-size:12px;font-family:var(--fb);color:var(--ink-faint);cursor:pointer;margin-left:4px;transition:all .12s}
.page-tab-add:hover{color:var(--amber);border-color:var(--amber)}

/* PAGE TAG PICKER (in toolbar) */
.page-tag-picker{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.page-tag-btn{padding:3px 9px;border-radius:14px;border:1px solid var(--sand-border);background:none;font-size:11px;cursor:pointer;font-family:var(--fb);color:var(--ink-soft);transition:all .12s;white-space:nowrap}
.page-tag-btn:hover{border-color:var(--amber);color:var(--amber)}
.page-tag-btn.sel{background:var(--ink);border-color:var(--ink);color:#fff}

/* ATTACHMENTS (image strip) */
.attachments-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--sand-border);min-height:0;flex-shrink:0;max-height:130px;overflow-y:auto}
.attachments-strip:not(.has-items){display:none}
.attachment-thumb{position:relative;width:96px;height:96px;border:1px solid var(--sand-border);border-radius:var(--rs);overflow:hidden;background:var(--sand)}
.attachment-thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.att-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(27,21,16,.7);color:#fff;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center}
.attachment-thumb:hover .att-del{opacity:1}
.att-del:hover{background:var(--red)}

/* IMAGE VIEWER MODAL */
.image-viewer-modal{position:relative;max-width:90vw;max-height:90vh;background:transparent;display:flex;align-items:center;justify-content:center}
.image-viewer-modal img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--rs);box-shadow:0 8px 40px rgba(0,0,0,.6)}
.image-viewer-close{position:absolute;top:-10px;right:-10px;width:36px;height:36px;border:none;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.4)}

/* CONNECT PROMPTS (calendar + tasks) */
.connect-prompt{margin:14px 20px 0;padding:14px 18px;background:var(--panel-dark);border:1px solid var(--panel-dark-border);border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.connect-prompt-text{font-size:13px;color:var(--on-dark-soft);line-height:1.5}
.connect-prompt-text strong{color:var(--on-dark)}
.connect-prompt button{background:#fff;color:var(--ink);border:none;border-radius:var(--pill);padding:8px 16px;font-size:12px;font-family:var(--fd);cursor:pointer;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.connect-prompt button:hover{transform:scale(1.04)}
.note-toolbar-left{font-size:12px;color:var(--ink-faint)}
.note-save{padding:5px 16px;background:var(--ink);color:#fff;border:none;border-radius:var(--pill);font-size:12px;font-family:var(--fb);font-weight:600;cursor:pointer}
.note-save:hover{opacity:.8}
.mic-btn{display:flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--pill);border:1px solid var(--sand-border);background:none;font-size:12px;font-weight:500;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:all .15s}
.mic-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}
.mic-btn.recording{background:var(--red-faint);border-color:var(--red);color:var(--red);animation:pulse 1.2s infinite}
.mic-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ════════ CALENDAR & TASKS — tabbed sections on the dark canvas ════════ */
#view-tasks.view.active{flex:0 0 100vh;height:100vh;min-height:0;overflow:hidden}
.ct-section{display:none;flex:1;min-height:0}
.ct-section.active{display:flex;flex-direction:column}
.tasks-wrap{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:760px;margin:0 auto;padding:1.5rem 2rem 2.5rem}
.tp{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 0 60px 4px rgba(206,140,96,.18);color:var(--ink)}

/* CALENDAR — white rounded card floating on dark */
.cal-layout{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:#fff;margin:16px 20px 20px;border-radius:var(--r);box-shadow:0 0 80px 10px rgba(206,140,96,.20);color:var(--ink)}
.cal-toolbar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--sand-border);flex-wrap:wrap;flex-shrink:0}
.cal-nav{background:none;border:1px solid var(--sand-border);border-radius:50%;width:30px;height:30px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:all .15s}
.cal-nav:hover{border-color:var(--amber);color:var(--amber)}
.cal-range-title{font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:.03em;color:var(--ink);min-width:160px}
.cal-view-btns{display:flex;border:1px solid var(--sand-border);border-radius:var(--pill);overflow:hidden;margin-left:auto}
.cal-view-btn{background:none;border:none;border-right:1px solid var(--sand-border);padding:6px 14px;font-size:12px;font-weight:500;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:all .15s}
.cal-view-btn:last-child{border-right:none}
.cal-view-btn.active{background:var(--ink);color:#fff}
.cal-today-btn{padding:6px 14px;border:1px solid var(--sand-border);border-radius:var(--pill);background:none;font-size:12px;font-family:var(--fb);color:var(--ink-soft);cursor:pointer}
.cal-today-btn:hover{border-color:var(--amber);color:var(--amber)}
.cal-add-btn{background:var(--ink);color:#fff;border:none;border-radius:var(--pill);padding:6px 16px;font-size:12px;font-family:var(--fb);cursor:pointer;font-weight:600}
.cal-add-btn:hover{opacity:.85}
.cal-body{flex:1;min-height:0;overflow-y:auto}
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--sand-border);border-top:1px solid var(--sand-border)}
.cal-dow-header{text-align:center;font-size:11px;font-weight:600;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;padding:8px 0;background:var(--sand);border-right:1px solid var(--sand-border);border-bottom:1px solid var(--sand-border)}
.cal-cell{min-height:90px;padding:4px;border-right:1px solid var(--sand-border);border-bottom:1px solid var(--sand-border);cursor:pointer;transition:background .1s}
.cal-cell:hover{background:var(--amber-faint)}
.cal-cell.today{background:#FFFBF0}
.cal-cell.other-month{background:#fafaf8;opacity:.6}
.cal-cell-num{font-size:13px;font-weight:600;color:var(--ink);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:2px}
.cal-cell.today .cal-cell-num{background:var(--ink);color:#fff}
.cal-pill{font-size:11px;padding:2px 6px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.cal-pill.c5{background:#FFF3CD;color:#856404}
.cal-pill.c10{background:#D4EDDA;color:#155724}
.cal-pill.c2{background:#D1ECF1;color:#0c5460}
.cal-pill.c8{background:#E2E3E5;color:#383d41}
.cal-pill.c11{background:#F8D7DA;color:#721c24}
.cal-more{font-size:10px;color:var(--ink-faint);padding-left:4px}
.cal-week-grid{display:grid;grid-template-columns:48px repeat(7,1fr);border-left:1px solid var(--sand-border)}
.cal-week-header-cell{text-align:center;padding:8px 4px;border-right:1px solid var(--sand-border);border-bottom:1px solid var(--sand-border);background:var(--sand)}
.cal-week-header-cell .wh-day{font-size:11px;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em}
.cal-week-header-cell .wh-num{font-size:20px;font-weight:600;color:var(--ink);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:2px auto 0;cursor:pointer}
.cal-week-header-cell.today .wh-num{background:var(--ink);color:#fff}
.cal-hour-label{height:48px;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 6px 0 0;font-size:10px;color:var(--ink-faint);font-family:var(--fm);border-bottom:1px solid var(--sand-border);border-right:1px solid var(--sand-border)}
.cal-week-day-col{border-right:1px solid var(--sand-border);position:relative}
.cal-hour-slot{height:48px;border-bottom:1px solid var(--sand-border)}
.cal-week-event{position:relative;margin:1px 2px;border-radius:4px;padding:2px 4px;font-size:11px;font-weight:500;overflow:hidden}
.cal-week-event.c5{background:#FFF3CD;color:#856404;border-left:3px solid #C8841A}
.cal-week-event.c10{background:#D4EDDA;color:#155724;border-left:3px solid #2D7A6B}
.cal-week-event.c2{background:#D1ECF1;color:#0c5460;border-left:3px solid #17a2b8}
.cal-week-event.c8{background:#E2E3E5;color:#383d41;border-left:3px solid #6c757d}
.cal-week-event.c11{background:#F8D7DA;color:#721c24;border-left:3px solid #C04A3A}
.cal-day-view{display:grid;grid-template-columns:48px 1fr;border-left:1px solid var(--sand-border)}
.cal-day-header{grid-column:1/3;padding:12px 16px;border-bottom:1px solid var(--sand-border);background:var(--sand);font-family:var(--fd);font-size:18px;font-weight:700}
.cal-day-event{margin:2px 4px;padding:8px 28px 8px 10px;border-radius:var(--rs);border-left:3px solid var(--sand-border);background:var(--sand);position:relative}
.ev-del{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s}
.cal-day-event:hover .ev-del{opacity:1}
.ev-del:hover{color:var(--red)}
.cal-day-event.c5{background:#FFF3CD;border-left-color:#C8841A}
.cal-day-event.c10{background:#D4EDDA;border-left-color:#2D7A6B}
.cal-day-event.c2{background:#D1ECF1;border-left-color:#17a2b8}
.cal-day-event.c8{background:#E2E3E5;border-left-color:#6c757d}
.cal-day-event.c11{background:#F8D7DA;border-left-color:#C04A3A}
.cal-day-event-time{font-size:11px;color:var(--ink-faint);font-family:var(--fm);margin-bottom:2px}
.cal-day-event-name{font-size:13px;font-weight:500;color:var(--ink)}
.cal-loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--ink-faint);font-style:italic;font-size:14px;gap:8px}
.cal-spinner{width:16px;height:16px;border:2px solid var(--sand-border);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tts{display:flex;border-bottom:1px solid var(--sand-border);background:var(--sand)}
.tt{flex:1;padding:12px;background:none;border:none;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);cursor:pointer;font-family:var(--fd);transition:all .15s;border-bottom:2px solid transparent}
.tt.active{color:var(--ink);background:#fff;border-bottom-color:var(--ink)}
.ts{display:none}
.ts.active{display:block}
.tdiv{font-size:11px;font-weight:500;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;padding:12px 12px 6px}
.titem{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--rs);transition:background .12s;cursor:pointer}
.titem:hover{background:var(--sand)}
.titem.done .tck{background:var(--teal);border-color:var(--teal)}
.tck{width:18px;height:18px;border:1.5px solid var(--sand-border);border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ck{display:none;width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2}
.titem.done .ck{display:block}
.tb2{flex:1}
.tn{font-size:14px;color:var(--ink)}
.titem.done .tn{text-decoration:line-through;color:var(--ink-faint)}
.ttag{font-size:11px;color:var(--ink-faint);margin-top:2px}
.pr{width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0}
.ph{background:var(--red)}.pm{background:var(--amber)}.pl{background:var(--teal)}
.ar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--sand-border);flex-wrap:wrap}
.ai2{flex:1;min-width:120px;border:1px solid var(--sand-border);border-radius:var(--pill);padding:8px 14px;font-size:13px;font-family:var(--fb);color:var(--ink);background:var(--sand);outline:none}
.ai2:focus{border-color:var(--amber);background:#fff}
.ai2::placeholder{color:var(--ink-faint)}
.ad{border:1px solid var(--sand-border);border-radius:var(--pill);padding:8px 12px;font-size:13px;font-family:var(--fb);color:var(--ink-soft);background:var(--sand);outline:none;cursor:pointer}
.ad:focus{border-color:var(--amber)}
.ab{background:var(--ink);color:#fff;border:none;border-radius:var(--pill);padding:8px 16px;font-size:13px;font-family:var(--fb);cursor:pointer;font-weight:600}
.ab:hover{opacity:.8}
@media(max-width:768px){.cal-layout{margin:12px}.tasks-wrap{padding:1rem}}

/* ICS FEED LIST (Google Calendars modal) */
.ics-feed-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--sand-border);border-radius:var(--rs);margin-bottom:6px;background:var(--sand)}
.ics-url{flex:1;font-size:12px;font-family:var(--fm);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ics-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ics-dot.ic10{background:#2D7A6B}
.ics-dot.ic2{background:#17a2b8}
.ics-dot.ic8{background:#6c757d}
.ics-dot.ic11{background:#C04A3A}
.ics-dot.ic5{background:#C8841A}

/* ════════ WELLBEING ════════ */
.wb-outer{display:flex;flex-direction:column;flex:1;overflow:hidden}
.wb-tabs{display:flex;gap:8px;background:transparent;border-bottom:none;flex-shrink:0;padding:16px 20px 0;justify-content:center}
.wb-tab{padding:9px 26px;background:var(--panel-dark);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-faint);cursor:pointer;font-family:var(--fd);transition:all .18s}
.wb-tab:hover{color:var(--on-dark)}
.wb-tab.active{color:var(--ink);background:#fff;border-color:#fff;box-shadow:0 0 26px rgba(112,150,82,.4)}
.wb-section{display:none;flex:1;overflow-y:auto;min-height:0}
.wb-section.active{display:flex;flex-direction:column}

/* SUB-TABS (Check-in / Statistics inside Well-being) */
.wb-subtabs{display:flex;gap:6px;justify-content:center;padding:14px 20px 0;flex-shrink:0}
.wb-subtab{padding:6px 18px;background:none;border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-faint);cursor:pointer;font-family:var(--fd);transition:all .18s}
.wb-subtab:hover{color:var(--on-dark)}
.wb-subtab.active{color:var(--ink);background:#fff;border-color:#fff}

/* ROUTINES */
#routine-list{display:flex;flex-direction:column;gap:1.5rem}
.rt-freq-row{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.rt-freq{padding:6px 18px;border-radius:var(--pill);border:1px solid var(--sand-border);background:none;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:all .15s}
.rt-freq.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.rt-days{display:flex;gap:4px;flex-wrap:wrap;margin-left:8px}
.rt-day{padding:5px 10px;border-radius:var(--pill);border:1px solid var(--sand-border);background:none;font-size:11px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:all .15s}
.rt-day.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.rt-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;margin-top:-6px}
.rt-list-title{font-family:var(--fd);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark)}
.rt-stats-select-row{margin:4px 0 2px}
#rt-stats-select{width:100%;border:1px solid var(--sand-border);border-radius:var(--rs);padding:8px 12px;font-size:13px;font-family:var(--fb);color:var(--ink);background:var(--sand);outline:none;cursor:pointer}
#rt-stats-select:focus{border-color:var(--teal);background:#fff}
.rt-head-actions{display:flex;align-items:center;gap:6px}
.rt-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:var(--pill);background:var(--amber-faint);color:var(--amber)}
.rt-due{font-size:12px;color:var(--teal);font-weight:600;margin:-10px 0 12px}
.routine-card.rt-rest .rt-due{color:var(--ink-faint);font-weight:400;font-style:italic}
.routine-card.rt-rest .hl{opacity:.55}
.routine-card .ft-act:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.routine-card .ft-act-del:hover{color:var(--red)}
.wl{display:flex;flex-direction:column;max-width:760px;margin:0 auto;padding:1.5rem 2rem 2.5rem;width:100%;gap:1.5rem}
.wc{background:#fff;border:none;border-radius:var(--r);padding:1.5rem;color:var(--ink);box-shadow:0 0 60px 4px rgba(112,150,82,.16)}
.wh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:8px}
.wt{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.wd{font-size:12px;color:var(--ink-faint);font-family:var(--fm)}

/* DATE NAV */
.date-nav{display:flex;align-items:center;gap:8px}
.date-nav-btn{background:none;border:1px solid var(--sand-border);border-radius:50%;width:26px;height:26px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.date-nav-btn:hover{border-color:var(--amber);color:var(--amber)}
.date-nav-label{font-size:12px;color:var(--ink-soft);font-family:var(--fm);min-width:80px;text-align:center}

/* TRACKER DATE PICKER */
.wb-date-picker{border:1px solid var(--sand-border);border-radius:var(--rs);padding:4px 8px;font-size:12px;font-family:var(--fm);color:var(--ink-soft);background:var(--sand);outline:none;cursor:pointer}
.wb-date-picker:hover{border-color:var(--amber)}
.wb-date-picker:focus{border-color:var(--amber);background:#fff}

/* STATS PERIOD NAV */
.period-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 10px}
.period-label{font-size:12px;color:var(--ink-soft);font-family:var(--fm);min-width:160px;text-align:center}

/* LOGGED ROW (clear button next to "logged" indicator) */
.logged-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.logged-row .mood-logged,.logged-row .sleep-logged{margin-top:0}

/* CHECK-IN FLOW */
.checkin-start-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:2.5rem 2rem}
.checkin-start-hint{font-size:13px;color:var(--ink-soft);line-height:1.6;max-width:380px}
.checkin-date-input{font-size:15px;padding:10px 16px}
.checkin-start-btn{padding:10px 28px;font-size:14px}
.checkin-flow-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.checkin-back{background:var(--panel-dark);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:7px 16px;font-size:12px;font-weight:600;color:var(--on-dark-soft);cursor:pointer;font-family:var(--fb);transition:all .18s}
.checkin-back:hover{color:var(--ink);background:#fff;border-color:#fff}
.checkin-date-label{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark)}

/* HEALTH ACTIVITY */
.health-grid{display:flex;gap:8px;flex-wrap:wrap}
.hb{flex:1;min-width:120px;padding:14px 10px;border:2px solid var(--sand-border);border-radius:var(--rs);background:none;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s;font-family:var(--fb)}
.hb:hover{border-color:var(--teal);background:var(--teal-light)}
.hb.sel{border-color:var(--teal);background:var(--teal);color:#fff}

/* MOOD */
.mood-grid{display:flex;gap:8px;flex-wrap:wrap}
.mb{flex:1;min-width:60px;padding:12px 6px;border:2px solid var(--sand-border);border-radius:var(--rs);background:none;font-size:22px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:4px}
.mb span{font-size:11px;color:var(--ink-faint);font-family:var(--fb)}
.mb:hover{border-color:var(--amber);background:var(--amber-faint)}
.mb.sel{border-color:var(--amber);background:var(--amber-faint)}
.mb.sel span{color:var(--amber)}
.mood-logged{font-size:12px;color:var(--teal);margin-top:10px;font-style:italic;display:none}
.mood-logged.show{display:block}

/* SLEEP */
.slr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px}
.sg label{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase}
.sg input{border:1px solid var(--sand-border);border-radius:var(--rs);padding:8px 12px;font-size:15px;font-family:var(--fm);color:var(--ink);background:var(--sand);outline:none}
.sg input:focus{border-color:var(--teal);background:#fff}
.ss{display:flex;flex-direction:column;align-items:center;gap:2px}
.sn{font-size:36px;font-family:var(--fd);font-weight:800;color:var(--teal);line-height:1}
.sl2{font-size:11px;color:var(--ink-faint)}
.st{font-size:12px;color:var(--ink-faint);margin-top:12px;padding-top:12px;border-top:1px solid var(--sand-border)}
.st strong{color:var(--teal)}
.sleep-save-btn{margin-top:12px;padding:8px 22px;background:var(--teal);color:#fff;border:none;border-radius:var(--pill);font-size:13px;font-family:var(--fb);cursor:pointer;font-weight:600}
.sleep-save-btn:hover{opacity:.85}
.sleep-logged{font-size:12px;color:var(--teal);margin-top:8px;font-style:italic;display:none}
.sleep-logged.show{display:block}

/* JOURNAL */
.jp{font-size:13px;color:var(--ink-soft);font-style:italic;margin-bottom:12px;padding:10px 14px;background:var(--amber-faint);border-radius:var(--rs);border-left:3px solid var(--amber);line-height:1.6}
.ja{width:100%;border:1px solid var(--sand-border);border-radius:var(--rs);padding:12px;font-size:14px;font-family:var(--fb);color:var(--ink);background:var(--sand);outline:none;resize:none;min-height:120px;line-height:1.7}
.ja:focus{border-color:var(--amber);background:#fff}
.jf{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.jh{font-size:11px;color:var(--ink-faint)}
.js2{padding:8px 20px;background:var(--ink);color:#fff;border:none;border-radius:var(--pill);font-size:13px;font-family:var(--fb);cursor:pointer;font-weight:600}

/* STATISTICS */
.stats-period-btns{display:flex;border:1px solid var(--sand-border);border-radius:var(--pill);overflow:hidden}
.spb{background:none;border:none;border-right:1px solid var(--sand-border);padding:5px 12px;font-size:12px;font-weight:500;color:var(--ink-soft);cursor:pointer;font-family:var(--fb);transition:all .15s}
.spb:last-child{border-right:none}
.spb.active{background:var(--ink);color:#fff}
.chart-wrap{position:relative;margin:8px 0 4px}
.chart-note{font-size:12px;color:var(--ink-faint);font-style:italic;margin-top:4px}
.weekly-summary{display:flex;gap:16px;justify-content:space-around;padding:8px 0;flex-wrap:wrap}
.wstat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:80px}
.wstat-val{font-size:28px;font-family:var(--fd);font-weight:800;color:var(--teal)}
.wstat-label{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase;text-align:center}

/* ════════ DATABASE ════════ */
#view-database.view.active{height:100vh;overflow:hidden}
.db-outer{display:flex;flex-direction:column;flex:1;overflow-y:auto}

/* ── FILE EXPLORER ── */
.fx-unsupported{flex:1;min-height:0}
.fx-layout{display:grid;grid-template-columns:260px 1fr;grid-template-rows:minmax(0,1fr);gap:16px;flex:1;min-height:0;padding:14px 20px 20px}
.fx-sidebar{background:var(--panel-dark);border:1px solid var(--panel-dark-border);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow-y:auto}
.fx-sidebar::-webkit-scrollbar{width:5px}
.fx-sidebar::-webkit-scrollbar-thumb{background:rgba(216,180,72,.55)}
.fx-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(216,180,72,.95)}
.fx-sidebar{scrollbar-color:rgba(216,180,72,.55) transparent}
.fx-roots{display:flex;flex-direction:column;gap:2px}
.fx-tree-node{padding:7px 8px}

.fx-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border-radius:var(--r);box-shadow:0 0 60px 6px rgba(206,140,96,.18);color:var(--ink);overflow:hidden}

/* command bar (Windows 11 style, row 1) */
.fx-cmdbar{display:flex;align-items:center;gap:2px;padding:8px 12px;border-bottom:1px solid var(--sand-border);flex-wrap:wrap;flex-shrink:0}
.fx-cmd{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:none;border-radius:var(--rs);background:none;font-size:12.5px;font-family:var(--fb);color:var(--ink-soft);cursor:pointer;transition:background .12s;white-space:nowrap}
.fx-cmd:hover:not(:disabled){background:var(--sand)}
.fx-cmd:disabled{opacity:.35;cursor:default}
.fx-cmd-sep{width:1px;height:20px;background:var(--sand-border);margin:0 6px;flex-shrink:0}
.fx-dd-menu{top:34px;left:0;min-width:170px}

.fx-toolbar{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--sand-border);flex-wrap:wrap;flex-shrink:0}
.fx-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border:1px solid var(--sand-border);border-radius:var(--rs);background:none;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:all .15s;white-space:nowrap}
.fx-nav-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.fx-nav-btn:disabled{opacity:.35;cursor:default}
.fx-breadcrumbs{display:flex;align-items:center;gap:2px;flex:1;min-width:140px;overflow-x:auto;scrollbar-width:none;padding:2px}
.fx-breadcrumbs::-webkit-scrollbar{display:none}
.fx-crumb{border:none;background:none;padding:5px 9px;border-radius:var(--rs);font-size:13px;font-family:var(--fb);color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:background .12s}
.fx-crumb:hover{background:var(--sand)}
.fx-crumb.current{color:var(--ink);font-weight:600;cursor:default}
.fx-crumb-sep{color:var(--ink-faint);font-size:12px}
.fx-search{width:200px;border:1px solid var(--sand-border);border-radius:var(--pill);padding:6px 14px;font-size:12px;font-family:var(--fb);color:var(--ink);background:var(--sand);outline:none}
.fx-search:focus{border-color:var(--amber);background:#fff}

.fx-body{flex:1;min-height:0;overflow:auto;position:relative}
.fx-main.fx-droppable .fx-body{outline:2px dashed var(--amber);outline-offset:-6px;background:var(--amber-faint)}
.fx-empty-folder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-faint);font-style:italic;font-size:13px}
.fx-table{width:100%;border-collapse:collapse;font-size:13px}
.fx-table th{position:sticky;top:0;background:var(--sand);text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding:8px 14px;border-bottom:1px solid var(--sand-border);cursor:pointer;user-select:none;white-space:nowrap;z-index:1}
.fx-table th:hover{color:var(--ink)}
.fx-table td{padding:7px 14px;border-bottom:1px solid #F2EDE3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.fx-table tbody tr{cursor:default;transition:background .1s}
.fx-table tbody tr:hover{background:var(--sand)}
.fx-table tbody tr.sel{background:var(--amber-faint)}
.fx-name-cell{display:flex;align-items:center;gap:9px}
.fx-icon{font-size:15px;flex-shrink:0}
.fx-fname{overflow:hidden;text-overflow:ellipsis}
.fx-dim{color:var(--ink-faint);font-size:12px}

.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;padding:14px}
.fx-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 10px;border-radius:var(--rs);cursor:default;transition:background .1s;text-align:center}
.fx-tile:hover{background:var(--sand)}
.fx-tile.sel{background:var(--amber-faint)}
.fx-tile-icon{font-size:34px;line-height:1}
.fx-tile-name{font-size:11.5px;line-height:1.35;color:var(--ink);word-break:break-word;max-height:46px;overflow:hidden}

.fx-statusbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 14px;border-top:1px solid var(--sand-border);font-size:11.5px;color:var(--ink-faint)}
.fx-statusbar #fx-statusbar-left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-status-views{display:flex;gap:2px;flex-shrink:0}
.fx-status-view{border:none;background:none;font-size:13px;color:var(--ink-faint);cursor:pointer;padding:2px 7px;border-radius:4px;transition:all .12s}
.fx-status-view:hover{color:var(--ink)}
.fx-status-view.active{background:var(--sand);color:var(--ink)}

.fx-context{position:fixed;z-index:240;min-width:200px}

.fx-preview-modal{width:780px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column}
.fx-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fx-preview-head h3{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-preview-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fx-preview-body img{max-width:100%;max-height:62vh;border-radius:var(--rs)}
.fx-preview-body video{max-width:100%;max-height:62vh;border-radius:var(--rs)}
.fx-preview-body iframe{width:100%;height:62vh;border:1px solid var(--sand-border);border-radius:var(--rs)}
.fx-preview-text{width:100%;max-height:60vh;overflow:auto;background:var(--sand);border-radius:var(--rs);padding:14px;font-size:12px;line-height:1.6;font-family:var(--fm);white-space:pre-wrap;word-break:break-word;text-align:left}
.fx-preview-info{text-align:center;display:flex;flex-direction:column;gap:4px;padding:1.5rem}

@media(max-width:820px){
  .fx-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .fx-sidebar{max-height:32vh;height:auto}
}
.db-wrap{display:flex;flex-direction:column;max-width:760px;margin:0 auto;padding:.5rem 2rem 2.5rem;width:100%;gap:1.5rem}
.db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.db-stat{background:#fff;border-radius:var(--r);padding:1.4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);box-shadow:0 0 50px 2px rgba(206,140,96,.18)}
.db-stat-val{font-size:32px;font-family:var(--fd);font-weight:800;line-height:1}
.db-stat-label{font-size:11px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.db-actions-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* MODAL + TOAST */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center}
.ov.open{display:flex}
.modal{background:#fff;border-radius:var(--r);padding:1.5rem;width:400px;max-width:92vw;color:var(--ink);box-shadow:0 0 90px 12px rgba(216,180,72,.25)}
.modal h3{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.mrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mrow label{font-size:12px;color:var(--ink-soft);width:90px;flex-shrink:0}
.mrow input{flex:1;border:1px solid var(--sand-border);border-radius:var(--rs);padding:7px 10px;font-size:13px;font-family:var(--fb);outline:none;background:var(--sand);color:var(--ink)}
.mrow input:focus{border-color:var(--amber);background:#fff}
.mac{display:flex;gap:8px;justify-content:flex-end;margin-top:1rem}
.bc{padding:8px 18px;border:1px solid var(--sand-border);border-radius:var(--pill);background:none;font-size:13px;font-family:var(--fb);cursor:pointer;color:var(--ink-soft)}
.bs{padding:8px 18px;background:var(--ink);color:#fff;border:none;border-radius:var(--pill);font-size:13px;font-family:var(--fb);cursor:pointer;font-weight:600}
.toast{position:fixed;bottom:24px;right:24px;background:#fff;color:var(--ink);padding:10px 20px;border-radius:var(--pill);font-size:13px;font-weight:600;z-index:300;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;box-shadow:0 0 40px rgba(216,180,72,.45)}
.toast.show{opacity:1;transform:translateY(0)}

/* SETTINGS MODAL */
.settings-group{margin-bottom:1.25rem}
.settings-group h4{font-size:11px;font-weight:700;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-family:var(--fd)}
.settings-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.settings-row label{font-size:12px;color:var(--ink-soft);width:120px;flex-shrink:0}
.settings-row input{flex:1;border:1px solid var(--sand-border);border-radius:var(--rs);padding:7px 10px;font-size:13px;font-family:var(--fm);outline:none;background:var(--sand);color:var(--ink)}
.settings-row input:focus{border-color:var(--amber);background:#fff}
.settings-row input[type=password]{letter-spacing:.1em}
.sync-status{font-size:11px;color:var(--ink-faint);font-style:italic;margin-top:4px}
.sync-status.ok{color:var(--teal)}
.sync-status.err{color:var(--red)}
.settings-hint{font-size:11px;color:var(--ink-faint);margin-top:6px;font-style:italic;line-height:1.5}
.settings-hint a{color:var(--amber);text-decoration:none}
.settings-hint a:hover{text-decoration:underline}
.btn-link-danger{background:none;border:none;color:var(--red);font-size:12px;cursor:pointer;font-family:var(--fb);padding:6px 10px;border-radius:var(--pill)}
.btn-link-danger:hover{background:var(--red-faint)}

/* HABIT TRACKER */
.hl{display:flex;flex-direction:column;gap:10px}
.hi{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--rs);border:1px solid var(--sand-border);background:var(--sand);transition:all .15s}
.hi:hover{border-color:var(--teal)}
.hi.done{background:var(--teal-light);border-color:var(--teal)}
.hc{width:22px;height:22px;border:2px solid var(--sand-border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:transparent;transition:all .15s;cursor:pointer}
.hi.done .hc{background:var(--teal);border-color:var(--teal);color:#fff}
.hinfo{flex:1;cursor:pointer}
.hn{font-size:14px;font-weight:500;color:var(--ink)}
.hi.done .hn{color:var(--teal)}
.hd{font-size:12px;color:var(--ink-faint);margin-top:1px}
.h-del{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:16px;opacity:0;transition:opacity .15s}
.hi:hover .h-del{opacity:1}
.h-del:hover{color:var(--red)}
.add-habit-row{display:flex;gap:8px;margin-top:12px}
.add-habit-input{flex:1;border:1px solid var(--sand-border);border-radius:var(--pill);padding:8px 14px;font-size:13px;font-family:var(--fb);color:var(--ink);background:var(--sand);outline:none}
.add-habit-input:focus{border-color:var(--teal);background:#fff}
.add-habit-input::placeholder{color:var(--ink-faint)}
.add-habit-btn{padding:8px 18px;background:var(--teal);color:#fff;border:none;border-radius:var(--pill);font-size:13px;font-family:var(--fb);cursor:pointer;font-weight:600}
.add-habit-btn:hover{opacity:.85}

/* HABIT STATS */
.habit-stat-grid{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.habit-stat-row{display:flex;align-items:center;gap:10px}
.habit-stat-name{font-size:13px;color:var(--ink-soft);width:110px;flex-shrink:0}
.habit-stat-bar-wrap{flex:1;height:10px;background:var(--sand-dark);border-radius:5px;overflow:hidden}
.habit-stat-bar{height:100%;background:var(--teal);border-radius:5px;transition:width .5s}
.habit-stat-pct{font-size:12px;color:var(--teal);font-family:var(--fm);width:36px;text-align:right;flex-shrink:0}

/* TASK DELETE BUTTON */
.titem{position:relative}
.t-del{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:18px;line-height:1;padding:0 6px;opacity:0;transition:opacity .15s;align-self:center}
.titem:hover .t-del{opacity:1}
.t-del:hover{color:var(--red)}