:root, [data-theme="dark"] {
  --bg:#0d1117;--surface:#161b22;--surface2:#21262d;--border:#30363d;
  --text:#e6edf3;--muted:#8b949e;
  --red:#ff4d4f;--amber:#f59e0b;--green:#22c55e;
  --red-bg:rgba(255,77,79,.12);--amber-bg:rgba(245,158,11,.12);--green-bg:rgba(34,197,94,.12);
  --accent:#58a6ff;--accent-bg:rgba(88,166,255,.1);
  --pink:#f472b6;--purple:#a78bfa;--teal:#34d399;
}
[data-theme="light"] {
  --bg:#f6f8fa;--surface:#ffffff;--surface2:#f0f2f5;--border:#d0d7de;
  --text:#1f2328;--muted:#656d76;
  --red:#cf222e;--amber:#bf8700;--green:#1a7f37;
  --red-bg:rgba(207,34,46,.08);--amber-bg:rgba(191,135,0,.08);--green-bg:rgba(26,127,55,.08);
  --accent:#0969da;--accent-bg:rgba(9,105,218,.08);
  --pink:#d63384;--purple:#8250df;--teal:#1b7c83;
}
/* ── ANTHROPIC THEME — warm cream, terracotta accent ─────────────────────── */
[data-theme="anthropic"] {
  /* Backgrounds — warm parchment hierarchy */
  --bg:#F5EFE6;
  --surface:#FDFAF6;
  --surface2:#EDE5D8;
  --border:#D9CFBF;
  /* Typography */
  --text:#1C1915;
  --muted:#7A6E61;
  /* Semantic colours — warm-shifted versions */
  --red:#C0392B;--amber:#A0620A;--green:#2A6B3A;
  --red-bg:rgba(192,57,43,.09);--amber-bg:rgba(160,98,10,.09);--green-bg:rgba(42,107,58,.09);
  /* Brand accent — Anthropic terracotta / burnt orange */
  --accent:#C96A2A;
  --accent-bg:rgba(201,106,42,.10);
  --accent-rgb:201,106,42;
  /* Supporting palette — earthy harmonics */
  --pink:#A0522D;     /* sienna */
  --purple:#7B5EA7;   /* warm plum */
  --teal:#2E7D6B;     /* forest */
}
/* Soften btn-full colour inversion for anthropic theme */
[data-theme="anthropic"] .btn-full { color: #FDFAF6; }
[data-theme="anthropic"] header { background: #FDFAF6; box-shadow: 0 1px 0 #D9CFBF; }
[data-theme="anthropic"] .sidebar { background: #FDFAF6; }
[data-theme="anthropic"] .tab { font-weight: 500; }
[data-theme="anthropic"] .tab.active { background: var(--surface2); }
[data-theme="anthropic"] .proc-card:hover { border-color: #C2B09A; }
[data-theme="anthropic"] .auth-card { box-shadow: 0 2px 24px rgba(0,0,0,.08); }
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;font-size:14px;}

/* ── LOADING ── */
#loadingScreen{position:fixed;inset:0;z-index:2000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#loadingScreen.hidden{display:none;}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{color:var(--muted);font-size:13px;}

/* ── AUTH ── */
#authScreen{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;}
#authScreen.hidden{display:none;}
.auth-card{width:min(520px,100%);max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;margin:auto;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo-mark{width:52px;height:52px;background:linear-gradient(135deg,#22c55e,#58a6ff);border-radius:14px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:22px;color:#fff;}
.auth-logo-title{font-family:'DM Serif Display',serif;font-size:22px;}
.auth-logo-sub{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-top:2px;}
.auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--surface2);border-radius:8px;padding:3px;}
.auth-tab{flex:1;text-align:center;padding:8px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .15s;}
.auth-tab.active{background:var(--surface);color:var(--text);}
.auth-form-title{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:4px;}
.auth-form-sub{color:var(--muted);font-size:12px;margin-bottom:18px;line-height:1.5;}
.form-field{margin-bottom:14px;}
.form-label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
.form-input{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13.5px;transition:border-color .15s;}
.form-input:focus{outline:none;border-color:var(--accent);}
.form-input.error{border-color:var(--red);}
.form-error{font-size:11px;color:var(--red);margin-top:5px;min-height:15px;}
.pw-wrap{position:relative;}
.pw-wrap .form-input{padding-right:40px;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:4px;}
.pw-strength{display:flex;gap:4px;margin-top:6px;}
.pw-strength-bar{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .3s;}
.pw-hint{font-size:11px;color:var(--muted);margin-top:4px;}
.btn-full{width:100%;padding:11px;border-radius:8px;border:none;background:var(--accent);color:#0d1117;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-full:hover{opacity:.88;}
.btn-full:disabled{opacity:.5;cursor:not-allowed;}
.btn-full.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn,.btn-full,.pw-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.auth-link{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;cursor:pointer;}
.auth-link span{color:var(--accent);text-decoration:underline;}
.auth-info{font-size:11px;color:var(--muted);background:var(--surface2);border-radius:6px;padding:9px 11px;margin-bottom:14px;line-height:1.6;}
.auth-success{font-size:13px;color:var(--green);background:var(--green-bg);border:1px solid var(--green);border-radius:7px;padding:10px 12px;margin-bottom:12px;display:none;}

/* ── HEADER ── */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:100;}
.logo{display:flex;align-items:center;gap:12px;}
.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,#22c55e,#58a6ff);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:16px;color:#fff;}
.logo-text{font-family:'DM Serif Display',serif;font-size:18px;}
.logo-sub{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-top:1px;}
.logo-credit{font-size:9.5px;font-style:italic;font-family:'DM Serif Display',serif;letter-spacing:.5px;color:var(--teal);margin-top:1px;display:block;}
.header-right{display:flex;gap:8px;align-items:center;}
.user-chip{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.user-chip strong{color:var(--accent);}
.user-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text);transition:background .1s;}
.user-menu-item:hover{background:var(--surface2);}
.sync-indicator{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.sync-dot.syncing{background:var(--amber);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── LAYOUT ── */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 60px);}

/* ── SIDEBAR ── */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:20px 0;position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;}
.sidebar-section{padding:0 16px;margin-bottom:6px;}
.sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding:8px 8px 4px;font-weight:600;}
.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .1s;gap:8px;}
.sidebar-item:hover{background:var(--surface2);}
.sidebar-item.active{background:var(--accent-bg);color:var(--accent);}
.sidebar-item.active .sidebar-count{background:var(--accent);color:#fff;}
.sidebar-item-name{font-size:13px;font-weight:500;flex:1;}
.sidebar-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--surface2);border-radius:10px;padding:2px 7px;min-width:28px;text-align:center;color:var(--muted);font-weight:500;}
.sidebar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.overall-stats{padding:14px;margin:0 0 8px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);}
.overall-title{font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px;}
.overall-numbers{display:flex;gap:12px;margin-bottom:8px;}
.overall-num .val{font-family:'DM Serif Display',serif;font-size:20px;}
.overall-num .lbl{font-size:10px;color:var(--muted);}
.overall-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.overall-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--accent));border-radius:2px;transition:width .5s ease;}

/* ── MAIN ── */
.main{padding:28px 32px;overflow-y:auto;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;}
.page-title{font-family:'DM Serif Display',serif;font-size:26px;font-weight:400;line-height:1.2;}
.page-subtitle{color:var(--muted);font-size:13px;margin-top:3px;}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);padding:4px;border-radius:8px;width:fit-content;}
.tab{padding:6px 14px;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .15s;}
.tab.active{background:var(--surface2);color:var(--text);}
.tab:hover:not(.active){color:var(--text);}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;}
.stat-card-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;white-space:nowrap;}
.stat-card-val{font-family:'DM Serif Display',serif;font-size:22px;line-height:1;flex-shrink:0;}
.stat-card-sub{font-size:10px;color:var(--muted);margin-top:1px;}
.search-bar{width:200px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;}
.search-bar:focus{outline:none;border-color:var(--accent);}
.search-bar::placeholder{color:var(--muted);}
.far-link-chip{display:inline-flex;align-items:center;gap:6px;color:#0b5cff;border-color:rgba(11,92,255,.22);background:rgba(11,92,255,.08);font-weight:700;}
.far-link-chip:hover{color:#0847c7;border-color:rgba(11,92,255,.38);background:rgba(11,92,255,.14);}
.far-zoom-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:#0b5cff;color:#fff;flex-shrink:0;}

/* ── PROCEDURES ── */
.category-group{margin-bottom:4px;}
.category-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;cursor:pointer;user-select:none;transition:background .15s;margin-bottom:3px;}
.category-toggle:hover{background:#2d333b;}
.cat-chevron{font-size:10px;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.cat-chevron.open{transform:rotate(90deg);}
.cat-name{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;flex:1;}
.cat-badge{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--border);border-radius:10px;padding:2px 8px;color:var(--muted);}
.cat-progress-mini{font-size:11px;color:var(--muted);}
.category-body{overflow:hidden;transition:max-height .35s ease;}
.category-header-row{display:grid;grid-template-columns:1fr 120px 130px 110px 44px;gap:12px;padding:6px 16px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;}
.sort-col{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:4px;transition:color .15s;}
.sort-col:hover{color:var(--accent);}
.sort-col.active{color:var(--accent);}
.sort-arrow{font-size:9px;opacity:.5;}
.sort-col.active .sort-arrow{opacity:1;}
.proc-card{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:12px 16px;display:grid;grid-template-columns:1fr 120px 130px 110px 44px;align-items:center;gap:12px;transition:all .15s;margin-bottom:2px;}
.proc-card:hover{border-color:#484f58;background:var(--surface2);}
.proc-name{font-weight:500;font-size:13.5px;line-height:1.3;}
.proc-tag{font-size:10px;color:var(--muted);margin-top:2px;}
.traffic-light{display:flex;align-items:center;gap:6px;}
.light{width:10px;height:10px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);flex-shrink:0;transition:all .3s;}
.light.active-red{background:var(--red);border-color:var(--red);box-shadow:0 0 6px var(--red);}
.light.active-amber{background:var(--amber);border-color:var(--amber);box-shadow:0 0 6px var(--amber);}
.light.active-green{background:var(--green);border-color:var(--green);box-shadow:0 0 6px var(--green);}
.traffic-label{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500;}
.traffic-label.red{color:var(--red);}
.traffic-label.amber{color:var(--amber);}
.traffic-label.green{color:var(--green);}
.proc-progress{display:flex;flex-direction:column;gap:4px;}
.progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.progress-fill.red{background:var(--red);}
.progress-fill.amber{background:var(--amber);}
.progress-fill.green{background:linear-gradient(90deg,#22c55e,#4ade80);}
.progress-text{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-align:right;}
.count-control{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;}
.count-btn{width:22px;height:22px;border-radius:4px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .1s;flex-shrink:0;}
.count-btn:hover{background:var(--border);}
.count-val{font-size:15px;font-weight:500;min-width:28px;text-align:center;}
.inline-target{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px;}
.inline-target input{width:48px;padding:2px 5px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;text-align:center;}
.inline-target input:focus{outline:none;border-color:var(--accent);}
.log-btn{width:34px;height:34px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:16px;}
.log-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}

/* ── HISTORY ── */
.history-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;}
.history-title{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.history-item{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);gap:12px;font-size:13px;}
.history-item:last-child{border-bottom:none;}
.history-proc{font-weight:500;flex:1;}
.history-date{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;}
.history-del{width:22px;height:22px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;transition:all .1s;display:flex;align-items:center;justify-content:center;}
.history-del:hover{background:var(--red-bg);border-color:var(--red);color:var(--red);}

/* ── CALENDAR ── */
.calendar-wrapper{display:grid;grid-template-columns:minmax(260px,290px) minmax(0,1fr);gap:20px;align-items:start;}
.calendar-rail{display:flex;flex-direction:column;gap:14px;min-width:0;}
.calendar-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-month{font-family:'DM Serif Display',serif;font-size:16px;}
.cal-arrow{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:3px 8px;cursor:pointer;color:var(--text);font-size:12px;transition:background .1s;}
.cal-arrow:hover{background:var(--border);}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 4px;grid-auto-rows:max-content;align-content:start;}
.cal-dow{text-align:center;font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:2px 0 4px;font-weight:600;}
.cal-day{height:34px;min-height:34px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;position:relative;gap:1px;border:1px solid transparent;}
.cal-day:hover:not(.empty){background:var(--surface2);border-color:var(--border);}
.cal-day.today{border-color:var(--accent)!important;color:var(--accent);}
.cal-day.selected{background:var(--accent-bg)!important;border-color:var(--accent)!important;color:var(--accent);}
.cal-day.has-log::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--green);position:absolute;bottom:2px;}
.log-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;position:sticky;top:88px;max-width:100%;min-width:0;}
.log-sidebar-date{font-family:'DM Serif Display',serif;font-size:18px;margin-bottom:4px;}
.log-sidebar-sub{font-size:12px;color:var(--muted);margin-bottom:18px;}
.log-field-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.log-field-num{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.log-field-num.n1{background:var(--pink);}
.log-field-num.n2{background:var(--purple);}
.log-field-num.n3{background:var(--teal);}
.log-field-group{margin-bottom:16px;}
.checklist-items{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
.checklist-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;background:var(--surface2);border-radius:6px;border:1px solid transparent;}
.checklist-item.done-item .check-text{text-decoration:line-through;color:var(--muted);}
.check-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all .15s;background:var(--surface);}
.check-box.checked{background:var(--green);border-color:var(--green);}
.check-box.checked::after{content:'✓';font-size:10px;color:#0d1117;font-weight:700;}
.check-text{font-size:13px;flex:1;line-height:1.4;word-break:break-word;}
.checklist-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:1px 3px;opacity:.6;transition:opacity .1s;}
.checklist-del:hover{opacity:1;color:var(--red);}
.add-item-row{display:flex;gap:6px;margin-top:4px;}
.add-item-input{flex:1;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:12px;}
.add-item-input:focus{outline:none;border-color:var(--accent);}
.add-item-btn{padding:6px 10px;background:var(--accent-bg);border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-size:12px;cursor:pointer;font-weight:600;}
.cal-save-btn{width:100%;margin-top:10px;padding:10px;background:var(--green-bg);border:1px solid var(--green);border-radius:7px;color:var(--green);font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:opacity .15s;}
.cal-save-btn:hover{opacity:.8;}

