*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --z5-base: #0e1014;
  --z5-surf: #12151c;
  --z5-elev: #161a22;
  --z5-line: #262c38;
  --z5-txt: #d2dae4;
  --z5-sec: #96a2b2;
  --z5-mut: #5f6c7d;
  --z5-cyan: #78c8ff;
  --z5-green: #82dc9a;
  --z5-amber: #e6be6e;
  --z5-red: #f06e6e;
  --font-mono: "Segoe UI", system-ui, -apple-system, Consolas, "Cascadia Mono", "Lucida Console", monospace;
  --radius: 4px;

  /* Type scale (16px base) */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --lh: 1.6;
  --lh-tight: 1.45;

  --bg: var(--z5-base);
  --bg2: var(--z5-surf);
  --bg3: var(--z5-elev);
  --line: var(--z5-line);
  --green: var(--z5-cyan);
  --green-dim: rgba(120, 200, 255, 0.15);
  --green-glow: rgba(120, 200, 255, 0.35);
  --blue: #1a6a9a;
  --blue-bright: var(--z5-cyan);
  --red: var(--z5-red);
  --amber: var(--z5-amber);
  --ok: var(--z5-green);
  --text: var(--z5-txt);
  --muted: var(--z5-sec);
  --text-dim: var(--z5-mut);
  --border: var(--z5-line);
  --border-bright: var(--z5-line);
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body.z5-terminal {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--z5-base);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* WebApp ambient background */
.z5-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.z5-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.45;
  animation: z5-orb-float 18s ease-in-out infinite alternate;
}

.z5-orb--cyan {
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.35) 0%, transparent 70%);
}

.z5-orb--green {
  width: min(360px, 60vw);
  height: min(360px, 60vw);
  bottom: -10%;
  right: -6%;
  background: radial-gradient(circle, rgba(130, 220, 160, 0.28) 0%, transparent 70%);
  animation-delay: -6s;
}

.z5-orb--violet {
  width: min(280px, 50vw);
  height: min(280px, 50vw);
  top: 40%;
  right: 20%;
  background: radial-gradient(circle, rgba(140, 120, 255, 0.18) 0%, transparent 70%);
  animation-delay: -12s;
}

@keyframes z5-orb-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -18px) scale(1.08); }
}

/* ── SCREENS ── */
.screen{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;
  transition:opacity .4s ease,transform .4s ease;
}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.98)}

/* ── LOGO ── */
.logo-wrap{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:36px;
  animation:logoReveal .8s cubic-bezier(.16,1,.3,1) forwards;
}
.logo-wrap--compact{
  margin-bottom:20px;
}
@keyframes logoReveal{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

.logo-title{
  font-size:clamp(3rem, 14vw, 5rem);
  font-weight:700;
  letter-spacing:0.06em;
  line-height:1;
  color:var(--z5-txt);
  text-shadow:0 0 40px rgba(120,200,255,0.25);
}

.logo-sub{
  font-size:var(--fs-sm);
  letter-spacing:0.08em;
  color:var(--z5-mut);
  text-transform:uppercase;
  margin-top:10px;
}

/* ── KEY ENTRY CARD ── */
.entry-card{
  width:100%;max-width:520px;
  border:1px solid rgba(120,200,255,0.12);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(22,26,34,0.92),rgba(14,16,20,0.88));
  backdrop-filter:blur(8px);
  padding:28px 24px;
  position:relative;
  animation:cardIn .55s cubic-bezier(.22,1,.36,1) .15s both;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 12px 40px rgba(0,0,0,0.25);
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* corner brackets */
.entry-card::before,.entry-card::after,
.entry-card .corner-br,.entry-card .corner-bl{
  content:'';position:absolute;width:16px;height:16px;
}
.entry-card::before{top:0;left:0;border-top:1px solid var(--green);border-left:1px solid var(--green)}
.entry-card::after{top:0;right:0;border-top:1px solid var(--green);border-right:1px solid var(--green)}
.entry-card .corner-br{bottom:0;right:0;border-bottom:1px solid var(--green);border-right:1px solid var(--green)}
.entry-card .corner-bl{bottom:0;left:0;border-bottom:1px solid var(--green);border-left:1px solid var(--green)}

.card-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:28px;
}
.card-header-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.card-header-title{
  font-size:var(--fs-sm);font-weight:700;
  letter-spacing:0.1em;color:var(--z5-cyan);text-transform:uppercase;
}
.card-header-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border-bright),transparent)}

.field-label{
  font-size:var(--fs-sm);letter-spacing:0.06em;color:var(--z5-mut);
  text-transform:uppercase;margin-bottom:10px;
}

.terminal-input-wrap{
  background:rgba(0,0,0,0.5);
  border:1px solid var(--border-bright);
  border-radius:3px;
  display:flex;align-items:center;
  padding:0 14px;
  height:52px;
  position:relative;
  transition:border-color .2s,box-shadow .2s;
}
.terminal-input-wrap:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(120,200,255,0.15),0 0 20px rgba(120,200,255,0.08);
}
.terminal-prompt{
  color:var(--green);font-size:var(--fs-lg);margin-right:10px;user-select:none;
  text-shadow:0 0 8px var(--green);
}
.terminal-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--z5-cyan);font-family:var(--font-mono);
  font-size:var(--fs-md);letter-spacing:0.06em;text-transform:uppercase;
  caret-color:var(--z5-cyan);
}
.terminal-input::placeholder{color:var(--text-dim);letter-spacing:1px;font-size:var(--fs-sm)}
.terminal-input-wrap .scan-line{
  position:absolute;bottom:0;left:0;width:0%;height:1px;
  background:var(--green);transition:width .3s;
}
.terminal-input-wrap:focus-within .scan-line{width:100%}

.key-hint{
  font-size:var(--fs-sm);color:var(--text-dim);margin-top:10px;letter-spacing:0.02em;line-height:var(--lh);
}

.btn-request{
  width:100%;margin-top:20px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 16px;
  border:1px solid rgba(120,200,255,0.5);
  border-radius:var(--radius);
  background:rgba(120,200,255,0.14);
  color:var(--z5-txt);
  font:inherit;
  font-size:var(--fs-md);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s,border-color .2s,background .2s;
}
.btn-request:hover{
  background:rgba(120,200,255,0.22);
  border-color:var(--z5-cyan);
}
.btn-request:active{transform:scale(0.98)}
.btn-request .pulse-ring{display:none}
.btn-request:disabled{
  opacity:.4;cursor:not-allowed;pointer-events:none;
}
.btn-request.loading span::after{
  content:' ...';animation:dots 1s steps(4,end) infinite;
}
@keyframes dots{
  0%{content:' .'}
  33%{content:' ..'}
  66%{content:' ...'}
  100%{content:' .'}
}

.error-msg{
  margin-top:16px;padding:12px 16px;
  background:rgba(240,110,110,0.08);
  border:1px solid rgba(240,110,110,0.3);
  border-radius:3px;
  font-size:var(--fs-sm);letter-spacing:0.02em;color:var(--red);line-height:var(--lh);
  display:none;align-items:center;gap:8px;
}
.error-msg.visible{display:flex}
.error-msg::before{content:'\26A0';font-size:var(--fs-md)}

/* ── FOOTER STATUS ── */
.terminal-footer{
  position:fixed;bottom:0;left:0;right:0;
  min-height:36px;
  background:var(--z5-surf);
  border-top:1px solid var(--line);
  display:flex;align-items:center;
  padding:10px 16px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  gap:16px;
  font-size:var(--fs-sm);
  letter-spacing:0.04em;
  z-index:50;
}
.footer-item{display:flex;align-items:center;gap:6px;color:var(--z5-sec)}
.footer-dot{width:5px;height:5px;border-radius:50%}
.footer-dot.green{background:var(--ok);box-shadow:0 0 5px var(--ok);animation:blinkFast 2s ease infinite}
.footer-dot.blue{background:var(--green);box-shadow:0 0 5px var(--green)}
.footer-dot.red{background:var(--red)}
@keyframes blinkFast{0%,100%{opacity:1}50%{opacity:.2}}
.footer-spacer{flex:1}
.footer-version{color:var(--text-dim);font-size:var(--fs-xs);letter-spacing:0.08em}

/* ── CODE DISPLAY SCREEN ── */
#screen-code{
  gap:0;
}

