/* =====================================================================
   LOCKDOWN BROWSER — DESIGN TOKENS
   A "security console" palette: graphite base, system-blue for trust /
   active state, amber for caution / exit actions. Mono type is used
   anywhere the app is reporting live status (countdown, address bar,
   PIN entry) to reinforce the console feel.
===================================================================== */
:root{
  --bg:            #0B0F14;
  --bg-elevated:   #10151C;
  --surface:       #161D27;
  --surface-2:     #1C2530;
  --border:        #26303C;
  --border-soft:   #1C2530;

  --text-primary:  #E8EDF2;
  --text-secondary:#8A97A8;
  --text-tertiary: #5C6A7A;

  --accent:        #4C8DFF;
  --accent-soft:   #7FADFF;
  --accent-dim:    rgba(76,141,255,0.14);

  --amber:         #FFB020;
  --amber-dim:     rgba(255,176,32,0.14);

  --danger:        #FF5C5C;
  --danger-dim:    rgba(255,92,92,0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;

  --shadow-lg: 0 24px 70px rgba(0,0,0,0.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);

  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
a{ color: var(--accent-soft); }
img{ display:block; max-width:100%; }
::selection{ background: var(--accent-dim); color:#fff; }

/* Respect reduced-motion preference across all custom animations */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* focus visibility */
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* =====================================================================
   SCREEN MANAGEMENT
===================================================================== */
.screen{
  display:none;
  min-height:100vh;
  width:100%;
}
.screen.is-active{ display:block; }

/* =====================================================================
   BUTTONS
===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: var(--radius-sm);
  font-weight:600; font-size:15px;
  padding: 13px 22px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.btn-primary{
  background: var(--accent);
  color:#08101F;
}
.btn-primary:hover{ background: var(--accent-soft); box-shadow: 0 8px 24px rgba(76,141,255,.35); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-lg{ padding:16px 28px; font-size:16px; }
.btn-block{ width:100%; }
.btn-icon{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border); border-radius:10px; color: var(--text-primary);
}
.btn-icon:hover{ border-color: var(--accent); color: var(--accent-soft); }

/* =====================================================================
   SCREEN 1 — LANDING
===================================================================== */
#screen-landing{ position:relative; padding: 32px 6vw 0; }

.grid-backdrop{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, black 10%, transparent 75%);
  opacity:.6;
}

.landing-nav{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1240px; margin:0 auto;
}
.brand-logo{ height:34px; width:auto; border-radius:6px; }
.nav-pill{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color: var(--text-secondary);
  background: var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px;
}
.dot{ width:7px; height:7px; border-radius:50%; }
.dot-live{ background: var(--accent); box-shadow:0 0 0 3px var(--accent-dim); animation: pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.hero{
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:40px;
  padding: 7vh 0 6vh;
  min-height: 78vh;
}
.eyebrow{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  color: var(--accent-soft); text-transform:uppercase; margin-bottom:18px;
}
.hero-copy h1{
  font-size: clamp(38px, 4.6vw, 62px);
  line-height:1.06; font-weight:700; color: var(--text-primary);
}
.accent-text{ color: var(--accent-soft); }
.hero-sub{
  margin-top:22px; max-width:520px;
  font-size:16.5px; line-height:1.65; color: var(--text-secondary);
}
.hero-actions{ margin-top:34px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-note{ font-size:13px; color: var(--text-tertiary); }

.feature-strip{
  list-style:none; padding:0; margin:44px 0 0;
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--border-soft); padding-top:24px; max-width:480px;
}
.feature-strip li{
  display:flex; align-items:center; gap:12px;
  font-size:14px; color: var(--text-secondary);
}
.feature-num{
  font-family: var(--font-mono); font-size:11.5px; color: var(--accent-soft);
  background: var(--accent-dim); border-radius:6px; padding:3px 7px;
}

.hero-visual{ display:flex; align-items:center; justify-content:center; }
.scan-rings{ width:min(420px, 88%); height:auto; }
.scan-rings .ring{ fill:none; stroke: var(--border); stroke-width:1; }
.scan-rings .ring-1{ stroke-dasharray: 4 8; animation: spin 60s linear infinite; transform-origin:210px 210px; }
.scan-rings .ring-2{ stroke: var(--accent-dim); stroke-width:1.5; animation: spin 40s linear infinite reverse; transform-origin:210px 210px; }
.scan-rings .ring-3{ stroke-dasharray: 2 6; animation: spin 26s linear infinite; transform-origin:210px 210px; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.scan-rings .sweep{
  stroke: var(--accent-soft); stroke-width:1.5; opacity:.55;
  transform-origin:210px 210px; animation: sweep 4s linear infinite;
}
@keyframes sweep{ to{ transform: rotate(360deg); } }
.node-grid circle{ fill: var(--text-tertiary); }
.lock-glyph rect{ fill: var(--surface-2); stroke: var(--accent); stroke-width:2; }
.lock-glyph path{ stroke: var(--accent); }

.landing-footer{
  position:relative; z-index:1;
  text-align:center; font-size:12.5px; color: var(--text-tertiary);
  padding: 18px 0 34px;
}

/* =====================================================================
   SCREEN 2 — SETUP
===================================================================== */
#screen-setup{ background: var(--bg); }
.setup-nav{
  display:flex; align-items:center; gap:14px;
  padding: 22px 6vw; max-width:900px; margin:0 auto;
}
.setup-nav-title{ font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--text-secondary); }

.setup-wrap{ max-width:760px; margin:0 auto; padding: 10px 6vw 90px; display:flex; flex-direction:column; gap:18px; }

.config-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 26px 28px;
}
.config-head{ display:flex; gap:14px; margin-bottom:20px; }
.config-num{
  font-family: var(--font-mono); font-size:12px; color: var(--accent-soft);
  background: var(--accent-dim); border-radius:8px; padding:5px 9px; height:fit-content;
}
.config-head h2{ font-size:18px; font-weight:600; }
.config-head p{ margin-top:4px; font-size:13.5px; color: var(--text-secondary); }

/* logout method + option cards */
.option-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.option-card{
  position:relative; display:flex; flex-direction:column; gap:4px;
  background: var(--bg-elevated); border:1.5px solid var(--border); border-radius: var(--radius-md);
  padding:16px 16px 16px 40px; cursor:pointer; transition: border-color .15s, background .15s;
}
.option-card input{ position:absolute; opacity:0; }
.option-mark{
  position:absolute; left:16px; top:18px; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--text-tertiary); transition: border-color .15s;
}
.option-mark::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background: var(--accent);
  transform: scale(0); transition: transform .15s var(--ease);
}
.option-card input:checked ~ .option-mark{ border-color: var(--accent); }
.option-card input:checked ~ .option-mark::after{ transform: scale(1); }
.option-card:has(input:checked){ border-color: var(--accent); background: var(--accent-dim); }
.option-title{ font-weight:600; font-size:14.5px; }
.option-desc{ font-size:12.5px; color: var(--text-secondary); }

