/**
 * styles/main.css
 * ---------------------------------------------------------------------------
 * FEATURE: Styling for every ported component (sidebar, table, cards,
 *          compare, entry form, info card, bulk bar, toolbar).
 *
 * SOURCE
 *   Ported wholesale, verbatim, from the shipped Claude Artifact's <style>
 *   block (platform-hub.html) rather than rewritten, so visual behavior
 *   this refactor's components rely on (dark mode via prefers-color-scheme,
 *   mobile breakpoints, safe-area insets, the info-card/modal/bulk-bar/
 *   toolbar-2 rules) is proven-correct rather than re-derived from scratch.
 *   All component files in ../components/ use the exact same class names
 *   as the original prototype's markup for this reason — don't rename
 *   classes in a component without updating the corresponding rule here.
 * ---------------------------------------------------------------------------
 */
:root{
  --bg:#f7f7f5; --surface:#ffffff; --surface-2:#f0f0ee;
  --border:#e2e1dc; --border-strong:#cfcec7;
  --text:#1c1c1a; --text-secondary:#55544d; --text-muted:#68675f;
  --accent:#3760d8; --on-accent:#fff; --accent-bg:#e8edfb; --accent-text:#1f3f9e;
  --danger:#c0392b; --danger-bg:#fbe9e7;
  --success:#1f7a4d; --success-bg:#e6f4ec;
  --warn:#8a5608; --warn-bg:#fcf1de;
  --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151513; --surface:#1e1e1c; --surface-2:#25251f;
    --border:#37372f; --border-strong:#48483d;
    --text:#f0efe9; --text-secondary:#bdbcb2; --text-muted:#9d9c92;
    --accent:#7f9dff; --on-accent:#0b1230; --accent-bg:#22305e; --accent-text:#c3d1ff;
    --danger:#f0938a; --danger-bg:#4a2321;
    --success:#7fd6ab; --success-bg:#1e3a2c;
    --warn:#f0c583; --warn-bg:#4a3818;
  }
}
:root[data-theme="dark"]{
  --bg:#151513; --surface:#1e1e1c; --surface-2:#25251f;
  --border:#37372f; --border-strong:#48483d;
  --text:#f0efe9; --text-secondary:#bdbcb2; --text-muted:#9d9c92;
  --accent:#7f9dff; --on-accent:#0b1230; --accent-bg:#22305e; --accent-text:#c3d1ff;
  --danger:#f0938a; --danger-bg:#4a2321;
  --success:#7fd6ab; --success-bg:#1e3a2c;
  --warn:#f0c583; --warn-bg:#4a3818;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);}
button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--text);}
button{cursor:pointer;}
a{color:var(--accent);}

.shell{display:flex;min-height:100%;}
.sidebar{width:230px;flex-shrink:0;background:var(--surface);border-right:0.5px solid var(--border);padding:calc(16px + env(safe-area-inset-top,0px)) 12px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .18s ease;}
.sidebar.collapsed{width:64px;padding-left:8px;padding-right:8px;}
.brand{display:flex;align-items:center;gap:8px;padding:4px 4px 16px;}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.brand-name{font-weight:600;font-size:15px;white-space:nowrap;flex:1;}
.sidebar-collapse-btn{background:none;border:0.5px solid var(--border-strong);border-radius:6px;padding:4px;color:var(--text-muted);flex-shrink:0;display:flex;}
.sidebar-collapse-btn:hover{color:var(--text);background:var(--surface-2);}
.sidebar.collapsed .brand-name{display:none;}
.sidebar.collapsed .brand{justify-content:center;}
.sidebar.collapsed .brand-mark{display:none;}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}

