:root {
  --bg:#0a0b0f; --bg2:#111318; --bg3:#181c24; --bg4:#1e2330;
  --border:#252b38; --border2:#2e3547;
  --text:#e8eaf0; --text2:#8890a4; --text3:#555f74;
  --accent:#00e5a0; --accent2:#00b87a; --accent-dim:rgba(0,229,160,0.1);
  --red:#ff4d6a; --red-dim:rgba(255,77,106,0.12);
  --yellow:#ffb930; --yellow-dim:rgba(255,185,48,0.12);
  --blue:#4d8eff; --blue-dim:rgba(77,142,255,0.12);
  --shadow:0 4px 24px rgba(0,0,0,0.4); --radius:12px;
  --sidebar-w:240px;
  --green:#2dd36f;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;}

/* ===== AUTH ===== */
#auth-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;
  background-image:radial-gradient(ellipse at 20% 50%,rgba(0,229,160,.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(77,142,255,.04) 0%,transparent 50%);}
.auth-box{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:40px 36px;width:min(420px,92vw);box-shadow:var(--shadow),0 0 80px rgba(0,229,160,.05);}
.auth-logo{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:var(--accent);letter-spacing:-0.5px;margin-bottom:6px;}
.auth-sub{color:var(--text3);font-size:13px;margin-bottom:32px;}
.auth-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:8px;padding:4px;margin-bottom:24px;}
.auth-tab{flex:1;padding:8px;text-align:center;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .2s;font-family:'DM Mono',monospace;}
.auth-tab.active{background:var(--bg4);color:var(--text);}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:11px;color:var(--text3);margin-bottom:7px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;}
.form-group input,.form-group select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;color:var(--text);font-size:14px;outline:none;transition:border .2s;font-family:'DM Sans',sans-serif;-webkit-appearance:none;}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);}
.btn-primary{width:100%;padding:13px;background:var(--accent);color:#000;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;}
.btn-primary:hover{background:var(--accent2);}
.auth-error{color:var(--red);font-size:12px;margin-top:8px;display:none;padding:8px 0;}
.auth-hint{text-align:center;margin-top:14px;font-size:12px;color:var(--text3);}

/* ===== v1-deprecated login card — visual mirror of v2 .login-card (added 2026-05-05) ===== */
.login-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:32px;width:min(420px,92vw);box-shadow:var(--shadow);font-family:'DM Sans',sans-serif;}
.login-card h1{margin:0 0 14px;font-size:18px;color:var(--accent);font-family:'Inter',sans-serif;font-weight:700;}
.login-card .login-deprecation-notice{font-size:13px;line-height:1.5;color:var(--text2);margin:0 0 20px;}
.login-card label{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;}
.login-card label > span{display:block;}
.login-card input[type=text],.login-card input[type=password]{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;outline:none;font-family:'DM Sans',sans-serif;-webkit-appearance:none;text-transform:none;letter-spacing:normal;}
.login-card input[type=text]:focus,.login-card input[type=password]:focus{border-color:var(--accent);}
.login-card .login-remember{flex-direction:row !important;align-items:center;gap:8px;color:var(--text);margin:4px 0 14px;text-transform:none;letter-spacing:normal;font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer;}
.login-card .login-remember input{width:auto !important;margin:0;}
.login-card .btn-primary{width:100%;padding:12px;background:var(--accent);color:#000;border:0;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;font-family:'Inter',sans-serif;}
.login-card .btn-primary:hover{background:var(--accent2);}
.login-card .login-migrate-link{margin:18px 0 0;text-align:center;font-size:13px;}
.login-card .login-migrate-link a{color:var(--accent);font-weight:600;text-decoration:none;}
.login-card .login-migrate-link a:hover{text-decoration:underline;}
.login-card .login-newstaff-link{margin:6px 0 0;text-align:center;font-size:12px;color:var(--text3);}
.login-card .login-newstaff-link a{color:var(--accent);text-decoration:none;}
.login-card .login-newstaff-link a:hover{text-decoration:underline;}
.login-card .login-delete-account{margin:14px 0 0;text-align:center;font-size:12px;}
.login-card .login-delete-account a{color:var(--text3);text-decoration:underline;}
.login-card .login-footer{font-size:11px;margin-top:18px;opacity:.55;text-align:center;color:var(--text3);}

/* ===== APP SHELL ===== */
/* 100dvh follows the dynamic viewport (iOS URL bar / Android nav bar), 100vh is the fallback.
   env(safe-area-inset-*) handles iPhone notch + home-bar on PWAs with viewport-fit=cover. */
#app{display:none;height:100vh;height:100dvh;flex-direction:row;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
#app.visible{display:flex;}

/* ===== SIDEBAR ===== */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;transition:transform .3s;z-index:200;}
.sidebar-logo{padding:20px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.logo-mark{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;color:var(--accent);letter-spacing:-.3px;}
.logo-role{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:1px;}
.sidebar-close{margin-left:auto;display:none;background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:4px;}
.sidebar-nav{overflow-y:auto;flex:1;}
.sidebar-nav::-webkit-scrollbar{width:0;}
.sidebar-section{padding:14px 12px 5px;font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:1px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;margin:1px 8px;cursor:pointer;transition:all .15s;font-size:13.5px;color:var(--text2);}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--accent-dim);color:var(--accent);}
.nav-item .icon{font-size:15px;width:18px;text-align:center;}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;font-family:'DM Mono',monospace;min-width:18px;text-align:center;}
.nav-badge.green{background:var(--accent);color:#000;}
.sidebar-bottom{padding:14px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:10px;}
.user-avatar{width:34px;height:34px;border-radius:8px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--accent);font-family:'Inter',sans-serif;flex-shrink:0;}
.user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.user-role{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;}
.logout-btn{margin-left:auto;color:var(--text3);cursor:pointer;font-size:12px;padding:6px 10px;border-radius:6px;transition:color .2s,background .2s;background:none;border:1px solid var(--border);flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;}
.logout-label{display:inline;font-size:12px;font-weight:500;}
.logout-btn:hover{color:var(--red);}

