/* OneOS 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=Outfit:wght@300;400;500;600;700&display=swap');
:root {
  --carbon:#0b0c12; --gold:#8EA2FF; --bone:#F4F5FA; --black:#000000;
  --gold-hover:#b3c0ff; --gold-rgb:142,162,255; /* the key colour: a client can pick their own (Réglages > Apparence), shell.js PW.setAccent */
  /* semantic aliases the pages use */
  --blue:var(--gold); --blue-dark:var(--gold-hover); --blue-soft:rgba(var(--gold-rgb),0.14);
  --pink:var(--gold); --pink-soft:rgba(var(--gold-rgb),0.14);
  --accent:var(--gold); --accent-dark:var(--gold-hover); --accent-soft:rgba(var(--gold-rgb),0.14);
  --bg:var(--carbon); --bg-2:#12141c; --card:#12141c; --card-2:#171a24;
  --border:rgba(244,245,250,0.12); --border-2:rgba(244,245,250,0.24);
  --text:var(--bone); --muted:rgba(244,245,250,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:#e9ebf2; --card:#ffffff; --card-2:#f7f8fb;
  --border:rgba(11,12,18,0.12); --border-2:rgba(11,12,18,0.28);
  --text:var(--black); --muted:rgba(11,12,18,0.6);
  --accent-soft:rgba(var(--gold-rgb),0.18); --blue-soft:rgba(var(--gold-rgb),0.18); --pink-soft:rgba(var(--gold-rgb),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:'Outfit',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,245,250,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,245,250,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,245,250,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,245,250,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,245,250,0.04); }
