:root{
  --bg:#0b1120; --panel:#111c30; --card:#16233b; --accent:#38bdf8; --accent2:#0ea5e9;
  --text:#e2e8f0; --muted:#94a3b8; --border:#26354f;
  --green:#22c55e; --red:#ef4444; --amber:#eab308;
  --input:#0a1322; --ghost:#1c2c47; --code:#0a1322; --on-accent:#04293f;
}
:root[data-theme="light"]{
  --bg:#eef2f7; --panel:#ffffff; --card:#f7fafc; --accent:#0284c7; --accent2:#0369a1;
  --text:#0f172a; --muted:#475569; --border:#dbe3ee;
  --input:#ffffff; --ghost:#e8eef6; --code:#f1f5f9; --on-accent:#ffffff;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     background:var(--bg);color:var(--text);min-height:100vh;}
a{color:var(--accent);text-decoration:none;}

/* layout */
.layout{display:flex;min-height:100vh;}
.sidebar{width:230px;flex:0 0 230px;background:var(--panel);border-right:1px solid var(--border);
         display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;}
.content{flex:1;display:flex;flex-direction:column;min-width:0;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding:4px 6px;}
.brand .logo{width:36px;height:36px;flex:0 0 auto;}
.brand b{font-size:15px;display:block;} .brand small{color:var(--muted);font-size:11px;}
.side-nav{display:flex;flex-direction:column;gap:4px;}
.side-nav a{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;font-weight:600;
            padding:10px 12px;border-radius:9px;}
.side-nav a:hover{color:var(--text);background:var(--card);}
.side-nav a.active{color:var(--on-accent);background:var(--accent);}
.side-nav .ic{font-size:15px;width:18px;text-align:center;}
.side-role{margin-top:auto;font-size:11px;color:var(--muted);padding:10px 6px;border-top:1px solid var(--border);}

/* topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--border);
        background:var(--panel);position:sticky;top:0;z-index:10;}
.topbar .title{font-size:16px;font-weight:700;margin-right:auto;}
.topbar .who{font-size:12px;color:var(--muted);}
.bell{position:relative;background:var(--card);border:1px solid var(--border);color:var(--text);
      width:38px;height:38px;border-radius:9px;font-size:16px;cursor:pointer;display:flex;
      align-items:center;justify-content:center;}
.bell .badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;
      font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;
      justify-content:center;padding:0 4px;}
.theme-btn{background:var(--card);border:1px solid var(--border);color:var(--text);width:38px;height:38px;
      border-radius:9px;font-size:16px;cursor:pointer;}
.theme-btn:hover,.bell:hover{border-color:var(--accent);}

@media(max-width:760px){
  .layout{flex-direction:column;}
  .sidebar{width:auto;flex:none;height:auto;position:sticky;top:0;z-index:20;flex-direction:row;align-items:center;
           padding:8px 12px;gap:4px;overflow-x:auto;}
  .brand{margin-bottom:0;margin-right:auto;gap:8px;} .brand small{display:none;} .brand b{font-size:14px;}
  .brand .logo{width:30px;height:30px;}
  .side-nav{flex-direction:row;gap:2px;flex:0 0 auto;} .side-nav a{padding:9px 11px;} .side-nav .label{display:none;}
  .side-role{display:none;}

  .topbar{padding:10px 14px;gap:10px;}
  .topbar .title{font-size:15px;}
  .topbar .who{display:none;}            /* email hidden on small screens to save room */

  .wrap{padding:18px 14px 48px;}
  h1.page{font-size:20px;} p.lead{font-size:13px;}
  .panel{padding:14px;}
  th,td{padding:8px 8px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .row>*{min-width:120px;}

  /* prevent iOS auto-zoom when focusing inputs */
  input,select,textarea{font-size:16px;}
  .msel-toggle{font-size:15px;}
}
@media(max-width:430px){
  .stats{grid-template-columns:1fr 1fr;gap:8px;}
  .stat b{font-size:20px;}
  .side-nav a{padding:8px 9px;}
  .btn,button{font-size:13px;}
}

.wrap{max-width:1040px;margin:0 auto;padding:24px 20px 56px;width:100%;}
.narrow{max-width:760px;}

/* components */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:16px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;}
h1.page{font-size:24px;margin:0 0 6px;}
p.lead{color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.6;}
.panel h2,.card h2{font-size:14px;margin:0 0 14px;}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;}
input,select,textarea{width:100%;padding:10px 11px;border-radius:9px;border:1px solid var(--border);
     background:var(--input);color:var(--text);font-size:13px;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
textarea{resize:vertical;min-height:110px;line-height:1.5;}
input[type=checkbox],input[type=radio]{width:auto;margin:0;accent-color:var(--accent);}
.chk{display:flex;align-items:center;gap:9px;padding:7px 8px;font-size:13px;color:var(--text);margin:0;cursor:pointer;border-radius:6px;}
.chk:hover{background:var(--card);}
.sep{border:0;border-top:1px solid var(--border);margin:6px 2px;}
.proj-count{font-size:11px;color:var(--muted);margin-top:5px;}
.msel{position:relative;}
.msel-toggle{width:100%;text-align:left;background:var(--input);border:1px solid var(--border);color:var(--text);
  padding:10px 11px;border-radius:9px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.msel-toggle:hover{border-color:var(--accent);}
.msel-caret{color:var(--muted);font-size:11px;transition:transform .15s;}
.msel.open .msel-caret{transform:rotate(180deg);}
.msel-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;display:none;
  background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:8px;
  max-height:320px;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.45);}
.msel.open .msel-panel{display:block;}
.msel-search{margin-bottom:6px;}
.row{display:flex;gap:10px;flex-wrap:wrap;} .row>*{flex:1;min-width:160px;}
button,.btn{border:0;border-radius:9px;padding:10px 14px;font-weight:600;font-size:13px;cursor:pointer;
            display:inline-block;}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-ghost{background:var(--ghost);color:var(--text);}
.btn-danger{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid #7f1d1d;}
.btn-sm{padding:6px 10px;font-size:12px;}
.full{width:100%;}
button:disabled{opacity:.55;cursor:not-allowed;}
.hint{font-size:11px;color:var(--muted);margin-top:5px;}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.pill.ok{background:rgba(34,197,94,.15);color:#86efac;border:1px solid #166534;}
.pill.no{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid #7f1d1d;}
.pill.role{background:rgba(56,189,248,.15);color:#7dd3fc;border:1px solid #0369a1;}

.note{margin-top:12px;padding:11px;border-radius:9px;font-size:12.5px;display:none;}
.note.show{display:block;}
.note.ok{background:rgba(34,197,94,.1);border:1px solid var(--green);color:#bbf7d0;}
.note.err{background:rgba(234,179,8,.1);border:1px solid var(--amber);color:#fde68a;}

table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;}
td.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all;}
tr.unread td{background:rgba(56,189,248,.06);}
.empty{color:var(--muted);font-size:12.5px;padding:10px 0;}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--on-accent);border-top-color:transparent;
      border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:6px;}
@keyframes s{to{transform:rotate(360deg);}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat b{font-size:24px;display:block;} .stat span{color:var(--muted);font-size:12px;}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:380px;}
.login-card .logo-lg{width:54px;height:54px;margin:0 auto 14px;display:block;}