/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:199;display:none;}
.sidebar-overlay.show{display:block;}

/* ===== MAIN ===== */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{padding:0 20px;height:56px;min-height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--bg2);}
.menu-btn{display:none;background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;padding:6px;border-radius:6px;flex-shrink:0;position:relative;}
.menu-btn:hover{color:var(--text);background:var(--bg3);}
.menu-badge{display:none;position:absolute;top:2px;right:0;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:8px;padding:0 4px;font-family:'DM Mono',monospace;}
.page-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.topbar-pill{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--text2);font-family:'DM Mono',monospace;white-space:nowrap;}
.notif-btn{position:relative;cursor:pointer;color:var(--text2);font-size:18px;padding:6px;border-radius:8px;transition:color .2s;}
.notif-btn:hover{color:var(--text);background:var(--bg3);}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid var(--bg2);}

.content{flex:1;overflow-y:auto;padding:20px;}
.content::-webkit-scrollbar{width:5px;}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ===== PAGES ===== */
.page{display:none;animation:fadeIn .2s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ===== CARDS ===== */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.card-title{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;margin-bottom:14px;color:var(--text);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;}
.stat-label{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.stat-value{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;line-height:1.1;}
.stat-sub{font-size:11px;color:var(--text3);margin-top:4px;}
.stat-icon{position:absolute;right:16px;top:16px;font-size:20px;opacity:.2;}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;}
th{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:11px 12px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,.015);}

/* ===== MODEL TABLE V2 ===== */
#page-models .table-wrap{max-height:calc(100vh - 180px);overflow-y:auto;}
#page-models thead th{position:sticky;top:0;z-index:10;background:var(--bg2);box-shadow:0 1px 0 var(--border);}
#models-tbody tr[id^="mrow-"]:nth-child(4n+1) td{background:rgba(255,255,255,.025);}
#models-tbody tr[id^="mrow-"]:nth-child(4n+1):hover td{background:rgba(255,255,255,.05);}
#models-tbody tr[id^="mrow-"]:nth-child(4n+3) td{background:rgba(255,255,255,.055);}
#models-tbody tr[id^="mrow-"]:nth-child(4n+3):hover td{background:rgba(255,255,255,.08);}

/* ===== ACCOUNTS MODAL V2 ===== */
#modal-accounts>.modal{max-width:min(95vw,1400px)!important;width:95vw!important;}
#modal-accounts .acct-table-wrap{max-height:calc(90vh - 200px);overflow-y:auto;border:1px solid var(--border);border-radius:8px;}
#modal-accounts .acct-table-wrap table{border-collapse:collapse;width:100%;}
#modal-accounts .acct-table-wrap thead th{position:sticky;top:0;z-index:10;background:var(--bg2);box-shadow:0 1px 0 var(--border);padding:10px 14px;font-size:11px;white-space:nowrap;}
#modal-accounts .acct-table-wrap td{padding:10px 14px;font-size:13px;vertical-align:middle;}
#acct-tbody tr:nth-child(odd) td{background:rgba(255,255,255,.025);}
#acct-tbody tr:nth-child(even) td{background:rgba(255,255,255,.055);}
#acct-tbody tr:hover td{background:rgba(255,255,255,.08);}
#acct-inactive-tbody tr:nth-child(odd) td{background:rgba(255,255,255,.015);opacity:.7;}
#acct-inactive-tbody tr:nth-child(even) td{background:rgba(255,255,255,.04);opacity:.7;}
#acct-inactive-tbody tr:hover td{background:rgba(255,255,255,.06);opacity:1;}
.acct-copy-cell{cursor:pointer;font-family:'DM Mono',monospace;font-size:12px;transition:color .15s;}
.acct-copy-cell:hover{color:var(--accent);}
.acct-pwd-btn{background:none;border:1px solid var(--border2);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:13px;font-family:'DM Mono',monospace;color:var(--text2);transition:all .15s;white-space:nowrap;}
.acct-pwd-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,229,160,.08);}
.acct-section-label{font-size:12px;font-weight:600;color:var(--text3);padding:12px 14px 8px;border-top:2px solid var(--border);}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-family:'DM Mono',monospace;font-weight:500;white-space:nowrap;}
.badge-green{background:rgba(0,229,160,.12);color:var(--accent);}
.badge-red{background:var(--red-dim);color:var(--red);}
.badge-yellow{background:var(--yellow-dim);color:var(--yellow);}
.badge-blue{background:var(--blue-dim);color:var(--blue);}
.badge-gray{background:var(--bg3);color:var(--text2);}
.badge-orange{background:rgba(249,115,22,.15);color:#f97316;}
.btn-warning{background:rgba(249,115,22,.15);color:#f97316;border:1px solid rgba(249,115,22,.35);}
.btn-warning:hover{background:rgba(249,115,22,.25);}

/* ===== BUTTONS ===== */
.btn{padding:8px 14px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.btn-sm{padding:5px 10px;font-size:11px;}
.btn-accent{background:var(--accent);color:#000;}
.btn-accent:hover{background:var(--accent2);}
.btn-outline{background:transparent;border:1px solid var(--border2);color:var(--text2);}
.btn-outline:hover{border-color:var(--text2);color:var(--text);}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,77,106,.2);}
.btn-danger:hover{background:rgba(255,77,106,.2);}
.btn-ghost{background:var(--bg3);color:var(--text2);}
.btn-ghost:hover{background:var(--bg4);color:var(--text);}

/* ===== GRID ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:flex-start;justify-content:center;backdrop-filter:blur(4px);overflow-y:auto;padding:20px 12px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:28px;width:min(560px,100%);box-shadow:var(--shadow);animation:modalIn .2s ease;margin:auto;}
.modal-wide{width:min(720px,100%);}
@keyframes modalIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;}
.modal-close{color:var(--text3);cursor:pointer;font-size:20px;padding:4px;border-radius:4px;transition:color .2s;background:none;border:none;flex-shrink:0;}
.modal-close:hover{color:var(--red);}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;}

/* ===== FORM ===== */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13.5px;outline:none;transition:border .2s;font-family:'DM Sans',sans-serif;-webkit-appearance:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical;min-height:72px;}
.field-hint{font-size:11px;color:var(--text3);margin-top:5px;}

/* ===== PAYOUT BUTTONS ===== */
.payout-type-btn{flex:1;padding:11px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;text-align:center;transition:all .2s;font-size:13px;font-family:'DM Sans',sans-serif;}
.payout-type-btn.selected{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}

/* ===== CHAT ===== */
.thread-av{width:34px;height:34px;border-radius:8px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;flex-shrink:0;}
.thread-name{font-size:13px;font-weight:500;}
.thread-preview{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.unread-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;margin-left:auto;flex-shrink:0;}
.msg{display:flex;gap:8px;max-width:75%;}
.msg.own{margin-left:auto;flex-direction:row-reverse;}
.msg-av{width:28px;height:28px;border-radius:7px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text2);font-family:'Inter',sans-serif;flex-shrink:0;}
.msg-bubble{background:var(--bg3);border-radius:12px;padding:9px 13px;font-size:inherit;line-height:1.5;word-break:break-word;}
.msg.own .msg-bubble{background:var(--accent-dim);border:1px solid rgba(0,229,160,.2);}
.msg-meta{font-size:0.75em;color:var(--text3);margin-top:4px;font-family:'DM Mono',monospace;}
.msg.own .msg-meta{text-align:right;}
.lang-sel-btn{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .15s;}
.lang-sel-btn.active,.lang-sel-btn:hover{background:var(--accent);color:#000;border-color:var(--accent);}
@keyframes navAlertPulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.nav-alert-pulse{animation:navAlertPulse 1s infinite;}
.send-btn{background:var(--accent);color:#000;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;font-size:15px;transition:all .15s;flex-shrink:0;}
.send-btn:hover{background:var(--accent2);}
.emoji-picker{position:absolute;bottom:100%;left:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);padding:8px;z-index:999;width:280px;}
.emoji-picker .ep-cat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin:6px 2px 2px;font-weight:700;}
.emoji-picker .ep-cat-label:first-child{margin-top:0;}
.emoji-picker .ep-cats{display:flex;gap:4px;margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.emoji-picker .ep-cat{padding:2px 6px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text3);background:none;border:none;}
.emoji-picker .ep-cat.active{background:var(--accent-dim);color:var(--accent);}
.emoji-picker .ep-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.emoji-picker .ep-grid span{font-size:20px;text-align:center;cursor:pointer;padding:4px;border-radius:4px;transition:background .1s;}
.emoji-picker .ep-grid span:hover{background:var(--bg3);}