.side nav a.on { border-left-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb),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,245,250,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,245,250,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,245,250,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(var(--gold-rgb),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,245,250,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,245,250,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,245,250,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:#6f80e0; 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,245,250,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,245,250,0.045); --glass-2:rgba(244,245,250,0.07); --edge:rgba(244,245,250,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(var(--gold-rgb),0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(var(--gold-rgb),0.06), transparent 60%),
    linear-gradient(180deg, #121212, #0d0d0d) fixed;
  background-attachment:fixed;
}
/* Phone (29 Oct 2026, Max: white bands on iPhone): iPhone fills the status bar and the pull-past-the-end area with the
   page's plain colour. The gradient above has none (the shorthand resets it), so iPhone used white. */
html { background-color:var(--bg); }
html:not([data-theme="light"]), html:not([data-theme="light"]) body { background-color:#0d0d0d; }
.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(var(--gold-rgb),0.18), rgba(var(--gold-rgb),0.05)); box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),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, .mm-stat, .mm-box, .nj-num, .nj-box, .nj-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, .mm-chip, .mm-pill, .subtabs button { border-radius:var(--r-ctl) !important; }
/* Cerveau (28 Oct 2026, Max: « accorde les grilles en radius à notre design habituel ») */
.mm-box, .nj-list { overflow:hidden; } /* 90 jours too (28 Oct 2026, Max: « same for the 90 ») */
.mm-stat { border-top:3px solid #b9a7e6 !important; } .mm-stat:nth-child(2) { border-top-color:#a8d5ba !important; } .mm-stat:nth-child(3) { border-top-color:#e6d48f !important; }
.mm-rules textarea { border-radius:var(--r-panel) var(--r-panel) 0 0; }
.btn.pink { box-shadow:0 6px 22px -8px rgba(var(--gold-rgb),0.55); }
.btn.pink:hover { box-shadow:0 8px 26px -6px rgba(var(--gold-rgb),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(var(--gold-rgb),0.16); box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),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(var(--gold-rgb),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(11,12,18,0.10); --depth:0 18px 40px -22px rgba(0,0,0,.25); }
[data-theme="light"] .topbar, [data-theme="light"] .side { background:rgba(11,12,18,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(var(--gold-rgb),0.12); border:1px solid rgba(var(--gold-rgb),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:#0b0c12; box-shadow:0 0 0 6px rgba(var(--gold-rgb),0.18); animation:vxpulse 1.2s ease-in-out infinite; }
@keyframes vxpulse { 50% { box-shadow:0 0 0 10px rgba(var(--gold-rgb),0.08); } }
@media (max-width:760px){ .tb-voice span { display:none; } .tb-voice { padding:8px; } }
/* The call window (2 Nov 2026, Max: « remove the square box »): no box. The robot head floats over the page, which darkens from the bottom
   (the top stays readable and clickable); under it, who speaks, what you said, what they say in one text box, then the typing field. */
.vx { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); width:min(600px, calc(100vw - 32px)); z-index:80; color:var(--bone);
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.vx[hidden], .vx[hidden] + .vx-dim { display:none; }
.vx-dim { position:fixed; left:0; right:0; bottom:0; height:85vh; z-index:79; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,18,.97) 0%, rgba(11,12,18,.93) 50%, rgba(11,12,18,.74) 72%, rgba(11,12,18,0) 100%);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(to top, #000 58%, transparent 96%); mask-image:linear-gradient(to top, #000 58%, transparent 96%); }
.vx-top { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:-4px; }
.vx-orb { width:9px; height:9px; border-radius:50%; background:var(--eq, var(--gold)); box-shadow:0 0 12px var(--eq, rgba(var(--gold-rgb),.7)); transition:background .4s, box-shadow .4s; } /* the dot takes the colour of whoever is speaking */
.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-qui { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); }
.vx-qui[hidden] { display:none; }
.vx-st { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,245,250,0.8); text-align:center; }
.vx-x { position:absolute; top:0; right:0; width:36px; height:36px; border-radius:50%; border:1px solid rgba(244,245,250,.18); background:rgba(11,12,18,.45); color:rgba(244,245,250,.75); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.vx-x:hover { color:var(--bone); border-color:rgba(244,245,250,.4); }
.vx-heard { font-size:14px; font-style:italic; color:rgba(244,245,250,0.55); text-align:center; max-width:92%; }
.vx-heard:empty, .vx-act:empty { display:none; }
.vx-act { display:flex; justify-content:center; gap:10px; }
.vx-act .btn { color:var(--bone); border-color:rgba(244,245,250,.3); }
.vx-act .btn.pink { color:#0b0c12; border-color:var(--gold); }
.vx-type { width:100%; display:flex; align-items:center; gap:6px; height:50px; padding:0 6px 0 20px; border-radius:999px; border:1px solid rgba(244,245,250,.16); background:rgba(11,12,18,.5); }
.vx-type:focus-within { border-color:rgba(244,245,250,.32); }
.vx-type input { flex:1; min-width:0; height:100%; background:transparent; border:0; outline:0; color:var(--bone); font:inherit; font-size:15px; padding:0; }
.vx-type input::placeholder { color:rgba(244,245,250,.42); }
.vx-type button { flex:none; width:38px; height:38px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.vx-type button svg { width:18px; height:18px; }
.vx-send { background:rgba(244,245,250,.10); color:var(--bone); }
.vx-mic { background:var(--eq, var(--gold)); color:#0b0c12; }
.vx.in-call .vx-mic, .vx.no-mic .vx-mic { display:none; }

/* 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; }
/* Pages that were still square (29 Oct 2026, Max on Charles’s One: Pistes, One Creator, Domaine, Textes du site): same corners as the rest. */
.pi-stat, .pi-col, .cr-sec, .dm-sec, .tx-sec, .tx-top { 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); }
/* Funnels (2 Nov 2026): same glass panels; the bars are rounded too. */
.lf-box, .lf-steps, .lf-camp, .lf-table, .lf-mail, .lf-list { border-radius:var(--r-panel) !important; border:1px solid var(--edge) !important; background:linear-gradient(160deg, var(--glass-2), var(--glass)) !important; box-shadow:var(--depth); } /* Lead finder, 8 Nov 2026 */
.fn-stat, .fn-weak, .fn-steps, .fn-team { 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); }
.fn-weak { border-color:var(--gold) !important; }
.fn-steps { overflow:hidden; } .fn-step, .fn-ph { border-color:var(--edge) !important; }
.fn-track { border-radius:999px; border-color:var(--edge) !important; background:var(--glass); overflow:hidden; } .fn-fill { border-radius:999px; } .fn-track .n { left:12px; }
.fn-bud input { border-radius:var(--r-in); }
.pi-stat:nth-child(1) { border-top-color:#b9a7e6 !important; } .pi-stat:nth-child(2) { border-top-color:#e6d48f !important; } .pi-stat:nth-child(3) { border-top-color:#e7a9b8 !important; } .pi-stat:nth-child(4) { border-top-color:#9cc3e6 !important; }
.pi-col.hot { border-top-color:var(--gold) !important; } .pi-col.over { border-color:var(--gold) !important; }
.pi-card, .cr-frame, .cr-pdf, .cr-vid, .cr-drop, .mj-calf, .row-ev, .fut { border-radius:var(--r-in) !important; }
.cr-frame, .cr-pdf, .cr-vid, .eq-rows { overflow:hidden; } .eq-rows { border-radius:var(--r-in); }
.cr-bar { border-radius:var(--r-ctl); } .cr-bar span { border-radius:inherit; }
.pi-stages button, .pi-chips button, .mm-chip, .mm-pill { 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:#0b0c12; z-index:81; box-shadow:0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 6px rgba(var(--gold-rgb),.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(var(--gold-rgb),.22); }
  .vx { bottom:calc(20px + env(safe-area-inset-bottom)); width:calc(100vw - 32px); }
  .vx:not([hidden]) ~ .vx-fab { display:none; } /* the window has its own mic and End */
  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; }
/* Call window, text (2 Nov 2026): one box with what the agent is saying (the last lines of this turn, older ones faded), an End link */
.vx-mia { display:none; }
.vx-log { width:100%; display:flex; flex-direction:column; gap:8px; max-height:40vh; overflow-y:auto; padding:15px 20px; border-radius:16px;
  background:rgba(22,23,30,.74); border:1px solid rgba(244,245,250,.10); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.vx-log:empty { display:none; }
.vx-log p { margin:0; font-size:17px; line-height:1.5; white-space:pre-wrap; }
.vx-log p:not(:last-child) { opacity:.55; font-size:15px; }
.vx-end { display:none; background:none; border:0; color:rgba(244,245,250,.6); font:inherit; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:4px 10px; }
.vx-end:hover { color:var(--bone); }
.vx.in-call .vx-end { display:block; }
.vx.speaking .vx-orb, .vx.live .vx-orb { animation:vxorb 1s ease-in-out infinite; }
@media (max-width:760px){ .vx-log p { font-size:16px; } .vx-log { padding:13px 17px; } }

/* 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, #F4F5FA); }
.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:#0b0c12; font-size:13.5px; border-bottom:1px solid rgba(11,12,18,.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:#0b0c12; color:#F4F5FA; border-color:#0b0c12; }
.pw-release .rl-l { color:#0b0c12; 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)); } }

/* ===== OneOS B2 (28 Oct 2026, Max: « adapt my One, just in terms of looks »). Logo = anneau qui tourne doucement + « neOS ».
   Couleurs : noir froid, blanc froid, accent pervenche (PW.setAccent garde le choix d'un client). Projet 1OS-26-013. ===== */
.tb-brand img { display:none !important; }
.tb-brand::before { content:''; width:17px; height:17px; flex:none; border-radius:50%; margin-right:-9.5px; transform-origin:50% 50%;
  background:conic-gradient(from 200deg,#7b5cff,#3fd0ff,#2fe6b0,#3fd0ff,#b04dff,#7b5cff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.9px),#000 calc(100% - 3.4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.9px),#000 calc(100% - 3.4px));
  filter:drop-shadow(0 0 5px rgba(95,140,255,.55)); animation:oneos-spin 9s linear infinite; }
.tb-brand .tb-word { font-size:23px !important; font-weight:500 !important; letter-spacing:-.035em !important; text-transform:none !important; color:var(--bone); line-height:1; }
.tb-brand .tb-word em { display:none; }
.tb-brand .tb-word::before { content:'ne'; }
.tb-brand .tb-word::after { content:'OS'; font-weight:600; }
[data-theme="light"] .tb-brand .tb-word { color:#F4F5FA; } /* the top bar stays dark in light mode (29 Oct 2026) */
@keyframes oneos-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .tb-brand::before { animation:none; } }
body { font-family:'Outfit',Arial,Helvetica,sans-serif; }
h1,h2,h3 { letter-spacing:-0.02em; }
/* écran de connexion : le logo OneOS B2 (28 Oct 2026) */
#pw-login .oneos-login { display:inline-flex; align-items:center; font-family:'Outfit',Arial,sans-serif; font-size:44px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--text); }
#pw-login .oneos-login b { font-weight:600; }
#pw-login .oneos-login i { width:.74em; height:.74em; margin-right:.02em; border-radius:50%; transform:translateY(.02em); flex:none;
  background:conic-gradient(from 200deg,#7b5cff,#3fd0ff,#2fe6b0,#3fd0ff,#b04dff,#7b5cff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .16em),#000 calc(100% - .16em + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - .16em),#000 calc(100% - .16em + 1px));
  filter:drop-shadow(0 0 10px rgba(95,140,255,.55)); animation:oneos-spin 9s linear infinite; }
#pw-login .mark { margin-bottom:14px; }

#pw-login .box { border-radius:20px !important; overflow:hidden; }

/* OneOS written next to the ring on phones too (29 Oct 2026, Max: « OneOS written next to the logo »). */
@media (max-width:760px) { .tb-brand { display:flex !important; } .tb-brand .tb-word { display:inline !important; font-size:20px !important; } }

/* Menu en 5 portes (8 Nov 2026, Max: « the simplest, more intuitive »): Grandir · Vendre · Gérer · Mon One, ~5 pages each,
   the rest under « Plus » inside its door. Sub-pages (Lead finder, Ads under Funnels) are indented. */
.side button.side-door { font-size:12px; padding-top:14px; }
.side nav a.side-sub { padding-left:34px; font-size:.95em; }
.side .side-more { display:block; width:100%; background:none; border:0; cursor:pointer; font:inherit; font-size:12px; text-align:left; color:rgba(244,245,250,.6); padding:7px 18px 7px 44px; }
.side .side-more:hover { color:var(--gold); }
.side .side-more:focus-visible { outline:2px solid var(--gc); outline-offset:-2px; border-radius:8px; }
.side .side-morebox { margin-left:20px; border-left:1px solid var(--edge, rgba(244,245,250,.11)); }
.layout.side-min .side .side-more { display:none; }
.layout.side-min .side .side-morebox[hidden] { display:block; }
.layout.side-min .side .side-morebox { margin-left:0; border-left:0; }
.layout.side-min .side nav a.side-sub { padding-left:0; }
@media (max-width:760px) { .layout.side-min .side .side-more { display:block; } .layout.side-min .side .side-morebox[hidden] { display:none; } }

/* Easier to read (8 Nov 2026, Max: « there's a lot of text… make text a little bit bigger overall in the One backend »): the page area
   (not the menu, not the voice window) is drawn 7 % bigger, text and spacing together, so every page grows the same without
   touching each page's own sizes. */
.main { zoom:1.07; }

/* A bit of colour (8 Nov 2026 evening, Max: « add a bit of color »): each menu icon takes its door's pastel (--gc on .side-g),
   the open page keeps the periwinkle. Light theme: the same pastel, darkened so it stays readable on white. */
.side-g a .ic { color:var(--gc); }
.side-g a.on .ic { color:var(--gold); }
[data-theme="light"] .side-g a .ic { color:color-mix(in srgb, var(--gc) 60%, #0b0c12); }
/* Colour helpers for pages: a soft round chip behind an icon, and one colour per social network (our pastels, never a client's). */
.ic-chip { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--cc, var(--gold)) 18%, transparent); color:var(--cc, var(--gold)); flex:none; }
.ic-chip svg { width:17px; height:17px; }
.net { --cc:#aeb2be; } .net-instagram { --cc:#e7a9b8; } .net-facebook { --cc:#9cc3e6; } .net-linkedin { --cc:#8ea2ff; } .net-twitter, .net-x { --cc:#c9ccd6; } .net-threads { --cc:#b9aee0; } .net-youtube { --cc:#efc19a; } .net-tiktok { --cc:#86c9a0; }
.net-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--cc); margin-right:6px; vertical-align:1px; }
/* Max's reference (8 Nov 2026 evening, his Projets cards): a thin pastel line along the top edge of a card, following its rounded corners. */
.tint { border-top:2px solid var(--cc, var(--gold)) !important; }

/* Every section in its door's colour (8 Nov 2026 evening, Max: « add a little more color to all sections »): the page's door pastel
   (--door, set on .layout by shell.js: Grandir periwinkle, Vendre peach since 9 Nov 2026, Gérer green, Mon One lilac) draws the thin top line of its
   cards and the colour of their small titles. Cards with their own colour (.tint) keep theirs. */
.main .card:not(.tint), .main .sub-block, .main .lf-box, .main .fn-team, .main .fn-steps { border-top:2px solid color-mix(in srgb, var(--door, var(--gold)) 70%, transparent) !important; }
.main .card h3, .main h3.sec, .main .sec-h { color:var(--door, var(--gold)); }
[data-theme="light"] .main .card h3, [data-theme="light"] .main h3.sec { color:color-mix(in srgb, var(--door, var(--gold)) 65%, #0b0c12); }
/* Number cards: one pastel each, in turn, like the Projects cards (Home, Funnels, Follow-ups). */
.hm-k, .fn-stat, .pr-stat { border-top:2px solid var(--kc, var(--gold)) !important; }
.hm-k:nth-child(6n+1), .fn-stat:nth-child(6n+1), .pr-stat:nth-child(6n+1) { --kc:#8ea2ff; }
.hm-k:nth-child(6n+2), .fn-stat:nth-child(6n+2), .pr-stat:nth-child(6n+2) { --kc:#86c9a0; }
.hm-k:nth-child(6n+3), .fn-stat:nth-child(6n+3), .pr-stat:nth-child(6n+3) { --kc:#9cc3e6; }
.hm-k:nth-child(6n+4), .fn-stat:nth-child(6n+4), .pr-stat:nth-child(6n+4) { --kc:#efc19a; }
.hm-k:nth-child(6n+5), .fn-stat:nth-child(6n+5), .pr-stat:nth-child(6n+5) { --kc:#e7a9b8; }
.hm-k:nth-child(6n+6), .fn-stat:nth-child(6n+6), .pr-stat:nth-child(6n+6) { --kc:#b9aee0; }
.hm-k b, .fn-stat b { color:inherit; }
/* Menu bottom bar link (8 Nov 2026): The Circuit sits next to the version, as an icon */
.side .foot { display:flex; align-items:center; }
.side-footlink { display:inline-flex; padding:8px; color:rgba(244,245,250,0.5); }
.side-footlink:hover { color:var(--accent); }
.side-footlink svg { width:18px; height:18px; }
.side-min .side-footlink { display:none; }
/* Bottom block of the menu (8 Nov 2026, Max): Learn · Discord · Feedback, set apart above the bar */
.side nav.side-dock { flex:none; padding:8px 0; margin:0 10px 8px; border:1px solid var(--border); border-radius:12px; background:rgba(142,162,255,0.06); overflow:visible; }
.side nav.side-dock a { margin:0 4px; padding:8px 12px; border-left:0; border-radius:8px; }
.side nav.side-dock a.on { background:rgba(var(--gold-rgb),0.12); }
.layout.side-min .side nav.side-dock { margin:0 6px 8px; padding:4px 0; }
.layout.side-min .side nav.side-dock a { padding:8px 0; margin:0 2px; }
/* Feedback box (8 Nov 2026) */
.fb-veil { position:fixed; inset:0; z-index:400; background:rgba(11,12,18,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.fb-box { width:100%; max-width:460px; padding:22px; border-radius:var(--r-panel); border:1px solid var(--edge); background:rgba(22,23,30,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.fb-box h3 { margin:0 0 6px; font-size:17px; }
.fb-box p { margin:0 0 14px; font-size:13px; }
.fb-box textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:110px; padding:12px; border-radius:12px; border:1px solid var(--edge); background:rgba(244,245,250,.04); color:inherit; font:inherit; font-size:14px; }
.fb-row { display:flex; align-items:center; gap:8px; margin-top:12px; }
.fb-row span { margin-right:auto; font-size:12px; }

/* ===== Design pass (9 Nov 2026, Max: « too much blue », « different tones of black… make them the same everywhere »,
   « do we need to have all the buttons blue? »). The home page is the model. ===== */
/* One black: every box that still used the old blue-black (--card #12141c) now gets the grey of the home's glass cards,
   and the page header no longer draws a darker band of its own. Overlays stay opaque. */
html:not([data-theme="light"]) { --card:#1b1c20; --card-2:#212228; --bg-2:#17181c; --green:#86c9a0; }
html:not([data-theme="light"]) .page-head { background:transparent; border-bottom-color:var(--edge); }
/* Primary buttons take the colour of the page's door (Grandir periwinkle, Vendre peach, Gérer green, Mon One lilac),
   so the whole One is not one blue; outline buttons glow in the same colour. */
.main .btn.pink { background:var(--door, var(--gold)); border-color:var(--door, var(--gold)); color:#0b0c12; box-shadow:0 6px 22px -10px color-mix(in srgb, var(--door, var(--gold)) 70%, transparent); }
.main .btn.pink:hover { background:color-mix(in srgb, var(--door, var(--gold)) 82%, #fff); border-color:color-mix(in srgb, var(--door, var(--gold)) 82%, #fff); }
.main .btn:not(.pink):hover { border-color:var(--door, var(--gold)); color:var(--door, var(--gold)); }
/* Box tops in turn, like the home's chips: the door colour first, then green, peach, rose, sky, lilac. */
.main .card:not(.tint):nth-child(6n+2), .main .sub-block:nth-child(6n+2) { border-top-color:#86c9a0 !important; }
.main .card:not(.tint):nth-child(6n+3), .main .sub-block:nth-child(6n+3) { border-top-color:#efc19a !important; }
.main .card:not(.tint):nth-child(6n+4), .main .sub-block:nth-child(6n+4) { border-top-color:#e7a9b8 !important; }
.main .card:not(.tint):nth-child(6n+5), .main .sub-block:nth-child(6n+5) { border-top-color:#9cc3e6 !important; }
.main .card:not(.tint):nth-child(6n+6), .main .sub-block:nth-child(6n+6) { border-top-color:#b9aee0 !important; }
.main .card .card { border-top-color:var(--edge) !important; }
/* Stat tiles in turn too, with no blue first (Performance: the page is already bluish). */
.pr-stat:nth-child(6n+1), .fn-stat:nth-child(6n+1) { --kc:#86c9a0; } .pr-stat:nth-child(6n+2), .fn-stat:nth-child(6n+2) { --kc:#efc19a; }
.pr-stat:nth-child(6n+3), .fn-stat:nth-child(6n+3) { --kc:#e7a9b8; } .pr-stat:nth-child(6n+4), .fn-stat:nth-child(6n+4) { --kc:#b9aee0; }
.pr-stat:nth-child(6n+5), .fn-stat:nth-child(6n+5) { --kc:#9cc3e6; } .pr-stat:nth-child(6n+6), .fn-stat:nth-child(6n+6) { --kc:#e6d48f; }
/* Generic round corners for what was left square: table heads, code, small panels. */
.main th { background:transparent; }
.main code { border-radius:6px; padding:1px 6px; }
/* Bottom block of the menu (9 Nov 2026, Max: « like the box at the bottom of the proposal pages… kind of purple but not fully purple »):
   the same box as the proposal pages (periwinkle wash fading into black, periwinkle edge, soft glow). */
.side nav.side-dock { border:1px solid rgba(var(--gold-rgb),.6); border-radius:14px; background:linear-gradient(135deg, rgba(var(--gold-rgb),.18), rgba(11,12,18,.9) 75%); box-shadow:0 0 40px -18px rgba(var(--gold-rgb),.55); }
.side nav.side-dock a { color:rgba(244,245,250,.85); }
.side nav.side-dock a .ic { color:var(--gold); }
[data-theme="light"] .side nav.side-dock { background:linear-gradient(135deg, rgba(var(--gold-rgb),.22), rgba(11,12,18,.92) 75%); }
/* Boxes found still square or blue-black by the 9 Nov audit: same glass as the rest. */
.rf-stat, .rf-ref, .eq-card { 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); }
.rf-stat { border-top-width:2px !important; }
.ib-m { border-radius:10px; } .ib-p.on { box-shadow:inset 3px 0 0 var(--door, var(--gold)); }
.fn-weak { border-color:#efc19a !important; }

/* Bigger and easier, like Skool (11 Nov 2026, Max: « Zoom, the whole thing a bit bigger… I would do the same with the back end »):
   on a computer the page area grows 15 % (was 7 %) and the menu gets bigger text and icons. Phones keep their sizes. */
@media (min-width: 900px) {
  .main { zoom:1.15; }
  .side { width:232px; }
  .side nav a { font-size:14.5px; padding:11px 18px; }
  .side nav a .ic svg { width:19px; height:19px; }
}
/* One notch bigger on large screens (11 Nov 2026, Max: « a notch bigger still… same for the back end »). */
@media (min-width: 1500px) {
  .main { zoom:1.25; }
  .side { width:250px; }
  .side nav a { font-size:16px; padding:12px 20px; }
  .side nav a .ic svg { width:20px; height:20px; }
}