/* corner toggle */
.corner-toggle{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.corner-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;
  background: var(--bg-elevated); border:1.5px solid var(--border); border-radius: var(--radius-md);
  padding:16px; cursor:pointer;
}
.corner-card input{ position:absolute; opacity:0; }
.corner-card:has(input:checked){ border-color: var(--accent); background: var(--accent-dim); }
.corner-preview{
  position:relative; width:100%; height:70px; border-radius:10px;
  background: var(--surface-2); border:1px solid var(--border-soft); overflow:hidden;
}
.corner-preview img{ position:absolute; width:22px; height:22px; border-radius:50%; bottom:8px; }
.corner-preview-left img{ left:8px; }
.corner-preview-right img{ right:8px; }

/* sub fields */
.sub-field{ margin-top:20px; padding-top:20px; border-top:1px dashed var(--border-soft); }
.sub-field.hidden{ display:none; }
.field-label{ display:block; font-size:13px; font-weight:600; margin-bottom:10px; color: var(--text-primary); }
.field-hint{ margin-top:8px; font-size:12px; color: var(--text-tertiary); }
.field-block{ margin-top:20px; }
.field-block:first-of-type{ margin-top:0; }

.pin-boxes{ display:flex; gap:10px; }
.pin-box{
  width:52px; height:58px; text-align:center; font-family: var(--font-mono); font-size:22px; font-weight:700;
  background: var(--surface-2); border:1.5px solid var(--border); border-radius:10px; color: var(--text-primary);
}
.pin-box:focus{ border-color: var(--accent); }

