/* ============================================================
   Iron Farm — Auth Codes (2FA / TOTP)
   Палитра и типографика сняты с iron-farm.vercel.app.
   ============================================================ */
:root{
  --bg:            #0a0a0a;
  --panel:         #1f2027;
  --panel-2:       #17171d;
  --panel-3:       #232329;
  --line:          #ffffff14;
  --line-2:        #ffffff24;
  --fg:            #ededed;
  --muted:         #f8fbffb8;
  --muted-2:       #ffffff66;
  --p:             #7c3aed;   /* accent purple        */
  --p-light:       #a855f7;   /* accent purple light  */
  --p-dark:        #5b21b6;   /* accent purple dark   */
  --grad:          linear-gradient(135deg,#5b21b6 0%,#7c3aed 45%,#a855f7 100%);
  --grad-soft:     linear-gradient(135deg,#a855f7b8 0%,#7c3aedc7 50%,#5b21b6b8 100%);
  --font:          "Geologica", system-ui, sans-serif;
  --font-head:     "Unbounded", "Geologica", system-ui, sans-serif;
  --font-mono:     ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rail-w:        62px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--fg);
  background:
    radial-gradient(1100px 620px at 78% -8%, #7c3df222 0%, #0000 60%),
    radial-gradient(900px 520px at 0% 100%, #5b21b61f 0%, #0000 55%),
    var(--bg);
  min-height:100vh;
  padding-left:var(--rail-w);   /* центрируем контент в области справа от сайдбара */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }

/* faint grid backdrop like the reference */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(#ffffff05 1px, transparent 1px),
    linear-gradient(90deg,#ffffff05 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(900px 700px at 30% 20%, #000 0%, transparent 75%);
}

/* ---------------- left rail ---------------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:18px 0;
  background:linear-gradient(180deg,#141419 0%,#0c0c10 100%);
  border-right:1px solid var(--line);
}
.rail-logo{ display:block; width:38px; height:38px; }
.rail-logo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 12px #7c3df255); }
.rail-nav{ display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.rail-ico{
  width:42px; height:42px; display:grid; place-items:center; border-radius:13px;
  color:var(--muted-2); transition:.18s;
}
.rail-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rail-ico:hover{ color:var(--p-light); background:#ffffff0a; transform:translateY(-1px); }
.rail-ico.is-active{ color:#fff; background:var(--grad); box-shadow:0 6px 18px #7c3df255; }
.rail-ico.is-active svg{ fill:#fff; }

/* ---------------- main ---------------- */
.main{
  position:relative; z-index:1;
  margin:0 auto;
  max-width:1000px;
  padding:22px clamp(16px,3vw,36px) 40px;
}

/* topline: crumbs + promo */
.topline{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.crumbs{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted-2); }
.crumbs a:hover{ color:var(--p-light); }
.crumbs .sep{ opacity:.5; }
.crumbs .here{ color:var(--fg); }

/* brand logo (top-right) */
.brand-logo{ display:block; width:56px; height:56px; transition:.2s; }
.brand-logo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 12px #7c3df255); }
.brand-logo:hover{ transform:translateY(-2px) scale(1.04); }

/* hero */
.hero{ margin:38px 0 26px; text-align:center; }
.eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:.32em; color:var(--p-light); opacity:.9; }
.hero h1{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(42px,7.5vw,86px); line-height:.96; margin:10px 0 12px;
  background:linear-gradient(180deg,#fff 0%,#cbb8e6 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ color:var(--muted); font-size:18px; margin:0; }

/* ---------------- console ---------------- */
.console{
  margin:0 auto; max-width:820px;
  background:linear-gradient(160deg,#1c1c22f2,#121218f2);
  border:1px solid var(--line-2);
  border-radius:22px;
  padding:26px clamp(18px,3vw,34px) 30px;
  box-shadow:0 26px 70px #00000066, inset 0 1px 0 #ffffff10;
}

/* mode toggle */
.modes{
  display:flex; gap:6px; padding:5px; border-radius:14px;
  background:#0e0e13; border:1px solid var(--line);
  width:max-content; margin:0 auto 24px;
}
.mode{
  font-family:var(--font); font-size:14px; font-weight:500; color:var(--muted);
  border:0; background:transparent; padding:9px 26px; border-radius:10px; cursor:pointer;
  transition:.18s;
}
.mode:hover{ color:#fff; }
.mode.is-active{ color:#fff; background:var(--grad); box-shadow:0 6px 16px #7c3df255; }

.pane{ display:none; }
.pane.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

/* input field */
.field{ position:relative; }
.field input,
.field textarea{
  width:100%; font-family:var(--font-mono); color:var(--fg);
  background:#0d0d12; border:1px solid var(--line-2); border-radius:13px;
  padding:15px 44px 15px 18px; font-size:15px; outline:none; transition:.18s;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; padding-right:18px; }
.field input{ padding-right:94px; }
.field input::placeholder,
.field textarea::placeholder{ color:#ffffff40; }
.field input:focus,
.field textarea:focus{ border-color:var(--p); box-shadow:0 0 0 4px #7c3df233; background:#0f0f16; }
.field-actions{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:5px;
}
.field-ico{
  width:32px; height:32px; display:none; place-items:center; border-radius:9px;
  border:0; cursor:pointer; background:#ffffff0d; color:var(--muted-2); font-size:13px;
  transition:.15s;
}
.field-ico.show{ display:grid; }
.field-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.field-ico:hover{ background:#ffffff1a; color:#fff; }
#s-link{ color:var(--p-light); }
#s-link:hover{ background:var(--grad); color:#fff; }

/* single result */
.result{
  display:flex; align-items:center; gap:20px; margin-top:18px;
  padding:18px 20px; border-radius:16px;
  background:linear-gradient(135deg,#7c3df21f,#16161c 60%);
  border:1px solid var(--line-2);
}
.result.is-hidden{ display:none; }

.ring-wrap{ position:relative; width:52px; height:52px; flex:0 0 auto; }
.ring{ width:52px; height:52px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:3.4; }
.ring-bg{ stroke:#ffffff14; }
.ring-fg{ stroke:url(#g) ; stroke:var(--p-light); stroke-linecap:round;
  stroke-dasharray:119.38; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear, stroke .3s; }
.ring-num{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:14px; color:var(--muted); }

.code-block{ flex:1 1 auto; min-width:0; cursor:pointer; }
.code{
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(28px,4.5vw,40px); letter-spacing:.10em; color:#fff;
  line-height:1; white-space:nowrap;
  text-shadow:0 0 22px #7c3df255;
}
.code-label{ font-size:11px; color:var(--muted-2); margin-top:7px; letter-spacing:.04em; }

.copy-btn{
  flex:0 0 auto; font-family:var(--font); font-size:13.5px; font-weight:600; color:#fff;
  background:var(--grad); border:0; border-radius:11px; padding:11px 20px; cursor:pointer;
  box-shadow:0 8px 20px #7c3df23d; transition:.18s;
}
.copy-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px #7c3df255; }
.copy-btn:active{ transform:translateY(0); }
.copy-btn.ghost{ background:#ffffff0d; color:var(--muted); box-shadow:none; border:1px solid var(--line-2); }
.copy-btn.ghost:hover{ background:#ffffff17; color:#fff; transform:none; }

/* следующий код */
.next{
  margin-top:14px; text-align:center; font-size:13px; color:var(--muted-2);
}
.next.is-hidden{ display:none; }
.next b{
  font-family:var(--font-mono); font-weight:600; font-size:16px; letter-spacing:.06em;
  color:var(--muted); cursor:pointer; padding:2px 8px; border-radius:7px;
  background:#ffffff0a; border:1px solid var(--line); transition:.15s;
}
.next b:hover{ color:#fff; background:#ffffff17; border-color:var(--line-2); }
.next span{ color:var(--muted); }

.err{
  margin-top:16px; padding:12px 16px; border-radius:12px; font-size:13px;
  background:#ff4d4d14; border:1px solid #ff4d4d40; color:#ff9d9d;
}
.err.is-hidden{ display:none; }

/* batch */
.batch-lead{ font-size:13px; color:var(--muted); margin:0 0 14px; }
.batch-lead code{ font-family:var(--font-mono); background:#ffffff0f; padding:1px 6px; border-radius:6px; color:var(--p-light); }
.field-area{ margin-bottom:14px; }
.batch-bar{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.batch-count{ margin-left:auto; font-size:12px; color:var(--muted-2); }
.flash{ font-size:12px; color:#7ee0a0; opacity:0; transition:.2s; }
.flash.show{ opacity:1; }

.rows{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.row{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-radius:14px;
  background:#141419; border:1px solid var(--line);
  transition:.15s;
}
.row:hover{ border-color:var(--line-2); background:#17171e; }
.row.bad{ background:#ff4d4d0f; border-color:#ff4d4d33; }
.row-ring{ width:34px; height:34px; position:relative; flex:0 0 auto; }
.row-ring svg{ width:34px; height:34px; transform:rotate(-90deg); }
.row-ring circle{ fill:none; stroke-width:3; }
.row-ring .bg{ stroke:#ffffff12; }
.row-ring .fg{ stroke:var(--p-light); stroke-linecap:round; stroke-dasharray:97.39; transition:stroke-dashoffset 1s linear; }
.row-label{ font-size:13px; color:var(--muted); min-width:0; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-code{
  font-family:var(--font-mono); font-weight:600; font-size:23px; letter-spacing:.10em;
  color:#fff; cursor:pointer; user-select:all; white-space:nowrap;
}
.row-code:hover{ color:var(--p-light); }
.row.bad .row-code{ font-size:13px; color:#ff9d9d; letter-spacing:0; font-weight:400; cursor:default; }

/* time-sync note */
.time-note{
  display:none; text-align:center; margin-top:18px;
  font-size:12.5px; color:#7ee0a0;
  background:#7ee0a012; border:1px solid #7ee0a033; border-radius:12px;
  padding:9px 14px;
}
.time-note.show{ display:block; }

/* hand animation */
.hand{
  margin:18px auto 0; max-width:820px;
  display:flex; justify-content:center;
  pointer-events:none;
}
.hand video{
  width:min(300px,58vw); height:auto; display:block;
  filter:drop-shadow(0 24px 50px #7c3df23d);
}

/* footer */
.foot{
  margin:26px auto 0; max-width:820px; display:flex; flex-wrap:wrap; gap:9px;
  font-size:12px; color:var(--muted-2); align-items:center; justify-content:center;
}
.foot .dot{ opacity:.4; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--grad); color:#fff; font-size:13.5px; font-weight:600;
  padding:11px 22px; border-radius:999px; box-shadow:0 12px 30px #7c3df255;
  opacity:0; pointer-events:none; transition:.24s; z-index:20;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------------- responsive ---------------- */
@media (max-width:720px){
  .main{ padding:18px 16px 32px; }
  .hero{ margin:36px 0 24px; }
  .result{ flex-wrap:wrap; }
  .copy-btn{ width:100%; }
}
@media (max-width:440px){
  .rail{ display:none; }
  .main{ margin-left:0; }
}