:root{
  --bg:#0d1024; --card:#11183a; --muted:#b8c6ff; --txt:#eef3ff;
  --border:#223; --brand:#7ee0c5; --brand2:#a7b3ff; --accent:#ffc98b;
  --ok:#26d19b; --warn:#ffb86b; --danger:#ff6b6b;
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'PingFang SC','Noto Sans SC', sans-serif;}
.top{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(10,15,40,.9), rgba(10,15,40,.6));backdrop-filter: blur(6px);border-bottom:1px solid #1a234c}
.container{max-width:960px;margin:0 auto;padding:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(45deg,var(--brand),var(--brand2))}
.tabs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.tab{padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#0f1431;color:var(--muted);cursor:pointer}
.tab.active{outline:2px solid var(--brand);color:var(--txt)}

main{padding:16px}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:14px 0}
h1{font-size:26px;margin:8px 0 6px}
h3{margin:6px 0 10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#0b1230;color:var(--txt)}
.btn{padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#00110a;font-weight:800;cursor:pointer}
.btn.secondary{background:#16204a;color:var(--txt);border:1px solid var(--border)}
.btn.warn{background:linear-gradient(90deg,#ffd199,#ffb86b)}
.btn.ok{background:linear-gradient(90deg,#85f0cf,#26d19b)}
.flex{display:flex;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hidden{display:none!important}
.center{display:flex;justify-content:center;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{background:#0e1534;border:1px solid #1a234c;border-radius:14px;padding:12px}
.kpi b{font-size:20px}

.ring{width:160px;height:160px}
.ring svg{width:100%;height:100%}
.ring .bg{fill:none;stroke:#1e2a58;stroke-width:4}
.ring .meter{fill:none;stroke:url(#ringGrad);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .6s ease}
.ring .value{fill:#fff;font-size:8px;text-anchor:middle}

.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#0e1534;border:1px solid #1a234c;border-radius:12px;padding:12px}
.meta{color:#a9b6ff99;font-size:12px}
.del{background:#25182a;color:#ffd7e0;border:1px solid #46203a;padding:8px 10px;border-radius:10px;cursor:pointer}

.snackbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0d1636;border:1px solid #1a234c;border-radius:12px;padding:10px 14px;display:none}
.toast{display:block}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.hero img{width:100%;border-radius:16px;border:1px solid #1a234c}
.small{font-size:13px;color:#cfe3ff99}

.skeleton .line{height:14px;background:#1b2452;border-radius:6px;margin:8px 0;animation:pulse 1.2s infinite ease-in-out}
.skeleton .line.short{width:60%}
@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}