/* self-hosted fonts (no requests to Google: GDPR) */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff") format("woff"); font-weight: 500 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-var.woff") format("woff"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-var.woff") format("woff"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff") format("woff"); font-weight: 500 700; font-display: swap; }
/* Plex Mono has no Greek: a matching mono covers Greek only */
@font-face { font-family: "Plex Mono Greek"; src: url("/assets/fonts/dejavu-mono-greek.woff") format("woff"); font-weight: 400 700; unicode-range: U+0370-03FF, U+1F00-1FFF; font-display: swap; }

/* Lock screen. Same palette and type as the site; dark by design. */
:root {
  --bg: #070D1F; --fg: #EEF3FF; --muted: #A3B0CB; --dim: #7E8BA8;
  --accent: #2F7BFF; --accent-text: #5B9DFF; --line: rgba(150,185,255,.14);
  --edge-hi: rgba(170,200,255,.34); --edge-lo: rgba(120,160,255,.07);
  --danger: #FF8A8A; --ok: #34D399;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Greek", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
html[lang="el"] { --font-display: "Manrope", "Archivo", Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--font-mono); }

.lk-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.lk-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .4;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 75%);
}
.lk-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.lk-glow-a { width: 520px; height: 520px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(47,123,255,.6), transparent 65%); animation: lk-drift 20s ease-in-out infinite alternate; }
.lk-glow-b { width: 460px; height: 460px; bottom: -200px; left: -160px; background: radial-gradient(circle, rgba(40,70,190,.55), transparent 65%); animation: lk-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes lk-drift { to { transform: translate(-50px, 70px) scale(1.1); } }

.lk-wrap {
  position: relative; min-height: 100%; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 72px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.lk-lang { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 18px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10,19,42,.7); }
.lk-lang button { font: inherit; font-size: .76rem; font-weight: 600; color: var(--muted); background: none; border: 0; height: 30px; min-width: 36px; border-radius: 7px; cursor: pointer; }
.lk-lang button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #2468F0, #1A55D0); }

.lk-card {
  width: 100%; max-width: 420px; text-align: center; padding: 34px 30px 26px; border-radius: 20px;
  border: 1px solid transparent;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(110,160,255,.14), transparent 60%) padding-box,
    linear-gradient(170deg, rgba(24,42,86,.78), rgba(9,18,40,.86)) padding-box,
    linear-gradient(150deg, var(--edge-hi), var(--edge-lo) 45%, rgba(91,157,255,.25)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.35), 0 30px 80px -30px rgba(2,8,30,.95), 0 0 80px -40px rgba(47,123,255,.6);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: lk-in .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lk-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.lk-lock { width: 76px; height: 76px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 22px;
  background: linear-gradient(160deg, rgba(47,123,255,.3), rgba(47,123,255,.08)); border: 1px solid rgba(91,157,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px -12px rgba(47,123,255,.8); }
.lk-svg { width: 44px; height: 44px; overflow: visible; }
.lk-shackle { stroke: #CFE1FF; transform-origin: 44px 28px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.lk-body { fill: #5B9DFF; }
.lk-hole { fill: #0B1530; }
.lk-card.is-open .lk-shackle { transform: translateY(-6px) rotate(28deg); }
.lk-card.is-open .lk-body { fill: var(--ok); transition: fill .3s; }
.lk-card.is-shake { animation: lk-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes lk-shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-7px); } }

.lk-eyebrow { margin: 0 0 6px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.lk-prompt { display: inline-block; text-transform: none; letter-spacing: -.02em; font-weight: 600; padding: 0 5px; border-radius: 5px; border: 1px solid rgba(91,157,255,.35); background: rgba(47,123,255,.12); text-shadow: 0 0 10px rgba(91,157,255,.65); }
h1 { margin: 4px 0 8px; font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.3rem); letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 30%, #BFD0F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[lang="el"] h1 { font-stretch: 100%; }
.lk-sub { margin: 0 auto 22px; max-width: 32ch; color: var(--muted); line-height: 1.5; font-size: .95rem; }

.lk-form { text-align: left; display: grid; gap: 8px; }
.lk-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lk-field { position: relative; }
.lk-field input {
  width: 100%; height: 48px; padding: 0 48px 0 14px; border-radius: 12px; font: inherit; font-size: 16px; letter-spacing: .04em; color: var(--fg);
  background: rgba(3,9,24,.6); border: 1px solid rgba(150,185,255,.2); box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  caret-color: var(--accent-text); transition: border-color .2s, box-shadow .2s;
}
.lk-field input:focus { outline: none; border-color: var(--accent-text); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 3px rgba(47,123,255,.25); }
.lk-field input[aria-invalid="true"] { border-color: var(--danger); }
.lk-eye { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.lk-eye:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.lk-eye svg { width: 18px; height: 18px; }
.lk-msg { min-height: 1.3em; margin: 0; font-size: .84rem; color: var(--danger); }
.lk-msg.ok { color: var(--ok); }
.lk-btn {
  height: 48px; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 600; font-size: .98rem; color: #fff;
  background: linear-gradient(180deg, #2468F0, #1A55D0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.25), 0 12px 30px -10px rgba(47,123,255,.7);
  transition: translate .2s, box-shadow .2s, opacity .2s;
}
.lk-btn svg { width: 18px; height: 18px; }
.lk-btn:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 36px -10px rgba(47,123,255,.85); }
.lk-btn[disabled] { opacity: .6; cursor: progress; translate: none; }
.lk-btn:focus-visible, .lk-eye:focus-visible, .lk-lang button:focus-visible, .lk-foot a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

.lk-foot { margin: 18px 0 0; font-size: .84rem; color: var(--dim); }
.lk-foot a { color: var(--accent-text); text-underline-offset: 3px; }
.lk-status { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(150,185,255,.18); font-size: .72rem; color: var(--dim); }
.lk-state { color: var(--danger); font-weight: 500; }
.lk-card.is-open .lk-state { color: var(--ok); }
.lk-demo { margin: 10px 0 0; font-family: var(--font-mono); font-size: .7rem; color: #F2B45A; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}