.code-panel{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;
  gap:0;
}

.code-panel-header{
  background:var(--z5-surf);
  border:1px solid rgba(120,200,255,0.12);
  border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.code-panel-title-wrap{display:flex;align-items:center;gap:10px}
.code-panel-dots{display:flex;gap:5px}
.code-panel-dot{width:9px;height:9px;border-radius:50%}
.code-panel-dot:nth-child(1){background:var(--red)}
.code-panel-dot:nth-child(2){background:var(--amber)}
.code-panel-dot:nth-child(3){background:var(--ok)}
.code-panel-title{
  font-family:var(--font-mono);font-size:9px;font-weight:500;
  letter-spacing:4px;color:var(--text-dim);text-transform:uppercase;
}
.code-panel-key-badge{
  background:rgba(120,200,255,0.07);
  border:1px solid rgba(120,200,255,0.2);
  border-radius:3px;padding:3px 10px;
  font-size:9px;letter-spacing:2px;color:var(--green);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:160px;
}

.code-panel-body{
  background:linear-gradient(145deg,rgba(22,26,34,0.92),rgba(14,16,20,0.88));
  border:1px solid rgba(120,200,255,0.12);
  border-top:none;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
}

/* top scan bar animation */
.code-panel-body::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:topScan 4s linear infinite;
}
@keyframes topScan{
  0%{transform:translateX(-100%)}100%{transform:translateX(100%)}
}

.code-label{
  font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:24px;
}

/* digit cells */
.digits-row{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
.digit-sep{
  font-family:var(--font-mono);font-size:28px;
  color:var(--border-bright);font-weight:300;
  align-self:center;margin:0 4px;
}
.digit-cell{
  width:64px;height:80px;
  background:rgba(0,0,0,0.5);
  border:1px solid var(--border-bright);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:36px;font-weight:700;
  color:var(--text-dim);
  position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,color .3s;
}
.digit-cell::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--green);transform:scaleX(0);
  transition:transform .3s;
}
.digit-cell.scanning{
  border-color:rgba(120,200,255,0.3);
  animation:cellScan .08s linear infinite;
}
@keyframes cellScan{
  0%{color:rgba(120,200,255,0.3)}
  50%{color:rgba(130,220,154,0.5)}
  100%{color:rgba(120,200,255,0.3)}
}
.digit-cell.locked{
  border-color:rgba(120,200,255,0.5);
  box-shadow:0 0 20px rgba(120,200,255,0.15),inset 0 0 12px rgba(120,200,255,0.05);
  color:var(--green);
  text-shadow:0 0 16px var(--green-glow);
  animation:lockIn .15s ease forwards;
}
.digit-cell.locked::after{transform:scaleX(1)}
@keyframes lockIn{
  0%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* waiting state */
.code-waiting{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px;
}
.waiting-dots{
  display:flex;gap:8px;
}
.waiting-dot{
  width:8px;height:8px;border-radius:50%;background:var(--border-bright);
  animation:waitPulse 1.5s ease-in-out infinite;
}
.waiting-dot:nth-child(2){animation-delay:.2s}
.waiting-dot:nth-child(3){animation-delay:.4s}
@keyframes waitPulse{
  0%,100%{background:var(--border-bright);transform:scale(1)}
  50%{background:var(--green);transform:scale(1.3);box-shadow:0 0 8px var(--green)}
}
.waiting-text{
  font-size:11px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;
}

.code-meta{
  margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:1px;
}
.code-age{color:var(--text-dim)}
.code-age strong{color:var(--amber)}

.btn-copy{
  width:100%;min-height:44px;margin-top:20px;
  padding:10px 14px;
  background:rgba(120,200,255,0.14);
  border:1px solid rgba(120,200,255,0.5);
  border-radius:var(--radius);
  color:var(--z5-txt);
  font:inherit;
  font-size:13px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;cursor:pointer;
  position:relative;
  transition:transform .15s,border-color .2s,background .2s;
  display:none;
}
.btn-copy.visible{display:flex;align-items:center;justify-content:center}
.btn-copy:hover{
  background:rgba(120,200,255,0.22);
  border-color:var(--z5-cyan);
}
.btn-copy.copied{
  border-color:var(--z5-green);
  color:var(--z5-green);
}
.btn-copy .flash{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(120,200,255,0.1),transparent);
  transform:translateX(-100%);
}
.btn-copy.copied .flash{animation:flashSweep .4s ease forwards}
@keyframes flashSweep{to{transform:translateX(100%)}}