.text-input{
  width:100%; background: var(--surface-2); border:1.5px solid var(--border); border-radius: var(--radius-sm);
  padding:13px 14px; color: var(--text-primary); font-size:14.5px; font-family: inherit;
}
.text-input:focus{ border-color: var(--accent); }
.text-input::placeholder{ color: var(--text-tertiary); }
.textarea{ resize:vertical; min-height:70px; font-family: var(--font-mono); font-size:13px; line-height:1.6; }

.input-with-action{ position:relative; }
.input-action{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; background:transparent; border:none; color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.input-action:hover{ background: var(--surface); color: var(--text-primary); }

.setup-error{
  background: var(--danger-dim); border:1px solid rgba(255,92,92,.35); color:#FFB4B4;
  border-radius:10px; padding:12px 14px; font-size:13.5px;
}
.setup-error.hidden{ display:none; }

/* =====================================================================
   SCREEN 3 — TRANSITION
===================================================================== */
#screen-transition{
  display:none; background: var(--bg);
  align-items:center; justify-content:center;
}
#screen-transition.is-active{ display:flex; }
.transition-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding: 0 24px; }
.countdown-ring{ width:220px; height:220px; transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: var(--border); stroke-width:4; }
.ring-progress{
  fill:none; stroke: var(--accent); stroke-width:4; stroke-linecap:round;
  stroke-dasharray: 565.5; stroke-dashoffset:0;
  transition: stroke-dashoffset 1s linear;
}
.countdown-center{
  position:absolute; top:0; left:0; right:0; height:220px;
  display:flex; align-items:center; justify-content:center;
}
#countdown-number{ font-family: var(--font-mono); font-size:64px; font-weight:700; color: var(--text-primary); }
.transition-title{ margin-top:28px; font-size:22px; font-weight:600; }
.transition-sub{ margin-top:8px; color: var(--text-secondary); font-size:14.5px; }
.transition-esc{ margin-top:22px; font-size:13px; color: var(--text-tertiary); }
kbd{
  font-family: var(--font-mono); background: var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; color: var(--text-primary);
}

/* =====================================================================
   SCREEN 4 — LOCKDOWN ENVIRONMENT
===================================================================== */
#screen-lockdown{
  display:none; height:100vh; width:100vw; flex-direction:column; background:#000;
}
#screen-lockdown.is-active{ display:flex; }

.browser-chrome{
  display:flex; align-items:center; gap:14px;
  background: var(--bg-elevated); border-bottom:1px solid var(--border);
  padding:10px 16px; flex-shrink:0;
}
.chrome-controls{ display:flex; gap:6px; }
.chrome-nav-btn{
  width:28px; height:28px; border-radius:7px; border:none; background:transparent; color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.chrome-nav-btn:not(:disabled):hover{ background: var(--surface-2); color: var(--text-primary); }
.chrome-nav-btn:disabled{ opacity:.3; cursor:not-allowed; }

.chrome-address-bar{
  flex:1; display:flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border-soft); border-radius:999px;
  padding:8px 16px; color: var(--text-secondary); font-size:13px; font-family: var(--font-mono);
  max-width:520px; margin:0 auto;
}
.chrome-address-bar svg{ color: var(--accent-soft); flex-shrink:0; }
#chrome-address-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chrome-badge{
  font-size:11.5px; font-weight:600; color: var(--amber);
  background: var(--amber-dim); border-radius:999px; padding:5px 11px; white-space:nowrap;
}

.frame-wrap{ position:relative; flex:1; }
#homepage-frame{ position:absolute; inset:0; width:100%; height:100%; border:none; background:#fff; }

