/* FENIKS starter – wszystko w obrębie .fks-starter, żeby nie gryzło się z motywem */
.fks-starter{
  --fks-bg:#0f1214; --fks-panel:#191e22; --fks-line:#2a3238; --fks-fg:#eef2f4; --fks-muted:#8b98a1;
  --fks-mark:#3a86ff; --fks-set:#ffb000; --fks-fire:#e63946; --fks-false:#7b2cbf;
  --fks-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --fks-body:"Barlow",system-ui,sans-serif;
  color-scheme:dark;
  background:var(--fks-bg); color:var(--fks-fg); font-family:var(--fks-body); font-size:15px; line-height:1.35;
  border-radius:16px; padding:14px; box-sizing:border-box;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  max-width:560px; margin:0 auto;
}
.fks-starter *,.fks-starter *::before,.fks-starter *::after{box-sizing:border-box}
.fks-app{display:flex;flex-direction:column;gap:10px;min-height:min(88svh,720px)}

/* tryb pełnoekranowy */
html:has(.fks-body),.fks-body{height:100%;margin:0;background:#0f1214}
.fks-body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.fks-starter.fks-full{height:100%;border-radius:0;max-width:none;
  padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.fks-full .fks-app{height:100%;min-height:0;max-width:560px;margin:0 auto}

.fks-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fks-starter .fks-title{font-family:var(--fks-display);font-weight:800;font-size:1.6rem;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--fks-fg);line-height:1.1}
.fks-status{font-size:.8rem;color:var(--fks-muted);text-align:right}
.fks-status b{color:var(--fks-fg);font-weight:600}

.fks-pads{flex:1;width:30%;min-width:120px;margin-inline:auto;display:grid;grid-template-rows:1fr 1fr 1.5fr 1fr;gap:10px;min-height:340px}
.fks-starter button{font:inherit;color:inherit;border:0;cursor:pointer;margin:0;text-transform:none;box-shadow:none}
.fks-starter .fks-pad{border-radius:14px;background:var(--fks-panel);border:2px solid var(--fks-c);
  display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px;text-align:left;width:100%;
  color:var(--fks-fg);transition:transform .06s,background .1s;touch-action:manipulation}
.fks-pad:active{transform:scale(.985)}
.fks-pad:focus-visible{outline:3px solid var(--fks-fg);outline-offset:2px}
.fks-t{font-family:var(--fks-display);font-weight:800;font-size:clamp(1.35rem,5.4vw,2rem);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.fks-k{font-family:var(--fks-display);font-weight:600;font-size:.85rem;white-space:nowrap;color:var(--fks-muted);letter-spacing:.1em}
.fks-m{--fks-c:var(--fks-mark)} .fks-s{--fks-c:var(--fks-set)} .fks-fire{--fks-c:var(--fks-fire)} .fks-f{--fks-c:var(--fks-false)}
.fks-starter .fks-pad.fks-fire{background:var(--fks-fire)}
.fks-fire .fks-t{font-size:clamp(1.9rem,8vw,2.8rem)}
.fks-fire .fks-k{color:#ffd6d9}
.fks-starter .fks-pad.fks-lit{background:var(--fks-c);color:#0f1214}
.fks-pad.fks-lit .fks-k{color:#0f1214}

.fks-settings{background:var(--fks-panel);border-radius:12px;border:1px solid var(--fks-line)}
.fks-settings summary{padding:12px 14px;font-weight:600;cursor:pointer;color:var(--fks-fg)}
.fks-set{padding:4px 14px 14px;display:grid;gap:12px;font-size:.9rem}
.fks-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fks-lbl{flex:1;min-width:0;display:block;color:var(--fks-fg);font-weight:400;margin:0}
.fks-lbl small{display:block;color:var(--fks-muted);font-size:.8rem}
.fks-starter input[type=range]{width:100%;accent-color:var(--fks-fire);margin-top:6px}
.fks-starter .fks-btn{background:var(--fks-line);padding:10px 14px;border-radius:10px;font-weight:600;color:var(--fks-fg)}
.fks-starter .fks-btn.fks-on{background:var(--fks-set);color:#0f1214}
.fks-val{font-variant-numeric:tabular-nums;font-weight:600}
.fks-starter .fks-open{display:block;text-align:center;padding:12px;border-radius:12px;border:1px solid var(--fks-line);color:var(--fks-fg);text-decoration:none;font-weight:600}

@media (prefers-reduced-motion:reduce){.fks-pad{transition:none}}

/* wąskie klawisze: napis nad numerem, wyśrodkowane */
.fks-starter .fks-pad{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:0 6px}
.fks-starter .fks-t{font-size:clamp(1rem,4.2vw,1.5rem)}
.fks-starter .fks-fire .fks-t{font-size:clamp(1.3rem,6vw,2rem)}

/* logo w nagłówku */
.fks-starter .fks-title{display:flex;align-items:center;gap:8px}
.fks-starter .fks-logo{width:40px;height:auto;display:block;flex:none}
/* instalacja jako aplikacja */
.fks-install{display:flex;align-items:center;gap:10px;background:var(--fks-panel);border:1px solid var(--fks-set);border-radius:12px;padding:10px 12px}
.fks-install[hidden]{display:none!important}
.fks-install img{width:44px;height:44px;border-radius:10px;flex:none}
.fks-starter .fks-open + .fks-open{margin-top:-2px}
.fks-starter .fks-title{white-space:nowrap;font-size:1.35rem}
.fks-head{align-items:center}
.fks-status{min-width:0}