/* login.css — tema ThemeV2 applicato alla pagina di login reale.
   Palette derivata 1:1 da ThemeV2/Key Manager Login.dc.html (canvas Claude Design originale),
   stessi token di dashboard.css per coerenza visiva tra le due pagine. */

:root {
  --bg: #07070a;
  --surface: #101015;
  --surface-2: #0e0e13;
  --card-bg: rgba(14, 14, 19, .82);

  --border: rgba(255, 255, 255, .08);
  --border-mid: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .12);
  --border-hover: rgba(255, 255, 255, .26);

  --text: #e9e9ec;
  --text-2: #d4d4da;
  --text-muted: #9a9aa4;
  --text-faint: #8a8a94;
  --text-faint-2: #84848e;
  --text-faint-3: #7c7c86;
  --text-ghost: #6e6e78;
  --text-ghost-2: #5c5c66;

  --accent: oklch(0.62 0.19 264);
  --accent-strong: oklch(0.60 0.20 264);
  --accent-hover: oklch(0.68 0.18 264);
  --accent-light: oklch(0.72 0.16 264);
  --accent-lighter: oklch(0.76 0.15 264);

  --cyan: oklch(0.76 0.11 212);

  --green: oklch(0.74 0.16 150);
  --green-fg: oklch(0.84 0.13 150);

  --red: oklch(0.70 0.18 25);
  --red-fg: #e3cfcf;

  --mono: 'JetBrains Mono', ui-monospace, "Cascadia Code", Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  cursor: default;
  user-select: none;
}

/* Solo i campi del form restano selezionabili/editabili: il resto è chrome decorativo,
   non contenuto — niente cursore a I su testi, badge, icone, ecc. */
input, textarea {
  cursor: text;
  user-select: text;
}

a { color: var(--accent-light); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-lighter); }

button { cursor: pointer; }
button:disabled { cursor: default; }

input, button { font-family: inherit; }
input::placeholder { color: var(--text-ghost); }

@keyframes pulseDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes driftGlow {
  0%, 100% { opacity: .5; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: .85; transform: translate3d(-2%, 2%, 0) scale(1.08); }
}
@keyframes markFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cometSweep { 0% { left: -45%; } 55% { left: 105%; } 100% { left: 105%; } }
@keyframes scanSweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(2400%); } }

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 18% 12%, #14142a 0%, #0a0a12 42%, #07070a 100%);
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.glow-a, .glow-b {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.glow-a {
  width: 820px; height: 820px; left: -220px; top: -300px;
  background: radial-gradient(circle, oklch(0.62 0.19 264 / .22) 0%, transparent 62%);
  filter: blur(30px);
  animation: driftGlow 18s ease-in-out infinite;
}
.glow-b {
  width: 640px; height: 640px; right: -180px; bottom: -260px;
  background: radial-gradient(circle, oklch(0.66 0.14 212 / .16) 0%, transparent 62%);
  filter: blur(34px);
  animation: driftGlow 24s ease-in-out infinite reverse;
}
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255, 255, 255, .028) 100%);
  background-size: 100% 3px;
}

.lang-switch {
  position: absolute; top: 34px; right: 24px; z-index: 4;
  display: flex; align-items: center; gap: 9px;
}
.lang-label {
  font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--text-faint-3);
}
.lang-group {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--border-mid); border-radius: 9px;
  background: rgba(14, 14, 19, .7); backdrop-filter: blur(10px);
}
.lang-btn {
  border: 0; cursor: pointer; border-radius: 6px; padding: 6px 10px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em;
  background: transparent; color: var(--text-muted);
}
.lang-btn:hover { color: #fff; }
.lang-btn.active { background: var(--accent-strong); color: #fff; }

.layout {
  position: relative; z-index: 2; min-height: 100vh;
  display: grid; grid-template-columns: 1.12fr 1fr;
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .hero { display: none; }
}

.hero {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px 48px 34px; min-width: 0;
}
.hero-brand { display: flex; align-items: center; gap: 11px; }
.hero-brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent-strong);
  display: grid; place-items: center; font: 600 13px/1 var(--mono); color: #fff;
}
.hero-brand-label {
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}

.hero-main { display: flex; flex-direction: column; gap: 26px; max-width: 660px; }
.hero-title-wrap { position: relative; display: flex; flex-direction: column; gap: 14px; }

.orbit { position: absolute; left: -4px; top: -118px; width: 236px; height: 236px; pointer-events: none; }
.orbit-ring-1, .orbit-ring-2 { position: absolute; border-radius: 50%; }
.orbit-ring-1 {
  inset: 0; border: 1px solid oklch(0.62 0.19 264 / .22);
  animation: orbitSpin 26s linear infinite;
}
.orbit-ring-2 {
  inset: 34px; border: 1px solid rgba(255, 255, 255, .07);
  animation: orbitSpinRev 40s linear infinite;
}
.orbit-dot-1 {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 12px var(--accent);
}
.orbit-dot-2 {
  /* Punto esatto sulla circonferenza dell'anello interno (raggio 50% del box):
     top/left = 50% ± 50%*cos/sin(angolo), poi il translate centra il pallino sul punto. */
  position: absolute; top: 97%; left: 33%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}