.code-panel-footer{
  background:rgba(0,0,0,0.5);
  border:1px solid var(--border-bright);
  border-top:1px solid var(--border);
  border-radius:0 0 4px 4px;
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.ws-status{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1px}
.ws-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blinkFast 2s ease infinite}
.ws-dot.off{background:var(--red);animation:none}
.ws-dot.connecting{background:var(--amber);animation:blinkFast .5s ease infinite}
.ws-label{color:var(--text-dim)}

.btn-logout{
  background:transparent;border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:2px;color:var(--text-dim);
  transition:color .2s;
}
.btn-logout:hover{color:var(--red)}

/* ── LOADER OVERLAY ── */
.loader{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;
  transition:opacity .4s ease;
}
.loader.hidden{opacity:0;pointer-events:none}
.loader-bar-wrap{
  width:240px;height:2px;background:var(--border);border-radius:1px;overflow:hidden;
}
.loader-bar{
  height:100%;background:linear-gradient(90deg,var(--green),var(--blue-bright));
  width:0%;border-radius:1px;
  transition:width .3s ease;
  box-shadow:0 0 8px var(--green);
}
.loader-text{
  font-size:var(--fs-sm);letter-spacing:0.1em;color:var(--z5-sec);
  text-transform:uppercase;
}

/* expired state */
.code-expired{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;
}
.expired-icon{font-size:48px;color:var(--red);opacity:.7;line-height:1}
.expired-title{
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:4px;color:var(--red);text-transform:uppercase;
}
.expired-desc{
  font-size:11px;letter-spacing:1px;color:var(--text-dim);
  text-align:center;line-height:1.7;max-width:280px;
}

/* new code flash overlay */
.code-flash{
  position:absolute;inset:0;
  background:rgba(120,200,255,0.04);
  opacity:0;pointer-events:none;
}
.code-flash.active{animation:flashOverlay .6s ease}
@keyframes flashOverlay{
  0%{opacity:1}100%{opacity:0}
}

@media(max-width:500px){
  .entry-card{padding:28px 20px}
  .digit-cell{width:44px;height:60px;font-size:24px}
  .digit-sep{font-size:20px}
  .code-panel-body{padding:28px 16px}
}

/* ── LANGUAGE PICKER ── */
.lang-picker{
  position:fixed;top:14px;right:16px;z-index:1000;
  font-family:var(--font-mono);
}
.lang-picker__current{
  display:flex;align-items:center;gap:8px;
  background:var(--z5-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
  font:inherit;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:0.06em;
  color:var(--z5-txt);cursor:pointer;
  transition:transform .15s,border-color .2s,background .2s;
  user-select:none;
}
.lang-picker__current:hover,
.lang-picker.open .lang-picker__current{
  border-color:var(--z5-cyan);
  color:var(--z5-cyan);
}
.lang-picker__code{min-width:28px;text-align:center}
.lang-picker__menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  min-width:180px;max-height:min(320px,60vh);overflow-y:auto;
  background:linear-gradient(180deg,rgba(18,21,28,0.98),rgba(14,16,20,0.98));
  border:1px solid var(--border-bright);
  border-radius:4px;padding:6px;
  box-shadow:0 16px 48px rgba(0,0,0,0.55);
  backdrop-filter:blur(12px);
}
.lang-picker.open .lang-picker__menu{display:block}
.lang-picker__item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:3px;
  color:var(--text);text-decoration:none;font-size:var(--fs-sm);
  letter-spacing:0.02em;transition:background .15s,color .15s;
}
.lang-picker__item:hover{background:rgba(120,200,255,0.1);color:var(--green)}
.lang-picker__item.active{
  background:rgba(120,200,255,0.14);
  border:1px solid rgba(120,200,255,0.25);
  color:var(--green);
}
.lang-picker__item-code{font-weight:700;min-width:28px}
.lang-picker__item-label{
  font-family:var(--font-mono);
  font-size:10px;color:var(--text-dim);text-align:right;
}
.lang-picker__item.active .lang-picker__item-label{color:var(--text)}