/* ── BUTTONS ── */
.btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;transition:all .15s;font-weight:500;}
.btn:hover{background:var(--border);}
.account-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px;}
.account-settings-panel{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;}
.account-settings-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.account-settings-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.account-settings-item:last-child{border-bottom:none;padding-bottom:0;}
.account-settings-item span{color:var(--muted);}
.account-settings-item strong{color:var(--text);font-weight:600;text-align:right;word-break:break-word;}
.account-settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.btn-primary{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}
.btn-primary:hover{background:rgba(88,166,255,.2);}
.btn-danger{background:var(--red-bg);border-color:var(--red);color:var(--red);}
.btn-danger:hover{background:rgba(255,77,79,.2);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:440px;max-width:90vw;transform:translateY(8px);transition:transform .2s;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-title{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:4px;}
.modal-subtitle{color:var(--muted);font-size:13px;margin-bottom:20px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
.modal-mobile-safe .form-input,
.modal-mobile-safe textarea.form-input{font-size:16px;}
.modal-actions-sticky{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(13,17,23,0) 0%, var(--surface) 24%);padding-top:14px;z-index:2;}
.bug-admin-card{padding:12px;margin-bottom:10px;background:var(--surface2);border-radius:8px;border-left:3px solid var(--amber);}
.bug-admin-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.bug-admin-text{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;margin-bottom:8px;word-break:break-word;}
.bug-admin-editarea{margin-bottom:8px;}
.bug-admin-actions{display:flex;gap:6px;flex-wrap:wrap;}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ── MCQ CARD ── */
.mcq-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin-top:24px;}
#dashboardMCQMount .mcq-card{margin-top:0;border:none;background:transparent;padding:0;border-radius:0;}
.mcq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mcq-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;}
.mcq-label-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.mcq-refresh{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:5px;transition:all .15s;line-height:1;}
.mcq-refresh:hover{background:var(--surface2);color:var(--accent);}
.mcq-refresh.spinning{animation:spin .7s linear infinite;}
.mcq-stem{font-size:14.5px;font-weight:500;line-height:1.55;margin-bottom:16px;color:var(--text);}
.mcq-topic-tag{display:inline-block;font-size:10px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 9px;margin-bottom:10px;font-weight:500;}
.mcq-options{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.mcq-option{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:all .15s;font-size:13.5px;line-height:1.4;}
.mcq-option:hover:not(.disabled){border-color:var(--accent);background:var(--accent-bg);}
.mcq-option.selected-correct{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.mcq-option.selected-wrong{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.mcq-option.reveal-correct{border-color:var(--green);background:var(--green-bg);}
.mcq-option.disabled{cursor:default;}
.mcq-opt-letter{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;font-family:'JetBrains Mono',monospace;}
.mcq-option.selected-correct .mcq-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.mcq-option.selected-wrong .mcq-opt-letter{border-color:var(--red);background:var(--red);color:#0d1117;}
.mcq-option.reveal-correct .mcq-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.mcq-explanation{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--muted);display:none;margin-top:4px;}
.mcq-explanation strong{color:var(--text);}
.mcq-explanation.visible{display:block;}
.mcq-loading{text-align:center;padding:32px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px;}

/* ── QUESTION BANK ── */
.qbank-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:8px;transition:border-color .15s;}
.qbank-pp-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:all .15s;}
.qbank-pp-btn:hover{border-color:var(--accent);color:var(--accent);}
.qbank-pp-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600;}
.qbank-pg-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;cursor:pointer;transition:all .15s;}
.qbank-pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.qbank-pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.qbank-card:hover{border-color:#484f58;}
.qbank-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.qbank-topic{font-size:10px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 10px;font-weight:500;}
.qbank-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-left:auto;}
.qbank-stem{font-size:13.5px;font-weight:500;line-height:1.55;margin-bottom:12px;color:var(--text);}
.qbank-options{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.qbank-option{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);font-size:13px;line-height:1.4;}
.qbank-option.correct-opt{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.qbank-opt-letter{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace;}
.qbank-option.correct-opt .qbank-opt-letter{border-color:var(--green);background:var(--green);color:#0d1117;}
.qbank-explanation{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.qbank-explanation strong{color:var(--text);}
.qbank-option.selected-wrong{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.qbank-option.selected-wrong .qbank-opt-letter{border-color:var(--red);background:var(--red);color:#0d1117;}

/* ── QBANK SOURCES ── */
.qbank-sources{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.qbank-sources-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.qbank-sources-label-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.qbank-source-item{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:7px;position:relative;}
.qbank-source-item.own-source{border-color:rgba(88,166,255,.3);}
.qbank-source-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.qbank-source-author{font-size:10px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;}
.qbank-source-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.qbank-source-type{font-size:9px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:8px;font-weight:600;}
.qbank-source-type.text-type{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(88,166,255,.3);}
.qbank-source-type.file-type{background:rgba(245,158,11,.12);color:var(--amber);border:1px solid rgba(245,158,11,.3);}
.qbank-source-actions{display:flex;gap:5px;margin-left:auto;}
.qbank-source-action-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:11px;cursor:pointer;padding:2px 7px;font-weight:600;transition:all .15s;}
.qbank-source-action-btn.edit-btn{color:var(--muted);}
.qbank-source-action-btn.edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.qbank-source-action-btn.del-btn{color:var(--muted);}
.qbank-source-action-btn.del-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.qbank-source-body{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word;}
.qbank-source-file-link{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-size:12.5px;font-weight:500;text-decoration:none;border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:4px 10px;background:rgba(245,158,11,.08);transition:opacity .15s;}
.qbank-source-file-link:hover{opacity:.8;}
.qbank-source-edit-box{width:100%;padding:7px 10px;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:56px;margin-top:6px;}
.qbank-source-edit-box:focus{outline:none;}
.qbank-source-edit-actions{display:flex;gap:6px;margin-top:6px;}
.qbank-add-source{margin-top:10px;}
.qbank-add-source-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;}
.qbank-add-source-textarea{flex:1;min-width:200px;padding:8px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:52px;transition:border-color .15s;}
.qbank-add-source-textarea:focus{outline:none;border-color:var(--accent);}
.qbank-add-source-textarea::placeholder{color:var(--muted);}
.qbank-add-file-label{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s;height:38px;}
.qbank-add-file-label:hover{border-color:var(--amber);color:var(--amber);}
.qbank-add-file-label.has-file{border-color:var(--amber);color:var(--amber);background:rgba(245,158,11,.08);}
.qbank-add-source-btn{padding:8px 16px;border-radius:7px;border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;height:38px;transition:opacity .15s;}
.qbank-add-source-btn:hover{opacity:.8;}
.qbank-file-hint{font-size:10px;color:var(--muted);margin-top:4px;}

/* ── SHARE BUTTON (calendar log items) ── */
.share-btn{background:none;border:1px solid transparent;border-radius:4px;color:var(--muted);cursor:pointer;font-size:10px;padding:2px 6px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.share-btn.shared{color:var(--green);border-color:var(--green);background:var(--green-bg);cursor:default;}

/* ── WARDWISDOM VIEW ── */
.ww-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:10px;transition:border-color .15s;}
.ww-card:hover{border-color:#484f58;}
.ww-card.ww-accent-0{border-left:4px solid var(--purple);background:linear-gradient(90deg,rgba(167,139,250,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-1{border-left:4px solid var(--pink);background:linear-gradient(90deg,rgba(244,114,182,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-2{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-3{border-left:4px solid var(--teal);background:linear-gradient(90deg,rgba(52,211,153,.03) 0%,var(--surface) 25%);}
.ww-card.ww-accent-4{border-left:4px solid var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.03) 0%,var(--surface) 25%);}
.ww-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ww-tag{font-size:10px;background:rgba(167,139,250,.12);border:1px solid var(--purple);color:var(--purple);border-radius:12px;padding:2px 10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.ww-author{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-text{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:14px;font-weight:500;}
.ww-text.ww-truncated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ww-read-more{display:inline;font-size:12px;color:var(--purple);cursor:pointer;font-weight:600;margin-left:4px;}.ww-read-more:hover{text-decoration:underline;}
.ww-verdict{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ww-verdict-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.ww-verdict-btn.true-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.ww-verdict-btn.false-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ww-verdict-btn.voted-true{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.ww-verdict-btn.voted-false{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ww-vote-count{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ww-comment-box{margin-top:10px;width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:58px;transition:border-color .15s;}
.ww-comment-box:focus{outline:none;border-color:var(--red);}
.ww-submit-comment{margin-top:6px;padding:5px 14px;border-radius:6px;border:1px solid var(--red);background:var(--red-bg);color:var(--red);font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.ww-submit-comment:hover{opacity:.8;}
.ww-comments-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ww-comment-item{background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.5;border-left:2px solid var(--border);}
.ww-comment-item .ww-comment-author{font-size:10px;color:var(--purple);font-weight:600;margin-bottom:3px;}

/* ── LEARNLINK VIEW ── */
.ll-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:10px;transition:border-color .15s;}
.ll-card:hover{border-color:#484f58;}
.ll-card.ll-accent-0{border-left:4px solid var(--teal);background:linear-gradient(90deg,rgba(52,211,153,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-1{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-2{border-left:4px solid var(--amber);background:linear-gradient(90deg,rgba(245,158,11,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-3{border-left:4px solid var(--pink);background:linear-gradient(90deg,rgba(244,114,182,.03) 0%,var(--surface) 25%);}
.ll-card.ll-accent-4{border-left:4px solid var(--purple);background:linear-gradient(90deg,rgba(167,139,250,.03) 0%,var(--surface) 25%);}
.ll-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.ll-tag{font-size:10px;background:rgba(88,166,255,.10);border:1px solid var(--accent);color:var(--accent);border-radius:12px;padding:2px 10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.ll-author{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.ll-date{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-left:auto;}
.ll-text{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:12px;font-weight:500;}
.ll-text.ll-truncated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ll-read-more{display:inline;font-size:12px;color:var(--teal);cursor:pointer;font-weight:600;margin-left:4px;}.ll-read-more:hover{text-decoration:underline;}
.ll-source-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--accent);background:rgba(88,166,255,.08);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.ll-source-btn:hover{background:rgba(88,166,255,.18);}
.ll-source-area{margin-top:10px;}
.ll-source-input{width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:58px;transition:border-color .15s;}
.ll-source-input:focus{outline:none;border-color:var(--accent);}
.ll-source-submit{margin-top:6px;padding:5px 14px;border-radius:6px;border:1px solid var(--accent);background:rgba(88,166,255,.10);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.ll-source-submit:hover{opacity:.8;}
.ll-sources-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ll-source-item{background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.5;border-left:2px solid var(--accent);}
.ww-comment-file-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.ww-comment-file-label{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.ww-comment-file-label:hover{border-color:var(--accent);color:var(--accent);}
.ww-comment-file-label.has-file{border-color:var(--amber);color:var(--amber);background:rgba(245,158,11,.08);}
.ww-file-hint{font-size:10px;color:var(--muted);margin-top:3px;}
.ww-comment-attached-file{display:inline-flex;align-items:center;gap:5px;color:var(--amber);font-size:12px;font-weight:500;text-decoration:none;border:1px solid rgba(245,158,11,.3);border-radius:5px;padding:3px 8px;background:rgba(245,158,11,.08);}
.ll-source-file-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.ll-source-file-label{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.ll-source-file-label:hover{border-color:var(--accent);color:var(--accent);}
.ll-source-file-label.has-file{border-color:var(--accent);color:var(--accent);background:rgba(88,166,255,.08);}
.ww-own-comment{border-left:2px solid var(--accent);}
.ww-del-comment-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);margin-left:auto;transition:all .15s;}
.ww-del-comment-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.ll-del-source-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);margin-left:auto;transition:all .15s;}
.ll-del-source-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}

/* ── INLINE EDIT UI ── */
.checklist-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);transition:all .15s;white-space:nowrap;}
.checklist-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.inline-edit-wrap{flex:1;display:flex;flex-direction:column;gap:4px;}
.inline-edit-input{width:100%;padding:6px 10px;background:var(--surface);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;min-height:36px;line-height:1.4;}
.inline-edit-input:focus{outline:none;border-color:var(--accent);}
.inline-edit-actions{display:flex;gap:6px;}
.inline-edit-save{padding:3px 12px;border-radius:5px;border:1px solid var(--green);background:var(--green-bg);color:var(--green);font-size:11px;font-weight:600;cursor:pointer;}
.inline-edit-save:hover{opacity:.85;}
.inline-edit-cancel{padding:3px 12px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;}
.inline-edit-cancel:hover{border-color:var(--red);color:var(--red);}
.ww-edit-btn,.ll-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 8px;color:var(--muted);transition:all .15s;white-space:nowrap;}
.ww-edit-btn:hover{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.08);}
.ll-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(88,166,255,.08);}
.community-edit-textarea{width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--accent);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;resize:vertical;min-height:60px;line-height:1.6;}
.community-edit-textarea:focus{outline:none;border-color:var(--accent);}
.community-edit-actions{display:flex;gap:8px;margin-top:8px;}
.comment-edit-btn{background:none;border:1px solid transparent;border-radius:4px;font-size:10px;cursor:pointer;padding:1px 6px;color:var(--muted);transition:all .15s;}
.comment-edit-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;font-weight:500;transform:translateY(80px);opacity:0;transition:all .25s;z-index:300;max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}

.empty{text-align:center;padding:48px;color:var(--muted);}
.empty-icon{font-size:40px;margin-bottom:12px;}

/* ── MOBILE BOTTOM NAV ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--surface);border-top:1px solid var(--border);padding:6px 0 env(safe-area-inset-bottom,6px);}
.mobile-nav-inner{display:flex;justify-content:space-around;align-items:flex-end;}
.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;cursor:pointer;min-width:52px;border:none;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;transition:color .15s;}
.mobile-nav-btn.active{color:var(--accent);}
.mobile-nav-icon{font-size:20px;line-height:1;}
.mobile-nav-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}

/* ── MOBILE SIDEBAR DRAWER ── */
.mobile-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:180;backdrop-filter:blur(2px);}
.mobile-drawer-overlay.open{display:flex;}
.mobile-drawer{width:280px;background:var(--surface);height:100%;overflow-y:auto;padding:20px 0 40px;transform:translateX(-100%);transition:transform .25s ease;}
.mobile-drawer-overlay.open .mobile-drawer{transform:translateX(0);}
.mobile-drawer-close{position:absolute;top:14px;right:14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:16px;}

/* ── RESPONSIVE BREAKPOINTS ── */
@media(max-width:768px){

  /* Layout */
  .layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .main{padding:14px 14px 80px;}

  /* Header — hide all desktop-only elements */
  header{padding:0 14px;height:52px;}
  .logo-sub{display:none;}
  .logo-credit{font-size:9px;}
  .logo-text{font-size:15px;}
  .logo-mark{width:28px;height:28px;font-size:13px;}
  .user-chip{display:none;}
  .sync-indicator span{display:none;}
  .header-right .btn:not(#mobileMenuBtn){display:none;}
  .header-right{gap:6px;}
  /* Hide non-btn header elements */
  #pipTriggerBtn{display:none!important;}
  #adminDashboardPreviewWrap{display:none!important;}
  #betaBadge{display:none!important;}
  #themeBtn{display:none!important;}

  /* Mobile menu button */
  #mobileMenuBtn{display:flex!important;}

  /* Mobile nav */
  .mobile-nav{display:block;}

  /* Page header */
  .page-header{flex-direction:column;gap:10px;margin-bottom:14px;}
  .page-header > div:last-child{align-items:flex-start;width:100%;}

  /* Tabs → horizontal scroll, no wrap */
  .tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;padding:6px 12px;font-size:12px;}

  /* Search bar */
  .search-bar{width:100%!important;box-sizing:border-box;}
  #searchBarInline{width:100%!important;}

  /* Stats row */
  .stats-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
  .stat-card{padding:10px 10px;}
  .stat-card-val{font-size:20px;}
  .stat-card-label{font-size:10px;}

  /* Procedure cards — stack into mobile card */
  .category-header-row{display:none;}
  .proc-card{
    grid-template-columns:1fr;
    gap:0;
    padding:12px 14px;
    position:relative;
  }
  .proc-card .proc-name{font-size:14px;padding-right:40px;margin-bottom:4px;}

  /* Count controls float top-right */
  .count-control{
    position:absolute;
    top:12px;right:14px;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .count-btn{width:26px;height:26px;}
  .count-val{font-size:14px;min-width:auto;}

  /* Traffic light row */
  .traffic-light{margin-bottom:4px;}

  /* Progress bar full width */
  .proc-progress{width:100%;}
  .progress-bar{height:6px;}

  /* Log button - full width on mobile */
  .log-btn{width:100%;height:34px;border-radius:6px;margin-top:8px;font-size:13px;}
  .log-btn::after{content:' Log entry';}

  /* Inline target */
  .inline-target{font-size:10px;}

  /* Category toggle */
  .category-toggle{padding:10px 12px;}
  .cat-name{font-size:11px;}

  /* Calendar */
  .calendar-wrapper{grid-template-columns:1fr;gap:14px;}
  .calendar-rail{gap:12px;}
  .calendar-card{padding:14px;}
  .cal-day{height:38px;min-height:38px;font-size:12px;}
  .log-sidebar{position:static;top:auto;}

  /* Modal */
  .modal-overlay{align-items:flex-end;}
  .modal{
    width:100%!important;
    max-width:100%!important;
    border-radius:16px 16px 0 0;
    padding:20px 18px 32px;
    transform:translateY(30px);
    max-height:90vh;
    overflow-y:auto;
  }
  .modal-overlay.open .modal{transform:translateY(0);}
  .modal-actions{
    justify-content:stretch;
    gap:10px;
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }
  .modal-actions .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-danger,
  .modal-actions .btn-full{
    flex:1 1 140px;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
  }
  .pw-toggle{
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .proc-grid{grid-template-columns:1fr;}

  /* MCQ card */
  .mcq-card{padding:16px;margin-top:16px;}
  .mcq-stem{font-size:13.5px;}

  /* History */
  .history-item{flex-wrap:wrap;gap:6px;}

  /* Toast */
  .toast{bottom:80px;left:14px;right:14px;max-width:none;text-align:center;}

  /* QBank filter row */
  #qbankView > div:first-child{flex-direction:column;align-items:stretch;}
  #qbankView > div:first-child > div:last-child{flex-direction:column;}

  /* WW / LL search row */
  #wwView > div:first-child,
  #wardwisdomView > div:first-child,
  #learnlinkView > div:first-child{flex-direction:column;align-items:stretch;}

  /* Sidebar drawer styles */
  .mobile-drawer-overlay{position:fixed;}

  /* Page title */
  .page-title{font-size:20px;}

  /* Auth card */
  .auth-card{padding:24px 18px;}

  /* ── Log PGY row — stack on mobile ── */
  .log-pgy-row{grid-template-columns:1fr;}

  /* ── OSATS record grid — stack on mobile (override 480px rule) ── */
  .osats-record-grid{grid-template-columns:1fr;}

  /* ── OSATS abbr key grid — 2-col on mobile ── */
  .abbr-key-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* ── OSATS KPI line — relax fixed columns ── */
  .kpi-line{grid-template-columns:26px minmax(36px,44px) 1fr 18px!important;}

  /* ── OSATS ol-grid (outcome level) — 3-col on mobile ── */
  #ol-grid{grid-template-columns:repeat(3,1fr)!important;}

  /* ── OSATS score buttons — slightly smaller ── */
  .osats-score-btn{width:28px;height:28px;font-size:11px;}

  /* ── ISASF score select — full width ── */
  .isasf-score-sel{min-width:0;width:100%;}

  /* ── Roles table — horizontal scroll ── */
  .roles-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .roles-table{min-width:520px;}

  /* ── Dashboard inline grids (rendered via JS) ── */
  /* Insights 2-col stat grid → single col */
  .insights-stat-grid{grid-template-columns:1fr!important;}
  /* Insights 4-col KPI grid → 2-col */
  .insights-kpi-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* ── Dissertation session row ── */
  .diss-session-row{gap:8px;}
  .diss-session-num{width:22px;height:22px;font-size:10px;}
}

@media(max-width:400px){
  .stats-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
  .stats-row .stat-card:last-child{grid-column:1/-1;}
  .tab{font-size:11px;padding:5px 10px;}
}

/* ═══════════════════════════════════════════════
   NEW FEATURES — v5 ENHANCEMENTS
   ═══════════════════════════════════════════════ */

/* ── FLOATING ACTION BUTTON ── */
.fab{position:fixed;bottom:90px;right:20px;z-index:140;width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--green),var(--accent));color:#fff;font-size:28px;font-weight:300;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;line-height:1;}
.fab:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(0,0,0,.4);}
.fab:active{transform:scale(.95);}
@media(min-width:769px){.fab{bottom:28px;right:28px;}}

/* ── MOTIVATION BAR ── */
/* motivation chips — compact inline next to page title */
.motiv-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--surface2);border:1px solid var(--border);color:var(--text);white-space:nowrap;}
.streak-chip{border-color:var(--amber);color:var(--amber);background:var(--amber-bg);}
.goal-chip{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.goal-chip.goal-done{border-color:var(--green);color:var(--green);background:var(--green-bg);}
.srs-chip{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.1);}

/* ── RECENT PROCEDURES ── */
.recent-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.recent-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.recent-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:12px;font-weight:500;color:var(--text);transition:all .15s;font-family:'DM Sans',sans-serif;}
.recent-chip:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);}
.recent-chip-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--surface2);border-radius:10px;padding:1px 6px;color:var(--muted);}

/* ── BATCH LOG ── */
.batch-row{display:flex;gap:8px;align-items:center;}

/* ── INSIGHT CARDS ── */
.insight-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.insight-card-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;font-weight:600;}
.insight-card-val{font-family:'DM Serif Display',serif;font-size:28px;}
.dashboard-role-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);}
.dashboard-preview-chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(88,166,255,.12);border:1px solid rgba(88,166,255,.25);color:var(--accent);font-weight:600;}
.copy-field-host{position:relative;}
.copy-field-enabled{padding-right:42px;}
.copy-field-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease;}
.copy-field-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}

/* ── BADGES ── */
.badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:60px;padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);opacity:.4;transition:all .2s;}
.badge-item.unlocked{opacity:1;border-color:var(--amber);background:var(--amber-bg);}
.badge-emoji{font-size:20px;}
.badge-label{font-size:8px;text-align:center;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;line-height:1.3;}
.badge-item.unlocked .badge-label{color:var(--text);}

