/* ============================================================
   全屏弹幕手持 · handheld LED sign
   Design: a physical LED control deck. Near-black, acid lime,
   dot-matrix stage, hardware-style keys.
   ============================================================ */

:root{
  --ink:#07080A;
  --panel:#0E1013;
  --panel-2:#14171C;
  --panel-3:#191D23;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --paper:#ECEEE6;
  --muted:#7E848E;
  --muted-2:#565C66;
  --lime:#C6FF3D;
  --lime-dim:rgba(198,255,61,.14);
  --pink:#FF3D7F;
  --cyan:#63F5FF;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular","JetBrains Mono",Consolas,monospace;
  --sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",SimSun,serif;
  --r:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:#000}

/* backdrop atmosphere ---------------------------------------- */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 45vw at 8% -8%,rgba(198,255,61,.10),transparent 62%),
    radial-gradient(50vw 40vw at 105% 12%,rgba(255,61,127,.10),transparent 65%),
    radial-gradient(70vw 60vw at 50% 120%,rgba(99,245,255,.06),transparent 60%),
    linear-gradient(180deg,#07080A,#050608 60%,#07080A);
}
.ambient::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 80%);
}

/* topbar ----------------------------------------------------- */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1480px;margin:0 auto;
  padding:18px 32px 14px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{
  position:relative;display:grid;gap:3px;width:34px;height:34px;
  padding:6px 5px;border:1px solid var(--line-strong);border-radius:9px;
  background:linear-gradient(180deg,#12151A,#0A0C0F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px -8px #000;
}
.brand-mark i{display:block;height:3px;border-radius:1px;background:var(--lime);box-shadow:0 0 8px rgba(198,255,61,.6)}
.brand-mark i:nth-child(1){width:100%;opacity:.95}
.brand-mark i:nth-child(2){width:62%;opacity:.6}
.brand-mark i:nth-child(3){width:84%;opacity:.8}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:19px;font-weight:900;letter-spacing:.02em}
.brand-text em{
  font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;margin-top:1px;
}
.topbar-actions{display:flex;align-items:center;gap:10px}
.badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap;
}
.ghost-btn{
  font-size:13px;color:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;transition:border-color .18s,background .18s,color .18s;
}
.ghost-btn:hover{border-color:var(--line-strong);background:rgba(255,255,255,.04)}
.ghost-btn:active{transform:translateY(1px)}

/* layout ----------------------------------------------------- */
.workbench{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;
  max-width:1480px;margin:0 auto;padding:6px 32px 90px;
}
.stage-col{position:sticky;top:22px;align-self:start;display:flex;flex-direction:column;gap:14px}

/* ============================ STAGE ======================== */
.stage{
  position:relative;width:100%;
  height:clamp(340px,calc(100dvh - 210px),660px);
  border-radius:22px;overflow:hidden;isolation:isolate;
  background:#000;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 50px 90px -40px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 80px rgba(0,0,0,.75);
  cursor:pointer;
  animation:stageIn .8s cubic-bezier(.16,.84,.28,1) both;
}
@keyframes stageIn{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}

/* LED dot matrix + scanlines sit above the type */
.stage-led{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 1.55px);
  background-size:9px 9px;
  opacity:.3;
  mix-blend-mode:soft-light;
}
.stage::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  opacity:.28;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55));
}
.sign{position:absolute;inset:0;z-index:2;transform-origin:center center}
.sign.mirror{transform:scaleX(-1)}
.sign-content{position:absolute;inset:0;overflow:hidden;contain:layout paint}
.lane{
  position:absolute;left:0;top:0;margin:0;
  white-space:nowrap;line-height:1;will-change:transform;
  font-kerning:none;text-rendering:optimizeLegibility;
}
.lane.center{left:50%;top:50%;transform:translate(-50%,-50%)}
.lane.blink,.rise-block.blink{animation:blinkPulse var(--blink,1s) ease-in-out infinite}
@keyframes blinkPulse{0%,100%{opacity:1}45%{opacity:.08}}
.sign-content.paused .lane,.sign-content.paused .rise-block{animation-play-state:paused}
.rise-block{
  position:absolute;left:50%;top:0;width:max-content;
  text-align:center;line-height:1.12;will-change:transform;
  transform:translate(-50%,0);
}
.rise-line{white-space:nowrap}
.rise-block.wrap .rise-line{white-space:normal;word-break:break-word;overflow-wrap:anywhere}

