@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root { --canvas:#f7f0e6; --paper:#fffaf2; --soft:#efe3d2; --ink:#30251e; --muted:#716459; --line:#dfd1c0; --brand:#805135; --brand-dark:#5c3825; --danger:#a04132; }
*, *::before, *::after { box-sizing:border-box; }
html, body { min-height:100%; }
body { display:flex; flex-direction:column; min-height:100dvh; margin:0; background:var(--canvas); color:var(--ink); font:14px/1.45 Inter,Arial,sans-serif; }
button, input { font:inherit; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.topbar { position:fixed; inset:0 0 auto; z-index:10; height:64px; background:rgba(255,250,242,.97); border-bottom:1px solid var(--line); box-shadow:0 5px 24px #402b1a0d; }
.topbar .container-fluid { max-width:1320px; }
.topbar .container-fluid > a:first-child { text-decoration:none; }
.header-logo { display:block; width:auto; height:44px; max-width:min(40vw,260px); object-fit:contain; }
.outline-nav { display:inline-flex; align-items:center; justify-content:center; min-height:35px; padding:0 15px; border:1px solid #bda993; border-radius:100px; background:transparent; color:var(--ink); text-decoration:none; font:600 10px/1 Inter,Arial,sans-serif; letter-spacing:.05em; text-transform:uppercase; transition:background-color .2s,border-color .2s,color .2s; }
.outline-nav:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:var(--paper); }
.brand { color:var(--brand-dark); font:600 20px/1 Inter,Arial,sans-serif; letter-spacing:-.02em; text-decoration:none; text-align:center; }
.brand small { display:block; margin-top:6px; color:var(--muted); font:500 8px/1 Inter,Arial,sans-serif; letter-spacing:.16em; }
.flag { width:32px; height:20px; overflow:hidden; border-radius:2px; box-shadow:0 0 0 1px var(--line); }
.flag span { display:block; height:33.333%; } .flag .w { background:#fff; } .flag .g { background:#159447; } .flag .r { background:#d9292e; }
main { flex:1; display:grid; place-items:center; width:100%; padding:92px 20px 56px; }
.login-card { width:min(100%,420px); min-height:0; margin:auto; padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 18px 50px #4d311c12; }
.login-card::before { content:""; display:block; width:44px; height:3px; margin:0 auto 28px; border-radius:100px; background:var(--brand); }
.field { position:relative; height:auto; margin-bottom:20px; border:0; }
.field label { position:static; display:block; margin-bottom:7px; color:var(--ink); font-size:12px; font-weight:700; }
.field input { display:block; width:100%; height:42px; margin:0; padding:0 13px; border:1px solid #cdbba8; border-radius:9px; outline:0; background:#fffcf7; color:var(--ink); font:13px Inter,Arial,sans-serif; }
.field input:focus { border-color:var(--brand); box-shadow:0 0 0 3px #80513521; }
.field:focus-within { border:0; } .field:focus-within label { color:var(--brand-dark); }
.eye { position:absolute; right:12px; bottom:11px; width:24px; height:24px; border:0; background:var(--brand); cursor:pointer; }
.login-btn, .secondary-btn, .back-btn { display:flex; align-items:center; justify-content:center; width:100%; min-height:42px; padding:7px 14px; border-radius:9px; font:600 12px Inter,Arial,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s; }
.login-btn { margin:28px 0 10px; border:1px solid var(--brand); background:var(--brand); color:var(--paper); }
.login-btn:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.secondary-btn, .back-btn { gap:9px; margin:0 0 8px; border:1px solid #baa58e; background:transparent; color:var(--brand-dark); }
.secondary-btn:hover, .back-btn:hover { background:var(--soft); border-color:var(--brand); }
.mini-icon { width:17px; height:17px; fill:currentColor; }
.divider { height:1px; margin:23px 0 0; background:var(--line); }
.text-link { display:block; width:max-content; margin:15px auto; padding:0; border:0; background:transparent; color:var(--brand-dark); font:600 12px Inter,Arial,sans-serif; text-decoration:underline; cursor:pointer; }
.form-title { margin:0 0 20px; color:var(--brand-dark); text-align:center; font:600 22px/1.25 Inter,Arial,sans-serif; }
.form-copy { margin:-10px 0 20px; color:var(--muted); text-align:center; font-size:13px; }
.back-btn { margin-top:12px; }
.error { margin-top:16px; padding:14px; border:1px solid #e2bcb0; border-radius:9px; background:#f4e3db; color:#873d2d; font-size:13px; line-height:1.5; text-align:center; }
.error a { font-weight:700; text-underline-offset:2px; }
.footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:50px; padding:12px max(24px,calc((100vw - 1272px)/2)); border-top:1px solid var(--line); background:var(--soft); color:var(--muted); font:11px/1.4 Inter,Arial,sans-serif; }
.footer > div:first-child { margin-right:auto; } .footer a { color:var(--brand-dark); }
@media(max-width:575.98px) { .topbar { height:64px; } .header-logo { height:43px; max-width:34vw; } .outline-nav { min-height:33px; padding-inline:11px; font-size:10px; } main { padding:93px 14px 45px; place-items:start center; } .login-card { padding:31px 23px; } .footer { flex-wrap:wrap; padding:14px; font-size:11px; } }
@media(max-width:390px) { .topbar { padding-inline:8px !important; } .outline-nav { padding-inline:8px; font-size:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }