/* Rotina design system. Tokens come from design/Rotina.dc.html. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
[x-cloak]{display:none!important}
:root{
  color-scheme:dark;
  --bg:#0c0d0e; --bg-2:#131415; --bg-3:#1a1b1d; --bg-hover:#212224; --bg-sunk:#090a0b;
  --line:#26282b; --line-2:#33363a;
  --ink:#f1f2f3; --ink-2:#a2a6ab; --ink-3:#6c7075;
  --accent:#6E62F5; --accent-h:#7f75f7; --accent-soft:rgba(110,98,245,.16); --accent-line:rgba(110,98,245,.4);
  --danger:#f0655f; --danger-soft:rgba(240,101,95,.14);
  --warn:#e2a338; --warn-soft:rgba(226,163,56,.14);
  --ok:#4bb06c; --ok-soft:rgba(75,176,108,.14);
  --p-low-bg:#212224; --p-low-fg:#92969b;
  --p-med-bg:rgba(90,142,246,.14); --p-med-fg:#87b0f7;
  --p-high-bg:rgba(226,163,56,.15); --p-high-fg:#e7ae4e;
  --p-urg-bg:#f0655f; --p-urg-fg:#1a0f0f;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px rgba(0,0,0,.45);
  --shadow-3:0 24px 70px rgba(0,0,0,.6);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f8f8f7; --bg-2:#ffffff; --bg-3:#ffffff; --bg-hover:#f0f0ef; --bg-sunk:#f2f2f1;
  --line:#e6e6e4; --line-2:#dadad7;
  --ink:#16181a; --ink-2:#5d6268; --ink-3:#8a9096;
  --accent:#5B4FE0; --accent-h:#4b40cf; --accent-soft:rgba(91,79,224,.10); --accent-line:rgba(91,79,224,.35);
  --danger:#d3423c; --danger-soft:rgba(211,66,60,.10);
  --warn:#a9740f; --warn-soft:rgba(169,116,15,.12);
  --ok:#2d8a52; --ok-soft:rgba(45,138,82,.12);
  --p-low-bg:#f0f0ef; --p-low-fg:#71767c;
  --p-med-bg:rgba(43,106,222,.10); --p-med-fg:#2b5fc9;
  --p-high-bg:rgba(169,116,15,.12); --p-high-fg:#8f6008;
  --p-urg-bg:#d3423c; --p-urg-fg:#ffffff;
  --shadow-1:0 1px 2px rgba(16,18,20,.06);
  --shadow-2:0 4px 14px rgba(16,18,20,.08);
  --shadow-3:0 24px 60px rgba(16,18,20,.16);
}
body{min-height:100vh;background:var(--bg);color:var(--ink);font:14px/1.45 'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
input,textarea,select,button{font-family:inherit;color:inherit;font-size:inherit}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
h1,h2,h3,p{margin:0}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
@keyframes urg{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- utilities ---------- */
.mono{font-family:var(--mono)}
.muted{color:var(--ink-3)}
.grow{flex:1}
.row{display:flex;align-items:center;gap:8px}
.stack{display:flex;flex-direction:column;gap:13px}
.dot{width:7px;height:7px;border-radius:99px;flex-shrink:0;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.only-light{display:none}
[data-theme="light"] .only-light{display:inline}
[data-theme="light"] .only-dark{display:none}
.section-label,.label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.count{min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font:500 10.5px var(--mono);display:inline-grid;place-items:center}
.tag{font:11.5px var(--mono);color:var(--ink-3);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:hover{background:var(--bg-hover);color:var(--ink)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff;font-weight:550;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-h);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2);padding:0 12px}
.btn-danger{background:transparent;color:var(--danger);padding:0 12px}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn-lg{height:36px;font-size:13.5px}
.btn-block{width:100%}
.btn-icon{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-3)}
.btn-icon:hover{background:var(--bg-hover);color:var(--ink)}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.input{width:100%;height:34px;padding:0 10px;border-radius:9px;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
select.input{cursor:pointer;padding:0 8px}
textarea.input{height:auto;padding:10px 12px;line-height:1.55;resize:vertical}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.error,.field:has(.errorlist) .input{border-color:var(--danger)}
.errorlist{list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--danger)}
.helptext{font-size:11.5px;color:var(--ink-3)}
input[type=color].input{padding:3px;width:48px;cursor:pointer}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:6px;white-space:nowrap;background:var(--p-low-bg);color:var(--ink-2)}
.prio-low{background:var(--p-low-bg);color:var(--p-low-fg)}
.prio-medium{background:var(--p-med-bg);color:var(--p-med-fg)}
.prio-high{background:var(--p-high-bg);color:var(--p-high-fg)}
.prio-urgent{background:var(--p-urg-bg);color:var(--p-urg-fg);font-weight:600;letter-spacing:.01em}
.pulse{width:5px;height:5px;border-radius:99px;background:currentColor;animation:urg 1.8s ease-in-out infinite}
.due{padding:2px 7px;color:var(--ink-2)}
.due-overdue{color:var(--danger);background:var(--danger-soft)}
.due-today{color:var(--accent);background:var(--accent-soft);font-weight:600}
.due-done{color:var(--ink-3);text-decoration:line-through}
.badge-accent{color:var(--accent);background:var(--accent-soft)}
.src-icon{flex-shrink:0;width:17px;height:17px;border-radius:5px;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;font-size:10px}
.q-btn{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-3);transition:background .15s,color .15s}
.q-btn:hover{background:var(--bg-hover);color:var(--ink)}
.q-btn.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.q-btn.on:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}

