/* ===========================================================
   Shared styles. Palette: ink + warm paper + brass accent.
   =========================================================== */
:root{
  --ink:#14110E;
  --ink-soft:#241F18;
  --paper:#F5F1E9;
  --paper-dim:#E6DECE;
  --brass:#B8893A;
  --brass-bright:#D6A24A;
  --muted:#8A8170;
  --line:rgba(20,17,14,.12);
  --danger:#9B3B2E;
  --ok:#3C6E47;
  --radius:14px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- DYNAMIC BACKGROUND (auto resize + crop) ---------- */
/* Each layer fills the viewport, is cropped via cover, slowly
   zooms (Ken Burns), and crossfades to the next. Swap the
   background-image values for your own photos any time. */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bg .slide{
  position:absolute;inset:0;
  background-size:cover;          /* crop to fill */
  background-position:center;     /* keep subject centred */
  background-repeat:no-repeat;
  opacity:0;
  animation:fade 27s infinite;
  will-change:opacity,transform;
}
.bg .slide:nth-child(1){animation-delay:0s;
  background-image:url(''/assets/bg_1.jpg'');}
.bg .slide:nth-child(2){animation-delay:9s;
  background-image:url(''/assets/bg_2.jpg'');}
.bg .slide:nth-child(3){animation-delay:18s;
  background-image:linear-gradient(135deg,#1c1a16 0%,#403018 55%,#0c0a07 100%);}
@keyframes fade{
  0%{opacity:0;transform:scale(1.06)}
  6%{opacity:1}
  30%{opacity:1}
  36%{opacity:0;transform:scale(1.12)}
  100%{opacity:0}
}
/* readability veil over the background */
.bg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 70% 30%,rgba(0,0,0,.15),rgba(0,0,0,.7));}
@media (prefers-reduced-motion:reduce){
  .bg .slide{animation:none;opacity:1}
  .bg .slide:nth-child(2),.bg .slide:nth-child(3){opacity:0}
}

/* ---------- LOGIN / LANDING ---------- */
.stage{min-height:100dvh;display:grid;grid-template-rows:1fr auto;
  padding:clamp(20px,4vw,56px)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--paper);
  letter-spacing:.18em;font-size:.78rem;text-transform:uppercase}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brass-bright);
  box-shadow:0 0 14px var(--brass-bright)}
.hero{display:grid;place-items:center}
.card{
  width:min(420px,100%);background:rgba(245,241,233,.96);
  backdrop-filter:blur(6px);border-radius:var(--radius);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.4)}
.card h1{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,4.4vw,2.2rem);margin:.1em 0 .15em;line-height:1.05}
.card .sub{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem}
label{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem}
input[type=text],input[type=password],input[type=url],select{
  width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:1rem;color:var(--ink);margin-bottom:1.05rem;
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(184,137,58,.18)}
.btn{display:inline-block;width:100%;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);padding:.85rem 1rem;border-radius:10px;
  font-size:.98rem;letter-spacing:.02em;transition:transform .06s,background .2s}
.btn:hover{background:var(--ink-soft)}
.btn:active{transform:translateY(1px)}
.btn.brass{background:var(--brass)}.btn.brass:hover{background:var(--brass-bright)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(0,0,0,.04)}
.btn.danger{background:var(--danger)}
.foot{color:rgba(245,241,233,.7);font-size:.78rem;text-align:center}
.alert{padding:.7rem .9rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem}
.alert.err{background:rgba(155,59,46,.12);color:var(--danger);
  border:1px solid rgba(155,59,46,.3)}
.alert.ok{background:rgba(60,110,71,.12);color:var(--ok);
  border:1px solid rgba(60,110,71,.3)}
.link{color:var(--brass);text-decoration:none;font-size:.86rem}
.link:hover{text-decoration:underline}
.row-between{display:flex;justify-content:space-between;align-items:center;margin-top:.2rem}

/* ---------- UTILITY PAGES (dashboard / admin / change pw) ---------- */
.page{min-height:100dvh;background:var(--paper)}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:1rem clamp(16px,4vw,40px);background:var(--ink);color:var(--paper)}
.topbar .brand{color:var(--paper)}
.topbar nav a{color:rgba(245,241,233,.85);text-decoration:none;margin-left:1.2rem;
  font-size:.9rem}
.topbar nav a:hover{color:#fff}
.wrap{max-width:980px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);margin-bottom:1.6rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.panel h2{font-family:'Fraunces',Georgia,serif;font-weight:500;margin:.1em 0 1rem;
  font-size:1.35rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);
  vertical-align:middle}
th{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
td .tag{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.74rem;
  background:var(--paper-dim);color:var(--ink-soft)}
td .tag.admin{background:var(--brass);color:#fff}
.btn.small{width:auto;padding:.45rem .8rem;font-size:.82rem}
.inline{display:inline}
.hint{color:var(--muted);font-size:.82rem;margin:-.5rem 0 1rem}
.checkbox{display:flex;align-items:center;gap:.5rem;margin:0 0 1.1rem}
.checkbox input{width:auto;margin:0}