@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Newsreader:opsz,wght@6..72,600&display=swap');

:root { --ink:#17201d; --muted:#64706b; --line:#d8dfdb; --paper:#f4f6f3; --white:#fff; --green:#176447; --red:#a23c32; --amber:#8a6317; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#f7f8f4 0%,#eef2ef 100%); font-family:Manrope,sans-serif; min-height:100vh; }
.topbar { height:64px; padding:0 max(24px,calc((100vw - 1440px)/2)); display:flex; align-items:center; justify-content:space-between; background:#17201d; color:#fff; }
a { color:inherit; }
.brand { text-decoration:none; font:600 21px Newsreader,serif; }
.brand span { color:#a9c6b9; font:600 12px Manrope,sans-serif; text-transform:uppercase; margin-left:10px; }
.session { display:flex; align-items:center; gap:20px; font-size:13px; }
.session a { color:#dce8e2; }
main { max-width:1440px; margin:auto; padding:30px 24px 60px; }
.heading,.section-title,.filters { display:flex; align-items:center; justify-content:space-between; gap:16px; }
h1,h2,p { margin:0; } h1 { font:600 36px Newsreader,serif; } h2 { font-size:17px; }
.eyebrow { color:var(--green); font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.status { padding:8px 12px; border:1px solid var(--line); font-size:12px; font-weight:700; background:#fff; }
.status.ok { color:var(--green); border-color:#9dc8b6; } .status.error { color:var(--red); border-color:#d7aaa5; }
.filters { justify-content:flex-start; margin:24px 0; padding:14px 0; border-block:1px solid var(--line); }
label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:700; }
input,button { height:36px; border:1px solid #b9c3bd; background:#fff; color:var(--ink); font:600 13px Manrope,sans-serif; padding:0 11px; }
button { cursor:pointer; background:var(--green); color:#fff; border-color:var(--green); }
button.secondary { background:#fff; color:var(--green); }
button:disabled { opacity:.55; cursor:not-allowed; }
#last-refresh { margin-left:auto; color:var(--muted); font-size:12px; }
#message { min-height:24px; margin-bottom:8px; color:var(--red); font-size:13px; }
.workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:28px; align-items:start; min-width:0; }
.inventory-area,.recovery-area,.audit-area { min-width:0; background:rgba(255,255,255,.8); border-top:3px solid var(--ink); }
.section-title { padding:16px 14px; border-bottom:1px solid var(--line); }
.section-title p { color:var(--muted); font-size:12px; margin-top:3px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-size:10px; text-transform:uppercase; background:#f8faf8; }
td strong { font-size:15px; } td input { width:76px; }
.effective { color:var(--green); }
.empty { color:var(--muted); text-align:center; padding:28px; }
.payments-list { max-height:420px; overflow:auto; }
.payment { padding:13px 14px; border-bottom:1px solid var(--line); }
.payment header { display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.payment code { font-size:10px; word-break:break-all; white-space:normal; }
.payment p { margin-top:6px; color:var(--red); font-size:11px; }
.audit-area { margin-top:28px; }
.login-shell { min-height:calc(100vh - 64px); display:grid; place-items:center; }
.login-shell[hidden], #admin-workspace[hidden] { display:none; }
.login-panel { width:min(420px,100%); padding:30px; background:#fff; border-top:3px solid var(--green); box-shadow:0 18px 45px rgba(23,32,29,.12); }
.login-panel h1 { margin-bottom:8px; }
.login-panel > p { margin-bottom:22px; color:var(--muted); line-height:1.5; }
.login-panel label { display:grid; gap:7px; margin-top:14px; }
.login-panel input { width:100%; height:44px; }
.login-panel button { width:100%; height:44px; margin-top:20px; }
#admin-login-message { min-height:20px; margin:12px 0 0; color:var(--red); font-size:12px; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; } .heading { align-items:flex-start; } .filters { flex-wrap:wrap; } #last-refresh { width:100%; margin:0; } main { padding-inline:14px; } .topbar { padding-inline:14px; } .session span { display:none; } }