/* ===== SECTION HEADER ===== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.section-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;}
.section-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ===== MISC ===== */
.cycle-banner{background:linear-gradient(90deg,rgba(0,229,160,.08) 0%,transparent 100%);border:1px solid rgba(0,229,160,.2);border-radius:10px;padding:13px 16px;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;}
.cycle-banner-text{font-size:13px;}
.cycle-banner-text strong{color:var(--accent);}
.portal-hero{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:18px;position:relative;overflow:hidden;}
.portal-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(0,229,160,.07) 0%,transparent 70%);}
.countdown-days{font-family:'Inter',sans-serif;font-size:32px;font-weight:800;color:var(--accent);}
.chart-bar-wrap{display:flex;flex-direction:column;gap:8px;}
.chart-bar-row{display:flex;align-items:center;gap:10px;}
.chart-bar-label{font-size:11px;color:var(--text2);width:90px;text-align:right;font-family:'DM Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chart-bar-track{flex:1;background:var(--bg3);border-radius:4px;height:20px;overflow:hidden;}
.chart-bar-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .8s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;color:#000;font-weight:600;font-family:'DM Mono',monospace;min-width:4px;}
.chart-bar-fill.blue{background:var(--blue);color:#fff;}
.chart-bar-fill.yellow{background:var(--yellow);color:#000;}
.rate-box{background:var(--bg3);border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.rate-value{font-family:'DM Mono',monospace;font-size:16px;font-weight:500;color:var(--accent);}
.rate-label{font-size:12px;color:var(--text3);}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0;}
.toast{position:fixed;bottom:20px;right:16px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:11px 16px;font-size:13.5px;z-index:9999;transform:translateY(80px);opacity:0;transition:all .3s;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);}
.toast.show{transform:none;opacity:1;}
.toast.success{border-color:rgba(0,229,160,.3);}
.toast.success::before{content:'✓';color:var(--accent);font-weight:700;}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;pointer-events:none;}
.toast.error::before{content:'✕';color:var(--red);font-weight:700;}

/* ===== CALC PREVIEW ===== */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.calc-box{background:var(--bg2);border-radius:8px;padding:10px;}
.calc-box-label{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;}
.calc-box-value{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;}

/* ===== DEBT PANEL ===== */
.debt-panel{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;}
.debt-panel-title{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.debt-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);gap:10px;}
.debt-row:last-child{border-bottom:none;}
.debt-amount{font-family:'DM Mono',monospace;font-size:13px;font-weight:600;}
.debt-amount.owed-us{color:var(--red);}
.debt-amount.owed-model{color:var(--blue);}
.debt-meta{font-size:11px;color:var(--text3);}

