@import url('/static/fonts/fonts.css');

:root{
  --paper:#F3EEE4;
  --paper-2:#FBF8F1;
  --ink:#23211C;
  --ink-soft:#6B655A;
  --line:#D9D1C2;
  --accent:#C2410C;
  --accent-soft:#F1DDCF;
  --shadow:0 1px 0 var(--line),0 12px 30px -18px rgba(35,33,28,.4);
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(217,209,194,.35) 31px 32px);
}

/* ── Inputs ────────────────────────────────────────────────── */
input[type="text"],
input[type="password"]{
  font:400 16px 'Inter',sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px;width:100%;
}
input[type="text"]:focus,
input[type="password"]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* ── Buttons ───────────────────────────────────────────────── */
button{
  appearance:none;cursor:pointer;border:0;border-radius:10px;
  font:600 16px 'Inter',sans-serif;
  transition:transform .06s ease,filter .15s ease;
}
button:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed;opacity:1}

.btn-primary{background:var(--accent);color:#fff;padding:13px 16px}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}

.btn-secondary{
  background:none;color:var(--ink-soft);font:600 14px 'Inter',sans-serif;
  border:1px solid var(--line);padding:8px 12px;border-radius:9px;
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

.btn-danger{
  background:none;color:var(--ink-soft);font:600 14px 'Inter',sans-serif;
  border:1px solid var(--line);padding:8px 12px;border-radius:9px;
}
.btn-danger:hover{border-color:var(--accent);color:var(--accent)}

/* ── Utility ───────────────────────────────────────────────── */
.hidden{display:none!important}

/* ── Keyguard overlay ──────────────────────────────────────── */
#kg-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(35,33,28,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;
}
.kg-box{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
  padding:32px 28px;display:flex;flex-direction:column;gap:12px;
  min-width:280px;
}
.kg-brand{font:600 15px 'Inter',sans-serif;color:var(--ink);margin:0}
#kg-pw{
  font:400 16px 'Inter',sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;width:100%;
}
#kg-pw:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
#kg-btn{
  appearance:none;border:0;background:var(--accent);color:#fff;
  font:600 16px 'Inter',sans-serif;border-radius:10px;
  padding:11px;cursor:pointer;transition:filter .15s;
}
#kg-btn:hover{filter:brightness(1.06)}
#kg-btn:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed}
.kg-err{font-size:13px;color:var(--accent);margin:0}