:root{
  --paper:#e7e3d6; --paper-2:#ded8c6; --ink:#242119; --ink-soft:#5b5546;
  --line:#c9c2ab; --rust:#a8461f; --rust-dark:#7d3216; --slate:#2e4a4a; --slate-2:#3c6060;
  --caution:#b8841a; --caution-bg:#f1e2bc; --danger-bg:#f3ddd2; --card:#f2efe4; --radius:3px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.5;}
a{color:var(--rust-dark);}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:700;margin:0 0 .4em;}
.wrap{max-width:1000px;margin:0 auto;padding:26px 20px 60px;}

/* header / nav */
.topbar{background:var(--paper-2);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:10;}
.topbar-inner{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand .stamp{font-family:monospace;font-size:11px;color:var(--rust-dark);border:1px solid var(--rust-dark);border-radius:2px;padding:2px 6px;}
.brand .title{font-weight:700;font-size:15px;}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1;}
.mainnav a{text-decoration:none;color:var(--ink-soft);padding:8px 12px;border-radius:20px;font-size:14px;}
.mainnav a:hover{background:var(--card);}
.mainnav a.active{background:var(--ink);color:var(--paper);}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px;}
.role{font-size:10px;text-transform:uppercase;padding:1px 6px;border-radius:10px;background:var(--line);margin-left:4px;}
.role-admin{background:var(--rust-dark);color:var(--paper);}
.logout{font-size:13px;}

/* generic layout */
.page-head{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;}
.page-head p{color:var(--ink-soft);margin:6px 0 0;max-width:60ch;font-size:14px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.grid-3{grid-template-columns:1fr;} .topbar-inner{flex-direction:column;align-items:stretch;} .mainnav{justify-content:flex-start;}}
.stat b{display:block;font-size:26px;font-family:Georgia,serif;color:var(--rust-dark);}
.stat span{font-size:12.5px;color:var(--ink-soft);}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);border-bottom:2px solid var(--ink);}
tr.top-pick,tr.best-row{background:var(--danger-bg);}
.tablewrap{overflow-x:auto;}

form.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:18px;}
form.inline-form label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:4px;}
form.inline-form input,form.inline-form select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:2px;font-size:14px;background:#fff;}
.btn{background:var(--rust-dark);color:#fff;border:none;border-radius:20px;padding:9px 18px;font-size:13px;cursor:pointer;}
.btn:hover{opacity:.9;}
.btn.secondary{background:none;border:1px solid var(--line);color:var(--ink-soft);}
.btn.danger{background:var(--rust);}
.badge-pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;background:var(--slate);color:#fff;}
.badge-pill.warn{background:var(--caution);color:#241f0f;}
.badge-pill.ok{background:#3c6060;color:#fff;}
.readonly-note{background:var(--caution-bg);border-left:3px solid var(--caution);padding:10px 14px;font-size:13.5px;border-radius:0 3px 3px 0;margin-bottom:16px;}
.stars-static{color:var(--caution);letter-spacing:1px;}

/* auth pages */
body.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.auth-box{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:34px 30px;width:340px;max-width:92vw;}
.auth-box h1{font-size:20px;margin-bottom:16px;}
.auth-box label{display:block;font-size:12.5px;color:var(--ink-soft);margin:12px 0 4px;}
.auth-box input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:3px;font-size:14px;}
.auth-box button{margin-top:18px;width:100%;padding:10px;background:var(--rust-dark);color:#fff;border:none;border-radius:20px;font-size:14px;cursor:pointer;}
.auth-error{color:var(--rust);font-size:13.5px;margin-top:10px;}

.sitefoot{max-width:1000px;margin:0 auto;padding:20px;color:var(--ink-soft);font-size:12px;text-align:center;}

.guide-section{margin-bottom:34px;}
.guide-section h2{font-size:20px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.guide-section ul{padding-left:20px;font-size:14px;}
.guide-section li{margin-bottom:6px;}