:root{
  --bg:#F6F2E9;
  --surface:#FFFFFF;
  --surface-2:#F1EBDC;
  --ink:#221D18;
  --ink-soft:#6B6355;
  --line:#DDD3BE;
  --teal:#2B6B66;
  --teal-tint:#E7F1EF;
  --accent:#C1531C;
  --accent-ink:#FFF7F0;
  --good:#2F7A45;
  --good-tint:#E7F4EA;
  --warn:#B4790A;
  --warn-tint:#FCF1DC;
  --shadow: 0 1px 2px rgba(35,25,10,.06), 0 6px 20px -10px rgba(35,25,10,.18);
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
.mono{font-family:ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; font-variant-numeric:tabular-nums;}
a{color:var(--teal);}
code{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; background:var(--surface-2); padding:1px 5px; border-radius:5px;}

/* ---- topbar ---- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line);}
.topbar-inner{
  max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px;
}
.brand{font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none;}
.topnav{display:flex; gap:4px; flex:1;}
.topnav a{
  padding:7px 12px; border-radius:8px; text-decoration:none; color:var(--ink-soft); font-size:.9rem; font-weight:600;
}
.topnav a:hover{background:var(--surface-2); color:var(--ink);}
.topnav a.active{background:var(--teal-tint); color:var(--teal);}
.topbar-user{display:flex; align-items:center; gap:10px; font-size:.85rem;}

/* ---- page shell ---- */
.page{max-width:1100px; margin:0 auto; padding:24px 20px 60px; display:flex; flex-direction:column; gap:20px;}
.footer{border-top:1px solid var(--line); margin-top:20px;}
.footer-inner{max-width:1100px; margin:0 auto; padding:16px 20px; color:var(--ink-soft); font-size:.8rem;}

/* ---- headings ---- */
h1{font-size:1.6rem; margin:0 0 4px; letter-spacing:-.01em;}
h2{font-size:1.15rem; margin:0 0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.page-intro{color:var(--ink-soft); margin:0 0 6px; font-size:.92rem;}
.muted{color:var(--ink-soft);}

/* ---- panel / card ---- */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.count{
  font-size:.78rem; font-weight:500; color:var(--ink-soft); background:var(--surface-2);
  border:1px solid var(--line); padding:2px 9px; border-radius:999px;
}

/* ---- tool grid (dashboard) ---- */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
.tool-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
}
.tool-card h3{margin:0 0 6px; font-size:1.05rem;}
.tool-card p{margin:0; color:var(--ink-soft); font-size:.85rem;}
.tool-card:hover{border-color:var(--teal);}
.tool-card.disabled{opacity:.55; cursor:default;}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.stat .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
.stat .v{font-size:1.4rem; font-weight:700;}
.stat .v.mono{font-size:1.05rem;}
.stat .d{font-size:.78rem; color:var(--ink-soft); margin-top:3px;}

/* ---- forms ---- */
label{display:block; font-size:.78rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 6px;}
label:first-of-type{margin-top:0;}
input[type=text], input[type=password], input[type=number], select{
  width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  padding:10px 11px; border-radius:8px; font-size:.92rem; font-family:inherit;
}
input:focus, select:focus, button:focus-visible, a:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}
.form-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.form-row input{flex:1; min-width:160px;}
.field-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px 20px;}
.switch-row{display:flex; align-items:center; gap:9px; padding:9px 0;}
.switch-row input{width:16px; height:16px; accent-color:var(--teal);}

.btn{
  border:none; border-radius:8px; padding:10px 16px; font-weight:600; font-size:.88rem;
  cursor:pointer; font-family:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn-accent{background:var(--accent); color:var(--accent-ink);}
.btn-accent:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink-soft);}
.btn-ghost:hover{color:var(--ink); border-color:var(--teal);}
.btn-sm{padding:6px 11px; font-size:.8rem;}
.btn-block{width:100%; justify-content:center; margin-top:16px;}

/* ---- alerts / badges ---- */
.alert{padding:10px 14px; border-radius:9px; font-size:.85rem; margin-bottom:14px;}
.alert-ok{background:var(--good-tint); color:var(--good);}
.alert-err{background:#FBEAE3; color:var(--accent);}
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:600;}
.badge-ok{background:var(--good-tint); color:var(--good);}
.badge-warn{background:var(--warn-tint); color:var(--warn);}
.product-code, .badge-code{
  display:inline-block; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.72rem;
  color:var(--teal); background:var(--teal-tint); padding:1px 7px; border-radius:5px; letter-spacing:.03em;
}

/* ---- product list ---- */
.product-list{display:flex; flex-direction:column; gap:10px;}
.product-card{
  border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.product-info{display:flex; flex-direction:column; gap:4px; min-width:180px;}
.product-name{font-weight:600; font-size:.95rem;}
.product-last{font-size:.78rem; color:var(--ink-soft);}
.product-last .mono{color:var(--ink); font-weight:600;}
.product-actions{display:flex; align-items:center; gap:8px;}

/* ---- tables ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px;}
table{width:100%; border-collapse:collapse; font-size:.85rem;}
thead th{
  text-align:left; padding:9px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); background:var(--surface-2); border-bottom:1px solid var(--line);
}
tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.bnum{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-weight:600; color:var(--accent);}

.empty{color:var(--ink-soft); font-size:.88rem; text-align:center; padding:26px 10px;}
.preview-strip{
  margin-top:16px; padding:12px 14px; background:var(--surface-2); border:1px dashed var(--line);
  border-radius:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.preview-strip .label{font-size:.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.preview-strip .value{font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:1.05rem; font-weight:700; color:var(--accent);}

.subnav{display:flex; gap:6px; margin-bottom:4px;}
.subnav a{
  padding:7px 13px; border-radius:8px; text-decoration:none; color:var(--ink-soft); font-size:.85rem; font-weight:600;
  border:1px solid transparent;
}
.subnav a:hover{background:var(--surface-2);}
.subnav a.active{background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow);}

.pagination{display:flex; gap:6px; align-items:center; justify-content:center; margin-top:14px; font-size:.85rem;}
.pagination a, .pagination span{padding:6px 11px; border-radius:7px; text-decoration:none; color:var(--ink-soft);}
.pagination a:hover{background:var(--surface-2);}
.pagination .current{background:var(--teal-tint); color:var(--teal); font-weight:700;}

/* ---- auth pages ---- */
.auth-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow);
}
.auth-card h1{font-size:1.3rem; margin-bottom:2px;}
.auth-sub{color:var(--ink-soft); font-size:.88rem; margin:0 0 18px;}

@media (max-width:640px){
  .topbar-inner{flex-wrap:wrap;}
  .product-card{flex-direction:column; align-items:flex-start;}
}