/* eRecycler — canonical brand + component system. THE single source of truth
   for every portal surface. Pages LINK this + use these classes; they never
   re-declare tokens, the mark, or the wordmark. Change it here → everywhere. */
:root{
  --forest:#0C3A29; --emerald:#15543D; --cream:#F5F0E6; --cream-2:#EBE3D3; --paper:#FBF8F1;
  --clay:#BF5230; --sand:#E9D9B8; --ink:#15231C; --muted:#5C6A61; --soft:#DCEAE3; --sage:#C2D6CC;
  --line:rgba(21,35,28,.12); --line-2:rgba(21,35,28,.22); --panel:#fff;
  --sans:"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
h1,h2,h3{font-family:var(--serif);color:var(--forest);margin:0}
p{color:var(--muted);line-height:1.5;margin:0}
a{color:var(--emerald)}
.eyebrow{color:var(--clay);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin:0 0 4px}

/* ---- brand lockup (the ONE definition of the mark + wordmark) ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px clamp(14px,4vw,32px);border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:8;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:36px;height:36px;flex:0 0 auto;display:block}
.brand-text{display:grid;line-height:1.05}
.brand-text strong{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.brand-text sup{font-size:9px;vertical-align:super}
.brand-text span{color:var(--muted);font-weight:700;font-size:12px}
.topbar-right{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13px;color:var(--muted);flex-wrap:wrap}

/* ---- shared components ---- */
.btn,button.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:6px 13px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--forest);
  font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;font-family:inherit}
.btn.primary{background:var(--forest);color:#fff;border-color:var(--forest)}
.btn.clay{background:var(--clay);color:#fff;border-color:var(--clay)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.main{padding:clamp(14px,3vw,26px) clamp(14px,4vw,32px) 70px;max-width:1180px;margin:0 auto}
label{display:grid;gap:6px;font-weight:800;font-size:13px}
input,select,textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid var(--emerald);outline-offset:1px;border-color:var(--emerald)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
.badge{display:inline-block;border-radius:999px;padding:3px 9px;font-weight:900;font-size:12px;background:var(--soft);color:var(--emerald)}
.badge.warn{background:#fdeee9;color:var(--clay)} .badge.none{background:#eee;color:#999}
.card-login{max-width:380px;margin:10vh auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.card-login .brand-mark{width:52px;height:52px;margin:0 auto 14px}
.card-login label{text-align:left;margin-bottom:12px}
.card-login .btn.primary{width:100%;min-height:46px;font-size:15px}
.err{color:var(--clay);font-weight:800;margin-bottom:10px}