/* ── HEATMAP ── */
.heatmap-wrap{display:flex;gap:6px;overflow-x:auto;padding:4px 0;margin-top:8px;}
.heatmap-days{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:var(--muted);padding:2px 0;min-width:28px;}
.heatmap-grid{display:flex;gap:3px;}
.heatmap-col{display:flex;flex-direction:column;gap:3px;}
.heatmap-cell{width:12px;height:12px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);}
.heatmap-cell.level-0{background:var(--surface2);}
.heatmap-cell.level-1{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.3);}
.heatmap-cell.level-2{background:rgba(34,197,94,.4);border-color:rgba(34,197,94,.5);}
.heatmap-cell.level-3{background:rgba(34,197,94,.6);border-color:rgba(34,197,94,.7);}
.heatmap-cell.level-4{background:var(--green);border-color:var(--green);}
.heatmap-cell.level-future{background:transparent;border-color:transparent;}
.heatmap-legend{display:flex;align-items:center;gap:4px;margin-top:8px;}

/* ── ONBOARDING ── */
.onboard-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;}
.onboard-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:420px;width:100%;text-align:center;}
.onboard-step{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.onboard-title{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:8px;}
.onboard-text{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px;}
.onboard-actions{display:flex;gap:10px;justify-content:center;}

/* ── MOBILE RESPONSIVE ADDITIONS ── */
@media(max-width:768px){
  .fab{bottom:78px;right:14px;width:50px;height:50px;font-size:24px;}
  .motiv-chip{font-size:10px;padding:2px 7px;}
  .recent-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .recent-chips::-webkit-scrollbar{display:none;}
  .recent-chip{flex-shrink:0;}
  .heatmap-cell{width:10px;height:10px;}
  .badge-item{width:52px;padding:6px 2px;}
  .badge-emoji{font-size:16px;}
  .insight-card-val{font-size:22px;}
  .batch-row{flex-wrap:wrap;}
  .batch-row select{min-width:0;}
}

/* ═══════════════════════════════════════════════
   v6 FEATURES — Rotation, Exam, Competency, Social, Portfolio
   ═══════════════════════════════════════════════ */

/* ── ROTATION PICKER ── */
.rot-pick-item{padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:all .15s;}
.rot-pick-item:hover{border-color:var(--accent);background:var(--accent-bg);}
.rot-pick-item.active{border-color:var(--green);background:var(--green-bg);}

/* ── ROTATION CURRENT CARD ── */
.rotation-current{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(88,166,255,.03) 0%,var(--surface) 25%);}

/* ── TIMELINE BLOCKS ── */
.timeline-block{padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;min-width:100px;max-width:160px;transition:all .15s;}
.timeline-block:hover{border-color:var(--accent);}
.timeline-block.current{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 2px rgba(88,166,255,.2);}

/* ── TOPIC MASTERY GRID ── */
.mastery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:8px;}
.mastery-cell{padding:10px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);text-align:center;transition:all .15s;}
.mastery-cell.weak{border-color:rgba(255,77,79,.3);background:rgba(255,77,79,.05);}
.mastery-cell.weak:hover{background:rgba(255,77,79,.12);border-color:var(--red);}
.mastery-cell.moderate{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05);}
.mastery-cell.strong{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05);}
.mastery-cell.untested{border-style:dashed;opacity:.6;}
.mastery-cell.untested:hover{opacity:1;border-color:var(--accent);}
.mastery-cell-pct{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;}
.mastery-cell-topic{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ── MOCK EXAM ── */
.mcq-option.selected-active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);}
.mcq-option.selected-active .mcq-opt-letter{border-color:var(--accent);background:var(--accent);color:#0d1117;}

/* ── CONFIDENCE DOTS ── */
.conf-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:all .15s;}
.conf-dot:hover{border-color:var(--accent);transform:scale(1.2);}
.conf-dot.filled{border-color:transparent;}

/* ── STRUGGLES FEED ── */
.struggle-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:8px;transition:border-color .15s;}
.struggle-card:hover{border-color:#484f58;}
.struggle-vote{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;}
.struggle-vote:hover{border-color:var(--pink);color:var(--pink);background:rgba(244,114,182,.08);}
.struggle-vote.voted{border-color:var(--pink);color:var(--pink);background:rgba(244,114,182,.12);cursor:default;}

/* ── MOBILE RESPONSIVE v6 ── */
@media(max-width:768px){
  .mastery-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
  .mastery-cell{padding:8px 6px;}
  .mastery-cell-pct{font-size:12px;}
  .timeline-block{min-width:80px;max-width:120px;padding:6px 8px;}
  .conf-dot{width:12px;height:12px;}
  .rot-pick-item{padding:8px 10px;}
}

/* ── COLLAPSIBLE SIDEBAR LABELS ── */
.sidebar-label-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:color .15s;}
.sidebar-label-toggle:hover{color:var(--text);}
.sb-chevron{font-size:10px;color:var(--muted);transition:transform .2s;}

/* ═══════════════════════════════════════════════
   v7 FEATURES — MAST, ACGME, Dissertation, Gibbs
   ═══════════════════════════════════════════════ */

/* ── MAST DOCUMENT ── */
.mast-doc{transition:border-color .15s;}
.mast-obj-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.mast-obj-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0;margin-top:3px;}
.mast-obj-row label{cursor:pointer;}

/* ── DISSERTATION TIMELINE ── */
.diss-milestone{display:flex;gap:12px;cursor:pointer;padding:4px 0;transition:background .15s;border-radius:6px;}
.diss-milestone:hover{background:var(--surface2);}
.diss-milestone-marker{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0;padding-top:4px;}
.diss-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--surface);transition:all .2s;flex-shrink:0;}
.diss-dot.completed{background:var(--green);border-color:var(--green);}
.diss-dot.current{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.2);}
.diss-line{width:2px;flex:1;background:var(--border);margin:4px 0;min-height:16px;}
.diss-milestone.done .diss-line{background:var(--green);}
.diss-milestone-content{flex:1;padding-bottom:12px;}

