/* 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. */
.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:var(--r-in); border-color:var(--edge) !important; overflow:hidden; } .fn-fill { border-radius:var(--r-in); }
.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; } }