:root{
  --e-card-w:var(--n-share-w); --e-card-wide:calc(var(--n-360px) * 2);
  --e-pad:clamp(var(--n-22px), 6vw, var(--n-34px)); --e-gutter:var(--n-16px);
  --e-h1:clamp(var(--n-24px), 7vw, var(--n-t-num)); --e-h1-q:clamp(var(--n-t-xl), 5.6vw, var(--n-28px));
  --e-sub:var(--n-t-md); --e-t-field:var(--n-16px);   
  --e-field:var(--n-48px); --e-btn:var(--n-48px); --e-opt:var(--n-56px); --e-chip:var(--n-36px); --e-cell:var(--n-56px);
  --e-logo:var(--n-220px); --e-mark:var(--n-64px); --e-tap:var(--n-44px);
  --e-cal-h:calc(var(--n-560px) + var(--n-140px)); --e-seg-h:var(--n-4px);
  --e-focus:0 0 0 var(--n-3px) var(--n-blue-soft);
  --e-bad:inset 0 0 0 var(--n-2px) var(--n-tone-red);
  --e-on:inset 0 0 0 var(--n-2px) var(--n-blue);
  --e-err-bg:var(--n-red-soft); --e-err-ink:var(--n-tone-red);
  --e-warn-bg:var(--n-orange-soft); --e-warn-ink:var(--n-tone-amber);
  --e-ok-bg:var(--n-green-soft); --e-ok-ink:var(--n-tone-green);
    --e-shake:var(--n-6px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100dvh;background:var(--n-bg);color:var(--n-ink);font:var(--n-w) var(--n-t-md)/1.45 var(--n-font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--n-blue);text-decoration:none;font-weight:var(--n-w-mid)}
a:hover{text-decoration:underline}
:where(a,button,input,textarea,iframe):focus-visible{outline:var(--n-2px) solid var(--n-blue);outline-offset:var(--n-2px)}
[hidden]{display:none!important}
.en-sr{position:absolute;width:var(--n-1px);height:var(--n-1px);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


.en{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--n-gap-lg);padding:max(var(--n-28px), env(safe-area-inset-top)) var(--e-gutter) max(var(--n-28px), env(safe-area-inset-bottom))}
.en-brand{display:flex;flex-direction:column;align-items:center;gap:var(--n-8px);text-align:center;color:var(--n-ink)}
.en-brand:hover{text-decoration:none}
.en-brand img{width:min(var(--e-logo), 70vw);height:auto;display:block;animation:en-pop .6s var(--n-spring) both}
.en-brand b{font:var(--n-w-bold) var(--n-t-lg)/1.2 var(--n-display);letter-spacing:-.01em}
.en-brand span{font-size:var(--n-t-sm);color:var(--n-ink-3)}
@keyframes en-pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}

.en-card{width:min(100%, var(--e-card-w));padding:var(--e-pad);border-radius:var(--n-r-lg);background:var(--n-glass);
  border:var(--n-line-w) solid var(--n-glass-edge);box-shadow:var(--n-glass-shadow);
  -webkit-backdrop-filter:saturate(170%) blur(var(--n-24px));backdrop-filter:saturate(170%) blur(var(--n-24px))}
.en-card.is-wide{width:min(100%, var(--e-card-wide))}
.en-step{display:flex;flex-direction:column;gap:var(--n-gap)}
.en-step.is-new{animation:en-in var(--n-enter) var(--n-ease-out) both}
@keyframes en-in{from{opacity:0;transform:translateY(var(--n-8px))}to{opacity:1;transform:none}}
.en-step form{display:flex;flex-direction:column;gap:var(--n-gap)}


.en-eb{font:var(--n-w-bold) var(--n-t-xs)/1 var(--n-font);letter-spacing:var(--n-eb-track);text-transform:uppercase;color:var(--n-ink-3)}
.en-h1{margin:0;font:var(--n-w-bold) var(--e-h1)/1.12 var(--n-display);letter-spacing:var(--n-h1-track);color:var(--n-ink);outline:none}
.en-h1.is-q{font-size:var(--e-h1-q);line-height:1.2;letter-spacing:-.02em}
.en-sub{margin:calc(var(--n-gap) * -.5) 0 0;font-size:var(--e-sub);color:var(--n-ink-3)}
.en-sub b{color:var(--n-ink);font-weight:var(--n-w-bold);word-break:break-all}
.en-head{display:flex;flex-direction:column;gap:var(--n-gap-sm)}
.en-head .en-sub{margin:0}