.dim{
  position:absolute;inset:0;z-index:7;background:#000;opacity:0;
  pointer-events:none;transition:opacity .25s ease;
}

.stage-hint{
  position:absolute;left:14px;bottom:14px;z-index:10;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
  background:rgba(8,9,11,.62);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:7px 12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.stage-hint .dot{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.stage-tag{
  position:absolute;left:14px;top:13px;z-index:10;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.42);
}
.stage-meta{
  position:absolute;right:14px;top:12px;z-index:10;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.42);
}
.stage-foot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0 4px}
.stage-foot p{margin:0;color:var(--muted);font-size:12.5px}
.stage-foot-main{color:#A9AFB8}
.stage-foot-sub{font-size:11.5px;color:var(--muted-2)}
kbd{
  font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;
  border:1px solid var(--line-strong);background:var(--panel-2);color:var(--paper);
}

/* ============================ DECK ========================= */
.deck{min-width:0}
.panel{
  padding:26px 0 28px;
  border-top:1px solid var(--line);
  animation:panelIn .55s cubic-bezier(.16,.84,.28,1) both;
}
.panel:nth-child(2){animation-delay:.05s}
.panel:nth-child(3){animation-delay:.1s}
.panel:nth-child(4){animation-delay:.15s}
.panel:first-child{border-top:0;padding-top:6px}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.panel-no{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--lime);
  padding-top:3px;
}
.panel-head h2{margin:0;font-size:19px;font-weight:900;letter-spacing:.01em;line-height:1.25}
.panel-head p{margin:2px 0 0;font-size:11.5px;color:var(--muted-2)}
.panel-count{
  margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap;
}

/* text input */
.text-input{
  display:block;width:100%;min-height:98px;resize:vertical;
  padding:15px 16px;border-radius:14px;
  background:linear-gradient(180deg,#080A0C,#0A0C0F);
  border:1px solid var(--line);
  color:var(--paper);font-size:17px;line-height:1.62;letter-spacing:.01em;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
  caret-color:var(--lime);
  transition:border-color .18s,box-shadow .18s;
}
.text-input:focus{outline:0;border-color:rgba(198,255,61,.55);box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 0 0 3px rgba(198,255,61,.10)}
.text-input::placeholder{color:#4E545D}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{
  font-size:12px;color:#B9BFC7;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:.16s;white-space:nowrap;
}
.chip:hover{color:var(--ink);background:var(--lime);border-color:var(--lime)}

/* mode grid */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 11px 12px;border-radius:13px;text-align:left;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#121519,#0C0E11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .16s,background .16s,transform .1s,box-shadow .16s;
}
.mode:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.mode:active{transform:translateY(1px)}
.mode-icon{font-size:16px;line-height:1.4;color:var(--muted);transition:color .16s}
.mode-name{font-size:13px;font-weight:700;letter-spacing:.01em}
.mode-desc{font-size:10px;color:var(--muted-2)}
.mode[aria-checked="true"]{
  border-color:rgba(198,255,61,.6);
  background:linear-gradient(180deg,rgba(198,255,61,.13),rgba(198,255,61,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 22px -6px rgba(198,255,61,.55);
}
.mode[aria-checked="true"] .mode-icon,.mode[aria-checked="true"] .mode-name{color:var(--lime)}
.mode[aria-checked="true"] .mode-desc{color:rgba(198,255,61,.62)}

/* sliders */
.slider-row{display:grid;grid-template-columns:46px minmax(0,1fr) 34px;align-items:center;gap:10px;margin-top:14px}
.slider-row label{font-size:12px;color:var(--muted);letter-spacing:.02em}
.slider-row output{
  font-family:var(--mono);font-size:12px;color:var(--lime);text-align:right;
  font-variant-numeric:tabular-nums;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--lime) var(--p,50%),#262A30 var(--p,50%));
}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#262A30}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--lime)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:21px;margin-top:-8.5px;
  border-radius:4px;background:var(--lime);
  box-shadow:0 0 0 3px #0A0C0F,0 0 16px rgba(198,255,61,.55);
  transition:transform .12s;
}
input[type=range]:active::-webkit-slider-thumb{transform:scaleY(1.08)}
input[type=range]::-moz-range-thumb{
  width:15px;height:21px;border:0;border-radius:4px;background:var(--lime);
  box-shadow:0 0 0 3px #0A0C0F,0 0 16px rgba(198,255,61,.55);
}

