:root{
  --bg:#070a10;
  --bg2:#0b1020;
  --line:rgba(255,255,255,.08);
  --txt:#e8eefc;
  --mut:rgba(232,238,252,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#3b82f6;
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --gap:12px;
}

/* ===== MOTYWY ===== */

body[data-theme="grafit"]{
  --bg:#070a10;
  --bg2:#0b1020;
  --line:rgba(255,255,255,.08);
  --txt:#e8eefc;
  --mut:rgba(232,238,252,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#3b82f6;
}

body[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#e7edf6;
  --line:rgba(15,23,42,.12);
  --txt:#0f172a;
  --mut:rgba(15,23,42,.62);
  --good:#16a34a;
  --bad:#dc2626;
  --warn:#d97706;
  --blue:#2563eb;
}

body[data-theme="steel"]{
  --bg:#1f2937;
  --bg2:#111827;
  --line:rgba(255,255,255,.08);
  --txt:#e5e7eb;
  --mut:rgba(229,231,235,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#60a5fa;
}

body[data-theme="neon"]{
  --bg:#050816;
  --bg2:#0a0f1f;
  --line:rgba(56,189,248,.22);
  --txt:#d9f7ff;
  --mut:rgba(217,247,255,.62);
  --good:#22c55e;
  --bad:#f43f5e;
  --warn:#f59e0b;
  --blue:#22d3ee;
}

body[data-theme="cosmos"]{
  --bg:#080511;
  --bg2:#12091f;
  --line:rgba(192,132,252,.18);
  --txt:#f3e8ff;
  --mut:rgba(243,232,255,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#8b5cf6;
}

body[data-theme="ocean"]{
  --bg:#03131b;
  --bg2:#08232e;
  --line:rgba(94,234,212,.16);
  --txt:#dafeff;
  --mut:rgba(218,254,255,.62);
  --good:#10b981;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#06b6d4;
}

body[data-theme="emerald"]{
  --bg:#04130d;
  --bg2:#0b2518;
  --line:rgba(52,211,153,.16);
  --txt:#dcfce7;
  --mut:rgba(220,252,231,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#10b981;
}

body[data-theme="amber"]{
  --bg:#161109;
  --bg2:#2a1c09;
  --line:rgba(251,191,36,.16);
  --txt:#fff7d6;
  --mut:rgba(255,247,214,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#f59e0b;
}

body[data-theme="chameleon"]{
  --bg:#091018;
  --bg2:#13251d;
  --line:rgba(255,255,255,.10);
  --txt:#ecfeff;
  --mut:rgba(236,254,255,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#14b8a6;
}

body[data-theme="midnight"]{
  --bg:#030712;
  --bg2:#0b1530;
  --line:rgba(96,165,250,.18);
  --txt:#dbeafe;
  --mut:rgba(219,234,254,.62);
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --blue:#3b82f6;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(59,130,246,.2),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(34,197,94,.14),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--txt)
}

body[data-theme="light"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(22,163,74,.08),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="steel"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(148,163,184,.15),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(59,130,246,.08),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="neon"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(34,211,238,.20),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(244,63,94,.14),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="cosmos"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(139,92,246,.22),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(192,132,252,.12),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="ocean"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(6,182,212,.18),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(94,234,212,.10),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="emerald"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(34,197,94,.16),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(16,185,129,.10),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="amber"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(251,191,36,.18),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(245,158,11,.10),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="chameleon"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(20,184,166,.18),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(132,204,22,.10),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

body[data-theme="midnight"]{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(59,130,246,.18),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(96,165,250,.10),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

#app{min-height:100%}
.boot{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;color:var(--mut);letter-spacing:.3px}
.screen{max-width:100%;width:100%;margin:0 auto;padding:16px 14px 24px}
.card{background:linear-gradient(180deg,#ffffff0d,#ffffff05);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.pad{padding:14px}
.compact{border-radius:14px}
.topErr{margin:10px 0 12px;padding:10px 12px;border:1px solid rgba(239,68,68,.35);background:#ef44441a;border-radius:14px;font-weight:900}
.muted2{color:#e8eefc80;font-weight:800}
.muted3{color:#e8eefc94;font-weight:850}
.sp{height:10px}
.fleetTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.fleetTitle{font-size:26px;font-weight:1000;letter-spacing:.6px}
.fleetControls{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.ctrlGroup{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#ffffff08}
.ctrlLab{color:var(--mut);font-weight:950}
.ctrlSel{border:1px solid var(--line);background:#ffffff0a;color:var(--txt);border-radius:10px;padding:7px 10px;font-weight:950;outline:none}
.ctrlBtn{border:1px solid var(--line);background:#ffffff0a;color:var(--txt);border-radius:12px;padding:10px 12px;font-weight:950;cursor:pointer}
.ctrlBtn:disabled{opacity:.55;cursor:not-allowed}
.topSwitch{display:flex;align-items:flex-start;gap:8px;padding:6px;border:1px solid var(--line);border-radius:14px;background:#ffffff08}
.swBtn{border:1px solid var(--line);background:#ffffff08;color:var(--txt);border-radius:12px;padding:8px 12px;font-weight:1000;cursor:pointer;letter-spacing:.2px}
.swBtn.on{border-color:#3b82f673;background:#3b82f624}
.pageBar{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin-bottom:12px}
.pageBtn{border:1px solid var(--line);background:#ffffff0a;color:var(--txt);border-radius:12px;padding:8px 12px;font-weight:1000;cursor:pointer}
.pageBtn:disabled{opacity:.45;cursor:not-allowed}
.pageInfo{font-weight:1000;letter-spacing:.2px}
.fleetGrid{display:grid;grid-template-columns:repeat(var(--cols, 3),minmax(0,1fr));gap:var(--gap)}
.tile{height:var(--tileH, 260px);padding:calc(14px * var(--s,1));border-radius:calc(18px * var(--s,1));border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0d,#ffffff05);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:calc(10px * var(--s,1));cursor:pointer;-webkit-user-select:none;user-select:none;min-width:0}
.tile.run{border-color:var(--good);box-shadow:0 0 0 2px color-mix(in srgb, var(--good) 22%, transparent),var(--shadow)}
.tile.stop{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb, var(--bad) 20%, transparent),var(--shadow)}
.tileDash{overflow:hidden}
.tHead{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10px * var(--s,1));min-width:0}
.tName{font-weight:1000;letter-spacing:.2px;font-size:calc(18px * var(--s,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tRight{display:flex;align-items:flex-start;gap:calc(10px * var(--s,1));flex:0 0 auto}
.tId{color:#e8eefc9e;font-weight:900;white-space:nowrap;font-size:calc(12px * var(--s,1))}
.tRent{width:calc(14px * var(--s,1));height:calc(14px * var(--s,1));border-radius:999px;border:1px solid var(--line);background:#e8eefc33;cursor:pointer}
.tRent.on{background:var(--good);border-color:color-mix(in srgb, var(--good) 45%, transparent)}
.tRent.off{background:#e8eefc33}
.tBody{display:grid;grid-template-columns:auto 1fr;gap:calc(14px * var(--s,1));align-items:stretch;flex:1;min-height:0;min-width:0}
.tGauge{width:calc(150px * var(--s,1));height:calc(150px * var(--s,1));position:relative;flex:0 0 auto;align-self:center}
.tMotionLab{position:absolute;top:calc(-48px * var(--s,1));left:50%;transform:translate(-50%);display:flex;align-items:flex-start;gap:calc(6px * var(--s,1));padding:calc(6px * var(--s,1)) calc(10px * var(--s,1));border-radius:999px;border:1px solid var(--line);background:#ffffff08;font-weight:1000;font-size:calc(12px * var(--s,1));letter-spacing:.2px;white-space:nowrap;color:#e8eefceb}
.tMotionLab.on{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent);color:var(--good)}
.tRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,rgba(245,158,11,.95) 0deg var(--deg,0deg),rgba(255,255,255,.1) var(--deg,0deg) 270deg,transparent 270deg 360deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 62%,#000 63%);mask:radial-gradient(circle at 50% 50%,transparent 62%,#000 63%);filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.tCenter{position:absolute;inset:calc(16px * var(--s,1));border-radius:50%;border:1px solid var(--line);background:#00000024;writing-mode:horizontal-tb;text-orientation:mixed;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(2px * var(--s,1));padding:calc(6px * var(--s,1))}
.tFuelLab{font-size:calc(12px * var(--s,1));color:#e8eefc9e;font-weight:950}
.tPct{font-size:calc(34px * var(--s,1));font-weight:1000;letter-spacing:.2px}
.tSmall{font-size:calc(11px * var(--s,1));color:#e8eefc85;font-weight:900}
.tMth{font-size:calc(11px * var(--s,1));color:#e8eefc9e;font-weight:950;white-space:nowrap;line-height:1.1;margin-top:calc(26px * var(--s,1))}
.tGauge.bG .tRing{background:conic-gradient(from 225deg,rgba(34,197,94,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.tGauge.bY .tRing,.tGauge.bO .tRing{background:conic-gradient(from 225deg,rgba(245,158,11,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.tGauge.bR .tRing{background:conic-gradient(from 225deg,rgba(239,68,68,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.tGauge.bU .tRing{background:conic-gradient(from 225deg,rgba(255,255,255,.18) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.tInfo{display:flex;flex-direction:column;gap:calc(10px * var(--s,1));min-width:0}
.tBadges{display:flex;align-items:flex-start;gap:calc(10px * var(--s,1));flex-wrap:wrap;min-width:0}
.tStat{padding:calc(6px * var(--s,1)) calc(10px * var(--s,1));border-radius:999px;border:1px solid var(--line);font-weight:1000;font-size:calc(12px * var(--s,1));letter-spacing:.3px}
.tStat.on{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent);color:var(--good)}
.tStat.off{border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad)}
.tMove{display:inline-flex;align-items:flex-start;justify-content:center;font-size:calc(14px * var(--s,1));line-height:1;border:none;background:transparent;padding:0}
.tMove.on{color:var(--good)}
.tMove.off{color:#e8eefceb}
.stateOn{color:var(--good)}
.stateOff{color:var(--txt)}
.tAge{padding:calc(6px * var(--s,1)) calc(10px * var(--s,1));border-radius:999px;border:1px solid var(--line);background:#ffffff08;font-weight:950;font-size:calc(12px * var(--s,1))}
.ageG{border-color:color-mix(in srgb, var(--good) 35%, transparent);color:var(--good);background:color-mix(in srgb, var(--good) 12%, transparent)}
.ageY{border-color:rgba(245,158,11,.35);color:#ffd27a;background:rgba(245,158,11,.10)}
.ageO{border-color:rgba(245,158,11,.35);color:#ffb86b;background:rgba(245,158,11,.08)}
.ageR{border-color:color-mix(in srgb, var(--bad) 35%, transparent);color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, transparent)}
.ageU{color:#e8eefc9e}
.tIconBtn{border:1px solid var(--line);background:#ffffff0a;color:var(--txt);border-radius:calc(12px * var(--s,1));padding:calc(7px * var(--s,1)) calc(10px * var(--s,1));cursor:pointer;font-weight:1000;font-size:calc(12px * var(--s,1))}
.tLine{display:flex;align-items:flex-start;gap:calc(10px * var(--s,1));min-width:0}
.tI{opacity:.9;font-size:calc(14px * var(--s,1))}
.tTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8eefc9e;font-weight:900;font-size:calc(13px * var(--s,1))}
.tTxt b{color:var(--txt);font-weight:1000}
.tOutRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8px * var(--s,1))}
.tOutBtn{border-radius:calc(14px * var(--s,1));padding:calc(10px * var(--s,1)) calc(10px * var(--s,1));border:1px solid var(--line);cursor:pointer;font-weight:1000;color:var(--txt);background:#ffffff0a;overflow:hidden;min-width:0;text-align:center;font-size:calc(12px * var(--s,1))}
.tOutBtn.on{border-color:color-mix(in srgb, var(--good) 40%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--good) 18%, transparent),color-mix(in srgb, var(--good) 8%, transparent))}
.tOutBtn.off{border-color:color-mix(in srgb, var(--bad) 40%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--bad) 16%, transparent),color-mix(in srgb, var(--bad) 6%, transparent))}
.tOutTxt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tActions{display:flex;gap:calc(8px * var(--s,1));flex-wrap:wrap}
.tAct{border:1px solid var(--line);background:#ffffff08;color:var(--txt);border-radius:calc(12px * var(--s,1));padding:calc(9px * var(--s,1)) calc(10px * var(--s,1));font-weight:950;cursor:pointer;font-size:calc(12px * var(--s,1))}
.topBarSimple{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.topBarTitle{flex:1;font-weight:1000;letter-spacing:.2px;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bigTitle{font-weight:1000;font-size:20px;letter-spacing:.2px}
.kvBig{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kvBig div{border:1px solid var(--line);background:#ffffff08;border-radius:14px;padding:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kvBig span{color:var(--mut);font-weight:950}
.kvBig b{font-weight:1000}
.linkBtn{display:inline-block;text-decoration:none;border:1px solid rgba(59,130,246,.35);background:#3b82f61f;color:var(--txt);border-radius:14px;padding:12px 14px;font-weight:1000}
.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:980px){.detailGrid{grid-template-columns:1fr}}

.fuelMini{position:relative;width:96px;height:96px;flex:0 0 auto}
.miniRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,rgba(245,158,11,.95) 0deg var(--deg,0deg),rgba(255,255,255,.1) var(--deg,0deg) 270deg,transparent 270deg 360deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 60%,#000 61%);mask:radial-gradient(circle at 50% 50%,transparent 60%,#000 61%);filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.miniCenter{position:absolute;inset:10px;border-radius:50%;border:1px solid var(--line);background:#0000001f;writing-mode:horizontal-tb;text-orientation:mixed;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.miniIcon{font-size:16px}
.miniPct{font-weight:1000}
.miniSub{font-size:11px;color:#e8eefc8c;font-weight:850}
.fuelMini.bG .miniRing{background:conic-gradient(from 225deg,rgba(34,197,94,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.fuelMini.bY .miniRing,.fuelMini.bO .miniRing{background:conic-gradient(from 225deg,rgba(245,158,11,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.fuelMini.bR .miniRing{background:conic-gradient(from 225deg,rgba(239,68,68,.95) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}
.fuelMini.bU .miniRing{background:conic-gradient(from 225deg,rgba(255,255,255,.18) 0deg var(--deg),rgba(255,255,255,.1) var(--deg) 270deg,transparent 270deg 360deg)}

.ctrlCol{margin-left:auto;display:flex;flex-direction:column;gap:10px;min-width:340px;max-width:520px}
.ctrlCol .secH{margin-top:0}
@media (max-width:1100px){
  .rowA{flex-direction:column;align-items:stretch}
  .ctrlCol{margin-left:0;min-width:0;max-width:none;width:100%}
  .bigCmd{width:100%}
}

.rowA{display:flex;align-items:flex-start;gap:14px}
.statCol{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.statLine{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.miniRow{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.nameEdit2,.calBtn2,.miniBtn2,.rentTag{border:1px solid var(--line);background:#ffffff08;color:var(--txt);border-radius:12px;padding:9px 10px;font-weight:950;cursor:pointer}
.rentTag.on{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent)}
.rentTag.off{opacity:.9}
.secH{font-weight:1000;letter-spacing:.2px;margin-bottom:10px}
.cmdRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bigCmd{border-radius:14px;padding:12px;font-weight:1000;border:1px solid var(--line);cursor:pointer;background:#ffffff0a;color:var(--txt)}
.bigCmd.on{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--good) 20%, transparent),color-mix(in srgb, var(--good) 8%, transparent))}
.bigCmd.off{border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--bad) 18%, transparent),color-mix(in srgb, var(--bad) 6%, transparent))}
.outRow2{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.outBtn2{border-radius:14px;padding:10px;font-weight:1000;border:1px solid var(--line);cursor:pointer;background:#ffffff0a;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outBtn2.on{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent)}
.outBtn2.off{border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)}
.cmdMsg2{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;font-weight:950;color:var(--mut)}
.cmdMsg2.hide{display:none}
.hint2{margin-top:8px;color:#e8eefc80;font-weight:850}
.ainGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ainBox{border:1px solid var(--line);background:#ffffff08;border-radius:14px;padding:10px}
.ainK{color:var(--mut);font-weight:950;margin-bottom:6px}
.ainV{font-weight:1000}
.attrBox{max-height:220px;overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12px;color:#e8eefcbf;border:1px solid var(--line);background:#0000002e;border-radius:14px;padding:10px}
.loginWrap{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px}
.loginCard{width:420px;max-width:96vw;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:var(--shadow)}
.brand{font-size:20px;font-weight:1000;letter-spacing:.6px}
.brandSub{color:var(--mut);font-weight:900;margin-top:2px;margin-bottom:14px}
.loginForm{display:flex;flex-direction:column;gap:8px}
.lab{color:var(--mut);font-weight:900;margin-top:6px}
.inp{border:1px solid var(--line);background:#ffffff0a;color:var(--txt);border-radius:12px;padding:10px 12px;outline:none;font-weight:900}
.err{margin-top:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(239,68,68,.35);background:#ef44441a;font-weight:950}
.hint{margin-top:12px;color:#e8eefc85;font-weight:900}

@media(max-width:820px){
  .tBody{grid-template-columns:1fr}
  .tGauge{justify-self:center}
  .tOutRow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ainGrid,.outRow2,.cmdRow2{grid-template-columns:1fr}
}

.tileDash.narrow .tBody{grid-template-columns:1fr;align-content:start}
.tileDash.narrow .tGauge{justify-self:center;width:calc(140px * var(--s,1));height:calc(140px * var(--s,1))}
.tileDash.narrow .tOutRow{grid-template-columns:repeat(2,minmax(0,1fr))}
.tileDash.tileL .tBody{grid-template-columns:auto 1fr}
.tileDash.tileL .tOutRow{grid-template-columns:repeat(3,minmax(0,1fr))}
.tileDash.tileL .tGauge{width:calc(160px * var(--s,1));height:calc(160px * var(--s,1))}
.tileDash.tileM .tBody{grid-template-columns:auto 1fr}
.tileDash.tileM .tOutRow{grid-template-columns:repeat(2,minmax(0,1fr))}
.tileDash.tileM .tGauge{width:calc(140px * var(--s,1));height:calc(140px * var(--s,1))}
.tileDash.tileM .tActions{display:none}
.tileDash.tileS .tBody{grid-template-columns:1fr}
.tileDash.tileS .tGauge,.tileDash.tileS .tLine,.tileDash.tileS .tOutRow,.tileDash.tileS .tActions{display:none}
.tileDash.tileS .tBadges{gap:calc(8px * var(--s,1))}
.tileDash.tileS .tName{font-size:calc(16px * var(--s,1))}
.tileDash.tileS .tStat,.tileDash.tileS .tAge{font-size:calc(11px * var(--s,1));padding:calc(5px * var(--s,1)) calc(8px * var(--s,1))}
.tileDash .tActions{display:none!important;height:0!important;margin:0!important;padding:0!important}
.tileDash .tOutBtn{padding:calc(6px * var(--s,1)) calc(10px * var(--s,1))!important;border-radius:calc(16px * var(--s,1))!important}
.tileDash .tOutTxt{font-size:calc(12px * var(--s,1))!important;letter-spacing:.4px}
.tileDash .tStat,.tileDash .tAge{padding:calc(6px * var(--s,1)) calc(10px * var(--s,1))!important;font-size:calc(12px * var(--s,1))!important}
.tileDash .tName{font-size:calc(18px * var(--s,1))!important}
.devControls{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.cmdSingleRow{display:flex;flex-direction:column;gap:8px}
.cmdLabelSmall{font-size:12px;font-weight:900;opacity:.75;letter-spacing:.02em}
.bigCmd.start{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--good) 20%, transparent),color-mix(in srgb, var(--good) 8%, transparent))}
.bigCmd.stop{border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:linear-gradient(180deg,color-mix(in srgb, var(--bad) 20%, transparent),color-mix(in srgb, var(--bad) 8%, transparent))}
.dbgTab{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:40;border-radius:12px;padding:10px;font-weight:1000;border:1px solid rgba(255,255,255,.12);background:#0a0e148c;color:#ffffffd1;cursor:pointer}
.dbgDrawer{position:fixed;right:10px;top:72px;width:min(520px,calc(100vw - 20px));height:calc(100vh - 92px);z-index:50;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#0a0e14e0;box-shadow:0 20px 60px #00000073;overflow:hidden}
.dbgDrawer.hide{display:none}
.dbgHead{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.dbgTitle{font-weight:1000;letter-spacing:.02em;opacity:.9}
.dbgClose{border-radius:12px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#ffffffe0;cursor:pointer}
.dbgBody{height:calc(100% - 50px);padding:10px 12px;overflow:auto}
.devCard{position:relative}
.devBtnsTop{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:12px;width:min(360px,42%)}
.devBtnsTop .outBtn2{width:100%;display:flex;align-items:center;justify-content:center}
@media(max-width:980px){.devBtnsTop{position:static;width:100%;margin-top:12px}}
.tCenter *,.miniCenter *{writing-mode:horizontal-tb;text-orientation:mixed;transform:none}
.chartEmbed{margin:12px 0 0;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#070a10fa,#070a10eb)}
.chartTopEmbed{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.chartTitleEmbed{font-weight:900;letter-spacing:.4px;color:#e8eefce6;font-size:13px}
.chartBodyEmbed{padding:10px 12px 12px}
.chartCanvasWrapEmbed{height:320px}
@media(max-width:720px){.chartCanvasWrapEmbed{height:260px}}
.chartModal{position:fixed;inset:0;background:#000000b8;display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999}
.chartModal.hide{display:none}
.chartCard{width:min(1200px,96vw);height:min(720px,92vh);border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#070a10fa,#070a10eb);box-shadow:0 18px 60px #000000a6;display:flex;flex-direction:column;overflow:hidden}
.chartTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.chartTitle{font-weight:1000;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chartControls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chartSel{border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--txt);border-radius:12px;padding:9px 10px;font-weight:950;outline:none}
.chartClose{border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--txt);border-radius:12px;padding:9px 12px;font-weight:1000;cursor:pointer}
.chartBody{flex:1;position:relative;padding:10px 12px 14px}
.chartCanvasWrap{position:absolute;inset:10px 12px 14px}
#chartCanvas{width:100%;height:100%}
.tileDash.run{border:1px solid color-mix(in srgb, var(--good) 55%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--good) 20%, transparent),0 0 18px color-mix(in srgb, var(--good) 16%, transparent)}
.tileDash.stop{border:1px solid color-mix(in srgb, var(--bad) 55%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--bad) 20%, transparent),0 0 18px color-mix(in srgb, var(--bad) 16%, transparent)}

@keyframes rentStopBlink{
  0%,to{
    box-shadow:0 0 0 1px color-mix(in srgb, var(--bad) 28%, transparent),0 0 34px color-mix(in srgb, var(--bad) 22%, transparent);
    border-color:color-mix(in srgb, var(--bad) 62%, transparent);
    filter:brightness(1)
  }
  50%{
    box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 80%, transparent),0 0 86px color-mix(in srgb, var(--bad) 52%, transparent);
    border-color:var(--bad);
    filter:brightness(1.22)
  }
}

.tileDash.stop.blink{animation:rentStopBlink .7s ease-in-out infinite}
.tI .icoAcc,.statLine .icoAcc{width:16px;height:16px;vertical-align:-3px;fill:#e8eefcd9}
.tI .icoAcc .accBody,.statLine .icoAcc .accBody{fill:#e8eefc2e;stroke:#e8eefcd1;stroke-width:1.2}
.tI .icoAcc .accMark,.statLine .icoAcc .accMark{fill:#e8eefcd1}
.tI .icoAcc .accClampRed,.statLine .icoAcc .accClampRed{fill:#ef4444}
.tI .icoAcc .accClampBlue,.statLine .icoAcc .accClampBlue{fill:#3b82f6}
.tSparkWrap{grid-column:1 / -1;height:calc(44px * var(--s,1));margin-top:calc(10px * var(--s,1));padding:calc(6px * var(--s,1)) calc(8px * var(--s,1));border-radius:calc(12px * var(--s,1));background:transparent}
.tSparkSvg{width:100%;height:100%;display:block}
.sparkLine{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(34,197,94,.35));opacity:.95;transition:opacity .12s linear}
.spark-ain1{stroke:#3b82f6;filter:drop-shadow(0 0 6px rgba(59,130,246,.35))}
.spark-ain2{stroke:#8b5cf6;filter:drop-shadow(0 0 6px rgba(139,92,246,.35))}
.spark-ain3{stroke:#06b6d4;filter:drop-shadow(0 0 6px rgba(6,182,212,.35))}
.spark-power{stroke:#fde047;filter:drop-shadow(0 0 6px rgba(253,224,71,.3))}
.spark-o1{stroke:#ef4444;filter:drop-shadow(0 0 6px rgba(239,68,68,.3));opacity:.85}
.spark-o2{stroke:#ef4444;filter:drop-shadow(0 0 6px rgba(239,68,68,.25));opacity:.75}
.spark-o3{stroke:#ef4444;filter:drop-shadow(0 0 6px rgba(239,68,68,.22));opacity:.65}
.spark-ign{stroke:#22c55e;filter:drop-shadow(0 0 6px rgba(34,197,94,.3));opacity:.85}
.mapScreen{height:100vh;width:100vw;padding:0;margin:0}
.mapTop{height:64px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mapTitle{font-size:22px;font-weight:1000;letter-spacing:.6px}
.mapControls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mapErr{margin:0 14px 10px}
.mapFull{position:relative;height:calc(100vh - 64px);width:100vw;overflow:hidden}
.fleetMap{height:100%;width:100%;border-radius:0}
.mapLegend{position:absolute;right:12px;top:12px;z-index:500;border:1px solid rgba(255,255,255,.1);background:#0000004d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 40px #00000073}
.lgRow{display:flex;align-items:center;gap:8px;color:#e8eefcbf;font-weight:950;font-size:12px}
.lgDot{width:12px;height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.lgDot.run{background:var(--good)}
.lgDot.stop{background:var(--bad)}
.lgDot.offl{background:#e8eefc59}
.erMarkerWrap{background:transparent;border:none}
.erUnit{position:relative;width:44px;height:44px;border-radius:999px;border:2px solid rgba(0,0,0,.38);box-shadow:0 10px 22px #00000073;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#0b1020;font-weight:1000}
.erUnit.run{background:var(--good)}
.erUnit.stop{background:var(--bad)}
.erUnit.offl{background:#e8eefcb3}
.erPump{font-size:14px;line-height:14px}
.erPct{font-size:12px;line-height:12px}
.erPop{min-width:220px}
.erPopTitle{font-weight:1000;margin-bottom:8px}
.erTag{margin-left:8px;font-size:11px;font-weight:1000;padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb, var(--good) 30%, transparent);background:color-mix(in srgb, var(--good) 12%, transparent);color:#e8eefc}
.erPopRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:950;margin:4px 0}
.erPopRow span{opacity:.75}
.erPopBtn{margin-top:10px;width:100%;border:1px solid rgba(59,130,246,.45);background:#3b82f624;color:#0b1020;border-radius:12px;padding:10px 12px;font-weight:1000;cursor:pointer}
.erLbl{position:absolute;left:50%;top:-10px;transform:translate(-50%,-100%);padding:3px 6px;border-radius:999px;font-weight:900;font-size:11px;line-height:1;letter-spacing:.1px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.18);background:#0000008c;color:#ffffffeb;box-shadow:0 10px 18px #00000059;pointer-events:none}
.erUnit.run .erLbl{background:var(--good);border-color:color-mix(in srgb, var(--good) 35%, transparent);color:#0b1020}
.erUnit.stop .erLbl{background:var(--bad);border-color:color-mix(in srgb, var(--bad) 35%, transparent);color:#0b1020}
.erUnit.offl .erLbl{background:#e8eefccc;border-color:#e8eefc59;color:#0b1020}

/* ===== DODATKOWE DOSTROJENIE JASNEGO MOTYWU ===== */

body[data-theme="light"] .card,
body[data-theme="light"] .ctrlGroup,
body[data-theme="light"] .topSwitch,
body[data-theme="light"] .tile,
body[data-theme="light"] .kvBig div,
body[data-theme="light"] .ainBox,
body[data-theme="light"] .loginCard,
body[data-theme="light"] .cmdMsg2,
body[data-theme="light"] .attrBox,
body[data-theme="light"] .dbgDrawer,
body[data-theme="light"] .mapLegend,
body[data-theme="light"] .chartEmbed,
body[data-theme="light"] .chartCard{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
}

body[data-theme="light"] .muted2,
body[data-theme="light"] .muted3,
body[data-theme="light"] .tId,
body[data-theme="light"] .tFuelLab,
body[data-theme="light"] .tSmall,
body[data-theme="light"] .tMth,
body[data-theme="light"] .tTxt,
body[data-theme="light"] .miniSub,
body[data-theme="light"] .hint,
body[data-theme="light"] .hint2,
body[data-theme="light"] .brandSub,
body[data-theme="light"] .ctrlLab,
body[data-theme="light"] .ainK,
body[data-theme="light"] .kvBig span{
  color:rgba(15,23,42,.62);
}

body[data-theme="light"] .dbgTab{
  background:rgba(255,255,255,.88);
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
}

body[data-theme="light"] .dbgClose,
body[data-theme="light"] .chartSel,
body[data-theme="light"] .chartClose,
body[data-theme="light"] .ctrlBtn,
body[data-theme="light"] .pageBtn,
body[data-theme="light"] .swBtn,
body[data-theme="light"] .ctrlSel,
body[data-theme="light"] .inp,
body[data-theme="light"] .tIconBtn,
body[data-theme="light"] .tAct,
body[data-theme="light"] .nameEdit2,
body[data-theme="light"] .calBtn2,
body[data-theme="light"] .miniBtn2,
body[data-theme="light"] .rentTag,
body[data-theme="light"] .bigCmd,
body[data-theme="light"] .outBtn2,
body[data-theme="light"] .tOutBtn{
  background:rgba(255,255,255,.72);
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
}

body[data-theme="light"] .erLbl{
  background:rgba(255,255,255,.92);
  color:#0f172a;
  border-color:rgba(15,23,42,.14);
}