:root { --red:#D81A21; --ink:#1F1A1A; --muted:#6B625E; --line:#E6DFD4; --bg:#F7F4EE; --card:#FFFDF9; --side:#201A1A; --side-ink:#D9CFC4; --green:#1E7A45; --amber:#B26A00; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, Arial, sans-serif; color:var(--ink); background:var(--bg); font-size:14px; }
a { color:inherit; }
button, input, select, textarea { font:inherit; }
input, select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:2px solid #F3C1C3; border-color:var(--red); }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; text-decoration:none; }
.btn.primary { background:var(--red); color:#fff; border-color:var(--red); }
.btn.sm { padding:5px 10px; font-size:13px; }
.btn.ghost { background:transparent; }
.btn:disabled { opacity:.5; cursor:default; }
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--side); color:var(--side-ink); padding:18px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.side .brand { padding:4px 8px 6px; } .side .brand img { width:170px; }
.side .tagline { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#F2A33A; padding:0 10px 14px; }
.side nav a { display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--side-ink); }
.side nav a.on { background:var(--red); color:#fff; font-weight:600; }
.side nav a:hover:not(.on) { background:rgba(255,255,255,.06); }
.side .me { margin-top:auto; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; }
.side .me b { display:block; color:#fff; } .side .me button { background:none; border:0; color:#F2A33A; padding:0; cursor:pointer; font-size:12px; margin-right:12px; }
.main { padding:26px 30px 60px; min-width:0; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
h1 { font-size:24px; margin:0 0 4px; } h2 { font-size:17px; margin:0 0 10px; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; text-decoration:none; display:block; }
.tile:hover { border-color:var(--ink); } .tile .t { font-weight:700; font-size:16px; } .tile .n { font-size:26px; font-weight:800; }
.tag { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:600; background:#EFE9DF; color:var(--ink); }
.tag.red { background:#FBE3E4; color:#A31218; } .tag.green { background:#E1F3E8; color:var(--green); } .tag.amber { background:#FCEFD9; color:var(--amber); }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .form .wide { grid-column:1 / -1; } label.f { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; } .tabs a { padding:9px 14px; text-decoration:none; border-bottom:3px solid transparent; color:var(--muted); font-weight:600; } .tabs a.on { color:var(--ink); border-color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:30px; }
.modal-bg { position:fixed; inset:0; background:rgba(20,15,15,.45); display:flex; align-items:flex-start; justify-content:center; padding:60px 16px; z-index:50; overflow:auto; }
.modal { background:#fff; border-radius:14px; padding:22px; width:min(560px, 100%); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal h2 { margin-bottom:14px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:10px; z-index:60; }
.toast.err { background:#A31218; }
.login { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.login .art { background:var(--side); color:#F7F4EE; padding:60px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.login .art img { width:260px; } .login .art h1 { font-size:34px; color:#fff; } .login .art p { color:var(--side-ink); font-size:16px; line-height:1.5; max-width:460px; }
.login form { padding:60px; display:flex; flex-direction:column; justify-content:center; gap:14px; max-width:460px; width:100%; margin:auto; }
.secret { font-family:ui-monospace, Menlo, monospace; font-size:22px; letter-spacing:2px; padding:12px; background:#F7F4EE; border-radius:8px; text-align:center; user-select:all; }
.devby { text-align:center; font-size:12px; color:var(--muted); padding:18px; }
@media (max-width: 760px) {
  .shell { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px; }
  .side .brand img { width:120px; } .side .tagline { display:none; } .side nav { display:flex; flex-wrap:wrap; gap:2px; } .side .me { margin:0; border:0; width:100%; }
  .main { padding:18px 16px 50px; } .form { grid-template-columns:1fr; } .login { grid-template-columns:1fr; } .login .art { padding:30px 24px; } .login form { padding:30px 24px; }
  table { font-size:13px; }
}
.login .art .client { font-size:15px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#F2A33A; }