/* ===== CALC SECTIONS ===== */
.calc-section{background:var(--bg3);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.calc-section-title{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.calc-line{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;}
.calc-line-label{color:var(--text2);}
.calc-line-val{font-family:'DM Mono',monospace;font-weight:600;}
.calc-line-val.pos{color:var(--accent);}
.calc-line-val.neg{color:var(--red);}
.calc-line-val.neu{color:var(--text);}
.calc-total{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0;border-top:1px solid var(--border2);margin-top:8px;}
.calc-total-label{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;}
.calc-total-val{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;color:var(--accent);}

/* ===== EDIT HISTORY BADGE ===== */
.edit-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(255,185,48,.1);border:1px solid rgba(255,185,48,.2);border-radius:4px;font-size:10px;color:var(--yellow);font-family:'DM Mono',monospace;}

/* ===== AVATAR UPLOAD ===== */
.avatar-upload{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.avatar-preview{width:56px;height:56px;border-radius:50%;background:var(--bg3);border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:border-color .2s;flex-shrink:0;}
.avatar-preview:hover{border-color:var(--accent);}
.avatar-preview img{width:100%;height:100%;object-fit:cover;}
.avatar-preview .av-placeholder{font-size:22px;color:var(--text3);}
.avatar-input-area{flex:1;}

/* ===== TOGGLE SWITCH ===== */
.toggle-wrap{display:flex;align-items:center;gap:10px;}
.toggle{position:relative;width:42px;height:24px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-slider{position:absolute;inset:0;background:var(--bg4);border-radius:12px;cursor:pointer;transition:.2s;}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle input:checked+.toggle-slider{background:var(--accent);}
.toggle input:checked+.toggle-slider:before{transform:translateX(18px);}
.toggle-label{font-size:13px;color:var(--text2);}

/* ===== NOTIFICATION PANEL ===== */
.notif-btn{position:relative;cursor:pointer;font-size:18px;padding:4px 8px;border-radius:8px;transition:background .2s;}
.notif-btn:hover{background:var(--bg3);}
.notif-badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:9px;font-family:'DM Mono',monospace;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 3px;}
.notif-badge.show{display:flex;}
.notif-panel{position:fixed;top:56px;right:12px;width:340px;max-height:480px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:400;display:none;flex-direction:column;overflow:hidden;}
.notif-panel.open{display:flex;}
.notif-panel-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.notif-panel-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;}
.notif-list{overflow-y:auto;flex:1;}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.notif-item:hover{background:var(--bg3);}
.notif-item.unread{background:rgba(0,229,160,.04);}
.notif-item.unread::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0;margin-top:5px;}
.notif-item:not(.unread)::before{content:'';width:6px;flex-shrink:0;}
.notif-icon{font-size:16px;flex-shrink:0;margin-top:1px;}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:12px;color:var(--text);line-height:1.4;}
.notif-time{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:3px;}
.notif-empty{padding:32px;text-align:center;color:var(--text3);font-size:13px;}

/* ===== ADMIN STATUS BADGE ===== */
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-family:'DM Mono',monospace;font-weight:600;}
.status-pill.active{background:rgba(0,229,160,.12);color:var(--accent);}
.status-pill.inactive{background:var(--red-dim);color:var(--red);}

/* ===== MODEL EXPAND PANEL ===== */
.model-expand-tr td{padding:0 !important;border-top:none !important;}
.model-expand-tr.collapsed td>div{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.model-expand-tr.expanded td>div{max-height:800px;transition:max-height .4s ease;}

/* ===== ACTIVITY FEED (model) ===== */
.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.activity-body{flex:1;min-width:0;}
.activity-title{font-size:13px;font-weight:500;margin-bottom:2px;}
.activity-meta{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;}
.activity-amount{font-family:'DM Mono',monospace;font-size:13px;font-weight:600;flex-shrink:0;}

/* ===== PLATFORM BREAKDOWN ===== */
.platform-row{display:grid;grid-template-columns:1fr 120px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);}
.platform-row:last-child{border-bottom:none;}
.platform-row input{font-size:12px;}
.platform-total-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--accent-dim);border-radius:8px;margin-top:8px;}
.platform-total-label{font-size:12px;color:var(--text2);}
.platform-total-val{font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:var(--accent);}
.platform-breakdown-list{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.platform-breakdown-item{display:flex;justify-content:space-between;font-size:11px;padding:3px 8px;background:var(--bg3);border-radius:4px;}
.platform-breakdown-name{color:var(--text2);}
.platform-breakdown-amt{font-family:'DM Mono',monospace;font-weight:600;color:var(--text);}
.credit-applied-banner{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--blue-dim);border:1px solid rgba(77,142,255,.3);border-radius:8px;font-size:12px;margin-top:6px;}

/* ===== PENDING PENALTIES ===== */
.pending-penalties-panel{background:var(--bg3);border:1px solid rgba(255,77,106,.2);border-radius:10px;padding:14px;margin-bottom:14px;}
.pending-penalties-title{font-size:11px;color:var(--red);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.penalty-item-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.penalty-item-row:last-child{border-bottom:none;}
.penalty-item-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.penalty-item-info{flex:1;min-width:0;}
.penalty-item-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.penalty-item-meta{font-size:11px;color:var(--text3);margin-top:1px;}
.penalty-item-amount{font-family:'DM Mono',monospace;font-weight:700;color:var(--red);flex-shrink:0;font-size:13px;}
.penalty-cancel-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);font-size:10px;cursor:pointer;padding:3px 7px;transition:all .15s;}
.penalty-cancel-btn:hover{border-color:var(--red);color:var(--red);}
.badge-pending{background:var(--yellow-dim);color:var(--yellow);}
.badge-applied-ok{background:var(--accent-dim);color:var(--accent);}
.badge-canceled-st{background:var(--bg4);color:var(--text3);opacity:.7;}
/* Currency row */
.amount-cur-row{display:flex;gap:6px;align-items:center;}
.amount-cur-row input{flex:1;min-width:0;}
.cur-select{background:var(--bg4);border:1px solid var(--border);border-radius:7px;padding:10px 6px 10px 8px;color:var(--text);font-size:11px;font-family:'DM Mono',monospace;font-weight:600;outline:none;cursor:pointer;width:58px;min-width:58px;max-width:58px;transition:border .2s;-webkit-appearance:none;flex-shrink:0;text-align:center;}
.cur-select:focus{border-color:var(--accent);}
/* Language selector */
.lang-btn{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--text2);font-family:'DM Mono',monospace;cursor:pointer;transition:all .15s;white-space:nowrap;}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);}
.lang-dropdown{position:relative;display:inline-block;}
.lang-dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:6px;min-width:120px;box-shadow:var(--shadow);z-index:500;display:none;}
.lang-dropdown-menu.open{display:block;}
.lang-option{padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .15s;}
.lang-option:hover{background:var(--bg3);color:var(--text);}
.lang-option.active{color:var(--accent);background:var(--accent-dim);}

