:root { --pink:#1B78B0; --coral:#2E9AD6; --amber:#F9A03F; --ink:#0F1A2E; --text:#4a5870; --muted:#8a90a6; --line:#dcebf5; --soft:#e8f4fb; --bg:#f3f9fd; --ok:#1fa971; --ok-soft:#e6f7ef; --warn:#F9A03F; --warn-soft:#fff4e2; --bad:#e0344f; --bad-soft:#fde9ec; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:'Inter','Segoe UI',sans-serif; color:var(--text); background:var(--bg); display:flex; flex-direction:column; overflow:hidden; cursor:default; }
.d-top { display:flex; align-items:center; gap:24px; padding:14px 32px; background:#fff; border-bottom:1px solid var(--line); }
.d-brand { display:flex; align-items:center; gap:12px; }
.d-brand img { height:40px; }
.d-brand b { display:block; color:var(--ink); font-size:1.15rem; }
.d-brand span { font-size:.85rem; color:var(--muted); }
.d-nav { display:flex; gap:8px; flex:1; justify-content:center; }
.d-nav button { border:0; background:var(--soft); color:var(--pink); padding:8px 16px; border-radius:999px; font:600 .9rem inherit; font-family:inherit; cursor:pointer; }
.d-nav button.on { background:linear-gradient(135deg,#1B78B0,#2E9AD6); color:#fff; }
.d-fresh { font-size:.9rem; padding:6px 14px; border-radius:999px; background:var(--ok-soft); color:var(--ok); font-weight:600; white-space:nowrap; }
.d-fresh.bad { background:var(--bad-soft); color:var(--bad); }
.d-view { flex:1; padding:24px 32px; overflow:hidden; min-height:0; animation:fade .4s; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.d-bar { height:5px; background:var(--line); }
.d-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#1B78B0,#2E9AD6); }
.d-hint { position:fixed; right:16px; bottom:10px; font-size:.7rem; color:var(--muted); opacity:.6; }
h2 { color:var(--ink); font-size:1.6rem; margin-bottom:4px; }
.d-sub { color:var(--muted); margin-bottom:18px; }
.d-card { background:#fff; border:1px solid var(--line); border-radius:1.1rem; padding:20px; }
.d-card h3 { color:var(--ink); font-size:1.05rem; margin-bottom:2px; }
.d-grid { display:grid; gap:18px; height:calc(100% - 70px); }
.d-g2 { grid-template-columns:1fr 1fr; }
.d-g2x2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.d-hero { display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:center; height:calc(100% - 70px); }
.d-ring { position:relative; width:320px; height:320px; margin:auto; }
.d-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.d-ring .v { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.d-ring b { font-size:4.2rem; color:var(--ink); }
.d-ring span { color:var(--muted); }
.pill { display:inline-block; padding:6px 14px; border-radius:999px; font-weight:700; font-size:.9rem; }
.pill.ok { background:var(--ok-soft); color:var(--ok); } .pill.chg { background:var(--soft); color:var(--pink); }
.pill.warn { background:var(--warn-soft); color:#b86e00; } .pill.bad, .pill.off { background:var(--bad-soft); color:var(--bad); }
.d-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.d-stat { background:#fff; border:1px solid var(--line); border-radius:1rem; padding:18px 20px; }
.d-stat b { display:block; font-size:2.4rem; color:var(--ink); }
.d-stat span { color:var(--muted); font-size:.95rem; }
.d-ban { margin-top:18px; padding:14px 18px; border-radius:1rem; font-size:1rem; }
.d-ban.ok { background:var(--ok-soft); color:#0d7a50; } .d-ban.warn { background:var(--warn-soft); color:#8a5200; } .d-ban.bad { background:var(--bad-soft); color:#a3152b; }
.d-chart { height:calc(100% - 40px); min-height:120px; margin-top:8px; }
.d-chart svg { width:100%; height:100%; }
.d-empty { display:flex; height:100%; align-items:center; justify-content:center; color:var(--muted); }
.d-mm { display:flex; gap:28px; margin:8px 0 6px; }
.d-mm div span { display:block; font-size:.8rem; color:var(--muted); } .d-mm div b { font-size:1.4rem; color:var(--ink); }
.d-fnd { border-left:5px solid var(--coral); background:#fff; border-radius:.8rem; padding:12px 16px; margin-bottom:10px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.d-fnd.critical { border-left-color:var(--bad); } .d-fnd.warning { border-left-color:var(--warn); } .d-fnd.ok { border-left-color:var(--ok); }
.d-fnd h4 { color:var(--ink); font-size:1rem; } .d-fnd p { font-size:.9rem; }
.d-big { font-size:2.6rem; color:var(--ink); font-weight:800; }
.d-tiles { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }