/* === токени теми (спільні для всіх ace-портів) === */
:root{--ace-bg:#ffffff;--ace-fg:#0a0a0a;--ace-muted:#525252;--ace-border:rgba(0,0,0,.08)}
html[data-theme=dark]{--ace-bg:#0b0d10;--ace-fg:#fafafa;--ace-muted:#a3a3a3;--ace-border:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--ace-bg:#0b0d10;--ace-fg:#fafafa;--ace-muted:#a3a3a3;--ace-border:rgba(255,255,255,.1)}}

:root{
  --card:rgba(0,0,0,.02);
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#2563eb; --hot:#f97316;
  /* Кухня: у цілі дотику треба влучати не дивлячись, тому 88px — мінімум. */
  --hit:88px;
  --gap:16px;
  --radius:18px;
}
html[data-theme=dark]{--card:rgba(255,255,255,.04)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--card:rgba(255,255,255,.04)}}
html[data-theme=dark],html:not([data-theme=light]){--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--info:#60a5fa;--hot:#fb923c}
html[data-theme=light]{--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--info:#2563eb;--hot:#ea580c}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ace-bg);color:var(--ace-fg);
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:grid;grid-template-columns:auto 1fr;
  overflow:hidden;                 /* панель — не сторінка, а екран */
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;       /* без затримки 300 мс і випадкового зуму */
  user-select:none;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0)
          env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}

/* === ace-aurora-background === */
.ace-aurora-background{position:relative;isolation:isolate;
  --ace-aurora:repeating-linear-gradient(100deg,#3b82f6 10%,#a5b4fc 15%,#93c5fd 20%,#ddd6fe 25%,#60a5fa 30%);
  --ace-stripes:repeating-linear-gradient(100deg,var(--ace-bg) 0%,var(--ace-bg) 7%,transparent 10%,transparent 12%,var(--ace-bg) 16%)}
.ace-aurora-background::before{content:"";position:fixed;inset:-10px;z-index:-1;pointer-events:none;
  background-image:var(--ace-stripes),var(--ace-aurora);background-size:300% 200%,200% 100%;
  filter:blur(46px);opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse at 15% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 15% 0%,#000 10%,transparent 72%);
  animation:ace-aurora 90s linear infinite}
html[data-theme=light] .ace-aurora-background::before{filter:blur(46px) invert(1);opacity:.20}
@keyframes ace-aurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
@media (prefers-reduced-motion:reduce){.ace-aurora-background::before{animation:none}}

/* === ліва навігація === */
.nav{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 10px;border-right:1px solid var(--ace-border);
  background:color-mix(in srgb,var(--ace-bg) 75%,transparent);
  backdrop-filter:blur(14px);
}
.brand{font-size:30px;line-height:1;margin-bottom:6px}
.nav-items{display:flex;flex-direction:column;gap:8px;flex:1}
.nav-btn{
  width:var(--hit);min-height:var(--hit);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--ace-muted);cursor:pointer;
  font:inherit;font-size:11px;letter-spacing:.02em;
  transition:background .15s,color .15s;
}
.nav-btn .ico{font-size:26px;line-height:1}
.nav-btn.on{background:var(--ace-fg);color:var(--ace-bg);font-weight:700}
.nav-btn.theme{margin-top:auto;font-size:22px;min-height:64px}

/* === головна === */
.main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 18px;gap:14px;overflow:hidden}

.head{display:flex;align-items:center;gap:18px;flex:none}
.clock{display:flex;flex-direction:column;line-height:1;flex:none}
.clock span{font-size:clamp(34px,4.4vw,52px);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.clock small{color:var(--ace-muted);font-size:13px;margin-top:4px}

.stats{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.chip{
  display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:14px;
  background:var(--card);border:1px solid var(--ace-border);min-width:96px;
}
.chip b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.chip small{color:var(--ace-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.chip.hot b{color:var(--hot)}

.live{display:flex;align-items:center;gap:8px;color:var(--ace-muted);font-size:12px;flex:none}
.live .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.live.stale .dot{background:var(--warn)}
.live.down .dot{background:var(--bad)}

/* === сцени === */
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);flex:none}
.scene{
  min-height:96px;display:flex;align-items:center;gap:14px;padding:0 20px;
  border:1px solid var(--ace-border);border-radius:var(--radius);
  background:var(--card);color:inherit;cursor:pointer;font:inherit;text-align:left;
  transition:transform .08s,background .15s,border-color .15s;
}
.scene:active{transform:scale(.97)}
.scene .ico{font-size:32px;line-height:1;flex:none}
.scene b{display:block;font-size:17px;font-weight:650}
.scene small{color:var(--ace-muted);font-size:12px}
.scene.danger{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.scene.danger .ico{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--bad) 60%,transparent))}

/* === плитки === */
.tiles{
  display:grid;gap:var(--gap);overflow-y:auto;overscroll-behavior:contain;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  align-content:start;align-items:start;
  padding-bottom:4px;
}
.tile{
  border:1px solid var(--ace-border);border-radius:var(--radius);
  background:var(--card);padding:16px;display:flex;flex-direction:column;gap:12px;
}
.tile.on{border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.tile.heat{border-color:color-mix(in srgb,var(--hot) 50%,transparent)}
.tile.offline{opacity:.45}
.tile-head{display:flex;align-items:baseline;gap:10px}
.tile-head b{font-size:17px;font-weight:650}
.tile-head .val{margin-left:auto;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.tile.on .val{color:var(--ok)}
.tile.heat .val{color:var(--hot)}
.tile .note{color:var(--ace-muted);font-size:12px;margin-top:-6px}

.bar{height:6px;border-radius:99px;background:var(--ace-border);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ace-fg);border-radius:99px;
  transition:width .25s}
.tile.on .bar i{background:var(--ok)}

.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{
  flex:1 1 auto;min-width:56px;min-height:56px;padding:0 12px;
  border:1px solid var(--ace-border);border-radius:14px;
  background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:15px;
  font-weight:600;transition:transform .08s,background .15s,border-color .15s;
}
.act.wide{flex:1 1 44%}
.act:active{transform:scale(.94)}
.act.on{background:var(--ace-fg);color:var(--ace-bg);border-color:var(--ace-fg)}
.act.success.on{background:var(--ok);border-color:var(--ok);color:#05130a}
.act.danger.on{background:var(--bad);border-color:var(--bad);color:#160404}
.act.busy{opacity:.55}
.act.fail{animation:shake .3s;border-color:var(--bad);color:var(--bad)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  padding:12px 20px;border-radius:14px;font-size:15px;font-weight:600;
  background:var(--ace-fg);color:var(--ace-bg);box-shadow:0 8px 30px rgba(0,0,0,.35);
  z-index:20;
}
.toast.bad{background:var(--bad);color:#fff}

/* Планшети 1280×800: сцени в два ряди, щоб не стискались у смужку. */
@media (max-width:1100px){
  .scenes{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (max-height:760px){
  .scene{min-height:80px}
  .clock span{font-size:34px}
}