.quick-nav{margin-bottom:10px;}
.nav-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:10px 8px 4px;white-space:nowrap;}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:var(--radius);cursor:pointer;font-size:13.5px;margin-bottom:2px;}
.nav-item:hover{background:var(--surface-2);}
.nav-item.active{background:var(--accent-bg);color:var(--accent-text);font-weight:600;}
.nav-item .label{display:flex;align-items:center;gap:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.nav-item .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-item .count{font-size:11px;color:var(--text-muted);flex-shrink:0;}
.nav-item.active .count{color:var(--accent-text);}
.nav-icon{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.sidebar.collapsed .nav-item{justify-content:center;padding:7px 0;}
.sidebar.collapsed .nav-item .txt,.sidebar.collapsed .nav-item .count,.sidebar.collapsed .nav-section-label,.sidebar.collapsed .group-toggle .chev{display:none;}
.sidebar.collapsed .nav-item .label{gap:0;}

.nav-group{margin-bottom:4px;}
.group-toggle{display:flex;align-items:center;justify-content:space-between;padding:9px 8px 4px;cursor:pointer;color:var(--text-muted);}
.group-toggle:hover{color:var(--text-secondary);}
.group-toggle .label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.group-toggle .chev{transition:transform .15s ease;flex-shrink:0;}
.group-toggle.open .chev{transform:rotate(90deg);}
.group-items{overflow:hidden;max-height:0;transition:max-height .18s ease;}
.group-items.open{max-height:900px;}
.sidebar.collapsed .group-toggle{padding:8px 0 2px;justify-content:center;}
.sidebar.collapsed .group-items{max-height:none !important;}

.sidebar-footer{margin-top:20px;padding:10px 8px;border-top:0.5px solid var(--border);font-size:11.5px;color:var(--text-muted);}
.user-box{display:flex;align-items:center;gap:8px;padding:8px;margin-top:8px;border-top:0.5px solid var(--border);padding-top:12px;}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.user-name{font-size:12.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logout-link{font-size:11.5px;color:var(--text-muted);background:none;border:none;padding:0;text-decoration:underline;}

.sidebar.collapsed .user-box{justify-content:center;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;border-bottom:0.5px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:160px;max-width:320px;}
.search-wrap input{width:100%;padding:8px 10px 8px 30px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);}
.search-wrap svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);opacity:.5;}
.table-select{padding:8px 10px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);min-width:150px;}
.view-switch{display:flex;border:0.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;margin-left:auto;}
.view-switch button{border:none;background:var(--surface);padding:7px 12px;font-size:13px;border-right:0.5px solid var(--border);}
.view-switch button:last-child{border-right:none;}
.view-switch button.active{background:var(--accent);color:var(--on-accent);}
.btn{border:0.5px solid var(--border-strong);background:var(--surface);border-radius:var(--radius);padding:8px 14px;font-size:13.5px;font-weight:500;}
.btn:hover{background:var(--surface-2);}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.btn-primary:hover{opacity:.92;background:var(--accent);}
.btn-icon{width:34px;padding:8px;display:inline-flex;align-items:center;justify-content:center;}

.content{padding:18px 20px 60px;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px;}
.stat-card{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:12px 14px;}
.stat-card .num{font-size:22px;font-weight:600;}
.stat-card .lbl{font-size:12px;color:var(--text-secondary);margin-top:2px;}

.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:6px;}
.section-title h1{font-size:17px;font-weight:600;margin:0;}
.hint{font-size:12.5px;color:var(--text-muted);}
.banner{background:var(--accent-bg);color:var(--accent-text);border-radius:var(--radius);padding:10px 14px;font-size:12.5px;margin-bottom:14px;}

.table-wrap{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:920px;}
th{text-align:left;padding:10px 12px;color:var(--text-secondary);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom:0.5px solid var(--border);background:var(--surface-2);white-space:nowrap;}
td{padding:10px 12px;border-bottom:0.5px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-2);}
tr.row-clickable{cursor:pointer;}
.name-cell{font-weight:600;}
.name-cell a{color:var(--text);text-decoration:none;}
.name-cell a:hover{color:var(--accent);}
.tag{display:inline-block;font-size:11px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:20px;padding:2px 8px;margin:1px 3px 1px 0;color:var(--text-secondary);}
.pill{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;}
.pill.active{background:var(--success-bg);color:var(--success);}
.pill.draft{background:var(--warn-bg);color:var(--warn);}
.pill.archived{background:var(--danger-bg);color:var(--danger);}
.pill.yes{background:var(--success-bg);color:var(--success);}
.pill.no{background:var(--surface-2);color:var(--text-muted);}
.pill.priority-high{background:var(--danger-bg);color:var(--danger);}
.pill.priority-medium{background:var(--warn-bg);color:var(--warn);}
.pill.priority-low{background:var(--surface-2);color:var(--text-secondary);}
.star-btn{background:none;border:none;font-size:16px;line-height:1;padding:2px;color:var(--border-strong);}
.star-btn.on{color:#e0a100;}
.overdue{color:var(--danger);font-weight:600;}
.rating{white-space:nowrap;}

.detail-inline-wrap{padding:0;animation:expandIn .12s ease;}
.detail-inline-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
@keyframes expandIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

.info-card{max-width:940px;}
.info-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:0.5px solid var(--border);}
.icon-close{background:none;border:none;color:var(--text-muted);padding:4px;flex-shrink:0;}
.icon-close:hover{color:var(--text);}

