/* PIMML config Mini App. Colours follow Telegram's themeParams (injected as
   --tg-theme-* by the SDK) with a dark fallback for a plain browser. */
:root{
  --bg: var(--tg-theme-bg-color, #11151a);
  --panel: var(--tg-theme-secondary-bg-color, #1a2027);
  --text: var(--tg-theme-text-color, #e8eef4);
  --muted: var(--tg-theme-hint-color, #8a97a6);
  --accent: var(--tg-theme-button-color, #2ea6ff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --link: var(--tg-theme-link-color, #57b6ff);
  --line: #2a333d33;
  --green:#34c759; --amber:#ffb020; --red:#ff5a5f;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
b{font-weight:700}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:5;background:var(--bg);
  padding:12px 14px 0;border-bottom:1px solid var(--line)}
.acct{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.acct-meta{display:flex;flex-direction:column;min-width:0}
.acct-meta b{font-size:15px}
.acct-meta .muted{font-size:12px}
.pill{font-size:11px;font-weight:800;letter-spacing:.4px;padding:4px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.pill.live{background:rgba(52,199,89,.16);color:var(--green);border-color:rgba(52,199,89,.4)}
.pill.paper{background:rgba(46,166,255,.14);color:var(--accent);border-color:rgba(46,166,255,.35)}
.pill.alerts{background:rgba(138,151,166,.16);color:var(--muted);border-color:rgba(138,151,166,.35)}

.modebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 12px}
.modelabel{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.modeseg{flex:0 0 auto}
.modehint{font-size:11.5px;color:var(--muted)}

.tabs{display:flex;gap:4px}
.tab{appearance:none;border:none;background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- views / toolbar ---------- */
main{padding:14px 14px 40px;max-width:680px;margin:0 auto}
.view{display:none}
.view.active{display:block}
.toolbar{display:flex;gap:10px;margin-bottom:14px}
.filter{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:10px 12px;font-size:14px;outline:none}
.filter::placeholder{color:var(--muted)}
.btn{appearance:none;border:none;border-radius:10px;padding:10px 14px;font-weight:700;
  font-size:14px;cursor:pointer}
.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.btn.primary{background:var(--accent);color:var(--accent-text)}
.btn.danger{background:rgba(255,90,95,.14);color:var(--red);border:1px solid rgba(255,90,95,.4)}
.loading{color:var(--muted);padding:30px 4px;text-align:center}

/* ---------- groups ---------- */
.group{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;cursor:pointer;user-select:none}
.gname{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.gdot{width:8px;height:8px;border-radius:3px;background:var(--accent);flex:0 0 auto}
.gright{display:flex;align-items:center;gap:9px}
.gcount{color:var(--muted);font-size:12px}
.gcount .ovr{color:var(--accent);font-weight:700}
.chev{color:var(--muted);transition:transform .15s;font-size:13px}
.group.open .chev{transform:rotate(90deg)}
.gbody{display:none;border-top:1px solid var(--line)}
.group.open .gbody{display:block}

/* ---------- one parameter card ----------
   Layout is deliberately TWO blocks stacked: (1) the label + control row, and
   (2) the FULL description on its own line. Label text and description are
   never concatenated or truncated. */
.param{padding:14px 15px;border-top:1px solid var(--line)}
.gbody .param:first-child{border-top:none}
.param-top{display:flex;align-items:center;gap:12px}
.param-id{flex:1;min-width:0}
.pkey{font-size:14.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-word}
.badges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.badge{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:6px}
.badge.ovr{background:rgba(46,166,255,.16);color:var(--accent)}
.badge.env{background:rgba(255,176,32,.16);color:var(--amber)}
.badge.def{background:#80808022;color:var(--muted)}
.badge.saved{background:rgba(52,199,89,.18);color:var(--green)}

/* description: full, never clamped */
.pdesc{margin:11px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.pmeta{margin-top:9px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--muted)}
.pmeta .reset{color:var(--link);cursor:pointer;font-weight:600}
.pmeta .reset:hover{text-decoration:underline}

/* ---------- controls ---------- */
.ctrl{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.value{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;min-width:46px;text-align:right}

.toggle{width:46px;height:28px;border-radius:999px;background:#7f8a9633;position:relative;
  cursor:pointer;transition:background .15s;flex:0 0 auto}
.toggle.on{background:var(--green)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle.on::after{left:21px}

.seg{display:flex;background:#7f8a9622;border-radius:10px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{appearance:none;border:none;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer}
.seg button.sel{background:var(--accent);color:var(--accent-text)}

.numrow{display:flex;align-items:center;gap:10px}
.num{width:84px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:8px 10px;font-size:14px;text-align:right;font-variant-numeric:tabular-nums;outline:none}
.num:focus{border-color:var(--accent)}
.slider{margin-top:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:#7f8a9633;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 5px rgba(46,166,255,.14)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--accent)}
.ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px}

.csv{width:100%;margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--text);padding:9px 11px;font-size:14px;outline:none}
.csv:focus{border-color:var(--accent)}

/* ---------- history ---------- */
.hitem{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.hitem .hkey{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14px}
.hitem .hchange{margin-top:6px;font-size:13.5px}
.hold{color:var(--red);text-decoration:line-through;opacity:.85}
.hnew{color:var(--green);font-weight:700}
.harrow{color:var(--muted);margin:0 6px}
.hwhen{color:var(--muted);font-size:12px;margin-top:6px}

/* ---------- admin ---------- */
.atable{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.atable th,.atable td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);font-size:13px}
.atable th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.atable tr:last-child td{border-bottom:none}
.atable td.mono{font-variant-numeric:tabular-nums}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:#000c;color:#fff;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#5a0f12ee;border:1px solid var(--red)}