:root{
  --bg:#000;
  --grid:#121212;
  --card:#0b0b0b;
  --muted:#9aa0a6;
  --text:#f8f9fa;
  --accent:#b8ff2c;
  --danger:#ff4d4d;
  --ok:#76ff7a;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.bg-grid{
  --grid-minor: rgba(255,255,255,0.06);
  --grid-major: rgba(255,255,255,0.12);
  --cell: 21px;          /* size of small cell */
  --major-step: 4;       /* every 4th line is major */
  background-color: var(--bg);
  background: #000;
  background-attachment: fixed;
  background-size: auto;
  background-position: top left;
}
.page-wrap{min-height:100%;display:flex;flex-direction:column}
.public-wrap{min-height:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 24px}
.logo{height:38px}
.logo.small{height:28px}
.brand{display:inline-flex;align-items:center}
.auth-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:24px 24px}
@media(max-width:900px){.auth-layout{grid-template-columns:1fr}}
.hero-copy h1{font-size:40px;margin:0 0 8px}
.sub{color:var(--muted);margin-top:6px}
.bullets{margin:18px 0 0 0;padding:0;list-style:none;display:grid;gap:8px}
.bullets li::before{content:'▸ ';color:var(--accent)}
.card{background: #000;border:1px solid #1a1a1a;border-radius:18px;box-shadow:var(--shadow);padding:22px}
.auth-card{max-width:520px;margin:0 auto;width:100%}
.form{display:grid;gap:14px}
label{display:grid;gap:8px;font-weight:600}
input,select{
  background:#0b0b0b;border:1px solid #2a2a2a;color:var(--text);
  padding:12px 14px;border-radius:12px;outline:none;transition:.2s;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,255,44,.15)}
small{color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}
.handle-row{display:flex;gap:8px;align-items:center}
.handle-row .muted{font-size:.95rem}
.terms{align-items:center;grid-auto-flow:column;justify-content:start;gap:10px}
.btn{
  border:1px solid #2a2a2a;border-radius:12px;background:#111; color:var(--text);
  padding:12px 16px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:none
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#000;border-color:transparent}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;border-radius:10px}
.hidden{display:none !important}
.toast{position:fixed;bottom:24px;right:24px;background:#0b0b0b;border:1px solid #2a2a2a;
  padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);
  transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.foot{padding:32px;text-align:center;color:var(--muted)}

.content{padding:24px;max-width:1100px;margin:0 auto}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
@media(max-width:980px){.two-col{grid-template-columns:1fr} .sticky{position:static}}
.list{display:grid;gap:12px;margin:16px 0}
.add-row .add-form{display:grid;grid-template-columns:180px 1fr auto;gap:10px}
@media(max-width:720px){.add-row .add-form{grid-template-columns:1fr}}
.row{
  display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;
  background:#0b0b0b;border:1px solid #252525;padding:14px;border-radius:12px
}
.drag{cursor:grab;color:var(--muted)}
.badge{font-size:.8rem;padding:4px 8px;border-radius:999px;border:1px solid #2a2a2a;color:var(--muted)}
.badge.ok{color:#003d00;background: #000;border-color:transparent}
.badge.pending{color:#9aa;text-transform:uppercase}
.badge.unv{color:#bbb}
.actions{display:flex;gap:8px}
.item-title{font-weight:700}
.preview{border:1px dashed #2a2a2a;border-radius:14px;padding:14px;min-height:120px}
.hstack{display:flex;gap:10px;align-items:center}
.mt{margin-top:12px}

.modal{border:0;border-radius:16px;padding:0;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-card{background:#0c0c0c;border:1px solid #222;border-radius:16px;padding:18px;min-width:320px;max-width:520px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.code{font-family:ui-monospace,monospace;background:#050505;border:1px solid #2a2a2a;padding:10px 12px;border-radius:12px;margin:10px 0;color:var(--accent);font-weight:800;letter-spacing:.6px}

.public-header{display:flex;justify-content:center;padding:24px}
.public-profile{max-width:680px;margin:12px auto;padding:24px}
.public-card{background: #000;border:1px solid #1a1a1a;border-radius:18px;box-shadow:var(--shadow);padding:22px;text-align:center}
.public-name{font-size:26px;font-weight:800;margin:6px 0 2px}
.public-handle{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.link-list{display:grid;gap:10px;margin:12px 0}
.link-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;border:1px solid #2a2a2a;background:#0c0c0c;color:var(--text);text-decoration:none;font-weight:700}
.link-btn:hover{transform:translateY(-1px)}
.platform{opacity:.85}
.small-note{margin-top:8px;color:var(--muted);font-size:.9rem}


.link {
  color: #cfd3d6;
  text-decoration: none;
  transition: color .2s ease;
}
.link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Password visibility toggle */
label{position:relative}
.eye-btn{
  position:absolute; right:10px; top:36px;
  background:transparent; border:0; color:var(--muted);
  cursor:pointer; font-size:16px; line-height:1; padding:6px;
  border-radius:8px;
}
.eye-btn:hover{ color:var(--accent); }

.showpw{display:flex;align-items:center;gap:8px;margin-top:-6px;color:var(--muted);font-weight:500}
input.invalid{border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,77,77,.15)}
.status-ok{color: var(--ok)}
.status-bad{color: var(--danger)}

/* Show/Hide password (CSS only) */
.pw-wrap .pw-text{display:none}
#showPwd:checked ~ .pw-wrap .pw-pass{display:none}
#showPwd:checked ~ .pw-wrap .pw-text{display:block}
#showLoginPwd:checked ~ .pw-wrap-login .pw-pass{display:none}
#showLoginPwd:checked ~ .pw-wrap-login .pw-text{display:block}


/* Subtle inline Show/Hide inside the field */
.pw-wrap{ position:relative; display:flex; align-items:center; gap:10px; width:100%; max-width:560px; }
.pw-wrap input[type="password"], .pw-wrap input[type="text"]{ padding-right:12px; flex:1; }
.pw-toggle{ background:transparent; border:0; color:var(--muted); font-size:.9rem; cursor:pointer; padding:4px 8px; border-radius:8px; }
.pw-toggle:hover{ color:var(--accent); }
.pw-text{ display:none; }

.pw-status{margin-top:6px;font-size:.9rem}
.pw-status.bad{color:var(--danger)}
.pw-status.ok{color:var(--ok)}

.field-status{margin-top:6px;font-size:.9rem}
.field-status.bad{color:var(--danger)}
.field-status.ok{color:var(--ok)}

.pw-checklist{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0 0;padding:0;list-style:none;color:var(--muted);font-size:.9rem}
.pw-checklist li{position:relative;padding-left:18px}
.pw-checklist li::before{content:'•';position:absolute;left:0;top:0;opacity:.4}
.pw-checklist li.ok{color:var(--ok)}
.pw-checklist li.ok::before{content:'✓';opacity:1}

/* Lock hero position while form grows */
.hero-copy{min-height:500px;}