.en-field{display:flex;flex-direction:column;gap:var(--n-6px);min-width:0}
.en-field>span{font:var(--n-w-mid) var(--n-t-sm)/1.2 var(--n-display);color:var(--n-ink-2)}
.en-in{width:100%;height:var(--e-field);padding:0 var(--n-18px);border:0;border-radius:var(--n-pill);background:var(--n-fld);box-shadow:var(--n-fld-shadow);
  color:var(--n-ink);font:var(--n-w) var(--e-t-field)/1 var(--n-font);outline:none;transition:box-shadow var(--n-motion) var(--n-ease);-webkit-appearance:none;appearance:none}
.en-in::placeholder{color:var(--n-ink-4)}
.en-in:focus{box-shadow:var(--n-fld-shadow),var(--e-focus)}
.en-in[aria-invalid="true"]{box-shadow:var(--n-fld-shadow),var(--e-bad)}
textarea.en-in{height:auto;min-height:calc(var(--e-field) * 2);padding:var(--n-12px) var(--n-18px);border-radius:var(--n-r);line-height:1.45;resize:vertical}
.en-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--n-120px), 1fr));gap:var(--n-gap-sm)}
.en-hint{min-height:1.2em;display:flex;align-items:center;gap:var(--n-6px);font-size:var(--n-t-sm);color:var(--n-ink-3)}
.en-hint.is-ok{color:var(--e-ok-ink)}


.en-code{position:relative;display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:var(--n-8px)}
.en-code-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:var(--e-t-field);color:transparent;caret-color:transparent;background:transparent;z-index:1}
.en-cell{height:var(--e-cell);display:grid;place-items:center;border-radius:var(--n-r-sm);background:var(--n-fld);box-shadow:var(--n-fld-shadow);
  font:var(--n-w-bold) var(--n-24px)/1 var(--n-display);color:var(--n-ink);transition:box-shadow var(--n-motion) var(--n-ease)}
.en-cell.is-at{box-shadow:var(--n-fld-shadow),var(--e-on),var(--e-focus)}
.en-code.is-bad .en-cell{box-shadow:var(--n-fld-shadow),var(--e-bad)}
.en-code.is-shake{animation:en-shake .36s cubic-bezier(.36,.07,.19,.97)}
@keyframes en-shake{20%,60%{transform:translateX(calc(var(--e-shake) * -1))}40%,80%{transform:translateX(var(--e-shake))}}


.en-btn{position:relative;width:100%;height:var(--e-btn);display:inline-flex;align-items:center;justify-content:center;gap:var(--n-8px);
  border-radius:var(--n-pill);background:var(--n-btn-blue);color:var(--n-on-blue);box-shadow:var(--n-btn-glow);
  font:var(--n-w-bold) var(--n-t-md)/1 var(--n-display);--sf-size:var(--n-sf-sm);transition:background var(--n-motion) var(--n-ease),transform var(--n-motion) var(--n-ease)}
.en-btn:hover{background:var(--n-btn-blue-hover)}
.en-btn:active{transform:scale(var(--n-press))}
.en-btn[disabled]{cursor:default;opacity:var(--n-busy)}
.en-btn .en-spin{display:none}
.en-btn.is-busy .en-spin{display:block}
.en-btn.is-busy sf-icon{display:none}
.en-spin{width:var(--n-18px);height:var(--n-18px);border-radius:var(--n-pill);border:var(--n-2px) solid currentColor;border-right-color:transparent;animation:en-turn .7s linear infinite}
@keyframes en-turn{to{transform:rotate(360deg)}}
.en-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--n-gap-sm)}
.en-links.is-center{justify-content:center}
.en-lnk{min-height:var(--e-tap);display:inline-flex;align-items:center;gap:var(--n-6px);color:var(--n-blue);font:var(--n-w-mid) var(--n-t)/1.2 var(--n-font);--sf-size:var(--n-sf-sm)}
.en-lnk[disabled]{color:var(--n-ink-4);cursor:default}
.en-lnk.is-quiet{color:var(--n-ink-3)}


.en-opts{display:flex;flex-direction:column;gap:var(--n-gap-sm);margin:0;padding:0;border:0}
.en-opt{width:100%;min-height:var(--e-opt);display:flex;align-items:center;justify-content:space-between;gap:var(--n-12px);text-align:left;
  padding:var(--n-12px) var(--n-18px);border-radius:var(--n-r);background:var(--n-card);box-shadow:var(--n-card-shadow);
  font:var(--n-w-mid) var(--n-t-md)/1.3 var(--n-font);color:var(--n-ink);transition:box-shadow var(--n-motion) var(--n-ease),background var(--n-motion) var(--n-ease),transform var(--n-motion) var(--n-ease)}
