/* The Grid shell — The Freedom Trading System brand (PO1): carbon ground, bone text,
   gold accent only, Poppins. Dark is the default interface (owner decision 2026-09-10);
   the theme toggle offers a bone-white variant. Class names unchanged from the vendor
   shell so every page keeps working. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
:root {
  --carbon:#141414; --gold:#C6A75E; --bone:#F4F1EA; --black:#000000;
  --gold-hover:#d9bd78;
  /* semantic aliases the pages use */
  --blue:var(--gold); --blue-dark:var(--gold-hover); --blue-soft:rgba(198,167,94,0.14);
  --pink:var(--gold); --pink-soft:rgba(198,167,94,0.14);
  --accent:var(--gold); --accent-dark:var(--gold-hover); --accent-soft:rgba(198,167,94,0.14);
  --bg:var(--carbon); --bg-2:#1a1a1a; --card:#1a1a1a; --card-2:#202020;
  --border:rgba(244,241,234,0.12); --border-2:rgba(244,241,234,0.24);
  --text:var(--bone); --muted:rgba(244,241,234,0.6);
  --green:var(--gold); --red:#d94a3d; --blue:#4a86c5; --red-soft:rgba(217,74,61,0.16); --blue-soft:rgba(74,134,197,0.16);
  --side-a:var(--carbon); --side-b:var(--carbon);
  --shadow:none;
  --radius:0; --radius-input:2px;
}
[data-theme="light"] {
  --bg:var(--bone); --bg-2:#ece8df; --card:#ffffff; --card-2:#f7f4ee;
  --border:rgba(20,20,20,0.12); --border-2:rgba(20,20,20,0.28);
  --text:var(--black); --muted:rgba(20,20,20,0.6);
  --accent-soft:rgba(198,167,94,0.18); --blue-soft:rgba(198,167,94,0.18); --pink-soft:rgba(198,167,94,0.18);
  --red:#b8362c; --blue:#2f6db3; --red-soft:rgba(184,54,44,0.12); --blue-soft:rgba(47,109,179,0.12);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Poppins',Arial,Helvetica,sans-serif; font-weight:400; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5; }
svg { display:block; }
a { color:var(--gold); }
h1,h2,h3 { font-weight:300; letter-spacing:-0.01em; }
b,strong { font-weight:700; }

/* ---- top bar ---- */
.topbar { display:flex; align-items:center; height:56px; background:var(--carbon); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; color:var(--bone); }
.topbar .tb-side { min-width:210px; flex-shrink:0; display:flex; align-items:center; padding:0 28px 0 18px; }
.tb-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--bone); }
.tb-brand img { height:22px; width:auto; display:block; }
.tb-brand .tb-word { font-size:11px; font-weight:300; letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap; }
.tb-brand .tb-word em { font-style:normal; color:var(--gold); }
.tb-nav { display:flex; align-items:center; gap:4px; height:100%; padding-left:6px; }
.tb-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:0; color:rgba(244,241,234,0.7); text-decoration:none; font-size:12px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; border-bottom:2px solid transparent; }
.tb-item .tb-ic svg { width:16px; height:16px; }
.tb-item:hover { color:var(--bone); }
.tb-item.on { color:var(--gold); border-bottom-color:var(--gold); }
.tb-right { margin-left:auto; display:flex; align-items:center; gap:10px; padding-right:18px; }
.tb-icon-btn { border:none; background:transparent; color:rgba(244,241,234,0.7); cursor:pointer; padding:6px; border-radius:0; }
.tb-icon-btn:hover { color:var(--gold); }
.tb-icon-btn svg { width:17px; height:17px; }
.tb-account { display:flex; align-items:center; gap:10px; padding:4px 8px; }
.tb-avatar { width:28px; height:28px; border-radius:50%; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:13px; }
.tb-acc-text .n { font-size:12px; font-weight:400; line-height:1.2; color:var(--bone); }
.tb-acc-text .p { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,241,234,0.5); line-height:1.4; }
.tb-logout { border:1px solid var(--gold); background:transparent; color:var(--gold); font-family:inherit; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; padding:7px 12px; border-radius:2px; transition:background-color .25s ease, color .25s ease; }
.tb-logout:hover { background:var(--gold); color:var(--black); }
.mode { font-size:10px; font-weight:400; padding:4px 10px; border-radius:0; letter-spacing:0.12em; text-transform:uppercase; border:1px solid var(--border-2); color:var(--bone); }
.mode.test { background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.mode.live { background:var(--gold); border-color:var(--gold); color:var(--black); }

/* ---- layout: carbon sidebar + main ---- */
.layout { display:flex; min-height:calc(100vh - 56px); }
.side { width:210px; background:var(--carbon); border-right:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:56px; height:calc(100vh - 56px); color:var(--bone); }
.side nav { flex:1; padding:12px 0; overflow-y:auto; scrollbar-width:none; }
.side nav::-webkit-scrollbar { display:none; }
.side nav a { display:flex; align-items:center; gap:12px; padding:10px 18px; border-radius:0; border-left:2px solid transparent; color:rgba(244,241,234,0.72); text-decoration:none; font-size:13px; font-weight:400; margin-bottom:1px; white-space:nowrap; transition:color .25s ease; }
.side nav a:hover { color:var(--bone); background:rgba(244,241,234,0.04); }
.side nav a.on { border-left-color:var(--gold); color:var(--gold); background:rgba(198,167,94,0.08); }
.side nav a .ic svg { width:17px; height:17px; }
.side .side-p { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); padding:22px 20px 2px; white-space:nowrap; border-top:1px solid var(--border); margin-top:10px; }
.side .side-soon { display:flex; align-items:center; gap:12px; padding:10px 18px; border-left:2px solid transparent; color:rgba(244,241,234,0.4); cursor:default; font-size:13px; white-space:nowrap; }
.side .side-soon .ic svg { width:17px; height:17px; }
.layout.side-min .side .side-p { font-size:0; padding:0; height:2px; background:var(--gold); margin:12px 14px; border:0; }
/* subsections (15 Oct 2026, Max: make them easy to tell apart): a clear label with a hairline under it */
.side .side-h { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:rgba(244,241,234,0.78); padding:16px 18px 6px; white-space:nowrap; }
.side .side-h::after { content:''; flex:1; height:1px; background:var(--border); }
.layout.side-min .side .side-h { font-size:0; padding:0; height:1px; background:var(--border); margin:12px 14px; }
.layout.side-min .side .side-h::after { display:none; }
.side .side-sep { height:1px; background:var(--border); margin:12px 18px; }
.side .foot { padding:10px; border-top:1px solid var(--border); }
.side .foot button { border:none; background:transparent; color:rgba(244,241,234,0.5); cursor:pointer; padding:8px; border-radius:0; }
.side .foot button:hover { color:var(--gold); }
.side .foot button svg { width:18px; height:18px; transition:transform .18s; }
/* collapsed sidebar */
.layout.side-min .side { width:56px; }
.layout.side-min .side nav a { padding:10px 0; justify-content:center; }
.layout.side-min .side nav a .lb { display:none; }
.layout.side-min .side .side-soon { padding:10px 0; justify-content:center; }
.layout.side-min .side .side-soon .lb { display:none; }
.side .sec-locked { opacity:.35; }
.side a.sec-locked { cursor:not-allowed; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 32px 0; }
.pillar { border:1px solid var(--border); background:var(--card); padding:18px 20px; display:flex; flex-direction:column; }
.pillar h3 { margin:0 0 4px; color:var(--gold); font-size:14px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.pillar p { margin:0 0 14px; color:var(--muted); font-size:13px; min-height:36px; }
.pillar .links { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.pillar .links a, .pillar .links span { border:1px solid var(--border-2); border-radius:0; padding:6px 10px; font-size:12.5px; text-decoration:none; }
.pillar .links span { color:var(--muted); opacity:.6; }
@media (max-width:760px){ .pillars { grid-template-columns:1fr; } }
.layout.side-min .side .side-h { font-size:0; padding:0; height:1px; background:var(--border); margin:12px 14px; }
.layout.side-min .side .foot button svg { transform:rotate(180deg); }

/* ---- 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:22px 32px; background:var(--bg); border-bottom:1px solid var(--border); }
.page-head h1 { font-size:26px; font-weight:300; letter-spacing:-0.02em; }
.page-head .sub { color:var(--muted); font-size:12.5px; margin-top:3px; font-weight:400; }
#page { padding:28px 32px 90px; }

/* ---- components ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:2px; border:1px solid var(--border-2); background:transparent; color:var(--text); font-size:12px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; font-family:inherit; text-decoration:none; transition:background-color .25s ease, border-color .25s ease, color .25s ease; white-space:nowrap; }
.btn:hover { border-color:var(--gold); color:var(--gold); }
.btn.pink { background:var(--gold); border-color:var(--gold); color:var(--black); }
.btn.pink:hover { background:var(--gold-hover); border-color:var(--gold-hover); color:var(--black); }
.btn.sm { padding:6px 11px; font-size:11px; border-radius:2px; }
input,select,textarea { background:rgba(0,0,0,0.25); border:1px solid var(--border-2); color:var(--text); border-radius:var(--radius-input); padding:9px 12px; font-size:13.5px; font-family:inherit; }
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea { background:#fff; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.7; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--gold); box-shadow:none; }
select option { background:var(--card); color:var(--text); }
.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:0; padding:18px 20px 20px; display:flex; flex-direction:column-reverse; justify-content:flex-end; }
.stat .v { font-size:30px; font-weight:300; letter-spacing:-0.02em; color:var(--text); }
.stat .v.pink { color:var(--gold); }
.stat .l { color:var(--muted); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; font-weight:400; }
.card { background:var(--card); border:1px solid var(--border); border-radius:0; padding:22px; margin-bottom:16px; }
.card h3 { font-size:12px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table-wrap { background:var(--card); border:1px solid var(--border); border-radius:0; overflow-x:auto; margin-bottom:16px; }
th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:400; 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:rgba(198,167,94,0.06); }
.pill { font-size:10px; padding:3px 9px; border-radius:0; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--border-2); color:var(--text); }
.pill.paid,.pill.approved,.pill.customer { border-color:var(--gold); color:var(--gold); }
.pill.pending,.pill.lead { background:var(--blue-soft); border-color:var(--blue); color:var(--blue); }
.pill.refunded,.pill.rejected { background:var(--red-soft); border-color:var(--red); color:var(--red); }
.pill.upsell,.pill.coaching { background:var(--accent-soft); border-color:transparent; color:var(--gold); }
.pill.club { background:var(--pink-soft); border-color:transparent; color:var(--gold); }
.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:var(--gold); color:var(--black); padding:10px 22px; border-radius:2px; font-size:13px; font-weight:400; display:none; z-index:100; }

/* password field with an eye toggle */
.pw-wrap { position:relative; }
.pw-wrap input { width:100%; padding-right:44px; }
.pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:var(--muted); cursor:pointer; padding:6px; border-radius:2px; display:flex; }
.pw-eye:hover { color:var(--gold); }
.pw-eye svg { width:18px; height:18px; }

/* login overlay */
#pw-login { position:fixed; inset:0; background:var(--carbon); z-index:200; display:flex; align-items:center; justify-content:center; color:var(--bone); }
#pw-login .box { width:380px; max-width:92vw; text-align:center; padding:40px 32px; background:rgba(244,241,234,0.04); border:1px solid var(--border); border-radius:0; }
#pw-login .mark { display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
#pw-login .mark img { height:28px; width:auto; }
#pw-login h2 { font-size:12px; font-weight:300; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone); }
#pw-login h2 em { font-style:normal; color:var(--gold); }
#pw-login .muted { color:rgba(244,241,234,0.6); margin-top:8px; }
#pw-login input { width:100%; margin:14px 0 0; }
#pw-login .pw-wrap { margin-top:14px; }
#pw-login .pw-wrap input { margin:0; }
#pw-login .btn { margin-top:18px; }

/* 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:0; padding:18px; text-decoration:none; color:inherit; transition:border-color .25s ease; display:block; }
.app-card:hover { border-color:var(--gold); }
.app-card .ic { font-size:26px; margin-bottom:8px; }
.app-card .n { font-weight:400; 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(--gold); text-decoration:none; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:400; margin-bottom:14px; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; }
.back:hover { color:var(--gold-hover); }
.subtabs { display:flex; gap:2px; margin-bottom:18px; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; border-bottom:1px solid var(--border); }
/* 15 Oct 2026 (Max): sliding the tabs sideways also moved them up and down; the buttons' -1px margin made a 1px vertical scroll. Now sideways only. */
.subtabs::-webkit-scrollbar { display:none; }
.subtabs button { flex-shrink:0; white-space:nowrap; }
.subtabs button { border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--muted); font-family:inherit; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:400; padding:10px 16px; border-radius:0; cursor:pointer; white-space:nowrap; }
.subtabs button:hover { color:var(--text); }
.subtabs button.on { color:var(--gold); border-bottom-color:var(--gold); font-weight:400; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:400; 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:var(--border-2); border-radius:99px; transition:background .15s; cursor:pointer; }
.switch .sl::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--bone); top:3px; left:3px; transition:transform .15s; }
.switch input:checked + .sl { background:var(--gold); }
.switch input:checked + .sl::before { transform:translateX(16px); background:var(--black); }
.sub-block { border:1px solid var(--border); border-radius:0; 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-color:var(--card); border:1px solid var(--border); border-radius:0; padding:34px 28px; background-image:radial-gradient(circle, rgba(244,241,234,0.12) 1px, transparent 1px); background-size:16px 16px; min-height:320px; }
.canvas .canvas-label { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
/* preview: scoped clone of the checkout look (checkout-style.css); stays light on purpose */
.pv { max-width:430px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:#0f172a; background:#fff; padding:20px; border-radius:2px; }
.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:#f7f2e6; border:1.5px solid var(--gold); border-radius:4px; 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(--gold); 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(--gold); color:#000; font-size:21px; line-height:1; pointer-events:none; }
.pv .pv-pay { width:100%; border:none; border-radius:4px; padding:13px; font-size:15px; font-weight:600; background:var(--gold); color:#000; margin-top:16px; font-family:inherit; pointer-events:none; }
.pv .pv-up { background:#fff; border:1px solid #e2e8f0; border-radius:4px; padding:14px 16px; margin-bottom:10px; color:#0f172a; }
.pv .pv-up .st { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#8a7238; 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(0,0,0,0.55); 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); border-left:1px solid var(--border); z-index:61; 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:transparent; border-radius:2px; width:24px; height:20px; font-size:10px; cursor:pointer; color:var(--muted); line-height:1; }
.row-btns button:hover { color:var(--gold); border-color:var(--gold); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

.tb-menu, .side-top, .side-veil, .side .side-out { display:none; }
/* phone (15 Oct 2026, Max): no icon-only rail; a Menu button opens the full menu with names; nothing slides sideways */
@media (max-width:760px){
  html, body { overflow-x:clip; } /* clip, not hidden: hidden breaks the sticky top bar on phones */
  .layout { display:block; }
  .main { width:100%; }
  .tb-menu { display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border-2); color:var(--bone); font-family:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 10px; margin-left:12px; cursor:pointer; border-radius:0; }
  .tb-menu svg { width:18px; height:18px; }
  .topbar .tb-side { min-width:0; width:auto; padding:0 0 0 12px; }
  .tb-brand .tb-word { display:none; }
  .topbar .tb-nav, .tb-logout, .tb-account .tb-acc-text { display:none; } /* light/dark stays on phones (19 Oct 2026, Max) */
  .tb-right { gap:8px; padding-right:12px; }
  .layout .side { position:fixed; top:56px; left:0; bottom:0; height:auto; width:min(300px, 86vw); z-index:60; transform:translateX(-102%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.5); }
  body.menu-open .layout .side { transform:none; }
  .side-veil { position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.45); z-index:55; }
  body.menu-open .side-veil { display:block; }
  .side-top { display:block; padding-bottom:6px; border-bottom:1px solid var(--border); margin-bottom:6px; }
  .layout .side nav a, .layout.side-min .side nav a { padding:12px 18px; justify-content:flex-start; font-size:15px; }
  .layout .side nav a .lb, .layout.side-min .side nav a .lb, .layout .side .side-soon .lb { display:inline; }
  .layout.side-min .side { width:min(300px, 86vw); }
  .layout.side-min .side .side-h { font-size:12px; padding:16px 18px 6px; height:auto; background:none; margin:0; }
  .layout.side-min .side .side-h::after { display:block; }
  .side .side-h { font-size:12px; }
  .layout.side-min .side .side-p { font-size:12px; padding:22px 20px 2px; height:auto; background:none; margin:10px 0 0; border-top:1px solid var(--border); }
  .side .foot #pw-collapse { display:none; }
  .side .side-out { display:block; width:100%; text-align:left; color:var(--gold); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:10px 8px; }
  .page-head { padding:14px 14px; }
  #page { padding:16px 14px 70px; }
}

/* markdown reader (Projets, Documents) */
  .md { max-width:1100px; font-size:13.5px; line-height:1.6; }
  .md h1 { font-size:20px; font-weight:500; margin:0 0 12px; }
  .md h2 { font-size:15px; font-weight:600; color:var(--gold); margin:26px 0 8px; text-transform:uppercase; letter-spacing:.08em; }
  .md h3 { font-size:14px; font-weight:600; margin:18px 0 6px; }
  .md table { width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:13px; }
  .md th, .md td { border-bottom:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; }
  .md th { color:var(--muted); font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
  .md pre { background:var(--card); border:1px solid var(--border); padding:12px; overflow:auto; font-size:12px; }
  .md code { font-size:12px; color:var(--gold); }
  .md pre code { color:inherit; }
  .md .tw { overflow-x:auto; }

/* FR | EN switch (9 Oct 2026), square like the site */
.tb-lang { display:flex; border:1px solid var(--border-2); }
.tb-lang button { background:transparent; border:0; color:rgba(244,241,234,0.6); font-family:inherit; font-size:11px; letter-spacing:.08em; padding:6px 9px; cursor:pointer; border-radius:0; }
.tb-lang button.on { background:var(--gold); color:var(--black); }
@media (max-width:700px) { .tb-lang button { padding:5px 7px; } }

/* ===== Glass (15 Oct 2026, Max): the look of the Qolab film (QLB-26-001 style A): frosted glass panels in depth,
   rounded corners, a thin light edge, a warm gold glow. Rounder than the site on purpose (admin only). ===== */
:root { --r-panel:16px; --r-ctl:999px; --r-in:10px; --glass:rgba(244,241,234,0.045); --glass-2:rgba(244,241,234,0.07); --edge:rgba(244,241,234,0.11);
  --depth:0 24px 60px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06); }
html:not([data-theme="light"]) body {
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(198,167,94,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(198,167,94,0.06), transparent 60%),
    linear-gradient(180deg, #121212, #0d0d0d) fixed;
  background-attachment:fixed;
}
.topbar { background:rgba(18,18,18,0.72); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border-bottom-color:var(--edge); }
.side { background:rgba(16,16,16,0.6); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-right-color:var(--edge); }
.side nav a, .side .side-soon { margin:1px 10px; border-radius:var(--r-in); border-left:0; padding-left:12px; padding-right:12px; }
.side nav a.on { background:linear-gradient(90deg, rgba(198,167,94,0.18), rgba(198,167,94,0.05)); box-shadow:inset 0 0 0 1px rgba(198,167,94,0.35); }
.layout.side-min .side nav a { margin:1px 8px; }

.card, .stat, .pillar, .pb-card, .pr-card, .ch-card, .es-card, .sv-card, .app-card, .pace-card, .setbox,
.oc-list, .pr-list, .es-list, .dc-list, .cm-list, .cal-list {
  background:linear-gradient(160deg, var(--glass-2), var(--glass)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--edge) !important; border-radius:var(--r-panel) !important; box-shadow:var(--depth);
}
.card .card, .card .stat, .card .pb-card { box-shadow:none; }
.drawer { background:rgba(22,22,22,0.86); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-left-color:var(--edge); border-radius:var(--r-panel) 0 0 var(--r-panel); }

.btn, .btn.sm, .tb-logout, .tb-menu, .pill, .pillar .links a, .pillar .links span,
.pb-chip, .pr-chip, .dc-chip, .ch-chip, .cal-chip, .subtabs button { border-radius:var(--r-ctl) !important; }
.btn.pink { box-shadow:0 6px 22px -8px rgba(198,167,94,0.55); }
.btn.pink:hover { box-shadow:0 8px 26px -6px rgba(198,167,94,0.7); }
.subtabs { border-bottom:0; gap:6px; padding:4px; background:var(--glass); border:1px solid var(--edge); border-radius:var(--r-ctl); width:max-content; max-width:100%; }
.subtabs button { margin-bottom:0; border-bottom:0; padding:7px 14px; }
.subtabs button.on { background:rgba(198,167,94,0.16); box-shadow:inset 0 0 0 1px rgba(198,167,94,0.4); }
.tb-lang { border-radius:var(--r-ctl); overflow:hidden; border-color:var(--edge); }
input, select, textarea { border-radius:var(--r-in) !important; background:rgba(0,0,0,0.28); border-color:var(--edge); }
input:focus, select:focus, textarea:focus { box-shadow:0 0 0 3px rgba(198,167,94,0.18); }
table { border-collapse:separate; border-spacing:0; }
.toast { border-radius:var(--r-in); }
[data-theme="light"] { --glass:rgba(255,255,255,0.7); --glass-2:rgba(255,255,255,0.9); --edge:rgba(20,20,20,0.10); --depth:0 18px 40px -22px rgba(0,0,0,.25); }
[data-theme="light"] .topbar, [data-theme="light"] .side { background:rgba(20,20,20,0.92); }
.pill { display:inline-flex; align-items:center; align-self:center; line-height:1.3; }

/* ---- Voice (15 Oct 2026) ---- */
.tb-voice { display:flex; align-items:center; gap:7px; background:rgba(198,167,94,0.12); border:1px solid rgba(198,167,94,0.45); color:var(--gold); font-family:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border-radius:999px; cursor:pointer; }
.tb-voice svg { width:16px; height:16px; }
.tb-voice.on { background:var(--gold); color:#141414; box-shadow:0 0 0 6px rgba(198,167,94,0.18); animation:vxpulse 1.2s ease-in-out infinite; }
@keyframes vxpulse { 50% { box-shadow:0 0 0 10px rgba(198,167,94,0.08); } }
@media (max-width:760px){ .tb-voice span { display:none; } .tb-voice { padding:8px; } }
.vx { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); width:min(520px, calc(100vw - 24px)); z-index:80; padding:16px 18px; border-radius:18px;
  background:rgba(22,22,22,0.82); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); border:1px solid rgba(244,241,234,0.12);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); color:var(--bone); display:flex; flex-direction:column; gap:10px; }
.vx[hidden] { display:none; }
.vx-top { display:flex; align-items:center; gap:10px; }
.vx-orb { width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px rgba(198,167,94,.7); }
.vx.live .vx-orb, .vx.busy .vx-orb { animation:vxorb 1s ease-in-out infinite; }
@keyframes vxorb { 50% { transform:scale(1.35); opacity:.6; } }
.vx.err .vx-orb { background:#d94a3d; box-shadow:0 0 14px rgba(217,74,61,.7); }
.vx-st { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,241,234,0.7); flex:1; }
.vx-x { background:none; border:0; color:rgba(244,241,234,0.6); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.vx-heard { font-size:13px; color:rgba(244,241,234,0.6); font-style:italic; }
.vx-say { font-size:16px; line-height:1.45; }
.vx-say:empty, .vx-heard:empty, .vx-act:empty { display:none; }
.vx-act { display:flex; gap:8px; }
.vx-type { display:flex; gap:8px; }
.vx-type input { flex:1; min-width:0; }

/* iPhone home-screen app (19 Oct 2026, Max): the dark top bar runs under the status bar instead of a white band. */
.topbar { padding-top:env(safe-area-inset-top); height:calc(56px + env(safe-area-inset-top)); }
@media (max-width:760px){
  .layout .side { top:calc(56px + env(safe-area-inset-top)); }
  .side-veil { top:calc(56px + env(safe-area-inset-top)); }
}

/* Side panels follow the theme (19 Oct 2026, Max: the Contacts panel was dark with light-theme text and white boxes). */
[data-theme="light"] .drawer { background:rgba(250,248,243,0.94); }
/* Old « sub-block » boxes get the glass look on every page (19 Oct 2026, Max: some sections did not match). */
.sub-block { background:var(--glass); border-color:var(--edge); border-radius:var(--r-panel); }
/* Harmony pass (19 Oct 2026, Max): no off-brand blue status pills, lighter bold in tables, like the rest of the glass look. */
.pill.pending, .pill.lead { background:transparent; border-color:var(--border-2); color:var(--muted); }
table td strong, table td b { font-weight:500; }
/* Same corners everywhere, from the Follow-ups page (19 Oct 2026, Max): panels round like cards, small labels and tabs round like buttons. */
.pr-stat, .pr-mod, .cal-wrap, .pb-cal, .sv-sum div, .cal-note, .cm-formats label, .pb-chans label {
  border-radius:var(--r-panel) !important; border-color:var(--edge) !important;
}
.pr-st, .pb-st, .ch-etat, .dc-etat, .est, .cal-seg button, .cm-tabs button, .tabs button, .ch-tick, .vz-top select { border-radius:var(--r-ctl) !important; }
.dc-frame, .rv-frame, .kb-drawer, .cal-drawer { border-radius:var(--r-panel) 0 0 var(--r-panel); }
.dc-frame, .rv-frame { border-radius:var(--r-panel) !important; }

/* Voice on phones (19 Oct 2026, Max): a big button at the bottom under the thumb; while it listens, the panel sits just above it with bars that follow the voice. */
.vx-fab { display:none; }
.vx-wave { display:none; align-items:center; justify-content:center; gap:5px; height:34px; margin:6px 0 2px; }
.vx-wave i { display:block; width:5px; height:100%; border-radius:3px; background:var(--gold); transform:scaleY(.15); transform-origin:center; transition:transform .08s linear; }
.vx.live .vx-wave { display:flex; }
.vx.live .vx-wave i { animation:vxbar 1s ease-in-out infinite; }
.vx.live .vx-wave i:nth-child(2){animation-delay:.1s} .vx.live .vx-wave i:nth-child(3){animation-delay:.2s} .vx.live .vx-wave i:nth-child(4){animation-delay:.3s} .vx.live .vx-wave i:nth-child(5){animation-delay:.2s} .vx.live .vx-wave i:nth-child(6){animation-delay:.1s}
@keyframes vxbar { 50% { opacity:.55; } }
@media (max-width:760px){
  .tb-voice { display:none !important; }
  .vx-fab { display:flex; align-items:center; justify-content:center; position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); width:64px; height:64px; border-radius:50%; border:0; background:var(--gold); color:#141414; z-index:81; box-shadow:0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 6px rgba(198,167,94,.16); cursor:pointer; }
  .vx-fab svg { width:26px; height:26px; }
  .vx-fab.on { animation:vxpulse 1.2s ease-in-out infinite; box-shadow:0 0 0 10px rgba(198,167,94,.22); }
  .vx { bottom:calc(96px + env(safe-area-inset-bottom)); }
  body.menu-open .vx-fab { display:none; }
  .main { padding-bottom:110px; }
}

/* Phones (19 Oct 2026, Max: « missing part of the menu on top, and I can't scroll »): the top bar fits, the side menu scrolls */
@media (max-width:760px){
  .topbar { overflow:hidden; }
  .tb-menu span { display:none; }
  .tb-menu { padding:7px 9px; margin-left:10px; }
  .topbar .tb-side { padding-left:10px; }
  .tb-brand img { height:18px; }
  .tb-account { display:none; }
  .tb-right { gap:6px; padding-right:10px; }
  #demo-pill { font-size:10px !important; padding:5px 9px !important; letter-spacing:.06em !important; white-space:nowrap; }
  .layout .side { display:flex; flex-direction:column; overflow:hidden; }
  .layout .side nav { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width:400px){ .tb-brand { display:none; } }

/* Consistency pass (20 Oct 2026, Max: « make sure the radius is consistent everywhere… the pastel colors, easier on the eye
   when there are many boxes »). Every table box, list row and stat tile gets the same corners; stat tiles get a pastel top line. */
.table-wrap { border-radius:var(--r-panel) !important; border-color:var(--edge) !important; background:linear-gradient(160deg, var(--glass-2), var(--glass)) !important; box-shadow:var(--depth); }
.table-wrap table { border-radius:var(--r-panel); }
.card > table, .card .table-wrap { border-radius:var(--r-in) !important; overflow:hidden; }
.card .table-wrap { box-shadow:none; }
.oc-row { border-radius:var(--r-in); border-color:var(--edge) !important; background:linear-gradient(160deg, var(--glass-2), var(--glass)) !important; }
.oc-list { background:none !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.stats > .stat, .pr-top > .pr-stat, .p-stats > .p-stat { border-top:3px solid var(--pc, #b9aee0) !important; }
.stats > .stat:nth-child(6n+1), .pr-top > .pr-stat:nth-child(6n+1), .p-stats > .p-stat:nth-child(6n+1) { --pc:#86c9a0; }
.stats > .stat:nth-child(6n+2), .pr-top > .pr-stat:nth-child(6n+2), .p-stats > .p-stat:nth-child(6n+2) { --pc:#9cc3e6; }
.stats > .stat:nth-child(6n+3), .pr-top > .pr-stat:nth-child(6n+3), .p-stats > .p-stat:nth-child(6n+3) { --pc:#e8c27a; }
.stats > .stat:nth-child(6n+4), .pr-top > .pr-stat:nth-child(6n+4), .p-stats > .p-stat:nth-child(6n+4) { --pc:#e7a9b8; }
.stats > .stat:nth-child(6n+5), .pr-top > .pr-stat:nth-child(6n+5), .p-stats > .p-stat:nth-child(6n+5) { --pc:#b9aee0; }
.stats > .stat:nth-child(6n+6), .pr-top > .pr-stat:nth-child(6n+6), .p-stats > .p-stat:nth-child(6n+6) { --pc:#a8d5ba; }
/* Section titles that sit on the page (BY PRODUCT, SUBSCRIBERS…) get the same small gold label as card titles */
h3.sec, .sec-h { color:var(--gold); }
/* Client spaces list: same rounded rows as One Calls (20 Oct 2026) */
.es-row { border-radius:var(--r-in); border:1px solid var(--edge) !important; border-left:3px solid transparent !important; background:linear-gradient(160deg, var(--glass-2), var(--glass)) !important; }
.es-row.new { border-left-color:var(--gold) !important; }
.es-list { background:none !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.oc-row { border-left-width:3px !important; }
/* Voice, live like the website Mia (22 Oct 2026): Mia's gold waveform, the last lines of the call, an end button */
.vx-mia { display:block; width:100%; height:96px; margin:8px 0 4px; }
.vx-log { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.vx-log:empty { display:none; }
.vx-log p { margin:0; padding:8px 12px; border-radius:12px; font-size:14.5px; line-height:1.45; max-width:90%; }
.vx-log p.mia { align-self:flex-start; background:rgba(244,241,234,.06); border:1px solid rgba(244,241,234,.12); }
.vx-log p.me { align-self:flex-end; background:rgba(198,167,94,.14); }
.vx-end { display:none; width:100%; margin-top:10px; height:38px; border-radius:999px; background:none; border:1px solid rgba(244,241,234,.3); color:inherit; font:inherit; font-size:13px; letter-spacing:.06em; cursor:pointer; }
.vx.in-call .vx-end { display:block; }
.vx.speaking .vx-orb, .vx.live .vx-orb { animation:vxorb 1s ease-in-out infinite; }
.vx .vx-type { margin-top:8px; }

/* Menu groups (22 Oct 2026, Max: more visual separation): pastel colour per sub-group, a click on the title folds it. */
.side button.side-h { width:100%; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; color:var(--gc); }
.side button.side-h .gdot { width:7px; height:7px; border-radius:50%; background:var(--gc); flex:none; }
.side button.side-h .gchev { width:12px; height:12px; flex:none; opacity:.6; transition:transform .2s; order:3; }
.side button.side-h.shut .gchev { transform:rotate(-90deg); }
.side button.side-h:hover { color:var(--text, #f4f1ea); }
.side button.side-h:focus-visible { outline:2px solid var(--gc); outline-offset:-2px; border-radius:8px; }
.side .side-g { position:relative; }
.side .side-g::before { content:''; position:absolute; left:10px; top:4px; bottom:4px; width:2px; border-radius:2px; background:var(--gc); opacity:.35; }
.side .side-g.shut { display:none; }
.side .side-g a.on { box-shadow: inset 3px 0 0 var(--gc); }
.layout.side-min .side button.side-h { font-size:0; padding:0; height:3px; background:var(--gc); margin:12px 14px; width:auto; border-radius:2px; opacity:.6; }
.layout.side-min .side button.side-h .gdot, .layout.side-min .side button.side-h .gchev { display:none; }
.layout.side-min .side .side-g.shut { display:block; }
.layout.side-min .side .side-g::before { display:none; }
@media (prefers-reduced-motion: reduce) { .side button.side-h .gchev { transition:none; } }
.side button.side-h::after { order:2; }

/* Release band (23 Oct 2026): a new version is out; one click reloads. Pastel purple, under the top bar, every copy of One. */
.pw-release { position:sticky; top:56px; z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:9px 20px; background:#b9aee0; color:#141414; font-size:13.5px; border-bottom:1px solid rgba(20,20,20,.12); }
.pw-release .rl-t { font-weight:600; letter-spacing:.02em; }
.pw-release .rl-n { flex:1; min-width:160px; opacity:.85; }
.pw-release .rl-b { display:flex; gap:12px; align-items:center; margin-left:auto; }
.pw-release .btn { background:#141414; color:#F4F1EA; border-color:#141414; }
.pw-release .rl-l { color:#141414; font-size:12.5px; text-decoration:underline; }
.side-ver { font-size:10.5px; color:var(--muted); text-decoration:none; letter-spacing:.06em; margin-right:auto; padding-left:6px; font-variant-numeric:tabular-nums; }
.side-ver:hover { color:var(--gold); }
.side-min .side-ver { display:none; }
@media (max-width:760px) { .pw-release { top:calc(56px + env(safe-area-inset-top)); padding:9px 14px; } }
.pw-release[hidden] { display:none; }

/* New version banner (23 Oct 2026) */
#pw-newv { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:14px; padding:10px 14px 10px 18px; border:1px solid var(--gold); background:var(--card); color:var(--text); font-size:13px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); max-width:calc(100vw - 32px); }
@media (max-width:760px){ #pw-newv { bottom:calc(96px + env(safe-area-inset-bottom)); } }