/* ── GIBBS REFLECTIVE INPUT ── */
.gibbs-input{transition:border-color .15s;}
.gibbs-input:focus{border-left-width:3px;}

/* ── ACGME DOMAIN CARDS ── */
@media(max-width:768px){
  .diss-milestone{padding:2px 0;}
  .diss-dot{width:12px;height:12px;}
  .mast-obj-row label{font-size:12px;}
}

/* ═══════════════════════════════════════════════
   v8 — GROUPED TABS & MOBILE OPTIMIZATION
   ═══════════════════════════════════════════════ */

/* ── SUB-TABS (color-themed per group) ── */
.sub-tabs{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--border);padding:3px;border-radius:8px;width:fit-content;flex-wrap:wrap;transition:border-color .2s;}
.sub-tab{padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all .15s;white-space:nowrap;letter-spacing:.2px;}
.sub-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04);}
.sub-tab.active{color:#fff;}

/* Group colors — active sub-tab gets a colored pill */
.sub-tabs-pink{border-color:rgba(244,114,182,.25);}
.sub-tabs-pink .sub-tab.active{background:var(--pink);color:#0d1117;}
.sub-tabs-pink .sub-tab:not(.active){color:var(--pink);}

.sub-tabs-teal{border-color:rgba(52,211,153,.25);}
.sub-tabs-teal .sub-tab.active{background:var(--teal);color:#0d1117;}
.sub-tabs-teal .sub-tab:not(.active){color:var(--teal);}

.sub-tabs-purple{border-color:rgba(167,139,250,.25);}
.sub-tabs-purple .sub-tab.active{background:var(--purple);color:#0d1117;}
.sub-tabs-purple .sub-tab:not(.active){color:var(--purple);}

.sub-tabs-accent{border-color:rgba(88,166,255,.25);}
.sub-tabs-accent .sub-tab.active{background:var(--accent);color:#0d1117;}
.sub-tabs-accent .sub-tab:not(.active){color:var(--accent);}

/* Primary tabs — active tab gets group color underline */
.tabs-pink .tab.active{color:var(--pink);border-bottom:2px solid var(--pink);background:transparent;}
.tabs-teal .tab.active{color:var(--teal);border-bottom:2px solid var(--teal);background:transparent;}
.tabs-purple .tab.active{color:var(--purple);border-bottom:2px solid var(--purple);background:transparent;}
.tabs-accent .tab.active{color:var(--accent);border-bottom:2px solid var(--accent);background:transparent;}

/* ── COMPACT PRIMARY TABS ── */
#primaryTabs{transition:all .2s;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
#primaryTabs::-webkit-scrollbar{display:none;}
#primaryTabs .tab{font-size:12px;padding:7px 12px;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;white-space:nowrap;flex-shrink:0;}

@media(max-width:768px){
  /* Primary tabs scroll horizontal */
  #primaryTabs{width:100%;}
  #primaryTabs .tab{font-size:12px;padding:6px 10px;}
  
  /* Sub-tabs full width scroll */
  .sub-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;border-radius:6px;}
  .sub-tabs::-webkit-scrollbar{display:none;}
  .sub-tab{font-size:11px;padding:5px 12px;flex-shrink:0;}

  /* Search bar full width */
  #searchBarInline{width:100%!important;}
  
  /* Page header stack */
  .page-header{flex-direction:column;gap:8px;margin-bottom:12px;}
  .page-header > div:last-child{align-items:stretch;width:100%;}
}

/* ── PER-PROCEDURE HISTORY IN LOG MODAL ── */
.proc-history-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;transition:background .1s;}
.proc-history-row:last-child{border-bottom:none;}
.proc-history-row:hover{background:var(--surface);}

/* ── LIGHT MODE TAB OVERRIDES ── */
[data-theme="light"] .sub-tab.active{color:#fff!important;}
[data-theme="light"] .sub-tab:hover:not(.active){background:rgba(0,0,0,.04);}
[data-theme="light"] .sub-tabs-pink .sub-tab:not(.active){color:var(--pink);}
[data-theme="light"] .sub-tabs-teal .sub-tab:not(.active){color:var(--teal);}
[data-theme="light"] .sub-tabs-purple .sub-tab:not(.active){color:var(--purple);}
[data-theme="light"] .sub-tabs-accent .sub-tab:not(.active){color:var(--accent);}

/* ── LOG HISTORY COLLAPSIBLE TOGGLE ── */
.log-history-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border);cursor:pointer;user-select:none;transition:color .15s;}
.log-history-toggle:hover{color:var(--text);}


/* ─── OVERDUE LEARNING NEEDS PANEL ─── */
.overdue-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.overdue-icon{font-size:20px;animation:overdue-pulse 1.8s ease-in-out infinite;}
@keyframes overdue-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(1.15);}}
@keyframes osatsBlink{0%{opacity:1;}100%{opacity:.45;}}
.overdue-title{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em;flex:1;}
.overdue-count{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;}
#overdueLearningPanel{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:12px 14px;max-height:320px;overflow:auto;}
.overdue-list{display:flex;flex-direction:column;gap:8px;}
.overdue-item{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:7px;padding:9px 11px;}
.overdue-item-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
.overdue-date{font-size:10px;font-weight:600;color:var(--muted);}
.overdue-age{font-size:10px;color:var(--amber);font-weight:600;}
.overdue-age.overdue-critical{color:var(--red);}
.overdue-event-tag{font-size:9px;background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:1px 6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.overdue-item-text{font-size:12px;color:var(--text);line-height:1.45;margin-bottom:6px;cursor:pointer;}
.overdue-read-more{font-size:10px;color:var(--accent);cursor:pointer;margin-left:2px;}
.overdue-item-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.overdue-copy-btn{width:32px;min-width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.overdue-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.overdue-action-btn{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.overdue-action-btn:hover{opacity:.82;}
.overdue-dismiss-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:4px 10px;font-size:11px;color:var(--muted);cursor:pointer;}
.overdue-dismiss-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ─── ACTIONED LEARNING HISTORY ─── */
.actioned-item{border-left:2px solid #34d399;padding:7px 10px;margin-bottom:6px;background:rgba(52,211,153,.05);border-radius:0 6px 6px 0;}
.actioned-item-header{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;}
.actioned-check{color:#34d399;font-size:12px;font-weight:700;}
.actioned-date{font-size:10px;color:var(--muted);font-weight:600;}
.actioned-event-tag{font-size:9px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:#34d399;border-radius:8px;padding:1px 6px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.actioned-item-text{font-size:12px;color:var(--text);line-height:1.45;cursor:pointer;}
.actioned-source{font-size:10px;color:var(--accent);margin-top:3px;}

/* ─── LEARNING NEED TEXT TRUNCATION ─── */
.ln-text{cursor:default;}
.ln-read-more{font-size:10px;color:var(--accent);cursor:pointer;margin-left:2px;}

/* ─── PROCEDURE SUBCATEGORY NESTING ─── */
.proc-nest-group{margin-left:16px;border-left:2px solid var(--border);padding-left:0;}
.proc-card-child{opacity:.92;background:var(--surface2);}
.proc-card-child:hover{background:var(--surface);}
.proc-child-indent{color:var(--muted);font-size:11px;margin-right:2px;}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION PATCH — v10
   Fixes: touch targets, :active states, tap
   feedback, small buttons, scroll issues
   ═══════════════════════════════════════════════ */

/* ── Global touch feedback: :active for all interactive elements ── */
.btn:active,
.btn-primary:active,
.btn-danger:active,
.btn-full:active,
.tab:active,
.sub-tab:active,
.mobile-nav-btn:active,
.sidebar-item:active,
.rot-pick-item:active,
.mcq-option:active,
.ww-verdict-btn:active,
.struggle-vote:active,
.qbank-card:active,
.cal-save-btn:active,
.add-item-btn:active,
.auth-tab:active,
.recent-chip:active,
.mastery-cell:active,
.category-toggle:active,
.ww-card:active,
.insight-card[onclick]:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* Prevent transform flicker on non-touch devices */
@media (hover: hover) {
  .btn:active,
  .tab:active,
  .sub-tab:active,
  .mcq-option:active,
  .recent-chip:active,
  .category-toggle:active {
    transform: none;
    opacity: 1;
  }
}

/* ── Mobile-specific overrides ── */
@media (max-width: 768px) {

  /* ── Touch targets: minimum 44×44px for all tappable elements ── */

  /* Count buttons (were 26px) */
  .count-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* Checkbox — wrap in a larger tap zone */
  .check-box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
  }
  .check-box.checked::after {
    font-size: 13px;
  }

  /* Checklist delete button — too small (was 12px text, ~20px hit area) */
  .checklist-del {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    opacity: 0.7;
    border-radius: 6px;
  }
  .checklist-del:active {
    opacity: 1;
    color: var(--red);
    background: var(--red-bg);
  }

  /* Checklist edit button — too small (was 10px, 1px padding) */
  .checklist-edit-btn {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
  }
  .checklist-edit-btn:active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }

  /* Calendar arrows */
  .cal-arrow {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0 10px;
  }
  .cal-arrow:active {
    background: var(--border);
  }

  /* Calendar days — ensure minimum tap size */
  .cal-day {
    min-height: 36px;
  }
  .cal-day:active:not(.empty) {
    background: var(--surface2);
    border-color: var(--border);
  }

  /* Mobile drawer close button (was 30×30) */
  .mobile-drawer-close {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Mobile nav buttons — slightly taller for thumb reach */
  .mobile-nav-btn {
    min-width: 60px;
    padding: 8px 6px;
  }
  .mobile-nav-btn:active {
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 10px;
  }

  /* Sidebar items */
  .sidebar-item {
    padding: 10px 10px;
    min-height: 44px;
  }
  .sidebar-item:active {
    background: var(--surface2);
  }

  /* Log button (procedure card) */
  .log-btn {
    height: 44px;
    font-size: 14px;
  }

  /* Tabs — taller tap area */
  .tab {
    padding: 8px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .tab:active {
    color: var(--text);
    background: var(--surface2);
  }

  /* Sub-tabs */
  .sub-tab {
    padding: 7px 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .sub-tab:active:not(.active) {
    background: rgba(255,255,255,0.06);
  }

  /* WW verdict buttons */
  .ww-verdict-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
  .ww-verdict-btn:active {
    opacity: 0.75;
  }

  /* Struggle vote */
  .struggle-vote {
    padding: 8px 16px;
  }
  .struggle-vote:active {
    opacity: 0.75;
  }

  /* Auth tabs */
  .auth-tab {
    padding: 10px 8px;
    min-height: 42px;
  }
  .auth-tab:active {
    background: var(--surface2);
  }

  /* Recent procedure chips */
  .recent-chip {
    padding: 8px 14px;
    min-height: 40px;
  }
  .recent-chip:active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
  }

  /* Share buttons (WardWisdom, inline comment) */
  .share-btn {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }
  .share-btn:active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
  }

  /* Q Bank pagination buttons */
  .qbank-pp-btn,
  .qbank-pg-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* MCQ options — already good but ensure :active feedback */
  .mcq-option:active:not(.disabled) {
    border-color: var(--accent);
    background: var(--accent-bg);
  }

  /* Overdue action buttons */
  .overdue-action-btn,
  .overdue-dismiss-btn,
  .overdue-copy-btn {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 38px;
  }

  .copy-field-btn {
    width: 34px;
    height: 34px;
    top: 8px;
    right: 8px;
  }

  /* Cal save button */
  .cal-save-btn {
    padding: 13px;
    font-size: 14px;
  }
  .cal-save-btn:active {
    opacity: 0.8;
  }

  /* Add item button in learning log */
  .add-item-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .add-item-btn:active {
    opacity: 0.8;
  }

  /* ── Inline tiny edit/delete buttons in log modal (Previous Entries) ──
     These render via JS inline style — boost via class if possible,
     but also patch the class-based log history del button             */
  .history-del {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .history-del:active {
    background: var(--red-bg);
    border-color: var(--red);
    color: var(--red);
  }

  /* ── Exam / Foundation dot navigation (were 24×24px) ── */
  /* These are inline-styled in JS — we can't override them directly.
     Target the parent scroll container for better UX */
  .exam-dot-nav,
  .vault-dot-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    gap: 6px !important;
  }
  .exam-dot-nav::-webkit-scrollbar,
  .vault-dot-nav::-webkit-scrollbar {
    display: none;
  }

  /* ── WardWisdom / LearnLink read-more tap target ── */
  .ww-read-more {
    padding: 4px 2px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Rotation pick items ── */
  .rot-pick-item {
    padding: 12px 14px;
    min-height: 48px;
  }
  .rot-pick-item:active {
    border-color: var(--accent);
    background: var(--accent-bg);
  }

  /* ── FAB button active state ── */
  .fab:active {
    transform: scale(0.92);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }

  /* ── Prevent 300ms tap delay on all interactive elements ── */
  a, button, [role="button"],
  .tab, .sub-tab, .mobile-nav-btn,
  .sidebar-item, .cal-day, .mcq-option,
  .check-box, .checklist-del, .checklist-edit-btn,
  .recent-chip, .rot-pick-item, .category-toggle,
  .ww-verdict-btn, .struggle-vote, .share-btn,
  .add-item-btn, .cal-save-btn, .log-btn, .fab,
  .overdue-action-btn, .overdue-dismiss-btn, .overdue-copy-btn {
    touch-action: manipulation;
  }

  /* ── Prevent text selection on tap for interactive UI elements ── */
  .tab, .sub-tab, .mobile-nav-btn, .category-toggle,
  .recent-chip, .cal-day, .check-box, .sidebar-item,
  .mcq-option, .ww-verdict-btn, .struggle-vote,
  .mastery-cell, .rot-pick-item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* ── Scroll performance ── */
.main,
.modal,
.mobile-drawer,
.recent-chips,
.sub-tabs,
.tabs {
    -webkit-overflow-scrolling: touch;
  }

  /* ── Input / form usability on mobile ── */
  .form-input,
  textarea,
  select {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  /* ── Modal bottom-sheet: ensure it clears the keyboard ── */
  .modal {
    max-height: 85vh;
    padding-bottom: env(safe-area-inset-bottom, 24px);
  }

  /* ── Progress / history tiny edit+delete buttons (inline-styled in JS) ──
     Boost the container so children get more breathing room               */
  .proc-history-row {
    min-height: 44px;
    padding: 10px 10px;
    gap: 8px;
  }

  /* ── Category toggle — ensure full-width tap area ── */
  .category-toggle {
    min-height: 48px;
  }
  .category-toggle:active {
    background: #2d333b;
  }

  /* ── Checklist item rows — enough height for checkbox + buttons ── */
  .checklist-item {
    min-height: 44px;
    align-items: flex-start;
  }
  /* On mobile the inner text+button row should wrap: text takes full width,
     buttons drop to a second line below the text */
  .checklist-item > div > div:first-child {
    flex-wrap: wrap;
  }
  .checklist-item .ln-text,
  .checklist-item .check-text {
    flex: 1 1 100%;
    min-width: 120px;
  }
}

/* Compact community cards */
.ww-tag{display:none;}
.ww-card,
.ll-card{
  padding:12px 14px;
  max-width:920px;
}
.ww-card-header,
.ll-card-header{
  margin-bottom:6px;
}
.ww-compact-meta,
.ll-compact-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.ww-compact-row,
.ll-compact-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.ww-compact-text,
.ll-compact-text{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0;
}
.ww-inline-actions,
.ll-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}
.ww-inline-verdict{
  gap:6px;
  flex-wrap:nowrap;
}
.ww-verdict-btn{
  padding:4px 10px;
  font-size:11px;
}
.ll-source-btn.ll-inline-btn{
  padding:4px 10px;
  font-size:11px;
}
.ww-read-more,
.ll-read-more{
  margin-left:0;
  font-size:11px;
  white-space:nowrap;
}
.ww-text,
.ll-text{
  margin-bottom:0;
}
@media (max-width: 900px){
  .ww-card,
  .ll-card{
    max-width:none;
  }
}
@media (max-width: 680px){
  .ww-compact-row,
  .ll-compact-row{
    flex-direction:column;
    align-items:stretch;
  }
  .ww-inline-actions,
  .ll-inline-actions{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .ww-inline-verdict{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

/* ── Also boost tiny inline buttons on all screen sizes ──
   These classes appear in both mobile and desktop JS renders  ── */
.btn[style*="font-size:10px"],
.btn[style*="font-size: 10px"] {
  min-height: 32px;
  vertical-align: middle;
}

/* OSATS */
.osats-pgy-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 8px; padding: 10px 14px;
  margin-bottom: 14px; cursor: pointer; font-size: 13px;
  color: var(--purple); transition: opacity .15s;
}
.osats-pgy-bar:hover { opacity: .8; }
.osats-sup-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--amber-bg, rgba(245,158,11,.08));
  border: 1px solid var(--amber); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.osats-filter-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.osats-filter-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap;
  font-family: var(--font, inherit);
}
.osats-filter-btn.active, .osats-filter-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.osats-entry-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; margin-bottom: 10px;
  transition: box-shadow .15s, border-color .15s; cursor: pointer;
}
.osats-entry-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: var(--accent); }
.osats-entry-card-compact{padding:10px 12px;}
.osats-entry-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.osats-entry-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.osats-entry-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); flex-wrap:wrap; }
.osats-entry-actions .btn{min-height:36px;}
.osats-chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px; font-size: 11px; color: var(--muted);
}
.osats-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.osats-status-badge.pending {
  background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid var(--amber);
}
.osats-status-badge.signed {
  background: rgba(34,197,94,.1); color: var(--green); border: 1px solid var(--green);
}
.osats-record-info {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
}
.osats-record-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px;
}
.osats-record-label {
  display: block; font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.osats-eval-signed {
  background: rgba(34,197,94,.06); border: 1px solid var(--green);
  border-radius: 10px; padding: 16px; margin-top: 14px;
}
.osats-sig-block {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; margin-top: 12px;
}
.osats-score-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font, inherit);
}
.osats-score-btn:hover { border-color: var(--accent); color: var(--accent); }
.osats-score-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osats-score-btn.uc.active { background: var(--muted); color: #fff; border-color: var(--muted); }
.osats-ol-btn {
  padding: 8px 6px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface2);
  color: var(--muted); cursor: pointer; text-align: center;
  line-height: 1.3; transition: all .15s;
  font-family: var(--font, inherit);
}
.osats-ol-btn:hover { border-color: var(--accent); color: var(--accent); }
.osats-ol-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.osats-empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.osats-pgy-group{margin-top:14px;}
.osats-pgy-group-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text);}
.osats-pgy-group-title span{font-size:11px;color:var(--muted);font-weight:600;}
.osats-queue-card{margin-bottom:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.osats-queue-card[open]{border-color:var(--accent);}
.osats-queue-summary{list-style:none;display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;}
.osats-queue-summary::-webkit-details-marker{display:none;}
.osats-queue-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;}
.osats-queue-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.osats-queue-body{padding:0 12px 12px;}
.osats-queue-chev{font-size:14px;color:var(--muted);transition:transform .15s ease;}
.osats-queue-card[open] .osats-queue-chev{transform:rotate(90deg);}
.aku-export-masthead{text-align:center;margin:0 0 14px;}
.aku-export-logo{width:78px;height:78px;margin:0 auto 8px;}
.aku-export-logo svg{width:100%;height:100%;display:block;}
.aku-export-university{font-size:15px;font-weight:800;letter-spacing:.12em;}
.aku-export-school{font-size:11px;margin-top:2px;color:#374151;letter-spacing:.08em;text-transform:uppercase;}
.aku-export-title{font-size:18px;font-weight:800;margin-top:10px;}
.aku-export-subtitle{font-size:11px;margin-top:4px;color:#374151;line-height:1.5;}
.log-pgy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-overlay#signerPinLockOverlay .modal{box-shadow:0 18px 60px rgba(0,0,0,.5);}

/* Roles */
.role-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.role-chip-procedure { background: rgba(59,130,246,.12); color: #3b82f6; }
.role-chip-academic { background: rgba(139,92,246,.12); color: var(--purple); }
.role-chip-dissertation { background: rgba(20,184,166,.12); color: var(--teal); }
.role-chip-pd { background: rgba(245,158,11,.12); color: var(--amber); }
.roles-table tr:hover td { background: var(--surface2); }
.roles-table td, .roles-table th { border-bottom: 1px solid var(--border); }
.roles-table tr:last-child td { border-bottom: none; }
.asgn-year-header {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.pd-sidebar-badge {
  font-size: 10px; background: var(--purple); color: #fff;
  border-radius: 10px; padding: 1px 6px; font-weight: 700;
  margin-left: auto;
}

/* Dissertation session log */
.diss-session-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.diss-session-row:last-child { border-bottom: none; }
.diss-session-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; margin-top: 2px;
}
.diss-session-body { flex: 1; min-width: 0; }
.diss-session-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.diss-session-date { font-size: 12px; font-weight: 600; color: var(--text2); }
.diss-session-dur {
  font-size: 11px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
}
.diss-session-purpose,
.diss-session-outcome,
.diss-session-sups {
  font-size: 12px; color: var(--text2); line-height: 1.5;
  margin-bottom: 3px;
}
.diss-session-purpose strong,
.diss-session-outcome strong,
.diss-session-sups strong { color: var(--text); }

/* ISASF */
.isasf-info-val {
  font-size: 13px; color: var(--text);
  padding: 8px 12px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 6px;
  line-height: 1.4;
}
.isasf-score-sel { min-width: 180px; }
.isasf-score-display { display: inline-flex; align-items: center; gap: 6px; }
#isasf-form-modal tbody tr:hover td { background: var(--surface2); }
#isasf-decision-group label:hover { background: var(--surface2) !important; }

@media (max-width: 480px) {
  .osats-record-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUTY ROTA MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.rota-wrap { padding: 16px 0 60px; max-width: 100%; }

/* ── Header ── */
.rota-header { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rota-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.rota-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rota-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

/* ── Status badges ── */
.rota-status-badge { display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; letter-spacing: .3px; }
.rota-status-draft         { background: var(--amber-bg); color: var(--amber); }
.rota-status-chief_reviewed { background: var(--accent-bg); color: var(--accent); }
.rota-status-pending_pd    { background: var(--accent-bg); color: var(--accent); }
.rota-status-approved,
.rota-status-published     { background: var(--green-bg); color: var(--green); }
.rota-status-chief_pending { background: var(--amber-bg); color: var(--amber); }
.rota-status-pd_pending    { background: var(--accent-bg); color: var(--accent); }
.rota-status-pd_approved   { background: var(--green-bg); color: var(--green); }
.rota-status-chief_declined,
.rota-status-pd_declined   { background: var(--red-bg); color: var(--red); }
.rota-status-withdrawn     { background: var(--surface2); color: var(--muted); }

/* ── Month picker ── */
.rota-month-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.rota-month-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--muted); cursor: pointer; font-size: 11px;
  font-weight: 500; text-align: center; line-height: 1.4; position: relative;
  transition: border-color .15s, background .15s; min-width: 44px; }
.rota-month-btn:hover { border-color: var(--accent); color: var(--text); }
.rota-month-btn.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.rota-month-btn.has-rota { border-color: var(--teal); }
.rota-month-dot { display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); margin: 2px auto 0; }

/* ── Banners ── */
.rota-banner { padding: 9px 12px; border-radius: 7px; font-size: 12px;
  margin-bottom: 10px; line-height: 1.5; }
.rota-banner-warn    { background: var(--amber-bg); color: var(--amber); }
.rota-banner-info    { background: var(--accent-bg); color: var(--accent); }
.rota-banner-success { background: var(--green-bg); color: var(--green); }

/* ── Action buttons ── */
.rota-btn-ai      { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.rota-btn-submit  { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.rota-btn-approve { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.rota-btn-decline { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* ── Grid layout (matrix + timeline side panel) ── */
.rota-grid-wrap { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.rota-grid-inner { display: flex; min-height: 0; }
.rota-grid-mobile-stack{display:flex;flex-direction:column;}
.rota-matrix-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.rota-matrix-pane-mobile{display:block;overflow:visible;}
.rota-table-scroll { overflow: auto; max-height: 600px; }
.rota-table-scroll-mobile-safe{width:100%;min-width:100%;min-height:260px;}

/* ── Timeline side panel ── */
.rota-timeline-pane { width: 220px; flex-shrink: 0; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--surface); min-height: 200px; }
.rota-timeline-empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px 16px; text-align: center; }
.rota-timeline-empty-icon { width: 38px; height: 38px; border-radius: 50%;
  background: rgba(52,211,153,.1); display: flex; align-items: center; justify-content: center; }
.rota-timeline-hint { font-size: 11px; color: var(--muted); line-height: 1.6; }
.rota-timeline-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.rota-tl-head-row { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 9px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rota-tl-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rota-tl-sub  { font-size: 10px; color: var(--muted); margin-top: 1px; }
.rota-tl-close { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 5px; border-radius: 4px; line-height: 1; flex-shrink: 0; }
.rota-tl-close:hover { background: var(--surface2); color: var(--text); }
.rota-timeline-scroll { flex: 1; overflow-y: auto; }
.rota-tl-week { border-bottom: 1px solid var(--border); }
.rota-tl-week-head { font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); padding: 5px 12px 3px;
  background: var(--surface2); display: flex; justify-content: space-between; align-items: center; }
.rota-tl-day-row { display: flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-bottom: 0.5px solid var(--border); }
.rota-tl-day-row:last-child { border-bottom: none; }
.rota-tl-dow  { font-size: 9px; color: var(--muted); width: 22px; flex-shrink: 0; }
.rota-tl-date { font-size: 11px; font-weight: 600; width: 18px; flex-shrink: 0; color: var(--text); }
.rota-tl-shift { flex: 1; }
.rota-tl-off  { font-size: 9px; color: var(--muted); font-style: italic; }
.rota-timeline-footer { padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--surface2); flex-shrink: 0; }
.rota-tl-stats { display: flex; justify-content: space-between; margin-bottom: 5px; }
.rota-tl-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rota-tl-stat span { font-size: 9px; color: var(--muted); }
.rota-tl-stat strong { font-size: 12px; font-weight: 600; color: var(--text); }
.rota-tl-bar-track { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rota-tl-bar-fill  { height: 100%; border-radius: 3px; transition: width .4s; }

/* ── Filters ── */
.rota-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px;
  border-bottom: 1px solid var(--border); }
.rota-filter-btn { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
  transition: all .15s; }
.rota-filter-btn:hover,
.rota-filter-btn.active { border-color: var(--teal); background: rgba(52,211,153,.1); color: var(--teal); }

/* ── Legend ── */
.rota-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border); }
.rota-legend-item { display: flex; align-items: center; }

/* ── Table — frozen column ── */
.rota-table { width: max-content; min-width: 100%; border-collapse: separate;
  border-spacing: 0; font-size: 11px; }

/* Column headers — sticky top */
.rota-th { padding: 6px 8px; font-size: 10px; font-weight: 600;
  text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  background: #085041; color: #9FE1CB;
  border-right: 0.5px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.15); }
[data-theme="light"] .rota-th { background: #085041; color: #9FE1CB; }

/* Date column header — sticky top + left */
.rota-th-frozen { position: sticky; left: 0; top: 0; z-index: 4;
  background: #04342C !important; color: #9FE1CB !important;
  border-right: 2px solid rgba(255,255,255,.2) !important; min-width: 96px; }

/* Body cells */
.rota-td { padding: 4px 7px; border-bottom: 0.5px solid var(--border);
  border-right: 0.5px solid var(--border); vertical-align: top; min-width: 80px;
  background: var(--surface); }
.rota-td:last-child { border-right: none; }
.rota-td-editable { cursor: pointer; transition: background .1s; }
.rota-td-editable:hover { background: rgba(52,211,153,.08); }
.rota-cell { display: flex; flex-wrap: wrap; gap: 2px; }

/* Date column body cell — sticky left */
.rota-td-frozen { position: sticky; left: 0; z-index: 1;
  background: var(--surface); border-right: 2px solid var(--border); min-width: 96px; }
.rota-td-today { background: rgba(52,211,153,.08) !important;
  border-left: 2px solid var(--teal); }

/* Date cell content */
.rota-date-dow { display: block; font-size: 9px; color: var(--muted); }
.rota-date-num { display: block; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.rota-holiday-tag { display: block; font-size: 9px; color: var(--amber); font-weight: 600;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row types */
.rota-row-weekend td { background: var(--surface2); }
.rota-row-weekend td.rota-td-frozen { background: var(--surface2); }
.rota-row-holiday td { background: rgba(245,158,11,.06); }
.rota-row-holiday td.rota-td-frozen { background: rgba(245,158,11,.1); }
.rota-row-today td { background: rgba(52,211,153,.04); }
.rota-row-mine td { }
.rota-row-mine td.rota-td-frozen { border-left: 2px solid var(--teal); }

/* ── Chips ── */
.rota-chip { display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 4px; white-space: nowrap; cursor: pointer; border: 0.5px solid transparent;
  transition: opacity .15s, transform .1s; font-weight: 500; line-height: 1.7; }
.rota-chip:hover { opacity: .8; transform: scale(1.04); }
.rota-chip-night     { background: rgba(163,45,45,.15); color: var(--red); border-color: var(--red); }
.rota-chip-day       { background: rgba(15,110,86,.15); color: var(--teal); border-color: var(--teal); }

@media (max-width: 768px) {
  .modal-mobile-safe{padding-bottom:18px;}
  .modal-actions-sticky{
    margin:18px -18px -18px;
    padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border);
    border-radius:0 0 16px 16px;
  }
  .bug-report-modal .modal-subtitle,
  .bug-admin-modal .modal-subtitle{margin-bottom:12px;}
  .bug-admin-card{padding:12px 10px;}
  .bug-admin-actions .btn{flex:1 1 120px;min-height:42px;}
  .osats-modal .osats-record-info,
  .osats-modal .osats-sig-block{padding:12px;}
  .osats-modal .osats-entry-actions .btn,
  .osats-modal .osats-queue-body .btn{flex:1 1 130px;min-height:42px;}
  .osats-modal .osats-queue-summary{padding:10px 12px;align-items:flex-start;}
  .osats-modal .osats-queue-title{font-size:12.5px;}
  .osats-modal .osats-score-btn{
    width:42px;
    height:42px;
    font-size:13px;
  }
  .osats-modal .osats-ol-btn{
    min-height:58px;
    padding:10px 6px;
  }
  .osats-modal table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .osats-modal table tbody{display:block;min-width:460px;}
}
.rota-chip-24h       { background: rgba(83,74,183,.15); color: var(--purple); border-color: var(--purple); }
.rota-chip-theatre   { background: rgba(153,53,86,.15); color: var(--pink); border-color: var(--pink); }
.rota-chip-ward      { background: rgba(133,79,11,.12); color: var(--amber); border-color: var(--amber); }
.rota-chip-leave     { background: rgba(245,158,11,.12); color: var(--amber); border-color: var(--amber); }
.rota-chip-off       { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.rota-chip-outreach  { background: rgba(52,211,153,.12); color: var(--teal); border-color: var(--teal); }
.rota-chip-special   { background: var(--surface2); color: var(--muted); border-color: var(--border); font-style: italic; }
.rota-chip-consultant { background: var(--surface2); color: var(--text); border-color: var(--border); font-weight: 600; }
.rota-chip-instructor { background: rgba(52,211,153,.1); color: var(--teal); border-color: var(--teal); }
.rota-chip-mine     { box-shadow: 0 0 0 2px var(--teal); }
.rota-chip-dimmed   { opacity: .2; }
.rota-chip-selected { outline: 2px solid var(--text); outline-offset: 1px; }

/* ── Empty state ── */
.rota-empty { padding: 60px 24px; text-align: center; color: var(--muted); }

/* ── Panels ── */
.rota-panels { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 900px) { .rota-panels { grid-template-columns: 1fr 1fr; gap: 10px; } }
.rota-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; }
.rota-panel-title { font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rota-inbox-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--red);
  color: #fff; font-size: 10px; font-weight: 700; padding: 0 4px; }

/* ── Duty hours bars ── */
.rota-hours-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rota-hours-stat { flex: 1; min-width: 70px; background: var(--surface2);
  border-radius: 7px; padding: 6px 8px; text-align: center; }
.rota-hours-num { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.rota-hours-num.rota-hours-warn { color: var(--amber); }
.rota-hours-label { font-size: 10px; color: var(--muted); }
.rota-hours-bars { position: relative; display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.rota-hours-bar-row { display: flex; align-items: center; gap: 8px; }
.rota-hours-bar-label { font-size: 11px; color: var(--muted); min-width: 52px; text-align: right; }
.rota-hours-bar-track { flex: 1; height: 14px; background: var(--surface2);
  border-radius: 3px; position: relative; overflow: visible; }
.rota-hours-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.rota-hours-bar-val { position: absolute; right: -30px; top: 0; font-size: 10px;
  color: var(--muted); white-space: nowrap; }

/* ── AI assistant ── */
.rota-ai-chat { height: 180px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 10px; padding: 8px; background: var(--surface2);
  border-radius: 7px; border: 1px solid var(--border); }
.rota-ai-msg { font-size: 12px; line-height: 1.5; padding: 6px 9px;
  border-radius: 6px; max-width: 90%; }
.rota-ai-msg-user   { background: var(--accent-bg); color: var(--accent); align-self: flex-end; }
.rota-ai-msg-ai     { background: var(--surface); color: var(--text); border: 1px solid var(--border); align-self: flex-start; }
.rota-ai-msg-system { color: var(--muted); font-size: 11px; font-style: italic; align-self: flex-start; }
.rota-ai-input-row  { display: flex; gap: 8px; }
.rota-ai-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface2); color: var(--text);
  font-size: 12px; font-family: 'DM Sans', sans-serif; }
.rota-ai-input:focus { outline: none; border-color: var(--accent); }
.rota-ai-patch-preview { margin-top: 8px; padding: 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 7px; font-size: 12px; }

/* ── Request cards ── */
.rota-request-card { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 13px; margin-bottom: 8px; }
.rota-request-card:last-child { margin-bottom: 0; }
.rota-request-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.rota-request-input{min-width:180px;}
.rota-request-btn{min-height:38px;}

/* ── Form elements ── */
.rota-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.rota-input { width: 100%; padding: 8px 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 7px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 13px; transition: border-color .15s; }
.rota-input:focus { outline: none; border-color: var(--accent); }

/* ── Modal ── */
.rota-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rota-modal { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto; display: flex; flex-direction: column; }
.rota-modal-header { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text); }
.rota-modal-close { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.rota-modal-close:hover { background: var(--surface2); color: var(--text); }
.rota-modal-body   { padding: 16px; flex: 1; }
.rota-modal-footer { display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border); }

/* ── Mobile ── */
@media (max-width: 640px) {
  .rota-wrap{padding:12px 0 44px;}
  .rota-header{margin-bottom:12px;}
  .rota-header-actions{width:100%;justify-content:stretch;}
  .rota-header-actions .btn{flex:1 1 140px;min-height:42px;}
  .rota-grid-inner{
    display:flex !important;
    flex-direction:column !important;
    min-height:auto;
  }
  .rota-matrix-pane{
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    flex:none !important;
    overflow:visible !important;
  }
  .rota-month-picker{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin:0 -4px 12px;
    padding-left:4px;
    padding-right:4px;
  }
  .rota-month-btn{flex:0 0 auto;min-width:58px;}
  .rota-grid-wrap{border-radius:12px;}
  .rota-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px;
    gap:8px;
    scrollbar-width:none;
  }
  .rota-filters::-webkit-scrollbar{display:none;}
  .rota-filter-btn{
    flex:0 0 auto;
    min-height:36px;
    padding:6px 12px;
    white-space:nowrap;
  }
  .rota-legend{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:8px 10px 10px;
  }
  .rota-legend::-webkit-scrollbar{display:none;}
  .rota-legend-item{flex:0 0 auto;}
  .rota-table { font-size: 10px; }
  .rota-table-scroll{
    display:block;
    width:100%;
    min-width:100%;
    min-height:260px;
    max-height:none;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #rotaMainTable{
    display:table !important;
    width:max-content;
    min-width:100%;
  }
  .rota-th, .rota-td { padding: 4px 6px; }
  .rota-th-frozen,
  .rota-td-frozen{min-width:76px;}
  .rota-td{min-width:72px;}
  .rota-chip {
    font-size: 9px;
    padding: 2px 5px;
    min-height:22px;
    display:inline-flex;
    align-items:center;
  }
  .rota-title { font-size: 15px; }
  .rota-panels { grid-template-columns: 1fr; }
  .rota-timeline-pane {
    width:100%;
    order:2;
    border-left:none;
    border-top:1px solid var(--border);
    min-height:0;
    max-height:260px;
  }
  .rota-hours-summary{gap:8px;}
  .rota-hours-stat{min-width:92px;padding:8px 10px;}
  .rota-hours-bar-row{gap:6px;}
  .rota-hours-bar-label{min-width:44px;font-size:10px;}
  .rota-ai-chat{height:160px;}
  .rota-ai-input-row{flex-wrap:wrap;}
  .rota-ai-input{
    min-height:42px;
    font-size:16px;
  }
  .rota-ai-input-row .btn{
    width:100%;
    min-height:42px;
  }
  .rota-request-actions{gap:8px;}
  .rota-request-input{min-width:100%;flex-basis:100%;}
  .rota-request-btn{flex:1 1 140px;min-height:42px;}
  .rota-modal-overlay{padding:0;align-items:flex-end;}
  .rota-modal{
    max-width:100%;
    width:100%;
    border-radius:16px 16px 0 0;
    max-height:92vh;
  }
  .rota-modal-header,
  .rota-modal-body,
  .rota-modal-footer{padding-left:18px;padding-right:18px;}
  .rota-modal-footer{
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .rota-modal-footer .btn{flex:1 1 140px;min-height:44px;}
}
@media (max-width: 480px) {
  .rota-grid-inner { display:flex !important; flex-direction:column !important; }
  .rota-matrix-pane {
    display:block !important;
    width:100% !important;
    min-width:100% !important;
    flex:none !important;
    overflow:visible !important;
  }
  .rota-timeline-pane { width: 100%; border-left: none; border-top: 1px solid var(--border);
    max-height: 280px; }
  .rota-today-bar{padding:8px 10px;font-size:12px;}
  .rota-panel{padding:10px;}
  .rota-panel-title{font-size:12px;line-height:1.4;}
  .rota-ai-msg{max-width:100%;}
}

/* Rota code/name toggle */
.rota-code-toggle { margin-left: auto; border-color: var(--teal) !important; color: var(--teal) !important; }
.rota-code-toggle.active { background: rgba(52,211,153,.1) !important; }

/* ── Today's shift indicators ── */
.rota-today-blink { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0; animation: rotaBlink 1.4s ease-in-out infinite; }
@keyframes rotaBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .rota-today-blink { animation: none; } }
.rota-today-chip { display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 7px; border: 1px solid var(--teal); background: rgba(52,211,153,.08);
  cursor: pointer; transition: background .15s; }
.rota-today-chip:hover { background: rgba(52,211,153,.16); }
.rota-today-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 8px; margin-bottom: 12px; background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25); font-size: 13px; color: var(--text); }
.rota-mobile-today { display: none; }
@media (max-width: 768px) {
  .rota-mobile-today { display: flex; align-items: center; gap: 7px; padding: 8px 16px;
    background: rgba(52,211,153,.08); border-top: 1px solid rgba(52,211,153,.2);
    font-size: 12px; color: var(--text); cursor: pointer; }
  .rota-today-chip { display: none !important; }
}

