/* Track HQ shell: light top bar, blue gradient sidebar, white content, bordered cards.
   Same tokens as the stack-kit base; do not restyle existing pages. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --blue:#046bd9; --blue-dark:#0353a8; --blue-soft:#e0f2ff;
  --pink:#d81f26; --pink-soft:rgba(216,31,38,0.08);
  /* the interactive accent: Stack hot pink on SamCart chrome */
  --accent:#d81f26; --accent-dark:#b81a20; --accent-soft:rgba(216,31,38,0.09);
  --bg:#ffffff; --bg-2:#f5f8fa; --card:#ffffff; --card-2:#f5f8fa;
  --border:#e3e8ee; --border-2:#cfd7e0;
  --text:#16283c; --muted:#64748b;
  --green:#00875a; --red:#d93025;
  --side-a:#0468d6; --side-b:#012f6b;
  --shadow:0 0 1px rgba(17,17,17,0.15), 0 1px 5px rgba(17,17,17,0.15);
}
[data-theme="dark"] {
  --blue-soft:rgba(4,107,217,0.22);
  --accent-soft:rgba(216,31,38,0.16);
  --bg:#0e1116; --bg-2:#161b22; --card:#161b22; --card-2:#1c232c;
  --border:#262c35; --border-2:#39424e;
  --text:#e8edf3; --muted:#8b98a9;
  --side-a:#0a3a7d; --side-b:#050f24;
  --shadow:none;
  --pink-soft:rgba(216,31,38,0.14);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; font-size:14px; }
svg { display:block; }