/* ===== CORRECTION PHOTO ===== */
.corr-photo-preview{width:100%;max-height:160px;object-fit:contain;border-radius:8px;border:1px solid var(--border);margin-top:6px;display:none;}
.corr-photo-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;}

/* ===== FILTER TABS ===== */
.filter-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;}
.pagination-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--border);margin-top:10px;flex-wrap:wrap;gap:8px;}
.pagination-info{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:8px;}
.pagination-controls{display:flex;align-items:center;gap:4px;}
.pagination-btn{background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:12px;padding:6px 10px;cursor:pointer;font-family:'DM Mono',monospace;transition:all .15s;min-width:32px;text-align:center;}
.pagination-btn:hover:not(:disabled){background:var(--bg4);color:var(--text);border-color:var(--border2);}
.pagination-btn:disabled{opacity:.3;cursor:default;}
.pagination-btn.active{background:rgba(110,89,255,.15);color:var(--accent);border-color:var(--accent);}
.page-size-select{background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:12px;padding:5px 8px;font-family:'DM Mono',monospace;outline:none;}
.page-size-select:focus{border-color:var(--accent);}
.filter-tab{padding:5px 12px;border-radius:20px;font-size:11px;font-family:'DM Mono',monospace;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:all .15s;white-space:nowrap;}
.filter-tab:hover{border-color:var(--text2);color:var(--text);}
.filter-tab.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.dow-active{background:var(--accent-dim) !important;border-color:var(--accent) !important;color:var(--accent) !important;}
.filter-tab.red{}.filter-tab.red.active{background:var(--red-dim);border-color:var(--red);color:var(--red);}
.filter-tab.yellow{}.filter-tab.yellow.active{background:var(--yellow-dim);border-color:var(--yellow);color:var(--yellow);}
.filter-tab.blue{}.filter-tab.blue.active{background:var(--blue-dim);border-color:var(--blue);color:var(--blue);}

/* ===== MODEL PAYOUT INFO ===== */
.payout-info-box{background:var(--bg3);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.payout-info-box .big-pct{font-family:'Inter',sans-serif;font-size:42px;font-weight:800;color:var(--accent);line-height:1;}

/* ===== MONETARY CORRECTION ===== */
.corr-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.corr-type-btn{padding:12px 8px;background:var(--bg3);border:2px solid var(--border);border-radius:10px;cursor:pointer;text-align:center;transition:all .2s;}
.corr-type-btn:hover{border-color:var(--border2);}
.corr-type-btn.active{border-color:var(--accent);background:var(--accent-dim);}
.corr-type-btn .icon{font-size:18px;display:block;margin-bottom:4px;}
.corr-type-btn .lbl{font-size:11px;font-family:'DM Mono',monospace;color:var(--text2);}
.corr-type-btn.active .lbl{color:var(--accent);}
.entry-title-tag{display:inline-block;padding:2px 8px;background:var(--bg4);border-radius:4px;font-size:11px;font-weight:600;color:var(--text);font-family:'DM Mono',monospace;}
.entry-reason{font-size:11px;color:var(--text3);margin-top:2px;font-style:italic;}
.corr-entry{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.corr-entry:last-child{border-bottom:none;}
.corr-entry-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}

/* ===== LIGHT THEME ===== */
body.light{--bg:#f4f5f7;--bg2:#ffffff;--bg3:#f0f1f4;--bg4:#e5e7ec;--border:#d5d8e0;--border2:#c5c8d0;--text:#1a1c24;--text2:#4a5068;--text3:#8890a4;--accent:#00b87a;--accent2:#009966;--accent-dim:rgba(0,184,122,0.1);--red:#e63e58;--red-dim:rgba(230,62,88,0.1);--yellow:#e6a800;--yellow-dim:rgba(230,168,0,0.1);--blue:#3a7bdd;--blue-dim:rgba(58,123,221,0.1);--shadow:0 2px 12px rgba(0,0,0,0.08);}
body.light .auth-box,body.light .modal,body.light .sidebar{box-shadow:0 2px 20px rgba(0,0,0,0.06);}
body.light input,body.light select,body.light textarea{color:var(--text);}
body.light .msg.own .msg-bubble{border-color:rgba(0,184,122,0.3);}

/* ===== THEME TOGGLE BTN ===== */
.theme-toggle{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:14px;cursor:pointer;transition:all .2s;line-height:1;}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent-dim);}

/* ===== SEARCH BAR ===== */
.search-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.search-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 14px 9px 34px;color:var(--text);font-size:13px;outline:none;transition:border .2s;font-family:'DM Sans',sans-serif;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555f74' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 10-1.397 1.398h-.001l3.85 3.85a1 1 0 001.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;}
.search-input:focus{border-color:var(--accent);}
.search-input::placeholder{color:var(--text3);}

/* ===== DAY OVERVIEW MODAL ===== */
#modal-day-overview>.modal{max-width:min(95vw,900px)!important;width:90vw!important;}

/* ===== PERFORMANCE ===== */
.perf-mini-chart{height:50px;display:flex;align-items:flex-end;gap:2px;}
.perf-bar{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px;transition:height .3s;}

/* ===== PERIOD LOCK ===== */
.lock-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-family:'DM Mono',monospace;background:var(--bg4);color:var(--text3);}
.lock-badge.locked{background:rgba(255,77,106,.1);color:var(--red);}

/* ===== EXPORT/IMPORT PANEL ===== */
.export-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px;}
.export-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .2s;}
.export-card:hover{border-color:var(--accent);background:var(--accent-dim);}
.export-card .icon{font-size:24px;margin-bottom:6px;}
.export-card .label{font-size:12px;font-weight:600;}
.export-card .hint{font-size:10px;color:var(--text3);margin-top:4px;}