.en-opt:hover{background:var(--n-card-hover)}
.en-opt:active{transform:scale(var(--n-press))}
.en-opt[aria-pressed="true"]{box-shadow:var(--n-card-shadow),var(--e-on);background:var(--n-card-hover)}
.en-opt sf-icon{color:var(--n-blue);--sf-size:var(--n-sf-sm)}
.en-opt-t{display:flex;flex-direction:column;gap:var(--n-4px);min-width:0}
.en-opt-t small{font:var(--n-w) var(--n-t-sm)/1.35 var(--n-font);color:var(--n-ink-3)}
.en-opt-t small+small{color:var(--n-ink-4)}
.en-chips{display:flex;flex-wrap:wrap;gap:var(--n-gap-xs)}
.en-chip{height:var(--e-chip);padding:0 var(--n-14px);border-radius:var(--n-pill);background:var(--n-seg);box-shadow:inset 0 0 0 var(--n-line-w) var(--n-seg-edge);
  font:var(--n-w-mid) var(--n-t-sm)/1 var(--n-font);color:var(--n-ink-2);transition:background var(--n-motion) var(--n-ease),color var(--n-motion) var(--n-ease)}
.en-chip[aria-pressed="true"]{background:var(--n-blue);color:var(--n-on-blue);box-shadow:none}
.en-ask{display:flex;flex-direction:column;gap:var(--n-gap-sm)}


.en-prog{display:flex;flex-direction:column;gap:var(--n-8px)}
.en-prog-t{display:flex;justify-content:space-between;gap:var(--n-8px);font:var(--n-w-mid) var(--n-t-xs)/1 var(--n-font);color:var(--n-ink-3)}
.en-prog-t b{color:var(--n-ink-2);font-weight:var(--n-w-bold)}
.en-segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--n-4px)}
.en-seg{position:relative;height:var(--e-seg-h);border-radius:var(--n-pill);background:var(--n-w08);overflow:hidden}
.en-seg::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--f, 0));background:var(--n-blue);border-radius:inherit;transition:transform var(--n-enter) var(--n-ease-out)}


.en-msg{display:flex;align-items:flex-start;gap:var(--n-10px);padding:var(--n-12px) var(--n-14px);border-radius:var(--n-r-sm);background:var(--e-err-bg);
  font-size:var(--n-t);line-height:1.45;color:var(--n-ink);animation:en-in var(--n-enter) var(--n-ease-out) both}
.en-msg>sf-icon{margin-top:var(--n-2px);color:var(--e-err-ink)}
.en-msg.is-warn{background:var(--e-warn-bg)}.en-msg.is-warn>sf-icon{color:var(--e-warn-ink)}
.en-msg .en-lnk{min-height:0;display:inline}


.en-mark{width:var(--e-mark);height:var(--e-mark);border-radius:var(--n-pill);display:grid;place-items:center;font-size:var(--n-sf-lg);background:var(--e-ok-bg);color:var(--e-ok-ink);animation:en-pop .6s var(--n-spring) both}
.en-mark.is-soft{background:var(--n-blue-soft);color:var(--n-blue)}
.en-center{align-items:center;text-align:center}
.en-wait{display:flex;flex-direction:column;align-items:center;gap:var(--n-gap);padding:var(--n-24px) 0;text-align:center}
.en-ring{width:var(--e-mark);height:var(--e-mark);border-radius:var(--n-pill);border:var(--n-3px) solid var(--n-w08);border-top-color:var(--n-blue);animation:en-turn .9s linear infinite}
.en-cal{width:100%;height:var(--e-cal-h);border:0;border-radius:var(--n-r);background:var(--n-card);box-shadow:var(--n-card-shadow)}
.en-status{display:flex;align-items:center;justify-content:center;gap:var(--n-8px);font-size:var(--n-t);color:var(--n-ink-3)}
.en-status.is-ok{color:var(--e-ok-ink)}


.en-alt{margin:0;font-size:var(--n-t);color:var(--n-ink-3);text-align:center}
.en-legal{margin:0;max-width:var(--e-card-w);font-size:var(--n-t-sm);line-height:1.5;color:var(--n-ink-4);text-align:center}
.en-legal a{color:var(--n-ink-3);font-weight:var(--n-w);text-decoration:underline;text-decoration-color:var(--n-line-2);text-underline-offset:var(--n-2px)}
.en-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--n-6px);font-size:var(--n-t-sm);color:var(--n-ink-4)}
.en-foot a{color:var(--n-ink-3);font-weight:var(--n-w)}
.en-small{display:flex;flex-direction:column;align-items:center;gap:var(--n-8px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}