/* status dots: by column order, done = green */
.sdot{width:6px;height:6px;border-radius:2px;flex-shrink:0;display:inline-block;background:var(--ink-3)}
.sdot[data-o="0"]{background:#8b7bf7}.sdot[data-o="1"]{background:#5a8ef6}.sdot[data-o="2"]{background:#e2a338}
.sdot[data-o="3"]{background:#c479e8}.sdot.done{background:#4bb06c}

/* ---------- surfaces ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-1)}
.page{max-width:1000px;margin:0 auto;padding:32px 0 44px}
.page-narrow{max-width:470px;margin:0 auto;padding:48px 0 40px}
.page-title{font-size:23px;font-weight:600;letter-spacing:-.024em}
.page-sub{margin:7px 0 26px;font-size:13.5px;color:var(--ink-2)}
.empty{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:38px 22px 34px;text-align:center;box-shadow:var(--shadow-1);max-width:420px;margin:24px auto}
.empty-icon{width:42px;height:42px;margin:0 auto 15px;border-radius:12px;border:1px dashed var(--line-2);background:var(--bg-3);display:grid;place-items:center;color:var(--ink-3);font-size:16px}
.empty-title{font-size:15px;font-weight:550;letter-spacing:-.008em}
.empty p{margin:8px auto 0;max-width:34ch;font-size:13px;color:var(--ink-3);line-height:1.55}
.empty .btn{margin-top:18px}

/* ---------- shell ---------- */
.main{padding:0 24px 28px}
.topbar{position:sticky;top:0;z-index:30;background:var(--bg-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;height:52px;padding:0 12px 0 14px}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0;padding-right:4px;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.logo{width:22px;height:22px;border-radius:7px;background:var(--accent);display:grid;place-items:center;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.logo i{display:grid;grid-template-columns:3px 3px;gap:2.5px}
.logo b{width:3px;height:7px;border-radius:2px;background:#fff}
.logo b:nth-child(2),.logo b:nth-child(3){height:4px;background:rgba(255,255,255,.65)}
.vsep{width:1px;height:20px;background:var(--line);flex-shrink:0}
.topbar-projects{display:flex;align-items:center;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.nav-btn{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.nav-btn:hover{background:var(--bg-hover);color:var(--ink)}
.nav-btn.active{background:var(--bg-hover);color:var(--ink);font-weight:550}
.nav-btn.subtle{color:var(--ink-3)}
.avatar{width:22px;height:22px;border-radius:99px;background:linear-gradient(140deg,#6E62F5,#3BA55D);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center}
.menu{position:absolute;right:0;top:36px;width:192px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-2);padding:6px;animation:popIn .14s ease;z-index:40}
.menu-item{width:100%;text-align:left;height:30px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:13px;cursor:pointer}
.menu-item:hover{background:var(--bg-hover);color:var(--ink)}
a.menu-item{display:flex;align-items:center;gap:8px}
.menu-item.active{background:var(--bg-hover);color:var(--ink);font-weight:550}
.menu-sep{height:1px;background:var(--line);margin:4px 0}
.mnav{display:none;position:relative;flex:1;min-width:0}
.mnav-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mnav-menu{left:0;right:auto;top:44px;width:min(280px,calc(100vw - 24px));max-height:calc(100dvh - 64px);overflow-y:auto}
@media (max-width:640px){
  .topbar{gap:4px;padding:0 8px 0 12px}
  .brand-name,.topbar .vsep,.topbar-projects,.dnav{display:none}
  .mnav{display:block}
  .topbar .nav-btn,.topbar .btn-icon{height:40px;min-width:40px}
  .mnav-menu .menu-item{height:44px;font-size:14px}
  .tab{height:44px}
}

/* project header + tabs (full-bleed inside .main) */
.project-head{margin:0 -24px;background:var(--bg-2);border-bottom:1px solid var(--line);padding:18px 24px 0}
.project-head h1{font-size:21px;font-weight:600;letter-spacing:-.022em}
.project-dot{width:11px;height:11px;border-radius:99px;flex-shrink:0}
.tabs{display:flex;gap:2px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
.tab{position:relative;display:flex;align-items:center;height:38px;padding:0 13px;font-size:13.5px;color:var(--ink-3);white-space:nowrap;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);font-weight:550}
.tab.active::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--tab-color,var(--accent))}

/* ---------- toolbar / filters ---------- */
.toolbar{padding:14px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:flex;padding:2px;gap:2px;background:var(--bg-3);border:1px solid var(--line);border-radius:9px}
.seg>*{display:inline-flex;align-items:center;height:26px;padding:0 11px;border:0;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink-3);background:transparent;cursor:pointer;transition:background .15s,color .15s}
.seg>*:hover{color:var(--ink)}
.seg>.active{background:var(--bg-hover);color:var(--ink);box-shadow:var(--shadow-1)}
.search{position:relative;display:flex;align-items:center}
.search::before{content:'⌕';position:absolute;left:9px;color:var(--ink-3);font-size:12px;pointer-events:none}
.search .input{height:32px;width:210px;padding-left:26px;background:var(--bg-3);border-color:var(--line);font-size:13px}
.filter-group{display:flex;align-items:center;gap:6px}
.filter-group>span{font-size:12px;color:var(--ink-3)}
.pill{position:relative;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--bg-3);color:var(--ink-3);transition:all .15s}
.pill:hover{color:var(--ink)}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill:has(input:checked),.pill.active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.pill:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-soft)}
.toolbar select.input{height:28px;width:auto;font-size:12px;background:var(--bg-3);border-color:var(--line)}

/* ---------- kanban ---------- */
.board{display:flex;gap:12px;padding:16px 0 0;overflow-x:auto;align-items:flex-start}
.board.panning{cursor:grabbing;user-select:none}
.col{width:286px;flex-shrink:0}
.col-head{display:flex;align-items:center;gap:8px;padding:0 4px 9px}
.col-head h2{font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
.col-count{font:11px var(--mono);color:var(--ink-3);background:var(--bg-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.col-body{display:flex;flex-direction:column;gap:8px;min-height:120px;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--bg-sunk)}
.col-empty{padding:14px 8px;text-align:center;font-size:12px;color:var(--ink-3);border:1px dashed var(--line);border-radius:10px}
.col-body:has(.task-card) .col-empty{display:none}
.col-toggle{width:20px;height:20px;border-radius:6px;font-size:14px;line-height:1;transition:transform .15s}
/* collapsed column: narrow, vertical name, cards hidden but still a drop target */
.col.collapsed{width:44px}
.col.collapsed .col-head{flex-direction:column;padding:0 0 9px}
.col.collapsed .col-head h2{writing-mode:vertical-rl;white-space:nowrap}
.col.collapsed .col-head .grow,.col.collapsed .col-head .btn-icon:not(.col-toggle){display:none}
.col.collapsed .col-toggle{transform:rotate(180deg)}
.col.collapsed .col-body{min-height:160px;padding:4px;overflow:hidden}
.col.collapsed .task-card:not(.sortable-ghost),.col.collapsed .col-empty{display:none}
.st-row{flex-wrap:wrap;padding:8px 14px;cursor:default}
.st-row .q-grip{cursor:grab}
.st-name{width:180px;height:30px}
.st-check{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2)}
.st-move{height:28px;width:auto;font-size:12.5px}
.task-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:11px 11px 10px;border-radius:11px;background:var(--bg-3);border:1px solid var(--line);box-shadow:var(--shadow-1);cursor:grab;transition:border-color .15s,box-shadow .15s,transform .15s}
.task-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.task-card.done{opacity:.62}
.task-card.sortable-ghost{opacity:.4}
.task-title{display:flex;align-items:flex-start;gap:7px}
.task-title .src-icon{margin-top:1px}
.title-btn{padding:0;border:0;background:none;text-align:left;cursor:pointer;font-size:13.5px;font-weight:500;line-height:1.38;letter-spacing:-.006em;color:var(--ink)}
.task-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.is-done .title-btn,.title-btn.is-done{color:var(--ink-3);text-decoration:line-through}

/* ---------- table ---------- */
.tbl-wrap{margin-top:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:auto;box-shadow:var(--shadow-1)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--bg-sunk);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tbl td{padding:0 14px;height:42px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--bg-hover)}
.tbl .title-btn{font-weight:450;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-empty{padding:34px!important;text-align:center;color:var(--ink-3)}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(6,7,8,.62);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:56px 20px;overflow-y:auto;animation:fadeIn .16s ease}
.modal{width:100%;max-width:620px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-3);animation:popIn .18s var(--ease)}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px 0;font-size:12.5px;color:var(--ink-3)}
.modal-body{padding:0 18px}
.modal-foot{display:flex;align-items:center;gap:8px;padding:16px 18px;margin-top:16px;border-top:1px solid var(--line)}
.title-input{width:100%;border:0;background:transparent;font-size:19px;font-weight:550;letter-spacing:-.018em;color:var(--ink);outline:none;padding:6px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid-3 .field{gap:5px}
.grid-3 .input{height:33px;font-size:13px;background:var(--bg-3)}
.prio-seg{display:flex;gap:3px;padding:2px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;height:33px;align-items:center}
.prio-seg label{flex:1;position:relative;height:27px;display:grid;place-items:center;border-radius:7px;font-size:11.5px;font-weight:550;color:var(--ink-3);cursor:pointer;transition:all .15s}
.prio-seg input{position:absolute;opacity:0;pointer-events:none}
.prio-seg label:has(input:checked).prio-low{background:var(--p-low-bg);color:var(--p-low-fg)}
.prio-seg label:has(input:checked).prio-medium{background:var(--p-med-bg);color:var(--p-med-fg)}
.prio-seg label:has(input:checked).prio-high{background:var(--p-high-bg);color:var(--p-high-fg)}
.prio-seg label:has(input:checked).prio-urgent{background:var(--p-urg-bg);color:var(--p-urg-fg)}
.prio-seg label:not(:has(input:checked)){background:transparent;color:var(--ink-3)}
.prio-seg label:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent-line)}
.answers{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.answers-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg-sunk);font-size:12.5px;font-weight:600}
.answers dl{margin:0;padding:4px 14px 12px}
.answers dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.answers dl>div:last-child{border-bottom:0}
.answers dt{font-size:12px;color:var(--ink-3);line-height:1.5}
.answers dd{margin:0;font-size:13px;line-height:1.55;white-space:pre-line}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .answers dl>div{grid-template-columns:1fr;gap:2px}
  .main{padding:0 16px 24px}.project-head{margin:0 -16px;padding:16px 16px 0}
  .search .input{width:100%}
}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;margin:0 -24px;background:radial-gradient(90% 60% at 50% -10%,var(--accent-soft) 0%,transparent 60%)}
.auth-box{width:100%;max-width:352px;animation:fadeUp .3s var(--ease)}
.auth .brand{margin-bottom:30px;font-size:16px}
.auth h1{font-size:24px;font-weight:600;letter-spacing:-.026em}
.auth .field>span{font-size:11.5px;font-weight:550;color:var(--ink-2)}
.auth .input{height:38px;border-radius:10px;background:var(--bg-2);font-size:14px}
.auth .btn-primary{height:40px;margin-top:6px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-2)}