.empty{padding:40px 20px;text-align:center;color:var(--text-muted);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.item-card{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;}
.item-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.item-card h3{font-size:14.5px;margin:0;}
.item-card p{font-size:12.5px;color:var(--text-secondary);margin:4px 0 8px;}
.item-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:0.5px solid var(--border);}

.compare-bar{display:flex;align-items:center;gap:10px;background:var(--accent-bg);color:var(--accent-text);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:13px;}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.compare-card{background:var(--surface);border:2px solid var(--accent);border-radius:12px;padding:14px;}
.compare-card h3{margin:0 0 8px;font-size:15px;}
.compare-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:0.5px solid var(--border);}
.compare-row:last-child{border-bottom:none;}
.compare-row span:first-child{color:var(--text-muted);flex-shrink:0;}
.compare-row span:last-child{text-align:right;}

.chk{width:16px;height:16px;accent-color:var(--accent);}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:50;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:20px;}
.modal h2{margin:0 0 4px;font-size:16px;}
.modal-sub{font-size:12px;color:var(--text-muted);margin:0 0 14px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12.5px;color:var(--text-secondary);margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);}
.field textarea{resize:vertical;min-height:56px;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.err{color:var(--danger);font-size:12px;margin-top:4px;display:none;}
.fieldset{border:0.5px solid var(--border);border-radius:10px;padding:12px;margin-bottom:14px;}
.fieldset legend{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:0 6px;}
.pw-wrap{position:relative;}
.pw-wrap button{position:absolute;right:6px;top:5px;background:none;border:none;font-size:11px;color:var(--text-muted);padding:4px 6px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:6px 0;}
.switch{position:relative;width:38px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--border-strong);border-radius:20px;transition:.15s;}
.slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
input:checked + .slider{background:var(--accent);}
input:checked + .slider:before{transform:translateX(16px);}

.detail-list{display:flex;flex-direction:column;gap:0;}
.detail-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:8px 0;border-bottom:0.5px solid var(--border);}
.detail-row:last-child{border-bottom:none;}
.detail-row span:first-child{color:var(--text-muted);}
.detail-row span:last-child{text-align:right;font-weight:500;}
.detail-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin:16px 0 4px;}
.detail-section-label:first-child{margin-top:0;}

.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 16px;border-radius:var(--radius);font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:90vw;text-align:center;}
.toast.show{opacity:1;pointer-events:auto;}
.undo-toast{display:flex;align-items:center;gap:12px;}
.undo-toast button{background:none;border:none;color:#7f9dff;font-weight:600;font-size:13px;padding:0;}

.toolbar-2{padding-top:0;padding-bottom:10px;gap:8px;}
.bulk-bar{display:none;align-items:center;gap:8px;padding:10px 20px;background:var(--accent-bg);border-bottom:0.5px solid var(--border);flex-wrap:wrap;}
.bulk-bar.show{display:flex;}
.bulk-bar span{font-size:13px;font-weight:500;color:var(--accent-text);}
.bulk-bar select{font-size:12.5px;padding:6px 8px;}

th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{color:var(--text);}
th .sort-arrow{margin-left:3px;opacity:0.5;}
th.sort-active .sort-arrow{opacity:1;color:var(--text-accent);}

.link-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:6px;vertical-align:middle;}
.link-dot.error{background:var(--danger);}
.link-dot.ok{background:var(--success);}

.journal-item{padding:8px 0;border-bottom:0.5px solid var(--border);font-size:12.5px;}
.journal-item:last-child{border-bottom:none;}
.journal-item .ts{color:var(--text-muted);font-size:11px;margin-bottom:2px;}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:20px;padding:3px 10px 3px 10px;margin:2px 4px 2px 0;}
.chip button{background:none;border:none;padding:0;color:var(--text-muted);font-size:13px;line-height:1;}
.history-item{font-size:12px;color:var(--text-secondary);padding:5px 0;border-bottom:0.5px solid var(--border);}
.history-item:last-child{border-bottom:none;}
.history-item .ts{color:var(--text-muted);}
.toast.show{opacity:1;}

.menu-toggle{display:none;background:none;border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:8px;}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;}

/* login gate */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.gate-card{background:var(--surface);border:0.5px solid var(--border);border-radius:16px;padding:28px 24px;width:100%;max-width:360px;text-align:center;}
.gate-mark{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;margin:0 auto 14px;}
.gate-card h2{margin:0 0 4px;font-size:17px;}
.gate-card p{font-size:12.5px;color:var(--text-muted);margin:0 0 18px;}
.gate-card .field{text-align:left;}
.gate-note{font-size:11px;color:var(--text-muted);margin-top:14px;}

