/* ============================================================
   Ivoy Client — shared stylesheet
   Used by: index.html, dashboard.html
   ============================================================ */

:root{
  --bg:           #0b0710;
  --ink:          #f1eef5;
  --ink-dim:      #b3a9c0;
  --accent:       #9251C4;
  --accent-light: #c9a6e8;
  --accent-soft:  rgba(146, 81, 196, 0.22);
  --accent-line:  rgba(146, 81, 196, 0.40);
  --line:         rgba(241, 238, 245, 0.14);
  --line-soft:    rgba(241, 238, 245, 0.08);

  /* shared glass recipe — used by buy button, card and reset button */
  --glass-bg:     rgba(35, 22, 48, 0.34);
  --glass-sheen:  linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.005));
  --glass-border: rgba(241, 238, 245, 0.16);
  --glass-blur:   blur(14px);
  --glass-radius: 8px;
  --glass-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}

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

html, body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  overflow:hidden;
}

/* the dashboard may need to scroll on short screens */
body.dashboard{
  overflow-y:auto;
  overflow-x:hidden;
}

/* ---------- background stage (video on index, image on dashboard) ---------- */
.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#000;
}

.stage video,
.stage img{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(6px);
  transform:scale(1.06); /* hides the blurred edge fringe */
}

/* slow drift so the static panorama feels alive, like the looping video */
.stage img{
  animation:stage-drift 36s ease-in-out infinite alternate;
}

@keyframes stage-drift{
  from{ transform:scale(1.06) translateX(-1.2%); }
  to  { transform:scale(1.12) translateX( 1.2%); }
}

.veil{
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(11,7,16,0.20) 0%, rgba(11,7,16,0.58) 55%, rgba(11,7,16,0.90) 100%),
    linear-gradient(to bottom, rgba(11,7,16,0.78) 0%, rgba(11,7,16,0.15) 24%, rgba(11,7,16,0.15) 66%, rgba(11,7,16,0.88) 100%);
  pointer-events:none;
}

/* ---------- top nav ---------- */
.nav{
  position:fixed;
  top:26px; left:28px;
  display:flex;
  gap:10px;
  z-index:10;
}

.nav a{
  position:relative;
  padding:7px 4px;
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-dim);
  text-decoration:none;
  letter-spacing:0.01em;
  transition:color 0.15s ease;
}

.nav a::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:1px;
  height:1px;
  background:var(--accent-light);
  transition:right 0.2s cubic-bezier(.4,0,.2,1);
}

.nav a:hover{ color:var(--ink); }

.nav a:hover::after,
.nav a.active::after{ right:0; }

.nav a.active{ color:var(--ink); font-weight:600; }

/* ---------- headline ---------- */
.headline{
  position:fixed;
  top:11vh;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}

.headline h1{
  font-size:clamp(38px, 6.2vw, 68px);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--ink);
  text-shadow:0 4px 30px rgba(0,0,0,0.45);
}

.headline .rule{
  width:34px;
  height:2px;
  background:var(--accent);
  margin:18px auto;
}

.headline .sub{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.02em;
  color:var(--ink-dim);
}

.accent{ color:var(--accent); }

/* compact variant — used on the dashboard */
.headline--compact{
  position:static;
  transform:none;
}

.headline--compact h1{
  font-size:clamp(24px, 3.2vw, 34px);
  text-shadow:0 4px 24px rgba(0,0,0,0.45);
}

.headline--compact .rule{ margin:12px auto; }

/* ---------- buy section (index) ---------- */
.buy-wrap{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* primary CTA — solid fill, the one thing on the page that should pop */
.download-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 34px;
  font-family:'Space Grotesk', sans-serif;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.01em;
  color:#160c1f;
  background:var(--accent-light);
  border:1px solid var(--accent-light);
  border-radius:var(--glass-radius);
  text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 24px -8px rgba(146,81,196,0.55);
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.download-btn:hover:not(:disabled){
  background:#d9bbf0;
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 14px 30px -8px rgba(146,81,196,0.65);
  transform:translateY(-1px);
}

.download-btn:active:not(:disabled){ transform:translateY(0); }

.download-btn:focus-visible{ outline:2px solid var(--accent-light); outline-offset:3px; }

.download-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
  box-shadow:none;
}

.buy-hint{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-dim);
  opacity:0.6;
}

/* purple underscored invite link under the buy section */
.invite-link{
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  letter-spacing:0.02em;
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color 0.15s ease;
}

.invite-link:hover{
  color:var(--accent-light);
}

/* ---------- dashboard ---------- */
.dash-center{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:100px 24px 56px;
}

/* card + floating button grouped, small gap so the button floats just below the card */
.dash-col{
  width:min(400px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px; /* raised ~3px closer to the card */
}

.card{
  width:100%;
  background-color:var(--glass-bg);
  background-image:var(--glass-sheen);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}

.card-head{
  padding:20px 22px 18px;
  border-bottom:1px solid var(--line);
}

.card-name{
  margin-top:6px;
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.01em;
}

.card-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 22px;
  border-bottom:1px solid var(--line-soft);
}

.card-row:last-child{ border-bottom:none; }

