/* Karama Mission Control — единая дизайн-система (флюид, rem, до 4K).
   Базовый размер шрифта тянется от ширины вьюпорта → на 4K всё крупно.
   1rem ≈ 16px @1366, ≈19px @1920, ≈22px @2560, до 25px на 4K.
   Тема СВЕТЛАЯ (переведена 2026-08-10) — правки цвета делать здесь, одним местом. */
:root{
  font-size: clamp(15px, 0.46vw + 10.4px, 25px);
  --bg:#e9edf4; --panel:#ffffff; --panel2:#f6f9fd; --line:#d9e1ec;
  --ink:#1b2735; --mut:#5c6b81; --dim:#93a1b5;
  --cyan:#0d93a8; --green:#12995a; --amber:#b4780a; --red:#dc3a40; --blue:#2f6fe0; --violet:#7a5cf0;
  --glow:0 0 0 1px var(--line), 0 .35rem 1.2rem rgba(27,39,53,.07);
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --r:1rem; --r-sm:.55rem; --r-lg:1.1rem;
}
*{box-sizing:border-box;}
body{margin:0;min-height:100vh;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(80rem 40rem at 80% -10%,rgba(13,147,168,.07),transparent 60%),
             radial-gradient(60rem 34rem at 0% 110%,rgba(47,111,224,.06),transparent 55%),var(--bg);}
a{color:inherit;text-decoration:none;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* header + nav */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.1rem;
  padding:.75rem 1.5rem;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:.14em;font-size:.9rem;}
.brand .logo{width:1.7rem;height:1.7rem;border-radius:.46rem;color:#fff;font-weight:900;font-size:.85rem;
  background:conic-gradient(from 210deg,var(--cyan),var(--blue),var(--violet),var(--cyan));
  box-shadow:0 0 .8rem rgba(13,147,168,.4);display:grid;place-items:center;}