.exit-btn{
  position:fixed; bottom:22px; z-index:40;
  width:54px; height:54px; border-radius:50%; border:none; padding:0;
  background: var(--bg-elevated); box-shadow: var(--shadow-md);
  opacity:.55; transition: opacity .2s, transform .2s;
}
.exit-btn:hover{ opacity:1; transform: scale(1.06); }
.exit-btn img{ width:100%; height:100%; border-radius:50%; }
.exit-btn.corner-right{ right:22px; }
.exit-btn.corner-left{ left:22px; }

/* =====================================================================
   OVERLAYS (fullscreen guard / exit modal / simulated window)
===================================================================== */
.overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(4,6,9,0.82); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation: fade-in .18s var(--ease);
}
.overlay.hidden{ display:none; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

.overlay-card{
  position:relative; width:100%; max-width:380px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:30px 28px 28px; text-align:center;
  animation: pop-in .22s var(--ease);
}
@keyframes pop-in{ from{ opacity:0; transform: translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.overlay-card.shake{ animation: shake .35s; }
@keyframes shake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-8px); } 75%{ transform: translateX(8px); } }

.overlay-icon{
  width:52px; height:52px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.overlay-icon.warn{ background: var(--amber-dim); color: var(--amber); }
.overlay-icon.lock{ background: var(--accent-dim); color: var(--accent-soft); }
.overlay-card h2{ font-size:19px; font-weight:600; }
.overlay-card > p{ margin-top:8px; color: var(--text-secondary); font-size:14px; line-height:1.55; }
.overlay-card .btn{ margin-top:22px; }

.overlay-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color: var(--text-secondary); font-size:20px; line-height:1;
}
.overlay-close:hover{ background: var(--surface-2); color: var(--text-primary); }

.modal-pin-boxes{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
.modal-error{ margin-top:12px; font-size:13px; color: var(--danger); min-height:16px; }

/* Simulated Chrome-style window for whitelisted domains */
.sim-chrome{
  width:min(920px, 94vw); height:min(640px, 86vh);
  background: var(--bg-elevated); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; box-shadow: var(--shadow-lg); display:flex; flex-direction:column;
  animation: pop-in .22s var(--ease);
}
.sim-titlebar{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background: var(--surface); border-bottom:1px solid var(--border);
}
.sim-address-bar{
  flex:1; display:flex; align-items:center; gap:8px;
  background: var(--surface-2); border-radius:999px; padding:7px 14px;
  font-family: var(--font-mono); font-size:12.5px; color: var(--text-secondary);
}
.sim-address-bar svg{ color: var(--accent-soft); flex-shrink:0; }
.sim-close{
  width:26px; height:26px; border-radius:7px; border:none; background:transparent;
  color: var(--text-secondary); font-size:19px; line-height:1;
}
.sim-close:hover{ background: var(--danger-dim); color: var(--danger); }
.sim-body{ position:relative; flex:1; background:#fff; }
#sim-frame{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.sim-fallback-note{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-size:11.5px; color: var(--text-tertiary); background: rgba(11,15,20,.85);
  border:1px solid var(--border-soft); border-radius:8px; padding:8px 10px; pointer-events:none;
}

/* =====================================================================
   TOASTS
===================================================================== */
#toast-container{
  position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.toast{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 16px; box-shadow: var(--shadow-md); font-size:13.5px;
  animation: toast-in .25s var(--ease);
  max-width:360px;
}
.toast.leaving{ animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(-10px); } }
.toast-icon{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast.blocked .toast-icon{ background: var(--danger-dim); color: var(--danger); }
.toast.allowed .toast-icon{ background: var(--accent-dim); color: var(--accent-soft); }
.toast-title{ font-weight:600; }
.toast-msg{ color: var(--text-secondary); font-size:12.5px; }

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; padding-top:5vh; text-align:left; min-height:auto; }
  .hero-visual{ order:-1; margin-bottom:10px; }
  .scan-rings{ width:min(320px, 80%); }
  .option-row{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .landing-nav{ flex-direction:column; gap:14px; align-items:flex-start; }
  .hero-copy h1{ font-size:34px; }
  .pin-box{ width:44px; height:52px; font-size:19px; }
  .config-card{ padding:20px 18px; }
  .chrome-address-bar{ max-width:none; }
}