:root {
  --bg: #070b16;
  --panel: #101624;
  --stroke: rgba(255,255,255,.1);
  --muted: #8d9ab3;
  --text: #f6f8ff;
  --amber: #f59e0b;
  --red: #ef4444;
  --green: #22c55e;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}
body[data-theme="light"] {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --stroke: rgba(15,23,42,.12);
  --muted: #64748b;
  --text: #111827;
  --shadow: 0 18px 50px rgba(15,23,42,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Tahoma, Arial, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
body[data-theme="light"]::before { background: linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px); background-size: 56px 56px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app { position: relative; display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: 100vh; gap: 18px; padding: 18px; }
.sidebar, .topbar, .card, .modal, .toast { background: rgba(16,22,36,.88); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
body[data-theme="light"] .sidebar, body[data-theme="light"] .topbar, body[data-theme="light"] .card, body[data-theme="light"] .modal, body[data-theme="light"] .toast { background: rgba(255,255,255,.94); }
.sidebar { border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; height: calc(100vh - 36px); overflow:auto; }
.brand { display:flex; align-items:center; gap:12px; padding: 8px; }
.logo { width:44px; height:44px; border-radius: 8px; display:grid; place-items:center; background: linear-gradient(135deg, var(--amber), var(--red)); color:#111827; font-weight:900; object-fit:cover; }
.image-logo { background:#fff; padding:2px; }
.brand b { display:block; font-size:18px; }
.brand span { display:block; color: var(--muted); font-size:12px; margin-top:3px; }
.nav { display:grid; gap:14px; }
.nav-group { display:grid; gap:7px; }
.nav-group p { margin:0 4px 2px; color:#71809d; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0; }
.nav button { width:100%; display:flex; align-items:center; gap:10px; border:1px solid transparent; color:#b9c3d8; background:transparent; padding:12px; border-radius: 10px; text-align:right; transition:.18s; }
body[data-theme="light"] .nav button { color:#475569; }
.nav button:hover, .nav button.active { color: #fff; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); }
body[data-theme="light"] .nav button:hover, body[data-theme="light"] .nav button.active { color:#111827; background: rgba(245,158,11,.16); }
.nav .ico, .btn .ico { width:22px; text-align:center; }
.side-note { margin-top:auto; border:1px solid var(--stroke); border-radius:8px; padding:14px; color:var(--muted); line-height:1.8; font-size:13px; background:rgba(255,255,255,.03); }
.main { min-width:0; display:flex; flex-direction:column; gap:18px; }
.topbar { min-height:76px; border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; }
.search { position:relative; min-width: 320px; }
.search input { width:100%; height:44px; border-radius:8px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--text); padding:0 42px 0 14px; outline:none; }
.search span { position:absolute; right:14px; top:11px; color:var(--muted); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn { min-height:42px; border:1px solid var(--stroke); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
body[data-theme="light"] .btn { background:#fff; color:#111827; }
.btn.primary { background: linear-gradient(135deg, var(--amber), var(--red)); color:#140c04; border-color: transparent; font-weight:800; }
.btn.good { background: rgba(34,197,94,.13); border-color:rgba(34,197,94,.24); color:#bbf7d0; }
.btn.warn { background: rgba(245,158,11,.13); border-color:rgba(245,158,11,.24); color:#fde68a; }
.btn.danger { background: rgba(239,68,68,.12); border-color:rgba(239,68,68,.24); color:#fecaca; }
.page { display:none; animation: fade .18s ease-out; }
.page.active { display:block; }
@keyframes fade { from { opacity:.5; transform: translateY(6px); } to { opacity:1; transform:none; } }
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-bottom:18px; }
.card { border-radius:8px; padding:18px; }
.card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-title h2, .card-title h3 { margin:0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.kpi { min-height:126px; display:flex; flex-direction:column; justify-content:space-between; }
.kpi .label { color:var(--muted); font-size:13px; }
.kpi .value { font-size:34px; font-weight:900; line-height:1; }
.kpi .hint { color:var(--muted); font-size:12px; }
.gauge-wrap { display:grid; place-items:center; min-height:300px; }
.gauge { width:260px; height:260px; border-radius:50%; background: conic-gradient(var(--red) 0deg, var(--amber) 140deg, rgba(255,255,255,.08) 140deg 360deg); display:grid; place-items:center; position:relative; }
.gauge::after { content:""; position:absolute; inset:26px; border-radius:50%; background:#0b1020; border:1px solid rgba(255,255,255,.06); }
.gauge-content { position:relative; z-index:1; text-align:center; }
.gauge-content b { font-size:58px; color:#ff4d4d; }
.gauge-content span { display:block; color:#fecaca; font-weight:800; }
.chart { height:230px; display:flex; align-items:end; gap:10px; padding-top:20px; border-bottom:1px solid var(--stroke); }
.bar { flex:1; min-width:14px; border-radius:8px 8px 0 0; background:linear-gradient(180deg, var(--amber), var(--red)); position:relative; }
.bar i { position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-style:normal; font-size:11px; color:var(--muted); }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.table-wrap { overflow:auto; border:1px solid var(--stroke); border-radius:8px; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.07); text-align:right; white-space:nowrap; }
th { color:#aab6ce; font-size:12px; background:rgba(255,255,255,.03); }
td { color:#edf2ff; }
body[data-theme="light"] td { color:#111827; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:12px; border:1px solid var(--stroke); color:#dbeafe; background:rgba(255,255,255,.04); }
.badge.good { color:#bbf7d0; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); }
.badge.warn { color:#fde68a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); }
.badge.danger { color:#fecaca; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.22); }
.progress { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress > span { display:block; height:100%; background:linear-gradient(90deg, var(--green), var(--amber)); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.field { display:grid; gap:7px; }
.field label { color:#b7c1d7; font-size:13px; }
.field input, .field select, .field textarea, .filterbar input { width:100%; min-height:44px; border-radius:8px; border:1px solid var(--stroke); background:#121827; color:#fff; padding:10px 12px; outline:none; color-scheme: dark; }
.field select option { background:#121827; color:#fff; }
body[data-theme="light"] .field input, body[data-theme="light"] .field select, body[data-theme="light"] .field textarea, body[data-theme="light"] .filterbar input { background:#fff; color:#111827; color-scheme: light; }
body[data-theme="light"] .field select option { background:#fff; color:#111827; }
.field input:focus, .field select:focus, .field textarea:focus, .filterbar input:focus { border-color:rgba(245,158,11,.55); box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.field textarea { min-height:88px; resize:vertical; }
.form-note { border:1px solid rgba(245,158,11,.24); background:rgba(245,158,11,.1); color:#fde68a; border-radius:8px; padding:12px; line-height:1.8; font-size:13px; }
body[data-theme="light"] .form-note { color:#92400e; background:#fff7ed; border-color:#fed7aa; }
.modal-backdrop { position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.62); z-index:20; padding:18px; }
.modal-backdrop.open { display:grid; }
.modal { width:min(760px, 100%); max-height:90vh; overflow:auto; border-radius:8px; padding:18px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.modal-head h2 { margin:0; }
.list { display:grid; gap:10px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--stroke); border-radius:8px; background:rgba(255,255,255,.03); }
.toast { position:fixed; left:18px; bottom:18px; border-radius:12px; padding:12px 14px; display:none; z-index:30; }
.toast.show { display:block; }
.mobile-menu { display:none; }
.icon-btn { position:relative; min-width:46px; padding:0 12px; }
.dot { position:absolute; top:-7px; left:-7px; min-width:22px; height:22px; border-radius:999px; background:var(--red); display:grid; place-items:center; font-size:11px; font-weight:900; }
.filterbar { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:0 0 14px; }
.filterbar label { display:grid; gap:6px; color:#aab6ce; font-size:12px; min-width:170px; }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; color:var(--muted); }
.mini-actions { display:flex; gap:6px; }
.mini-actions .btn { min-height:34px; padding:0 10px; }
.notice { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); color:#fff; border-radius:8px; padding:12px; text-align:right; }
.notice.warn { border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.1); }
.notice.danger { border-color:rgba(239,68,68,.28); background:rgba(239,68,68,.1); }
.preview-grid, .timeline { display:grid; gap:10px; }
.preview-row, .timeline div { display:grid; grid-template-columns: 1fr 2fr auto; gap:10px; align-items:center; border:1px solid var(--stroke); border-radius:8px; padding:10px; background:rgba(255,255,255,.03); }
.preview-row.ok em { color:#86efac; font-style:normal; }
.preview-row.bad em { color:#fecaca; font-style:normal; }
.brand-preview { min-height:160px; display:grid; place-items:center; gap:10px; text-align:center; border:1px solid var(--stroke); border-radius:8px; background:rgba(255,255,255,.03); }
@media (max-width: 1100px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; right:18px; transform:translateX(120%); z-index:15; width:285px; transition:.2s; }
  .sidebar.open { transform:none; }
  .mobile-menu { display:inline-flex; }
  .hero, .grid-2, .grid-3 { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .search { min-width:0; flex:1; }
}
@media (max-width: 640px) {
  .app { padding:10px; }
  .topbar { align-items:stretch; flex-direction:column; }
  .kpi-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .gauge { width:220px; height:220px; }
}