/* ── Estimator panel (draft only) ── */
.rota-estimator-panel { grid-column: 1 / -1; }
.rota-estimator-body { margin-top: 8px; }

/* ── Analytics dashboard ── */
.rota-analytics-panel { grid-column: 1 / -1; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.rota-analytics-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-bottom: 14px; }
.rota-kpi-card { background: var(--surface2); border-radius: 8px; padding: 10px 12px;
  border: 0.5px solid var(--border); min-height: 88px; display:flex; flex-direction:column; justify-content:space-between; }
.rota-kpi-val  { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 2px; }
.rota-kpi-label { font-size: 11px; color: var(--muted); }
.rota-kpi-sub   { font-size: 10px; color: var(--muted); margin-top: 2px; }
.rota-analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .rota-analytics-two-col { grid-template-columns: 1fr; } }
.rota-analytics-chart-box { background: var(--surface2); border-radius: 8px;
  padding: 12px 14px; border: 0.5px solid var(--border); }
.rota-analytics-chart-title { font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.rota-analytics-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rota-legend-pill { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.rota-legend-pill span { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.rota-heatmap-grid { display: grid; gap: 3px; align-items: center; }
.rota-hours-table-wrap{border:1px solid var(--border);border-radius:8px;background:var(--surface2);padding:6px 6px 2px;}

/* ── Hours table (full breakdown) ── */
.rota-hours-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rota-hours-table th { padding: 4px 6px; text-align: left; font-weight: 600;
  color: var(--muted); font-size: 10px; background: var(--surface2);
  border-bottom: 0.5px solid var(--border); white-space: nowrap; }
.rota-hours-table td { padding: 3px 6px; border-top: 0.5px solid var(--border); vertical-align: middle; }
.rota-name-hint { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 4px; }
.rota-row-over td { background: rgba(255,77,79,.05); }
.rota-row-warn td { background: rgba(245,158,11,.05); }

@media (max-width: 700px) {
  .rota-analytics-panel{
    padding:12px 10px;
    border-radius:12px;
  }
  .rota-analytics-kpi{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-bottom:12px;
  }
  .rota-kpi-card{
    min-height:96px;
    padding:12px 10px;
    border-radius:10px;
  }
  .rota-kpi-val{font-size:24px;}
  .rota-kpi-label{font-size:10px;letter-spacing:.04em;text-transform:uppercase;}
  .rota-kpi-sub{font-size:10px;line-height:1.35;}
  .rota-analytics-chart-box{
    padding:12px 10px;
    border-radius:10px;
  }
  .rota-analytics-chart-title{
    font-size:10px;
    margin-bottom:8px;
  }
  #rota-total-bars,
  #rota-stacked-bars{
    gap:6px !important;
  }
  #rota-total-bars > div,
  #rota-stacked-bars > div{
    gap:8px !important;
    align-items:center !important;
  }
  #rota-total-bars > div > span:first-child,
  #rota-stacked-bars > div > span:first-child{
    width:54px !important;
    text-align:left !important;
    font-size:10px !important;
  }
  #rota-total-bars > div > span:last-child,
  #rota-stacked-bars > div > span:last-child{
    width:34px !important;
    font-size:10px !important;
  }
  .rota-analytics-legend{
    gap:6px;
    margin-top:10px;
  }
  .rota-legend-pill{
    font-size:9.5px;
    padding:4px 6px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border);
  }
  .rota-heatmap-grid{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .rota-donut-wrap{
    flex-direction:column;
    align-items:flex-start !important;
    gap:10px !important;
  }
  .rota-donut-labels{
    width:100%;
  }
  .rota-donut-labels > div{
    justify-content:space-between;
    width:100%;
    padding:4px 0;
    border-bottom:1px solid var(--border);
  }
  .rota-donut-labels > div:last-child{border-bottom:none;}
  #rotaHighlights > div{
    padding:6px 0 !important;
    gap:8px;
  }
  #rotaHighlights > div > span:first-child{
    font-size:10px !important;
    max-width:42%;
    line-height:1.35;
  }
  .rota-hours-table-wrap{
    margin-left:-2px;
    margin-right:-2px;
    padding:4px 4px 2px;
  }
  .rota-hours-table{
    min-width:640px;
    font-size:10px;
  }
  .rota-hours-table th,
  .rota-hours-table td{
    padding:5px 6px;
  }
}

