:root{
    --bg:#faf9f7;
    --surface:#ffffff;
    --card:#f5f2ec;
    --card-2:#ece7dd;
    --ink:#1c1917;
    --ink-soft:#44403c;
    --muted:#78716c;
    --muted-soft:#a8a29e;
    --border:rgba(28,25,23,0.08);
    --border-strong:rgba(28,25,23,0.16);
    --amber:#f59e0b;
    --amber-dk:#d97706;
    --amber-soft:rgba(245,158,11,0.12);
    --sans:'Albert Sans',system-ui,sans-serif;
    --head:'Outfit',system-ui,sans-serif;
    --ring:0 0 0 3px rgba(245,158,11,0.15);
    --shadow-card:0 1px 2px rgba(28,25,23,0.04),0 16px 40px -20px rgba(28,25,23,0.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
    font-family:var(--sans);
    background-color:var(--bg);
    background-image:radial-gradient(640px 320px at 50% -80px,rgba(245,158,11,0.08),transparent 70%);
    background-repeat:no-repeat;
    color:var(--muted);
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
a{text-decoration:none;color:inherit;}
[x-cloak]{display:none !important;}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;height:60px;}
.topbar:has(.topbar-right.is-open){background:#fff;border-bottom:1px solid var(--border);}
.topbar-logo{display:flex;align-items:center;gap:0.55rem;font-family:var(--head);font-weight:700;font-size:0.95rem;color:var(--ink);letter-spacing:-0.01em;}
.topbar-logo-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(155deg,#33302d,var(--ink));display:flex;align-items:center;justify-content:center;box-shadow:0 1px 1px rgba(255,255,255,0.08) inset,0 2px 6px rgba(28,25,23,0.18);}
.topbar-logo-mark span{color:#fff;font-family:var(--head);font-weight:800;font-size:0.82rem;line-height:1;letter-spacing:-0.02em;}
.mobile-menu-btn{display:none;}
.topbar-right{display:flex;align-items:center;gap:1.1rem;font-size:0.84rem;}
.topbar-link{font-weight:500;color:var(--muted);transition:color .15s;}
.topbar-link:hover{color:var(--ink);}
.topbar-btn{background:var(--ink);color:#fff;padding:0.38rem 1rem;border-radius:999px;font-weight:600;font-size:0.8rem;transition:opacity .15s;}
.topbar-btn:hover{opacity:0.85;color:#fff;}

/* ── Shell ──────────────────────────────────────────────────── */
.shell{flex:1;display:flex;align-items:center;justify-content:center;padding:5.25rem 1.25rem 3rem;}
.inner{width:100%;max-width:396px;}

/* ── Card ───────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.75rem 1.65rem;box-shadow:var(--shadow-card);animation:card-rise .45s cubic-bezier(.16,1,.3,1);}
@keyframes card-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.card-head{text-align:center;margin-bottom:1.3rem;}
.card-title{font-family:var(--head);font-size:1.3rem;font-weight:700;color:var(--ink);letter-spacing:-0.025em;margin-bottom:0.2rem;}
.card-sub{font-size:0.82rem;color:var(--muted);}

/* ── Fields ─────────────────────────────────────────────────── */
.field{margin-bottom:0.85rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;margin-bottom:0.85rem;}
.label{display:block;font-size:0.75rem;font-weight:600;color:var(--ink-soft);margin-bottom:0.3rem;}
.label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.3rem;}
.label-row .label{margin-bottom:0;}
.forgot{font-size:0.72rem;font-weight:500;color:var(--muted);transition:color .15s;}
.forgot:hover{color:var(--amber-dk);}

.input-wrap{position:relative;display:flex;align-items:center;}
.input-icon{position:absolute;left:0.75rem;width:15px;height:15px;color:var(--muted-soft);pointer-events:none;}
.input-toggle{position:absolute;right:0.45rem;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:none;background:transparent;color:var(--muted-soft);cursor:pointer;transition:color .15s,background .15s;}
.input-toggle:hover{color:var(--ink);background:rgba(28,25,23,0.05);}
.input-toggle svg{width:15px;height:15px;display:block;}

.input{width:100%;padding:0.55rem 0.75rem;background:#fff;border:1px solid var(--border-strong);border-radius:0.6rem;font-family:var(--sans);font-size:0.875rem;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;}
.input.has-icon{padding-left:2.2rem;}
.input.has-toggle{padding-right:2.2rem;}
.input:hover{border-color:rgba(28,25,23,0.26);}
.input:focus{border-color:var(--amber);box-shadow:var(--ring);}
.input::placeholder{color:#c4bcb2;}
.err{font-size:0.72rem;color:#dc2626;margin-top:0.28rem;}

/* ── Checkbox ───────────────────────────────────────────────── */
.check-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;cursor:pointer;user-select:none;}
.check-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex-shrink:0;border-radius:5px;border:1px solid var(--border-strong);background:#fff;cursor:pointer;transition:background .15s,border-color .15s;}
.check-row input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:10px 10px;background-repeat:no-repeat;background-position:center;}
.check-row input[type="checkbox"]:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.check-row span,.check-row label{font-size:0.78rem;color:var(--muted);cursor:pointer;}

/* ── Buttons ────────────────────────────────────────────────── */
.submit{width:100%;padding:0.6rem 1.25rem;background:var(--ink);color:#fff;border:none;border-radius:0.6rem;font-family:var(--sans);font-size:0.875rem;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(28,25,23,0.12);transition:background .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.submit:hover{background:#33302d;}
.submit:disabled{opacity:0.55;cursor:not-allowed;}

.oauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:0.55rem;padding:0.55rem 1rem;background:#fff;color:var(--ink);border:1px solid var(--border-strong);border-radius:0.6rem;font-family:var(--sans);font-size:0.85rem;font-weight:600;transition:border-color .15s,background .15s,opacity .15s;}
.oauth-btn:hover{border-color:rgba(28,25,23,0.26);background:#fcfcfb;color:var(--ink);}
.oauth-btn.is-loading{pointer-events:none;opacity:0.72;}
.oauth-btn svg{width:16px;height:16px;flex-shrink:0;}

.btn-spinner{width:0.9rem;height:0.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;display:inline-block;animation:spin .65s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.divider{display:flex;align-items:center;gap:0.7rem;margin:1rem 0;font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-soft);}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

.card-footer{text-align:center;font-size:0.78rem;color:var(--muted);margin-top:1.2rem;}
.card-footer a{font-weight:600;color:var(--ink);}
.card-footer a:hover{color:var(--amber-dk);}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:720px){
    .shell{padding:4.75rem 1rem 2rem;}
    .card{padding:1.5rem 1.25rem;}
    .mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:transparent;border:1px solid var(--border);border-radius:0.5rem;cursor:pointer;color:var(--muted);transition:color .15s,border-color .15s;}
    .mobile-menu-btn:hover{color:var(--ink);border-color:var(--border-strong);}
    .mobile-menu-btn svg{width:18px;height:18px;display:block;}
    .topbar-right{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:1.25rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.05);gap:0.85rem;}
    .topbar-right.is-open{display:flex;}
    .topbar-link{text-align:center;padding:0.4rem 0;}
    .topbar-btn{text-align:center;width:100%;justify-content:center;display:flex;}
}

/* ── Language switcher (kept for compatibility) ──────────────── */
.lang-btn{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.85rem;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:0.35rem 0.75rem;cursor:pointer;transition:all 0.2s;box-shadow:0 1px 2px rgba(0,0,0,0.02);}
.lang-btn:hover{background:var(--surface);border-color:var(--border-strong);}
.lang-dropdown{position:absolute;top:calc(100% + 0.5rem);right:0;width:8rem;border-radius:1rem;border:1px solid var(--border);background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 10px 25px -5px rgba(0,0,0,0.1);z-index:50;padding:0.35rem;}
.lang-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:0.6rem;font-size:0.85rem;font-weight:500;color:var(--muted);transition:all 0.2s;text-decoration:none;}
.lang-item:hover{background:var(--surface);color:var(--ink);}
.lang-item.active{background:var(--ink);color:#fff;}