@media(max-width:500px){
  .lang-picker{top:10px;right:10px}
  .lang-picker__menu{min-width:160px;right:0;left:auto}
}

/* ── WARNING SCREEN ── */
#screen-warning{background:rgba(14,16,20,0.97)}

/* ── GUIDE SCREEN ── */
#screen-guide{justify-content:center;align-items:center}

.guide-wrap{
  width:100%;max-width:520px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}

.guide-progress{
  width:100%;height:3px;background:var(--border);border-radius:2px;overflow:hidden;
}
.guide-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--ok));
  border-radius:2px;
  transition:width .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px var(--green);
}
.guide-step-label{
  font-size:var(--fs-xs);letter-spacing:0.12em;color:var(--text-dim);
  text-transform:uppercase;align-self:flex-end;
}

.guide-card{
  width:100%;
  border:1px solid rgba(120,200,255,0.12);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(22,26,34,0.92),rgba(14,16,20,0.88));
  backdrop-filter:blur(8px);
  overflow:hidden;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 12px 40px rgba(0,0,0,0.25);
  animation:cardIn .55s cubic-bezier(.22,1,.36,1) both;
}
.guide-card::before{display:none}

.guide-step{
  padding:28px 28px 24px;
  display:flex;flex-direction:column;gap:16px;
}
.guide-step.hidden{display:none}

.gstep-gif{
  width:100%;border-radius:6px;
  border:1px solid var(--border-bright);
  display:block;cursor:zoom-in;
  transition:opacity .2s;
}
.gstep-gif:hover{opacity:.85}

