/* Presentation only. Existing form hooks and activation script are preserved. */
.activation-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start;
  padding-block:78px 90px
}
.activation-intro {
  padding-top:32px
}
.activation-intro h2 {
  font-size:clamp(36px,4vw,53px)
}
.activation-intro>p:not(.eyebrow) {
  max-width:350px;
  color:var(--muted);
  font-size:15px
}
.activation-overview {
  list-style:none;
  margin:32px 0 0;
  padding:0
}
.activation-overview li {
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
  font-size:14px
}
.activation-overview span {
  color:var(--blue);
  font-size:11px
}
.activation-help {
  max-width:350px;
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:25px
}
.activation-help strong {
  font-size:14px
}
.activation-help p {
  font-size:13px;
  color:var(--muted);
  margin:8px 0
}
.activation-help a {
  display:inline-block;
  padding:10px 0;
  color:var(--blue);
  text-decoration:none;
  font-size:13px
}
.shell {
  min-width:0
}
.activation-page .card {
  padding:36px;
  border:1px solid #364252;
  border-radius:10px;
  background:#10151d
}
.activation-page .card h1,.activation-page .card h2 {
  font-size:29px;
  letter-spacing:-.04em;
  line-height:1.2;
  margin:0 0 13px
}
.activation-page .card .eyebrow {
  font-size:10px;
  margin-bottom:18px
}
.activation-page .lead {
  font-size:14px;
  color:#b1bac8;
  margin:0 0 22px
}
.service-note {
  color:var(--muted);
  font-size:11px;
  padding:13px 0;
  border-top:1px solid var(--line);
  margin:0 0 20px
}
.code-label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:0 0 10px;
  color:#d8e0eb
}
.code-input {
  width:100%;
  min-height:83px;
  border:1px solid #44536a;
  border-radius:6px;
  background:#090f18;
  color:#e6f0ff;
  padding:17px 8px;
  font:600 clamp(28px,3vw,38px)/1.2 ui-monospace,Consolas,monospace;
  text-align:center;
  letter-spacing:.3em;
  text-indent:.3em;
  margin-bottom:20px;
  outline:none
}
.code-input::placeholder {
  color:#7a8ca4
}
.code-input:focus,.field input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #77b6ff24;
  outline:2px solid transparent
}
.code-input[aria-invalid=true],.field input[aria-invalid=true] {
  border-color:#ff999d
}
.activation-page .card .btn {
  font-size:14px;
  cursor:pointer
}
.activation-page .card .btn-primary {
  width:100%
}
.btn-ghost {
  background:#1b2330;
  border:1px solid #394557;
  color:#e2e9f4
}
.btn-ghost:hover {
  background:#283449
}
.btn[disabled] {
  opacity:.65;
  cursor:progress;
  transform:none
}
.step-head {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 12px;
  align-items:baseline;
  margin-bottom:6px
}
.timer {
  font-size:11px;
  color:#b9c6d8;
  font-variant-numeric:tabular-nums;
  margin:0 0 12px
}
.timer.low {
  color:#ffcf92
}
.type-grid {
  display:grid;
  gap:11px
}
.type-card {
  display:flex;
  width:100%;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:16px;
  color:var(--text);
  border:1px solid #364252;
  border-radius:7px;
  background:#151d29;
  cursor:pointer
}
.type-card:hover {
  border-color:var(--blue);
  background:#1b293b
}
.type-icon {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  color:var(--blue);
  background:#25364d;
  border-radius:7px
}
.type-icon svg {
  width:23px;
  height:23px
}
.type-text {
  display:flex;
  flex-direction:column;
  gap:4px
}
.type-text strong {
  font-size:15px;
  font-weight:600
}
.type-text>span {
  font-size:12px;
  color:#b1bdce
}
#step-type>.btn-ghost {
  margin-top:22px;
  width:100%
}
.field {
  margin-bottom:18px
}
.field label {
  display:block;
  font-size:13px;
  color:#dde5ef;
  margin-bottom:7px
}
.optional {
  font-size:11px;
  color:var(--muted);
  font-weight:400
}
.field input {
  width:100%;
  min-height:49px;
  padding:12px;
  font-size:16px;
  border:1px solid #3a495f;
  border-radius:6px;
  background:#090f18;
  color:#eff5ff;
  outline:none
}
.field input::placeholder {
  color:#8a9ab1;
  font-size:14px
}
.password-wrap {
  position:relative
}
.password-wrap input {
  padding-right:78px
}
.reveal {
  position:absolute;
  right:4px;
  top:4px;
  min-height:41px;
  min-width:62px;
  border:0;
  background:#1f2d41;
  border-radius:4px;
  color:#bfdcff;
  font-size:12px;
  cursor:pointer
}
.field-error,.form-error {
  color:#ffb4b7;
  font-size:13px;
  margin:0 0 17px;
  line-height:1.6
}
.form-error {
  border:1px solid #b75c634d;
  padding:12px;
  border-radius:6px;
  background:#36151c
}
.actions {
  display:flex;
  gap:10px;
  margin-top:22px
}
.actions .btn-primary {
  flex:1
}
.fine {
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  margin:20px 0 0
}
.spinner {
  display:none;
  width:17px;
  height:17px;
  border:2px solid #10243b4d;
  border-top-color:#10243b;
  border-radius:50%;
  animation:spin .8s linear infinite
}
.btn.loading .spinner {
  display:inline-block
}
@keyframes spin {
  to {
  transform:rotate(360deg)
}

}
.done {
  text-align:center
}
.done-mark {
  width:68px;
  height:68px;
  color:#a6dcc4;
  margin:3px auto 25px
}
.done-mark svg {
  width:100%;
  height:100%
}
.foot {
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin-top:24px;
  line-height:2
}
.foot a {
  display:inline-block;
  padding:4px 6px;
  text-decoration:none
}
.foot a:hover {
  color:var(--blue)
}
.noscript {
  padding:20px;
  color:#ffcf92;
  text-align:center
}

