:root{
  --bg:#f5f6f8;        /* X1 hell */
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --ring:#ff8a00;      /* X1-Orange */
  --ring-weak:#ffd4a8;
  --ok:#16a34a;
  --bad:#ef4444;
  --blue:#3b82f6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;}
.container{max-width:1150px;margin:24px auto;padding:0 16px}
.grid{display:grid;gap:16px}
.card{background:var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06);border:1px solid #e5e7eb}
.card .hd{padding:14px 16px;border-bottom:1px solid #eef2f7;font-weight:600}
.card .bd{padding:16px}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1100px){.kv{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.kv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kv{grid-template-columns:1fr}}
.kv .item{padding:12px;border:1px dashed #eef2f7;border-radius:10px;background:#fafafa}
.kv .cap{font-size:.78rem;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.kv .val{font-size:1.2rem;font-weight:600}

.big{display:flex;align-items:center;gap:20px}
.gauge{position:relative;width:220px;height:220px;border-radius:50%;display:grid;place-items:center}
.gauge .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--ring) var(--p,0%), var(--ring-weak) var(--p,0%) 100%);
  mask:radial-gradient(#0000 60%,#000 61%);}
.gauge .num{font-size:2.6rem;font-weight:700}
.gauge .sub{margin-top:2px;color:var(--muted);font-size:.9rem;text-align:center}
.meta{display:grid;gap:10px}
.meta .row{display:flex;gap:14px;flex-wrap:wrap}
.badge{padding:6px 10px;border-radius:1000px;border:1px solid #e5e7eb;background:#fff;font-size:.84rem}
.badge.green{border-color:#bbf7d0;background:#ecfdf5;color:#14532d}
.badge.red{border-color:#fecaca;background:#fff1f2;color:#7f1d1d}
.badge.blue{border-color:#bfdbfe;background:#eff6ff;color:#1e3a8a}

.list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:1000px){.list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.list{grid-template-columns:repeat(2,1fr)}}
.rowline{display:flex;gap:8px;align-items:baseline}
.rowline .l{width:36%;}
.rowline .r{flex:1;text-align:right}

.small{font-size:.82rem;color:var(--muted)}
.sep{height:1px;background:#eef2f7;margin:10px 0}
.footer{margin:12px 0;color:var(--muted);font-size:.85rem}

.btn{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn:hover{border-color:#d1d5db}