.gstep-placeholder{
  width:100%;height:120px;border-radius:6px;
  border:1px dashed var(--border-bright);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:4px;
  color:var(--text-dim);background:rgba(0,0,0,0.35);
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,0.92);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
  animation:lbIn .2s ease;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox img{
  max-width:90vw;max-height:90vh;
  border-radius:6px;
  border:1px solid var(--border-bright);
  box-shadow:0 0 60px rgba(120,200,255,0.1);
}
.lightbox-close{
  position:fixed;top:20px;right:24px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;width:36px;height:36px;
  color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox-close:hover{background:rgba(240,110,110,0.4);border-color:var(--red)}

.gstep-icon{
  font-size:32px;line-height:1;
  color:var(--green);
  text-shadow:0 0 20px var(--green-glow);
}
.gstep-title{
  font-size:var(--fs-lg);font-weight:700;
  letter-spacing:0.02em;color:var(--z5-txt);line-height:var(--lh-tight);
}
.gstep-desc{
  font-size:var(--fs-md);line-height:var(--lh);color:var(--text);
}
.gstep-desc strong{color:#fff}

.gstep-value{
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(120,200,255,0.25);
  border-radius:4px;
  padding:12px 16px;
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:2px;color:var(--green);
  text-align:center;
  box-shadow:inset 0 0 20px rgba(120,200,255,0.03);
}

.gstep-value-copy{
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(120,200,255,0.25);
  border-radius:4px;
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);
  font-size:var(--fs-md);color:var(--green);letter-spacing:0.04em;
  word-break:break-all;
}
.btn-copy-inline{
  background:var(--z5-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
  font:inherit;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:0.06em;color:var(--z5-txt);
  cursor:pointer;white-space:nowrap;
  transition:transform .15s,border-color .2s,color .2s;
  flex-shrink:0;
}
.btn-copy-inline:hover{
  border-color:var(--z5-cyan);
  color:var(--z5-cyan);
}
.btn-copy-inline.copied{
  border-color:var(--z5-green);
  color:var(--z5-green);
}

.gstep-hint{
  font-size:var(--fs-sm);color:var(--z5-sec);line-height:var(--lh);
  padding:10px 14px;
  background:rgba(120,200,255,0.04);
  border-left:2px solid rgba(120,200,255,0.3);
  border-radius:0 3px 3px 0;
}
.gstep-hint strong{color:var(--blue-bright)}

.gstep-warn-box{
  background:rgba(230,190,110,0.06);
  border:1px solid rgba(230,190,110,0.2);
  border-radius:4px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
  font-size:var(--fs-sm);color:var(--text);line-height:var(--lh);
}
.gstep-warn-box strong{color:var(--amber)}

.btn-gstep{
  width:100%;min-height:48px;margin-top:4px;
  padding:12px 16px;
  border:1px solid rgba(120,200,255,0.5);
  border-radius:var(--radius);
  background:rgba(120,200,255,0.14);
  color:var(--z5-txt);
  font:inherit;font-size:var(--fs-md);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s,border-color .2s,background .2s;
}
.btn-gstep::before{display:none}
.btn-gstep:hover{
  background:rgba(120,200,255,0.22);
  border-color:var(--z5-cyan);
}
.btn-gstep:active{transform:scale(0.98)}

.btn-gstep-final{
  border-color:rgba(230,190,110,0.5);
  background:rgba(230,190,110,0.1);
  color:var(--z5-amber);
}
.btn-gstep-final:hover{
  border-color:var(--z5-amber);
  background:rgba(230,190,110,0.18);
  color:var(--z5-txt);
}

.btn-guide-back{
  background:transparent;border:none;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:2px;color:var(--text-dim);
  align-self:flex-start;padding:4px 0;
  transition:color .2s;
}
.btn-guide-back:hover{color:var(--green)}

/* guide agree checkboxes (step 4) */
.guide-agree-list{display:flex;flex-direction:column;gap:0}
.guide-agree-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;cursor:pointer;
  border-bottom:1px solid rgba(230,190,110,0.08);
  font-size:12px;line-height:1.6;color:var(--text);
  transition:color .2s;user-select:none;
}
.guide-agree-item:last-child{border-bottom:none}
.guide-agree-item:hover{color:#fff}
.guide-agree-check{
  width:22px;height:22px;flex-shrink:0;margin-top:2px;
  background:rgba(0,0,0,0.5);border:1px solid rgba(230,190,110,0.4);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.guide-agree-check.checked{
  background:rgba(230,190,110,0.12);border-color:var(--amber);
  box-shadow:0 0 10px rgba(230,190,110,0.2);
}
.guide-agree-check.checked::after{content:'\2713';color:var(--amber);font-size:15px;font-weight:bold;line-height:1}

/* password toggle row */
.pass-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pass-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:500px){
  .guide-step{padding:24px 18px 20px}
  .gstep-value-copy{flex-direction:column;align-items:flex-start}
}

.warn-card{
  width:100%;max-width:520px;
  background:linear-gradient(160deg,rgba(18,4,8,0.99),rgba(28,6,14,0.99),rgba(14,4,10,0.99));
  border:1px solid rgba(240,110,110,0.4);
  border-top:3px solid var(--red);
  border-radius:6px;
  position:relative;overflow:hidden;
  animation:cardIn .5s cubic-bezier(.16,1,.3,1) both;
  box-shadow:
    0 0 0 1px rgba(240,110,110,0.08),
    0 0 80px rgba(240,110,110,0.12),
    0 32px 100px rgba(0,0,0,0.8);
}
/* köşe bracket — kırmızı */
.warn-card::before,.warn-card::after,.warn-card .wcorner-br,.warn-card .wcorner-bl{
  content:'';position:absolute;width:18px;height:18px;
}
.warn-card::before{top:4px;left:0;border-top:2px solid var(--red);border-left:2px solid var(--red);opacity:.5}
.warn-card::after{top:4px;right:0;border-top:2px solid var(--red);border-right:2px solid var(--red);opacity:.5}
.warn-card .wcorner-br{bottom:0;right:0;border-bottom:2px solid var(--red);border-right:2px solid var(--red);opacity:.5}
.warn-card .wcorner-bl{bottom:0;left:0;border-bottom:2px solid var(--red);border-left:2px solid var(--red);opacity:.5}

/* üst scan çizgisi */
.warn-scan{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:topScan 2.5s linear infinite;
}

.warn-banner{
  background:linear-gradient(90deg,rgba(240,110,110,0.12),rgba(240,110,110,0.06),rgba(240,110,110,0.12));
  border-bottom:1px solid rgba(240,110,110,0.25);
  padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.warn-badge{
  background:rgba(240,110,110,0.12);
  border:1px solid rgba(240,110,110,0.5);
  border-radius:3px;padding:5px 14px;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:900;
  letter-spacing:0.1em;color:var(--red);text-transform:uppercase;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 8px rgba(240,110,110,0.2)}50%{box-shadow:0 0 20px rgba(240,110,110,0.5)}}
.warn-title{
  font-family:var(--font-mono);font-size:var(--fs-md);font-weight:900;
  letter-spacing:0.08em;color:var(--red);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
  text-shadow:0 0 20px rgba(240,110,110,0.5);
}
.warn-icon{font-size:18px;animation:warnPulse .8s ease-in-out infinite}
@keyframes warnPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.1)}}

