:root{--accent:#4C6EF5;--accent-2:#7c3aed;--muted:#6b7280;--bg:#f7fafc}
body { font-family: Poppins, Inter, system-ui, Arial, sans-serif; background:linear-gradient(180deg,#f4f6ff 0%, #f7fafc 60%); color:#0f172a; display:flex; align-items:flex-start; justify-content:center; min-height:100vh; padding:40px 16px; }
.container { width:100%; max-width:920px; }
.card { background:rgba(255,255,255,0.9); border-radius:16px; box-shadow:0 12px 30px rgba(15,23,42,0.08); padding:28px; position:relative; overflow:hidden }
.card:before{ content:''; position:absolute; right:-120px; top:-60px; width:360px; height:360px; background:radial-gradient(circle at 30% 30%, rgba(76,110,245,0.18), rgba(124,58,237,0.12)); transform:rotate(15deg); border-radius:45%; filter:blur(18px); z-index:0 }
h1{margin:0 0 6px 0; font-size:clamp(28px,4.5vw,48px); text-align:center; font-family:'Playfair Display', serif; font-weight:800; letter-spacing:1px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; color:transparent; z-index:1; position:relative; text-shadow:0 6px 18px rgba(76,110,245,0.06)}
.subtitle{ text-align:center; color:var(--muted); margin-top:6px; margin-bottom:18px; font-size:clamp(12px,1.6vw,16px); font-weight:500 }
.brand-logo{ display:none; }
@media (max-width:520px){ .brand-logo{ display:none; } }
.tabs { display:flex; gap:8px; margin-bottom:16px; position:relative; z-index:1 }
.tab { flex:1; padding:10px 12px; text-align:center; border-radius:8px; background:transparent; border:1px solid transparent; cursor:pointer; color:var(--muted) }
.tab.active{ background: linear-gradient(90deg,var(--accent),#7c3aed); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(76,110,245,0.15) }
form { display:block; }
.field { margin-bottom:12px }
label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px }
input { width:100%; padding:10px 12px; border:1px solid #e6edf3; border-radius:8px; box-sizing:border-box; font-size:14px }
.actions { display:flex; gap:8px; align-items:center }
button { background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer }
.btn-ghost{ background:transparent; color:var(--accent); border:1px solid #dbe7ff }
.msg { margin:8px 0; color:green; font-size:14px }
.err { color:#c00 }
#user-info{margin-top:12px}
.small{font-size:13px;color:var(--muted)}
[hidden]{display:none!important}
@media (max-width:520px){ .tabs{flex-direction:row} }
.link-btn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--accent-2)}
.link-row{margin-top:14px}
.panel-title{margin:0 0 6px;font-size:18px}
button:disabled{opacity:0.6;cursor:not-allowed}
.button-link{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-size:14px}