@media (max-width: 420px) {
  .rota-analytics-kpi{
    grid-template-columns:1fr;
  }
  .rota-kpi-card{
    min-height:82px;
  }
  .rota-kpi-val{font-size:22px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   CBL ROTA MODULE STYLES  v2.3.1
   Uses tracker CSS variables for full dark/light theme support
═══════════════════════════════════════════════════════════════════════ */

/* ── Root container ── */
.cbl-root { padding: 0; }

/* ── Sub-navigation tabs ── */
.cbl-subnav {
  display: flex; background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; margin: -28px -32px 0; padding: 0 32px;
}
.cbl-subnav-tab {
  padding: 11px 16px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--muted); white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.cbl-subnav-tab:hover { color: var(--text); }
.cbl-subnav-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ── Quarter bar ── */
.cbl-qbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  margin: 0 -32px; padding: 10px 32px;
  overflow-x: auto;
}
.cbl-qbar-lbl { font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.cbl-qpill {
  padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: var(--surface); color: var(--muted); cursor: pointer; transition: all .13s;
}
.cbl-qpill:hover { border-color: var(--teal); color: var(--teal); }
.cbl-qpill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Toolbar ── */
.cbl-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 0 8px;
  flex-wrap: wrap;
}
.cbl-pill {
  padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 11px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .13s; white-space: nowrap;
}
.cbl-pill:hover { border-color: var(--teal); color: var(--teal); }
.cbl-pill.active { background: rgba(52,211,153,.12); border-color: var(--teal); color: var(--teal); }
.cbl-pill-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.cbl-pill-primary:hover { filter: brightness(1.08); color: #fff; border-color: var(--accent); }
.cbl-pill-teal {
  background: var(--teal); color: var(--bg); border-color: var(--teal); font-weight: 800;
}
.cbl-pill-teal:hover { filter: brightness(1.06); color: var(--bg); border-color: var(--teal); }

/* ── Legend ── */
.cbl-legend {
  display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 0 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.cbl-leg-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); font-weight: 600; }
.cbl-leg-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ── Week header ── */
.cbl-week-hdr { display: flex; align-items: baseline; gap: 8px; padding: 16px 0 6px; }
.cbl-week-num { font-size: 10px; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .8px; }
.cbl-week-range { font-size: 11px; color: var(--muted); }
.cbl-week-hdr--current .cbl-week-num { color: var(--accent); }
.cbl-now-pill {
  font-size: 9px; font-weight: 800; background: var(--accent); color: #fff;
  padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .2px;
}

/* ── Session card ── */
.cbl-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: 10px;
  padding: 12px 14px 12px 16px; margin-bottom: 8px;
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; transition: box-shadow .15s, transform .1s;
  position: relative;
}
.cbl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-1px); }
.cbl-card--far    { border-left-color: var(--amber); }
.cbl-card--drtc   { border-left-color: var(--purple); }
.cbl-card--skills { border-left-color: var(--green); }
.cbl-card--mm     { border-left-color: var(--red); }
.cbl-card--dept   { border-left-color: var(--muted); }
.cbl-card--journal{ border-left-color: var(--accent); }
.cbl-card--cat    { border-left-color: var(--purple); }
.cbl-card--holiday{ border-left-color: var(--border); }
.cbl-card--mine   { border-left-color: var(--amber); background: var(--surface2); }
.cbl-card--blocked{ opacity: .38; pointer-events: none; cursor: default !important; }
.cbl-card--past   { opacity: .72; }