.hero-kicker {
  font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-light);
}
.hero-title {
  margin: 0; display: inline-block; width: max-content; max-width: 100%;
  font-size: clamp(34px, 6.2vw, 92px); line-height: .9; font-weight: 600; letter-spacing: -.045em;
  text-transform: uppercase;
  background: linear-gradient(96deg, #ffffff 0%, #dfe3ff 44%, var(--accent-hover) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff;
  text-shadow: 0 0 70px oklch(0.62 0.19 264 / .3);
  animation: markFloat 9s ease-in-out infinite;
}
.hero-tagline { margin: 0; max-width: 430px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; gap: 5px; }
.hero-stat-value { font: 600 19px/1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.hero-stat-label { font: 500 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint-2); }

.hero-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.hero-status { display: flex; align-items: center; gap: 7px; }
.hero-status-label { font: 500 9.5px/1 var(--mono); letter-spacing: .11em; color: var(--text-faint-2); }
.hero-build { font: 400 9.5px/1 var(--mono); letter-spacing: .06em; color: var(--text-faint-2); }
.hero-sep { font: 400 9.5px/1 var(--mono); color: var(--text-ghost); }

.panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 24px; min-width: 0;
}

.card {
  position: relative; width: 100%; max-width: 376px;
  border: 1px solid var(--border-mid); border-radius: 14px;
  background: var(--card-bg); backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.card-top-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.62 0.19 264 / .8), transparent);
}
.card-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(180deg, oklch(0.62 0.19 264 / .12), transparent);
  animation: scanSweep 9s linear infinite; pointer-events: none;
}
.card-body { position: relative; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 20px; }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.card-subtitle { font: 400 10.5px/1.5 var(--mono); color: var(--text-faint-2); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label-row {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--text-faint);
}
.field-label-row a { font: 400 10px/1 var(--mono); letter-spacing: .04em; }
.field input {
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--text); font-size: 12.5px; padding: 11px 12px; outline: 0; width: 100%;
}
.field input:focus { border-color: var(--accent); background: #12121a; }
.field input.password { letter-spacing: .1em; }

.trust-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trust-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.trust-box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border-hover); background: transparent; }
.trust-box.on { background: var(--accent-strong); border-color: var(--accent-strong); }
.trust-label { font-size: 11.5px; color: var(--text-5, #a6a6b0); }

.alert {
  display: flex; align-items: center; gap: 9px; border-radius: 9px; padding: 10px 11px;
}
.alert-error {
  border: 1px solid oklch(0.70 0.18 25 / .38); background: oklch(0.70 0.18 25 / .08);
}
.alert-error .alert-dot { background: var(--red); }
.alert-error .alert-text { font-size: 11.5px; color: var(--red-fg); line-height: 1.4; }
.alert-success {
  border: 1px solid oklch(0.74 0.16 150 / .35); background: oklch(0.74 0.16 150 / .07);
}
.alert-success .alert-dot { background: var(--green); animation: pulseDot 1.4s ease-in-out infinite; }
.alert-success .alert-text { font: 500 10.5px/1.4 var(--mono); color: var(--green-fg); }
.alert-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.alert[hidden] { display: none; }

.btn-submit {
  border: 0; border-radius: 9px; padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; background: var(--accent-strong); color: #fff;
  box-shadow: 0 12px 30px -14px oklch(0.60 0.20 264 / .9);
}
.btn-submit:hover:not(:disabled) { filter: brightness(1.08); }
.btn-submit:disabled { cursor: default; background: oklch(0.42 0.11 264); }
.btn-submit.done { background: var(--green); color: #06130c; }

.card-footer {
  border-top: 1px solid var(--border); background: rgba(9, 9, 13, .6);
  padding: 12px 26px; display: flex; align-items: center; gap: 8px;
}
.card-footer-text { font: 400 9.5px/1.5 var(--mono); color: var(--text-faint-3); }

.market-card {
  position: relative; width: 100%; max-width: 376px; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--border-mid); border-radius: 14px;
  background: linear-gradient(120deg, rgba(14, 14, 19, .82) 0%, oklch(0.62 0.19 264 / .14) 100%);
  backdrop-filter: blur(14px); padding: 14px 16px; text-decoration: none;
}
.market-card:hover { border-color: oklch(0.62 0.19 264 / .55); }
.market-comet {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: cometSweep 6s ease-in-out infinite; pointer-events: none;
}
.market-orb {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--accent-light) 0%, oklch(0.42 0.16 264) 62%, oklch(0.28 0.10 264) 100%);
  box-shadow: 0 0 18px oklch(0.62 0.19 264 / .55), inset 0 0 6px rgba(255, 255, 255, .25);
}
.market-orb-ring {
  position: absolute; left: -8px; top: 50%; width: 50px; height: 9px; border-radius: 50%;
  border: 1px solid oklch(0.76 0.11 212 / .55); transform: translateY(-50%) rotate(-22deg);
}
.market-text { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.market-title { font-size: 12.5px; font-weight: 500; color: #ececf2; }
.market-meta { font: 400 9.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--text-faint); }
.market-arrow { position: relative; margin-left: auto; font: 500 13px/1 var(--mono); color: var(--accent-light); }

.support-text { margin: 2px 0 0; width: 100%; max-width: 376px; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }