:root{
  --bg:#0b0f14; --panel:#0f1620; --panel2:#101b28; --text:#e7eef7; --muted:#9bb0c5;
  --border:#243244; --accent:#7aa2f7; --danger:#ff6b6b; --warn:#ffcc66; --ok:#22c55e;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --panel:#ffffff; --panel2:#f1f5fb; --text:#0b1220; --muted:#52667a; --border:#d7e0ea; --accent:#3b82f6; --danger:#dc2626; --warn:#d97706; --ok:#16a34a; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif; background:var(--bg); color:var(--text)}
a{color:var(--accent); text-decoration:none}
.header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--panel),transparent)}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 18px rgba(122,162,247,.6)}
.title{font-weight:700}
.subtitle{color:var(--muted); font-size:12px; margin-top:2px}
.controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.select, .btn, .input{border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:10px; padding:8px 10px; font-size:13px}
.select,.input{min-height:36px}
.btn{cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.btn.primary{background:var(--accent); color:#071020; border-color:transparent; font-weight:700}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.6; cursor:not-allowed}
.main{height:calc(100% - 64px); display:grid; grid-template-columns: 1.3fr 1fr; gap:12px; padding:12px}
@media (max-width: 980px){ .main{grid-template-columns:1fr; height:auto} }
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.15)}
.cardHeader{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--panel2)}
.cardHeader .meta{color:var(--muted); font-size:12px}
.editorWrap{height:calc(100% - 44px)}
.panelBody{padding:10px 12px}
.kpis{display:flex; gap:10px; flex-wrap:wrap}
.kpi{padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02)}
.kpi .n{font-weight:800; font-size:16px}
.kpi .l{color:var(--muted); font-size:12px}
.list{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.item{border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(255,255,255,.02); cursor:pointer}
.item:hover{border-color:rgba(122,162,247,.5)}
.item .top{display:flex; justify-content:space-between; gap:10px}
.badge{font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.badge.err{border-color:rgba(255,107,107,.5); color:var(--danger)}
.badge.warn{border-color:rgba(255,204,102,.5); color:var(--warn)}
.msg{margin-top:6px; color:var(--text)}
.small{color:var(--muted); font-size:12px; margin-top:4px}
.hr{height:1px; background:var(--border); margin:10px 0}
.footerHint{color:var(--muted); font-size:12px}
.toast{position:fixed; right:14px; bottom:14px; max-width:480px; padding:10px 12px; border:1px solid var(--border); background:var(--panel); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.25); display:none}
.toast.show{display:block}
kbd{border:1px solid var(--border); border-bottom-width:2px; background:rgba(255,255,255,.03); padding:1px 6px; border-radius:6px; font-size:12px}