/* ===== WEBHOOK SETTINGS ===== */
.webhook-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;}
.webhook-card input{width:100%;margin-top:6px;}
.webhook-test-btn{margin-top:8px;}

@media(max-width:768px){
  #app{height:100dvh;}
  :root{--sidebar-w:220px;}
  html,body{overflow:hidden;}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translateX(-100%);z-index:300;overflow-y:auto;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;align-items:center;justify-content:center;}
  .menu-btn{display:flex;align-items:center;justify-content:center;}
  .content{padding:14px;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-value{font-size:20px;}
  .two-col{grid-template-columns:1fr;}
  .three-col{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
  .topbar{padding:0 14px;}
  .topbar-pill{display:none;}
  .modal-overlay{padding:12px 8px;}
  .modal,.modal-wide{padding:20px 16px;}
  .section-header{flex-direction:column;align-items:flex-start;}
  .notif-panel{width:calc(100vw - 24px);left:12px;right:12px;}
  table{font-size:12px;}
  th{padding:8px 10px;}
  td{padding:9px 10px;}
  .table-wrap{position:relative;}
  .table-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--bg2));pointer-events:none;opacity:0;transition:opacity .2s;}
  .table-wrap.has-scroll::after{opacity:1;}
  .sidebar-bottom{padding:10px 14px;}
  .logout-btn{background:rgba(239,68,68,.12);color:var(--red);font-size:14px;padding:8px 14px;border-radius:8px;display:flex;align-items:center;gap:6px;width:100%;justify-content:center;}
  .logout-label{display:inline;font-size:13px;font-weight:500;font-family:'Inter',sans-serif;}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-card{padding:14px;}
  .stat-value{font-size:18px;}
  .three-col{grid-template-columns:1fr;}
  .auth-box{padding:28px 20px;}
  .msg{max-width:90%;}
  .emoji-picker{left:auto;right:0;width:min(280px,calc(100vw - 32px));}
  .notif-panel{width:calc(100vw - 24px);left:12px;right:12px;}
}

