/* KWEI CONTROL CENTER R1 CORE
   Additive/scoped UI layer. Does not change tracker/database/API logic. */
:root{
  --kcc-red:#ff3b45;
  --kcc-red2:#c9192e;
  --kcc-bg:#090a0d;
  --kcc-card:#111319;
  --kcc-card2:#161921;
  --kcc-line:rgba(255,255,255,.09);
  --kcc-text:#f5f7fb;
  --kcc-muted:#9298a8;
  --kcc-good:#36d17c;
  --kcc-warn:#ffb84d;
  --kcc-bad:#ff5361;
}
.kcc-r1-root{display:block;margin:0 0 18px}
.kcc-r1-root *{box-sizing:border-box}
.kcc-r1-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 12px;padding:18px 20px;border:1px solid rgba(255,59,69,.20);
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 20%,rgba(255,59,69,.15),transparent 33%),
    linear-gradient(135deg,rgba(18,20,26,.98),rgba(9,10,13,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025)
}
.kcc-r1-hero:after{
  content:"";position:absolute;inset:auto -10% -70% 35%;height:180px;
  background:radial-gradient(ellipse,rgba(255,59,69,.12),transparent 65%);pointer-events:none
}
.kcc-r1-health{display:flex;align-items:center;gap:16px;min-width:0}
.kcc-r1-ring{
  --score:0;position:relative;flex:0 0 96px;width:96px;height:96px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:
    radial-gradient(circle at center,#111319 58%,transparent 60%),
    conic-gradient(var(--kcc-good) calc(var(--score)*1%),rgba(255,255,255,.09) 0);
  box-shadow:0 0 28px rgba(54,209,124,.10)
}
.kcc-r1-ring[data-kind="warn"]{background:radial-gradient(circle at center,#111319 58%,transparent 60%),conic-gradient(var(--kcc-warn) calc(var(--score)*1%),rgba(255,255,255,.09) 0)}
.kcc-r1-ring[data-kind="bad"]{background:radial-gradient(circle at center,#111319 58%,transparent 60%),conic-gradient(var(--kcc-bad) calc(var(--score)*1%),rgba(255,255,255,.09) 0)}
.kcc-r1-ring strong{font-size:23px;line-height:1;color:var(--kcc-text)}
.kcc-r1-ring span{margin-top:5px;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--kcc-muted)}
.kcc-r1-kicker{font-size:10px;font-weight:900;letter-spacing:.15em;color:var(--kcc-red)}
.kcc-r1-health h3{margin:5px 0 4px;font-size:21px;line-height:1.15;color:var(--kcc-text)}
.kcc-r1-health p{margin:0;color:var(--kcc-muted);font-size:12px}
.kcc-r1-live-row{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--kcc-muted);font-size:10px}
.kcc-r1-live{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#dce3ed}
.kcc-r1-live i{width:7px;height:7px;border-radius:50%;background:var(--kcc-good);box-shadow:0 0 0 4px rgba(54,209,124,.10);animation:kccPulse 1.6s infinite}
@keyframes kccPulse{50%{box-shadow:0 0 0 8px rgba(54,209,124,0)}}
.kcc-r1-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.kcc-r1-actions button,.kcc-r1-card button.link{
  border:1px solid rgba(255,59,69,.28);border-radius:11px;padding:9px 12px;
  background:linear-gradient(180deg,#e32a3b,#b7192c);color:white;font-weight:800;font-size:11px;cursor:pointer
}
.kcc-r1-actions button.ghost{background:rgba(255,255,255,.035);border-color:var(--kcc-line);color:#dce2ec}
.kcc-r1-actions button:hover,.kcc-r1-card button.link:hover{filter:brightness(1.08)}
.kcc-r1-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:12px}
.kcc-r1-metric{
  min-width:0;padding:13px 13px;border:1px solid var(--kcc-line);border-radius:15px;
  background:linear-gradient(180deg,rgba(21,24,31,.96),rgba(13,15,20,.96))
}
.kcc-r1-metric span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:850;letter-spacing:.08em;color:var(--kcc-muted)}
.kcc-r1-metric strong{display:block;margin:5px 0 3px;font-size:20px;line-height:1;color:var(--kcc-text)}
.kcc-r1-metric small{display:block;color:#777e8e;font-size:9px}
.kcc-r1-metric.good strong{color:#dff9e9}.kcc-r1-metric.warn strong{color:#ffe0a6}
.kcc-r1-metric.accent{border-color:rgba(255,59,69,.20)}
.kcc-r1-metric.accent strong{color:#ff7880}.kcc-r1-metric.live strong{color:#6be09c}
.kcc-r1-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kcc-r1-card{
  min-width:0;padding:15px;border:1px solid var(--kcc-line);border-radius:18px;
  background:linear-gradient(180deg,rgba(17,19,25,.98),rgba(11,13,17,.98))
}
.kcc-r1-span2{grid-column:1/-1}
.kcc-r1-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.kcc-r1-card header small{font-size:9px;font-weight:900;letter-spacing:.13em;color:var(--kcc-red)}
.kcc-r1-card header h3{margin:3px 0 0;font-size:14px;color:var(--kcc-text)}
.kcc-r1-card button.link{padding:5px 0;border:0;background:transparent;color:#ff7179;font-size:10px}
.kcc-r1-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kcc-r1-project,.kcc-r1-vps,.kcc-r1-domain{
  border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(255,255,255,.02)
}
.kcc-r1-project{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px}
.kcc-r1-project-main,.kcc-r1-domain>div:first-child{display:flex;align-items:center;gap:9px;min-width:0}
.kcc-r1-project-main div,.kcc-r1-domain>div:first-child div{min-width:0}
.kcc-r1-project-main b,.kcc-r1-domain b,.kcc-r1-row-head b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf1f6;font-size:11px}
.kcc-r1-project-main small,.kcc-r1-domain small{display:block;margin-top:2px;color:#7f8797;font-size:9px}
.kcc-r1-project-traffic{display:grid;grid-template-columns:auto auto;gap:1px 5px;text-align:right;flex:0 0 auto}
.kcc-r1-project-traffic b{font-size:11px;color:#f5f7fb}.kcc-r1-project-traffic span{font-size:8px;color:#737b8b}
.kcc-r1-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#7d8492}
.kcc-r1-dot.ok{background:var(--kcc-good);box-shadow:0 0 10px rgba(54,209,124,.4)}
.kcc-r1-dot.warn{background:var(--kcc-warn);box-shadow:0 0 10px rgba(255,184,77,.3)}
.kcc-r1-dot.bad{background:var(--kcc-bad);box-shadow:0 0 10px rgba(255,83,97,.35)}
.kcc-r1-stack{display:grid;gap:7px}
.kcc-r1-vps{padding:10px 11px}
.kcc-r1-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kcc-r1-row-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.kcc-r1-row-head>small{font-size:8px;font-weight:900;color:#858c9a}
.kcc-r1-resources{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.kcc-r1-resources span{padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.03);font-size:8px;color:#737c8d}
.kcc-r1-resources b{float:right;color:#dfe5ec}
.kcc-r1-domain{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px}
.kcc-r1-domain-meta{text-align:right;flex:0 0 auto}.kcc-r1-domain-meta b{color:#f3f6f9}.kcc-r1-domain-meta small{margin-top:2px}
.kcc-r1-empty{padding:14px;border:1px dashed rgba(255,255,255,.08);border-radius:12px;color:#737b8a;text-align:center;font-size:10px}

@media(max-width:980px){
  .kcc-r1-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .kcc-r1-root{margin-bottom:14px}
  .kcc-r1-hero{align-items:stretch;flex-direction:column;padding:14px;border-radius:17px}
  .kcc-r1-ring{flex-basis:78px;width:78px;height:78px}.kcc-r1-ring strong{font-size:19px}
  .kcc-r1-health h3{font-size:17px}
  .kcc-r1-actions{justify-content:stretch}.kcc-r1-actions button{flex:1 1 0;padding:9px 8px}
  .kcc-r1-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .kcc-r1-metric{padding:11px;border-radius:13px}.kcc-r1-metric strong{font-size:18px}
  .kcc-r1-grid{grid-template-columns:1fr;gap:9px}.kcc-r1-span2{grid-column:auto}
  .kcc-r1-card{padding:12px;border-radius:15px}
  .kcc-r1-projects{grid-template-columns:1fr}
  .kcc-r1-project{padding:10px}
}
@media(max-width:390px){
  .kcc-r1-health{gap:11px}.kcc-r1-health p{font-size:10px}
  .kcc-r1-metric strong{font-size:16px}
  .kcc-r1-project{align-items:flex-start;flex-direction:column}
  .kcc-r1-project-traffic{width:100%;grid-template-columns:auto 1fr auto 1fr;text-align:left}
}