/* ---------- new project ---------- */
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--line-2);transition:transform .12s,box-shadow .15s}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--line-2)}
.preview-row{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}

/* ---------- shared: project sub-pages ---------- */
input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.btn-sm{height:28px;padding:0 11px;border-radius:8px;font-size:12.5px}
.btn-sq{width:28px;padding:0}
.btn-ok{height:26px;background:transparent;color:var(--ink-2)}
.btn-ok:hover{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.btn-ghost.danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn-icon.danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn.is-ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.pane{padding:20px 0 32px;margin-inline:auto}
.pane-narrow{max-width:600px}
.pane-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pane-title{font-size:17px;font-weight:600;letter-spacing:-.018em}
.pane-sub{margin-top:5px;font-size:13px;color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:20px;padding:20px 0 32px;align-items:start}
.split-left{grid-template-columns:262px minmax(0,1fr)}
.side-head{display:flex;align-items:center;gap:8px;padding:0 4px 9px}
.side-list{display:flex;flex-direction:column;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px;max-height:70vh;overflow-y:auto}
.side-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid transparent;border-radius:9px;color:var(--ink);font-size:13px;font-weight:450;transition:background .12s}
.side-item:hover{background:var(--bg-hover);color:var(--ink)}
.side-item.active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:550}
.side-item .t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.side-item .t>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-item small{font-size:11px;color:var(--ink-3);font-weight:400}
.side-empty{padding:10px;font-size:12.5px;color:var(--ink-3)}
.editor-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1);overflow:hidden;min-width:0}
.editor-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.editor-head input[type=date].input{height:28px;width:auto;font-size:12.5px;background:var(--bg-3)}
.emoji-pick{position:relative}
.emoji-btn{font-size:17px;line-height:1}
.emoji-menu{left:0;right:auto;top:34px;width:auto}
.emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.emoji{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;font-size:17px;line-height:1;cursor:pointer}
.emoji:hover,.emoji:focus-visible{background:var(--bg-hover)}
.editor-card .title-input{padding:12px 16px;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.editor-card .toastui-editor-defaultUI{border:0;border-radius:0}
.editor-card .md-field .toastui-editor-defaultUI:focus-within{box-shadow:none}
.editor-card .md-status{margin:0;padding:7px 14px;border-top:1px solid var(--line);background:var(--bg-sunk)}
@media (max-width:800px){.split,.split-left{grid-template-columns:1fr}}
.daily-sum{margin-top:20px;padding:14px 16px}
.daily-sum-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.daily-sum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.daily-sum h3{font-size:12.5px;font-weight:600;margin:0 0 6px;color:var(--ink-2)}
.daily-sum h3 small{font-weight:400;font-size:11px}
.daily-sum ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.daily-sum li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;min-width:0}
.daily-sum .title-btn{overflow-wrap:anywhere}
@media (max-width:800px){.daily-sum-grid{grid-template-columns:1fr;gap:12px}}

