/* BxBunny admin dashboard. The app's look on a big screen: paper background, white cards with 20 pt corners,
   capsule buttons with a darker bottom edge (GameActionButton), status pills, the brand orange only on actions
   and live things, the courier's black for the neighbours. SF Pro / system type, bold at most. */
:root {
  --brand: #FF5C34; --brand-edge: #C93A17; --brand-soft: #FFE9E2; --on-brand: #fff;
  --paper: #F4F1EC; --card: #FFFFFF; --ink: #16130F; --muted: #7A736B; --line: #E8E3DC; --track: #F0ECE6; --fill: #E6E1DA;
  --courier: #1C1C1E; --courier-edge: #000; --on-courier: #fff;
  --gold: #FFC94D; --gold-deep: #7A4E00; --gold-soft: #FFF0C2;
  --amber: #F2A33A; --amber-deep: #A64E0B; --amber-soft: #FFE8CC;
  --success: #0E8345; --success-deep: #0E6B3A; --success-soft: #E8F5EC;
  --danger: #D94A3D; --danger-soft: #FBE4E1; --blue: #3B82F6; --blue-soft: #E3EDFD;
  --moment: #FFF0CC; --moment-ink: #16130F;
  --r-card: 20px; --r-cta: 16px; --side: 240px; --drawer: 600px;
  --shadow: 0 1px 2px rgba(22,19,15,.04), 0 8px 24px rgba(22,19,15,.06);
  --shadow-lg: 0 20px 60px rgba(22,19,15,.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F0E0D; --card: #1B1917; --ink: #F3EFE9; --muted: #A39C94; --line: #2B2825; --track: #242120; --fill: #302C29;
    --courier: #F2F2F7; --courier-edge: #AEAEB2; --on-courier: #1C1C1E;
    --brand-soft: #3A1E16; --gold-deep: #FFE09A; --gold-soft: #4A3A10; --amber-deep: #FFBE7A; --amber-soft: #4A3118;
    --success-deep: #9BE0B9; --success-soft: #16301F; --danger-soft: #4A1E1A; --blue-soft: #1B2A47;
    --moment: #17130F; --moment-ink: #FFF0CC;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12px; } .error { color: var(--danger); font-weight: 600; }
h1 { font-size: 30px; line-height: 1.1; margin: 10px 0 6px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
p { margin: 6px 0; }

/* Buttons: the app's chunky capsules, with the darker edge underneath */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 15px; box-shadow: 0 3px 0 var(--fill); transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.03); } .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--fill); }
.btn-wide { width: 100%; height: 54px; margin-top: 12px; font-size: 17px; }
.btn-dark { background: var(--courier); color: var(--on-courier); box-shadow: 0 3px 0 var(--courier-edge); } .btn-dark:active { box-shadow: none; }
.btn-brand { background: var(--brand); color: var(--on-brand); box-shadow: 0 3px 0 var(--brand-edge); } .btn-brand:active { box-shadow: none; }
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 3px 0 #9E3127; } .btn-danger:active { box-shadow: none; }
.btn-ghost { background: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--track); } .btn-ghost:active { transform: none; }
.btn-small { height: 34px; padding: 0 14px; font-size: 13px; box-shadow: 0 2px 0 var(--fill); } .btn-small:active { transform: translateY(2px); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

/* Gates: the app's "moment" paper */
.gate { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--moment); color: var(--moment-ink); }
.gate-card { width: 100%; max-width: 400px; background: var(--card); color: var(--ink); border-radius: 28px; padding: 36px 30px 30px; box-shadow: var(--shadow-lg); text-align: center; }
.gate-logo { width: 88px; height: 88px; margin: 0 auto 6px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-size: 46px; box-shadow: 0 6px 0 var(--brand-edge); }
.gate-logo-dark { background: var(--courier); box-shadow: 0 6px 0 var(--courier-edge); }
.gate-card .muted { font-size: 15px; margin-bottom: 14px; }