@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s;z-index:40;width:250px !important;}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.25);}
  .sidebar.collapsed{width:250px !important;padding-left:12px;padding-right:12px;}
  .sidebar.collapsed .brand-name,.sidebar.collapsed .brand-mark,.sidebar.collapsed .nav-item .txt,.sidebar.collapsed .nav-item .count,.sidebar.collapsed .nav-section-label,.sidebar.collapsed .group-toggle .chev,.sidebar.collapsed .user-name,.sidebar.collapsed .logout-link,.sidebar.collapsed .sidebar-footer{display:revert;}
  .sidebar-collapse-btn{display:none;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .topbar{padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .content{padding:14px 12px 60px;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===== Dashboard ===== */
.stat-card .num small{font-size:13px;font-weight:500;color:var(--text-muted);}
.stat-card.bad .num{color:var(--danger);} .stat-card.good .num{color:var(--success);}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:12px;}
.dash-grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.panel{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px;min-width:0;}
.dash-grid .panel{margin-bottom:0;}
.panel h2{font-size:13px;margin:0 0 10px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.panel h3.sub{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:10px 0 4px;}
.panel h3.sub.bad{color:var(--danger);}
.chart-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.donut{width:132px;height:132px;flex-shrink:0;transform:none;}
.donut circle{transition:opacity .15s;} .donut circle:hover{opacity:.8;}
.donut-num{font-size:7px;font-weight:700;fill:var(--text);} .donut-sub{font-size:2.8px;fill:var(--text-muted);}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;flex:1;min-width:110px;}
.legend li{display:flex;align-items:center;gap:8px;padding:2px 4px;border-radius:6px;}
.legend li b{margin-left:auto;font-weight:600;}
.swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.clickable{cursor:pointer;} .legend li.clickable:hover,.list li.clickable:hover,.bar-row.clickable:hover{background:var(--surface-2);}
.bars{display:flex;flex-direction:column;gap:6px;}
.bar-row{display:grid;grid-template-columns:minmax(70px,120px) 1fr 28px;align-items:center;gap:8px;font-size:12.5px;padding:2px 4px;border-radius:6px;}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);}
.bar-track{height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden;}
.bar-fill{display:block;height:100%;border-radius:6px;min-width:3px;}
.bar-val{text-align:right;font-weight:600;}
.progress{height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden;margin-bottom:6px;}
.progress span{display:block;height:100%;background:var(--accent);border-radius:6px;}
.list{list-style:none;margin:0;padding:0;}
.list li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:0.5px solid var(--border);border-radius:6px;font-size:13px;}
.list li:last-child{border-bottom:none;}
.li-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.li-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.when{font-size:12px;color:var(--text-secondary);white-space:nowrap;} .when.bad{color:var(--danger);font-weight:600;}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-muted);}
.dot.overdue,.dot.deadlink{background:var(--danger);} .dot.guarantee{background:var(--warn);} .dot.noaccount{background:var(--accent);}
.btn.small{padding:4px 10px;font-size:12px;}
kbd{font:600 11px/1 var(--font);background:var(--surface-2);border:0.5px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:2px 6px;}

/* ===== Pagination ===== */
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 4px 0;}
.pager-spacer{flex:1;} .pager-size{min-width:70px;padding:6px 8px;}
.pager .btn{padding:6px 10px;} .pager .btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== Command palette & help ===== */
.palette{align-items:flex-start;padding-top:12vh;}
.palette-box{background:var(--surface);border:0.5px solid var(--border-strong);border-radius:14px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;}
.palette-input{width:100%;border:none;border-bottom:0.5px solid var(--border);padding:14px 16px;font-size:15px;background:transparent;outline:none;}
.palette-list{max-height:52vh;overflow-y:auto;padding:6px;}
.palette-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;}
.palette-item .pi-sub{margin-left:auto;font-size:11.5px;color:var(--text-muted);white-space:nowrap;}
.palette-item.sel,.palette-item:hover{background:var(--accent-bg);color:var(--accent-text);}
.palette-group{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:8px 10px 2px;}
.palette-foot{border-top:0.5px solid var(--border);padding:8px 14px;font-size:11.5px;color:var(--text-muted);display:flex;gap:14px;flex-wrap:wrap;}
.help-table{width:100%;min-width:0;font-size:13px;} .help-table td{padding:6px 4px;border:none;} .help-table td:first-child{white-space:nowrap;width:1%;padding-right:16px;}