/* ---------- dailys ---------- */
.daily-label{display:flex;flex-direction:column;line-height:1.25;min-width:150px}
.daily-label b{font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.daily-label small{font-size:11.5px;color:var(--ink-3);text-transform:capitalize}

/* ---------- queue / focus ---------- */
.q-count{display:flex;align-items:center;gap:8px;margin:18px 0 10px;font:11.5px var(--mono);color:var(--ink-3)}
.q-count::after{content:'';height:1px;flex:1;background:var(--line)}
.q-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-1)}
.q-row{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:52px;border-bottom:1px solid var(--line);background:var(--bg-2);cursor:grab;transition:background .12s}
.q-row:last-child{border-bottom:0}
.q-row:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.q-row:hover{background:var(--bg-hover)}
.q-row.sortable-ghost{opacity:.4}
.q-grip{color:var(--ink-3);user-select:none}
.q-pos{font:11.5px var(--mono);color:var(--ink-3);width:18px}
.q-proj{display:inline-flex;align-items:center;gap:6px;width:120px;flex-shrink:0;font-size:12.5px;color:var(--ink-2);overflow:hidden;white-space:nowrap}
.q-proj:hover{color:var(--ink)}
.q-title{flex:1;min-width:0;font-size:13.5px;font-weight:450;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-row form{display:contents}
.focus-wrap{margin:0 -24px;min-height:calc(100vh - 52px);padding:0 24px;background:radial-gradient(120% 80% at 50% 0%,var(--bg-2) 0%,var(--bg) 55%)}
.focus-top{display:flex;align-items:center;gap:12px;padding:18px 0}
.focus{max-width:680px;margin:0 auto;padding:40px 0 80px;animation:fadeUp .3s var(--ease)}
.focus-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px;font-size:13px;color:var(--ink-2)}
.focus-title{font-size:40px;font-weight:600;letter-spacing:-.033em;line-height:1.12;text-wrap:pretty}
.focus-desc{margin-top:22px;padding-left:16px;border-left:2px solid var(--line-2);max-width:60ch}
.focus-desc .toastui-editor-contents{font-size:15px;line-height:1.7}
.focus-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:40px}
.focus-actions form{display:contents}
.btn-xl{height:42px;padding:0 20px;border-radius:11px;font-size:14.5px}
@media (max-width:640px){.q-proj{display:none}.focus-title{font-size:29px}.focus-wrap{margin:0 -16px;padding:0 16px}}

