:root{
  --bg:#0b0d10;
  --panel:#12161c;
  --panel-2:#181e26;
  --line:#28313d;
  --text:#eef3f7;
  --muted:#8d9aaa;
  --accent:#a8ff60;
  --accent-2:#63b3ff;
  --danger:#ff6b6b;
  --warning:#ffd166;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#090b0e,#10141a);
  color:var(--text);
}
button,input,textarea,select{font:inherit}
.app{min-height:100vh;display:grid;grid-template-columns:280px 1fr}
.sidebar{
  padding:22px;
  border-right:1px solid var(--line);
  background:rgba(8,10,13,.92);
  position:sticky;top:0;height:100vh;overflow:auto;
}
.brand-mark{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--accent)}
h1{font-size:28px;margin:8px 0 4px}
.subtitle{color:var(--muted);font-size:13px;line-height:1.5}
.nav{margin-top:24px;display:grid;gap:8px}
.nav button,.action{
  border:1px solid transparent;
  background:transparent;color:var(--muted);
  padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer
}
.nav button:hover,.nav button.active{background:var(--panel);color:var(--text);border-color:var(--line)}
.sidebar-actions{margin-top:24px;display:grid;gap:10px}
.action{border-color:var(--line);text-align:center;background:var(--panel)}
.action.primary{background:var(--accent);color:#0a0d0f;font-weight:800;border-color:var(--accent)}
.action:hover{filter:brightness(1.07)}
main{padding:28px;min-width:0}
.topbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap}
.status-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:var(--panel)}
.badge.ok{color:var(--accent);border-color:rgba(168,255,96,.35)}
.badge.warn{color:var(--warning);border-color:rgba(255,209,102,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:rgba(18,22,28,.92);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.card h3{margin:0 0 12px;font-size:15px}
.metric{font-size:30px;font-weight:900}
.muted{color:var(--muted)}
.panel{display:none}
.panel.active{display:block}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:9px 12px;border-radius:9px;cursor:pointer}
.toolbar button:hover{border-color:var(--accent-2)}
textarea{
  width:100%;min-height:66vh;resize:vertical;
  border:1px solid var(--line);border-radius:14px;
  background:#080b10;color:#dce6ef;padding:16px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.5
}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:880px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#11161d;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
td input,td textarea,td select{
  width:100%;background:#0c1015;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px
}
td textarea{min-height:70px;font-family:inherit}
.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.swatch-color{height:82px}
.swatch-info{padding:10px;font-size:12px}
.rule-list{display:grid;gap:8px}
.rule{padding:10px 12px;border-left:4px solid var(--accent-2);background:#101720;border-radius:8px}
.rule.bad{border-color:var(--danger);background:#1c1214}
.rule.good{border-color:var(--accent);background:#101a12}
.dropzone{
  border:1px dashed var(--line);border-radius:14px;padding:28px;text-align:center;color:var(--muted);
  background:rgba(18,22,28,.6)
}
.hidden{display:none}
.validation{display:grid;gap:8px}
.validation-item{padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel)}
.validation-item.ok{border-color:rgba(168,255,96,.3)}
.validation-item.warn{border-color:rgba(255,209,102,.3)}
footer{padding:22px 0 4px;color:var(--muted);font-size:12px}
@media(max-width:840px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav{display:flex;overflow:auto}.nav button{min-width:max-content}
}