/* ===== Mobile polish ===== */
.drawer-backdrop{display:none;}
@media (max-width:820px){
  .sidebar.open ~ .drawer-backdrop,.drawer-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;}
  .topbar{flex-wrap:wrap;}
  .search-wrap{max-width:none;order:5;flex-basis:100%;}
  .view-switch{margin-left:0;overflow-x:auto;max-width:100%;}
  .toolbar-2{overflow-x:auto;flex-wrap:nowrap;} .toolbar-2 > *{flex-shrink:0;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .dash-grid,.dash-grid.two{grid-template-columns:1fr;}
  .donut{width:110px;height:110px;}
  .modal{max-height:92vh;padding:16px;} .field-row{flex-direction:column;gap:0;}
  .palette{padding-top:4vh;padding-left:10px;padding-right:10px;}
  .pager .pager-spacer{display:none;}
  .btn,.view-switch button,.nav-item{min-height:38px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

.toolbar-2{flex-wrap:wrap;} #linkCheckHint{flex-basis:100%;}

/* ===== Hidden scrollbars & number spinners (scrolling still works) ===== */
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{display:none;width:0;height:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ===== Collapsible sidebar: toggle sits at the pane's top-right ===== */
.brand{position:relative;}
.sidebar-collapse-btn{margin-left:auto;width:28px;height:28px;align-items:center;justify-content:center;transition:transform .18s;}
.sidebar.collapsed{width:64px;}
.sidebar.collapsed .brand{flex-direction:column;gap:8px;padding-bottom:12px;}
.sidebar.collapsed .brand-mark{display:flex;}
.sidebar.collapsed .sidebar-collapse-btn{margin:0;}
.sidebar.collapsed .nav-item{padding:8px 0;}
@media (max-width:820px){.sidebar-collapse-btn{display:none !important;}.sidebar.collapsed .brand-mark{display:flex !important;}}
.sidebar.collapsed .group-toggle{padding:6px 0;border-top:0.5px solid var(--border);margin-top:6px;pointer-events:none;}
.sidebar.collapsed .group-toggle .label{display:none;}
.sidebar.collapsed .nav-group:first-child .group-toggle{border-top:none;}

/* ===== Info card (entry details) — wide, structured, colour-coded ===== */
.info-card{max-width:940px;width:100%;padding:0;border-top:4px solid var(--cat,var(--accent));}
.info-card .info-card-header{padding:18px 22px 14px;margin:0;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;border-radius:14px 14px 0 0;}
.info-card #infoCardTitle{display:flex;align-items:center;gap:12px;font-size:20px !important;}
.ic-logo{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;}
.ic-title{overflow:hidden;text-overflow:ellipsis;}
.info-card #infoCardSub{margin-left:48px !important;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw;}
.info-card #infoCardBody{padding:16px 22px 22px;}
.ico{flex-shrink:0;vertical-align:-3px;}
.with-ico{display:inline-flex;align-items:center;gap:6px;}
.ic-hero{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:14px;}
.ic-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ic-stars{display:inline-flex;align-items:center;gap:2px;font-size:13px;margin-left:2px;}
.ic-stars .star{color:var(--border-strong);display:inline-flex;} .ic-stars .star.on{color:#e0a100;} .ic-stars b{margin-left:6px;}
.pill.neutral{background:var(--surface);border:0.5px solid var(--border-strong);color:var(--text-secondary);}
.pill.fav{background:#e0a10022;color:#b07d00;}
.pill.link-ok{background:var(--success-bg);color:var(--success);} .pill.link-error{background:var(--danger-bg);color:var(--danger);} .pill.link-unknown{background:var(--surface-2);color:var(--text-muted);}
.ic-notes{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-secondary);}
.ic-tags{margin-top:10px;} .ic-tags .tag{display:inline-flex;align-items:center;gap:4px;}
.ic-hero .detail-inline-actions{margin-top:14px;}
.btn.danger{color:var(--danger);border-color:var(--danger);} .btn.danger:hover{background:var(--danger-bg);}
.ic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.ic-col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.ic-panel{--tone:var(--accent);--tone-bg:var(--accent-bg);background:var(--surface);border:0.5px solid var(--border);border-left:3px solid var(--tone);border-radius:12px;padding:12px 14px;}
.ic-panel h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--tone);}
.ic-panel h3 span{flex:1;}
.tone-blue{--tone:var(--accent);} .tone-purple{--tone:#8a63d2;} .tone-amber{--tone:var(--warn);} .tone-green{--tone:var(--success);}
.tone-teal{--tone:#1b8a8f;} .tone-red{--tone:var(--danger);} .tone-pink{--tone:#c2447f;} .tone-slate{--tone:#5b6b86;} .tone-gray{--tone:var(--text-muted);}
.count-badge{font-size:11px;background:var(--surface-2);color:var(--text-secondary);border-radius:20px;padding:1px 8px;}
.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;border-bottom:0.5px solid var(--border);font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv-k{display:flex;align-items:center;gap:8px;color:var(--text-muted);white-space:nowrap;}
.kv-k .ico{color:var(--tone);opacity:.85;}
.kv-v{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere;}
.kv-v .muted{color:var(--text-muted);font-weight:400;} .kv-v .url{font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.chip button{display:inline-flex;align-items:center;}
.add-row{display:flex;gap:6px;margin-top:10px;} .add-row input,.add-row select{flex:1;min-width:0;padding:7px 10px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);font-size:12.5px;}
.journal-item .ts{display:flex;align-items:center;gap:4px;}
.history-item{display:flex;gap:10px;align-items:flex-start;}
.dot-sm{width:7px;height:7px;border-radius:50%;background:var(--tone);margin-top:6px;flex-shrink:0;}
@media (max-width:820px){
  .ic-grid{grid-template-columns:1fr;}
  .info-card{max-height:94vh;border-radius:14px;} .info-card #infoCardBody{padding:12px 14px 18px;} .info-card .info-card-header{padding:14px;}
  .info-card #infoCardSub{margin-left:0 !important;}
}
.ic-panel h3 span{flex:0 1 auto;} .ic-panel h3 > span:nth-of-type(1){flex:1;} .ic-panel h3 .count-badge{flex:0 0 auto;}
a.btn{text-decoration:none;color:var(--text);display:inline-flex;align-items:center;}

/* ===== Info card: compact top block ===== */
.info-card .info-card-header{padding:10px 18px 8px;}
.info-card #infoCardTitle{font-size:16px !important;gap:10px;}
.ic-logo{width:28px;height:28px;border-radius:8px;font-size:13px;}
.info-card #infoCardSub{margin-left:38px !important;font-size:11.5px;}
.info-card #infoCardBody{padding:10px 18px 18px;}
.ic-hero{padding:8px 12px;margin-bottom:10px;border-radius:10px;}
.ic-badges{gap:5px;}
.ic-hero .pill{font-size:10.5px;padding:1px 7px;gap:4px;}
.ic-stars{font-size:12px;} .ic-stars .ico{width:12px;height:12px;}
.ic-notes{margin:6px 0 0;font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ic-tags{margin-top:6px;} .ic-tags .tag{font-size:10.5px;padding:1px 7px;}
.ic-hero .detail-inline-actions{margin-top:8px;gap:6px;}
.ic-hero .btn{padding:4px 10px;font-size:12px;border-radius:6px;} .ic-hero .btn .ico{width:13px;height:13px;}

/* ===== Entry form: same look as the info card ===== */
.modal.entry-card{max-width:940px;width:100%;padding:0;border-top:4px solid var(--cat,var(--accent));overflow-y:auto;}
.entry-card form{display:block;}
.ef-header{display:flex;align-items:center;gap:10px;padding:10px 18px 8px;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;border-radius:14px 14px 0 0;}
.ef-head-text{flex:1;min-width:0;} .ef-head-text h2{font-size:16px;margin:0;} .ef-head-text .modal-sub{margin:0;font-size:11.5px;}
.ef-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 18px;align-items:start;}
.entry-card .ic-panel{padding:10px 14px 4px;}
.entry-card .field{margin-bottom:10px;} .entry-card .field label{font-size:12px;}
.entry-card .field input,.entry-card .field select,.entry-card .field textarea{padding:7px 10px;font-size:13px;}
.entry-card .toggle-row{padding:4px 0;}
.ef-footer{position:sticky;bottom:0;background:var(--surface);margin:0;padding:10px 18px;border-top:0.5px solid var(--border);border-radius:0 0 14px 14px;}
@media (max-width:820px){
  .ef-body{grid-template-columns:1fr;padding:10px 12px;} .ef-header{padding:10px 12px;} .ef-footer{padding:10px 12px;}
  .entry-card .field-row{flex-direction:column;gap:0;}
}
.ef-header .ic-logo{background:color-mix(in srgb,var(--cat,var(--accent)) 16%,transparent);color:var(--cat,var(--accent));}

/* ===== Login page & sign-out ===== */
body.locked .shell{display:none;}
.gate[hidden]{display:none;}
.gate{background:radial-gradient(1200px 500px at 50% -10%,var(--accent-bg),transparent),var(--bg);}
.gate-card{box-shadow:0 20px 60px rgba(0,0,0,.12);max-width:380px;}
.gate-mark{margin:0 auto 14px;}
.gate-card h2{font-size:20px;}
.gate-card .field{margin-bottom:10px;}
.gate-card label{font-size:12.5px;color:var(--text-secondary);display:block;margin-bottom:4px;text-align:left;}
.pw-wrap .field-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;}
.pw-wrap input{width:100%;padding:10px 54px 10px 12px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);}
.pw-wrap input.with-lead{padding-left:34px;}
.pw-wrap button{top:50%;transform:translateY(-50%);right:6px;font-size:12px;color:var(--accent);}
.remember{display:flex !important;align-items:center;gap:8px;font-size:12.5px;margin:6px 0 14px !important;cursor:pointer;}
.gate-btn{width:100%;justify-content:center;padding:10px 14px;font-size:14px;}
.gate-err,.gate-ok{display:flex;align-items:center;gap:6px;font-size:12.5px;border-radius:var(--radius);padding:8px 10px;margin:0 0 12px;text-align:left;}
.gate-err[hidden]{display:none;}
.gate-err{background:var(--danger-bg);color:var(--danger);} .gate-ok{background:var(--success-bg);color:var(--success);}
.sidebar{display:flex;flex-direction:column;} #groupedNav{flex:1;}
.user-box{position:sticky;bottom:-16px;background:var(--surface);margin:12px -12px -16px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:0.5px solid var(--border);display:flex;align-items:center;gap:10px;}
.user-meta{flex:1;min-width:0;} .user-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-sub{font-size:11px;color:var(--text-muted);}
.signout-btn{display:inline-flex;align-items:center;gap:6px;border:0.5px solid var(--border-strong);background:var(--surface);color:var(--danger);border-radius:var(--radius);padding:6px 9px;font-size:12px;font-weight:500;}
.signout-btn:hover{background:var(--danger-bg);}
.sidebar.collapsed .user-meta,.sidebar.collapsed .so-txt{display:none;}
.sidebar.collapsed .user-box{flex-direction:column;gap:8px;padding:10px 4px;}
.sidebar.collapsed .signout-btn{padding:6px;}

/* ===== Toolbar (redesigned) ===== */
#toolbar-root{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:0.5px solid var(--border);}
#toolbar-root .topbar{border-bottom:none;padding:10px 20px;gap:8px;flex-wrap:wrap;position:static;background:transparent;}
#toolbar-root .toolbar-2{padding-top:0;padding-bottom:10px;}
.tb-spacer{flex:1;min-width:8px;}
.tb-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.search-wrap{max-width:340px;flex:1 1 220px;}
.search-wrap > .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.search-wrap input{padding:8px 34px 8px 34px;border-radius:10px;transition:border-color .15s,box-shadow .15s;}
.search-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.search-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;}
.search-wrap:focus-within .search-kbd{display:none;}
.view-switch{margin-left:0;border-radius:10px;background:var(--surface-2);padding:2px;gap:2px;border:0.5px solid var(--border);overflow:visible;}
.view-switch button{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;border-radius:8px;padding:6px 11px;color:var(--text-secondary);font-weight:500;}
.view-switch button:hover{color:var(--text);background:var(--surface);}
.view-switch button.active{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.btn.btn-icon{width:36px;height:36px;padding:0;border-radius:10px;}
.btn{border-radius:10px;} .btn.btn-primary{box-shadow:0 1px 2px rgba(0,0,0,.15);}
.sel-wrap{position:relative;display:inline-flex;align-items:center;}
.sel-wrap > .ico{position:absolute;left:10px;color:var(--text-muted);pointer-events:none;}
.sel-wrap .table-select{padding:8px 10px 8px 30px;min-width:140px;border-radius:10px;}
.tb-count{font-size:13px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--surface-2);border:0.5px solid var(--border);}
.tb-count span{font-weight:400;color:var(--text-muted);}
details.menu{position:relative;}
details.menu > summary{list-style:none;cursor:pointer;user-select:none;}
details.menu > summary::-webkit-details-marker{display:none;}
details.menu[open] > summary{background:var(--surface-2);border-color:var(--accent);}
details.menu > summary .ico:last-child{opacity:.6;transition:transform .15s;} details.menu[open] > summary .ico:last-child{transform:rotate(180deg);}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--surface);border:0.5px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.25);padding:6px;z-index:30;animation:expandIn .12s ease;}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:8px 10px;font-size:13px;}
.menu-pop button:hover{background:var(--accent-bg);color:var(--accent-text);}
.menu-pop button .ico{color:var(--accent);}
.menu-pop button span{display:flex;flex-direction:column;} .menu-pop button small{font-size:11px;color:var(--text-muted);}
#linkCheckHint{flex-basis:100%;}
@media (max-width:820px){
  #toolbar-root{position:sticky;}
  #toolbar-root .topbar{padding:10px 12px;flex-wrap:wrap;}
  .search-wrap{order:5;flex-basis:100%;max-width:none;} .search-kbd{display:none;}
  .view-switch .vt{display:none;} .view-switch button{padding:8px 12px;}
  #addBtn span{display:none;} #addBtn{width:36px;padding:0;justify-content:center;}
  .toolbar-2{flex-wrap:wrap !important;overflow:visible !important;}
  .tb-spacer{display:none;} .tb-group{width:100%;} .sel-wrap{flex:1;} .sel-wrap .table-select{width:100%;min-width:0;}
  .menu-pop{left:0;right:auto;}
  #checkLinksBtn span{display:inline;}
}