/* ---------- credentials ---------- */
.tbl .cell-mono{font:12px var(--mono);color:var(--ink-2);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl td>a.strong{color:var(--ink);font-weight:500}
.tbl td>a.strong:hover{color:var(--accent)}
.lock{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;flex-shrink:0}
.kv{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.kv .label{display:block;margin-bottom:5px;font-size:10.5px;letter-spacing:.05em}
.val{font:13px var(--mono);padding:8px 10px;border-radius:9px;background:var(--bg);border:1px solid var(--line);overflow-wrap:anywhere;min-height:36px}
.val-text{font-family:inherit;font-size:13px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- agenda (FullCalendar themed through its CSS vars) ---------- */
.legend{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.legend i{width:11px;height:11px;border-radius:4px;background:var(--accent)}
.legend i.task{background:var(--bg-3);border:1px solid var(--accent);border-left-width:3px}
.cal{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow-1);
  --fc-border-color:var(--line);--fc-page-bg-color:var(--bg-2);--fc-neutral-bg-color:var(--bg-sunk);--fc-neutral-text-color:var(--ink-3);
  --fc-today-bg-color:var(--accent-soft);--fc-highlight-color:var(--accent-soft);--fc-now-indicator-color:var(--danger);
  --fc-event-bg-color:var(--accent);--fc-event-border-color:var(--accent);--fc-event-text-color:#fff;--fc-list-event-hover-bg-color:var(--bg-hover);
  --fc-button-text-color:var(--ink);--fc-button-bg-color:var(--bg-3);--fc-button-border-color:var(--line-2);
  --fc-button-hover-bg-color:var(--bg-hover);--fc-button-hover-border-color:var(--line-2);
  --fc-button-active-bg-color:var(--accent-soft);--fc-button-active-border-color:var(--accent-line);
  --fc-small-font-size:11.5px}
.cal.fc{font-size:13px}
.cal.fc a{color:inherit}
.cal.fc .fc-toolbar{flex-wrap:wrap;gap:10px}
.cal.fc .fc-toolbar-title{font-size:17px;font-weight:600;letter-spacing:-.018em;}
.cal.fc .fc-toolbar-title::first-letter{text-transform:uppercase}
.cal.fc .fc-button{height:30px;padding:0 11px;font-size:12.5px;font-weight:500;border-radius:9px;box-shadow:none!important;text-transform:capitalize}
.cal.fc .fc-button-primary:not(:disabled).fc-button-active{color:var(--accent)}
.cal.fc .fc-button:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)!important}
.cal.fc .fc-button-primary:disabled{opacity:.5}
.cal.fc .fc-col-header-cell{background:var(--bg-sunk)}
.cal.fc .fc-col-header-cell-cushion{padding:8px 10px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cal.fc .fc-daygrid-day-number{font-size:12px;color:var(--ink-2);padding:6px 8px}
.cal.fc .fc-day-today .fc-daygrid-day-number{color:var(--accent);font-weight:600}
.cal.fc .fc-day-other .fc-daygrid-day-number{color:var(--ink-3);opacity:.6}
.cal.fc .fc-timegrid-slot-label,.cal.fc .fc-timegrid-axis{font:11px var(--mono);color:var(--ink-3)}
.cal.fc .fc-event{border-radius:6px;padding:1px 4px;font-size:11.5px;cursor:pointer}
.cal.fc .fc-daygrid-dot-event{color:var(--ink)}
.cal.fc .fc-daygrid-dot-event:hover{background:var(--bg-hover)}
.cal.fc .fc-event.fc-task{background:var(--bg-3);border-left-width:3px}
.cal.fc .fc-event.fc-task .fc-event-main{color:var(--ink)}
.cal.fc .fc-task-done{opacity:.45;text-decoration:line-through}
.cal.fc .fc-popover{background:var(--bg-3);border-color:var(--line-2);box-shadow:var(--shadow-2);border-radius:10px;overflow:hidden}
.cal.fc .fc-popover-header{background:var(--bg-sunk);color:var(--ink-2)}
.agenda-page{max-width:none;padding:20px 0 0}
.agenda-page .pane-head{margin-bottom:10px}
.agenda-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.agenda-filters .pill{gap:6px}
.agenda-filters .pill:not(:has(input:checked)) .dot{opacity:.35}
@media (max-width:640px){
  .agenda-page{padding-top:14px}
  .agenda-filters .legend{display:none}
  .agenda-filters .pill{height:34px}
  .cal{padding:8px;border-radius:12px}
  .cal.fc .fc-header-toolbar{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:8px;margin-bottom:10px}
  .cal.fc .fc-toolbar-chunk:nth-child(2){grid-column:1/-1;order:-1}
  .cal.fc .fc-toolbar-title{font-size:16px}
  .cal.fc .fc-button{height:40px;min-width:40px;padding:0 12px;font-size:13px}
  .cal.fc .fc-col-header-cell-cushion{padding:6px 2px;letter-spacing:.02em}
  .cal.fc .fc-daygrid-day-number{padding:4px 5px;font-size:11.5px}
  .cal.fc .fc-daygrid-event{font-size:10px;padding:0 2px;margin:1px 2px 0}
  .cal.fc .fc-daygrid-dot-event .fc-event-time{display:none}
  .cal.fc .fc-daygrid-more-link{font-size:10px}
}
.check-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);cursor:pointer;font-size:13px}
.check-card small{display:block;font-size:11.5px;color:var(--ink-3)}
.modal-sm{max-width:440px}
.modal .form-body{display:flex;flex-direction:column;gap:12px;padding:14px 18px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

/* ---------- client forms + builder ---------- */
.cf-list{display:flex;flex-direction:column;gap:10px}
.cf-card{background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:15px 16px;box-shadow:var(--shadow-1);transition:border-color .15s}
.cf-card:hover{border-color:var(--line-2)}
.cf-card h3{font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.cf-card h3 a{color:var(--ink)}
.cf-card h3 a:hover{color:var(--accent)}
.cf-url{flex:1;min-width:200px;font:12px var(--mono);color:var(--ink-2);padding:7px 10px;border-radius:9px;background:var(--bg);border:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-ok::before,.badge-off::before{content:'';width:5px;height:5px;border-radius:99px;background:currentColor}
.badge-off{color:var(--ink-3)}
.divider-head{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.divider-head::after{content:'';order:1;height:1px;flex:1;background:var(--line)}
.divider-head>.btn{order:2}
.bf{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow-1)}
.bf-row{display:flex;align-items:center;gap:9px}
.bf-row+.bf-row{margin-top:9px;padding-left:31px}
.bf-num{font:11px var(--mono);color:var(--ink-3);width:22px}
.bf .input{height:31px;border-radius:8px}
.bf .bf-label{flex:1;min-width:0;font-weight:500}
.bf select.input{width:130px;font-size:12.5px}
.bf .bf-sub{height:27px;border-color:var(--line);font-size:12px}
.bf .bf-name{width:150px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.bf-row>small{font-size:11px;color:var(--ink-3)}
.req{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:7px;font-size:11.5px;cursor:pointer;white-space:nowrap;border:1px solid var(--line);color:var(--ink-3);transition:all .15s}
.req:has(input:checked){border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.req:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-soft)}
.bf .btn-icon{width:26px;height:26px;font-size:11px}
.bf .btn-icon:disabled{opacity:.3;cursor:default}
code{font:12px var(--mono);background:var(--bg-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
@media (max-width:640px){.bf-row{flex-wrap:wrap}.bf-row+.bf-row{padding-left:0}}

/* ---------- public form (no login) ---------- */
.public{min-height:100vh;background:var(--bg-sunk);padding:34px 20px 48px;display:flex;justify-content:center;align-items:flex-start}
.public-center{align-items:center}
.public-box{width:100%;max-width:560px;animation:fadeUp .3s var(--ease)}
.public-top{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:13.5px;font-weight:550}
.public-top small{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.public-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;box-shadow:var(--shadow-2)}
.public-card h1{font-size:22px;font-weight:600;letter-spacing:-.024em}
.public-card .lead{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--ink-2);white-space:pre-line}
.public-card hr{border:0;height:1px;background:var(--line);margin:22px 0}
.public .stack{gap:16px}
.public .field>span{font-size:12.5px;font-weight:550}
.public .req-star{color:var(--danger)}
.public .input{height:38px;border-radius:10px;font-size:14px;padding:0 12px}
.public textarea.input{height:auto;padding:11px 12px}
.public .btn-primary{height:42px;margin-top:6px;border-radius:11px;font-size:14.5px}
.public .fine{margin-top:13px;font-size:11.5px;color:var(--ink-3);text-align:center}
.done-card{text-align:center;padding:40px 32px 34px}
.done-icon{width:46px;height:46px;margin:0 auto 18px;border-radius:14px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:20px}
.done-icon.bad{background:var(--danger-soft);color:var(--danger)}
.done-card h1{font-size:21px}
.done-card p{margin:10px auto 0;max-width:40ch;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.done-card .btn{margin-top:22px}
@media (max-width:640px){.public{padding:20px 14px 32px}.public-card{padding:20px 18px}.public .input{height:44px}}

/* ---------- markdown editor (Toast UI) ---------- */
.md-field .toastui-editor-defaultUI{border-color:var(--line-2);border-radius:11px;overflow:hidden}
.md-field .toastui-editor-defaultUI:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.toastui-editor-dark.toastui-editor-defaultUI,
.toastui-editor-dark .toastui-editor-main,
.toastui-editor-dark .ProseMirror,
.toastui-editor-dark .toastui-editor-md-preview{background:var(--bg)}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar,
.toastui-editor-dark .toastui-editor-mode-switch{background:var(--bg-sunk);border-color:var(--line)}
.toastui-editor-contents{font-family:inherit;font-size:13.5px}
.md-tools{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-height:28px}
.md-tools .btn{margin-left:-8px}
.editor-card .md-tools{margin:0;padding:4px 14px;border-bottom:1px solid var(--line)}
.editor-card .md-tools .btn{margin-left:-11px}
.md-tools-msg{font-size:12px;color:var(--ink-3)}
.md-undo{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
.md-status{font-size:11.5px;color:var(--ink-3);min-height:1.2em;margin-top:4px}

/* billing */
.bill-open{color:var(--warn);background:var(--warn-soft)}
.bill-paid{color:var(--ok);background:var(--ok-soft)}
.bill-open-ink{color:var(--warn)}
.bill-paid-ink{color:var(--ok)}
.bill-totals{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bill-totals>div{display:flex;flex-direction:column;gap:4px;padding:10px 14px;min-width:140px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1)}
.bill-totals strong{font-size:15px;font-weight:600}
.bill-check{display:flex;align-items:center;gap:8px;height:33px;font-size:13px}
.bill-check input{width:16px;height:16px;accent-color:var(--ok);margin:0}
.prio-seg.bill-seg label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.attach-list{list-style:none;margin:0;padding:0 14px}
.attach-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.attach-thumb{flex-shrink:0;width:36px;height:36px;border-radius:7px;object-fit:cover;background:var(--bg-sunk);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);font-size:15px}
.attach-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink)}
.attach-name:hover{color:var(--accent)}
img.attach-thumb{max-width:36px;max-height:36px}
input[type=file].input,input[type=file]{display:block;width:100%;height:auto;padding:14px;border:1.5px dashed var(--line-2);border-radius:10px;background:var(--bg-sunk);color:var(--ink-3);font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s}
input[type=file]:hover,input[type=file]:focus-visible{border-color:var(--accent-line);background:var(--accent-soft);outline:none}
input[type=file]::file-selector-button{margin-right:12px;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent-line);color:var(--accent)}
.closing-dates{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0 0}
.closing-dates dd{margin:4px 0 0;font:13px var(--mono)}
.closing-total{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;margin-top:16px}
.closing-total strong{font-size:18px;font-weight:600}
@media print{
  :root,:root[data-theme]{--bg:#fff;--bg-2:#fff;--bg-3:#fff;--bg-sunk:#f4f4f4;--bg-hover:#fff;--line:#ddd;--ink:#000;--ink-2:#333;--ink-3:#666;--shadow-1:none;color-scheme:light}
  .topbar,.no-print{display:none!important}
  .main{padding:0}
  .closing-doc{border:0;padding:0}
  .tbl-wrap{overflow:visible}
}

/* confirm dialog */
.confirm-dialog{width:min(400px,calc(100vw - 32px));padding:22px 22px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2);color:var(--ink);box-shadow:var(--shadow-3);animation:popIn .16s var(--ease)}
.confirm-dialog::backdrop{background:rgba(6,7,8,.62);backdrop-filter:blur(3px)}
.confirm-msg{margin:0 0 20px;font-size:14px;line-height:1.5;font-weight:500}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.confirm-dialog [value=ok]{background:var(--danger);border-color:var(--danger);color:#fff}
.confirm-dialog [value=ok]:hover{filter:brightness(1.08);background:var(--danger);color:#fff}
.confirm-dialog button:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* ---------- painel lateral "Agenda de hoje" (só desktop ≥1024px) ---------- */
.side-toggle,.side{display:none}
@media (min-width:1024px){
  .side-toggle{display:grid;place-items:center;font-size:14px}
  [data-side="1"] .side-toggle{background:var(--accent-soft);color:var(--accent)}
  .side{display:flex;flex-direction:column;position:fixed;top:52px;right:0;bottom:0;width:320px;z-index:25;
    background:var(--bg-2);border-left:1px solid var(--line);
    transform:translateX(100%);visibility:hidden;transition:transform .22s var(--ease),visibility .22s}
  [data-side="1"] .side{transform:none;visibility:visible}
  .main{transition:padding-right .22s var(--ease)}
  [data-side="1"] .main{padding-right:344px}
}
.side-head{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.side-day{font-size:14px;font-weight:600;letter-spacing:-.012em}
.side-day::first-letter{text-transform:uppercase}
.side-body{flex:1;overflow-y:auto;padding:8px 8px 14px;display:flex;flex-direction:column;gap:2px}
.side-label{margin:12px 6px 4px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.side-item{display:flex;align-items:flex-start;gap:9px;width:100%;padding:8px 8px;border:0;border-radius:9px;
  background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background .12s}
.side-item:hover{background:var(--bg-hover)}
.side-item.now{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.side-time{font:11.5px/1.5 var(--mono);color:var(--ink-3);width:34px;flex-shrink:0}
.side-item.now .side-time{color:var(--accent)}
.side-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.side-title{display:flex;align-items:baseline;gap:7px;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.side-title.is-done{color:var(--ink-3);text-decoration:line-through}
.side-row{display:flex;align-items:center;gap:4px}
.side-meet{flex-shrink:0;padding:4px 8px;border-radius:7px;font-size:11.5px;font-weight:550;
  color:var(--accent);background:var(--accent-soft)}
.side-meet:hover{color:#fff;background:var(--accent)}
.side-now{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.side-empty{padding:28px 10px;text-align:center;font-size:13px;color:var(--ink-3)}
.side-overdue{display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px;border-radius:9px;
  font-size:12.5px;color:var(--danger);background:var(--danger-soft)}
.side-overdue:hover{color:var(--danger);filter:brightness(1.1)}
.side-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex-shrink:0}

/* ---------- Google Agenda (configurações) ---------- */
.gcal-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.gcal-row .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gcal-project{width:auto;min-width:140px;height:28px;font-size:12.5px}
.gcal-color{width:34px;height:28px;padding:2px;cursor:pointer}
.focus-status{display:inline-flex;flex-wrap:wrap;margin-top:18px}

/* ---------- checklist ---------- */
.check-ok{background:var(--ok-soft);color:var(--ok)}
.check-bad{background:var(--danger-soft);color:var(--danger)}
.title-row .check-badge{flex-shrink:0}
.check-list{list-style:none;margin:0;padding:4px 14px 0}
.check-list li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.check-list label{flex:1;min-width:0;display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.check-list input{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--ok)}
.check-list li.is-done span{color:var(--ink-3);text-decoration:line-through}
.check-list .btn-icon{width:24px;height:24px;opacity:.45}
.check-list li:hover .btn-icon,.check-list .btn-icon:focus-visible{opacity:1}
.focus .checklist{margin-top:18px;max-width:60ch}