.brand small{color:var(--mut);letter-spacing:.24em;font-weight:600;font-size:.62rem;display:block;margin-top:.06rem;}
.live{display:flex;align-items:center;gap:.45rem;color:var(--green);font-size:.78rem;font-family:var(--mono);}
.live .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--green);box-shadow:0 0 .6rem var(--green);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.clock{font-family:var(--mono);color:var(--mut);font-size:.78rem;}
.nav{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
.nav a,.nav button{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  padding:.45rem .8rem;border-radius:.6rem;font-size:.8rem;cursor:pointer;transition:.15s;font-family:inherit;}
.nav a:hover,.nav button:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 1px rgba(13,147,168,.25);}
.nav a.active,.nav .cta{background:linear-gradient(180deg,#e9f6f9,#d7edf3);border-color:#b9dde6;color:#0a6f80;}
.ring{position:relative;width:1.7rem;height:1.7rem;}
.ring svg{width:1.7rem;height:1.7rem;transform:rotate(-90deg);}
.ring .cd{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.62rem;color:var(--mut);}

.wrap{padding:1.4rem 1.6rem 4rem;max-width:min(94vw,120rem);margin:0 auto;}

/* KPI — все 8 в один ряд, компактно; на узких экранах перестраивается */
.kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.6rem;margin-bottom:1.3rem;}
@media(max-width:82rem){.kpis{grid-template-columns:repeat(4,1fr)}}
@media(max-width:46rem){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;position:relative;overflow:hidden;box-shadow:var(--glow);}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.18rem;background:var(--accent,var(--cyan));}
.kpi .lbl{color:var(--mut);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi .val{font-family:var(--mono);font-size:1.5rem;font-weight:700;margin-top:.3rem;line-height:1;}
.kpi .sub{color:var(--dim);font-size:.64rem;margin-top:.3rem;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi.ok{--accent:var(--green)} .kpi.warn{--accent:var(--amber)} .kpi.bad{--accent:var(--red)}
.kpi.info,.kpi.b{--accent:var(--blue)} .kpi.vio,.kpi.v{--accent:var(--violet)} .kpi.g{--accent:var(--green)}

.section-title{display:flex;align-items:center;gap:.65rem;margin:.4rem .15rem .8rem;color:var(--mut);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}

.grid{display:grid;grid-template-columns:2.4fr 1fr;gap:1.1rem;align-items:start;}
@media(max-width:70rem){.grid{grid-template-columns:1fr}}

/* fleet cards */
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));gap:1rem;}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1rem 1.05rem;box-shadow:var(--glow);position:relative;transition:.2s;}
.card:hover{border-color:#b8c6da;}
.card.prob{border-color:rgba(220,58,64,.45);box-shadow:0 0 0 1px rgba(220,58,64,.25),0 .6rem 1.9rem rgba(220,58,64,.08);}
.chead{display:flex;align-items:center;gap:.65rem;margin-bottom:.8rem;}
.led{width:.7rem;height:.7rem;border-radius:50%;flex:none;}
.led.on{background:var(--green);box-shadow:0 0 .6rem var(--green);animation:pulse 1.8s infinite;}
.led.off{background:var(--red);box-shadow:0 0 .6rem var(--red);}
.cname{font-weight:700;font-size:1rem;letter-spacing:.01em;}
.cmeta{color:var(--mut);font-size:.72rem;font-family:var(--mono);margin-top:.06rem;}
.pill{font-size:.66rem;padding:.12rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--mut);
  background:#eef2f8;font-family:var(--mono);}
.pill.susp{color:var(--amber);border-color:rgba(180,120,10,.4);background:rgba(180,120,10,.1);}
.gauges{display:flex;gap:.8rem;justify-content:space-between;margin:.4rem 0 .8rem;}
.gauge{text-align:center;flex:1;position:relative;}
.gauge svg{width:4.1rem;height:4.1rem;}
.gauge .g-val{font-family:var(--mono);font-size:.82rem;font-weight:700;margin-top:-2.7rem;position:relative;}
.gauge .g-lbl{color:var(--mut);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;margin-top:1.5rem;}
.spark{display:block;width:100%;height:3rem;margin:.25rem 0 .5rem;}
.subline{font-family:var(--mono);font-size:.72rem;color:var(--mut);margin:0 0 .7rem;}
.subline.dim{color:var(--dim);} .subline b{color:var(--ink);font-weight:600;}
.exp-ok{color:var(--green)} .exp-warn{color:var(--amber)} .exp-bad{color:var(--red);font-weight:700;}
.cfoot{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.7rem;}
.stat{font-family:var(--mono);font-size:.78rem;color:var(--ink);}
.stat b{color:var(--mut);font-weight:400;font-size:.62rem;display:block;text-transform:uppercase;letter-spacing:.05em;}
.ctrls{margin-left:auto;display:flex;gap:.4rem;align-items:center;}

/* buttons / inputs */
.btn{border:1px solid var(--line);background:#ffffff;color:var(--ink);font-size:.76rem;padding:.4rem .7rem;
  border-radius:.55rem;cursor:pointer;transition:.15s;font-family:inherit;display:inline-flex;align-items:center;gap:.3rem;}
.btn:hover{border-color:var(--cyan);color:var(--cyan);}
.btn.ok{border-color:rgba(18,153,90,.4);color:var(--green);} .btn.ok:hover{color:var(--green);border-color:var(--green);}
.btn.warn:hover{border-color:var(--amber);color:var(--amber);}
.btn.danger:hover{border-color:var(--red);color:var(--red);}
.btn.primary{border-color:#b9dde6;color:#0a6f80;background:linear-gradient(180deg,#e9f6f9,#d7edf3);}
.btn.lg{padding:.6rem 1.15rem;font-size:.9rem;border-radius:.7rem;}
select.plan,input,select,textarea{background:#ffffff;color:var(--ink);border:1px solid var(--line);border-radius:.55rem;
  font-size:.8rem;padding:.45rem .6rem;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px rgba(13,147,168,.3);}
select.plan{font-family:var(--mono);cursor:pointer;}
label{font-size:.7rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;}

/* events log */
.logpanel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--glow);overflow:hidden;position:sticky;top:4.5rem;}
.logpanel h3{margin:0;padding:.85rem 1.05rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mut);border-bottom:1px solid var(--line);}
.logfeed{max-height:74vh;overflow-y:auto;padding:.35rem 0;}
.ev{display:flex;gap:.65rem;padding:.55rem 1.05rem;border-bottom:1px solid rgba(20,30,50,.07);font-size:.78rem;}
.ev:last-child{border:none;}
.ev .t{font-family:var(--mono);color:var(--dim);font-size:.7rem;white-space:nowrap;}
.ev .k{width:.45rem;height:.45rem;border-radius:50%;margin-top:.35rem;flex:none;background:var(--blue);}
.ev .k.suspend{background:var(--amber)} .ev .k.resume{background:var(--green)}
.ev .k.action{background:var(--violet)} .ev .k.plan{background:var(--cyan)}
.ev .txt{color:var(--ink);} .ev .txt .inst{color:var(--cyan);font-family:var(--mono);}
.ev .txt small{color:var(--mut);display:block;}
.empty{padding:2rem;text-align:center;color:var(--dim);font-size:.85rem;}
.skeleton{color:var(--dim);text-align:center;padding:4rem;font-family:var(--mono);}