.warn-body{padding:24px 28px 20px}

.warn-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.warn-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:var(--fs-sm);line-height:var(--lh);color:var(--text);
  padding:14px 0;
  border-bottom:1px solid rgba(240,110,110,0.08);
}
.warn-list li:last-child{border-bottom:none}
.warn-list-marker{
  width:26px;height:26px;border-radius:4px;flex-shrink:0;margin-top:2px;
  background:rgba(240,110,110,0.08);border:1px solid rgba(240,110,110,0.35);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;font-weight:900;
  color:var(--red);
}
.warn-item-title{
  display:block;
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.08em;color:var(--red);margin-bottom:6px;text-transform:uppercase;
  text-shadow:0 0 10px rgba(240,110,110,0.3);
}

.warn-confirm-row{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:rgba(240,110,110,0.04);
  border-top:1px solid rgba(240,110,110,0.15);
  margin:0;cursor:pointer;
  transition:background .2s;
}
.warn-confirm-row:hover{background:rgba(240,110,110,0.07)}
.warn-checkbox-wrap{
  width:22px;height:22px;flex-shrink:0;
  background:rgba(0,0,0,0.6);border:1px solid rgba(240,110,110,0.5);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.warn-checkbox-wrap.checked{
  background:rgba(240,110,110,0.2);border-color:var(--red);
  box-shadow:0 0 12px rgba(240,110,110,0.3);
}
.warn-checkbox-wrap.checked::after{content:'\2713';color:var(--red);font-size:15px;font-weight:bold;line-height:1}
.warn-confirm-text{font-size:var(--fs-sm);color:var(--z5-sec);line-height:var(--lh);flex:1;user-select:none;letter-spacing:0.02em}

.btn-confirm{
  width:100%;min-height:56px;
  background:transparent;
  border:none;
  border-top:1px solid rgba(240,110,110,0.2);
  border-radius:0 0 6px 6px;
  color:rgba(240,110,110,0.3);
  font-family:var(--font-mono);
  font-size:var(--fs-md);font-weight:900;letter-spacing:0.08em;
  text-transform:uppercase;cursor:not-allowed;
  position:relative;overflow:hidden;
  transition:all .3s;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.btn-confirm::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(240,110,110,0.06),transparent);
  transform:translateX(-100%);transition:transform .4s;
}
.btn-confirm.ready{
  border-color:rgba(240,110,110,0.4);color:rgba(240,110,110,0.7);cursor:pointer;
}
.btn-confirm.ready:hover{
  background:rgba(240,110,110,0.08);
  color:var(--red);
  border-color:var(--red);
  box-shadow:0 0 40px rgba(240,110,110,0.2);
}
.btn-confirm.ready:hover::before{transform:translateX(100%)}
.btn-confirm.loading-state{
  border-color:var(--amber);color:var(--amber);cursor:not-allowed;
}
.countdown-badge{
  background:rgba(240,110,110,0.12);border:1px solid rgba(240,110,110,0.4);
  border-radius:3px;padding:3px 10px;
  font-size:11px;font-family:var(--font-mono);letter-spacing:2px;
  min-width:40px;text-align:center;
}

.error-msg.banned-msg{
  background:rgba(240,110,110,0.12);
  border-color:rgba(240,110,110,0.55);
  color:var(--red);
  flex-direction:column;
  align-items:flex-start;
  line-height:1.5;
}
.error-msg.banned-msg::before{content:'\26D4';font-size:var(--fs-md)}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}