:root{
  --bg:#171b23; --surface:#212732; --surface2:#2a313e; --border:#3b4456;
  --text:#f3f6fb; --muted:#a8b1c3; --faint:#7e8a9e;
  --in:#34d399; --inbg:#15301f; --inbd:#2c6b4d;
  --out:#f87171; --outbg:#331a1a;
  --amber:#fbbf24; --amberbg:#2a2010;
  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --disp:'Bebas Neue',Impact,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;}
button,input,select{font-family:var(--font);}
.hidden{display:none!important;}
a{color:inherit;text-decoration:none;}

/* ---- top bar ---- */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:15px 26px;border-bottom:1px solid var(--border);background:var(--surface);}
.topbar .clockwrap{text-align:center;}
.topbar .admincell{text-align:right;display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.brand{font-family:var(--disp);font-size:1.9rem;letter-spacing:.13em;line-height:1;}
.sub{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:3px;}
.clock{font-family:var(--mono);font-size:1.7rem;line-height:1;text-align:center;}
.clockdate{font-size:.72rem;color:var(--muted);margin-top:4px;text-align:center;}
.who{font-family:var(--mono);font-size:.78rem;color:var(--muted);}
.adminbtn{background:var(--amberbg);border:1px solid #fbbf2444;border-radius:10px;padding:9px 16px;color:var(--amber);font-size:.8rem;font-weight:600;letter-spacing:.05em;cursor:pointer;}
.backbtn,.logoutbtn{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 16px;color:var(--text);font-size:.82rem;font-weight:600;cursor:pointer;}

/* ---- shared layout ---- */
.pad{padding:30px 22px 50px;max-width:1100px;margin:0 auto;}

/* ---- form controls ---- */
.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:12px 13px;color:var(--text);font-size:.95rem;outline:none;}
.input:focus{border-color:#5b6a86;}
.btn{padding:12px 18px;border-radius:9px;font-size:.92rem;font-weight:700;cursor:pointer;border:none;}
.btn.amber{background:var(--amber);color:#0b0d11;}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn.danger{background:transparent;color:var(--out);border:1px solid #5b1d1d;}
label.field{display:block;margin-bottom:14px;}
label.field .lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:6px;}
.checkline{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text);cursor:pointer;}

/* ---- login ---- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.loginbox{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:min(380px,94vw);padding:38px 34px;}
.loginbox .brand{font-size:2.4rem;text-align:center;margin-bottom:4px;}
.loginbox .sub{text-align:center;margin-bottom:26px;}
.loginerr{background:var(--outbg);border:1px solid #5b1d1d;color:var(--out);border-radius:9px;padding:10px 13px;font-size:.85rem;margin-bottom:16px;}
.loginbox .btn{width:100%;margin-top:6px;letter-spacing:.06em;}

/* ---- portal cards ---- */
.grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;}
.card{width:240px;max-width:100%;background:var(--surface2);border:1.5px solid #47526a;border-radius:14px;padding:20px 18px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:0;min-height:108px;transition:transform .1s,border-color .15s,background .15s;box-shadow:0 2px 10px rgba(0,0,0,.2);}
.card:hover{border-color:#5b6680;background:#333b49;}
.card:active{transform:scale(.98);}
.card .cardname{font-family:var(--disp);font-size:1.7rem;letter-spacing:.05em;line-height:1.05;margin-bottom:6px;}
.card .cardsub{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.03em;line-height:1.35;min-height:calc(1.35em * 2);}
.empty{color:var(--muted);font-size:.92rem;text-align:center;padding:50px 18px;line-height:1.6;}

/* ---- admin ---- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:22px;}
.panel h2{font-family:var(--disp);font-size:1.6rem;letter-spacing:.05em;margin:0 0 4px;font-weight:400;}
.panel .phint{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin:0 0 18px;}
.addrow{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:20px;}
.addrow.users{grid-template-columns:1fr 1fr auto;}
@media(max-width:760px){.addrow,.addrow.users{grid-template-columns:1fr;}}
.addrow label.field{margin-bottom:0;}

.listrow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;flex-wrap:wrap;}
.listrow .grow{flex:1;min-width:140px;}
.listrow .rname{font-weight:700;font-size:1rem;}
.listrow .rmeta{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:2px;}
.tag{font-family:var(--mono);font-size:.66rem;color:#0b0d11;background:var(--amber);padding:2px 7px;border-radius:5px;letter-spacing:.04em;font-weight:600;}
.rmbtn{background:transparent;border:1px solid #5b1d1d;color:var(--out);border-radius:7px;padding:7px 12px;font-size:.78rem;cursor:pointer;}
.minibtn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 12px;font-size:.78rem;cursor:pointer;}

details.editor{margin:6px 0 14px;}
details.editor>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.76rem;color:var(--amber);padding:4px 0;}
details.editor>summary::-webkit-details-marker{display:none;}

/* clickable rows: the whole row is the summary; expands to an attached panel */
.rowcard{margin-bottom:8px;}
.rowcard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;}
.rowcard>summary::-webkit-details-marker{display:none;}
.rowcard>summary:hover{border-color:#54627e;background:#333b49;}
.rowcard[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;}
.rowsummary .grow{flex:1;min-width:0;}
.rowsummary .rname{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px;}
.rowsummary .rmeta{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:2px;word-break:break-all;}
.tag{font-family:var(--mono);font-size:.66rem;color:#0b0d11;background:var(--amber);padding:3px 7px 2px;border-radius:5px;letter-spacing:.04em;font-weight:600;line-height:1;display:inline-flex;align-items:center;}
.chev{color:var(--muted);font-size:1rem;transition:transform .15s;flex:none;}
.rowcard[open] .chev{transform:rotate(180deg);}
.rowcard .editorbody{border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;padding:18px;background:#1c222d;margin-top:0;}
.rmlink{background:transparent;border:none;border-top:1px solid var(--border);color:var(--out);font-size:.8rem;cursor:pointer;padding:12px 0 0;margin-top:14px;width:100%;text-align:left;}
.rmlink:hover{color:#ff9494;}
.editorbody{border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:8px;background:#1c222d;}
.editorbody .blk{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.editorbody .blk:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.editorbody .blktitle{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);margin-bottom:10px;text-transform:uppercase;}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:12px;}
.permitem{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:.86rem;cursor:pointer;}
.inlineform{display:flex;gap:8px;align-items:end;flex-wrap:wrap;}

.flash{background:var(--inbg);border:1px solid var(--inbd);color:var(--in);border-radius:10px;padding:11px 16px;font-size:.88rem;margin-bottom:18px;}

/* ---- calmer native form controls ---- */
:root{ color-scheme: dark; }                       /* dark-themes native bits (spinners, scrollbars) */
input[type="checkbox"]{ accent-color: var(--in); } /* calm green tick instead of harsh red */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{ opacity:1; }  /* always-visible, blended order arrows */