/* ===== PHONE PORTRAIT (390-430px) ===== */
@media(max-width:430px){
  /* Content padding tighter */
  .content{padding:10px 8px;}
  .topbar{padding:0 10px;gap:6px;}

  /* Modals: force full-width */
  .modal-overlay{padding:8px 4px;}
  .modal,.modal-wide{max-width:100%!important;width:100%;padding:16px 12px;border-radius:10px;}

  /* Modal close button: bigger tap target */
  .modal-close{padding:8px;font-size:22px;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;}

  /* Tables: smaller text, tighter cells */
  table{font-size:11px;}
  th{padding:6px 6px;white-space:nowrap;}
  td{padding:7px 6px;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Stats grid: single column on very small */
  .stats-grid{grid-template-columns:1fr;gap:8px;}
  .stat-card{padding:12px;}
  .stat-value{font-size:16px;}

  /* Buttons: minimum tap target 44px */
  .btn{min-height:36px;padding:6px 12px;font-size:12px;}
  .btn-sm{min-height:32px;padding:4px 10px;}

  /* Section headers: stack vertically */
  .section-header{flex-direction:column;align-items:stretch;gap:8px;}
  .section-header .btn,.section-header button{width:100%;}

  /* Chat input: tools row first, then full-width input box. Safe-area keeps it above
     the iOS home bar / Android gesture nav even when installed as a PWA. */
  .send-btn{order:1;min-height:40px;padding:8px 14px;}

  /* Emoji picker: narrower grid (6 cols instead of 8) */
  .emoji-picker{width:min(260px,calc(100vw - 16px));}
  .emoji-picker .ep-grid{grid-template-columns:repeat(6,1fr);gap:1px;}
  .emoji-picker .ep-grid span{font-size:22px;padding:6px;}
  .emoji-picker .ep-cats{flex-wrap:wrap;gap:2px;}

  /* HOF podium: stack vertically */
  .hof-podium{flex-direction:column;align-items:center;gap:16px;}
  .hof-podium-slot{max-width:100%;width:80%;}
  .hof-podium-base{border-radius:6px;}

  /* Platform row: stack on mobile */
  .platform-row{grid-template-columns:1fr 1fr;gap:4px;}

  /* Fix min-width overflows on inputs */
  input[style*="min-width:180px"],input[style*="min-width:160px"]{min-width:0!important;width:100%;}

  /* Field rows: full width */
  .field-row{grid-template-columns:1fr;}
  .field{min-width:0;}

  /* Two-col and three-col: single column */
  .two-col,.three-col{grid-template-columns:1fr;gap:8px;}

  /* Balance panel: tighter */
  .bal-row{padding:8px 10px;}
  .bal-row-amount{font-size:14px;}

  /* Notif panel: full width */
  .notif-panel{width:calc(100vw - 16px);left:8px;right:8px;}

  /* Auth box: full width */
  .auth-box{padding:20px 14px;max-width:100%;}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.admin-live-row-active td{background:rgba(0,229,160,.03);}
.perm-grid{display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-height:0;overflow-y:auto;padding-right:4px;}
.perm-grid::-webkit-scrollbar{width:6px;}.perm-grid::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}.perm-grid::-webkit-scrollbar-track{background:transparent;}
.perm-category{background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;}
.perm-category-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;}
.perm-category-hdr:hover{background:var(--bg3);}
.perm-category-hdr .cat-count{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;}
.perm-category-hdr .cat-links{font-size:11px;display:flex;gap:8px;}
.perm-category-hdr .cat-links a{color:var(--accent);cursor:pointer;text-decoration:none;}
.perm-category-body{display:none;padding:4px 14px 10px;}
.perm-category.open .perm-category-body{display:block;}
.perm-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12px;color:var(--text2);}
.perm-row label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;}
.perm-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;}
#ot-tip{position:fixed;z-index:9999;pointer-events:none;background:#1a1a2e;color:#e0e0e0;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:5px 10px;font-size:12px;font-family:'DM Mono',monospace;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.5);opacity:0;transition:opacity .05s;}
#ot-tip.show{opacity:1;}
.oh-day-card{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;background:var(--bg1);}
.oh-day-header{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--border);font-size:12px;font-family:'DM Mono',monospace;}
.oh-day-date{font-weight:700;min-width:80px;font-size:13px;}
.oh-sched-badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;}
.oh-day-notes{font-size:11px;color:var(--text3);font-style:italic;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oh-day-body{padding:8px 14px 10px;}
.oh-day-compact{display:flex;align-items:center;gap:8px;padding:8px 14px;}
.oh-stat-item{display:inline-flex;align-items:center;gap:4px;margin-right:14px;}
.oh-stat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.oh-stat-num{font-weight:700;color:var(--text);}

/* ═══════════════════════════════════════════════════════════════
   v40.61 MOBILE PATCHES — hits 480 / 360 / 320 CSS-px breakpoints.
   Placed last so these rules win the cascade against earlier
   desktop-first declarations without hunting each one down.
   (Real-phone CSS widths land at ~360-411px regardless of physical
   resolution, and Android "display size" settings can drop you to
   ~320px — that's the zone that was never responsive.)
   ═══════════════════════════════════════════════════════════════ */

html, body { max-width: 100vw; }
body { overflow-x: hidden; }
.toast { bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important; max-width: calc(100vw - 16px); }

/* Chat topbar kebab — hidden on desktop, shown on mobile to reveal
   date/search/autocorrect toggles that otherwise hide at <=480px. */

@media(max-width:480px){
  /* Kebab becomes the access point for extras on phones. */
  /* Extras stay display:none UNLESS user toggled the kebab open. !important is required
     because the autocorrect label is rendered with an inline style="display:inline-flex"
     which beats a plain class rule. Same logic for the expanded state. */

  /* ─ Online Today / History ─ desktop reserves 140px name + 380px nums +
     a 388px right margin on every detail bar. On a 360px phone that is
     already wider than the whole viewport, so the timeline bar renders
     off-screen. Stack the row on mobile. */
  .ot-row{flex-wrap:wrap;row-gap:6px;align-items:flex-start;gap:6px;}
  .ot-name{width:100%;min-width:0;font-size:14px;}
  .ot-bar-wrap{width:100%;flex:1 1 100%;min-width:0;order:2;}
  .ot-nums{width:100%;min-width:0;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;order:3;font-size:10.5px;gap:4px 10px;}
  .ot-hour-markers{margin-left:0;margin-right:0;}
  .ot-detail-row{flex-wrap:wrap;gap:4px;}
  .ot-detail-label{width:100%;min-width:0;text-align:left;padding-right:0;padding-left:4px;}
  .ot-detail-bar{width:100%;min-width:0;margin-right:0;flex:1 1 100%;}
  .ot-detail-summary{margin-left:0;margin-right:0;padding:6px 4px;}
  .ot-detail.open{max-height:9999px;}
  .oh-day-notes{max-width:none;white-space:normal;}

  /* ─ Payment Autofill ─ desktop 5-7 hard-coded px columns totalling
     450-540px. Collapse into a single column on phones. */
  .platform-row-autofill,
  .platform-row-autofill.is-streamate{grid-template-columns:1fr !important;gap:4px;}
  .platform-row-autofill > *,
  .platform-row-autofill.is-streamate > *{min-width:0;width:100%;}

  /* ─ Generic grid collapse ─ any repeated minmax(Npx,1fr) auto-fill
     grid that assumed a 300-340px minimum column width forces a 2nd
     column even on a 360px screen, causing overflow. */
  .stats-grid,
  .platforms-grid,
  .rates-grid,
  .reset-grid,
  .models-grid,
  .rooms-grid,
  .goals-grid,
  .shift-monitor-grid,
  .perf-grid,
  .hof-grid,
  .cards-grid,
  .platform-row{grid-template-columns:1fr !important;gap:10px;}

  /* ─ Notification bell dropdown ─ don't clip at narrow widths. */
  .notif-panel{width:calc(100vw - 16px) !important;left:8px !important;right:8px !important;max-width:none;}

  /* ─ Chat Gallery side panel ─ the JS sets inline width:340px which on
     a 360px phone covers the message view entirely. Force full-width
     with an attribute selector that matches the inline style. */

  /* ─ Inline fixed-px widths ─ dynamically rendered HTML sprinkles
     width:100px / 110px / 120px on search boxes, date pickers, status
     inputs and selects. These bypass every media query. Normalise them. */
  input[style*="width:100px"],
  input[style*="width:110px"],
  input[style*="width:120px"],
  input[style*="width:140px"],
  input[style*="width:160px"],
  select[style*="min-width:160px"],
  select[style*="min-width:180px"],
  input[style*="min-width:160px"],
  input[style*="min-width:180px"]{width:100% !important;min-width:0 !important;max-width:180px;}

  /* ─ Sidebar drawer logout ─ sticky-bottom so it stays visible even
     when the nav items scroll past the fold inside the drawer. */
  .sidebar{display:flex;flex-direction:column;}
  .sidebar-nav{flex:1 1 auto;}
  .sidebar-bottom{position:sticky;bottom:0;background:var(--bg2);border-top:1px solid var(--border);margin-top:auto;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:2;}

  /* ─ Chat topbar gap ─ scale with viewport instead of fixed 6px. */

  /* ─ Main topbar compaction ─ status selector (Phone only + custom msg input),
     currency badge, theme toggle all overflow on phones. Hide the non-essential
     ones on mobile; admin can still access them from desktop. */
  #nx-status-wrap{display:none !important;}
  #nx-currency-pill,
  .nx-currency-pill,
  [id*="currency-pill"]{display:none !important;}
  #theme-toggle,
  .theme-toggle-btn{display:none !important;}
  .topbar-right{gap:4px !important;flex-wrap:wrap;justify-content:flex-end;}
  .topbar{gap:6px !important;padding:0 10px !important;}
  .topbar .page-title{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  #conn-mode-pill{font-size:9px !important;padding:2px 6px !important;}
  #nx-hard-reload{padding:3px 6px !important;font-size:14px !important;}

  /* ─ Modals: ensure the close button + scrollable body fit. */
  .modal, .modal-wide{max-height:calc(100dvh - env(safe-area-inset-bottom) - 16px);overflow-y:auto;}
}

/* ─ Extra-narrow: Android "Display size = Large", iOS Display Zoom, older phones ─ */
@media(max-width:360px){
  .content{padding:8px 6px !important;}
  .modal, .modal-wide{padding:14px 10px !important;border-radius:10px;}
  .topbar{padding:0 8px !important;gap:4px !important;}
  .stat-value{font-size:15px !important;}
  .auth-box{padding:16px 10px !important;}
  .nav-item{padding:8px 10px !important;font-size:12.5px !important;}
  .ot-name{font-size:13px;}
  .section-header .section-title{font-size:15px;}
  .btn{font-size:11.5px;padding:5px 10px;}
  .btn-sm{font-size:10.5px;padding:3px 8px;}
}

@media(max-width:320px){
  .content{padding:6px 4px !important;}
  .modal, .modal-wide{padding:10px 8px !important;border-radius:8px;}
  .btn{font-size:11px !important;padding:5px 8px !important;min-height:32px !important;}
  .btn-sm{font-size:10px !important;padding:3px 6px !important;}
  .nav-item{font-size:12px !important;padding:7px 8px !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   v40.64.x — Sidebar pin/collapse + logout redesign + scrollbar visibility.
   Scoped narrowly on purpose — broad selectors broke expandable detail rows.
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar COLLAPSED state (any width where collapse is offered): 56px icon rail. */
body.sb-collapsed .sidebar{width:56px;min-width:56px;--sidebar-w:56px;}
body.sb-collapsed .sidebar-logo .logo-mark,
body.sb-collapsed .sidebar-logo .logo-role,
body.sb-collapsed .sidebar-section,
body.sb-collapsed .nav-item > span:not(.icon):not(.nav-badge),
body.sb-collapsed .user-name,
body.sb-collapsed .user-role,
body.sb-collapsed .logout-label,
body.sb-collapsed .nav-badge{display:none !important;}
body.sb-collapsed .sidebar-logo{padding:12px 10px;justify-content:center;}
body.sb-collapsed .nav-item{justify-content:center;padding:10px 6px;margin:1px 4px;}
body.sb-collapsed .nav-item .icon{width:auto;font-size:18px;}
body.sb-collapsed .sidebar-bottom{padding:10px 6px;}
body.sb-collapsed .user-card{justify-content:center;gap:6px;flex-wrap:wrap;}
body.sb-collapsed .user-avatar{width:32px;height:32px;font-size:12px;}
body.sb-collapsed .logout-btn{width:auto !important;padding:6px !important;justify-content:center !important;}

/* Pin/collapse toggle — visible whenever the sidebar renders as a fixed rail
   (desktop + tablet + phone LANDSCAPE). Hidden only on narrow drawer layouts
   where the ☰ hamburger replaces it. */
.sidebar-pin-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:6px 8px;border-radius:6px;transition:color .15s,background .15s;margin-left:auto;flex-shrink:0;line-height:1;}
.sidebar-pin-btn:hover{color:var(--accent);background:var(--bg3);}
@media(max-width:640px){ .sidebar-pin-btn{display:none;} }

/* ═══ LOGOUT FOOTER on phone (narrow drawer) ═══
   One row: avatar + name/role + red ⏻ button right-aligned.
   Button is clearly red and large enough to hit, no more disappearing icon. */
@media(max-width:768px){
  .sidebar-bottom{padding:12px 14px !important;}
  .sidebar-bottom .user-card{display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:nowrap !important;min-width:0 !important;width:100% !important;}
  .sidebar-bottom .user-avatar{flex-shrink:0 !important;}
  .sidebar-bottom .user-card > div[style*="min-width:0"]{flex:1 1 auto !important;min-width:0 !important;overflow:hidden !important;}
  .logout-btn{background:rgba(239,68,68,.18) !important;color:var(--red) !important;font-size:13px !important;padding:8px 12px !important;border-radius:8px !important;width:auto !important;gap:6px !important;margin-left:auto !important;justify-content:center !important;flex-shrink:0 !important;display:inline-flex !important;align-items:center !important;}
  .logout-btn:active{background:rgba(239,68,68,.32) !important;}
  .logout-label{display:inline !important;font-size:13px !important;font-weight:500 !important;font-family:'Inter',sans-serif !important;}
}

/* ═══ PHONE SIDEBAR — kill any edge-bleed by forcing the drawer fully
   off-screen AND invisible when closed. visibility:hidden guarantees no
   leak regardless of subpixel rounding or ancestor transforms. ═══ */
@media(max-width:768px){
  .sidebar{transform:translate3d(-110%,0,0) !important;visibility:hidden !important;box-shadow:none !important;transition:transform .3s,visibility 0s .3s !important;}
  .sidebar.open{transform:translate3d(0,0,0) !important;visibility:visible !important;box-shadow:2px 0 24px rgba(0,0,0,.5) !important;transition:transform .3s,visibility 0s 0s !important;}
}

/* ═══ Scrollbars — make them VISIBLE on phones for wide tables. ═══ */
@media(max-width:768px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-wrap::-webkit-scrollbar{height:8px;}
  .table-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}
  .table-wrap::-webkit-scrollbar-thumb{background:rgba(46,204,113,.6);border-radius:4px;}
  .table-wrap{scrollbar-width:thin;scrollbar-color:rgba(46,204,113,.6) rgba(255,255,255,.05);}
}

/* ═══ Toolbar wrapping — ONLY the specific Online Today / Online History
   button clusters so we don't mess with any other flex layout. ═══ */
@media(max-width:768px){
  #page-online-tracking > div:first-child,
  #page-online-history  > div:first-child{flex-wrap:wrap !important;row-gap:8px !important;}
  #page-online-tracking > div:first-child > div:last-child,
  #page-online-history  > div:first-child > div:last-child{flex-wrap:wrap !important;row-gap:6px !important;}
}