:root{
  --black:#0a0a0a; --gold:#d4af37; --gold2:#f1d77a; --silver:#c9ced6;
  --blue:#2f7bff; --red:#e5484d; --green:#2fb36a; --ink:#f5f1e6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:radial-gradient(1200px 700px at 20% -10%,#1d1a10 0,transparent 60%),
             radial-gradient(900px 600px at 100% 10%,#14181f 0,transparent 55%),#070707;
  color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
/* chain banner header - every page */
.banner{
  height:clamp(70px,14vw,150px); width:100%;
  background:#000 url(chain.jpg) center/cover no-repeat;
  border-bottom:3px solid var(--black); box-shadow:0 2px 0 var(--gold), 0 10px 30px rgba(0,0,0,.6);
}
main{flex:1; width:100%; max-width:1100px; margin:0 auto; padding:18px 14px 28px}
/* cross close-up, sits just above the footer bar */
.footcross{background:#000; text-align:center; padding:22px 10px 20px; border-top:1px solid var(--gold)}
.footcross img{display:inline-block; width:150px; height:auto; border:2px solid var(--gold); border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.7)}
/* footer: name in bold black on a gold bar */
footer{
  background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#000;
  text-align:center; padding:14px 10px; font-weight:900; letter-spacing:.04em; font-size:1.05rem;
}
.btn{
  appearance:none; border:2px solid #000; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#000; font-weight:800;
  padding:11px 16px; font-size:.95rem; box-shadow:0 3px 0 #000; font-family:inherit;
}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 #000}
.btn.ghost{background:rgba(255,255,255,.07); color:var(--ink); border-color:#000; box-shadow:0 3px 0 #000}
.btn.blue{background:var(--blue); color:#fff}
.btn.green{background:var(--green); color:#04140b}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.tag{display:inline-block; font-size:.68rem; font-weight:800; padding:2px 7px; border-radius:999px; color:#000; border:1px solid #000}
.t-gold{background:linear-gradient(180deg,#f6e08a,#d4af37)}
.t-silver{background:linear-gradient(180deg,#eef0f4,#b9bfc9)}
.t-ready{background:var(--blue); color:#fff}
.t-overdue{background:var(--red); color:#fff}
.t-closed{background:var(--green); color:#04140b}
.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:.75rem; font-weight:800; border:1px solid #000}
.glass{
  background:rgba(255,255,255,.07); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:4px solid #000; border-radius:16px; box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 18px 40px rgba(0,0,0,.55);
}
.muted{color:#a9a392}
.demo-note{font-size:.72rem; color:#8d876f; text-align:center; margin:10px 0 0}
dialog{
  border:4px solid #000; border-radius:16px; padding:0; max-width:min(520px,94vw); width:100%;
  background:rgba(18,18,18,.92); color:var(--ink); backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px var(--gold), 0 30px 60px rgba(0,0,0,.7);
}
dialog::backdrop{background:rgba(0,0,0,.65)}
.dlg{padding:18px}
.dlg h3{margin:0 0 10px; color:var(--gold2)}
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}
.field label{font-size:.72rem; font-weight:700; color:#a9a392; text-transform:uppercase; letter-spacing:.06em}
.field input,.field select,.field textarea{
  height:42px; padding:0 12px; border-radius:8px; border:1px solid #3a3a3a; background:#101010; color:var(--ink); font:inherit;
}
.field textarea{height:70px; padding:10px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold)}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>*{flex:1}