@media(max-width:1050px) {
  .activation-layout {
  gap:50px
}
.activation-page .card {
  padding:28px
}

}

@media(max-width:820px) {
  .activation-layout {
  grid-template-columns:.85fr 1.15fr;
  gap:30px;
  padding-block:50px 65px
}
.activation-intro h2 {
  font-size:35px
}
.activation-page .card {
  padding:24px
}
.activation-overview li {
  font-size:12px;
  gap:10px
}
.activation-page .card h1,.activation-page .card h2 {
  font-size:25px
}

}

@media(max-width:600px) {
  .activation-layout {
  grid-template-columns:1fr;
  gap:25px;
  padding-block:32px 45px
}
.activation-intro {
  padding:0
}
.activation-intro h2 {
  font-size:31px;
  margin-bottom:13px
}
.activation-intro h2 br {
  display:none
}
.activation-intro .eyebrow {
  font-size:9px;
  margin-bottom:13px
}
.activation-intro>p:not(.eyebrow) {
  max-width:none;
  font-size:13px;
  margin:0
}
.activation-overview,.activation-help {
  display:none
}
.activation-page .card {
  padding:25px 22px
}
.code-input {
  font-size:32px
}
.fine {
  font-size:11px
}
.type-text>span {
  font-size:11px
}
.type-card {
  padding:14px 12px;
  gap:12px
}

}

@media(max-width:360px) {
  .activation-page .card {
  padding:22px 16px
}
.activation-page .card h1,.activation-page .card h2 {
  font-size:24px
}
.code-input {
  font-size:29px;
  letter-spacing:.22em;
  text-indent:.22em
}
.type-text strong {
  font-size:14px
}
.type-icon {
  width:32px;
  flex-basis:32px
}

}