/* Date column */
.cbl-card-date { min-width: 48px; text-align: center; flex-shrink: 0; padding-top: 2px; }
.cbl-date-dow { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cbl-date-day { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.05; letter-spacing: -1px; }
.cbl-date-mon { font-size: 10px; color: var(--muted); font-weight: 600; }

.cbl-card-divider { width: 1px; background: var(--border); align-self: stretch; flex-shrink: 0; }

/* Body */
.cbl-card-body { flex: 1; min-width: 0; }
.cbl-type-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 5px;
}
.cbl-card-topic { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 7px; }
.cbl-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cbl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px;
  font-size: 10px; color: var(--text); font-weight: 500;
}
.cbl-chip--warn {
  background: var(--red-bg); border-color: rgba(255,77,79,.25);
  color: var(--red); font-weight: 600; font-size: 10px;
}
.cbl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cbl-dot--p { background: var(--teal); }
.cbl-dot--f { background: var(--purple); }
.cbl-chip-lbl { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-right: 2px; }

.cbl-card-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cbl-venue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.cbl-venue--virtual  { background: rgba(45,140,255,.12); color: #2D8CFF; }
.cbl-venue--physical { background: var(--green-bg); color: var(--green); }
.cbl-venue--pending  { background: var(--amber-bg); color: var(--amber); font-size: 9px; }
.cbl-venue--pretest  { background: rgba(167,139,250,.12); color: var(--purple); font-size: 9px; font-weight: 700; }
.cbl-blocked-msg { font-size: 9px; color: var(--muted); margin-top: 5px; font-style: italic; }

/* Mine badge */
.cbl-mine-badge {
  position: absolute; top: 8px; right: 10px;
  background: var(--amber); color: var(--bg);
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; letter-spacing: .3px;
}

/* Action column */
.cbl-card-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; align-self: center; }
.cbl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer;
  background: var(--surface2); color: var(--text); transition: all .12s; font-family: inherit;
}
.cbl-btn--zoom   { background: #2D8CFF !important; color: #fff !important; border-color: #2D8CFF !important; }
.cbl-btn--zoom:hover { filter: brightness(1.1); }
.cbl-btn--mcq    { background: rgba(167,139,250,.12); color: var(--purple); border-color: rgba(167,139,250,.3); }
.cbl-btn--ln     { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,.3); }
.cbl-btn--teal   { background: var(--teal); color: var(--bg); border-color: var(--teal); font-weight: 800; }
.cbl-btn--teal:hover { filter: brightness(1.08); }
.cbl-btn--ghost  { background: var(--surface); color: var(--muted); border-color: var(--border); }
.cbl-btn--ghost:hover { border-color: var(--text); color: var(--text); }
.cbl-btn--danger { background: var(--red-bg); color: var(--red); border-color: rgba(255,77,79,.3); }
.cbl-btn--muted  { background: var(--surface2); color: var(--muted); border-color: var(--border); font-size: 10px; }

/* ── Suggestion banner (bottom) ── */
.cbl-suggestion {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; margin-top: 20px; cursor: pointer; transition: border-color .15s;
}
.cbl-suggestion:hover { border-color: var(--teal); }
.cbl-suggestion-text { font-size: 12px; color: var(--muted); flex: 1; line-height: 1.4; }
.cbl-suggestion-text strong { color: var(--text); }

/* ── Overlays ── */
.cbl-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 800; align-items: flex-end; justify-content: center;
}
.cbl-overlay.open { display: flex; }
.cbl-sheet {
  background: var(--surface); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 540px;
  padding: 20px 22px 48px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,.3);
  animation: cblSlideUp .22s cubic-bezier(.2,.8,.4,1);
}
@keyframes cblSlideUp { from { transform: translateY(32px); opacity: 0; } }
.cbl-sheet-handle { width: 34px; height: 3px; background: var(--border); border-radius: 2px; margin: 0 auto 18px; }
.cbl-sheet-close {
  position: absolute; top: 14px; right: 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 50%;
  width: 28px; height: 28px; font-size: 13px; color: var(--muted); cursor: pointer;
}

/* ── Centre modals ── */
.cbl-c-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 900; align-items: center; justify-content: center; padding: 20px;
}
.cbl-c-overlay.open { display: flex; }
.cbl-c-modal {
  background: var(--surface); border-radius: 14px; border: 1px solid var(--border);
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: cblSlideUp .2s cubic-bezier(.2,.8,.4,1);
}

