/* Auth pages – Login / Register */
.auth-page { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:50px 20px; background:radial-gradient(ellipse at top,#161616 0%,#070707 60%); }
.auth-card { display:grid; grid-template-columns:1fr 1fr; max-width:920px; width:100%; background:#0f0f0f; border:1px solid #1f1f1f; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.55); }
.auth-side { background:linear-gradient(135deg,#FFD700 0%,#ffb800 100%); padding:50px 40px; color:#000; }
.auth-side h2 { font-size:30px; margin:0 0 14px; font-weight:800; }
.auth-side p { margin:0 0 24px; font-size:14px; line-height:1.6; }
.auth-perks { list-style:none; margin:0; padding:0; }
.auth-perks li { padding:9px 0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(0,0,0,.1); }
.auth-perks i { background:#000; color:#FFD700; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }

.auth-form { padding:50px 40px; background:#0f0f0f; }
.auth-form h1 { color:#fff; font-size:26px; margin:0 0 6px; }
.auth-sub { color:#888; font-size:13px; margin:0 0 24px; }
.auth-sub a { color:#FFD700; font-weight:600; }
.auth-error { background:rgba(239,68,68,.12); color:#fca5a5; padding:11px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; border:1px solid rgba(239,68,68,.25); }
.auth-fields label { display:block; color:#bbb; font-size:12px; margin:12px 0 6px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.auth-fields input { width:100%; background:#1a1a1a; border:1px solid #2a2a2a; color:#fff; padding:12px 14px; border-radius:8px; font-size:14px; }
.auth-fields input:focus { outline:none; border-color:#FFD700; }
.btn-auth { width:100%; background:#FFD700; color:#000; padding:13px; border:none; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-auth:hover { background:#ffe34d; }
.tiny { color:#666; font-size:12px; margin-top:14px; text-align:center; }

@media (max-width:760px){ .auth-card{ grid-template-columns:1fr; } .auth-side{ padding:30px 22px; } .auth-form{ padding:30px 22px; } }

/* Account dashboard */
.acc-wrap { max-width:1200px; margin:30px auto; padding:0 20px; display:grid; grid-template-columns:260px 1fr; gap:24px; }
.acc-side { background:#121212; border:1px solid #1f1f1f; border-radius:14px; padding:22px; position:sticky; top:130px; }
.acc-side .avatar { width:64px; height:64px; border-radius:50%; background:#FFD700; color:#000; font-size:24px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.acc-side h4 { color:#fff; margin:0; font-size:16px; }
.acc-side .em { color:#888; font-size:12px; margin-bottom:18px; }
.acc-side a { display:flex; align-items:center; gap:10px; padding:10px 12px; color:#ccc; font-size:13.5px; border-radius:8px; margin-bottom:4px; }
.acc-side a:hover, .acc-side a.active { background:#1a1a1a; color:#FFD700; }
.acc-side a i { width:18px; }
.acc-main { background:#121212; border:1px solid #1f1f1f; border-radius:14px; padding:28px; }
.acc-main h1 { color:#fff; font-size:22px; margin:0 0 6px; }
.acc-main .sub { color:#888; font-size:13px; margin:0 0 20px; }

@media (max-width:860px){ .acc-wrap{ grid-template-columns:1fr; } .acc-side{ position:static; } }

/* v27 colorful account skin */
.auth-page{background:linear-gradient(135deg,#fff1f2 0%,#fff7ed 30%,#ecfeff 62%,#eef2ff 100%)!important}
.auth-card{background:#fff!important;border:1px solid #dbeafe!important;box-shadow:0 30px 80px rgba(37,99,235,.16)!important}
.auth-side{background:linear-gradient(135deg,#fed7aa,#fde68a 42%,#a7f3d0)!important;color:#111827!important}
.auth-perks li{border-bottom-color:rgba(15,23,42,.10)!important;color:#111827!important}
.auth-perks i{background:linear-gradient(135deg,#2563eb,#22d3ee)!important;color:#fff!important}
.auth-form,.acc-side,.acc-main{background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border-color:#dbeafe!important;color:#111827!important}
.auth-form h1,.acc-side h4,.acc-main h1{color:#111827!important}
.auth-sub,.acc-side .em,.acc-main .sub,.tiny{color:#64748b!important}
.auth-sub a,.tiny a,.acc-side a:hover,.acc-side a.active{color:#2563eb!important}
.auth-fields label{color:#334155!important}
.auth-fields input{background:#fff!important;border-color:#bfdbfe!important;color:#111827!important}
.auth-fields input:focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.btn-auth{background:linear-gradient(135deg,#2563eb,#22d3ee,#10b981)!important;color:#fff!important;border:0!important}
.auth-form>a.btn-auth:nth-of-type(1){background:#fff!important;color:#111827!important;border:1px solid #dbeafe!important}
.auth-form>a.btn-auth:nth-of-type(2){background:linear-gradient(135deg,#fef3c7,#ccfbf1)!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important}
.auth-error{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important}
.acc-side .avatar{background:linear-gradient(135deg,#f59e0b,#22d3ee)!important;color:#111827!important}
.acc-side a{color:#334155!important}
.acc-side a:hover,.acc-side a.active{background:#eff6ff!important}

/* v28 no-yellow account skin */
.auth-page{background:radial-gradient(circle at 15% 15%,rgba(6,182,212,.16),transparent 30%),linear-gradient(135deg,#f8fbff,#ecfeff,#f5f3ff,#fdf2f8)!important}
.auth-side{background:linear-gradient(135deg,#dbeafe,#ccfbf1,#f5d0fe)!important;color:#0f172a!important}
.auth-perks i,.acc-side .avatar{background:linear-gradient(135deg,#06b6d4,#8b5cf6)!important;color:#fff!important}
.auth-sub a,.tiny a,.acc-side a:hover,.acc-side a.active,.auth-page a[style*="FFD700"]{color:#2563eb!important}
.auth-fields input:focus{border-color:#06b6d4!important;box-shadow:0 0 0 4px rgba(6,182,212,.14)!important}
.btn-auth{background:linear-gradient(135deg,#2563eb,#06b6d4,#14b8a6)!important;color:#fff!important;border:0!important}
.auth-form>a.btn-auth:nth-of-type(2),.auth-page a[style*="background:#1a1a1a"]{background:linear-gradient(135deg,#eef2ff,#ccfbf1)!important;color:#2563eb!important;border:1px solid #c7d2fe!important}