/* fields */
.field{margin-top:6px}
.field + .field{margin-top:16px}
.field-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.field-label span:first-child{font-size:12px;color:var(--muted)}
.field-hint{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--muted-2)}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{
  position:relative;display:inline-block;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35);
  transition:transform .12s,box-shadow .16s;
  cursor:pointer;
}
.swatch:hover{transform:translateY(-2px)}
.swatch[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lime),inset 0 0 0 3px rgba(0,0,0,.35);
}
.swatch-custom{
  display:grid;place-items:center;overflow:hidden;background:
    conic-gradient(from 0deg,#FF3D7F,#FFD447,#C6FF3D,#63F5FF,#B07CFF,#FF3D7F);
  color:#08090B;font-size:14px;font-weight:900;
}
.swatch-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.swatches-bg .swatch{width:46px;height:30px;border-radius:8px}
.swatches-bg .swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lime)}

.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.field-label-inline{font-size:12px;color:var(--muted);display:flex;align-items:baseline;gap:8px}
.select-wrap{position:relative}
.select-wrap::after{
  content:"⌄";position:absolute;right:12px;top:50%;transform:translateY(-58%);
  color:var(--muted);font-size:13px;pointer-events:none;
}
select{
  -webkit-appearance:none;appearance:none;
  background:#0B0D10;border:1px solid var(--line);border-radius:10px;
  padding:8px 32px 8px 12px;font-size:12.5px;color:var(--paper);cursor:pointer;
}
select:hover{border-color:var(--line-strong)}

.toggle-row{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;padding:8px 13px;
  transition:.16s;background:rgba(255,255,255,.015);
}
.toggle-dot{width:7px;height:7px;border-radius:50%;background:#2C3138;transition:.16s}
.toggle[aria-pressed="true"]{color:var(--lime);border-color:rgba(198,255,61,.45);background:rgba(198,255,61,.07)}
.toggle[aria-pressed="true"] .toggle-dot{background:var(--lime);box-shadow:0 0 9px var(--lime)}

/* presets */
.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.preset{
  position:relative;overflow:hidden;border-radius:13px;text-align:left;
  border:1px solid var(--line);background:var(--panel-2);
  transition:border-color .16s,transform .12s;
  padding:0;
}
.preset:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.preset:active{transform:translateY(0)}
.preset-preview{
  position:relative;height:42px;overflow:hidden;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.preset-preview span{
  position:absolute;left:100%;white-space:nowrap;font-weight:900;
  font-size:17px;letter-spacing:.02em;
  animation:presetRoll 7s linear infinite;
}
@keyframes presetRoll{from{transform:translateX(0)}to{transform:translateX(-280%)}}
.preset-meta{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:8px 10px}
.preset-name{font-size:12px;font-weight:700}
.preset-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--muted-2)}

/* saved */
.saved-list{display:flex;flex-direction:column;gap:7px}
.saved-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  background:rgba(255,255,255,.02);transition:.16s;
}
.saved-item:hover{border-color:rgba(198,255,61,.4);background:rgba(198,255,61,.05)}
.saved-item .saved-txt{
  font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#C6CBD2;
}
.saved-item .saved-star{color:var(--lime);font-size:11px}
.saved-empty{font-size:12px;color:var(--muted-2);padding:6px 0}