@media(prefers-reduced-motion:reduce) {
  .spinner {
  animation:none
}

}
/* Cinema Stage: presentation overrides only. Form hooks and behavior are unchanged. */
.activation-layout { grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:48px; padding-block:96px; }
.activation-intro { padding:0; }
.activation-intro h2 { font-size:48px; line-height:1.16; letter-spacing:-.025em; }
.activation-intro>p:not(.eyebrow) { font-size:17px; max-width:48ch; }
.activation-intro>.eyebrow { display:none; }
.activation-page .card { padding:32px; border:1px solid var(--sam-line); border-radius:8px; background:var(--sam-raised); }
.activation-page .card h1,.activation-page .card h2 { font-size:28px; line-height:1.25; letter-spacing:-.015em; }
.activation-page .card .eyebrow { font-size:14px; letter-spacing:0; text-transform:none; color:var(--sam-text-muted); }
.activation-page .lead { font-size:16px; color:var(--sam-text-secondary); }
.activation-page .service-note,.activation-page .fine,.activation-page .foot,.activation-help p,.activation-help a,.type-text>span,.optional,.timer { font-size:14px; color:var(--sam-text-muted); }
.activation-overview li { font-size:15px; gap:16px; }
.activation-overview span { font-size:14px; }
.code-label,.field label { font-size:15px; margin-bottom:8px; color:var(--sam-text); }
.code-input,.field input { background:var(--sam-bg); color:var(--sam-text); border-color:var(--sam-control-line); border-radius:6px; min-height:48px; }
.code-input { font-family:inherit; font-variant-numeric:tabular-nums; font-size:32px; letter-spacing:.12em; text-indent:.12em; min-height:72px; }
.code-input::placeholder,.field input::placeholder { color:var(--sam-text-muted); }
.code-input:focus,.field input:focus { border-color:var(--sam-control-line); box-shadow:none; outline:2px solid var(--sam-focus); outline-offset:3px; }
.code-input[aria-invalid=true],.field input[aria-invalid=true] { border-color:var(--sam-danger); }
.field { margin-bottom:24px; }
.field-error,.form-error { font-size:14px; color:var(--sam-danger); }
.form-error { border-color:var(--sam-danger); background:var(--sam-raised); }
.activation-page .card .btn { font-size:15px; }
.btn-ghost { background:transparent; border-color:var(--sam-control-line); color:var(--sam-text); }
.btn-ghost:hover { background:var(--sam-overlay); }
.btn[disabled] { opacity:1; background:var(--sam-raised); color:var(--sam-text-muted); border-color:var(--sam-control-line); }
.type-card { background:var(--sam-surface); border-color:var(--sam-control-line); border-radius:6px; min-height:64px; }
.type-card:hover { background:var(--sam-overlay); border-color:var(--sam-primary); }
.type-icon { background:transparent; color:var(--sam-primary); }
.reveal { min-height:44px; top:2px; right:2px; color:var(--sam-text); background:var(--sam-overlay); font-size:14px; }
.password-wrap input { min-height:48px; }
.timer.low { color:var(--sam-warning); }
.done-mark { color:var(--sam-success); }
.activation-help { display:block; }
.activation-overview { display:block; }
.activation-help a,.foot a { text-decoration:underline; min-height:44px; }
@media(max-width:1199px) { .activation-intro h2 { font-size:40px; } }
@media(max-width:1023px) { .activation-layout { grid-template-columns:1fr; gap:32px; padding-block:64px; } .activation-layout .shell { width:100%; max-width:480px; margin-inline:auto; } }
@media(max-width:767px) { .activation-layout { padding-block:48px; } .activation-intro h2 { font-size:32px; } .activation-intro h2 br { display:none; } .activation-intro>p:not(.eyebrow) { font-size:16px; } .activation-page .card { padding:24px; } .code-input { font-size:28px; } }
@media(max-width:360px) { .activation-page .card { padding:20px 16px; } .actions { flex-wrap:wrap; } .actions .btn { width:100%; } }