/* ---- top utility bar (SamCart creator-studio header) ---- */
.topbar { display:flex; align-items:center; height:48px; background:var(--bg-2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.topbar .tb-side { width:190px; flex-shrink:0; display:flex; align-items:center; padding-left:12px; }
.tb-brand { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--side-a),var(--side-b)); color:#fff; display:flex; align-items:center; justify-content:center; }
.tb-brand svg { width:16px; height:16px; }
.tb-nav { display:flex; align-items:center; gap:6px; height:100%; }
.tb-item { display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px; color:#33475b; text-decoration:none; font-size:13px; font-weight:600; }
[data-theme="dark"] .tb-item { color:var(--muted); }
.tb-item .tb-ic svg { width:17px; height:17px; }
.tb-item:hover { background:rgba(22,40,60,0.06); }
[data-theme="dark"] .tb-item:hover { background:rgba(255,255,255,0.06); }
.tb-item.on { background:var(--accent-soft); color:var(--accent); }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:10px; padding-right:14px; }
.tb-icon-btn { border:none; background:transparent; color:#33475b; cursor:pointer; padding:6px; border-radius:8px; }
[data-theme="dark"] .tb-icon-btn { color:var(--muted); }
.tb-icon-btn:hover { background:rgba(22,40,60,0.06); }
.tb-icon-btn svg { width:17px; height:17px; }
.tb-account { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:8px; }
.tb-avatar { width:28px; height:28px; border-radius:50%; background:#111; display:flex; align-items:center; justify-content:center; font-size:13px; }
.tb-acc-text .n { font-size:12px; font-weight:700; line-height:1.2; }
.tb-acc-text .p { font-size:10.5px; color:var(--muted); line-height:1.2; }
.tb-logout { border:none; background:transparent; color:var(--muted); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:6px 8px; border-radius:8px; }
.tb-logout:hover { color:var(--text); background:rgba(22,40,60,0.06); }
.mode { font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:99px; letter-spacing:0.03em; }
.mode.test { background:rgba(185,80,0,0.12); color:#b95000; }
.mode.live { background:rgba(0,135,90,0.12); color:var(--green); }

/* ---- layout: blue gradient sidebar + main ---- */
.layout { display:flex; min-height:calc(100vh - 48px); }
/* The sidebar is its own scroll container (sticky, full height, overflow on the
   nav), so the page scrolling never moves it and shell.js can put it back where
   it was on the next page load. Do not give .side or .layout an overflow of
   their own: two scrollers makes the restore land in the wrong one. */
.side { width:190px; background:linear-gradient(180deg,var(--side-a),var(--side-b)); flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:48px; height:calc(100vh - 48px); }
.side nav { flex:1; padding:10px 8px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.side nav::-webkit-scrollbar { display:none; }
.side nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; color:#eaf3ff; text-decoration:none; font-size:13.5px; font-weight:600; margin-bottom:3px; white-space:nowrap; position:relative; }
.side nav a:hover { background:rgba(255,255,255,0.09); color:#fff; }
.side nav a.on { background:rgba(255,255,255,0.16); color:#fff; font-weight:700; }
.side nav a .ic svg { width:18px; height:18px; }
.side nav a .lb { flex:1; overflow:hidden; text-overflow:ellipsis; }
.side .side-h { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,0.45); padding:14px 12px 5px; white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:6px; cursor:pointer; user-select:none; }
.side .side-h.plain { cursor:default; }
.side .side-h:hover { color:rgba(255,255,255,0.8); }
.side .side-h .cv svg { width:13px; height:13px; transition:transform .15s; }
.side .side-h.plain .cv { display:none; }
.side .side-grp.closed .side-items { display:none; }
.side .side-grp.closed .side-h .cv svg { transform:rotate(-90deg); }
.side .side-sep { height:1px; background:rgba(255,255,255,0.12); margin:12px 10px 10px; }
/* Pin: a star that only shows on hover (or when it is already pinned), so the
   menu reads the same as it always did until somebody reaches for it. */
.side nav a .pinb { display:flex; align-items:center; opacity:0; color:rgba(255,255,255,0.55); flex-shrink:0; cursor:pointer; padding:2px; border-radius:5px; }
.side nav a .pinb svg { width:13px; height:13px; fill:none; }
.side nav a:hover .pinb { opacity:.7; }
.side nav a .pinb:hover { opacity:1; color:#fff; }
.side nav a .pinb.on { opacity:1; color:#ffd15c; }
.side nav a .pinb.on svg { fill:currentColor; }
.side .side-grp.pinned .side-h { padding-top:6px; }
.side .foot { padding:10px; }
.side .foot button { border:none; background:transparent; color:rgba(255,255,255,0.55); cursor:pointer; padding:8px; border-radius:8px; }
.side .foot button:hover { color:#fff; background:rgba(255,255,255,0.09); }
.side .foot button svg { width:18px; height:18px; transition:transform .18s; }
/* collapsed sidebar: icons only, so the group headers become rules and the
   pins lose their star (there is no room, and the order still puts them first) */
.layout.side-min .side { width:56px; }
.layout.side-min .side nav a .lb { display:none; }
.layout.side-min .side nav a .pinb { display:none; }
.layout.side-min .side .side-h { font-size:0; padding:0; height:1px; background:rgba(255,255,255,0.12); margin:12px 10px 10px; cursor:default; }
.layout.side-min .side .side-h .cv { display:none; }
.layout.side-min .side .side-grp.closed .side-items { display:block; }
.layout.side-min .side .foot button svg { transform:rotate(180deg); }
/* A 1366 x 768 counter laptop, and the same screen at 125 percent scaling
   (1093 x 614 CSS pixels), lose enough height that the menu has to scroll. That
   is what the scroll memory is for; tighten the rows a little so more of it
   fits before it does. */
@media (max-height:760px){
  .side nav a { padding:8px 12px; margin-bottom:2px; }
  .side .side-h { padding:10px 12px 4px; }
  .side .side-sep { margin:8px 10px 7px; }
}

/* ---- main ---- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:15px 28px; background:var(--card); border-bottom:1px solid var(--border); }
.page-head h1 { font-size:22px; font-weight:700; letter-spacing:-0.01em; }
.page-head .sub { color:var(--muted); font-size:12.5px; margin-top:2px; font-weight:500; }
#page { padding:24px 28px 90px; }

/* ---- components ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--border-2); background:var(--card); color:#33475b; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; transition:background .12s, border-color .12s; }
[data-theme="dark"] .btn { color:var(--text); }
.btn:hover { background:var(--bg-2); border-color:#9fb0c4; }
.btn.pink { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.pink:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn.sm { padding:5px 11px; font-size:12px; border-radius:7px; }
input,select,textarea { background:var(--card); border:1px solid var(--border-2); color:var(--text); border-radius:8px; padding:9px 12px; font-size:13.5px; font-family:inherit; }
input::placeholder,textarea::placeholder { color:#9aa8ba; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:20px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column-reverse; justify-content:flex-end; }
.stat .v { font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
.stat .v.pink { color:var(--text); }
.stat .l { color:var(--muted); font-size:12.5px; margin-bottom:6px; font-weight:600; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h3 { font-size:14px; font-weight:700; margin-bottom:12px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table-wrap { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow-x:auto; box-shadow:var(--shadow); margin-bottom:16px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--card); white-space:nowrap; }
td { padding:12px 14px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
tr.click { cursor:pointer; } tr.click:hover td { background:var(--bg-2); }
.pill { font-size:11px; padding:2px 9px; border-radius:99px; font-weight:700; white-space:nowrap; }
.pill.paid,.pill.approved,.pill.customer { background:rgba(0,135,90,0.12); color:var(--green); }
.pill.pending,.pill.lead { background:rgba(185,80,0,0.12); color:#b95000; }
.pill.refunded,.pill.rejected { background:rgba(217,48,37,0.1); color:var(--red); }
.pill.upsell,.pill.coaching { background:var(--accent-soft); color:var(--accent); }
.pill.club { background:var(--pink-soft); color:var(--pink); }
.muted { color:var(--muted); font-size:13px; }
.empty { color:var(--muted); text-align:center; padding:44px 0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#16283c; color:#fff; padding:10px 22px; border-radius:8px; font-size:13.5px; font-weight:600; display:none; z-index:100; box-shadow:0 6px 24px rgba(17,17,17,0.25); }
[data-theme="dark"] .toast { background:#e8edf3; color:#16283c; }

/* login overlay */
#pw-login { position:fixed; inset:0; background:var(--bg-2); z-index:200; display:flex; align-items:center; justify-content:center; }
#pw-login .box { width:350px; text-align:center; padding:36px 32px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
#pw-login .mark { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--side-a),var(--side-b)); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
#pw-login .mark svg { width:22px; height:22px; }
#pw-login h2 { font-size:19px; font-weight:800; }
#pw-login input { width:100%; margin:16px 0 10px; }

/* app grid */
.apps { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.app-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .15s, border-color .15s; display:block; }
.app-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.app-card .ic { font-size:26px; margin-bottom:8px; }
.app-card .n { font-weight:700; font-size:15px; }
.app-card .d { color:var(--muted); font-size:12.5px; margin-top:3px; }

/* ---- editor components ---- */
.back { display:inline-flex; align-items:center; gap:7px; color:var(--accent); text-decoration:none; font-size:13px; font-weight:600; margin-bottom:14px; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; }
.back:hover { color:var(--accent-dark); }
.subtabs { display:flex; gap:6px; margin-bottom:18px; max-width:100%; overflow-x:auto; }
.subtabs button { border:none; background:none; color:var(--muted); font-family:inherit; font-size:13.5px; font-weight:600; padding:10px 22px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.subtabs button:hover { background:var(--bg-2); color:var(--text); }
.subtabs button.on { background:var(--accent-soft); color:var(--accent); font-weight:700; }
[data-theme="dark"] .subtabs button.on { color:#fff; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:12.5px; color:var(--text); font-weight:600; margin-bottom:6px; }
.field input,.field select,.field textarea { width:100%; }
.field textarea { resize:vertical; min-height:74px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }
.switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .sl { position:absolute; inset:0; background:#c3ccd9; border-radius:99px; transition:background .15s; cursor:pointer; }
.switch .sl::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + .sl { background:var(--accent); }
.switch input:checked + .sl::before { transform:translateX(16px); }
.sub-block { border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:10px; background:var(--bg-2); }
.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:18px; align-items:start; }
@media (max-width:1100px){ .editor-grid{ grid-template-columns:1fr; } }
.canvas { background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:34px 28px; background-image:radial-gradient(circle, #dfe6ee 1px, transparent 1px); background-size:16px 16px; min-height:320px; }
.canvas .canvas-label { font-size:12px; font-weight:600; color:#64748b; letter-spacing:.03em; margin-bottom:18px; }
[data-theme="dark"] .canvas { background-color:#11151b; background-image:radial-gradient(circle, #2a323d 1px, transparent 1px); }
/* preview: scoped clone of the checkout look (checkout-style.css) */
.pv { max-width:430px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:#0f172a; }
[data-theme="dark"] .pv { color:#e8eaf0; }
.pv .pv-sec { font-size:17px; font-weight:600; letter-spacing:-0.01em; margin:22px 0 12px; }
.pv .pv-sec:first-child { margin-top:0; }
.pv .pv-line { display:flex; gap:12px; align-items:flex-start; padding:4px 0 14px; }
.pv .pv-line img { width:58px; border-radius:6px; }
.pv .pv-line .n { font-size:14.5px; font-weight:500; flex:1; }
.pv .pv-line .n .d2 { font-size:12px; color:#64748b; margin-top:3px; }
.pv .pv-line .p { font-size:14.5px; font-weight:600; white-space:nowrap; }
.pv .pv-sum { display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-top:1px solid #e2e8f0; }
.pv .pv-sum.due { font-weight:700; font-size:14.5px; }
.pv .pv-sum.due .cur { color:#64748b; font-size:10px; font-weight:600; margin-right:5px; vertical-align:2px; }
.pv .pv-bump { position:relative; background:#ecedfb; border:1.5px solid var(--pink); border-radius:10px; padding:15px 70px 15px 16px; margin-bottom:12px; color:#0f172a; }
.pv .pv-bump .t { font-size:14px; font-weight:600; margin-bottom:3px; }
.pv .pv-bump .pr { font-size:13px; margin-bottom:8px; }
.pv .pv-bump .pr s { color:#64748b; margin-right:6px; }
.pv .pv-bump .d strong { color:#0f172a; font-weight:700; }
.pv .pv-bump .point { position:absolute; right:24px; top:calc(50% - 48px); width:22px; height:22px; animation:pv-point 1.2s ease-in-out infinite; pointer-events:none; }
.pv .pv-bump .point svg { width:22px; height:22px; stroke:var(--pink); display:block; }
@keyframes pv-point { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }
.pv .pv-bump .d { font-size:12.5px; color:#64748b; line-height:1.55; white-space:pre-wrap; }
.pv .pv-bump .add { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:none; background:var(--pink); color:#fff; font-size:21px; line-height:1; box-shadow:0 4px 12px rgba(216,31,38,0.35); pointer-events:none; }
.pv .pv-pay { width:100%; border:none; border-radius:10px; padding:13px; font-size:15px; font-weight:600; background:var(--pink); color:#fff; margin-top:16px; font-family:inherit; pointer-events:none; }
.pv .pv-up { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px 16px; margin-bottom:10px; box-shadow:0 1px 2px rgba(15,23,42,0.05); color:#0f172a; }
.pv .pv-up .st { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--pink); text-transform:uppercase; margin-bottom:4px; }
.pv .pv-up .t { font-size:14px; font-weight:600; }
.pv .pv-up .d { font-size:12.5px; color:#64748b; margin-top:3px; white-space:pre-wrap; }
.pv .pv-up .p2 { font-size:13px; font-weight:700; margin-top:6px; }
/* slide-in detail drawer (contact panel etc.) */
.overlay { position:fixed; inset:0; background:rgba(18,38,63,0.35); z-index:60; display:none; }
.overlay.show { display:block; }
.drawer { position:fixed; top:0; right:-560px; width:540px; max-width:94vw; height:100vh; background:var(--card); z-index:61; box-shadow:-12px 0 40px rgba(18,38,63,0.18); transition:right .22s ease; overflow-y:auto; padding:24px 26px 60px; }
.drawer.show { right:0; }
.row-btns { display:flex; flex-direction:column; gap:2px; }
.row-btns button { border:1px solid var(--border-2); background:var(--card); border-radius:6px; width:24px; height:20px; font-size:10px; cursor:pointer; color:var(--muted); line-height:1; }
.row-btns button:hover { color:var(--text); border-color:var(--accent); }

/* The alert banner (Phase 5c). It sits above the page head on EVERY page, so an
   unhappy review or a stopped kart reaches whoever is standing at the screen
   rather than only whoever opens the page that raised it. */
#pw-alerts:empty { display:none; }
.pw-alert { display:flex; align-items:flex-start; gap:12px; padding:12px 28px; background:var(--pink-soft);
  border-bottom:1px solid var(--border); border-left:4px solid var(--red); }
.pw-alert.info { background:var(--accent-soft); border-left-color:var(--accent); }
.pw-alert.stop { background:var(--pink-soft); border-left-color:var(--red); }
.pw-alert .ic { flex:none; width:20px; height:20px; color:var(--red); }
.pw-alert .ic svg { width:20px; height:20px; }
.pw-alert .t { flex:1; min-width:0; }
.pw-alert .t strong { font-size:14px; display:block; }
.pw-alert .b { font-size:13px; color:var(--text); margin-top:3px; }
.pw-alert .m { font-size:11.5px; color:var(--muted); margin-top:4px; }
.pw-alert .btn { flex:none; }

@media (max-width:760px){
  .layout .side { width:56px; }
  .layout .side nav a .lb { display:none; }
  .layout .side nav a .pinb { display:none; }
  .layout .side .side-h { font-size:0; padding:0; height:1px; background:rgba(255,255,255,0.12); margin:12px 10px 10px; }
  .layout .side .side-h .cv { display:none; }
  .layout .side .side-grp.closed .side-items { display:block; }
  .topbar .tb-side { width:56px; }
  .tb-item { padding:7px 9px; } .tb-item .tb-lb { display:none; }
  .tb-account .tb-acc-text { display:none; }
  .page-head { padding:12px 14px; }
  .pw-alert { padding:10px 14px; flex-wrap:wrap; }
  #page { padding:16px 14px 70px; }
}