/* index.css — login/register page
   REPLACE your existing index.css with this file.
   Only additions: .label-hint, .code-wrap, .code-icon, .field-note
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;700;800&display=swap');

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

:root{
  --bg:#080810;
  --surface:#0f0f1a;
  --border:#1e1e30;
  --accent:#c8ff47;
  --accent2:#47c8ff;
  --text:#e2e2f0;
  --muted:#4a4a6a;
  --error:#ff4d6a;
  --mono:'Space Mono',monospace;
  --display:'Syne',sans-serif;
}

html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;overflow-y:auto;overflow-x:hidden}

body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(200,255,71,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,255,71,0.03) 1px,transparent 1px);
  background-size:48px 48px;
  animation:gridmove 20s linear infinite;
  pointer-events:none;
}
@keyframes gridmove{to{background-position:48px 48px}}

.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.35}
.orb1{width:400px;height:400px;background:rgba(200,255,71,.12);top:-100px;left:-100px;animation:float1 8s ease-in-out infinite}
.orb2{width:300px;height:300px;background:rgba(71,200,255,.1);bottom:-80px;right:-60px;animation:float2 10s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-30px)}}

.page{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px}

.logo-wrap{margin-bottom:32px;text-align:center;width:100%;max-width:380px}
.logo{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:.06em;display:inline-flex;align-items:center;gap:10px;justify-content:center}
.logo-img{height:42px;width:auto;object-fit:contain}
.logo .d{color:var(--accent)}
.logo .l{color:var(--text)}
.logo-sub{font-family:var(--mono);font-size:11px;letter-spacing:.25em;color:var(--muted);margin-top:6px;text-transform:uppercase}

.card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:32px;position:relative}
.card::before{content:'';position:absolute;top:-1px;left:32px;right:32px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

.tabs{display:flex;margin-bottom:28px;border-bottom:1px solid var(--border)}
.tab{flex:1;padding:10px;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.form{display:none;flex-direction:column;gap:16px}
.form.active{display:flex}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

/* ── NEW: label hint ── */
.label-hint{font-size:9px;letter-spacing:.04em;color:var(--muted);opacity:.6;text-transform:none}

.field input{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:10px 12px;color:var(--text);font-size:13px;outline:none;font-family:var(--mono);transition:border-color .15s}
.field input:focus{border-color:var(--accent)}
.field input::placeholder{color:var(--muted);opacity:.5}

/* ── NEW: invite code input wrapper ── */
.code-wrap{position:relative;display:flex;align-items:center}
.code-wrap input{flex:1;padding-right:38px}
.code-icon{position:absolute;right:12px;color:var(--muted);opacity:.5;pointer-events:none;display:flex;align-items:center}
.code-wrap input:focus + .code-icon{color:var(--accent);opacity:.8}

/* ── NEW: helper note below field ── */
.field-note{font-size:10px;color:var(--muted);opacity:.55;letter-spacing:.03em;line-height:1.5}

.btn-submit{margin-top:4px;padding:12px;width:100%;background:var(--accent);color:#080810;border:none;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:var(--mono);transition:opacity .15s}
.btn-submit:disabled{opacity:.4;cursor:not-allowed}

.msg{font-size:11px;text-align:center;min-height:16px;letter-spacing:.05em;color:var(--error)}
.msg.success{color:var(--accent2)}

.privacy-link-row{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.privacy-link{font-size:10px;color:var(--muted);text-decoration:none;letter-spacing:.08em;opacity:.6;transition:opacity .15s,color .15s}
.privacy-link:hover{color:var(--accent2);opacity:1}

.demo-cta-row{text-align:center;margin-top:16px}
.demo-cta-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;color:var(--muted);text-decoration:none;
  letter-spacing:.06em;opacity:.65;
  padding:8px 16px;border:1px solid var(--border);border-radius:20px;
  transition:opacity .15s,color .15s,border-color .15s;
}
.demo-cta-link:hover{opacity:1;color:var(--accent);border-color:rgba(200,255,71,.3)}

.version-line {
  text-align: center;
  margin-top: 12px;
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(200,255,71,.35);
  text-transform: uppercase;
}
.privacy-sep {
  color: var(--muted);
  margin: 0 2px;
}

/* ── Mobile portrait ── */
@media (max-width: 480px) {
  .page { padding: 24px 12px; justify-content: flex-start; padding-top: 48px; }
  .logo-wrap { max-width: 100%; }
  .logo { font-size: 32px; }
  .logo-img { height: 34px; }
  .logo-sub { font-size: 9px; letter-spacing: .18em; }
  .card { max-width: 100%; padding: 24px 18px; }
  .demo-cta-link { font-size: 10px; padding: 6px 14px; }
}

/* ── Landscape phone ── */
@media (max-height: 500px) {
  .page { justify-content: flex-start; padding-top: 16px; }
  .logo-wrap { margin-bottom: 16px; }
  .logo { font-size: 28px; }
  .logo-img { height: 28px; }
  .card { padding: 20px; }
}