/* ===== Filter chips ===== */
.chips-row{padding:0 20px 10px !important;gap:6px !important;align-items:center;}
.chip-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-right:2px;}
.chip-sep{width:1px;height:18px;background:var(--border-strong);margin:0 6px;}
.fchip{display:inline-flex;align-items:center;gap:6px;border:0.5px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:500;cursor:pointer;list-style:none;white-space:nowrap;transition:background .12s,border-color .12s;}
.fchip:hover{background:var(--surface-2);}
.fchip.on,.fchip[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text);font-weight:600;}
.fchip.clear{border-style:dashed;color:var(--danger);} .fchip.clear:hover{background:var(--danger-bg);}
.fchip b{background:var(--accent);color:var(--on-accent);border-radius:10px;padding:0 6px;font-size:11px;}
.cdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
.cat-menu > summary::-webkit-details-marker{display:none;}
.cat-pop{left:0;right:auto;min-width:250px;padding:6px 0;}
.cat-list{max-height:280px;overflow-y:auto;padding:0 6px;}
.cat-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;cursor:pointer;}
.cat-opt:hover{background:var(--surface-2);} .cat-opt input{accent-color:var(--accent);}
.cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cat-n{font-size:11.5px;color:var(--text-muted);}
@media (max-width:820px){.chips-row{padding:0 12px 10px !important;overflow-x:auto;flex-wrap:nowrap !important;} .chips-row > *{flex-shrink:0;} .cat-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;}}