/* SAM PLAY glass system (final polish). Presentation only: ids, hooks and states are unchanged. */
.activation-page { background:radial-gradient(ellipse 50% 520px at 78% 120px,rgba(47,123,255,.18),transparent 70%) no-repeat,radial-gradient(ellipse 40% 420px at 10% 640px,rgba(8,185,255,.07),transparent 70%) no-repeat,#02050b; }
.activation-intro h2 { font-family:"SF Pro Display","Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,sans-serif; font-weight:650; letter-spacing:-.04em; line-height:1.04; }
.activation-overview li { border-top:1px solid rgba(150,205,255,.1); }
.activation-overview span { display:inline-grid; place-items:center; min-width:2.2rem; height:2.2rem; border-radius:999px; color:#8fe3ff; box-shadow:0 0 0 1px rgba(143,211,255,.3) inset; font-variant-numeric:tabular-nums; }
.activation-help { border-top-color:rgba(150,205,255,.12); }
.activation-help a, .foot a { color:#8fe3ff; }
.activation-page .card { position:relative; overflow:hidden; border:0; border-radius:26px; background:linear-gradient(160deg,rgba(20,44,78,.6),rgba(5,12,24,.88) 50%,rgba(3,8,18,.94)); box-shadow:0 0 0 1px rgba(150,215,255,.15) inset,0 1px 0 rgba(255,255,255,.09) inset,0 60px 110px -50px rgba(0,0,0,.95),0 0 120px -50px rgba(8,185,255,.45); }
.activation-page .card .eyebrow { font-size:.76rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#8fd3ff; }
.activation-page .card h1, .activation-page .card h2 { font-family:"SF Pro Display","Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,sans-serif; font-weight:640; letter-spacing:-.03em; }
.service-note { border-top-color:rgba(150,205,255,.12); }
.code-input, .field input { border-color:rgba(143,211,255,.24); background:rgba(2,6,14,.85); border-radius:14px; transition:border-color .25s,box-shadow .25s; }
.code-input { min-height:80px; letter-spacing:.32em; text-indent:.32em; font-family:ui-monospace,"SF Mono",Consolas,monospace; font-weight:600; }
.code-input:focus, .field input:focus { border-color:#27e6ff; outline:2px solid transparent; box-shadow:0 0 0 4px rgba(39,230,255,.16),0 0 28px -8px rgba(39,230,255,.6); }
.code-input[aria-invalid=true], .field input[aria-invalid=true] { border-color:var(--sam-danger,#ff999d); box-shadow:0 0 0 4px rgba(255,120,130,.12); }
.activation-page .card .btn { min-height:52px; border-radius:999px; font-weight:650; transition:box-shadow .35s,transform .35s,filter .2s,background-color .25s; }
.activation-page .card .btn-primary:not([disabled]) { border:0; color:#02101c; background:linear-gradient(110deg,#5fd2ff,#08b9ff 45%,#2f7bff); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px -10px rgba(8,185,255,.7); }
.activation-page .card .btn-primary:not([disabled]):hover { box-shadow:0 0 0 1px rgba(210,245,255,.8) inset,0 14px 36px -8px rgba(8,185,255,.8); }
.activation-page .card .btn:not([disabled]):active { transform:translateY(1px) scale(.99); }
.activation-page .card .btn:focus-visible { outline:2px solid #bfeaff; outline-offset:3px; }
.activation-page .spinner { border-color:rgba(2,16,28,.25); border-top-color:#02101c; }
.btn-ghost { border-color:rgba(143,211,255,.26); }
.btn-ghost:hover { background:rgba(143,211,255,.08); border-color:rgba(143,211,255,.5); }
.type-card { border-color:rgba(143,211,255,.16); border-radius:16px; background:linear-gradient(150deg,rgba(20,44,78,.45),rgba(5,12,24,.7)); transition:border-color .25s,box-shadow .3s,background-color .25s; }
.type-card:hover, .type-card:focus-visible { border-color:rgba(39,230,255,.55); box-shadow:0 0 30px -12px rgba(8,185,255,.8); }
.type-card:focus-visible { outline:2px solid #8fe3ff; outline-offset:3px; }
.type-icon { border-radius:12px; color:#fff; background:linear-gradient(135deg,#2f7bff,#08b9ff); box-shadow:0 0 18px -4px rgba(8,185,255,.8); }
.reveal { border-radius:10px; }
.reveal:focus-visible { outline:2px solid #8fe3ff; outline-offset:2px; }
.form-error { border-radius:12px; }
.done-mark { filter:drop-shadow(0 0 18px rgba(120,230,190,.35)); }
@media (max-width:767px) { .activation-page .card { border-radius:20px; } .code-input { min-height:72px; letter-spacing:.24em; text-indent:.24em; } }
@media (prefers-reduced-motion:reduce) { .activation-page .card .btn, .code-input, .field input, .type-card { transition:none; } }
/* License activation mode (activate-license.js) */
.mode-switch {
  display:flex;
  gap:6px;
  padding:5px;
  margin:0 0 18px;
  border-radius:14px;
  background:rgba(8,16,31,.72);
  box-shadow:0 0 0 1px rgba(150,215,255,.14) inset
}
.mode-btn {
  flex:1;
  min-height:44px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:600;
  cursor:pointer
}
.mode-btn[aria-pressed=true] {
  color:#fff;
  background:rgba(40,120,220,.32);
  box-shadow:0 0 0 1px rgba(111,182,255,.4) inset
}
.mode-btn:focus-visible {
  outline:2px solid #6fb6ff;
  outline-offset:2px
}
#step-license .field {
  margin-top:18px
}
#step-license .fine a {
  color:inherit
}
.license-done {
  text-align:center
}
.license-done h3 {
  margin:12px 0 6px;
  font-size:22px
}