/* Layout */
.app { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; }
.side { display: flex; flex-direction: column; padding: 20px 14px 16px; gap: 20px; background: var(--paper); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; padding: 2px 8px; letter-spacing: -0.01em; }
.brand-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); display: grid; place-items: center; font-size: 22px; box-shadow: 0 3px 0 var(--brand-edge); }
.brand-tag.prod { color: #fff; background: #d92d20; }
.brand-tag { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--track); padding: 4px 8px; border-radius: 999px; }
nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 14px; font-weight: 600; font-size: 15px; color: var(--muted); transition: background .15s ease; }
.nav-item:hover { background: var(--track); color: var(--ink); }
.nav-item.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.nav-item.active .nav-ico { color: var(--brand); }
.nav-ico { width: 22px; text-align: center; font-size: 15px; }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--fill); color: var(--ink); padding: 2px 9px; border-radius: 999px; min-width: 24px; text-align: center; }
.nav-count:empty { display: none; }
.nav-count.warn:not(:empty) { background: var(--danger); color: #fff; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.conn { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 0 8px; font-weight: 600; }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.conn.ok .dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); } .conn.bad .dot { background: var(--danger); }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.me img { width: 36px; height: 36px; border-radius: 50%; background: var(--fill); object-fit: cover; }
.me-name { font-weight: 700; font-size: 13px; } .me-email { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 150px; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { padding: 10px 16px; border-radius: 18px; background: var(--card); min-width: 128px; box-shadow: var(--shadow); }
.kpi-n { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .kpi-l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.kpi.warn .kpi-n { color: var(--amber-deep); } .kpi.danger .kpi-n { color: var(--danger); }
.topbar-right input { width: 320px; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow); outline: none; }
.topbar-right input:focus { box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.view { flex: 1; min-height: 0; overflow: auto; padding: 4px 24px 24px; }
.view:has(.map-full) { padding: 0; }

/* Live split */
.split { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(440px, 1.3fr); gap: 20px; height: 100%; }
.col-list { overflow: auto; min-height: 0; padding-right: 4px; }
.col-map { position: relative; min-height: 440px; }
.map { width: 100%; height: 100%; min-height: 440px; border-radius: var(--r-card); overflow: hidden; background: var(--track); box-shadow: var(--shadow); }
.map-full { border-radius: 0; height: 100%; box-shadow: none; }
.legend { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 14px; background: var(--card); padding: 9px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 500; }
.legend span { display: flex; align-items: center; gap: 6px; }
.lg { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.lg-client { background: var(--brand); } .lg-run { background: var(--brand); } .lg-free { background: var(--success); } .lg-off { background: #B9B2A9; } .lg-shop { background: var(--blue); border-radius: 3px; }

/* Cards */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border-radius: var(--r-card); padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card:active { transform: scale(.99); }
.card.selected { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.card-row { display: flex; align-items: center; gap: 10px; }
.card-title { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.card-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font-size: 13px; }
.card-meta b { color: var(--ink); font-weight: 600; }
.steps { display: flex; gap: 4px; margin-top: 12px; }
.step { flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.step.done { background: var(--brand); } .step.now { background: var(--brand); opacity: .5; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }
.empty { color: var(--muted); padding: 36px 24px; text-align: center; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); font-weight: 600; }

/* Pills */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--track); color: var(--muted); white-space: nowrap; }
.badge.posted, .badge.awaiting_orderer { background: var(--amber-soft); color: var(--amber-deep); }
.badge.accepted, .badge.shopping { background: var(--blue-soft); color: #1D4ED8; }
.badge.delivered, .badge.confirmed, .badge.settled { background: var(--success-soft); color: var(--success-deep); }
.badge.disputed { background: var(--danger-soft); color: var(--danger); }
.badge.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }
.pill { font-size: 11px; font-weight: 700; background: var(--track); color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.pill:empty { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--card); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); box-shadow: var(--shadow); }
.chip.active { background: var(--ink); color: var(--paper); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* Tables */
.table-wrap { background: var(--card); border-radius: var(--r-card); overflow: auto; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); font-weight: 700; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; } .table tbody tr:hover { background: var(--track); }
.ok { color: var(--success-deep); font-weight: 700; } .ko { color: var(--danger); font-weight: 700; } .so { color: var(--amber-deep); font-weight: 700; }

/* Drawer: the order's page */
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(var(--drawer), 100vw); background: var(--paper); box-shadow: var(--shadow-lg); z-index: 900; display: flex; flex-direction: column; animation: slide .25s cubic-bezier(.2,.8,.2,1); }
@keyframes slide { from { transform: translateX(40px); opacity: 0 } to { transform: none; opacity: 1 } }
.backdrop { position: fixed; inset: 0; background: rgba(22,19,15,.25); z-index: 800; backdrop-filter: blur(2px); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 20px 22px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.drawer-title { font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
.drawer-body { overflow: auto; padding: 14px 22px 40px; flex: 1; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.tab { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--card); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; box-shadow: var(--shadow); }
.tab.active { background: var(--ink); color: var(--paper); }
.block { background: var(--card); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.block h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 7px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.party { background: var(--card); border-radius: var(--r-card); padding: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-edge); display: grid; place-items: center; font-weight: 700; font-size: 17px; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.party b { display: block; font-size: 15px; } .party .small { display: block; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 12px 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.timeline li.done, .timeline li.now { color: var(--ink); }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: 2px solid var(--card); }
.timeline li.done::before { background: var(--brand); } .timeline li.now::before { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.timeline .t { color: var(--muted); font-size: 11px; margin-left: 6px; font-weight: 500; }
.mini-map { height: 250px; border-radius: var(--r-card); overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); }
.items { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.items td, .items th { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.items tr:last-child td { border-bottom: 0; }
.items th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.item-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--track); color: var(--muted); white-space: nowrap; }
.item-status.bought { background: var(--success-soft); color: var(--success-deep); } .item-status.skipped { background: var(--danger-soft); color: var(--danger); }
.item-status.replaced { background: var(--blue-soft); color: #1D4ED8; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; background: var(--card); font-size: 14px; box-shadow: var(--shadow); }
.msg.client { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.courier { align-self: flex-end; background: var(--courier); color: var(--on-courier); border-bottom-right-radius: 6px; }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: 12px; box-shadow: none; }
.msg .who { font-size: 11px; opacity: .7; margin-bottom: 2px; font-weight: 700; }
.msg img { max-width: 100%; border-radius: 12px; display: block; margin-top: 6px; }
.photo { max-width: 100%; border-radius: 14px; display: block; margin-top: 8px; cursor: zoom-in; box-shadow: var(--shadow); }
.flag { border-left: 3px solid var(--amber); padding: 10px 14px; margin-bottom: 8px; background: var(--amber-soft); color: var(--ink); border-radius: 0 14px 14px 0; font-size: 13px; }
.flag.answered { border-left-color: var(--success); background: var(--success-soft); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.actions input, .actions textarea { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); outline: none; }
.actions textarea { width: 100%; height: auto; min-height: 64px; padding: 10px 14px; resize: vertical; }
.actions input:focus, .actions textarea:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.ev { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ev:last-child { border-bottom: 0; }
.ev .t { color: var(--muted); font-size: 11px; width: 96px; flex: none; padding-top: 2px; }
.ev .ty { font-weight: 700; width: 140px; flex: none; }
#dPane-events { background: var(--card); border-radius: var(--r-card); padding: 6px 16px; box-shadow: var(--shadow); }
#dPane-events .empty { box-shadow: none; }

/* Leaflet markers */
.pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin-client { background: var(--brand); } .pin-courier { background: #1C1C1E; } .pin-free { background: #9A948C; opacity: .9; }
.pin-shop { background: var(--blue); border-radius: 5px; }
.pin-courier.moving { box-shadow: 0 0 0 6px rgba(28,28,30,.18), 0 2px 6px rgba(0,0,0,.35); animation: ring 1.6s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(28,28,30,.35) } 100% { box-shadow: 0 0 0 14px rgba(28,28,30,0) } }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--shadow-lg); font-family: inherit; }
.leaflet-popup-content { font-size: 13px; margin: 10px 14px; } .leaflet-popup-content b { display: block; font-size: 14px; }
.leaflet-container { font: inherit; background: var(--track); }
.leaflet-bar a { border-radius: 8px !important; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; z-index: 1000; font-weight: 600; box-shadow: var(--shadow-lg); }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  nav { flex-direction: row; flex-wrap: wrap; } .nav-item { height: 38px; padding: 0 12px; font-size: 14px; }
  .side-foot { margin-left: auto; flex-direction: row; align-items: center; }
  .me-email, .conn, .brand-tag { display: none; }
  .split { grid-template-columns: 1fr; } .topbar-right { display: none; } .topbar { padding: 12px 16px; }
  .view { padding: 4px 16px 16px; } .kpi { min-width: 0; padding: 8px 12px; } .kpi-n { font-size: 20px; }
  .parties { grid-template-columns: 1fr; }
}

/* The neighbours on the map: a bunny in a ring, the first name on a pill */
.bunny { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.bunny-face { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; border: 3px solid #B9B2A9; overflow: hidden; transition: transform .15s ease; }
.bunny-face img { width: 100%; height: 100%; object-fit: cover; }
.bunny:hover .bunny-face { transform: scale(1.1); }
.bunny-name { font-size: 11px; font-weight: 700; color: #16130F; background: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(0,0,0,.08); }
.bunny.running .bunny-face { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255,92,52,.25); animation: ring-brand 1.6s infinite; }
.bunny.running .bunny-name { background: var(--brand); color: #fff; border-color: var(--brand-edge); }
.bunny.available .bunny-face { border-color: var(--success); box-shadow: 0 0 0 4px rgba(14,131,69,.2); }
.bunny.available .bunny-name { background: var(--success); color: #fff; border-color: var(--success-deep); }
.bunny.paused .bunny-face { border-color: var(--amber); }
.bunny.offline .bunny-face, .bunny.home .bunny-face { opacity: .75; filter: grayscale(.4); }
.bunny.home .bunny-face { border-style: dashed; }
.bunny.offline .bunny-name, .bunny.home .bunny-name { color: var(--muted); }
@keyframes ring-brand { 0% { box-shadow: 0 0 0 0 rgba(255,92,52,.45) } 100% { box-shadow: 0 0 0 14px rgba(255,92,52,0) } }
.leaflet-popup-content .badge { margin-top: 4px; }

/* Finances */
.fin-kpis { margin-bottom: 16px; }
.kpi.good .kpi-n { color: var(--success-deep); } .kpi.bad .kpi-n { color: var(--danger); }
.kpi.big { background: var(--ink); color: var(--paper); } .kpi.big .kpi-l { color: var(--paper); opacity: .7; }
.kpi.big.good { background: var(--success); color: #fff; } .kpi.big.bad { background: var(--danger); color: #fff; }
.kpi.big .kpi-n { color: inherit; }
.grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 20px; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 10px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; min-width: 0; position: relative; }
.bar-stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: calc(100% - 18px); gap: 1px; }
.bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.bar .rev { background: var(--brand); } .bar .fee { background: #B9B2A9; border-radius: 0; }
.bar .d { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; max-width: 100%; }
.bar:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 6px 10px; border-radius: 10px; font-size: 11px; white-space: pre; z-index: 5; box-shadow: var(--shadow-lg); }
.bal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.bal div { background: var(--paper); border-radius: 14px; padding: 10px 12px; }
.bal b { display: block; font-size: 20px; letter-spacing: -0.02em; } .bal span { font-size: 11px; color: var(--muted); font-weight: 600; }
.neg { color: var(--danger); } .pos { color: var(--success-deep); }
/* Parrainage */
.ref-card { display: flex; flex-direction: column; gap: 10px; cursor: default; }
.ref-card:hover { transform: none; box-shadow: var(--shadow); }
.ref-head { display: flex; align-items: center; gap: 12px; }
.ref-head .avatar { width: 44px; height: 44px; }
.ref-head b { font-size: 16px; display: block; }
.ref-gain { margin-left: auto; text-align: right; }
.ref-gain b { font-size: 18px; color: var(--success-deep); letter-spacing: -0.02em; }
.ref-kids { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 22px; position: relative; }
.ref-kids::before { content: ""; position: absolute; left: 8px; top: -6px; bottom: 10px; border-left: 2px dashed var(--line); }
.kid { display: flex; align-items: center; gap: 8px; background: var(--paper); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.kid .avatar { width: 26px; height: 26px; font-size: 12px; }
.kid.rewarded { background: var(--success-soft); color: var(--success-deep); }
.kid.pending { color: var(--muted); }
.kid small { font-weight: 500; opacity: .8; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } .bal { grid-template-columns: 1fr; } }

/* Catalogue */
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cat-search { flex: 1; min-width: 260px; max-width: 520px; height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow); outline: none; font-size: 15px; }
.cat-search:focus { box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.cat-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cat-filters select { height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: 13px; font-weight: 600; max-width: 220px; }
.chip.tag { text-transform: none; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.prod { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.prod:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.prod-img { height: 140px; background: var(--paper); display: grid; place-items: center; font-size: 56px; position: relative; }
.prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.prod-img .src { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; background: rgba(22,19,15,.75); color: #fff; padding: 2px 7px; border-radius: 999px; }
.prod-img .hid { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; background: var(--danger); color: #fff; padding: 2px 7px; border-radius: 999px; }
.prod-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod-name { font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-detail { font-size: 12px; color: var(--muted); }
.prod-price { font-weight: 700; font-size: 14px; margin-top: auto; padding-top: 6px; }
.prod-price small { color: var(--muted); font-weight: 600; }
.prod-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tagpill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--track); color: var(--muted); }
.tagpill.bio { background: var(--success-soft); color: var(--success-deep); } .tagpill.belge { background: var(--gold-soft); color: var(--gold-deep); }
.tagpill.vegan { background: var(--success-soft); color: var(--success-deep); } .tagpill.prix-bas { background: var(--blue-soft); color: #1D4ED8; }
.tagpill.brand { background: var(--amber-soft); color: var(--amber-deep); text-transform: capitalize; }
.p-hero { height: 260px; border-radius: var(--r-card); background: #fff; display: grid; place-items: center; font-size: 96px; margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden; }
.p-hero img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

/* Projection */
.forecast { display: grid; grid-template-columns: 340px 1fr; gap: 16px; margin-bottom: 16px; }
.fc-left, .fc-right { min-width: 0; }
.fc-left { background: var(--card); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); }
.fc-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fc-title h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fc-sliders { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fcs { display: flex; flex-direction: column; gap: 6px; }
.fcs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fcs-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.fcs-val { display: flex; align-items: baseline; gap: 4px; font-weight: 700; font-size: 15px; }
.fcs-val input { width: 92px; text-align: right; border: 0; background: var(--paper); border-radius: 8px; padding: 4px 8px; font: inherit; font-weight: 700; color: var(--ink); outline: none; }
.fcs-val input:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.fcs-val .unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.fcs-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--success-soft); color: var(--success-deep); }
.fcs-tag.edited { background: var(--brand-soft); color: var(--brand-edge); }
.fcs input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--brand) var(--pct, 0%), var(--track) var(--pct, 0%)); outline: none; }
.fcs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.fcs input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); cursor: pointer; }
.fc-hero { border-radius: var(--r-card); padding: 20px 22px; color: #fff; background: linear-gradient(135deg, #FF5C34 0%, #C93A17 100%); box-shadow: var(--shadow-lg); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fc-hero.bad { background: linear-gradient(135deg, #D94A3D 0%, #7A2219 100%); }
.fc-hero .big { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fc-hero .lbl { font-size: 13px; opacity: .85; font-weight: 600; margin-top: 6px; }
.fc-hero .side { text-align: right; font-size: 13px; opacity: .9; line-height: 1.5; }
.fc-hero .side b { font-size: 18px; display: block; }
.fc-presets { display: flex; gap: 6px; margin-top: 10px; }
.fc-presets button { border: 0; background: rgba(255,255,255,.18); color: #fff; font: inherit; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.fc-presets button.active { background: #fff; color: var(--brand-edge); }
.fc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.fc-stat { background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); }
.fc-stat b { display: block; font-size: 20px; letter-spacing: -0.02em; } .fc-stat span { font-size: 11px; color: var(--muted); font-weight: 600; }
.fc-stat.good b { color: var(--success-deep); } .fc-stat.bad b { color: var(--danger); } .fc-stat.warn b { color: var(--amber-deep); }
.fc-chart-wrap { background: var(--card); border-radius: var(--r-card); padding: 14px 16px 8px; box-shadow: var(--shadow); margin-bottom: 12px; }
.fc-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fc-chart-head h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
#fcChart { width: 100%; height: 220px; display: block; }
#fcChart text { font-family: inherit; font-size: 11px; fill: var(--muted); }
#fcChart .grid { stroke: var(--line); stroke-width: 1; }
#fcChart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
#fcChart .line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
#fcChart .area { fill: var(--brand); opacity: .12; }
#fcChart .be { stroke: var(--success); stroke-width: 2; stroke-dasharray: 4 4; }
#fcChart .you { fill: var(--ink); }
@media (max-width: 980px) { .forecast { grid-template-columns: 1fr; } }
/* Margin by order size */
.size-summary { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: 15px; }
.size-summary b { font-size: 22px; letter-spacing: -0.02em; }
.size-summary .sep { color: var(--line); }
.sizebar { display: inline-block; height: 8px; border-radius: 4px; background: var(--brand); vertical-align: middle; margin-right: 6px; }
.sizebar.neg { background: var(--danger); }

/* eID */
.check { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--success-soft); color: var(--success-deep); margin: 1px 2px 1px 0; }
.check.no { background: var(--danger-soft); color: var(--danger); } .check.meh { background: var(--amber-soft); color: var(--amber-deep); } .check.off { background: var(--track); color: var(--muted); }
.person { display: flex; align-items: center; gap: 10px; } .person .avatar { width: 34px; height: 34px; font-size: 14px; }
.score { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: var(--track); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.score i { display: block; height: 100%; background: var(--success); }

/* Plan de croissance */
.targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.target { background: var(--paper); border-radius: 16px; padding: 12px 14px; }
.target .t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.target .t-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.target .t-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.target .t-val small { font-size: 13px; color: var(--muted); font-weight: 600; }
.target input { width: 80px; border: 0; background: var(--card); border-radius: 8px; padding: 3px 8px; font: inherit; font-weight: 700; text-align: right; color: var(--ink); outline: none; }
.target input:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.t-bar { height: 8px; border-radius: 4px; background: var(--track); margin-top: 8px; overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .4s ease; }
.t-bar i.done { background: var(--success); }
.t-pace { font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.t-pace.ahead { color: var(--success-deep); } .t-pace.behind { color: var(--danger); }
.plan-grid { grid-template-columns: 1fr 1fr; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.f-step { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.f-step .f-bar { height: 26px; border-radius: 8px; background: var(--track); overflow: hidden; }
.f-step .f-bar i { display: block; height: 100%; background: var(--brand); border-radius: 8px; min-width: 2px; }
.f-step .f-n { font-weight: 700; text-align: right; }
.f-step .f-rate { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.weeks .bar .set { background: var(--success); } .weeks .bar .lost { background: #B9B2A9; border-radius: 4px 4px 0 0; }
.levers { display: flex; flex-direction: column; gap: 8px; }
.lever { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border-radius: 14px; padding: 10px 12px; }
.lever input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--success); margin-top: 2px; }
.lever .l-title { font-weight: 700; font-size: 14px; border: 0; background: transparent; width: 100%; font: inherit; color: var(--ink); outline: none; }
.lever .l-note { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--muted); resize: vertical; min-height: 22px; outline: none; }
.lever.done .l-title { text-decoration: line-through; color: var(--muted); }
.lever .l-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; } .f-step { grid-template-columns: 120px 1fr 60px; } }

/* Income statement */
.statement table { width: 100%; border-collapse: collapse; font-size: 14px; }
.statement td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.statement tr.head td { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 0; padding-top: 12px; }
.statement tr.sub td:first-child { padding-left: 22px; color: var(--muted); }
.statement tr.total td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink); border-bottom: 0; }
.statement tr.total.net td { background: var(--success-soft); color: var(--success-deep); border-radius: 12px; font-size: 18px; }
.statement tr.total.net.bad td { background: var(--danger-soft); color: var(--danger); }
.statement td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.statement td.per { text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; width: 110px; }
.statement .note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.rules-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.rules-list li { margin-bottom: 8px; }

/* Stripe page */
.stripe-hero { border-radius: var(--r-card); padding: 22px 24px; color: #fff; background: linear-gradient(135deg, #635BFF 0%, #3B2FBF 100%); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; align-items: start; }
.stripe-hero .big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.stripe-hero .lbl { font-size: 13px; opacity: .85; font-weight: 600; margin-top: 4px; }
.stripe-hero .cell b { display: block; font-size: 22px; letter-spacing: -0.02em; }
.stripe-hero .cell span { font-size: 12px; opacity: .85; font-weight: 600; }
.tariff { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tariff-card { background: var(--card); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.tariff-card .t-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; width: fit-content; }
.t-who.client { background: var(--brand-soft); color: var(--brand-edge); } .t-who.courier { background: #E8E8ED; color: #1C1C1E; } .t-who.platform { background: #E9E7FF; color: #3B2FBF; } .t-who.earn { background: var(--success-soft); color: var(--success-deep); }
.tariff-card .t-price { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.tariff-card .t-name { font-size: 14px; font-weight: 700; }
.tariff-card .t-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tariff-card .t-obs { font-size: 12px; font-weight: 600; color: var(--success-deep); }
.weeks .bar .billed { background: #635BFF; } .weeks .bar .recov { background: var(--success); }
@media (max-width: 980px) { .stripe-hero { grid-template-columns: 1fr 1fr; } }

/* Tarifs */
.pr-note { margin: -4px 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 900px; }
.pr-sim-inputs { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 14px; }
.pr-sim-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pr-sim-inputs label > span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.pr-sim-inputs input[type=number] { width: 70px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 8px; font-size: 14px; font-weight: 600; }
.pr-sim-inputs input[type=range] { width: 220px; accent-color: var(--brand); }
.pr-sim-inputs .pr-check { flex-direction: row; align-items: center; text-transform: none; font-size: 14px; color: var(--ink); }
.pr-sim { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 12px; }
.pr-col { background: var(--paper); border-radius: 16px; padding: 14px 16px; }
.pr-col-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.pr-big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; } .pr-big span { font-size: 15px; font-weight: 600; color: var(--muted); }
.pr-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 12px 0 8px; background: var(--track); }
.pr-bar i { display: block; height: 100%; }
.b-basket { background: #B9B2A9; } .b-courier { background: var(--success); } .b-service { background: var(--brand); }
.pr-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.pr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pr-lines { width: 100%; font-size: 13px; border-collapse: collapse; } .pr-lines td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.pr-lines td:last-child { text-align: right; font-weight: 600; } .pr-lines tr.sum td { font-weight: 800; }
.pr-down { color: var(--success-deep); font-weight: 700; } .pr-up { color: var(--danger); font-weight: 700; } .pr-same { color: var(--muted); }
.pr-flat { box-shadow: none; } .pr-table tbody tr { cursor: default; } .pr-table tr.pr-sub th { top: 38px; font-size: 10px; }
.pr-table tr.pr-hl td { background: var(--brand-soft); }
.pr-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pr-params label { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.pr-in { display: flex; align-items: center; gap: 6px; } .pr-in input { width: 90px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 8px; font-weight: 700; } .pr-in em { font-style: normal; color: var(--muted); }
.pr-params small { color: var(--muted); font-weight: 500; }
@media (max-width: 980px) { .pr-sim { grid-template-columns: 1fr; } }

/* Finances · one glance */
.fin-hero { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fin-hero .tile { border-radius: var(--r-card); padding: 18px 20px; background: var(--card); box-shadow: var(--shadow); }
.fin-hero .tile .n { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.fin-hero .tile .l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.fin-hero .tile.main { background: var(--ink); color: var(--paper); } .fin-hero .tile.main .l { color: var(--paper); opacity: .7; }
.fin-hero .tile.main.good { background: var(--success); color: #fff; } .fin-hero .tile.main.bad { background: var(--danger); color: #fff; }
.fin-hero .tile.main .n { font-size: 44px; }
.fin-hero .tile .sub { font-size: 13px; margin-top: 8px; opacity: .85; }
.fin-grid { grid-template-columns: 1.4fr 1fr; }
#sankey, #waterfall { width: 100%; height: auto; display: block; }
#sankey text, #waterfall text, #plan3Chart text { font-family: inherit; }
.sk-node { rx: 6; }
.sk-link { fill-opacity: .35; }
.sk-label { font-size: 12px; font-weight: 700; fill: var(--ink); } .sk-amount { font-size: 11px; fill: var(--muted); font-weight: 600; }
.wf-bar.pos { fill: var(--success); } .wf-bar.neg { fill: var(--danger); } .wf-bar.base { fill: var(--brand); } .wf-bar.total { fill: var(--ink); }
.wf-label { font-size: 11px; fill: var(--muted); font-weight: 600; } .wf-val { font-size: 12px; fill: var(--ink); font-weight: 700; }
.plan3 { margin-bottom: 16px; }
.plan3-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: stretch; margin-bottom: 10px; }
.plan3-inputs { display: flex; flex-direction: column; gap: 12px; }
.knob { background: var(--paper); border-radius: 16px; padding: 12px 14px; }
.knob .k-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.knob .k-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.knob .k-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 4px; }
.knob .k-val input { width: 110px; border: 0; background: var(--card); border-radius: 10px; padding: 4px 10px; font: inherit; font-weight: 700; font-size: 20px; text-align: right; color: var(--ink); outline: none; }
.knob .k-val .unit { font-size: 13px; color: var(--muted); }
.knob input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; margin-top: 8px; background: linear-gradient(to right, var(--brand) var(--pct, 0%), var(--track) var(--pct, 0%)); outline: none; }
.knob input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.knob .k-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.plan3-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan3-out .o { border-radius: 16px; padding: 14px; background: var(--paper); }
.plan3-out .o b { display: block; font-size: 26px; letter-spacing: -0.03em; line-height: 1.05; } .plan3-out .o span { font-size: 12px; color: var(--muted); font-weight: 600; }
.plan3-out .o.main { grid-column: 1 / -1; background: var(--ink); color: var(--paper); } .plan3-out .o.main span { color: var(--paper); opacity: .7; }
.plan3-out .o.main.good { background: var(--success); color: #fff; } .plan3-out .o.main.bad { background: var(--danger); color: #fff; }
.plan3-out .o.main b { font-size: 36px; }
.plan3-out .o.good b { color: var(--success-deep); } .plan3-out .o.bad b { color: var(--danger); } .plan3-out .o.warn b { color: var(--amber-deep); }
#plan3Chart { width: 100%; height: 220px; display: block; }
#plan3Chart .grid { stroke: var(--line); } #plan3Chart .zero { stroke: var(--muted); stroke-dasharray: 3 4; }
#plan3Chart .cum { fill: none; stroke: var(--ink); stroke-width: 3; } #plan3Chart .m { fill: var(--brand); opacity: .55; } #plan3Chart .m.neg { fill: var(--danger); }
#plan3Chart text { font-size: 11px; fill: var(--muted); }
.fold { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px 18px; margin-bottom: 12px; }
.fold summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.fold summary::before { content: "▸"; color: var(--brand); transition: transform .15s; } .fold[open] summary::before { transform: rotate(90deg); }
.fold > *:not(summary) { margin-top: 8px; }
@media (max-width: 980px) { .fin-hero { grid-template-columns: 1fr 1fr; } .fin-grid, .plan3-grid { grid-template-columns: 1fr; } }

/* Four answers */
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.answer { background: var(--card); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow); border-left: 5px solid var(--brand); }
.answer .q { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.answer .a { font-size: 17px; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.answer .a b { font-size: 24px; letter-spacing: -0.02em; }
.answer .why { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.answer.yes { border-left-color: var(--success); } .answer.no { border-left-color: var(--danger); }
/* The story of one order */
.story { margin-bottom: 16px; }
.story-line { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.story-line:last-child { border-bottom: 0; }
.story-line .ico { font-size: 22px; text-align: center; }
.story-line .amt { font-weight: 700; font-size: 17px; white-space: nowrap; }
.story-line .amt.minus { color: var(--danger); } .story-line .amt.plus { color: var(--success-deep); }
.story-line.total { background: var(--success-soft); border-radius: 12px; padding: 12px; margin-top: 6px; }
.story-line.total.bad { background: var(--danger-soft); }
.story-line.total .amt { font-size: 22px; }
.story-line small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }

/* Chèques-repas */
.cmp td:first-child { white-space: normal; } .cmp td { white-space: normal; vertical-align: top; }
#voucherFlow text { font-family: inherit; }
#voucherFlow .box { fill: var(--card); stroke: var(--line); } #voucherFlow .box.hi { stroke: var(--brand); stroke-width: 2; }
#voucherFlow .t { font-size: 13px; font-weight: 700; fill: var(--ink); } #voucherFlow .s { font-size: 11px; fill: var(--muted); font-weight: 600; }
#voucherFlow .food { stroke: #0E8345; } #voucherFlow .bx { stroke: #FF5C34; } #voucherFlow .cour { stroke: #1C1C1E; }
#voucherFlow .flow { fill: none; stroke-width: 4; stroke-linecap: round; }
#voucherFlow .lbl { font-size: 11px; font-weight: 700; }
.sim-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sim-item input { width: 18px; height: 18px; accent-color: var(--success); }
.sim-item .cat { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--track); color: var(--muted); }
.sim-item .cat.food { background: var(--success-soft); color: var(--success-deep); }
.sim-out { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-out .o { border-radius: 14px; padding: 12px; } .sim-out .o b { display: block; font-size: 22px; letter-spacing: -0.02em; } .sim-out .o span { font-size: 12px; font-weight: 600; }
.sim-out .food { background: var(--success-soft); color: var(--success-deep); } .sim-out .rest { background: var(--brand-soft); color: var(--brand-edge); }

/* Phone storyboard */
.phones { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.phone { background: #fff; color: #16130F; border-radius: 26px; border: 6px solid #1C1C1E; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; font-size: 12px; box-shadow: var(--shadow-lg); }
.ph-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: #16130F; padding: 0 6px; }
.ph-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ph-card { border-radius: 14px; padding: 10px 12px; color: #fff; } .ph-card.bx { background: linear-gradient(135deg, #FF5C34, #C93A17); }
.ph-card-head { display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.pill-w { background: rgba(255,255,255,.2); padding: 1px 6px; border-radius: 999px; font-weight: 600; letter-spacing: 0; }
.ph-amt { font-size: 24px; font-weight: 700; margin-top: 10px; letter-spacing: -0.02em; } .ph-name { font-size: 9px; font-weight: 600; opacity: .85; margin-top: 2px; }
.ph-row { display: flex; align-items: center; gap: 8px; background: #F4F1EC; border-radius: 12px; padding: 8px 10px; font-weight: 600; }
.ph-row small { display: block; font-weight: 500; color: #7A736B; font-size: 10px; } .ph-row > span:nth-child(2) { flex: 1; }
.ph-row.new { background: #E8F5EC; outline: 2px solid #0E8345; }
.ph-btn { width: 24px; height: 24px; border-radius: 50%; background: #FF5C34; color: #fff; display: grid; place-items: center; font-weight: 800; }
.ph-chip { font-size: 10px; font-weight: 700; background: #0E8345; color: #fff; padding: 2px 8px; border-radius: 999px; }
.ph-line { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #E8E3DC; }
.ph-line .pos { color: #0E8345; }
.ph-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #E8F5EC; border-radius: 12px; padding: 8px 10px; font-weight: 700; color: #0E6B3A; }
.ph-switch { width: 34px; height: 20px; border-radius: 999px; background: #B9B2A9; position: relative; flex: none; } .ph-switch.on { background: #0E8345; }
.ph-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } .ph-switch.on::after { left: 16px; }
.ph-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-split div { border-radius: 12px; padding: 8px; text-align: center; } .ph-split b { display: block; font-size: 16px; } .ph-split span { font-size: 10px; font-weight: 600; line-height: 1.2; display: block; margin-top: 2px; }
.ph-split .g { background: #E8F5EC; color: #0E6B3A; } .ph-split .o { background: #FFE9E2; color: #C93A17; }
.ph-cta { margin-top: auto; background: #FF5C34; color: #fff; border-radius: 999px; padding: 10px; text-align: center; font-weight: 700; box-shadow: 0 3px 0 #C93A17; }
.ph-foot { font-size: 10px; color: #7A736B; line-height: 1.3; border-top: 1px dashed #E8E3DC; padding-top: 6px; }
.ph-issuer { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #F4F1EC; font-weight: 600; } .ph-issuer.sel { outline: 2px solid #0E8345; background: #E8F5EC; }
.ph-issuer .dot, .sources3 .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ph-note { font-size: 10px; color: #7A736B; line-height: 1.3; }
.ph-steps { display: flex; gap: 3px; } .ph-steps i { flex: 1; height: 5px; border-radius: 3px; background: #F0ECE6; } .ph-steps i.done { background: #FF5C34; } .ph-steps i.now { background: #FF5C34; opacity: .45; }
.ph-credit { background: #E8F5EC; color: #0E6B3A; border-radius: 12px; padding: 8px 10px; font-size: 11px; line-height: 1.3; }
.sources3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sources3 .src { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; background: var(--paper); border-radius: 14px; padding: 10px 12px; font-size: 13px; }
.sources3 .src b { font-size: 13px; } .sources3 .src > span:last-child { grid-column: 2; font-size: 12px; color: var(--muted); }
@media (max-width: 1200px) { .phones { grid-template-columns: repeat(5, 200px); } .sources3 { grid-template-columns: 1fr; } }

/* Android : le portage, iOS | Android côte à côte. Android's green only as the Android label and the "done" bar. */
:root { --android: #3DDC84; --on-android: #0B3D20; }
.adr-hero { border-radius: var(--r-card); padding: 22px 24px 18px; color: #fff; background: linear-gradient(135deg, #1C1C1E 0%, #2E2B29 100%); box-shadow: var(--shadow-lg); margin-bottom: 12px; }
.adr-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.adr-duo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adr-os { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.adr-os.ios { background: #F2F2F7; color: #1C1C1E; } .adr-os.android { background: var(--android); color: var(--on-android); }
.adr-arrow { font-size: 20px; font-weight: 700; opacity: .7; }
.adr-intro { max-width: 640px; font-size: 15px; line-height: 1.45; opacity: .9; margin: 12px 0 0; }
.adr-pct { text-align: right; } .adr-pct b { display: block; font-size: 52px; letter-spacing: -0.04em; line-height: 1; color: var(--android); }
.adr-pct span { font-size: 12px; font-weight: 600; opacity: .8; }
.adr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 14px; }
.adr-stats .cell { background: rgba(255,255,255,.07); border-radius: 16px; padding: 12px 14px; }
.adr-stats .cell b { display: block; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; }
.adr-stats .cell span { font-size: 12px; font-weight: 600; opacity: .8; }
.adr-bar { display: flex; gap: 4px; height: 14px; }
.adr-bar i { flex: 1; border-radius: 4px; background: rgba(255,255,255,.16); }
.adr-bar i.done { background: var(--android); } .adr-bar i.doing { background: var(--amber); animation: pulse 1.8s infinite; }
.adr-bar-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; font-weight: 600; opacity: .85; flex-wrap: wrap; }
.adr-bar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: rgba(255,255,255,.25); }
.adr-bar-legend i.done { background: var(--android); } .adr-bar-legend i.doing { background: var(--amber); }
.adr-method { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
.adr-step { background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.adr-step b { color: var(--ink); font-size: 13px; }
.adr-step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 11px; margin-bottom: 4px; }
.adr-jump { margin-bottom: 14px; }
/* The commits */
.adr-tl { display: flex; flex-direction: column; }
.adr-tl-item { display: grid; grid-template-columns: 64px 18px 1fr; gap: 10px; align-items: start; }
.adr-tl-time { font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; padding-top: 1px; } .adr-tl-time b { display: block; font-size: 15px; color: var(--ink); }
.adr-tl-dot { position: relative; align-self: stretch; }
.adr-tl-dot::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.adr-tl-item:first-child .adr-tl-dot::before { top: 8px; } .adr-tl-item:last-child .adr-tl-dot::before { bottom: auto; height: 8px; }
.adr-tl-dot::after { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--android); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.adr-tl-body { padding-bottom: 14px; min-width: 0; }
.adr-tl-title { font-weight: 700; font-size: 14px; }
.adr-tl-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.adr-link { border: 0; background: var(--track); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; cursor: pointer; }
.adr-link:hover { color: var(--ink); }
.adr-feat code, .adr-tl code, .adr-files code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600; background: var(--track); color: var(--ink); padding: 2px 7px; border-radius: 7px; white-space: nowrap; }
/* One feature */
.adr-feat { padding: 18px 18px 16px; scroll-margin-top: 8px; }
.adr-feat-head { display: flex; gap: 14px; align-items: flex-start; }
.adr-feat-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--paper); display: grid; place-items: center; font-size: 22px; flex: none; }
.adr-feat-titles { flex: 1; min-width: 0; }
.adr-feat-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.adr-feat-sum { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 900px; }
.adr-files { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 14px 0 10px; background: var(--paper); border-radius: 14px; padding: 10px 12px; }
.adr-files-col { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.adr-files-h { width: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.adr-files-h.android { color: var(--success-deep); }
.adr-files-arrow { font-size: 20px; font-weight: 700; color: var(--muted); }
.adr-feat-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600; }
.adr-feat-meta span { margin-left: 4px; }
.adr-pairs { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px 8px; scroll-snap-type: x proximity; }
.adr-pair { flex: none; margin: 0; background: var(--paper); border-radius: 18px; padding: 12px; width: 344px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.adr-pair-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adr-phone { position: relative; display: block; padding: 0; border: 4px solid #1C1C1E; border-radius: 22px; overflow: hidden; background: #1C1C1E; cursor: zoom-in; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(22,19,15,.14); aspect-ratio: 9 / 19.6; transition: transform .12s ease; }
.adr-phone:hover { transform: translateY(-2px); }
.adr-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: var(--track); }
.adr-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .adr-col .adr-phone { width: 100%; }
.adr-phone.missing img { visibility: hidden; } .adr-phone.missing::after { content: "capture absente"; position: absolute; inset: 0; display: grid; place-items: center; color: #A39C94; font-size: 11px; font-weight: 600; }
.adr-side { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--courier); color: var(--on-courier); white-space: nowrap; }
.adr-side.android { background: var(--android); color: var(--on-android); }
.adr-pair figcaption { font-size: 12px; font-weight: 600; line-height: 1.35; }
.adr-dark { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #1C1C1E; color: #F2F2F7; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 1px var(--line); }
.adr-nopairs { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; font-weight: 600; }
/* What differs */
.adr-area { font-size: 13px; font-weight: 700; margin: 14px 0 8px; } .adr-area:first-of-type { margin-top: 0; }
.adr-diffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.adr-diff { background: var(--paper); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.adr-diff.has-todo { box-shadow: inset 3px 0 0 var(--amber); }
.adr-diff-title { font-weight: 700; font-size: 14px; }
.adr-diff-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; line-height: 1.35; }
.adr-diff-row .adr-side { justify-self: start; margin-top: 1px; }
.adr-diff-row:nth-of-type(2) > span:last-child { color: var(--muted); }
.adr-diff-todo { font-size: 12px; font-weight: 700; color: var(--amber-deep); background: var(--amber-soft); border-radius: 10px; padding: 5px 9px; }
/* Next */
.adr-next { display: flex; flex-direction: column; gap: 8px; }
.adr-next-item { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 14px; padding: 10px 12px; }
.adr-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--fill); flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.adr-next-item.done .adr-check { background: var(--success); border-color: var(--success); }
.adr-next-item.doing .adr-check { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.adr-next-n { font-size: 12px; font-weight: 700; color: var(--muted); width: 18px; text-align: right; flex: none; }
.adr-next-body { flex: 1; min-width: 0; } .adr-next-body b { font-size: 14px; }
.adr-next-files { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-word; }
/* Lightbox */
.adr-lb { position: fixed; inset: 0; z-index: 950; background: rgba(15,14,13,.86); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.adr-lb-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.adr-lb-phones { display: flex; gap: 20px; justify-content: center; align-items: flex-start; }
.adr-lb-phones figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.adr-lb-phones img { display: block; max-height: calc(100vh - 150px); max-width: min(42vw, 460px); border-radius: 26px; border: 5px solid #1C1C1E; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #1C1C1E; }
.adr-lb-cap { text-align: center; color: #F3EFE9; display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
.adr-lb-cap b { font-size: 15px; } .adr-lb-cap span:last-child { font-size: 12px; opacity: .7; font-weight: 600; }
.adr-lb-close { position: absolute; top: 16px; right: 16px; }
.adr-lb-nav { flex: none; font-size: 24px; }
@media (max-width: 1200px) { .adr-method { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .adr-stats { grid-template-columns: 1fr 1fr; } .adr-pct { text-align: left; }
  .adr-files { grid-template-columns: 1fr; } .adr-files-arrow { transform: rotate(90deg); justify-self: start; }
  .adr-pair { width: 280px; } .adr-method { grid-template-columns: 1fr 1fr; }
  .adr-lb { padding: 56px 8px 16px; } .adr-lb-nav { position: absolute; bottom: 16px; } .adr-lb-nav.prev { left: 16px; } .adr-lb-nav.next { right: 16px; }
  .adr-lb-phones { gap: 8px; } .adr-lb-phones img { max-width: 46vw; max-height: calc(100vh - 200px); border-radius: 18px; border-width: 3px; }
}

/* Android · the audit of the iOS app (what is missing) */
.adr-audit { display: flex; flex-direction: column; gap: 8px; }
.adr-audit-item { display: flex; align-items: flex-start; gap: 12px; background: var(--paper); border-radius: 14px; padding: 12px; }
.adr-audit-item.done { opacity: .6; }
.adr-audit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adr-audit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adr-audit-note { font-size: 13px; line-height: 1.4; color: var(--muted); }
.adr-area-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.adr-prio { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--track, rgba(120,120,128,.12)); }
.adr-prio.haute { color: var(--amber-deep); background: var(--amber-soft); }
/* Notre modèle de prix ---------------------------------------------------------------------------------------- */
.md-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.md-hero-card { background: var(--card); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow); }
.md-q { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.md-a { font-size: 18px; font-weight: 700; margin: 6px 0 4px; line-height: 1.3; }
.md-why { color: var(--muted); font-size: 13px; }
.md-inputs { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 16px; }
.md-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.md-inputs label > span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.md-inputs input[type=number] { width: 70px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 8px; font-size: 14px; font-weight: 600; }
.md-inputs input[type=range] { width: 220px; accent-color: var(--brand); }
.md-inputs .pr-check { flex-direction: row; align-items: center; text-transform: none; font-size: 14px; color: var(--ink); }
.md-inputs .chip:disabled { opacity: .4; cursor: default; }
.md-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.md-col { background: var(--paper); border-radius: 16px; padding: 14px 16px; }
.md-col-head { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.md-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.md-line small { display: block; color: var(--muted); font-size: 12px; }
.md-line b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-total { border-bottom: 0; padding-top: 10px; font-size: 16px; font-weight: 700; }
.md-total.good b { color: var(--success); } .md-total.bad b { color: var(--danger); }
.md-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.md-note.warn { color: var(--amber-deep); }
.md-flow { grid-column: 1 / -1; }
.md-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--track); }
.md-bar i, .md-legend i { display: inline-block; height: 100%; }
.md-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 13px; }
.md-legend i { width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.m-shop { background: #B9B2A9; } .m-courier { background: var(--success); } .m-stripe { background: #8E7CC3; } .m-us { background: var(--brand); }
.md-p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.md-list { margin: 0 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.55; } .md-list li { margin-bottom: 4px; }
.md-table td { white-space: normal; } .md-table tbody tr { cursor: default; }
.md-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .md-vs > div { background: var(--paper); border-radius: 16px; padding: 12px 14px; }
@media (max-width: 980px) { .md-hero, .md-result, .md-vs { grid-template-columns: 1fr; } }

/* Notre modèle de prix, raconté ----------------------------------------------------------------------------- */
.md-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 16px; margin-bottom: 12px; }
.md-ask input[type=number] { width: 72px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 10px; font-size: 16px; font-weight: 700; }
.md-ask input[type=range] { width: 200px; accent-color: var(--brand); }
.md-ico { font-size: 20px; width: 28px; text-align: center; }
.md-tick { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; margin-right: 14px; cursor: pointer; }
.md-big { font-size: 20px; margin: 0 0 12px; } .md-big b { font-size: 24px; }
/* The client's light: what they pay on top of the groceries, as a share of the groceries (phase 1, 2026-11-04). */
.md-light { border-radius: 14px; padding: 10px 14px; font-size: 15px; margin: 0 0 14px; }
.md-light small { display: block; font-size: 12px; margin-top: 4px; opacity: .85; }
.md-light.green { background: var(--success-soft); color: var(--success-deep); }
.md-light.orange { background: var(--amber-soft); color: var(--amber-deep); }
.md-light.red { background: var(--danger-soft); color: var(--danger); }
.md-piles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.md-pile { border-radius: 18px; padding: 16px; background: var(--paper); border-top: 6px solid var(--line); }
.md-pile.shop { border-top-color: #B9B2A9; } .md-pile.courier { border-top-color: var(--success); } .md-pile.us { border-top-color: var(--brand); }
.md-pile-e { font-size: 30px; } .md-pile-v { font-size: 26px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.md-pile-w { font-weight: 700; color: var(--muted); } .md-pile-why { font-size: 13px; color: var(--muted); margin-top: 6px; }
.md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.md-box { background: var(--paper); border-radius: 18px; padding: 14px 16px; }
.md-box-h { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.md-step { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.md-step small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.md-op { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .md-op.pos { color: var(--success-deep); } .md-op.neg { color: var(--danger); }
.md-eq { border-bottom: 0; font-size: 16px; } .md-eq.good .md-op { color: var(--success-deep); } .md-eq.bad .md-op { color: var(--danger); }
.md-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.md-rule-title { font-weight: 800; margin-bottom: 6px; }
.md-rule { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 14px; }
.md-rule.changed { background: var(--amber-soft); }
.md-rule-in { display: inline-flex; align-items: center; gap: 6px; }
.md-rule-in input { width: 74px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 8px; font-weight: 700; font-size: 14px; }
.md-rule-in em { font-style: normal; color: var(--muted); font-size: 12px; min-width: 52px; }
.md-rule small { grid-column: 1 / -1; color: var(--amber-deep); font-size: 12px; }
@media (max-width: 1100px) { .md-piles, .md-two, .md-rules { grid-template-columns: 1fr; } }
/* Algorithme ---------------------------------------------------------------------------------------------------- */
.al-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.al-hero-card { background: var(--card); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); position: relative; }
.al-num { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 800; font-size: 17px; box-shadow: 0 3px 0 var(--brand-edge); margin-bottom: 12px; }
.al-q { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.al-why { color: var(--muted); font-size: 14px; }
.al-rings { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.al-svg { width: 100%; max-width: 320px; height: auto; }
.al-ring-t { font-size: 11px; font-weight: 800; fill: var(--ink); }
.al-ring-m { font-size: 10px; font-weight: 600; fill: var(--muted); }
.al-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--muted); }
.al-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.al-inputs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.al-seg { display: inline-flex; background: var(--track); border-radius: 999px; padding: 4px; gap: 4px; align-self: flex-start; }
.al-seg button { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.al-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.al-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); max-width: 420px; }
.al-field b { color: var(--ink); }
.al-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.al-person { background: var(--track); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.al-person label { display: flex; flex-direction: column; gap: 2px; }
.al-person label b { color: var(--ink); }
.al-pname { font-weight: 800; color: var(--ink); font-size: 15px; }
.al-checks { display: flex; flex-direction: column; gap: 3px; }
.al-checks label { flex-direction: row; align-items: center; gap: 6px; }
input[type=range] { accent-color: var(--brand); width: 100%; }
.al-timeline { display: flex; flex-direction: column; gap: 8px; }
.al-row { display: grid; grid-template-columns: 130px 1fr minmax(220px, 1.2fr); gap: 12px; align-items: center; }
.al-row.off .al-who { color: var(--muted); }
.al-who { font-weight: 700; }
.al-tag { font-size: 10px; font-weight: 800; background: var(--brand-soft); color: var(--brand); padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.al-track { position: relative; height: 10px; background: var(--track); border-radius: 999px; }
.al-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); transition: left .3s ease; }
.al-what { font-size: 13px; }
.al-axis { display: grid; grid-template-columns: 130px 1fr minmax(220px, 1.2fr); gap: 12px; font-size: 11px; color: var(--muted); }
.al-axis-t { display: flex; justify-content: space-between; }
.al-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.al-list li { display: flex; gap: 12px; align-items: flex-start; }
.al-ico { width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--track); display: grid; place-items: center; font-size: 17px; }
.al-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.al-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.al-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.al-table code { font-size: 12px; background: var(--track); padding: 2px 6px; border-radius: 6px; }
.al-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.al-idea { display: flex; gap: 12px; background: var(--track); border-radius: 16px; padding: 14px; }
@media (max-width: 900px) {
  .al-hero { grid-template-columns: 1fr; }
  .al-row, .al-axis { grid-template-columns: 90px 1fr; }
  .al-axis > div:last-child { display: none; }
  .al-what { grid-column: 1 / -1; }
}

/* Journaux ------------------------------------------------------------------------------------------------------ */
.lg-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.lg-sessions { display: flex; flex-direction: column; gap: 8px; }
.lg-session { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: var(--track); color: var(--ink); border-radius: 14px; padding: 10px 12px; cursor: pointer; font-size: 12px; }
.lg-session.on { background: var(--card); box-shadow: var(--shadow); outline: 2px solid var(--brand); }
.lg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lg-bar h3 { margin: 0; flex: 1; min-width: 200px; }
.lg-bar .input { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0 10px; min-width: 220px; }
.lg-lines { background: #101010; color: #E6E6E6; border-radius: 14px; padding: 14px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.lg-lines .bad { color: #FF8A7A; } .lg-lines .good { color: #9BE0B9; }
@media (max-width: 900px) { .lg-grid { grid-template-columns: 1fr; } }

/* ③ On a tout essayé */
.md-verdict { border-radius: 18px; padding: 16px 18px; font-size: 15px; margin-bottom: 12px; }
.md-verdict.green { background: var(--success-soft); } .md-verdict.orange { background: var(--amber-soft); } .md-verdict.red { background: var(--danger-soft); }
.md-verdict-big { font-size: 20px; margin-bottom: 4px; }
.md-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.md-facts > div { background: var(--paper); border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.md-facts span { margin-right: 8px; }
.md-grid { border-collapse: separate; border-spacing: 6px; width: 100%; font-variant-numeric: tabular-nums; }
.md-grid th { font-size: 12px; color: var(--muted); text-align: center; font-weight: 700; }
.md-grid td { text-align: center; border-radius: 12px; padding: 10px 6px; font-weight: 700; font-size: 14px; }
.md-grid td.green { background: var(--success-soft); color: var(--success-deep); }
.md-grid td.orange { background: var(--amber-soft); color: var(--amber-deep); }
.md-grid td.red { background: var(--danger-soft); color: var(--danger); }
.md-worst { display: grid; gap: 6px; }
.md-worst-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; text-align: left; border: 0; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.md-worst-row:hover { background: var(--track); }
.md-worst-row span:first-child { font-weight: 800; }

/* Notre modèle de prix, on one screen (2026-11-05): the order | our rules | the result. */
.mx { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.05fr) minmax(360px, 1.35fr); gap: 14px; align-items: start; }
.mx-col { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 18px; }
.mx-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 10px; }
.mx-row { display: block; margin-bottom: 12px; }
.mx-row-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 4px; }
.mx-row-h b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mx-row input[type=range] { width: 100%; accent-color: var(--brand); margin: 0; }
.mx-seg { display: flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 3px; }
.mx-seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 7px 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mx-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mx-seg button:disabled { opacity: .45; cursor: default; }
.mx-tick { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; cursor: pointer; }
.mx-tick input { width: 18px; height: 18px; accent-color: var(--brand); }
.mx-group { margin-bottom: 10px; }
.mx-group-h { font-weight: 700; font-size: 14px; margin: 4px 0 2px; }
.mx-rule { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; font-size: 13.5px; }
.mx-rule small { display: block; font-size: 11.5px; color: var(--amber-deep); }
.mx-rule.changed { background: var(--amber-soft); }
.mx-in { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.mx-in input { width: 70px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 8px; font-weight: 700; font-size: 14px; text-align: right; }
.mx-in em { font-style: normal; font-size: 12px; color: var(--muted); min-width: 30px; }
.mx-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.mx-out { display: grid; gap: 14px; }
.mx-warn { background: var(--amber-soft); color: var(--amber-deep); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.mx-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mx-big > span:first-child { font-size: 15px; font-weight: 600; }
.mx-big b { font-size: 34px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mx-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--track); margin-bottom: 10px; }
.mx-bar i { display: block; height: 100%; }
.mx-bar i.shop, .mx-legend i.shop { background: #CFC8BE; } .mx-bar i.courier, .mx-legend i.courier { background: var(--success); }
.mx-bar i.state, .mx-legend i.state { background: #8E8E93; } .mx-bar i.stripe, .mx-legend i.stripe { background: #635BFF; }
.mx-bar i.prov, .mx-legend i.prov { background: #A2845E; } .mx-bar i.us, .mx-legend i.us { background: var(--brand); }
.mx-legend { display: grid; gap: 2px; margin-bottom: 12px; }
.mx-legend > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; padding: 2px 0; }
.mx-legend i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.mx-legend b { font-variant-numeric: tabular-nums; }
.mx-legend .us-row { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.mx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-tile { background: var(--paper); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.mx-tile span { font-size: 12px; color: var(--muted); font-weight: 600; }
.mx-tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mx-tile small { font-size: 11.5px; color: var(--muted); }
.mx-tile.green { background: var(--success-soft); } .mx-tile.green b { color: var(--success-deep); }
.mx-tile.orange { background: var(--amber-soft); } .mx-tile.orange b { color: var(--amber-deep); }
.mx-tile.red { background: var(--danger-soft); } .mx-tile.red b { color: var(--danger); }
.mx-verdict { border-radius: 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; margin-bottom: 10px; }
.mx-verdict.green { background: var(--success-soft); } .mx-verdict.orange { background: var(--amber-soft); } .mx-verdict.red { background: var(--danger-soft); }
.mx-cl { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mx-grid-h { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.mx-grid { border-collapse: separate; border-spacing: 4px; width: 100%; font-variant-numeric: tabular-nums; margin: -4px; width: calc(100% + 8px); }
.mx-grid th { font-size: 11.5px; color: var(--muted); font-weight: 700; text-align: center; }
.mx-grid td { text-align: center; border-radius: 8px; padding: 6px 2px; font-weight: 700; font-size: 13px; }
.mx-grid td.green { background: var(--success-soft); color: var(--success-deep); }
.mx-grid td.orange { background: var(--amber-soft); color: var(--amber-deep); }
.mx-grid td.red { background: var(--danger-soft); color: var(--danger); }
.mx-grid td.off { background: var(--track); color: var(--muted); font-weight: 500; }
.mx-more { grid-column: 1 / -1; }
.mx-more-h { font-weight: 700; font-size: 14px; margin: 12px 0 6px; }
.mx-worst { display: grid; gap: 6px; }
.mx-worst button { display: grid; grid-template-columns: 80px 1fr; gap: 10px; text-align: left; border: 0; background: var(--card); color: var(--ink); border-radius: 12px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: 13.5px; box-shadow: var(--shadow); }
@media (max-width: 1250px) { .mx { grid-template-columns: 1fr 1fr; } .mx-out { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .mx, .mx-out { grid-template-columns: 1fr; } .mx-tiles { grid-template-columns: 1fr; } }

/* How we get there, under the three columns (2026-11-05). */
.mx-why { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; gap: 14px; align-items: start; }
.mx-why .md-box { background: var(--card); box-shadow: var(--shadow); border-radius: var(--r-card); padding: 16px 18px; }
.mx-why .md-step { grid-template-columns: 84px 1fr; }
.mx-hint { display: block; }
@media (max-width: 1250px) { .mx-why { grid-template-columns: 1fr; } }

/* Notre modèle de prix, one question at a time (2026-11-05, v3). */
.mz-head { max-width: 860px; margin: 8px auto 16px; }
.mz-head h2 { font-size: 26px; margin: 0 0 4px; }
.mz-head p { margin: 0; color: var(--muted); font-size: 15px; }
.mz { max-width: 860px; margin: 0 auto 40px; display: grid; gap: 16px; }
.mz-card, .mz-hero { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 22px 26px; }
.mz-muted { color: var(--muted); font-size: 14px; font-weight: 400; }
.mz-warn { background: var(--amber-soft); color: var(--amber-deep); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.mz-lead { font-size: 17px; color: var(--muted); margin-bottom: 14px; } .mz-lead b { color: var(--ink); }
.mz-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.mz-three > div { display: grid; gap: 4px; }
.mz-three span { font-size: 14px; color: var(--muted); font-weight: 600; }
.mz-three b { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mz-three small { font-size: 13.5px; color: var(--muted); }
.mz-good { color: var(--success-deep); } .mz-bad { color: var(--danger); }
small.mz-green { color: var(--success-deep); } small.mz-orange { color: var(--amber-deep); } small.mz-red { color: var(--danger); }
.mz-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--track); gap: 2px; }
.mz-bar i, .mz-keys i { display: block; height: 100%; }
.mz-bar i.shop, .mz-keys i.shop { background: #D3CCC2; } .mz-bar i.courier, .mz-keys i.courier { background: var(--success); } .mz-bar i.us, .mz-keys i.us { background: var(--brand); }
.mz-keys { display: flex; gap: 22px; margin-top: 10px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.mz-keys span { display: inline-flex; align-items: center; gap: 8px; } .mz-keys i { width: 10px; height: 10px; border-radius: 3px; }
.mz-slider { display: block; margin-bottom: 18px; }
.mz-slider-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-bottom: 8px; }
.mz-slider-h b { font-size: 18px; font-variant-numeric: tabular-nums; }
.mz-slider input[type=range] { width: 100%; accent-color: var(--brand); margin: 0; }
.mz details > summary, .mz-rules > summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; padding: 4px 0; }
.mz details > summary::-webkit-details-marker { display: none; }
.mz details > summary::before { content: "›"; display: inline-block; width: 16px; transition: transform .15s; color: var(--muted); }
.mz details[open] > summary::before { transform: rotate(90deg); }
.mz-more { border-top: 1px solid var(--line); padding-top: 12px; }
.mz-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; font-size: 15px; flex-wrap: wrap; }
.mz-seg { display: inline-flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 3px; }
.mz-seg button { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mz-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mz-check { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 10px 0; cursor: pointer; }
.mz-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.mz-why { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mz-reason h4 { margin: 0 0 6px; font-size: 16px; }
.mz-reason p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.mz-line { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.mz-line small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mz-op { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .mz-op.neg { color: var(--danger); }
.mz-total { border-bottom: 0; font-weight: 700; } .mz-total.good .mz-op { color: var(--success-deep); } .mz-total.bad .mz-op { color: var(--danger); }
.mz-test-h { font-size: 17px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.mz-test-h > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; background: var(--success-soft); }
.mz-test-h > span.mz-bad { background: var(--danger-soft); } .mz-test-h > span.mz-warn-ic { background: var(--amber-soft); color: var(--amber-deep); }
#mzTest > p { margin: 6px 0 10px; }
.mz-sub { font-weight: 700; font-size: 14px; margin: 14px 0 8px; }
.mz-grid { border-collapse: separate; border-spacing: 4px; width: calc(100% + 8px); margin: -4px; font-variant-numeric: tabular-nums; }
.mz-grid th { font-size: 12px; color: var(--muted); font-weight: 600; }
.mz-grid td { text-align: center; border-radius: 8px; padding: 8px 2px; font-size: 13.5px; font-weight: 600; }
.mz-grid td.green { background: var(--success-soft); color: var(--success-deep); } .mz-grid td.orange { background: var(--amber-soft); color: var(--amber-deep); }
.mz-grid td.red { background: var(--danger-soft); color: var(--danger); } .mz-grid td.off { background: var(--track); color: var(--muted); }
.mz-worst { display: grid; gap: 6px; }
.mz-worst button { display: grid; grid-template-columns: 70px 1fr; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.mz-rules > p { margin: 6px 0 14px; }
.mz-rule-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-bottom: 14px; }
.mz-rule-title { font-weight: 700; font-size: 14px; margin: 8px 0 4px; }
.mz-rule { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 8px; margin: 0 -8px; border-radius: 10px; font-size: 14px; }
.mz-rule small { display: block; color: var(--amber-deep); font-size: 12px; }
.mz-rule.changed { background: var(--amber-soft); }
.mz-in { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.mz-in input { width: 72px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 10px; font: inherit; font-weight: 700; font-size: 14px; text-align: right; }
.mz-in em { font-style: normal; color: var(--muted); font-size: 12.5px; min-width: 84px; }
@media (max-width: 760px) { .mz-three, .mz-why, .mz-rule-groups { grid-template-columns: 1fr; } .mz-three b { font-size: 32px; } }