/* Z-GRVS — base condivisa da MACHINE e SOUND SYSTEM: temi dark/white, barra, tasti, luci, manopole, schermi, dialoghi */
:root{
  --f:"DIN Alternate","DIN Condensed","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --c:#FF1F3D;
  --brand:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --zv:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,4 60.47,39.53 96,50 60.47,60.47 50,96 39.53,60.47 4,50 39.53,39.53'/%3E%3C/svg%3E");
  --zvf:url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 1080' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E %3Cg id='Sfondo' transform='matrix(1.400878,0,0,1.399284,20.957403,21.192259)'%3E %3Cpath d='M3.41,369.431C3.497,369.39 48.514,356.436 52.437,355.308C82.442,346.674 179.401,318.525 190.44,315.321C205.432,310.968 205.434,311.352 220.378,307.015C224.388,305.85 224.347,305.826 270.411,292.147C283.903,288.14 286.829,289.44 288.804,283.595C288.96,283.133 368.293,8.874 368.694,7.573C369.174,6.015 369.548,2.358 370.497,2.364C371.598,2.37 375.514,19.235 381.639,39.451C386.295,54.819 392.218,77.314 405.779,122.414C408.723,132.205 423.249,183.133 424.756,188.417C427,196.283 451.958,283.784 453.38,286.579C454.207,288.202 667.397,348.727 717.409,363.784C734.959,369.068 742.479,369.747 736.436,371.186C719.773,375.153 528.835,431.347 525.586,431.866C525.236,431.922 509.015,436.549 507.575,436.96C505.97,437.418 506.027,437.531 487.598,442.955C454.525,452.688 454.186,452.315 453.45,453.462C453.213,453.831 453.259,453.859 425.806,548.59C372.301,733.22 372.227,733.13 371.724,735.627C369.844,744.951 369.61,733.485 367.567,728.476C367.437,728.156 327.22,589.46 327.109,588.577C326.795,586.095 326.392,586.204 318.232,558.583C317.489,556.068 314.358,543.878 314.029,542.598C312.43,536.375 312.121,536.522 291.376,465.544C288.692,456.36 290.876,453.521 281.585,451.155C278.786,450.443 15.098,373.67 4.177,370.917L3.41,369.431ZM370.493,86.4C370.447,86.412 369.909,85.483 369.678,86.608C368.213,93.731 312.694,310.039 311.207,311.115C310.161,311.872 91.765,368.52 88.189,369.07C81.615,370.081 90.238,371.448 90.503,371.49C91.763,371.69 169.953,391.999 175.492,393.531C182.748,395.538 182.844,395.122 266.573,417.21C280.725,420.943 306.115,427.412 309.556,428.288C311.484,428.78 311.788,429.029 316.179,445.585C319.443,457.889 318.744,458.056 356.128,599.6C367.674,643.314 368.798,649.058 369.651,653.414C370.399,657.231 372.122,649.783 372.207,649.413C372.914,646.356 422.45,455.74 424.251,448.439C429.064,428.929 429.794,428.744 431.451,428.325C437.651,426.754 639.812,374.312 646.49,372.463C649.203,371.712 660.669,370.584 650.49,368.54C645.523,367.543 499.027,329.207 491.526,327.395C486.523,326.186 430.711,312.699 429.428,310.55C428.87,309.614 376.632,109.447 371.382,86.58L370.493,86.4ZM369.816,595.259C368.112,585.743 337.092,468.359 333.503,453.499C332.808,450.621 325.377,419.854 324.06,417.716C322.646,415.421 290.555,408.337 273.443,403.714C258.27,399.615 149.764,371.613 149.484,371.562C145.699,370.872 145.536,371.101 145.442,370.534C145.124,368.613 148.586,368.936 155.41,367.143C288.063,332.288 323.32,324.545 324.108,322.331C324.919,320.055 360.288,183.037 361.166,179.417C361.839,176.641 369.517,144.98 369.845,144.78C370.453,144.409 371.102,144.719 371.2,144.766C372.269,145.276 371.283,145.818 381.236,184.567C384.068,195.593 415.62,318.431 416.994,322.297C417.712,324.32 418.664,323.494 558.595,360.136C583.589,366.681 591.467,368.322 594.351,368.923C599.867,370.072 592.722,371.369 592.477,371.413C589.09,372.028 494.868,396.69 486.548,398.692C481.151,399.991 449.735,407.549 419.386,416.146C417.488,416.684 416.87,416.859 411.281,439.441C408.118,452.218 375.688,577.257 374.524,581.506C371.032,594.258 372.217,594.706 371.239,595.277C371.14,595.334 371.239,595.277 369.816,595.259Z' style='fill:currentColor;fill-opacity:1;'/%3E %3C/g%3E %3C/svg%3E");
  --page:#060607;--bar:#0d0d10;--barline:#222228;--btxt:#cfccc5;
  --hw:#151518;--hw-edge:#27272d;--hw-hi:rgba(255,255,255,.035);
  --key:#202025;--key-edge:#2f2f36;--key-lbl:#86837c;--key-on:#fff;--key-sh:0 2px 0 #09090b,0 3px 6px rgba(0,0,0,.35);
  --held-bg:#e9e7e1;--held-lbl:#0b0b0c;
  --pad-off:#1d1d22;--pad-edge:#2b2b31;--slot:#0b0b0d;--led-off:#2a2a30;
  --knob:radial-gradient(circle at 38% 32%,#4a4a52,#18181c 68%);--knob-edge:#34343b;
  --txt:#d6d3cc;--dim:#65625c;--scr:#040405;--scr-line:#1a1a20;--scr-dim:#6f6c66;
}
[data-theme=white]{
  --page:#d9d7d1;--bar:#f3f2ee;--barline:#d3d1ca;--btxt:#34322e;
  --hw:#edece7;--hw-edge:#d5d3cc;--hw-hi:rgba(255,255,255,.8);
  --key:#faf9f6;--key-edge:#dbd8d1;--key-lbl:#8f8b83;--key-on:#121212;--key-sh:0 2px 0 #cdcac2,0 4px 10px rgba(60,50,30,.08);
  --held-bg:#1b1b1d;--held-lbl:#f4f3ef;
  --pad-off:#f4f3ef;--pad-edge:#dfdcd5;--slot:#dedcd6;--led-off:#d0cdc6;
  --knob:radial-gradient(circle at 38% 30%,#fff,#dcd9d2 70%);--knob-edge:#cfccc4;
  --txt:#2b2a27;--dim:#9b978f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--page);color:var(--txt);font:12px/1.2 var(--f)}
body{-webkit-touch-callout:none;display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}

/* ---------- barra di sistema ---------- */
.bar{flex:0 0 46px;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--bar);border-bottom:1px solid var(--barline);color:var(--btxt);z-index:3}
.pwr{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 8px;border-radius:15px;border:1px solid var(--barline);font-weight:700;letter-spacing:.14em;font-size:11px}
.pwr i{width:13px;height:13px;border-radius:50%;background:var(--led-off);transition:box-shadow .3s}
.off .pwr{animation:pulse 1.6s ease-in-out infinite;border-color:#FF1F3D;color:#FF1F3D}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,31,61,.22)}}
html:not(.off) .pwr i{background:conic-gradient(#FF1F3D,#FF7A00,#FFE600,#39FF14,#00F0FF,#3D5AFE,#B026FF,#FF2BD6,#FF1F3D);box-shadow:0 0 10px rgba(255,255,255,.5)}
.booting .pwr i{animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.zv,.zvf{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--zv) center/contain no-repeat;mask:var(--zv) center/contain no-repeat}
.zvf{-webkit-mask-image:var(--zvf);mask-image:var(--zvf)}
.logo{display:flex;align-items:center;gap:.28em;font:700 16px/1 var(--brand);letter-spacing:-.022em;white-space:nowrap}
.seg{display:flex;border:1px solid var(--barline);border-radius:7px;overflow:hidden}
.seg button{padding:0 11px;height:28px;font-size:10px;letter-spacing:.08em;border-right:1px solid var(--barline);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button.on,.tb.on{background:var(--held-bg);color:var(--held-lbl)}
.tb{height:28px;min-width:30px;padding:0 9px;border:1px solid var(--barline);border-radius:7px;font-size:11px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.metro i{width:8px;height:8px;border-radius:50%;background:var(--led-off)}
.metro i.b{background:#39FF14;box-shadow:0 0 8px #39FF14}.metro i.acc{background:#FF1F3D;box-shadow:0 0 8px #FF1F3D}
.bpm{font:600 13px var(--mono);min-width:50px;text-align:right}
.grow{flex:1}
.bst{font:10px var(--mono);opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}
.mobile .logo b,.mobile .bst,.mobile #seqDock,.mobile #midiT,.mobile #playerT span{display:none}
.mobile .logo{font-size:20px}
.remote #ipadT,.mobile #ipadT{display:none}
#ipadT.on{background:#39FF14;color:#000;border-color:#39FF14}
.mobile .bar{gap:6px;padding:0 6px}.mobile .seg button{padding:0 8px}.mobile .bpm{display:none}
@media (max-width:400px){.metro span{display:none}}

/* ---------- tasti ---------- */
.k{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-width:0;padding:4px 8px;background:var(--key);border:1px solid var(--key-edge);border-radius:5px;box-shadow:var(--key-sh);color:var(--key-lbl);font:700 11px/1 var(--f);letter-spacing:.05em;text-transform:uppercase;text-align:left;transition:color .12s,background-color .12s,box-shadow .12s,transform .05s}
.k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.k small{font-weight:400;font-size:9px;letter-spacing:.02em;text-transform:none;opacity:.75;white-space:nowrap}
.k:active,.k.press{transform:translateY(1px);box-shadow:none;filter:brightness(1.18)}
.ic{width:1.25em;height:1.25em;fill:currentColor;flex:none;vertical-align:-.25em}
.k span:has(.ic),.row span:has(.ic){display:inline-flex;align-items:center;gap:.4em}
.tb .ic{width:16px;height:16px}
.k.on{color:var(--key-on);text-shadow:0 0 10px color-mix(in srgb,var(--key-on) 45%,transparent)}
.k.held{background:var(--held-bg);color:var(--held-lbl);text-shadow:none;border-color:var(--held-bg)}
.k.dim{opacity:.38;cursor:default}
.k.c{--kc:#FF1F3D;color:color-mix(in srgb,var(--kc) 80%,var(--key-lbl))}
.k.c.on{background:var(--kc);color:#000;border-color:var(--kc);text-shadow:none;box-shadow:0 0 18px color-mix(in srgb,var(--kc) 55%,transparent)}
.k.hot{--kc:#FF8A1F}.k.play{--kc:#39FF14}.k.rec{--kc:#FF2A2A}
.k.rec.arm{animation:blink .5s steps(1) infinite}@keyframes blink{50%{background:var(--kc);color:#000}}
.k.center{align-items:center;text-align:center}
.k.tr{align-items:center;justify-content:center;text-align:center;font-size:13px;letter-spacing:.12em}.k.tr span:has(.ic){gap:.55em}.k.tr .ic{width:22px;height:22px;vertical-align:0}.k.tr small{font-size:9.5px;letter-spacing:.06em}
.strans .k.tr .ic{width:26px;height:26px}
.gridhw .k.tr span:has(.ic),.station.portrait .k.tr span:has(.ic){flex-direction:column;gap:4px}
.k.confirm{--kc:#FF2A2A;background:#FF2A2A;color:#000;border-color:#FF2A2A;animation:blink .4s steps(1) infinite}
.g{align-items:center;justify-content:center;font-size:17px;letter-spacing:0;background:color-mix(in srgb,var(--gc) 24%,var(--key));border-color:color-mix(in srgb,var(--gc) 45%,var(--key-edge));color:color-mix(in srgb,var(--gc) 75%,var(--key-on))}
[data-theme=white] .g{background:color-mix(in srgb,var(--gc) 26%,#fff);color:color-mix(in srgb,var(--gc) 55%,#1a1a1a)}
.g.sel{background:var(--gc);color:#000;border-color:var(--gc);box-shadow:0 0 24px color-mix(in srgb,var(--gc) 65%,transparent),inset 0 0 14px rgba(255,255,255,.4)}
.g.muted{opacity:.3}

/* ---------- luci: pad, celle, step ---------- */
.lt{--p1:9%;--p2:4%;--bl:0px;--pc:#888;position:relative;border-radius:7px;border:1px solid var(--pad-edge);
  background:radial-gradient(130% 130% at 50% 58%,color-mix(in srgb,var(--pc) var(--p1),var(--pad-off)) 0%,color-mix(in srgb,var(--pc) var(--p2),var(--pad-off)) 72%);
  box-shadow:0 0 var(--bl) color-mix(in srgb,var(--pc) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.05);transition:box-shadow .45s ease-out}
.lt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s ease-out;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 55%,#fff 0%,var(--pc) 38%,transparent 82%)}
[data-theme=white] .lt::after{mix-blend-mode:normal;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--pc) 80%,#fff) 0%,color-mix(in srgb,var(--pc) 60%,transparent) 42%,transparent 85%)}
.lt.hit{box-shadow:0 0 34px color-mix(in srgb,var(--pc) 80%,transparent);transition:none}
.lt.hit::after{opacity:1;transition:none}
.lt.l0{--p1:0%;--p2:0%}.lt.l1{--p1:20%;--p2:9%}.lt.l2{--p1:48%;--p2:24%;--bl:6px}.lt.l3{--p1:80%;--p2:46%;--bl:14px}.lt.l4{--p1:100%;--p2:74%;--bl:24px}
.lt.ph{--pc:#fff;--p1:85%;--p2:55%;--bl:12px}
@keyframes boot{0%{background:var(--pad-off)}9%{background:#FF1F3D;box-shadow:0 0 26px #FF1F3D}20%{background:#FF7A00;box-shadow:0 0 26px #FF7A00}31%{background:#FFE600;box-shadow:0 0 26px #FFE600}
  42%{background:#39FF14;box-shadow:0 0 26px #39FF14}53%{background:#00F0FF;box-shadow:0 0 26px #00F0FF}64%{background:#3D5AFE;box-shadow:0 0 26px #3D5AFE}
  75%{background:#B026FF;box-shadow:0 0 26px #B026FF}86%{background:#FF2BD6;box-shadow:0 0 26px #FF2BD6}100%{background:var(--pad-off);box-shadow:none}}
.booting .lt,.booting .g,.booting .leds::after{animation:boot 1.9s linear both;animation-delay:calc(var(--d,0) * 55ms)}
@keyframes lbl{40%{color:#fff;text-shadow:0 0 12px #fff}}
[data-theme=white] .booting .k:not(.g){animation-name:lblw}@keyframes lblw{40%{color:#000;text-shadow:0 0 12px var(--c)}}
.booting .k:not(.g){animation:lbl 1.3s ease both;animation-delay:calc(var(--d,0) * 45ms)}
.off .lt,.off .g{background:var(--pad-off)!important;box-shadow:none!important;border-color:var(--pad-edge)!important;color:var(--dim)!important}
.off .lt::after{opacity:0!important}.off .leds::after,.off .leds::before{opacity:0}
.off .k{color:var(--dim)!important;background:var(--key)!important;border-color:var(--key-edge)!important;text-shadow:none!important;box-shadow:var(--key-sh)!important;animation:none!important}
.off .dial::before{opacity:0}

/* ---------- manopole, strisce, led ---------- */
.knob{touch-action:none;cursor:ns-resize;display:flex;flex-direction:column;align-items:center;gap:5px;font:700 9px var(--f);letter-spacing:.06em;color:var(--key-lbl);min-width:0}
.knob b{font:500 10px var(--mono);color:var(--txt);white-space:nowrap}
.dial{--r:28px;width:56px;height:56px;border-radius:50%;background:var(--knob);border:1px solid var(--knob-edge);box-shadow:0 4px 12px rgba(0,0,0,.3);position:relative;touch-action:none;cursor:ns-resize;flex:none}
.dial::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 225deg,var(--c) 0 calc(var(--n,0) * 270deg),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%);mask:radial-gradient(circle,transparent 63%,#000 65%);filter:drop-shadow(0 0 3px var(--c))}
.dial::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:30%;margin-left:-1.5px;border-radius:2px;background:var(--txt);transform-origin:50% calc(var(--r) - 6px);transform:rotate(calc(-135deg + var(--n,0) * 270deg))}
.dial.off{opacity:.25;cursor:default}.dial.off::before{opacity:0}
.hstrip{position:relative;background:var(--slot);border:1px solid var(--key-edge);border-radius:6px;touch-action:none;cursor:ew-resize;overflow:hidden}
.hstrip::before{content:"";position:absolute;left:8px;right:8px;top:5px;height:3px;background:repeating-linear-gradient(90deg,var(--led-off) 0 4px,transparent 4px 10px)}
.hstrip i{position:absolute;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--c);left:calc(var(--x,50%) - 2.5px);box-shadow:0 0 12px var(--c)}
.leds{position:relative;display:block;width:6px;background:var(--led-off);-webkit-mask:repeating-linear-gradient(to top,#000 0 9px,transparent 9px 14px);mask:repeating-linear-gradient(to top,#000 0 9px,transparent 9px 14px)}
.leds::after{content:"";position:absolute;inset:0;background:var(--lc,#39FF14);clip-path:inset(calc((1 - var(--lv,0)) * 100%) 0 0 0)}
.leds::before{content:"";position:absolute;left:0;right:0;height:5px;bottom:calc(var(--val,-1) * 100% - 2px);background:var(--key-on);z-index:1}

/* ---------- schermi (sempre neri, come l'hardware) ---------- */
.scr{background:var(--scr);border:1px solid #2a2a31;border-radius:8px;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;box-shadow:inset 0 0 0 4px #000;color:#d9d6cf;font:11px/1.35 var(--mono);position:relative}
.pane{padding:10px 12px;overflow:auto;border-right:1px solid var(--scr-line);position:relative;min-height:0;scrollbar-width:none}
.pane::-webkit-scrollbar{display:none}
.pane:last-child{border-right:0;padding:0;overflow:hidden}
.pane canvas{width:100%;height:100%;display:block}
.pane h3{margin:0 0 8px;font:700 10px var(--f);letter-spacing:.16em;color:var(--c);display:flex;justify-content:space-between;gap:8px}
.pane h3 span:last-child{color:var(--scr-dim)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px}.kv span:nth-child(odd){color:var(--scr-dim)}
.icg{display:grid;gap:3px;font-size:10px}
.sc{background:#101014;border:1px solid #202027;padding:4px 2px;text-align:center;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden}
.sc.on{border-color:var(--gc);color:var(--gc)}.sc.cur{outline:1px solid #fff}
.row{display:flex;justify-content:space-between;gap:8px;padding:5px 4px;border-bottom:1px solid rgba(128,128,128,.14);cursor:pointer}
.row:hover{background:rgba(128,128,128,.08)}
.mix{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height:calc(100% - 22px)}
.ch{display:grid;grid-template-rows:auto 1fr auto auto;gap:4px;text-align:center;min-height:0}
.ch .nm{color:var(--gc);font:700 12px var(--f)}
.ch .mt{position:relative;background:#101014;border-radius:2px;cursor:ns-resize}
.ch .mt i{position:absolute;pointer-events:none}
.ch .lvl{left:28%;right:28%;bottom:0;top:0;background:linear-gradient(to top,var(--gc),color-mix(in srgb,var(--gc) 50%,#fff));clip-path:inset(calc((1 - var(--lv,0)) * 100%) 0 0 0)}
.ch .fd{left:6%;right:6%;height:2px;background:#fff;box-shadow:0 0 5px #fff}
.ch .db{font-size:10px;color:var(--scr-dim)}
.ch .ms{display:flex;gap:2px;justify-content:center}.ch .ms b{font-weight:400;font-size:9px;padding:1px 3px;border:1px solid #2a2a30;cursor:pointer}.ch .ms b.on{background:var(--gc);color:#000}
.bootscr{height:100%;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center}
.bootscr .zvf{width:96px;height:96px;color:#EDEEEA}
.bootscr u{display:block;height:3px;width:240px;border-radius:2px;background:linear-gradient(90deg,#FF1F3D,#FFE600,#00F0FF,#B026FF,#FF2BD6) 0/calc(var(--p,0) * 100%) 100% no-repeat,#1a1a20}
.off .scr .pane{visibility:hidden}
.off .scr::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;background:#24242a;-webkit-mask:var(--zvf) center/contain no-repeat;mask:var(--zvf) center/contain no-repeat}

/* ---------- display a sette segmenti ---------- */
.seg7{position:relative;z-index:0;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;min-height:0;background:#040405;border:1px solid #2a2a31;border-radius:6px;box-shadow:inset 0 0 0 3px #000;
  font:600 30px/1 var(--mono);color:var(--c);text-shadow:0 0 14px color-mix(in srgb,var(--c) 65%,transparent);white-space:pre;font-variant-numeric:tabular-nums;overflow:hidden}
.seg7::before{content:attr(data-ghost);position:absolute;z-index:-1;right:12px;top:50%;transform:translateY(-50%);color:#16161a;text-shadow:none}
.seg7::after{content:attr(data-title);position:absolute;left:8px;top:6px;font:700 8px var(--f);letter-spacing:.14em;color:#57544e;text-shadow:none}

/* ---------- dialoghi e toast ---------- */
dialog#modal{background:#111114;color:#d9d6cf;border:1px solid #34343b;border-radius:12px;width:min(620px,94vw);max-height:88dvh;overflow:auto;padding:18px;font:12px/1.4 var(--mono)}
[data-theme=white] dialog#modal{background:#f8f7f3;color:#2a2926;border-color:#d6d3cb}
dialog#modal::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
dialog h2{margin:0 0 12px;font:700 12px var(--f);letter-spacing:.18em;color:var(--c)}
dialog label{display:block;margin:8px 0 4px;color:var(--dim)}
dialog p{margin:8px 0}
dialog .btn{background:var(--key);border:1px solid var(--key-edge);color:var(--txt);border-radius:6px;min-height:34px;padding:6px 8px;font:700 10px var(--f);letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
dialog .btn.on{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
dialog .btn.hot{background:#FF8A1F;color:#000;border-color:#FF8A1F}
dialog .btn.rec.on{background:#FF2A2A;color:#fff;border-color:#FF2A2A}
dialog select,dialog input[type=text]{width:100%;background:var(--key);color:var(--txt);border:1px solid var(--key-edge);border-radius:6px;padding:7px;font:inherit}
.ipqr{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center;margin-top:14px}
.ipqr img{width:190px;height:190px;image-rendering:pixelated;background:#fff;padding:10px;border-radius:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.drop{border:1px dashed var(--key-lbl);border-radius:8px;padding:20px;text-align:center;color:var(--dim);margin:10px 0}.drop.over{border-color:var(--c);color:var(--txt)}
#toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--bar);color:var(--btxt);border:1px solid var(--c);padding:9px 16px;border-radius:8px;font:12px var(--mono);opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;z-index:10}
#toast.show{opacity:1}