.card-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.card-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  font-size:14px;
  font-weight:500;
  text-align:right;
}

.card-value.mono{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.02em;
}

.card-note{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.03em;
  color:var(--ink-dim);
}

.rank-badge{
  display:inline-block;
  padding:3px 10px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-light);
  background:rgba(146,81,196,0.16);
  border:1px solid var(--accent-line);
  border-radius:4px;
}

/* per-status rank badge colors */
.rank-badge--user,
.rank-badge--release{
  color:var(--ink-dim);
  background:rgba(241,238,245,0.08);
  border-color:var(--line);
}

.rank-badge--nightly{
  color:#9fc2ff;
  background:rgba(159,194,255,0.12);
  border-color:rgba(159,194,255,0.40);
}

.rank-badge--dev{
  color:var(--accent-light);
  background:rgba(146,81,196,0.16);
  border-color:var(--accent-line);
}

/* reset button — floating glass island below the card, spans the full card width */
.reset-btn{
  width:100%;
  padding:11px 0;
  font-family:'Space Grotesk', sans-serif;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink);
  background-color:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  cursor:pointer;
  transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height:1.2;
}

.reset-btn:hover{
  background-color:rgba(146,81,196,0.22);
  border-color:var(--accent-line);
  transform:translateY(-1px);
}

.reset-btn:active{ background-color:rgba(146,81,196,0.30); transform:translateY(0); }
.reset-btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }
.reset-btn:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }

/* ---------- small screens ---------- */
@media (max-width:520px){
  .nav{ top:16px; left:16px; gap:8px; }
  .nav a{ font-size:12px; }

  .headline{ top:9vh; padding:0 24px; width:100%; }
  .download-btn{ padding:12px 30px; font-size:14px; }

  .dash-center{ padding:92px 20px 40px; gap:22px; }
  .dash-col{ gap:10px; }
  .card-head{ padding:16px 18px 14px; }
  .card-row{ padding:12px 18px; }
  .card-name{ font-size:21px; }
  .reset-btn{ padding:13px 0; font-size:11px; }
}

/* ---------- registration form ---------- */
.reg-form{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:10px 12px;
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  color:var(--ink);
  background:rgba(11,7,16,0.45);
  border:1px solid var(--line);
  border-radius:6px;
  outline:none;
  transition:border-color 0.15s ease;
}

.field select{ cursor:pointer; }

/* keep the dropdown list dark instead of the OS default white */
.field select option{
  background:var(--bg);
  color:var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent-line);
}

.reg-msg{
  min-height:16px;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  color:var(--ink-dim);
}

.reg-msg.ok{ color:var(--accent-light); }
.reg-msg.err{ color:#ff8f8f; }

@media (max-width:520px){
  .reg-form{ padding:18px; gap:14px; }
}

/* pull the register card up — the headline + card group sits slightly low */
body.reg-page .dash-center{
  margin-top:-56px;
}

@media (max-width:520px){
  body.reg-page .dash-center{ margin-top:-40px; }
}

/* cross-links under the login/register forms */
.form-link{
  padding:0 22px 20px;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-dim);
}

.form-link a{
  color:var(--accent-light);
  text-decoration:none;
}

.form-link a:hover{ text-decoration:underline; }

/* logout button — reddish hover to stand out from reset */
.reset-btn--logout:hover{
  background-color:rgba(255,143,143,0.16);
  border-color:rgba(255,143,143,0.5);
}

/* ---------- HWID reset reason panel ---------- */
.reset-panel{
  width:100%;
  padding:18px;
  background-color:var(--glass-bg);
  background-image:var(--glass-sheen);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}

.reset-panel textarea{
  width:100%;
  padding:10px 12px;
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  color:var(--ink);
  background:rgba(11,7,16,0.45);
  border:1px solid var(--line);
  border-radius:6px;
  outline:none;
  resize:vertical;
  transition:border-color 0.15s ease;
}

.reset-panel textarea:focus{
  border-color:var(--accent-line);
}

.btn-row{
  display:flex;
  gap:10px;
}

.btn-row .reset-btn{ flex:1; }

.reset-btn--ghost{
  background:transparent;
  box-shadow:none;
}

/* ---------- developer tools (dev role only) ---------- */
.dev-zone{
  width:min(880px, 100%);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.dev-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:13px;
}

/* two fields sharing a row inside one of the dev cards */
.dev-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* generated keys: mono, one per line, scrolls when there are many */
.dev-output{
  margin:0 22px 20px;
  padding:12px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  line-height:1.7;
  letter-spacing:0.02em;
  color:var(--accent-light);
  background:rgba(11,7,16,0.45);
  border:1px solid var(--line);
  border-radius:6px;
  white-space:pre;
  overflow:auto;
  max-height:190px;
}

/* lookup results are .card-row's stacked inside the card */
#hwidOut{ border-top:1px solid var(--line); }
#hwidOut .card-row:last-child{ border-bottom:none; }

@media (min-width:780px){
  .dev-grid{ grid-template-columns:1fr 1fr; }
  .dev-card--wide{ grid-column:1 / -1; }
}

@media (max-width:520px){
  .dev-split{ grid-template-columns:1fr; }
}