:root{
  --bg0:#07101e;
  --bg1:#0b1220;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.65);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:22px;

  --up:#22c55e;
  --down:#ef4444;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(64,130,255,.25), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(255,120,120,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color:var(--text);
  min-height:100vh;
}

body.light{
  --bg0:#f4f6fb;
  --bg1:#eef2ff;
  --card:rgba(0,0,0,.04);
  --card2:rgba(0,0,0,.06);
  --stroke:rgba(0,0,0,.10);
  --text:#0b1220;
  --muted:rgba(11,18,32,.62);
  --shadow:0 18px 50px rgba(0,0,0,.12);
}

.top{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,18,34,.75), rgba(10,18,34,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}

body.light .top{
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.45));
  border-bottom:1px solid rgba(0,0,0,.06);
}

.top-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 14px;
  max-width:1100px;
  margin:0 auto;
}

.brand-icon{
  width:44px;height:44px;
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.brand-text{ text-align:left; }
.title{ font-size:26px; font-weight:800; letter-spacing:.2px; line-height:1.05; }
.subtitle{ margin-top:2px; color:var(--muted); font-weight:600; }

.btn{
  appearance:none;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px;
  padding:8px 10px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn-ico{
  width:16px;
  height:16px;
  flex:0 0 auto;
  opacity:.9;
}
.btn.loading{
  pointer-events:none;
  opacity:.85;
}
.btn.loading .btn-ico{
  animation: spin .85s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.btn:focus-visible,
.toggle:focus-within,
.card:focus-visible{
  outline:2px solid rgba(255,255,255,.26);
  outline-offset:3px;
}
body.light .btn:focus-visible,
body.light .toggle:focus-within,
body.light .card:focus-visible{
  outline:2px solid rgba(0,0,0,.22);
}
.btn:active{ transform: translateY(1px); }

.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.toggle input{ display:none; }
.slider{
  width:46px; height:26px;
  background: rgba(255,255,255,.18);
  border:1px solid var(--stroke);
  border-radius:999px;
  position:relative;
}
.slider:before{
  content:"";
  position:absolute;
  width:20px;height:20px;
  top:2px; left:2px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  transition: transform .18s ease;
}
.toggle input:checked + .slider:before{ transform: translateX(20px); }
.toggle-label{ font-weight:700; color:var(--muted); }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 60px;
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  text-decoration:none;
  color:inherit;
}

.card .icon{
  width:56px;height:56px;
  border-radius:18px;
  object-fit:cover;
}

.card .mid{
  text-align:center;
  line-height:1.1;
}
.card .name{ font-size:18px; font-weight:800; }
.card .desc{ margin-top:4px; color:var(--muted); font-weight:600; }

.card .right{
  display:flex;
  align-items:center;
  gap:10px;
}
.pip{
  width:10px; height:10px; border-radius:999px;
  background: var(--down);
  box-shadow: 0 0 0 6px rgba(239,68,68,.10);
}
.pip.ok{
  background: var(--up);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10);
}
.badge{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
}

.status-pill{
  width:max-content;
  margin:18px auto 14px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
}
.dot{
  width:10px;height:10px;border-radius:999px; display:inline-block;
}
.dot.up{ background:var(--up); box-shadow:0 0 0 6px rgba(34,197,94,.12); }
.dot.down{ background:var(--down); box-shadow:0 0 0 6px rgba(239,68,68,.12); }

.cpuBox{
  margin:18px auto 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:14px;
}

.cpuHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cpuName{
  flex:1;
  text-align:center;
  font-weight:900;
  font-size:18px;
  color:var(--text);
  line-height:1.15;
  white-space:normal;
  word-break:break-word;
}
.cpuLive{
  flex:0 0 auto;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  letter-spacing:.6px;
}
.cpuLive.pulse{ animation: livePulse .45s ease-out; }
@keyframes livePulse{
  0%{ transform:scale(1); filter:brightness(1); }
  35%{ transform:scale(1.07); filter:brightness(1.25); }
  100%{ transform:scale(1); filter:brightness(1); }
}

.cpuCanvasWrap{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.12);
  overflow:hidden;
  padding:10px;
}

.cpuStats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.stat{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding:14px;
}
.statLabel{ color:var(--muted); font-weight:800; }
.statValue{ margin-top:6px; font-size:30px; font-weight:900; }
.statValue.hot{ color:#ef4444; }
.statValue.warm{ color:#f59e0b; }
.statValue.cool{ color:#22c55e; }

.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(8px);
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.68);
  color:#fff;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  max-width:min(520px, calc(100vw - 24px));
  text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.info{ background: rgba(0,0,0,.68); }
.toast.warn{ background: rgba(120,90,0,.72); }
.toast.error{ background: rgba(120,0,0,.72); }

/* ---- responsive ---- */
@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .top-center{
    justify-content:space-between;
    gap:10px;
  }
  .brand-icon{ width:42px;height:42px; }
  .title{ font-size:22px; }
  .btn{ padding:10px 12px; border-radius:16px; }
  .btn-text{ display:none; }
  .toggle{ padding:8px 10px; }
  .toggle-label{ display:none; } /* ca să încapă pe un rând */
  .grid{ grid-template-columns: 1fr; }
  .card{ padding:14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}


/* --- card as button (prevents URL hover preview) --- */
button.card{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  width:100%;
  text-align:left;
  font:inherit;
}
.card{
  cursor:pointer;
  text-decoration:none;
}


/* === UI OVERRIDE (SMALL BUTTONS + CARD BUTTONS) === */
/* smaller header buttons (PC + mobile) */
.top .btn{
  padding:7px 10px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:800 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.14) !important;
}
.top .btn-ico{
  width:16px !important;
  height:16px !important;
}
@media (max-width: 560px){
  .top .btn{
    padding:6px 9px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
  .top .btn-text{ display:none !important; }
}

/* card as button: prevents URL hover preview */
button.card{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  width:100%;
  text-align:left;
  font:inherit;
}
.card{ cursor:pointer; text-decoration:none; }

/* === UI-OVERRIDE-FORCE-20260122 === */
/* dacă vezi markerul ăsta în /styles.css din browser, înseamnă că rulează CSS-ul corect */

.top .btn{
  padding:6px 10px !important;
  border-radius:12px !important;
  font-size:12px !important;
  line-height:1 !important;
  min-height:0 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.14) !important;
}
.top .btn-ico{
  width:16px !important;
  height:16px !important;
}
@media (max-width: 560px){
  .top .btn{
    padding:6px 9px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
  .top .btn-text{ display:none !important; }
}

/* card ca buton (fără URL preview la hover) */
button.card{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:none !important;
  background:none !important;
  padding:0 !important;
  margin:0 !important;
  width:100% !important;
  text-align:left !important;
  font:inherit !important;
}
.card{ cursor:pointer !important; text-decoration:none !important; }



/* === HEADER-SMALL-FINAL === */
/* header tighter (PC) */
.top-center {
  gap:10px !important;
  padding:10px 12px !important;
}
.brand-icon{ width:40px !important; height:40px !important; border-radius:12px !important; }
.title{ font-size:22px !important; }
.subtitle{ font-size:12px !important; }

/* toggle smaller */
.toggle{ padding:6px 10px !important; border-radius:14px !important; gap:8px !important; }
.slider{ width:40px !important; height:22px !important; }
.slider:before{ width:18px !important; height:18px !important; top:1px !important; left:1px !important; }
.toggle input:checked + .slider:before{ transform: translateX(18px) !important; }

/* buttons smaller */
.top .btn{ padding:6px 10px !important; border-radius:12px !important; font-size:12px !important; }
.top .btn-ico{ width:16px !important; height:16px !important; }

/* mobile: keep one row + icon-only */
@media (max-width: 560px){
  .top-center{ gap:8px !important; padding:10px 10px !important; }
  .title{ font-size:20px !important; }
  .toggle{ padding:6px 8px !important; }
  .top .btn{ padding:6px 8px !important; font-size:11px !important; }
  .top .btn-text{ display:none !important; }
}


/* === FINAL-FIX-1769070282 === */
.top-center{ gap:10px !important; padding:10px 12px !important; }
.brand-icon{ width:40px !important; height:40px !important; border-radius:12px !important; }
.title{ font-size:22px !important; }
.subtitle{ font-size:12px !important; }

.toggle{ padding:6px 10px !important; border-radius:14px !important; gap:8px !important; }
.slider{ width:40px !important; height:22px !important; }
.slider:before{ width:18px !important; height:18px !important; top:1px !important; left:1px !important; }
.toggle input:checked + .slider:before{ transform: translateX(18px) !important; }

.top .btn{ padding:6px 10px !important; border-radius:12px !important; font-size:12px !important; line-height:1 !important; }
.top .btn-ico{ width:16px !important; height:16px !important; }

@media (max-width: 560px){
  .top-center{ gap:8px !important; padding:10px 10px !important; }
  .title{ font-size:20px !important; }
  .toggle{ padding:6px 8px !important; }
  .top .btn{ padding:6px 8px !important; font-size:11px !important; }
  .top .btn-text{ display:none !important; }
}

button.card{ appearance:none !important; -webkit-appearance:none !important; border:none !important; background:none !important;
  padding:0 !important; margin:0 !important; width:100% !important; text-align:left !important; font:inherit !important; }
.card{ cursor:pointer !important; text-decoration:none !important; }

/* === AUTO: Title Case pentru descrieri === */

.card .hint, .service-hint, .item-hint { text-transform: capitalize; }



/* === AUTO: Subtle premium hover === */

.card { transition: transform 180ms ease, box-shadow 180ms ease; }

.card:hover { transform: scale(1.01); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.04); }

/* === AUTO: Title Case + Subtle Hover (1769101257) === */

.card { transition: transform 180ms ease, box-shadow 180ms ease; }

.card:hover { transform: scale(1.01); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.04); }


