.career{min-height:215px;padding:0 0 18px;overflow:hidden}.career img{display:block;width:100%;height:135px;object-fit:cover;object-position:center 28%;margin-bottom:12px;filter:saturate(.88)}.career b{font-size:13px;margin:0 8px 7px}.actions{flex-wrap:wrap;justify-content:center;gap:12px}.qrbox{position:relative;background:#fff;padding:9px}.result .qrbox #qr{display:block;padding:0}.qrbox i{position:absolute;left:9px;right:9px;height:2px;top:9px;background:#4cf1ff;box-shadow:0 0 9px #16bfea;animation:qrscan 2.4s linear infinite}.result small{display:block;color:#4f829f;word-break:break-all;font-size:10px}@keyframes qrscan{to{top:calc(100% - 9px)}}

:root{--cyan:#50f6ff;--ice:#eaffff;--violet:#7b61ff;--gold:#f4eac3;--panel:rgba(7,18,31,.78)}
body{background:#02050a}
#app{width:100%;max-width:none;background:
radial-gradient(circle at 72% 8%,rgba(0,217,255,.24),transparent 26%),
radial-gradient(circle at 18% 84%,rgba(81,255,196,.10),transparent 30%),
linear-gradient(145deg,#03070d 0%,#06101b 42%,#010409 100%)}
#app:after{content:"";position:absolute;z-index:1;inset:16px;border:1px solid rgba(80,246,255,.16);clip-path:polygon(7% 0,100% 0,100% 88%,94% 100%,0 100%,0 10%);pointer-events:none;box-shadow:inset 0 0 80px rgba(80,246,255,.08)}
header{height:74px;padding:22px 4vw;color:#d8fbff;text-shadow:0 0 12px rgba(80,246,255,.55)}
h1{font-size:clamp(60px,10vw,126px);letter-spacing:.28em;text-shadow:0 0 18px #50f6ff,0 0 54px #155eff}
h2{text-shadow:0 0 18px rgba(80,246,255,.45)}
.eyebrow{color:var(--gold);text-shadow:0 0 14px rgba(244,234,195,.45)}
.primary,button,a.primary{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);background:linear-gradient(90deg,rgba(13,75,106,.9),rgba(10,19,38,.95));border-color:rgba(80,246,255,.85);box-shadow:0 0 28px rgba(80,246,255,.25),inset 0 0 18px rgba(80,246,255,.14)}
.portal{filter:drop-shadow(0 0 28px rgba(80,246,255,.35))}
.orb{background:radial-gradient(circle at 48% 42%,#fff 0,#a9ffff 7%,#50f6ff 18%,#3155ff 42%,rgba(6,15,45,.2) 70%);box-shadow:0 0 42px #50f6ff,0 0 130px #245cff}
.orbit{border-color:rgba(244,234,195,.6)}
.mirror-console{width:min(880px,94vw);padding:28px 34px 34px;position:relative;background:linear-gradient(155deg,rgba(44,54,60,.65),rgba(5,12,20,.88));border:1px solid rgba(210,248,255,.25);clip-path:polygon(5% 0,95% 0,100% 12%,100% 86%,94% 100%,6% 100%,0 86%,0 14%);box-shadow:0 0 44px rgba(0,211,255,.16),inset 0 0 40px rgba(255,255,255,.04)}
.mirror-console:before,.mirror-console:after{content:"";position:absolute;height:16px;width:34%;background:repeating-linear-gradient(135deg,rgba(244,234,195,.9) 0 12px,transparent 12px 22px);opacity:.9}
.mirror-console:before{left:10%;top:112px}.mirror-console:after{right:10%;bottom:20px}
.console-top{display:flex;justify-content:center;gap:18px;margin-bottom:14px}
.console-top span{width:12px;height:12px;border:1px solid rgba(190,230,255,.7);border-radius:50%;background:#182737;box-shadow:0 0 8px rgba(80,246,255,.4)}
.console-top .active-dot{background:#78f7ff;box-shadow:0 0 18px #78f7ff}
#name{width:min(620px,88%);height:58px;margin-bottom:22px;border-color:#8ed9ff;background:linear-gradient(90deg,rgba(122,156,168,.35),rgba(41,72,91,.55));font-weight:800;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4);caret-color:transparent;clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.virtual-keyboard{position:relative;z-index:1;margin:auto;width:min(720px,100%);padding:20px;background:rgba(2,8,13,.62);border:1px solid rgba(210,248,255,.25);clip-path:polygon(7% 0,93% 0,100% 18%,100% 82%,93% 100%,7% 100%,0 82%,0 18%)}
.key-row{display:flex;justify-content:center;gap:8px;margin:8px 0}
.key{min-width:54px;height:48px;margin:0;padding:0;border:1px solid rgba(215,251,255,.7);background:linear-gradient(180deg,rgba(35,49,56,.94),rgba(11,18,25,.98));color:#fff;font-weight:900;font-size:20px;letter-spacing:.04em;text-shadow:0 0 8px rgba(255,255,255,.45);box-shadow:inset 0 0 12px rgba(80,246,255,.10),0 0 10px rgba(80,246,255,.10);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.key:active,.key.selected{background:linear-gradient(180deg,rgba(80,246,255,.35),rgba(18,49,67,.95));box-shadow:0 0 18px rgba(80,246,255,.55),inset 0 0 16px rgba(80,246,255,.25)}
.key.wide{min-width:76px;font-size:17px;color:#f7f2cf}
.career-grid{grid-template-columns:repeat(4,minmax(145px,1fr));width:min(1040px,100%);gap:13px;max-height:58vh;overflow:auto;padding:4px 10px 8px;scrollbar-width:thin}
.career{min-height:205px;background:linear-gradient(180deg,rgba(10,28,43,.86),rgba(3,9,16,.92));border-color:rgba(80,246,255,.22);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:inset 0 0 22px rgba(80,246,255,.05)}
.career img{height:126px;filter:saturate(1.08) contrast(1.04)}
.career b{color:#f4eac3;letter-spacing:.12em}
.career.selected{transform:translateY(-2px);border-color:#50f6ff;box-shadow:0 0 26px rgba(80,246,255,.38),inset 0 0 28px rgba(80,246,255,.12)}
.idcard,.dna{background:linear-gradient(135deg,rgba(8,27,42,.95),rgba(7,8,16,.96));box-shadow:0 0 44px rgba(80,246,255,.14),inset 0 0 30px rgba(80,246,255,.06)}
.camera{border-radius:18px;clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%);box-shadow:0 0 36px rgba(80,246,255,.38)}
.reticle{border-radius:18px}
.result>img{border:1px solid rgba(80,246,255,.55);box-shadow:0 0 42px rgba(80,246,255,.28)}
#configApi{margin:0 18px 0 0;padding:8px 12px;font-size:11px;letter-spacing:.12em}
@media(max-width:900px){.career-grid{grid-template-columns:repeat(3,minmax(130px,1fr));max-height:56vh}.key{min-width:44px}.virtual-keyboard{padding:14px}.mirror-console{padding-left:20px;padding-right:20px}}
@media(max-width:650px){.career-grid{grid-template-columns:repeat(2,1fr)}.key{min-width:32px;height:42px;font-size:16px}.key.wide{min-width:58px;font-size:13px}.key-row{gap:5px}.mirror-console:before,.mirror-console:after{display:none}}

/* Exhibition-tablet layout: every step is one fixed sci-fi panel, no page scrolling. */
html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden;touch-action:manipulation}
#app{height:100dvh;min-height:100dvh}
.screen{height:calc(100dvh - 64px);min-height:0;padding:clamp(12px,2.2vh,28px) clamp(18px,4vw,56px);overflow:hidden;gap:clamp(8px,1.6vh,18px)}
header{height:64px;padding:12px clamp(18px,3vw,42px);align-items:center;display:grid;grid-template-columns:58px 1fr auto;gap:14px;background:linear-gradient(90deg,rgba(1,8,15,.65),rgba(7,28,42,.35),rgba(1,8,15,.65));border-bottom:1px solid rgba(80,246,255,.16)}
header span{text-align:left;font-weight:800}
.back-btn{width:46px;height:42px;margin:0;padding:0;font-size:42px;line-height:36px;border:1px solid rgba(232,252,255,.72);color:#fff;background:linear-gradient(135deg,rgba(238,244,225,.22),rgba(4,13,18,.86));clip-path:polygon(28% 0,100% 0,100% 72%,78% 100%,0 100%,0 28%);text-shadow:0 0 9px #fff;box-shadow:0 0 16px rgba(80,246,255,.35),inset 0 0 12px rgba(255,255,255,.08)}
.back-btn.hidden{visibility:hidden;pointer-events:none}
h1{font-size:clamp(54px,8.4vmin,118px);margin:clamp(6px,1vh,12px) 0}
h2{font-size:clamp(22px,4.2vmin,48px);margin:0 0 clamp(8px,1.3vh,16px)}
.eyebrow{margin:0;font-size:clamp(10px,1.4vmin,13px)}
.sub{margin:0;font-size:clamp(12px,1.8vmin,17px)}
.primary,button,a.primary{margin-top:clamp(8px,1.4vh,18px);padding:clamp(10px,1.8vmin,15px) clamp(22px,4vmin,38px);font-size:clamp(13px,1.8vmin,16px)}
.portal{width:min(34vmin,330px)}
.portal.small{width:min(24vmin,220px)}
.choice{gap:clamp(16px,3vmin,34px)}
.choice button{width:clamp(110px,18vmin,158px);height:clamp(110px,18vmin,158px)}
.age{margin:clamp(14px,3vh,34px);width:min(520px,82vw)}
.dna{width:min(560px,84vw);padding:clamp(26px,5vh,56px) 20px}
.idcard{width:min(670px,90vw);padding:clamp(26px,5vmin,45px)}
.camera{width:min(46vmin,460px)}
.result{height:calc(100% - 84px);gap:clamp(18px,3vw,42px)}
.result>img{max-height:100%;max-width:min(44vw,48vh)}
.result>div{max-width:min(280px,32vw)}
.result #qr{width:min(210px,22vmin)}

/* Keyboard page: closer to the reference photo, but still responsive and touch-friendly. */
.screen[data-step="2"]{padding:10px clamp(18px,4vw,56px)}
.mirror-console{width:min(1080px,96vw);height:min(82vh,720px);max-height:calc(100dvh - 86px);padding:clamp(16px,2.8vh,30px) clamp(24px,4vw,54px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4vh,14px);background:
linear-gradient(115deg,transparent 0 4%,rgba(255,255,255,.05) 4.2% 4.6%,transparent 4.8%),
radial-gradient(circle at 78% 8%,rgba(80,246,255,.26),transparent 25%),
linear-gradient(160deg,rgba(82,94,96,.86),rgba(18,32,39,.96) 48%,rgba(7,13,18,.98));border:1px solid rgba(219,247,255,.5);clip-path:polygon(12% 0,91% 0,100% 12%,100% 83%,88% 100%,9% 100%,0 86%,0 18%);transform:perspective(1200px) rotateX(1.5deg);box-shadow:0 26px 80px rgba(0,0,0,.34),0 0 50px rgba(80,246,255,.24),inset 0 0 70px rgba(255,255,255,.055)}
.mirror-console h2{font-size:clamp(18px,3.1vmin,34px);margin:0;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.62)}
.console-label{font-weight:900;letter-spacing:.32em;color:#fff8d8;font-size:clamp(10px,1.55vmin,16px);text-shadow:0 0 12px rgba(255,250,210,.9),0 0 24px rgba(80,246,255,.35)}
.console-top{margin:0;order:0}
#name{width:min(720px,72vw);height:clamp(44px,6.8vmin,66px);margin:0;font-size:clamp(19px,3.3vmin,34px);border-width:2px;background:linear-gradient(90deg,rgba(111,142,151,.48),rgba(45,71,85,.66));box-shadow:0 0 18px rgba(80,246,255,.28),inset 0 0 18px rgba(80,246,255,.16)}
.virtual-keyboard{width:min(850px,88vw);padding:clamp(14px,2vmin,24px) clamp(16px,2.2vmin,28px);background:
linear-gradient(90deg,transparent 0 8%,rgba(244,234,195,.88) 8.5% 12%,transparent 12.5% 88%,rgba(244,234,195,.88) 88.5% 92%,transparent 92.5%),
linear-gradient(180deg,rgba(12,24,30,.95),rgba(6,10,15,.96));border:2px solid rgba(232,244,235,.72);clip-path:polygon(8% 0,92% 0,100% 16%,100% 84%,92% 100%,8% 100%,0 84%,0 16%);box-shadow:0 0 26px rgba(80,246,255,.24),inset 0 0 30px rgba(255,255,255,.05)}
.virtual-keyboard:before,.virtual-keyboard:after{content:"";display:block;height:12px;margin:0 auto 8px;width:68%;background:repeating-linear-gradient(135deg,#f4eac3 0 12px,transparent 12px 22px);opacity:.95;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}
.virtual-keyboard:after{margin:8px auto 0;transform:rotate(180deg)}
.key-row{gap:clamp(5px,.9vmin,10px);margin:clamp(5px,.85vmin,9px) 0}
.key{min-width:clamp(35px,6.3vmin,58px);height:clamp(35px,5.7vmin,52px);font-size:clamp(15px,2.8vmin,24px);border-width:2px;border-color:rgba(235,250,251,.82);background:linear-gradient(180deg,rgba(40,51,56,.97),rgba(9,16,21,.98));box-shadow:0 0 9px rgba(255,255,255,.16),inset 0 0 14px rgba(80,246,255,.08)}
.key.wide{min-width:clamp(54px,9vmin,92px);font-size:clamp(12px,2vmin,18px)}
.key[data-key="确定"]{height:clamp(76px,12.4vmin,112px);align-self:stretch;color:#fff;background:linear-gradient(180deg,rgba(34,72,86,.92),rgba(8,18,28,.98));text-shadow:0 0 16px #50f6ff;box-shadow:0 0 22px rgba(80,246,255,.35),inset 0 0 18px rgba(80,246,255,.16)}

/* 12 career options must fit without scrolling. */
.screen[data-step="5"]{gap:clamp(5px,1vh,10px)}
.career-grid{overflow:hidden;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);width:min(1100px,94vw);height:min(58vh,520px);max-height:none;padding:0;gap:clamp(7px,1.1vmin,12px)}
.career{min-height:0;height:100%;font-size:clamp(10px,1.45vmin,14px);padding:0 0 clamp(6px,1vmin,10px)}
.career img{height:calc(100% - 54px);min-height:62px;margin-bottom:clamp(4px,.8vmin,8px)}
.career b{font-size:clamp(9px,1.25vmin,12px);margin-bottom:3px}

@media (orientation: portrait){
  header{height:60px}
  .screen{height:calc(100dvh - 60px);padding:clamp(10px,1.7vh,22px) clamp(16px,3.2vw,40px)}
  .mirror-console{height:min(86vh,900px);width:min(92vw,820px);transform:none}
  .virtual-keyboard{width:min(82vw,720px)}
  #name{width:min(76vw,660px)}
  .career-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:min(60vh,680px);width:min(92vw,760px)}
  .career img{height:calc(100% - 50px)}
  .result{flex-direction:column;height:auto}
  .result>img{max-height:52vh;max-width:72vw}
  .result>div{max-width:76vw}
}

@media (orientation: landscape) and (max-height:760px){
  header{height:54px;padding-top:8px;padding-bottom:8px}
  .screen{height:calc(100dvh - 54px);padding-top:8px;padding-bottom:8px}
  .mirror-console{height:min(82vh,610px);gap:6px;padding-top:14px;padding-bottom:14px}
  .mirror-console h2{font-size:clamp(17px,2.4vmin,28px)}
  .console-label{font-size:clamp(9px,1.2vmin,14px)}
  .key{height:clamp(32px,5.2vmin,46px);min-width:clamp(34px,5.4vmin,52px)}
  .key[data-key="确定"]{height:clamp(68px,10.8vmin,96px)}
  .virtual-keyboard{padding-top:12px;padding-bottom:12px}
  .virtual-keyboard:before,.virtual-keyboard:after{height:9px;margin-bottom:5px}
  .career-grid{height:min(58vh,430px)}
  .career img{height:calc(100% - 46px)}
}

/* Clean symmetric keyboard console + professional back button overrides. */
header{grid-template-columns:56px 1fr auto}
.back-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:1.5px solid rgba(205,246,255,.82);
  border-radius:10px;
  clip-path:none;
  background:linear-gradient(145deg,rgba(20,45,58,.92),rgba(5,13,21,.96));
  color:transparent;
  box-shadow:0 0 18px rgba(80,246,255,.28),inset 0 0 16px rgba(80,246,255,.10);
  position:relative;
}
.back-btn::before{
  content:"";
  width:15px;
  height:15px;
  border-left:3.2px solid #f4fbff;
  border-bottom:3.2px solid #f4fbff;
  transform:rotate(45deg) translate(2px,-1px);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.75));
}
.back-btn::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(80,246,255,.22);
  border-radius:7px;
  pointer-events:none;
}
.back-btn:active{transform:scale(.96);box-shadow:0 0 24px rgba(80,246,255,.45),inset 0 0 18px rgba(80,246,255,.18)}

.screen[data-step="2"]{justify-content:center;gap:clamp(8px,1.2vh,14px)}
.screen[data-step="2"]>.primary{margin-top:0}
.mirror-console{
  width:min(1010px,94vw);
  height:min(80vh,690px);
  max-height:calc(100dvh - 96px);
  padding:clamp(18px,3vh,34px) clamp(28px,4vw,56px);
  gap:clamp(8px,1.35vh,14px);
  justify-content:center;
  transform:none;
  border:1px solid rgba(150,226,241,.48);
  border-radius:0;
  clip-path:polygon(8% 0,92% 0,100% 12%,100% 88%,92% 100%,8% 100%,0 88%,0 12%);
  background:
    linear-gradient(90deg,rgba(80,246,255,.08),transparent 22%,transparent 78%,rgba(80,246,255,.08)),
    radial-gradient(circle at 50% 0%,rgba(80,246,255,.16),transparent 30%),
    linear-gradient(180deg,rgba(47,61,67,.88),rgba(11,22,30,.96) 48%,rgba(4,10,16,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.32),0 0 42px rgba(80,246,255,.18),inset 0 0 42px rgba(255,255,255,.045);
}
.mirror-console::before,
.mirror-console::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(650px,64%);
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(244,234,195,.8),rgba(80,246,255,.85),rgba(244,234,195,.8),transparent);
  opacity:.85;
}
.mirror-console::before{top:clamp(90px,13vh,118px)}
.mirror-console::after{bottom:clamp(38px,6vh,58px)}
.mirror-console .eyebrow{letter-spacing:.55em;color:#d8faff}
.mirror-console h2{letter-spacing:.16em;font-size:clamp(20px,3.1vmin,34px)}
.console-top{gap:14px}
.console-top span{width:10px;height:10px}
.console-label{
  letter-spacing:.28em;
  color:#f4eac3;
  font-size:clamp(10px,1.45vmin,15px);
  text-shadow:0 0 12px rgba(244,234,195,.65);
}
#name{
  width:min(680px,72vw);
  height:clamp(42px,6.2vmin,60px);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  border:1.5px solid rgba(134,214,244,.95);
  background:linear-gradient(90deg,rgba(46,72,84,.72),rgba(74,103,113,.42),rgba(46,72,84,.72));
  box-shadow:0 0 16px rgba(80,246,255,.28),inset 0 0 16px rgba(80,246,255,.12);
}
.virtual-keyboard{
  width:min(760px,82vw);
  padding:clamp(16px,2.3vmin,24px);
  border:1.5px solid rgba(217,244,242,.72);
  clip-path:polygon(7% 0,93% 0,100% 14%,100% 86%,93% 100%,7% 100%,0 86%,0 14%);
  background:linear-gradient(180deg,rgba(20,34,41,.96),rgba(5,10,16,.98));
  box-shadow:0 0 24px rgba(80,246,255,.20),inset 0 0 26px rgba(255,255,255,.04);
}
.virtual-keyboard::before,
.virtual-keyboard::after{
  width:56%;
  height:8px;
  background:repeating-linear-gradient(135deg,rgba(244,234,195,.82) 0 10px,transparent 10px 18px);
  opacity:.8;
}
.key-row{gap:clamp(6px,.9vmin,10px);margin:clamp(5px,.8vmin,8px) 0}
.key{
  min-width:clamp(34px,5.6vmin,54px);
  height:clamp(34px,5.1vmin,48px);
  border:1.5px solid rgba(229,247,249,.82);
  border-radius:7px;
  clip-path:none;
  background:linear-gradient(180deg,rgba(38,50,56,.98),rgba(9,15,21,.98));
  box-shadow:0 0 8px rgba(80,246,255,.15),inset 0 0 10px rgba(255,255,255,.05);
}
.key.wide{min-width:clamp(54px,8.4vmin,86px)}
.key[data-key="确定"]{
  height:clamp(70px,11vmin,102px);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(31,74,88,.98),rgba(7,18,27,.98));
}

@media (orientation: portrait){
  .mirror-console{width:min(90vw,760px);height:min(82vh,900px);padding:clamp(18px,2.5vh,34px) clamp(22px,4vw,42px)}
  .mirror-console::before{top:clamp(110px,12vh,150px)}
  .mirror-console::after{bottom:clamp(42px,5.8vh,68px)}
  #name{width:min(74vw,620px)}
  .virtual-keyboard{width:min(80vw,680px)}
}

@media (orientation: landscape) and (max-height:760px){
  .mirror-console{height:min(80vh,590px);width:min(980px,92vw);gap:5px;padding-top:12px;padding-bottom:12px}
  .mirror-console::before{top:86px}
  .mirror-console::after{bottom:34px}
  .virtual-keyboard{width:min(720px,76vw);padding:12px 18px}
  .virtual-keyboard::before,.virtual-keyboard::after{height:7px}
  .key{height:clamp(31px,4.8vmin,44px);min-width:clamp(32px,5.1vmin,50px)}
  .key[data-key="确定"]{height:clamp(66px,10.2vmin,92px)}
}

/* User-friendly polish: clearer touch targets, centered back icon, balanced result page. */
button,a.primary{min-height:44px}
.primary,button,a.primary{
  border-radius:10px;
  clip-path:none;
  letter-spacing:.14em;
}
.back-btn{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.back-btn::before{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  margin-left:2px;
  border-left:3px solid #f4fbff;
  border-bottom:3px solid #f4fbff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.back-btn::after{
  inset:6px;
  border-radius:8px;
}

.screen[data-step="10"]{
  justify-content:flex-start;
  gap:clamp(6px,1vh,12px);
  padding-bottom:max(22px,env(safe-area-inset-bottom));
}
.screen[data-step="10"] h2{
  margin:0;
  font-size:clamp(28px,4.2vmin,46px);
}
.result{
  width:min(860px,86vw);
  height:auto;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  gap:12px;
  margin:0 auto;
  flex:1;
  min-height:0;
}
.result>div{max-width:none}
.poster-card,
.download-card{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(80,246,255,.36);
  background:linear-gradient(180deg,rgba(13,31,43,.86),rgba(4,11,18,.94));
  box-shadow:0 0 30px rgba(80,246,255,.14),inset 0 0 22px rgba(255,255,255,.035);
  border-radius:18px;
  padding:clamp(12px,1.8vmin,18px);
}
.poster-card{
  display:grid;
  place-items:center;
  height:100%;
  padding:10px;
}
.poster-card::before,
.download-card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:12px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,246,255,.6),transparent);
}
.poster-card #poster,
.result>img#poster{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(80,246,255,.45);
  box-shadow:0 0 24px rgba(80,246,255,.22);
}
.download-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:auto;
  min-height:0;
  gap:6px;
  padding:10px 14px;
}
.download-card h3{
  margin:0;
  font-size:clamp(18px,2.6vmin,28px);
  color:#eaffff;
  letter-spacing:.12em;
  text-shadow:0 0 14px rgba(80,246,255,.45);
}
.download-card p{
  margin:0;
  max-width:320px;
  color:#b8d5df;
  line-height:1.42;
  font-size:clamp(12px,1.5vmin,15px);
}
.download-card .qrbox{
  width:clamp(112px,16vmin,148px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:14px;
  padding:10px;
  background:#fff;
  box-shadow:0 0 28px rgba(80,246,255,.25);
}
.result .qrbox #qr,
.download-card #qr{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;
}
.download-card small{
  width:100%;
  max-width:360px;
  min-height:1.2em;
  color:#6f9db1;
  font-size:10px;
  line-height:1.25;
  word-break:break-all;
}
#restart{
  min-width:148px;
  margin-top:0;
  border-radius:10px;
  background:rgba(5,16,25,.72);
}

@media (orientation: portrait){
  .screen[data-step="10"]{padding-top:6px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .result{
    width:min(86vw,680px);
    height:auto;
    flex:1;
    min-height:0;
    gap:8px;
  }
  .poster-card{min-height:0;padding:8px}
  .poster-card #poster{max-height:100%}
  .download-card{height:auto;padding:9px 14px;gap:5px}
  .download-card .qrbox{width:clamp(104px,15vmin,132px)}
  .download-card p{max-width:520px}
  .download-card small{font-size:8px;max-height:1.25em;overflow:hidden}
  #restart{transform:scale(.9);transform-origin:center;margin-top:0}
}

@media (orientation: landscape) and (max-height:760px){
  .back-btn{width:44px;height:44px}
  .result{width:min(820px,86vw)}
  .download-card .qrbox{width:clamp(128px,16vmin,168px)}
  .download-card{gap:8px}
  .download-card h3{font-size:clamp(18px,2.3vmin,24px)}
  .download-card p{font-size:clamp(12px,1.45vmin,14px)}
}

/* Tablet safe-area header: keep service/back/title inside the app, away from the system toolbar. */
:root{--app-safe-top:max(env(safe-area-inset-top),18px);--app-header-h:calc(var(--app-safe-top) + 58px)}
header{
  height:var(--app-header-h);
  padding:var(--app-safe-top) clamp(18px,3vw,42px) 10px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
header span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:left;
  line-height:1;
}
header b{
  white-space:nowrap;
  align-self:center;
}
.back-btn{
  order:0;
  width:44px;
  height:44px;
  min-height:44px;
  justify-self:start;
}
header span{order:1}
header b{order:2}
.screen{
  height:calc(100dvh - var(--app-header-h));
}

@media (orientation: portrait){
  :root{--app-safe-top:max(env(safe-area-inset-top),20px);--app-header-h:calc(var(--app-safe-top) + 56px)}
  header{
    grid-template-columns:50px minmax(0,1fr) auto;
    gap:10px;
    padding-left:18px;
    padding-right:18px;
  }
  header span{
    font-size:11px;
    letter-spacing:2px;
  }
}

@media (orientation: landscape) and (max-height:760px){
  :root{--app-safe-top:max(env(safe-area-inset-top),16px);--app-header-h:calc(var(--app-safe-top) + 52px)}
  header{
    height:var(--app-header-h);
    padding-top:var(--app-safe-top);
    padding-bottom:8px;
  }
  .screen{height:calc(100dvh - var(--app-header-h))}
}