:root{
  --bg:            #F5F3EE;
  --panel:         #FFFFFF;
  --text:          #1B211F;
  --muted:         #7C8C87;
  --border:        #E3DFD6;
  --accent:        #0F6E63;
  --accent-soft:   #E4F1EE;
  --danger:#c0392b; --danger-soft:#fbeceb; --good:#2f9e6b;
  --shadow:0 1px 3px rgba(20,30,25,.06);

  --cat-catalog:      #B8862E;
  --cat-catalog-soft: #F6EBD6;
  --cat-ads:          #0F6E63;
  --cat-ads-soft:     #E4F1EE;
  --cat-ops:          #4C5FA6;
  --cat-ops-soft:     #E7E9F6;
  --cat-share:        #A2436B;
  --cat-share-soft:   #F5E4EB;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:            #14181A;
    --panel:         #1B211F;
    --text:          #EDEFEC;
    --muted:         #8B958F;
    --border:        #2B322E;
    --accent:        #4FC9B8;
    --accent-soft:   #1B3934;
    --danger:#e0685c; --danger-soft:#3a2323; --good:#4cbf8c;
    --shadow:0 1px 3px rgba(0,0,0,.4);

    --cat-catalog:      #E0B45C;
    --cat-catalog-soft: #3A2F16;
    --cat-ads:          #4FC9B8;
    --cat-ads-soft:     #1B3934;
    --cat-ops:          #8B9AE0;
    --cat-ops-soft:     #262D4A;
    --cat-share:        #E28FB0;
    --cat-share-soft:   #3A2130;
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Work Sans","PingFang TC","Microsoft JhengHei",Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
header{padding:20px 28px 8px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px;}
header h1{margin:0 0 4px; font-size:22px; font-weight:600; font-family:"Fraunces","Noto Serif TC",serif; letter-spacing:-0.01em;}
header .meta{color:var(--muted); font-size:12.5px;}
.crumbs{padding:14px 28px 0; font-size:12.5px;}
.crumbs a{color:var(--accent); text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
a.dashlink{font-size:12.5px; color:var(--accent); text-decoration:none;}
a.dashlink:hover{text-decoration:underline;}
main{padding:8px 28px 40px; max-width:1200px; margin:0 auto;}
main.narrow{max-width:960px;}

/* ---------- 側邊欄外殼（見 admin_shell.html） ---------- */
.shell{ display:flex; min-height:100vh; align-items:flex-start; }
.sidebar{
  width:250px; flex:0 0 250px; background:var(--panel); border-right:1px solid var(--border);
  padding:18px 14px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.wordmark{ display:flex; flex-direction:column; gap:1px; padding:6px 8px 16px; }
.wordmark .eyebrow{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.wordmark h1{ font-family:"Fraunces","Noto Serif TC",serif; font-size:18px; font-weight:600; margin:0; letter-spacing:-0.01em; }

.quicklinks{ display:flex; flex-direction:column; gap:2px; padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid var(--border); }
.quicklink{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; text-decoration:none;
  color:var(--muted); font-size:13px; font-weight:500;
}
.quicklink:hover{ background:var(--accent-soft); color:var(--accent); }
.quicklink.current{ background:var(--accent-soft); color:var(--accent); }
.quicklink .ico{ font-size:14px; width:16px; text-align:center; }

.space{ margin-bottom:6px; }
.space-head{ display:flex; align-items:center; gap:8px; padding:9px 8px 5px; cursor:pointer; user-select:none; }
.space-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.space-head span.name{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); flex:1; }
.space-head .chev{ font-size:10px; color:var(--muted); transition:transform .15s; }
.space.collapsed .chev{ transform:rotate(-90deg); }
.space.collapsed .space-items{ display:none; }

.space-items{ display:flex; flex-direction:column; gap:1px; padding-left:4px; }
.navitem{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; text-decoration:none;
  color:var(--text); font-size:13.5px; position:relative;
}
.navitem:hover{ background:var(--bg); }
.navitem.current{ background:var(--bg); box-shadow:inset 0 0 0 1px var(--border); }
.navitem .ico{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 26px; }
.navitem .label{ flex:1; }
.navitem .count{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); }

.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }

.admin-main{ flex:1; min-width:0; }
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px;}
.panel h2{margin:0 0 12px; font-size:15px; font-weight:700;}
.toolbarrow{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
input[type=text], input[type=number], input[type=search], select{
  border:1px solid var(--border); border-radius:8px; padding:6px 9px; background:var(--bg); color:var(--text); font-size:13px;
}
label.chk{display:flex; align-items:center; gap:6px; font-size:13px;}
button{font-family:inherit;}
button.btn{
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:8px; padding:7px 14px; font-size:13px; cursor:pointer;
}
button.btn.secondary{background:var(--panel); color:var(--text); border-color:var(--border);}
button.btn.danger{background:var(--danger); border-color:var(--danger);}
button.btn:hover{opacity:.9;}
button.btn:disabled{opacity:.5; cursor:default;}
button.link{background:none; border:none; color:var(--accent); cursor:pointer; font-size:12.5px; padding:2px 4px;}
button.link.danger{color:var(--danger);}
table{width:100%; border-collapse:collapse; font-size:12.8px;}
th,td{padding:7px 8px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle;}
th{color:var(--muted); font-weight:600;}
tbody tr:hover{background:var(--accent-soft);}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px;}
.badge.on{background:var(--accent-soft); color:var(--accent);}
.badge.off{background:var(--danger-soft); color:var(--danger);}
.formcard{border:1px dashed var(--border); border-radius:10px; padding:14px; margin-top:10px; display:none;}
.formcard.open{display:block;}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px;}
.formgrid .field{display:flex; flex-direction:column; gap:4px;}
.formgrid .field label{font-size:11.5px; color:var(--muted);}
.comprow{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.comprow input{flex:1;}
.comprow input.qty{flex:0 0 90px;}
.subtle{color:var(--muted); font-size:11.5px;}
.banner{padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:13px;}
.banner.info{background:var(--accent-soft); color:var(--accent);}
.banner.warn{background:var(--danger-soft); color:var(--danger);}
.status-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.status-row .stat{font-size:13px;}
.status-row .stat b{font-size:16px;}
.rule-col{white-space:nowrap;}
.searchbar{width:220px;}
.tablewrap{border-top:1px solid var(--border); margin-top:12px;}
.pager{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0 2px;}
.pager .pagerinfo{font-size:12.5px; color:var(--muted);}
button.pagerbtn{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:8px; padding:5px 12px; font-size:12.5px; cursor:pointer;
}
button.pagerbtn:disabled{opacity:.4; cursor:default;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px;}
.card .label{font-size:11.5px; color:var(--muted); margin-bottom:6px;}
.card .value{font-size:22px; font-weight:700;}