/* ===== Dialogs, errors, focus ===== */
.dialog-card{max-width:420px;} .dialog-card h2{font-size:16px;margin:0 0 6px;}
.field-error{color:var(--danger);font-size:12px;margin:4px 0 0;} .field-error[hidden]{display:none;}
[aria-invalid=true]{border-color:var(--danger) !important;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.search-wrap input:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px;z-index:200;text-decoration:none;font-weight:600;}
.skip-link:focus{top:8px;}
tr.row-clickable:focus-visible,.item-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* ===== Trends & audit ===== */
.trend{width:100%;height:auto;max-height:190px;display:block;margin-bottom:6px;}
.ch-axis{font-size:9px;fill:var(--text-secondary);} .ch-val{font-size:9px;font-weight:600;fill:var(--text);}
.audit-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.audit-search{max-width:360px;flex:1 1 240px;} .fgroup{display:flex;gap:6px;}
.audit-table td{vertical-align:top;} .audit-table{min-width:760px;} .nowrap{white-space:nowrap;}
.link-btn{background:none;border:none;padding:2px 0;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:8px;text-align:left;cursor:pointer;}
.link-btn:hover{color:var(--accent);text-decoration:underline;}
.muted{color:var(--text-muted);}

/* ===== Offline ===== */
.offline-bar{background:var(--warn-bg);color:var(--warn);text-align:center;padding:8px 12px;font-size:13px;font-weight:600;border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:60;}
.offline-bar[hidden]{display:none;}
body.offline #addBtn,body.offline #checkLinksBtn{opacity:.5;pointer-events:none;}