:root{
  --ink:#0b0b0e;--panel:#15151b;--line:#26262f;--text:#e9e9ee;--muted:#8f8f9d;
  --yellow:#ffc400;--radius:14px
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font:15px/1.6 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.shell{display:flex;min-height:100vh}

/* Sidebar */
.side{width:262px;flex:0 0 262px;background:#101014;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;gap:12px;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.side-brand img{height:34px;width:auto}
.side-brand span{font-weight:700;letter-spacing:.02em;line-height:1.1}
.side-brand small{display:block;font-weight:500;font-size:11.5px;color:var(--yellow);letter-spacing:.05em}
.side-nav{padding:14px 12px;display:grid;gap:4px;overflow:auto;flex:1}
.side-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  color:var(--muted);font-size:14.5px;transition:.2s}
.side-nav a svg{width:19px;height:19px;flex:0 0 auto}
.side-nav a:hover{background:#1a1a21;color:var(--text)}
.side-nav a.on{background:rgba(255,196,0,.12);color:var(--yellow)}
.badge{margin-left:auto;background:var(--yellow);color:#111;font-size:11.5px;border-radius:99px;padding:1px 8px}
.side-foot{border-top:1px solid var(--line);padding:14px 18px;display:grid;gap:8px;font-size:14px}
.side-foot a{color:var(--muted)}.side-foot a:hover{color:var(--yellow)}
.side-foot .out{color:#ff7a7a}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 24px;background:#0e0e12;position:sticky;top:0;z-index:20}
.who{margin-left:auto;color:var(--muted);font-size:13.5px}
.side-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer}
.side-toggle svg{width:24px;height:24px}
.content{padding:28px 24px 60px;max-width:1180px;width:100%}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:24px;letter-spacing:-.01em}
.page-head .btn{margin-left:auto}
.hint{color:var(--muted);font-size:13.5px;margin:5px 0 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--yellow);
  color:#111;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14px;transition:.2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-danger{background:transparent;border:1px solid #4a2626;color:#ff8080}
.btn-danger:hover{background:#2a1414;border-color:#ff8080}

/* Panels + tables */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.grid{width:100%;border-collapse:collapse}
table.grid th{text-align:left;font-size:12.5px;text-transform:none;color:var(--muted);
  font-weight:600;padding:14px 16px;border-bottom:1px solid var(--line);background:#121217}
table.grid td{padding:12px 16px;border-bottom:1px solid #1e1e26;vertical-align:middle;font-size:14px}
table.grid tr:last-child td{border-bottom:0}
table.grid tr:hover td{background:#17171e}
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.thumb{height:38px;width:auto;max-width:110px;object-fit:contain;background:#fff;border-radius:6px;padding:4px}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12.5px;
  background:#1e1e27;border:1px solid var(--line);color:var(--muted)}
.pill.on{background:rgba(61,220,132,.14);border-color:rgba(61,220,132,.4);color:#8ff0bb}
.pill.off{background:rgba(255,255,255,.05)}

/* Forms */
.form{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:7px;grid-column:1 / -1}
.fld.half{grid-column:auto}
.fld label{font-size:13.5px;font-weight:600;color:#c9c9d6}
.fld input[type=text],.fld input[type=number],.fld input[type=password],.fld input[type=email],
.fld textarea,.fld select{
  width:100%;padding:11px 13px;border-radius:10px;background:#0e0e13;border:1px solid var(--line);
  color:var(--text);font:inherit}
.fld textarea{resize:vertical;min-height:100px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--yellow);outline:none}
.fld input[type=file]{font-size:13.5px;color:var(--muted)}
.switch{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--muted);font-size:14px}
.switch input{width:18px;height:18px;accent-color:var(--yellow)}
.img-current{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.img-current img{height:56px;background:#fff;border-radius:8px;padding:6px}
.form-actions{grid-column:1 / -1;display:flex;gap:10px;border-top:1px solid var(--line);padding-top:20px}
.notice{padding:13px 17px;border-radius:12px;margin-bottom:20px;font-size:14.5px}
.notice.ok{background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.4);color:#8ff0bb}
.notice.bad{background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.4);color:#ffabab}

/* Dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:28px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  transition:.25s;display:block}
.tile:hover{border-color:rgba(255,196,0,.5);transform:translateY(-3px)}
.tile b{display:block;font-size:30px;color:var(--yellow);line-height:1.1}
.tile span{color:var(--muted);font-size:13.5px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(60% 50% at 50% 20%,rgba(255,196,0,.10),transparent 70%),var(--ink)}
.login-card{width:min(100%,410px);background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:34px}
.login-card img{height:54px;width:auto;margin:0 auto 16px;display:block}
.login-card h1{text-align:center;font-size:20px;margin:0 0 4px}
.login-card p.sub{text-align:center;color:var(--muted);font-size:13.5px;margin:0 0 24px}

/* Message viewer */
.msg{padding:20px;border-bottom:1px solid #1e1e26}
.msg.unread{background:rgba(255,196,0,.05)}
.msg h4{margin:0 0 4px;font-size:15px}
.msg .meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.msg p{margin:0;white-space:pre-wrap;color:#c9c9d6;font-size:14.5px}

@media(max-width:900px){
  .side{position:fixed;z-index:60;transform:translateX(-100%);transition:transform .3s}
  .side.open{transform:none}
  .side-toggle{display:block}
  .form{grid-template-columns:1fr}
  .fld.half{grid-column:1 / -1}
}