/* dock / cta */
.dock{display:flex;gap:9px;align-items:stretch;padding:24px 0 6px}
.play-btn{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;border-radius:14px;
  background:linear-gradient(180deg,#D6FF63,#B9F52A);
  color:#0A0C05;font-weight:900;font-size:16px;letter-spacing:.04em;
  box-shadow:0 10px 30px -12px rgba(198,255,61,.7),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s,box-shadow .16s,filter .16s;
}
.play-btn:hover{filter:brightness(1.05);box-shadow:0 14px 36px -12px rgba(198,255,61,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.play-btn:active{transform:translateY(2px) scale(.995)}
.play-glyph{font-size:13px}
.play-key{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;
  color:rgba(10,12,5,.55);border:1px solid rgba(10,12,5,.22);border-radius:4px;
  padding:2px 5px;
}
.dock-btn{
  min-height:56px;padding:0 15px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,#14181D,#0C0E11);
  color:var(--paper);font-size:13px;transition:.16s;
}
.dock-btn:hover{border-color:var(--line-strong);background:#171B21}
.dock-btn:active{transform:translateY(1px)}
.deck-foot{font-size:11px;color:var(--muted-2);margin:10px 0 0;text-align:center}

/* ========================== FULLSCREEN ===================== */
.screen{
  position:fixed;inset:0;z-index:100;background:#000;height:100dvh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  touch-action:manipulation;overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.screen[hidden]{display:none}
.screen-rot{position:absolute;inset:0}
/* 手动横竖屏：只有浏览器不支持原生锁定方向时才启用。
   整层一起旋转，用户把手机横过来后，画面与控制条会一起回正。 */
.screen.force-landscape .screen-rot,
.screen.force-portrait .screen-rot{
  inset:auto;top:50%;left:50%;
  width:100vh;height:100vw;
  width:100dvh;height:100dvw;
  transform:translate(-50%,-50%) rotate(90deg);
}
.screen .screen-stage{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;border-radius:0;box-shadow:none;cursor:default;
  animation:none;
}
.screen .lane{will-change:transform}
.screen-hint{
  position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  z-index:12;font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:6px 14px;backdrop-filter:blur(8px);white-space:nowrap;
  transition:opacity .5s ease;pointer-events:none;
}
.screen-hint.gone{opacity:0}
.kbd-only{display:none}
@media (hover:hover) and (pointer:fine){
  .kbd-only{display:inline}
}
.screen-lock-badge{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
  z-index:12;font-size:10.5px;letter-spacing:.08em;color:rgba(198,255,61,.82);
  background:rgba(0,0,0,.42);border:1px solid rgba(198,255,61,.24);border-radius:999px;
  padding:5px 11px;pointer-events:none;
}
.screen-lock{
  position:absolute;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);
  z-index:21;font-size:12px;letter-spacing:.02em;color:#ECEEE6;white-space:nowrap;
  background:rgba(10,11,13,.86);border:1px solid rgba(198,255,61,.3);border-radius:999px;
  padding:9px 18px;box-shadow:0 14px 40px -14px #000;pointer-events:none;
}
.screen-lock-badge[hidden],.screen-lock[hidden]{display:none}
.screen-bar{
  position:absolute;bottom:calc(18px + var(--safe-b));left:50%;
  transform:translateX(-50%);
  z-index:20;display:flex;align-items:center;gap:2px;
  padding:7px;border-radius:999px;
  background:rgba(10,11,13,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px -18px #000;
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
}
.screen-bar::-webkit-scrollbar{display:none}
.screen-bar.hidden{opacity:0;pointer-events:none;transform:translate(-50%,150%)}
.screen-bar button{
  display:inline-flex;align-items:center;gap:6px;
  height:42px;padding:0 13px;border-radius:999px;
  color:#DADEE4;font-size:12.5px;white-space:nowrap;transition:background .16s,color .16s;
}
.screen-bar button:hover{background:rgba(255,255,255,.09);color:#fff}
/* 转屏按钮只在触摸设备出现，桌面端不占位 */
.screen-bar button[data-act="orient"]{display:none}
@media (pointer:coarse){
  .screen-bar button[data-act="orient"]{display:inline-flex}
}
.bar-ico{font-size:11px;opacity:.8;line-height:1}
.screen-bar .bar-exit{color:#FF8AAE;background:rgba(255,61,127,.10)}
.screen-bar .bar-exit:hover{background:rgba(255,61,127,.18);color:#FFB3C8}

/* ============================ MODAL ======================== */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:22px;background:rgba(4,5,6,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.modal[hidden]{display:none}
.modal-card{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 44px);overflow:auto;
  border-radius:22px;border:1px solid var(--line-strong);
  background:linear-gradient(165deg,#121519,#0A0C0F 55%,#0B0D10);
  padding:30px 28px 26px;
  box-shadow:0 60px 120px -40px #000,inset 0 1px 0 rgba(255,255,255,.07);
  animation:modalIn .38s cubic-bezier(.16,.84,.28,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:50%;
  color:var(--muted);border:1px solid var(--line);font-size:13px;
}
.modal-close:hover{color:var(--paper);border-color:var(--line-strong)}
.modal-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--lime)}
.modal-card h2{margin:8px 0 18px;font-size:26px;font-weight:900;letter-spacing:-.01em}
.help-list{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:11px}
.help-list li{font-size:13.5px;color:#AFB6BF;line-height:1.6}
.help-list b{color:var(--paper);font-weight:700}
.help-note{margin-top:20px;padding:13px 15px;border-radius:12px;border:1px solid rgba(99,245,255,.2);background:rgba(99,245,255,.05)}
.help-note span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--cyan)}
.help-note p{margin:6px 0 0;font-size:12px;color:#9AA6B2;line-height:1.6}
.help-cta{
  width:100%;margin-top:22px;min-height:50px;border-radius:13px;
  background:var(--lime);color:#0A0C05;font-weight:900;font-size:14px;letter-spacing:.03em;
  transition:filter .16s,transform .12s;
}
.help-cta:hover{filter:brightness(1.06)}
.help-cta:active{transform:translateY(1px)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:calc(100px + var(--safe-b));z-index:300;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:rgba(18,21,25,.96);border:1px solid var(--line-strong);
  color:var(--paper);font-size:12.5px;padding:10px 18px;border-radius:999px;
  box-shadow:0 20px 40px -20px #000;
  transition:opacity .22s,transform .22s;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================ RESPONSIVE =================== */
@media (max-width:1180px){
  .workbench{grid-template-columns:minmax(0,1fr) 400px;gap:26px;padding:6px 22px 80px}
  .topbar{padding:16px 22px 12px}
}
@media (max-width:900px){
  .topbar{padding:12px 16px 10px}
  .badge{display:none}
  .brand-text strong{font-size:17px}
  .workbench{
    display:block;padding:0 16px 130px;
  }
  .stage-col{position:sticky;top:0;z-index:20;padding-top:8px;margin:0 -16px;background:var(--ink)}
  .stage-col::after{
    content:"";position:absolute;left:0;right:0;bottom:-16px;height:16px;
    background:linear-gradient(var(--ink),transparent);pointer-events:none;
  }
  .stage{
    height:clamp(200px,30dvh,320px);
    border-radius:0 0 18px 18px;
    border-left:0;border-right:0;border-top:0;
    box-shadow:0 24px 50px -26px #000;
  }
  .stage-foot{display:none}
  .panel{padding:22px 0 24px}
  .panel:first-child{padding-top:16px}
  .deck{padding-top:14px}
  .dock{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 16px calc(10px + var(--safe-b));
    background:linear-gradient(transparent,rgba(7,8,10,.94) 34%,var(--ink));
    margin:0;
  }
  .deck-foot{display:none}
  .screen-bar{bottom:calc(12px + var(--safe-b))}
  .screen-bar button{height:44px;padding:0 12px;font-size:12px}
}
@media (max-width:560px){
  body{font-size:14px}
  .brand-text em{display:none}
  .ghost-btn{padding:7px 11px;font-size:12px}
  .panel-head h2{font-size:17px}
  .mode-grid{gap:7px}
  .mode{padding:9px 9px 10px}
  .mode-name{font-size:12px}
  .mode-desc{font-size:9px}
  .preset-grid{gap:8px}
  .preset-preview{height:38px}
  .modal{padding:0;align-items:end}
  .modal-card{
    width:100%;border-radius:22px 22px 0 0;max-height:88dvh;
    padding:26px 20px calc(20px + var(--safe-b));
  }
  .modal-card h2{font-size:22px}
  .help-list li{font-size:12.8px}
  .screen-hint{font-size:10px;padding:5px 11px;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
  .screen-bar{gap:0;padding:6px}
  .screen-bar button{padding:0 8px;height:42px;font-size:11.5px}
  .screen-bar button .bar-ico{display:none}
  .toast{width:max-content;max-width:88vw;white-space:normal;text-align:center;border-radius:14px}
}
@media (max-width:380px){
  .mode-grid{grid-template-columns:repeat(2,1fr)}
  .preset-grid{grid-template-columns:1fr}
  .screen-bar button{padding:0 6px;font-size:11px}
}

/* landscape phones: give the stage more height when usable */
@media (max-height:520px) and (min-width:560px){
  .stage{height:76vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .preset-preview span{animation:none;transform:none}
}