style.css

:root{
  --bg:#0b0b11; --card:#15151f; --card2:#1e1e2b; --panel:#0f0f17; --field:#101019;
  --fg:#f4f4fa; --sub:#8a8aa4; --mut:#6a6a84;
  --acc:#7c5cff; --acc2:#9a82ff; --green:#22c55e; --green2:#34d76b; --red:#ef4444; --edge:#33334a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Segoe UI","Segoe UI Emoji",system-ui,sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:#26263a;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#33334a}
/* #app is the scroll container -> no window-level scrollbar */
#app{height:100vh;overflow-y:auto;overflow-x:hidden;padding:18px 20px 40px}

/* header */
.header{display:flex;align-items:center;gap:14px;padding:6px 4px 14px}
.logo{width:46px;height:46px;border-radius:12px}
.title{font-size:22px;font-weight:700}
.subtitle{font-size:12px;color:var(--acc2);margin-top:2px}
.header .spacer{flex:1}

/* cards */
.card{background:var(--card);border-radius:18px;padding:18px 20px;margin-bottom:16px}
.card.accent{background:#171225;border:2px solid var(--acc)}
.sec{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.4px;margin:6px 0 10px}
.hint{font-size:11.5px;color:#d0d0e0;line-height:1.55;margin-top:13px;
  background:#12121c;border:1px solid #23232f;border-radius:11px;padding:11px 13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.row{display:flex;gap:10px;align-items:center}

/* buttons */
.btn{
  border:0;border-radius:12px;background:var(--card2);color:var(--fg);
  font:inherit;font-weight:600;padding:12px 16px;cursor:pointer;position:relative;
  transition:transform .1s,filter .12s,box-shadow .15s,background .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn:hover{filter:brightness(1.14);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.big{padding:16px 18px;font-size:15px;border-radius:14px;font-weight:700}
.btn.green{background:var(--green);color:#04210f;box-shadow:0 6px 16px -8px rgba(34,197,94,.55)}
.btn.green:hover{background:#2ee068;box-shadow:0 10px 22px -8px rgba(34,197,94,.7)}
.btn.acc{background:var(--acc);color:#fff;box-shadow:0 6px 16px -8px rgba(124,92,255,.55)}
.btn.acc:hover{background:var(--acc2);box-shadow:0 10px 24px -8px rgba(124,92,255,.7)}
#stopBtn{background:#1c1c28;color:var(--sub);box-shadow:inset 0 0 0 1px #34222a}
#stopBtn:hover{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(239,68,68,.55)}
.btn.wide{width:100%}
.btn.icon{width:46px;padding:0;height:44px;font-size:18px}
.btn.icon img{width:20px;height:20px}
.btn.ghost{background:transparent;box-shadow:none;color:var(--mut)}
.btn.ghost:hover{background:var(--card2)}
.btn .em{font-size:17px;line-height:1}

/* status */
.statuscard{transition:box-shadow .3s,background .3s}
.statuscard.run{box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.28), 0 0 26px -6px rgba(34,197,94,.35)}
.statusbar{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.pulse{--rc:106,106,132;position:relative;width:13px;height:13px;flex:0 0 auto}
.pulse .dot{position:absolute;inset:0;border-radius:50%;background:rgb(var(--rc));transition:background .25s}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%}
.pulse.run{--rc:34,197,94}
.pulse.wait{--rc:154,130,255}
.pulse.run .dot,.pulse.wait .dot{animation:beat 1.6s ease-in-out infinite}
.pulse.run::after,.pulse.wait::after{animation:ring 1.7s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(var(--rc),.55)}70%{box-shadow:0 0 0 13px rgba(var(--rc),0)}100%{box-shadow:0 0 0 0 rgba(var(--rc),0)}}
@keyframes beat{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.18);filter:brightness(1.25)}}
.statusbar .txt{font-weight:800;font-size:12px;letter-spacing:1px}
.statuscard.run .txt{text-shadow:0 0 12px rgba(34,197,94,.5)}
.startbtn{position:relative;overflow:hidden}
.startbtn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,55%{left:-70%}100%{left:150%}}

/* segmented / mode switch */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.seg .btn.on{background:var(--acc);color:#fff}

/* sliders */
.slider-row{display:flex;align-items:center;gap:12px;margin:8px 0}
.slider-row label{width:150px;color:var(--fg);font-size:13px}
.slider-row .val{width:44px;text-align:right;color:var(--acc2);font-weight:700}
input[type=range]{
  -webkit-appearance:none;flex:1;height:6px;border-radius:5px;background:var(--card2);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc2);
  cursor:pointer;box-shadow:0 0 0 3px rgba(124,92,255,.25);transition:transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}

/* select / input */
select{
  width:100%;appearance:none;-webkit-appearance:none;color:var(--fg);font:inherit;font-weight:600;cursor:pointer;
  background:var(--field) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239a82ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 14px center;
  border:1px solid var(--edge);border-radius:12px;padding:12px 40px 12px 14px;outline:none;
  transition:border-color .12s,box-shadow .12s,background-color .12s;
}
select:hover{border-color:#4a4a66;background-color:#14141f}
select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,92,255,.2)}
select option{background:#1a1a26;color:#f4f4fa;padding:8px}
input[type=text],input[type=password]{
  width:100%;background:var(--field);color:var(--fg);border:1px solid var(--edge);
  border-radius:12px;padding:12px 14px;font:inherit;outline:none;transition:border-color .12s,box-shadow .12s;
}
input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,92,255,.2)}
input::placeholder{color:var(--mut)}
.swatch{width:38px;height:38px;border-radius:10px;flex:0 0 auto}

/* ===== the pad grid ===== */
.gridwrap{background:var(--panel);border-radius:16px;padding:14px;display:inline-block}
.gridcenter{text-align:center;margin:6px 0 4px}
.pgrid{
  display:grid;grid-template-columns:repeat(9,1fr);grid-auto-rows:1fr;gap:6px;
}
.cell{aspect-ratio:1/1;border-radius:12px;position:relative;user-select:none}
.pad{
  background:#1d1d2b;border:2px solid var(--edge);display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:var(--padfs,11px);font-weight:600;line-height:1.02;padding:2px;color:#0b0b11;cursor:pointer;
  transition:box-shadow .05s,transform .05s;overflow:hidden;word-break:break-word;hyphens:auto;
}
.pad.set{border:0}
.pad:hover{box-shadow:inset 0 0 0 3px #fff, 0 0 10px rgba(255,255,255,.25);z-index:2}
.pad.empty{color:var(--sub)}
.pad.empty:hover{box-shadow:inset 0 0 0 3px var(--acc2)}
.ctl{
  background:#28263a;border:1px solid #544c78;color:#cec6ec;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--padfs,11px) * 0.9);font-weight:700;line-height:1;cursor:pointer;overflow:hidden;
  transition:background .1s,box-shadow .05s;
}
.ctl.arrow{font-size:calc(var(--padfs,11px) * 1.7);color:#e6e0ff}
.ctl.arrow:not(.empty):hover{box-shadow:inset 0 0 0 2px var(--acc2)}
.ctl.empty{background:#1b1927;border-color:#322e48;cursor:default}
.ctl:not(.empty):hover{background:#3a3556;box-shadow:inset 0 0 0 2px var(--acc2)}
.corner{
  background:#20202e;border:1px solid #3a3550;border-radius:12px;overflow:hidden;padding:12%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:box-shadow .12s,transform .1s,border-color .12s;
}
.corner-logo{width:100%;height:100%;object-fit:contain;transition:transform .12s;
  filter:drop-shadow(0 0 5px rgba(124,92,255,.35))}
.corner:hover{border-color:var(--acc);box-shadow:inset 0 0 0 2px var(--acc2),0 0 14px -2px rgba(124,92,255,.6)}
.corner:hover .corner-logo{transform:scale(1.06)}
.corner:active{transform:scale(.96)}

/* modal */
.overlay{
  position:fixed;inset:0;background:rgba(4,4,8,.66);display:none;align-items:center;justify-content:center;z-index:50;
  backdrop-filter:blur(2px);
}
.overlay.show{display:flex}
.modal{
  background:var(--card);border-radius:18px;padding:22px;width:min(440px,92vw);
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:pop .16s ease-out;
}
@keyframes pop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:17px;margin-bottom:2px}
.modal .msub{color:var(--sub);font-size:12px;margin-bottom:14px}
.modal .fld{margin:10px 0 4px;font-size:11px;font-weight:700;color:var(--sub)}
.modal .bar{display:flex;gap:8px;margin-top:18px}
.modal .bar .btn{flex:1}
.modal .bar .btn.icon{flex:0 0 46px}
.big-emoji{font-size:44px;text-align:center;margin:6px 0}

/* tutorial */
.tut-illus{
  height:150px;border-radius:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% -10%, rgba(124,92,255,.20), #0f0f17 60%);
  border:1px solid #2a2740;font-size:64px;
}
.tut-title{font-size:18px;font-weight:700;text-align:center}
.tut-body{color:var(--sub);text-align:center;margin:8px 4px;line-height:1.5}
.tut-ex{background:var(--card2);border-radius:10px;padding:8px 12px;color:var(--acc2);font-weight:600;font-size:12px;text-align:center}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--mut);transition:background .15s}
.dots i.on{background:var(--acc)}

/* organized subsections (More card) */
.sub{padding:4px 0}
.sub-h{font-size:12px;font-weight:800;color:var(--fg);letter-spacing:.3px;margin:2px 0 13px;display:flex;align-items:center;gap:9px}
.sub-h .em{font-size:15px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--edge),transparent);margin:20px 0}
.note{font-size:11.5px;color:#d0d0e0;line-height:1.55;margin-top:13px;background:#12121c;border:1px solid #23232f;border-radius:11px;padding:12px 13px}

.pill{background:var(--acc);color:#0b0b11;border-radius:9px;padding:4px 9px;font-size:10px;font-weight:700}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.switch .track{width:44px;height:24px;border-radius:14px;background:var(--card2);position:relative;transition:background .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+.track{background:var(--acc)}
.switch input:checked+.track::after{transform:translateX(20px)}

/* startup / closing bloom overlays (small centered card on a dark backdrop) */
#splash,#closing{position:fixed;inset:0;z-index:200;background:#0b0b11;
  display:flex;align-items:center;justify-content:center;transition:opacity .55s ease}
#splash.hide{opacity:0;pointer-events:none}
#closing{display:none;z-index:250}
#closing.show{display:flex}
.sp-card{background:#0f0f17;border:1px solid #221f30;border-radius:22px;padding:20px 30px 28px;
  display:flex;flex-direction:column;align-items:center;gap:12px;width:360px;max-width:88vw;
  box-shadow:0 30px 80px -18px rgba(0,0,0,.75)}
#bloomCanvas,#bloomCanvas2{width:280px;height:220px}
.sp-title{font-size:23px;font-weight:800;letter-spacing:.5px}
.sp-sub{color:var(--sub);font-size:12px;margin-top:-4px}
.sp-bar{width:250px;height:6px;background:#1e1e2b;border-radius:4px;overflow:hidden;margin-top:6px}
.sp-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#7c5cff,#9a82ff)}

/* --- update banner + TON support (v1.1) --- */
.btn.small{padding:8px 13px;font-size:12.5px;border-radius:10px}
#updateBar{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#241b4d,#2c2352);
  border:1px solid var(--acc);border-radius:14px;padding:11px 15px;margin-bottom:16px}
#updateBar .spacer{flex:1}
#updateText{font-size:13px;font-weight:600;color:#e8e4ff}
.support-card{background:#171225;border:2px solid var(--acc)}
.ton-row{display:flex;align-items:center;gap:10px;background:#0f0f17;border:1px solid var(--edge);
  border-radius:12px;padding:10px 13px}
.ton-row code{flex:1;font-family:"Consolas",monospace;font-size:12px;color:#cfc7ff;
  word-break:break-all;line-height:1.5}
.tip{font-size:11px;color:var(--mut);text-align:center;margin:2px 0 20px}

/* OBS backend selector + test result (v1.2) */
.fld2{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.3px;margin-bottom:6px}
.obs-res{flex:1;font-size:12px;font-weight:600;line-height:1.4;align-self:center}
.obs-res.ok{color:var(--green2)}
.obs-res.err{color:var(--red)}
.obs-res.wait{color:var(--acc2)}