/* generic panel/card grid (plans, settings, instance) */
.pgrid{display:grid;gap:.9rem;margin-bottom:1.6rem;}
.pgrid.cards3{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));}
.pgrid.plans{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.15rem 1.25rem;box-shadow:var(--glow);position:relative;overflow:hidden;}
.panel.acc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.2rem;background:var(--accent,var(--cyan));}
.panel h3{margin:0 0 .2rem;font-size:.92rem;} .panel .desc{color:var(--mut);font-size:.78rem;margin:0 0 .9rem;}
.frow{display:flex;justify-content:space-between;align-items:center;gap:.9rem;margin-bottom:.75rem;}
.frow:last-child{margin-bottom:0;} .frow label{font-size:.82rem;color:var(--ink);text-transform:none;letter-spacing:0;}
.frow small{color:var(--dim);display:block;font-size:.7rem;margin-top:.06rem;}
.frow .u{color:var(--mut);font-family:var(--mono);font-size:.7rem;margin-left:.25rem;}
.frow input[type=number]{width:5rem;text-align:right;font-family:var(--mono);}
.iform{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end;}
.iform>div{display:flex;flex-direction:column;gap:.25rem;}
.bar{display:flex;justify-content:flex-end;gap:.65rem;align-items:center;margin-top:1rem;}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.4rem;vertical-align:middle;}
.dot.w{background:var(--amber)} .dot.c{background:var(--red)}
.badge{font-family:var(--mono);font-size:.68rem;color:var(--mut);background:#eef2f8;border:1px solid var(--line);
  border-radius:999px;padding:.12rem .55rem;}

/* toast */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:#1b2735;
  border:1px solid #2a3a4d;color:#eef2f8;padding:.65rem 1.15rem;border-radius:.75rem;font-size:.85rem;
  box-shadow:0 .6rem 1.9rem rgba(27,39,53,.25);opacity:0;transition:.25s;z-index:60;pointer-events:none;}
.toast.show{opacity:1;}

/* plan cards */
.plan{position:relative;} .plan .key{font-family:var(--mono);font-size:.7rem;color:var(--cyan);letter-spacing:.06em;text-transform:uppercase;}
.plan h3{margin:.25rem 0 .6rem;font-size:1.2rem;}
.plan .price{font-family:var(--mono);font-size:1.9rem;font-weight:700;} .plan .price small{font-size:.8rem;color:var(--mut);font-weight:400;}
.plan .price.free{color:var(--green);}
.plan .prow{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.82rem;color:var(--mut);}
.plan .prow b{color:var(--ink);font-family:var(--mono);font-weight:600;}
.plan .note{color:var(--dim);font-size:.76rem;margin-top:.65rem;min-height:1rem;}
.plan .acts{display:flex;gap:.5rem;margin-top:.9rem;border-top:1px solid var(--line);padding-top:.75rem;}
.plan .cnt{position:absolute;top:.9rem;right:.9rem;}
.panel.mon{--accent:var(--cyan)} .panel.alert{--accent:var(--amber)} .panel.hist{--accent:var(--violet)}
.saved{color:var(--green);font-size:.78rem;font-family:var(--mono);opacity:0;transition:.3s;} .saved.show{opacity:1;}

/* instance detail + install log */
.idkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;}
.kv{font-size:.85rem;} .kv b{display:block;color:var(--mut);font-weight:600;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem;}
.hist-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.hist-table th,.hist-table td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
.hist-table thead th{color:var(--mut);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;}
.logpre{margin:0;padding:1.1rem 1.3rem;white-space:pre-wrap;word-break:break-word;font-size:.76rem;line-height:1.55;
  font-family:var(--mono);color:#2a3a4d;background:#f4f6fb;border:1px solid var(--line);border-radius:var(--r-lg);max-height:72vh;overflow:auto;}
.statusline{padding:.7rem 0;font-size:.85rem;} .statusline .run{color:var(--amber);} .statusline .ok{color:var(--green);} .statusline .er{color:var(--red);}