*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:var(--brand-public-on-dark);--gp:color-mix(in srgb, var(--accent) 12%, transparent);--gb:color-mix(in srgb, var(--accent) 25%, transparent);
  --bg:#0d0f12;--bg2:#131619;--bg3:#1a1e22;
  --bo:rgba(255,255,255,.14);--tx:#f0ede8;--t2:#b3b0a8;--t3:#8d8a83;
  --gn:#4caf82;--rd:#e05c5c;
}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,color-mix(in srgb, var(--accent) 6%, transparent) 0%,transparent 70%);pointer-events:none}

/* ---- auth card ---- */
.card{width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--bo);border-radius:20px;padding:36px;position:relative;overflow:hidden;text-align:center}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* ---- logo ---- */
.logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:28px}
.logo-text{font-family:"Syne",sans-serif;font-weight:800;font-size:20px;color:var(--tx)}.logo-text span{color:var(--accent)}

/* ---- tabs (login page) ---- */
.tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:28px;gap:4px}
.tab-btn{flex:1;padding:9px;text-align:center;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;color:var(--t2);transition:all .2s;border:none;background:none;font-family:"DM Sans",sans-serif}
.tab-btn.on{background:var(--bg2);color:var(--accent);border:1px solid var(--gb)}

/* ---- form fields ---- */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;text-align:left}
.field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--t3)}
.field input,.field textarea{background:var(--bg3);border:1px solid var(--bo);border-radius:8px;color:var(--tx);font-family:"DM Sans",sans-serif;font-size:14px;padding:10px 12px;width:100%;transition:border-color .15s;resize:none}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gb)}
.field input::placeholder,.field textarea::placeholder{color:var(--t3)}

/* ---- buttons ---- */
.btn-primary{width:100%;padding:12px;background:var(--accent);color:#000;font-family:"Syne",sans-serif;font-size:14px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .15s;margin-top:4px;letter-spacing:.3px}
.btn-primary:hover{background:#f0c45a;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---- feedback ---- */
.err{background:rgba(224,92,92,.1);border:1px solid rgba(224,92,92,.25);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--rd);display:none;text-align:left}
.err.on{display:block}
.ok-msg{background:rgba(76,175,130,.1);border:1px solid rgba(76,175,130,.25);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--gn);display:none;line-height:1.5;text-align:left}
.ok-msg.on{display:block}

/* ---- notice box ---- */
.notice{background:var(--gp);border:1px solid var(--gb);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:4px;text-align:left}
.notice strong{color:var(--accent)}

/* ---- panels ---- */
.panel{display:none}.panel.on{display:block}

/* ---- spinner ---- */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.3);border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- approve page ---- */
.approve-icon{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb, var(--accent) 13%, transparent);border:1px solid color-mix(in srgb, var(--accent) 27%, transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px}
.approve-heading{font-family:"Syne",sans-serif;font-size:20px;font-weight:800;margin-bottom:10px;color:var(--accent)}
.approve-body{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:24px}
.approve-link{display:inline-block;padding:10px 22px;background:var(--accent);color:#000;font-family:"Syne",sans-serif;font-weight:700;font-size:13px;border-radius:10px;text-decoration:none}
.approve-link:hover{background:#f0c45a}

.logo .brand-mark{color:var(--brand-public-on-dark)}