/* ── Detail sheet ── */
.cbl-detail-date  { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.cbl-detail-topic { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 14px; line-height: 1.25; }
.cbl-detail-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cbl-detail-field { background: var(--surface2); border-radius: 8px; padding: 9px 12px; }
.cbl-detail-lbl   { font-size: 9px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.cbl-detail-val   { font-size: 13px; font-weight: 700; color: var(--text); }
.cbl-detail-val--warn { color: var(--red); font-style: italic; }
.cbl-sec-title    {
  font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .8px; padding: 12px 0 7px; border-top: 1px solid var(--border); margin-top: 12px;
}

/* Resident action buttons */
.cbl-rab {
  width: 100%; padding: 12px 14px; border-radius: 9px; border: none;
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  cursor: pointer; transition: filter .12s; text-align: left; font-family: inherit;
}
.cbl-rab:hover { filter: brightness(1.07); }
.cbl-rab-label { font-size: 13px; font-weight: 800; color: #fff; }
.cbl-rab-sub   { font-size: 10px; color: rgba(255,255,255,.7); margin-top: 1px; }
.cbl-rab--zoom    { background: linear-gradient(110deg,#2D8CFF,#1a6fd4); }
.cbl-rab--mcq     { background: linear-gradient(110deg,var(--purple),#7c5cbf); }
.cbl-rab--ln      { background: linear-gradient(110deg,var(--teal),#0a9b5e); }
.cbl-rab--pretest { background: linear-gradient(110deg,var(--accent),#0891b2); }

/* Feedback cards */
.cbl-fb-card {
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.cbl-fb-meta {
  font-size: 10px; color: var(--muted); margin-bottom: 5px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.cbl-fb-body { font-size: 12px; color: var(--text); line-height: 1.45; }
.cbl-fb-tag  {
  padding: 1px 7px; border-radius: 8px; font-size: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; flex-shrink: 0;
}
.cbl-reading-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.cbl-reading-row:last-child { border-bottom: none; }
.cbl-reading-title { font-size: 12px; font-weight: 700; color: var(--text); }
.cbl-reading-meta  { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Pre-test card */
.cbl-pretest-card {
  background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.25);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}

/* SA controls */
.cbl-vt-btn {
  flex: 1; padding: 8px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: 11px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all .13s; font-family: inherit;
}
.cbl-vt-btn.on { border-color: var(--teal); background: rgba(52,211,153,.1); color: var(--teal); }

/* ── Form elements ── */
.cbl-fg { margin-bottom: 12px; }
.cbl-fl { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cbl-input, .cbl-select, .cbl-textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; color: var(--text); background: var(--surface2);
  font-family: inherit; transition: border-color .13s; outline: none;
}
.cbl-input:focus, .cbl-select:focus, .cbl-textarea:focus { border-color: var(--teal); background: var(--surface); }
.cbl-textarea { resize: vertical; min-height: 70px; }
.cbl-tpill {
  padding: 4px 11px; border-radius: 20px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.cbl-tpill.on { background: var(--teal); color: var(--bg); border-color: var(--teal); }
.cbl-sub-pill {
  padding: 3px 9px; border-radius: 12px; border: 1.5px solid var(--border);
  font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.cbl-sub-pill.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.cbl-modal-info { font-size: 10px; color: var(--muted); background: var(--surface2); border-radius: 6px; padding: 7px 9px; margin-bottom: 14px; }
.cbl-inline-btn {
  padding: 8px 14px; border-radius: 7px; border: none;
  background: var(--teal); color: var(--bg); font-size: 11px; font-weight: 800;
  cursor: pointer; align-self: flex-end; white-space: nowrap; font-family: inherit;
}

/* ── MCQ sheet ── */
.cbl-mcq-opt {
  width: 100%; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 12px; font-weight: 500; background: var(--surface); cursor: pointer;
  transition: all .13s; text-align: left; color: var(--text); font-family: inherit;
}
.cbl-mcq-opt:hover:not(:disabled) { border-color: var(--purple); background: rgba(167,139,250,.06); }
.cbl-mcq-opt.correct { border-color: var(--green) !important; background: var(--green-bg) !important; color: var(--green) !important; }
.cbl-mcq-opt.wrong   { border-color: var(--red)   !important; background: var(--red-bg)   !important; color: var(--red)   !important; }
.cbl-mcq-opt.selected{ border-color: var(--purple); background: rgba(167,139,250,.08); color: var(--purple); }
.cbl-mcq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all .2s; display: inline-block; }
.cbl-mcq-dot.active { width: 16px; border-radius: 4px; background: var(--purple); }
.cbl-mcq-dot.done   { background: var(--green); }
.cbl-mcq-nav { padding: 8px 18px; border-radius: 7px; border: none; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.cbl-mcq-nav--prev { background: var(--surface2); color: var(--muted); }
.cbl-mcq-nav--next { background: var(--purple); color: #fff; }

/* ── LN sheet ── */
.cbl-ln-box  { background: var(--surface2); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.cbl-ln-link { background: var(--green-bg); border: 1px solid rgba(34,197,94,.25); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ── Pre-test attempt ── */
.cbl-pretest-stats { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.cbl-stat-pill { background: var(--surface); border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; color: var(--muted); }

/* ── Supervisor pane ── */
.cbl-sup-pane { padding-top: 4px; }
.cbl-reminder { background: var(--red-bg); border: 1px solid rgba(255,77,79,.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
.cbl-fac-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: box-shadow .15s;
}
.cbl-fac-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cbl-fac-card--past { opacity: .72; border-left-color: var(--border); }
.cbl-fac-meta  { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cbl-fac-topic { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.cbl-fac-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cbl-fac-btn {
  padding: 4px 10px; border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--surface2); font-size: 10px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
}
.cbl-fac-btn--fb   { color: var(--teal); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.cbl-fac-btn--read { color: var(--green); border-color: rgba(34,197,94,.3); background: var(--green-bg); }
.cbl-fac-btn--pretest { color: var(--purple); border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.cbl-fac-btn--zoom { background: #2D8CFF; color: #fff; border-color: #2D8CFF; }
.cbl-fac-btn--zoom:hover { filter: brightness(1.08); }

/* ── MCQ Bank pane ── */
.cbl-bank-pane { padding-top: 4px; }
.cbl-bank-search-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.cbl-bank-input {
  width: 100%; padding: 7px 10px 7px 32px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 12px; background: var(--surface2); color: var(--text); outline: none;
  transition: border-color .13s; font-family: inherit;
}
.cbl-bank-input:focus { border-color: var(--teal); }
.cbl-topic-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cbl-topic-pill { padding: 3px 10px; border-radius: 14px; border: 1.5px solid var(--border); font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted); cursor: pointer; transition: all .12s; font-family: inherit; }
.cbl-topic-pill--on { background: var(--purple); color: #fff; border-color: var(--purple); }
.cbl-bank-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--purple);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.cbl-bank-meta { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.cbl-bank-q    { font-size: 13px; color: var(--text); line-height: 1.45; font-weight: 500; }
.cbl-bank-attempt { padding: 4px 10px; border-radius: 6px; border: 1.5px solid rgba(167,139,250,.4); background: rgba(167,139,250,.08); color: var(--purple); font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* ── SA inbox ── */
.cbl-inbox-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s; }
.cbl-inbox-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cbl-inbox-meta { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.cbl-inbox-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.cbl-inbox-type-tag { padding: 1px 6px; border-radius: 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.cbl-inbox-subject { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cbl-inbox-preview { font-size: 11px; color: var(--muted); }

/* ── Upload drop zone ── */
.cbl-upload-drop {
  border: 2px dashed var(--border); border-radius: 10px; padding: 28px 20px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  margin-bottom: 12px;
}
.cbl-upload-drop:hover, .cbl-upload-drop.active { border-color: var(--teal); background: rgba(52,211,153,.05); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .cbl-subnav { margin: -14px -14px 0; padding: 0 14px; }
  .cbl-qbar   { margin: 0 -14px; padding: 10px 14px; }
  .cbl-detail-grid { grid-template-columns: 1fr 1fr; }

  /* Card: keep horizontal flow, compress date col, actions wrap below body */
  .cbl-card { flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 12px; }
  .cbl-card-date { min-width: 38px; }
  .cbl-date-day { font-size: 18px; }
  .cbl-card-topic { font-size: 12px; }
  .cbl-card-body { flex: 1; min-width: 0; }

  /* Chips: stay horizontal, single line, ellipsis on overflow */
  .cbl-card-chips { flex-wrap: nowrap; overflow: hidden; max-height: 2.4em; margin-bottom: 4px; }
  .cbl-chip { white-space: nowrap; flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

  /* Actions: full-width row below body, flowing horizontally */
  .cbl-card-actions {
    flex-direction: row; flex-wrap: wrap; gap: 5px;
    width: 100%; margin-left: 46px; align-self: auto;
  }
  .cbl-btn { font-size: 10px; padding: 5px 8px; }

  /* Tags row: stay horizontal */
  .cbl-card-tags { flex-wrap: nowrap; overflow: hidden; }
}

/* ── ACTIONED LEARNING NEEDS RAIL PANEL ──────────────────────────────────── */
.actioned-rail-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px;}
.actioned-rail-header{margin-bottom:0;}
.actioned-rail-body{margin-top:8px;}
.actioned-rail-body.collapsed{display:none;}
.actioned-edit-source-btn{margin-left:auto;font-size:10px;background:none;border:none;color:var(--accent);cursor:pointer;padding:1px 5px;border-radius:4px;line-height:1;}
.actioned-edit-source-btn:hover{background:rgba(var(--accent-rgb),.1);}
.actioned-source-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;font-size:10px;}
.actioned-source-link:hover{opacity:.8;}
.actioned-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:6px;border-top:1px solid var(--border);}
.actioned-pag-btn{font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;}
.actioned-pag-btn:disabled{opacity:.35;cursor:not-allowed;}
.actioned-pag-info{font-size:11px;color:var(--muted);}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — v2.5.2
   Principles:
     • All tappable elements ≥ 44×44px (Apple HIG / WCAG 2.5.5)
     • :active visual feedback on every interactive element
     • iOS auto-zoom prevention (font-size ≥ 16px on inputs)
     • touch-action: manipulation on all buttons (kills 300ms delay)
     • Modals bottom-sheet on mobile (easier thumb reach)
     • Safe-area insets respected throughout
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: touch-action on every interactive element ─────────────── */
button, [role="button"], a, label[for],
.btn, .btn-full, .btn-primary, .btn-danger,
.tab, .sub-tab, .auth-tab,
.mobile-nav-btn, .sidebar-item,
.rota-chip, .rota-filter-btn, .rota-month-btn, .rota-request-btn,
.category-toggle, .cal-day, .mcq-option,
.check-box, .checklist-del, .checklist-edit-btn,
.recent-chip, .rot-pick-item, .ww-verdict-btn, .struggle-vote,
.share-btn, .add-item-btn, .cal-save-btn, .log-btn, .fab,
.count-btn, .history-del, .copy-field-btn, .ww-read-more,
.overdue-action-btn, .overdue-dismiss-btn, .overdue-copy-btn,
.qbank-pp-btn, .qbank-pg-btn, .checklist-item,
.rota-td-editable, .rota-chip, .osats-chip,
.cbl-card, .cbl-action-btn, .cbl-filter-btn,
.insight-card, .recent-chip, .proc-cat-row {
  touch-action: manipulation;
}

/* ── Global: .btn base gets min-height ─────────────────────────────── */
.btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ── Active state feedback (desktop uses hover; mobile needs :active) ─ */
.btn:active          { opacity: .82; transform: scale(.98); }
.btn-primary:active  { opacity: .88; }
.btn-danger:active   { opacity: .88; }

@media (max-width: 768px) {

  /* ── Core button sizing — 44px minimum touch target ─────────────── */
  .btn,
  .btn-full,
  .btn-primary,
  .btn-danger {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
  }

  /* Exception: small inline buttons inside table cells / chips */
  .btn-xs,
  .rota-chip .btn,
  td .btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* ── Count +/- buttons (procedure log) ─────────────────────────── */
  .count-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 8px;
  }

  /* ── Checklist delete/edit — full 44px ─────────────────────────── */
  .checklist-del,
  .checklist-edit-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 15px;
  }

  /* ── History delete button ──────────────────────────────────────── */
  .history-del {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  /* ── Copy-field button ──────────────────────────────────────────── */
  .copy-field-btn {
    width: 40px;
    height: 40px;
  }

  /* ── WardWisdom read-more ───────────────────────────────────────── */
  .ww-read-more {
    min-height: 44px;
    padding: 8px 4px;
  }

  /* ── Rota chips — comfortable tap targets ───────────────────────── */
  .rota-chip {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 28px;    /* chips stay compact but larger than before */
  }
  .rota-chip:active {
    opacity: .7;
    transform: scale(.96);
  }

  /* ── Rota filter buttons ────────────────────────────────────────── */
  .rota-filter-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .rota-filter-btn:active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
  }

  /* ── Rota month picker buttons ──────────────────────────────────── */
  .rota-month-btn {
    min-height: 40px;
    min-width: 64px;
    font-size: 12px;
  }
  .rota-month-btn:active {
    background: var(--surface2);
  }

  /* ── Rota request button ────────────────────────────────────────── */
  .rota-request-btn {
    min-height: 44px;
    font-size: 13px;
  }

  /* ── Rota editable cells — feedback on tap ──────────────────────── */
  .rota-td-editable:active {
    background: var(--accent-bg) !important;
  }

  /* ── Auth form — comfortable padding and sizing ─────────────────── */
  .auth-wrap {
    padding: 16px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .auth-card {
    padding: 24px 20px;
    border-radius: 14px;
    width: 100%;
  }
  .auth-form-title {
    font-size: 20px;
  }

  /* ── Auth inputs and buttons ────────────────────────────────────── */
  .form-input,
  input[type="email"],
  input[type="password"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px;       /* iOS auto-zoom prevention */
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* ── Auth tabs (Login / Register) ───────────────────────────────── */
  .auth-tab {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* ── Modals — bottom-sheet style on mobile ──────────────────────── */
  .modal-overlay {
    align-items: flex-end;       /* anchor to bottom of screen */
    padding-bottom: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* drag handle visual cue */
    border-top: 3px solid var(--border);
  }
  /* Drag handle bar at top of bottom-sheet */
  .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  /* Full-width CTAs inside modals */
  .modal-actions,
  .modal-actions-sticky {
    flex-direction: column;
    gap: 10px;
  }
  .modal-actions .btn,
  .modal-actions-sticky .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-danger {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* ── Mobile nav bottom bar ──────────────────────────────────────── */
  .mobile-nav {
    padding: 4px 0 env(safe-area-inset-bottom, 8px);
  }
  .mobile-nav-btn {
    min-width: 56px;
    min-height: 52px;
    padding: 8px 8px 4px;
    border-radius: 12px;
    font-size: 10px;
    gap: 2px;
  }
  .mobile-nav-btn svg,
  .mobile-nav-btn .nav-icon {
    font-size: 20px;
  }
  .mobile-nav-btn:active {
    background: var(--accent-bg);
    color: var(--accent);
    transform: scale(.94);
  }

  /* ── Primary and sub tabs ───────────────────────────────────────── */
  .tab {
    min-height: 44px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .sub-tab {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* ── MCQ options — full-width, taller ──────────────────────────── */
  .mcq-option {
    padding: 14px 14px;
    min-height: 52px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* ── CBL cards and action buttons ───────────────────────────────── */
  .cbl-action-btn,
  .cbl-filter-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .cbl-action-btn:active,
  .cbl-filter-btn:active {
    opacity: .8;
  }
  .cbl-card:active {
    background: var(--surface2);
  }

  /* ── OSATS chips ────────────────────────────────────────────────── */
  .osats-chip {
    padding: 6px 12px;
    min-height: 36px;
    font-size: 12px;
  }
  .osats-chip:active {
    opacity: .8;
  }

  /* ── Insight and procedure cards — tap feedback ─────────────────── */
  .insight-card:active,
  .proc-cat-row:active {
    background: var(--surface2);
  }

  /* ── Category toggles ───────────────────────────────────────────── */
  .category-toggle {
    min-height: 52px;
    padding: 12px 16px;
  }

  /* ── Sidebar items ──────────────────────────────────────────────── */
  .sidebar-item {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
  }

  /* ── Pending approval screen button ────────────────────────────── */
  #pendingApprovalScreen button {
    min-height: 52px;
    width: 100%;
    max-width: 320px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* ── Scroll performance on key containers ───────────────────────── */
  .main, .modal, .mobile-drawer,
  .recent-chips, .sub-tabs, .tabs,
  .rota-month-picker, .rota-filter-row,
  .cbl-subnav, .exam-dot-nav, .vault-dot-nav {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ── Prevent all text-selection flicker on tap ──────────────────── */
  .tab, .sub-tab, .auth-tab, .mobile-nav-btn,
  .category-toggle, .recent-chip, .cal-day,
  .check-box, .sidebar-item, .mcq-option,
  .ww-verdict-btn, .struggle-vote,
  .mastery-cell, .rot-pick-item,
  .rota-chip, .rota-filter-btn, .rota-month-btn,
  .cbl-card, .cbl-action-btn, .osats-chip {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ── Very small phones (≤ 375px) ───────────────────────────────────── */
@media (max-width: 375px) {
  .btn, .btn-full {
    font-size: 13px;
    padding: 10px 12px;
  }
  .modal {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .modal-actions .btn,
  .modal-actions-sticky .btn {
    min-height: 44px;
    font-size: 14px;
  }
  .mobile-nav-btn {
    min-width: 48px;
    font-size: 9px;
  }
  .tab {
    padding: 8px 10px;
    font-size: 12px;
  }
  .auth-card {
    padding: 20px 16px;
  }
}


/* ═══════════════════════════════════════════════
   MOBILE PERFORMANCE PATCH
   ═══════════════════════════════════════════════ */

/* content-visibility: auto defers rendering of off-screen view containers
   until they scroll into view — massive paint savings on mobile */
.view-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Reduce animation scope on mobile — only animate what the user interacts with */
@media (max-width: 768px) {
  /* Kill backdrop-filter blur on mobile — GPU-expensive, causes jank */
  .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.82) !important;
  }
  .mobile-drawer-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.65) !important;
  }
  /* Disable non-essential transitions on mobile — reduces style recalc */
  .proc-card,
  .insight-card,
  .ww-card,
  .qbank-card,
  .struggle-card,
  .cbl-card,
  .rota-row {
    transition: none !important;
  }
  /* Keep only interaction-critical transitions */
  .btn,
  .tab,
  .sub-tab,
  .mobile-nav-btn,
  .fab {
    transition: opacity 0.1s, transform 0.1s !important;
  }
  /* Promote fixed elements to their own layer — prevents repaints */
  .mobile-nav,
  .fab,
  header {
    will-change: transform;
    transform: translateZ(0);
  }
  /* Prevent layout thrash from heatmap overflow */
  .heatmap-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}