/* === FORCE: Title Case for descriptions === */
.card .desc{ text-transform: capitalize !important; }

/* === FORCE: Title Case under cards (desc/hint/subtitle) === */
.card .desc, .card .hint, .card .subtitle { text-transform: capitalize !important; }

/* === FIX: constrain service icons inside cards === */
.card .icon{
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}
.card .icon img{
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  display: block !important;
}

/* === CPU BOX: center content in stat cards === */
.cpuStats .stat{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* keep label a bit muted */
.cpuStats .stat .statLabel{
  opacity:.75 !important;
}

/* === Color coding: CPU green, RAM blue (matches chart) === */
:root{
  --cpu-green: rgba(34,197,94,0.95);
  --ram-blue: rgba(59,130,246,0.85);
}

.cpuTxt{ color: var(--cpu-green) !important; }
.ramTxt{ color: var(--ram-blue) !important; }


/* === PREMIUM STATS (Now/Max) – responsive === */
.cpuStats{
  gap:14px !important;
}

.cpuStats .stat{
  padding:14px 14px !important;
  border-radius:16px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.cpuStats .stat .statLabel{
  font-size:12px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  opacity:.55 !important;
  margin-bottom:6px !important;
}

.cpuStats .stat .statValue{
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.2px !important;
}

/* Mobile: puțin mai compact, dar tot premium */
@media (max-width: 560px){
  .cpuStats{ gap:10px !important; }
  .cpuStats .stat{ padding:12px 12px !important; border-radius:14px !important; }
  .cpuStats .stat .statValue{ font-size:16px !important; }
}

/* === RED ACCENTS: Caunfel title + CPU name === */
.brand-text .title{
  color:#ef4444 !important;
  text-shadow: 0 0 18px rgba(239,68,68,0.25) !important;
}

#cpuName{
  color:#ef4444 !important;
}


/* === Card right side: UP/DOWN pill + host === */
.card .right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.card .pill{
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  line-height:1;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.card .pill.up{ color:#33d17a; }
.card .pill.down{ color:#ff5b5b; }
.card .host{
  font-size:13px;
  font-weight:700;
  opacity:.9;
  white-space:nowrap;
}

/* === CPU/RAM colored values === */
.cpuTxt{ color:#33d17a; font-weight:900; }
.ramTxt{ color:#3b82f6; font-weight:900; }

/* privacy mode */
body.privacy .card .host{ filter: blur(6px); opacity:.35; }
body.privacy .card .desc{ filter: blur(6px); opacity:.35; }
/* CPU–RAM split dot */
.split-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin:0 10px;
  background: linear-gradient(
    to right,
    var(--cpu-green) 50%,
    var(--ram-blue) 50%
  );
  vertical-align:middle;
}

/* === split dot between CPU/RAM (half green / half blue) === */
.splitDot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin:0 10px;
  background: linear-gradient(90deg, #33d17a 0 50%, #3b82f6 50% 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
  vertical-align: middle;
}

/* keep CPU/RAM text colors consistent */
.cpuTxt{ color:#33d17a !important; }
.ramTxt{ color:#3b82f6 !important; }

/* better centering + mobile safety in stat boxes */
.statValue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
}

/* HIDE_CARD_HOST */
.card .host,
.card .right .host,
.card .right .url,
.card .url {
  display: none !important;
}