/* Signed-out pages (sign-in, install, 403): same brand as the app shell */
:root { --primary:#5B4FE5; --primary-dark:#3B2FC9; --primary-light:#EEEAFF; --text:#0D0E1A; --text-muted:#5A607A; --border:#C8CCDC; --surface:#F3F4F8; --danger:#B42318; --danger-tint:#FFF1F2; --success:#136B45; --success-tint:#ECFDF5; }
* { box-sizing:border-box; }
body { font-family:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:linear-gradient(135deg,#3B2FC9 0%,#5B4FE5 55%,#0DBED6 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0; padding:24px 16px; color:var(--text); font-size:15px; line-height:1.5; }
.auth-card { background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:410px; box-shadow:0 20px 60px rgba(13,14,26,.25); }
.auth-head { text-align:center; margin-bottom:22px; }
.auth-logo { height:34px; width:auto; margin:0 auto 14px; display:block; }
.auth-mark { width:56px; height:56px; border-radius:14px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:30px; }
.auth-head h1 { font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; font-size:22px; margin:0; line-height:1.3; }
.auth-head p { font-size:14px; color:var(--text-muted); margin:4px 0 0; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.field input { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:9px; font-size:15px; font-family:inherit; color:var(--text); background:#fff; }
.field input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,79,229,.2); }
.check { display:flex; gap:8px; align-items:flex-start; font-size:14px; margin:4px 0 16px; cursor:pointer; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:50px; }
.pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:42px; height:40px; border:0; background:none; color:var(--text-muted); border-radius:8px; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; }
.pw-toggle:hover, .pw-toggle:focus-visible { color:var(--primary); background:var(--primary-light); outline:none; }
.btn-submit { width:100%; padding:12px; background:var(--primary); color:#fff; border:none; border-radius:9px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-submit:hover { background:var(--primary-dark); }
.msg { padding:10px 14px; border-radius:9px; font-size:14px; margin-bottom:16px; display:flex; gap:8px; align-items:flex-start; }
.msg-error { background:var(--danger-tint); color:var(--danger); }
.msg-success { background:var(--success-tint); color:var(--success); }
.help { margin-top:18px; padding:12px 14px; background:var(--surface); border-radius:10px; font-size:14px; color:var(--text-muted); display:flex; gap:8px; }
.vendor { text-align:center; margin-top:20px; font-size:12px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:6px; }
.vendor img { height:16px; width:auto; }
.demo-box { margin:0 0 20px; padding:14px 14px 12px; border-radius:14px; border:2px solid var(--primary); background:linear-gradient(135deg,var(--primary-light) 0%,#fff 100%); box-shadow:0 6px 20px rgba(91,79,229,.14); }
.demo-head { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.demo-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--primary); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; }
.demo-badge i { width:8px; height:8px; border-radius:50%; background:#34d399; display:inline-block; animation:demoPulse 1.6s ease-in-out infinite; }
.demo-title { font-size:15px; font-weight:800; color:var(--text); }
.demo-sub { margin:0 0 10px; text-align:center; font-size:13px; color:var(--text-muted); }
.demo-grid { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
.demo-btn { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:11px 6px 10px; border:1px solid var(--border); border-radius:11px; background:#fff; color:var(--text); font:inherit; cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s; }
.demo-btn .demo-ico { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary); font-size:19px; transition:inherit; }
.demo-btn .demo-txt { display:flex; flex-direction:column; align-items:center; gap:2px; }
.demo-btn b { font-size:13px; line-height:1.25; }
.demo-btn .demo-hint { font-size:11px; line-height:1.3; color:var(--text-muted); }
.demo-btn:hover, .demo-btn:focus-visible { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px rgba(91,79,229,.3); outline:none; }
.demo-btn:hover .demo-hint, .demo-btn:focus-visible .demo-hint { color:rgba(255,255,255,.85); }
.demo-btn:hover .demo-ico, .demo-btn:focus-visible .demo-ico { background:rgba(255,255,255,.2); color:#fff; }
.demo-more { margin-top:8px; }
.demo-more summary { cursor:pointer; text-align:center; font-size:13px; font-weight:700; color:var(--primary-dark); padding:6px; list-style:none; }
.demo-more summary::-webkit-details-marker { display:none; }
.demo-more summary::after { content:' \25BE'; }
.demo-more[open] summary::after { content:' \25B4'; }
.demo-more .demo-grid { margin-top:4px; }
.demo-more .demo-btn { flex-direction:row; justify-content:flex-start; text-align:start; gap:8px; padding:7px 9px; }
.demo-more .demo-btn .demo-ico { width:26px; height:26px; font-size:15px; flex-shrink:0; }
.demo-more .demo-btn .demo-txt { align-items:flex-start; }
.demo-more .demo-btn b { font-size:12.5px; }
.demo-note { margin:9px 0 0; font-size:11px; color:var(--text-muted); text-align:center; line-height:1.5; }
@keyframes demoPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.7); } }
@media (prefers-reduced-motion:reduce) { .demo-badge i { animation:none; } .demo-btn { transition:none; } }
@media (max-width:440px) { .demo-grid { grid-template-columns:1fr; } .demo-btn { flex-direction:row; text-align:start; gap:10px; padding:9px 10px; } .demo-btn .demo-ico { flex-shrink:0; } .demo-btn .demo-txt { align-items:flex-start; } }