/* ============================================================
   VerifyLocal warm theme - shared design tokens
   Applies to: index.html (demo) + login.html (auth gate)
   Edit this file to change colors/spacing/fonts across both pages.
   ============================================================ */
:root{
  --warm-bg:#FAF9F5; --warm-ink:#1F1E1D; --warm-ink-soft:#4A4640; --warm-ink-mute:#8A8578;
  --warm-ink-faint:#BDB8AA; --warm-accent:#BC5A2E; --warm-accent-deep:#9C4520; --warm-accent-tint:#F7E8DC;
  --warm-surface:#FFFFFF; --warm-surface-elev:#FDFCF9; --warm-rule:#E8E4D8; --warm-rule-soft:#F0EDE3;
  --warm-shadow-sm:0 1px 2px rgba(31,30,29,.05); --warm-shadow-md:0 4px 20px rgba(31,30,29,.07); --warm-shadow-lg:0 12px 40px rgba(31,30,29,.10);
  --warm-radius:14px; --warm-radius-lg:22px;
  --warm-font-serif:Georgia,'Times New Roman',serif;
  --warm-font-body:system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- shared: brand / logo / body ---------- */
*{box-sizing:border-box}
body{font-family:var(--warm-font-body);background:var(--warm-bg);color:var(--warm-ink);margin:0}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(var(--warm-rule) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none;z-index:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--warm-ink)}
.logo{width:26px;height:26px}
.logo svg{width:100%;height:100%}
.brandname{font-family:var(--warm-font-serif);font-size:18px;letter-spacing:.04em}
.brandname span{font-weight:400;color:var(--warm-ink-mute)}

/* ---------- login page ---------- */
.login-body{min-height:100vh;display:flex;flex-direction:column}
.login-body .nav{width:100%}
.login-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.login-brand{margin-bottom:34px}
.login-box{position:relative;z-index:1;background:var(--warm-surface);border:1px solid var(--warm-rule);border-radius:var(--warm-radius);padding:40px 36px;width:360px;box-shadow:var(--warm-shadow-md)}
.login-box h1{font-family:var(--warm-font-serif);font-size:24px;font-weight:400;text-align:center;margin:0 0 6px}
.login-sub{font-size:13.5px;color:var(--warm-ink-mute);text-align:center;margin-bottom:28px}
.login-field{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.login-input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--warm-rule);border-radius:10px;font-size:14px;margin-bottom:16px;font-family:inherit;background:var(--warm-surface-elev);color:var(--warm-ink);transition:border-color .2s,box-shadow .2s}
.login-input:focus{outline:none;border-color:var(--warm-accent);box-shadow:0 0 0 3px var(--warm-accent-tint)}
.login-btn{width:100%;padding:13px;background:var(--warm-accent);color:#fff;border:none;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}
.login-btn:hover{background:var(--warm-accent-deep);transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(188,90,46,.6)}
.login-err{color:#C0392B;font-size:13px;margin-bottom:14px;display:none;text-align:center;background:var(--warm-accent-tint);padding:9px 12px;border-radius:10px}
.login-err.show{display:block}

/* ---------- demo page ---------- */
.demo-body{min-height:100vh}
.nav{position:relative;z-index:1;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 28px}
.navlink{font-size:13px;color:var(--warm-ink-mute);text-decoration:none;padding:8px 18px;border-radius:999px;border:1px solid var(--warm-rule);background:transparent;transition:all .2s}
.navlink:hover{border-color:var(--warm-accent);color:var(--warm-ink);background:var(--warm-surface-elev)}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:24px 28px 60px}
.hero{text-align:center;padding:34px 0 26px}
.hero h1{font-family:var(--warm-font-serif);font-weight:400;font-size:clamp(30px,4.5vw,46px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.hero h1 em{font-style:italic;color:var(--warm-accent-deep)}
.hero p{font-size:15px;color:var(--warm-ink-soft);max-width:560px;margin:0 auto}
.pnl{background:var(--warm-surface);border:1px solid var(--warm-rule);border-radius:var(--warm-radius-lg);padding:28px;margin-bottom:22px;box-shadow:var(--warm-shadow-md)}
.demo-footer{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:26px 28px 40px;border-top:1px solid var(--warm-rule);text-align:center}
.demo-footer p{font-size:11.5px;color:var(--warm-ink-faint);margin:0;letter-spacing:.04em}

/* ---------- responsive ---------- */
@media(max-width:640px){.r{grid-template-columns:1fr}.tb{grid-template-columns:80px 1fr 1fr 1fr}}