/* Shopify-Polaris-style LIGHT theme (2026-07-22 user directive: 跟 Shopify，唔要深色).
   Class contract unchanged — every page keeps its markup; only the skin changed. */
:root{
  --bg:#f6f6f7;--panel:#ffffff;--panel-2:#f7f7f8;--border:#e3e3e6;
  --text:#202223;--muted:#6d7175;--accent:#2c6ecb;--success:#008060;
  --c-pass:#008060;--c-warn:#b98900;--c-fail:#d82c0d;--c-na:#8c9196;
  --c-ecom:#2c6ecb;--c-luxury:#8051d4;--c-agency:#00879e;--c-pbn:#6d7175;
  --shadow:0 1px 2px rgba(22,29,37,.06),0 1px 4px rgba(22,29,37,.04);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans CJK TC","PingFang HK",sans-serif;font-size:13px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* SIDEBAR — Shopify-admin-style fixed left nav */
body{margin-left:216px}
html.embedded body{margin-left:0}
aside.sidebar{position:fixed;top:0;left:0;bottom:0;width:216px;background:#fafafa;border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:60}
aside.sidebar .brand{display:block;font-size:14px;font-weight:700;color:var(--text);letter-spacing:.02em;padding:14px 16px;border-bottom:1px solid var(--border)}
aside.sidebar .brand:hover{text-decoration:none;color:#000}
.side-nav{flex:1;overflow-y:auto;padding:8px}
.side-group{padding:6px 0}
.side-group+.side-group{border-top:1px solid #ececef}
.side-group-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;padding:6px 10px 4px}
.side-link{display:block;padding:7px 10px;color:#303236;font-size:13px;border-radius:8px;margin:1px 0}
.side-link:hover{background:#f1f1f2;color:var(--text);text-decoration:none}
.side-link.active{background:#ebebed;color:var(--text);font-weight:600;box-shadow:inset 3px 0 0 var(--success)}
.side-meta{font-size:10.5px;color:var(--muted);padding:10px 16px;border-top:1px solid var(--border)}
@media(max-width:900px){body{margin-left:0}aside.sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--border)}.side-nav{display:flex;flex-wrap:wrap;padding:4px 8px}.side-group{display:flex;flex-wrap:wrap;padding:0;border:0!important}.side-group-lbl{display:none}.side-link{padding:8px 10px}.side-link.active{box-shadow:inset 0 -2px 0 var(--success)}.side-meta{display:none}}

/* HUB TAB SHELL (calendar / review / actions / settings) */
.hub-tabs{display:flex;gap:2px;background:var(--panel);border-bottom:1px solid var(--border);padding:0 14px;position:sticky;top:0;z-index:40}
.hub-tabs a{padding:11px 15px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent}
.hub-tabs a:hover{color:var(--text);text-decoration:none;background:var(--panel-2)}
.hub-tabs a.active{color:var(--text);border-bottom-color:var(--success);font-weight:600}
.hub-frame{display:block;width:100%;border:0;height:calc(100vh - 42px);background:var(--bg)}

/* HEADER — grouped dropdown nav (legacy topbar, kept for embed-less fallback) */
header.topbar{display:flex;align-items:center;gap:18px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;min-height:46px}
header.topbar .brand{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.02em;white-space:nowrap}
header.topbar .brand:hover{text-decoration:none;color:#000}
header.topbar .meta{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.nav-root{display:flex;align-items:stretch;font-size:13px;height:46px}
.nav-root .nav-top{display:flex;align-items:center;gap:5px;padding:0 13px;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:13px;cursor:pointer;height:100%}
.nav-root a.nav-top:hover,.nav-group:hover>.nav-top{color:var(--text);text-decoration:none;background:var(--panel-2)}
.nav-root a.nav-top.active,.nav-group.active>.nav-top{color:var(--text);border-bottom-color:var(--success)}
.nav-top .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.55}
.nav-group{position:relative;display:flex}
.nav-drop{display:none;position:absolute;top:100%;left:0;min-width:208px;background:var(--panel);border:1px solid var(--border);border-radius:0 0 10px 10px;box-shadow:0 8px 24px rgba(22,29,37,.12);padding:5px 0;z-index:60}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{display:block}
.nav-drop a{display:block;padding:8px 14px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.nav-drop a:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.nav-drop a.active{color:var(--text);border-left:2px solid var(--success);padding-left:12px;background:var(--panel-2)}
@media(max-width:900px){header.topbar{flex-wrap:wrap;padding:8px 12px;min-height:0}.nav-root{height:auto;flex-wrap:wrap}.nav-root .nav-top{padding:8px 10px}header.topbar .meta{display:none}}

/* Shared anomaly-alerts banner */
.alerts-banner{padding:7px 18px;font-size:11.5px;border-bottom:1px solid var(--border)}
.alerts-banner.ok{background:#f1f8f5;color:#008060}
.alerts-banner.info{background:#eef4fa;color:#2c6ecb}
.alerts-banner.bad{background:#fff4f4;color:#d82c0d}

/* Section header accent */
.section-h b{border-left:3px solid var(--success);padding-left:9px}

/* Collapsible how-to panel */
details.howto{margin:0 14px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
details.howto>summary{cursor:pointer;padding:8px 12px;font-size:12px;color:var(--muted);user-select:none}
details.howto>summary:hover{color:var(--text)}
details.howto[open]>summary{border-bottom:1px solid var(--border);color:var(--text)}
details.howto .howto-body{padding:10px 14px;font-size:12px;line-height:1.7;color:#44474a}
details.howto .howto-body b{color:var(--text)}
details.howto .howto-body .step-lbl{display:inline-block;min-width:54px;color:var(--accent);font-weight:600}

/* KPI BAND — Shopify metric cards */
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 18px;background:transparent}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.kpi .val{font-size:24px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}
.kpi.ok .val{color:var(--c-pass)}
.kpi.warn .val{color:var(--c-warn)}
.kpi.bad .val{color:var(--c-fail)}

/* MAIN CONTENT — cards on soft gray canvas */
main{padding:14px 18px}
.section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.section-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel)}
.section-h b{font-size:13px}
.section-h .src{font-size:10.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}

/* TABLE */
table.grid{width:100%;border-collapse:collapse;font-size:12px}
table.grid th{position:sticky;top:0;background:#fafbfb;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:550;cursor:pointer;user-select:none;white-space:nowrap}
table.grid th.sort-asc::after{content:" ▲";color:var(--accent);font-size:9px}
table.grid th.sort-desc::after{content:" ▼";color:var(--accent);font-size:9px}
table.grid td{padding:7px 10px;border-bottom:1px solid #f0f0f2;vertical-align:middle;font-variant-numeric:tabular-nums}
table.grid tr:hover td{background:#f6f6f7}
table.grid td a{color:var(--accent)}
table.grid td.num{text-align:right}
table.grid td.center{text-align:center}

/* TRAFFIC LIGHT cells */
.tl{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:6px}
.tl.pass{background:var(--c-pass)}
.tl.warn{background:#ffc453}
.tl.fail{background:var(--c-fail)}
.tl.na{background:#c9cccf}

/* TYPE BADGES — Polaris-style soft chips */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:550;text-transform:uppercase;letter-spacing:.5px}
.badge.ecom{background:#eaf4ff;color:#1f5199}
.badge.luxury{background:#f4edff;color:#6a3fc0}
.badge.agency{background:#e0f5f5;color:#00707f}
.badge.pbn,.badge.real,.badge.service{background:#f1f1f2;color:#5c5f62}

/* CALENDAR (queue.html) */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:14px}
.cal-h{font-size:10.5px;color:var(--muted);text-align:center;padding:5px;text-transform:uppercase;letter-spacing:.5px}
.cal-day{background:var(--panel);border:1px solid var(--border);border-radius:8px;min-height:64px;padding:6px;font-size:11px;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative}
.cal-day:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.cal-day .d{font-weight:600;color:var(--text)}
.cal-day .d.today{color:var(--accent)}
.cal-day.empty{background:transparent;border:1px dashed #dcdce0;cursor:default}
.cal-day .count{position:absolute;top:6px;right:6px;font-size:10px;background:var(--accent);color:#fff;padding:1px 6px;border-radius:8px;font-weight:600}
.cal-day .count.cost{background:#fff1e3;color:#8a5100}
.cal-day .types{margin-top:18px;font-size:9.5px;color:var(--muted);line-height:1.4;word-break:break-all}

/* CLICK-TO-COPY trigger */
.trigger{display:inline-block;padding:3px 8px;background:#f6f6f7;border:1px solid var(--border);border-radius:6px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--accent);cursor:pointer;user-select:all;transition:background .15s}
.trigger:hover{background:#ececef}
.trigger:active{background:var(--accent);color:#fff}

/* Status pills */
.status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:550;text-transform:uppercase;letter-spacing:.5px}
.status.pending{background:#f1f1f2;color:#5c5f62}
.status.in_progress{background:#eaf4ff;color:#1f5199}
.status.completed{background:#eaf6f0;color:#00694f}
.status.skipped{background:#fff1e3;color:#8a5100}

/* FOOTER */
footer{padding:14px 18px;text-align:center;color:var(--muted);font-size:11px;border-top:1px solid var(--border);margin-top:20px}
footer code{background:#f1f1f2;padding:1px 5px;border-radius:3px}