/* ConfigMaker v2.0 — liquid glass, green tint, light/dark/system, responsive, print */
:root{
  --bg:#f4f7f2; --bg-soft:#eaf1e8; --surface:#ffffff; --surface-2:#fbfdfb;
  --ink:#0b1410; --ink-2:#1c2f24; --muted:#5a6b5f; --muted-2:#8a978d;
  --line:rgba(11,20,16,.09); --line-strong:rgba(11,20,16,.15);
  --brand:#1a8744; --brand-2:#7ed491; --accent:#2fa968; --brand-ink:#0f5c2c;
  --success:#0ca678; --warning:#e8890c; --danger:#e03131; --info:#1971c2;
  --kj-fav:#e5484d; --kj-rec:#2563eb; --kj-avoid:#b42318; --kj-top:#c99700; --kj-tested:#1a8744;
  --active-bg:var(--ink); --active-fg:#fff; --active-link:#9fe7bf;
  --radius:20px; --radius-lg:28px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,20,16,.06),0 4px 16px rgba(11,20,16,.06);
  --shadow-md:0 8px 30px rgba(11,20,16,.10),0 2px 8px rgba(11,20,16,.06);
  --shadow-lg:0 24px 70px rgba(26,135,68,.18),0 8px 24px rgba(11,20,16,.10);
  --glass-bg:color-mix(in srgb,var(--surface) 97%,transparent);
  --glass-blur:blur(18px) saturate(1.4);
  --nav-h:68px; --max:1240px; --mobilebar-h:68px; --sheet-ease:cubic-bezier(.22,1,.36,1);
  --font:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"]{
  --bg:#0a100d; --bg-soft:#101814; --surface:#131c17; --surface-2:#17211b;
  --ink:#eef4ef; --ink-2:#cfe0d3; --muted:#9db3a4; --muted-2:#71836f;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --brand:#4ade80; --brand-2:#22c55e; --accent:#34d399; --brand-ink:#a7f3c9;
  --kj-fav:#ff6b6b; --kj-rec:#60a5fa; --kj-avoid:#f87171; --kj-top:#fbbf24; --kj-tested:#4ade80;
  --active-bg:var(--ink); --active-fg:var(--bg); --active-link:#0f5c2c;
}
@media (prefers-color-scheme:dark){ [data-theme="system"]{ --bg:#0a100d; --bg-soft:#101814; --surface:#131c17; --surface-2:#17211b; --ink:#eef4ef; --ink-2:#cfe0d3; --muted:#9db3a4; --muted-2:#71836f; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --brand:#4ade80; --brand-2:#22c55e; --accent:#34d399; --brand-ink:#a7f3c9; --kj-fav:#ff6b6b; --kj-rec:#60a5fa; --kj-avoid:#f87171; --kj-top:#fbbf24; --kj-tested:#4ade80; --active-bg:var(--ink); --active-fg:var(--bg); --active-link:#0f5c2c; } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);margin:0;padding:0;color:var(--ink);
  background:radial-gradient(900px 480px at 12% -4%,rgba(26,135,68,.12),transparent 60%),radial-gradient(700px 500px at 50% 110%,rgba(15,92,44,.10),transparent 60%),var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font)}
::selection{background:rgba(26,135,68,.22)}
html[data-anim="off"] *,html[data-anim="off"] *::before,html[data-anim="off"] *::after{animation:none!important;transition:none!important}
html[data-anim="off"]{scroll-behavior:auto}
html[data-anim="off"] .slot-sweep.refreshing-sel::after{animation:sk 1.4s infinite!important}
html[data-anim="off"] .alt-toggle.refreshing-alt::after,html[data-anim="off"] .alt-item.refreshing::after,html[data-anim="off"] #sumDescPane .ditem.refreshing::after{animation:sk 1.2s infinite!important}
html[data-anim="off"] .variant-card.pending::after,html[data-anim="off"] .variant-card.loading::after{animation:sk 1.2s infinite!important}
html[data-anim="off"] .slot-variants.loading::after{animation:sk 1.4s infinite!important}
html[data-anim="off"] .wcomp.st-search::after{animation:sk 1.4s infinite!important}
html[data-anim="off"] .wcomp.st-import::after{animation:skv 1.35s linear infinite!important}
html[data-anim="off"] #progressPop .fa-spin{animation:fa-spin 2s linear infinite!important}
html[data-bg="off"] .bg-orb{display:none!important}
html[data-bg="off"] body{background:var(--bg)}
html[data-glass="off"] nav,html[data-glass="off"] .glass,html[data-glass="off"] .modal,html[data-glass="off"] .modal-head,html[data-glass="off"] .gallery-box,html[data-glass="off"] #aiPopup,html[data-glass="off"] #progressPop,html[data-glass="off"] .consent-bar,html[data-glass="off"] .picker-tip,html[data-glass="off"] .sum-sticky,html[data-glass="off"] .sum-totals-dock,html[data-glass="off"] .picker-foot,html[data-glass="off"] .picker-head,html[data-glass="off"] .editor-head,html[data-glass="off"] .editor-body,html[data-glass="off"] .mobile-totalbar,html[data-glass="off"] #modalBody:has(.wk) .btn-row,html[data-glass="off"] #summaryPanel,html[data-glass="off"] #pickerPanel,html[data-glass="off"] #editorPanel,html[data-glass="off"] #tutorialVideoPanel{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-glass="off"] .overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}
.pagebody{padding-bottom:40px}
/* bg orbs */
.bg-orb{position:fixed;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(90px);will-change:transform;opacity:1}
.bg-orb-green{width:min(560px,90vw);height:min(560px,90vw);background:radial-gradient(circle,rgba(26,135,68,.22),transparent 65%)}
.bg-orb-teal{width:min(460px,80vw);height:min(460px,80vw);background:radial-gradient(circle,rgba(47,169,104,.18),transparent 65%)}
.bg-orb-lime{width:min(420px,75vw);height:min(420px,75vw);background:radial-gradient(circle,rgba(126,212,145,.20),transparent 65%)}
.bg-pos-1{top:-8%;left:-10%}.bg-pos-2{top:38%;right:-12%}.bg-pos-3{top:72%;left:-8%}
/* nav */
nav{position:sticky;top:0;z-index:1001;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 14px;background:var(--bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid transparent;transition:all .26s ease}
body.scrolled nav{top:12px;width:calc(100% - 24px);max-width:var(--max);margin:0 auto;border-radius:var(--radius-pill);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-color:var(--line);box-shadow:var(--shadow-sm)}
.nav-spacer{display:none}
.kjbrand{display:flex;align-items:center}
.kjbrand a{display:flex;align-items:center;gap:10px}
.imgtitle{width:40px;height:40px;border-radius:12px}
.brand-name{font-weight:900;font-size:.95rem;line-height:1}
.brand-name small{display:block;font-weight:700;font-size:.68rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.version-btn{background:none;border:none;color:var(--brand-ink);font-weight:900;cursor:pointer;padding:0;font-size:.72rem;letter-spacing:.1em}
.version-btn:hover{text-decoration:underline}
.menutitles{display:flex;align-items:center;gap:6px}
.icon-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-pill);padding:9px 13px;font-size:.82rem;font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,background .2s ease}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.flag{width:20px;height:20px;border-radius:50%;object-fit:cover}
.install-mobile.btn{display:none;width:100%;justify-content:center;margin-top:10px}
.settings-export.install-settings{display:none}
.settings-list{display:flex;flex-direction:column;gap:10px}
.settings-export,.set-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:12px 14px;color:var(--ink);font:inherit;text-align:left}
.settings-export{cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .18s ease}
.settings-export:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.settings-export>i{color:var(--muted);font-size:.8rem}
.settings-review{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--brand) 26%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--brand) 6%,var(--surface));padding:12px 14px;flex-wrap:wrap}
.settings-review .settings-txt{flex:1 1 180px}
.settings-review-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.settings-review-actions .btn{white-space:nowrap}
.settings-ico{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(26,135,68,.10);color:var(--brand-ink);font-size:1rem}
.settings-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.settings-txt strong{font-size:.88rem;line-height:1.3}
.settings-txt small{font-size:.74rem;line-height:1.4;font-weight:600;color:var(--muted)}
.set-row{cursor:pointer}
.set-switch{position:relative;flex:0 0 auto;width:46px;height:26px}
.set-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.set-slider{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:background .2s ease}
.set-slider::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(11,20,16,.25);transition:transform .2s ease}
.set-switch input:checked+.set-slider{background:var(--brand)}
.set-switch input:checked+.set-slider::after{transform:translateX(20px)}
.set-switch input:focus-visible+.set-slider{outline:2px solid var(--brand);outline-offset:2px}
.burger-close{display:none}
.iloveburgers{display:none}
.ham{width:44px;height:44px;display:flex;justify-content:center;align-items:center;cursor:pointer}
.bur{width:20px;height:16px;display:flex;justify-content:space-between;flex-direction:column}
.ger{width:20px;height:2.5px;border-radius:3px;background:var(--ink);transition:.25s;display:block}
.q.a{transform:rotate(41deg) translate(1px,-1px);width:24px}.w.b{opacity:0;transform:scale(0)}.e.c{transform:rotate(-41deg) translate(1px,1px);width:24px}
/* glass + hero */
.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.hero-block{margin-top:18px;padding:22px;display:flex;flex-direction:column;gap:16px}
.hero-top{display:flex;gap:18px;flex-wrap:wrap;align-items:end;justify-content:space-between}
.config-id{flex:2;min-width:240px}
.fld-label{font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.config-name-row{display:flex;gap:10px;align-items:center;margin-top:6px}
.config-name{flex:1;font-size:1.4rem;font-weight:900;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;min-width:0}
.budget-box{flex:0 0 220px}
.budget-row{display:flex;gap:8px;align-items:center;margin-top:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;font-weight:900}
.budget-input{border:none;background:none;color:var(--ink);font:inherit;width:100%;outline:none}
.ver-chip{font-size:.75rem;font-weight:800;color:var(--brand-ink);background:rgba(26,135,68,.10);border:1px solid rgba(26,135,68,.2);padding:8px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.ver-chip.is-unsaved{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface));border-color:color-mix(in srgb,var(--danger) 25%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 7%,transparent)}
.pill-row{display:flex;justify-content:center}
.pill-row.around{justify-content:space-around;gap:10px;flex-wrap:wrap}
.pill{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px;box-shadow:var(--shadow-sm);max-width:100%}
.pill button{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;color:var(--muted);font-weight:800;font-size:.85rem;padding:10px 14px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .18s ease,box-shadow .2s ease}
.pill button:hover{background:rgba(26,135,68,.10);color:var(--ink)}
.pill button:active{transform:scale(.97)}
.pill button.active{background:var(--active-bg);color:var(--active-fg);box-shadow:0 4px 14px rgba(11,20,16,.16)}
.pill button:disabled{opacity:.4;cursor:not-allowed}
.has-pill-ind{position:relative;isolation:isolate}
.pill-ind{position:absolute;left:0;top:0;z-index:0;border-radius:var(--radius-pill);background:var(--active-bg);box-shadow:0 4px 14px rgba(11,20,16,.16);pointer-events:none;opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),opacity .15s ease}
.has-pill-ind>button{position:relative;z-index:1}
.has-pill-ind>button.active,.has-pill-ind>button.active:hover{background:transparent!important;color:var(--active-fg);box-shadow:none}
.pill.tabs{width:100%;max-width:100%;flex-wrap:nowrap;justify-content:stretch;overflow-x:auto;scrollbar-width:none}
.pill.tabs::-webkit-scrollbar{display:none}
.pill.tabs>button{flex:1 1 0;min-width:104px;justify-content:center}
.pill.tabs.small{margin:0 auto;width:max-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pill.tabs.small button{flex:0 0 auto;min-width:0}
.pill.tabs.small::-webkit-scrollbar{display:none}
.sum-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sum-id{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.sum-id i{color:var(--muted)}
.sum-id strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.2rem}
.sum-head .btn{flex:0 0 auto}
.sum-close{display:none}
.sum-sticky{position:sticky;top:0;z-index:8;margin:-18px -18px 12px;padding:18px 18px 10px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line);border-radius:28px 28px 0 0}
.sum-sticky .sum-head{margin-bottom:10px}
/* description sections */
.dsec{margin:0}
.dsec-head{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px 0;cursor:pointer}
.dsec-head i{font-size:.9rem}
.dsec-total{margin-left:auto;color:var(--ink);font-size:1.02rem}
.sum-compat-flags{display:inline-flex;gap:6px;margin-left:10px}
.mini-count{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:900;padding:2px 8px;border-radius:999px;cursor:pointer}
.mini-count.err{background:rgba(224,49,49,.12);color:var(--danger);border:1px solid rgba(224,49,49,.42)}
.mini-count.warn{background:rgba(245,159,0,.14);color:#b97a0c;border:1px solid rgba(245,159,0,.42)}
.mini-count:hover{filter:brightness(.96)}
.dsec-head .foldchev{font-size:.8rem;transition:transform .2s}
.dsec-dots{border-top:2px dotted var(--line-strong);margin:0 0 8px 0}
.dsec.collapsed .ditem,.dsec.collapsed .dsec-dots{display:none}
.dsec.collapsed .foldchev{transform:rotate(-90deg)}
.dsec-sep{border-top:2px solid var(--line-strong);margin:10px 0 12px 0}
.ditem{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px}
.ditem:hover{background:rgba(26,135,68,.07)}
#sumDescPane .ditem.refreshing{position:relative;overflow:hidden;opacity:.72}
#sumDescPane .ditem.refreshing::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(128,128,128,.22) 50%,transparent 80%);background-size:200% 100%;animation:sk 1.2s infinite}
.ditem.pill-item{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:8px 12px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-sm)}
.ditem.pill-item:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-md);background:var(--surface)}
.ditem.pill-item .di-btns{flex:0 0 auto}
.dsec-err .ditem.pill-item{border-color:rgba(224,49,49,.35)}
.dsec-warn .ditem.pill-item{border-color:rgba(245,159,0,.40)}
.dsec-checked .ditem.pill-item{border-color:rgba(60,180,110,.45)}
.di-ico{flex:0 0 auto;color:var(--muted);display:flex;align-items:center}
.di-ico svg{width:16px;height:16px}
.di-ico i,.di-ico .bi,.di-ico .ti{font-size:.85rem}
.di-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.di-type{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.di-name{font-weight:800;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-price{flex:0 0 auto}
.sum-totals .sum-line{border-bottom:2px dotted var(--line-strong);padding-bottom:8px;margin-bottom:8px}
.sum-totals .sum-line:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.slot.flash{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.slot-side.stale-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.slot-stale-row{display:flex;align-items:center;gap:8px}
/* compatibility */
.slot-compat{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px 84px}
.compat-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:900;padding:3px 9px;border-radius:999px;cursor:help;letter-spacing:.02em}
.compat-badge.ok{background:rgba(12,166,120,.13);color:var(--success);border:1px solid rgba(12,166,120,.35)}
.compat-badge.warn{background:rgba(245,159,0,.14);color:#b97a0c;border:1px solid rgba(245,159,0,.42)}
.compat-badge.err{background:rgba(224,49,49,.12);color:var(--danger);border:1px solid rgba(224,49,49,.42)}
.compat-badge.na{background:var(--bg-soft);color:var(--muted-2);border:1px solid var(--line)}
.compat-badge.loading{background:var(--bg-soft);color:var(--muted-2);border:1px solid var(--line)}
.compat-badge.loading i{font-size:.72rem}
.compat-badge.checked{background:rgba(150,230,180,.28);color:#b97a0c;border:1px solid rgba(60,180,110,.5)}
.compat-more{font-weight:900;letter-spacing:.1em}
@keyframes pillIn{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
.slot-compat .compat-badge{animation:pillIn .35s cubic-bezier(.2,.9,.3,1.2) both}
.slot-compat .compat-badge:nth-child(2){animation-delay:.06s}
.slot-compat .compat-badge:nth-child(3){animation-delay:.12s}
.slot-compat .compat-badge:nth-child(4){animation-delay:.18s}
.slot-compat .compat-badge:nth-child(5){animation-delay:.24s}
.slot-compat .compat-badge:nth-child(n+6){animation-delay:.3s}
@keyframes pulseWarn{0%,100%{box-shadow:0 0 0 0 rgba(245,159,0,0)}50%{box-shadow:0 0 0 5px rgba(245,159,0,.16)}}
@keyframes pulseErr{0%,100%{box-shadow:0 0 0 0 rgba(224,49,49,0)}50%{box-shadow:0 0 0 5px rgba(224,49,49,.16)}}
.slot-compat .compat-badge.warn{animation:pillIn .35s cubic-bezier(.2,.9,.3,1.2) both,pulseWarn 2.2s ease-in-out .5s infinite}
.slot-compat .compat-badge.err{animation:pillIn .35s cubic-bezier(.2,.9,.3,1.2) both,pulseErr 2.2s ease-in-out .5s infinite}
@media (prefers-reduced-motion:reduce){.slot-compat .compat-badge{animation:none}}
.compat-detail{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.cd-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.cd-row.err{background:#f6b8b8;border-color:#e59a9a}
.cd-row.err .cd-title,.cd-row.err .cd-tip{color:#8a2323}
.cd-row.warn{background:#ffe08a;border-color:#e6c25e}
.cd-row.warn .cd-title,.cd-row.warn .cd-tip{color:#5f4b00}
.cd-row.warn .verify-btn{background:#b7e4c7;border-color:#7fc89a;color:#1e7e46}
.cd-row.warn.is-verified{background:rgba(215,245,225,.55);border-color:rgba(60,180,110,.5)}
.cd-row.warn.is-verified .cd-title{color:#1e7e46}
.cd-row.warn.is-verified .cd-tip{color:var(--ink)}
.cd-row.warn.is-verified .verify-btn{background:none;border-color:rgba(60,180,110,.55);color:#1e7e46}
.cd-row.is-verified{border-color:rgba(60,180,110,.5);background:rgba(215,245,225,.4)}
.cd-title{font-weight:900;font-size:1.02rem;color:var(--danger)}
.cd-title.ok{color:var(--success)}
.cd-title.warn{color:inherit}
.cd-title.checked{color:#1e7e46}
.cd-tip{font-size:.85rem;font-weight:700;color:var(--ink-2)}
.cd-row .cd-tip{font-size:1.08rem;font-weight:900;color:var(--ink);line-height:1.45}
.cd-row.warn{border-color:#f5b301}
.cd-row.err{border-color:#e03131}
.cd-ico{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cd-ico svg{width:26px;height:26px}
.cd-ico i{font-size:1.3rem}
.cd-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin-top:2px}
.cd-side{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:.8rem;text-align:center}
.cd-side-lbl{font-weight:800;opacity:.75;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.cd-side-val{font-weight:900;font-size:.95rem}
.cd-vs-badge{align-self:center;font-weight:900;font-size:.72rem;opacity:.55;border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:var(--bg-soft)}
.cd-ab,.di-ab{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.75rem}
.di-a,.di-b{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.di-vs{opacity:.5;font-weight:900}
.ditem .di-ab{margin-top:4px}
.verify-btn{border-color:rgba(60,180,110,.55);color:#1e7e46;font-weight:800}
.dsec-checked .dsec-head{color:#1e7e46}
.dsec-err .dsec-head{background:rgba(224,49,49,.09);border:1px solid rgba(224,49,49,.35);border-radius:10px;padding:6px 10px;color:var(--danger)}
.dsec-warn .dsec-head{background:rgba(245,159,0,.10);border:1px solid rgba(245,159,0,.40);border-radius:10px;padding:6px 10px;color:#b97a0c}
.dsec-checked .dsec-head{background:rgba(150,230,180,.22);border:1px solid rgba(60,180,110,.45);border-radius:10px;padding:6px 10px}
.checked-item{opacity:.92}
.slot.has-warn{background:rgba(255,243,191,.5)}
.slot.has-err{background:rgba(255,229,229,.6)}
[data-theme="dark"] .slot.has-warn{background:rgba(255,212,59,.09)}
[data-theme="dark"] .slot.has-err{background:rgba(224,49,49,.12)}
.ditem.has-warn{background:rgba(255,243,191,.6)}
.ditem.has-err{background:rgba(255,229,229,.65)}
[data-theme="dark"] .ditem.has-warn{background:rgba(255,212,59,.10)}
[data-theme="dark"] .ditem.has-err{background:rgba(224,49,49,.14)}
/* Compat. pill in the summary tabs: count circles (like the description section) + blink */
#compatCount{display:inline-flex;align-items:center;gap:5px;margin-left:3px}
#compatCount .mini-count{border-radius:50%;min-width:20px;height:20px;padding:0 5px;justify-content:center;gap:2px;font-size:.66rem;position:relative;z-index:1;box-shadow:0 0 0 1.5px var(--surface)}
#compatCount .mini-count i{font-size:.6rem}
/* opaque so the pill's blink never bleeds through the bubbles (theme-aware) */
#compatCount .mini-count.err{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
#compatCount .mini-count.warn{background:color-mix(in srgb,var(--warning) 20%,var(--surface));color:#b97a0c}
#compatCount:empty{display:none}
@keyframes compatBlinkWarn{
  0%,100%{background:rgba(245,159,0,.14);color:#b97a0c;box-shadow:0 0 0 0 rgba(245,159,0,0)}
  50%{background:#f0b429;color:#fff;box-shadow:0 0 0 4px rgba(245,159,0,.30)}
}
@keyframes compatBlinkErr{
  0%,100%{background:rgba(224,49,49,.12);color:var(--danger);box-shadow:0 0 0 0 rgba(224,49,49,0)}
  50%{background:#ef5350;color:#fff;box-shadow:0 0 0 4px rgba(224,49,49,.30)}
}
#sumCompat.has-warn{background:rgba(245,159,0,.14);color:#b97a0c;animation:compatBlinkWarn 1.7s ease-in-out infinite}
#sumCompat.has-err{background:rgba(224,49,49,.12);color:var(--danger);animation:compatBlinkErr 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#sumCompat.has-warn,#sumCompat.has-err{animation:none}}
.di-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Idealo-like variants on slot cards */
.slot-variants{border-top:1px dashed var(--line);padding:0;background:transparent;margin-bottom:10px}
.slot-variants.open{background:rgba(128,128,128,.10)}
.variant-diff{font-size:.7rem;font-weight:800}
.slot-variants.loading{position:relative;overflow:hidden}
.slot-variants.loading::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(128,128,128,.20) 50%,transparent 75%);background-size:250% 100%;animation:sk 1.4s infinite;z-index:5}
.variant-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:none;padding:9px 12px;font-weight:800;font-size:.78rem;color:var(--muted);cursor:pointer}
.variant-toggle:hover{color:var(--brand-ink)}
.variant-toggle:disabled{opacity:.55;cursor:not-allowed}
.variant-cur{flex:0 1 auto;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.variant-count{font-size:.7rem;font-weight:900;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.variant-body{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.variant-dim{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.76rem}
.variant-dim-lbl{font-weight:900;color:var(--muted)}
.variant-vals{color:var(--muted);font-weight:700}
.vchip.sel{border-color:var(--brand);color:var(--brand-ink);background:rgba(26,135,68,.10)}
.vchip:disabled{opacity:.45;cursor:not-allowed}
.variant-loading{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--muted)}
.variant-models{display:flex;gap:8px;overflow-x:auto;padding-bottom:20px}
.variant-card{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 6px;cursor:pointer;color:var(--ink);font:inherit;position:relative;overflow:hidden}
.variant-card:hover{border-color:var(--brand)}
.variant-card.sel{border-color:var(--brand);border-width:2px;padding:7px 5px;box-shadow:var(--shadow-sm)}
.variant-card.pending{border-color:var(--brand);opacity:.85}
.variant-card.pending::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(128,128,128,.25) 50%,transparent 80%);background-size:200% 100%;animation:sk 1.2s infinite}
.variant-card.loading{opacity:.6;cursor:wait}
.variant-card.loading::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(128,128,128,.22) 50%,transparent 80%);background-size:200% 100%;animation:sk 1.2s infinite}
.variant-card:disabled{cursor:wait}
.variant-card img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--bg-soft)}
.variant-noimg{width:64px;height:64px;border-radius:8px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.variant-name{font-size:.68rem;font-weight:800;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2em}
.variant-price{font-size:.74rem;font-weight:900;color:var(--ink)}
.variant-price.best{color:var(--success)}
.variant-price.promo{color:#d97a06}
.variant-acts{display:flex;gap:4px;justify-content:center;margin-top:auto;padding-top:6px;width:100%}
.vact{padding:5px 8px;font-size:.7rem}
@media (prefers-reduced-motion:reduce){.variant-card,.variant-toggle{transition:none}}
/* stale: keep button default color, price text goes yellow */
.slot.stale{background:var(--surface)}
.slot.stale .slot-price,.slot.stale .slot-vendor,.slot.stale .slot-deliv{color:var(--warning)}
.slot-refetch{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--brand-ink);cursor:pointer;flex:0 0 auto}
.slot-refetch:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.slot-warn{color:var(--warning);font-size:1rem;flex:0 0 auto;margin-left:2px}
.fold-btn{display:none}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;align-items:start}
.panel{padding:18px}
.col-left,.col-right{min-width:0}
.col-right{position:sticky;top:calc(var(--nav-h) + 14px);max-height:calc(100vh - var(--nav-h) - 28px);max-height:calc(100dvh - var(--nav-h) - 28px);overflow-y:auto;scrollbar-width:thin;border-radius:var(--radius-lg)}
.sec-title{display:flex;align-items:center;gap:10px;margin:14px 0 10px 0}
#slotSections>div{margin-bottom:34px}
#slotSections>div:last-child{margin-bottom:0}
.sec-title h2{margin:0;font-size:1rem;letter-spacing:-.01em}
.sec-title .count{font-size:.72rem;font-weight:800;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);padding:4px 10px;border-radius:var(--radius-pill)}
.sec-title:first-child{margin-top:0}
.add-row-btn{width:100%;height:50px;margin-top:8px;border:1px dashed var(--line-strong);background:transparent;color:var(--muted);border-radius:14px;padding:9px;font-weight:800;cursor:pointer}
.add-row-btn:hover{color:var(--brand-ink);border-color:var(--brand)}
.add-row-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.add-row-btn:disabled:hover{color:var(--muted);border-color:var(--line-strong);transform:none}
#idealoMore.add-row-btn{width:50%;height:auto;min-height:0;margin-top:0;padding:7px 10px;border-radius:var(--radius-pill);border-style:dashed;font-size:.76rem;font-weight:800;line-height:normal;display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:center}
/* slot cards */
.slot{position:relative;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:12px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.slot-remove{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;z-index:1}
.slot-remove:hover{border-color:var(--danger);color:var(--danger)}
.slot:has(> .slot-remove) .slot-main{padding-right:56px}
.progress-pop{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);color:var(--ink);padding:12px 20px;border-radius:var(--radius-pill);font-weight:800;font-size:.85rem;z-index:2500;box-shadow:var(--shadow-md);max-width:calc(100vw - 32px)}
.progress-pop i{font-size:1rem}
.progress-pop.cancelable{padding-right:8px}
.progress-cancel{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:2px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;font:inherit;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease}
.progress-cancel:hover{color:var(--ink);border-color:var(--brand);transform:scale(1.05)}
.progress-cancel.confirm{background:color-mix(in srgb,var(--danger) 14%,var(--surface));border-color:var(--danger);color:var(--danger)}
.progress-cancel:disabled{opacity:.5;cursor:wait;transform:none}
.alt-item{position:relative;overflow:hidden}
.alt-item.refreshing{opacity:.72}
/* add-type popup */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.type-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-weight:800;font-size:.82rem;cursor:pointer;transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.type-btn:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.type-btn svg{width:28px;height:28px}
.type-btn .bi{font-size:1.6rem}
.type-btn .ti{font-size:1.6rem}
.type-btn i[class*="fa-"]{font-size:1.4rem}
.slot:hover{box-shadow:var(--shadow-md)}
.slot.sel{border-color:var(--brand);box-shadow:var(--shadow-md)}
.slot-main{display:flex;min-width:0;max-width:100%;gap:12px;padding:14px;cursor:pointer;align-items:center;text-align:left;width:100%;background:none;border:none;color:inherit;font:inherit;position:relative;overflow:hidden}
.slot-sweep{position:relative;overflow:hidden}
.slot-sweep.refreshing-sel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(128,128,128,.20) 50%,transparent 75%);background-size:250% 100%;animation:sk 1.4s infinite;z-index:5}
.slot-sweep.refreshing-sel .slot-main{opacity:.72}
.alt-toggle.refreshing-alt::after,.alt-item.refreshing::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 20%,rgba(128,128,128,.22) 50%,transparent 80%);background-size:200% 100%;animation:sk 1.2s infinite}
.alt-item{position:relative;overflow:hidden}
.alt-item.refreshing{opacity:.72}
.slot-main.empty .slot-specs,.slot-main.empty .slot-side{display:none}
.slot-visual{flex:0 0 58px;width:58px;height:58px;border-radius:14px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}
.slot-visual img{width:100%;height:100%;object-fit:cover}
.slot-visual i{font-size:1.4rem;color:var(--muted)}
.slot-visual svg{width:26px;height:26px;color:var(--muted)}
.slot-visual .bi{font-size:1.4rem;color:var(--muted)}
.slot-visual .ti{font-size:1.5rem;color:var(--muted)}
.slot-info{flex:1;min-width:0}
.slot-type{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.slot-name{font-weight:900;font-size:.98rem;margin:1px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slot-specs{font-size:.78rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:767px){
  .slot-specs{display:block;-webkit-line-clamp:unset;overflow:visible}
  .slot-side{max-width:46%;min-width:0}
  .slot-vendor{overflow-wrap:anywhere}
}
.slot-side{text-align:right;flex:0 0 auto}
.slot-vendor{font-size:.72rem;color:var(--muted);font-weight:700}
.slot-price{font-weight:900;font-size:1.05rem}
.slot-price .old{font-size:.78rem;color:var(--muted);text-decoration:line-through;font-weight:700;margin-right:6px}
.better-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#0ca678,#099268);color:#fff;font-weight:900;font-size:.78rem;padding:0 5px;cursor:help;vertical-align:2px}
.promo-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#f59f00,#e8890c);color:#fff;font-weight:900;font-size:.78rem;padding:0 5px;cursor:help;vertical-align:2px}
.slot-price.promo{color:#d97a06}
.slot-price.best{color:var(--success)}
.disc-badge{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--warning),#d9480f);padding:3px 8px;border-radius:var(--radius-pill);margin-left:6px}
.slot-deliv{font-size:.72rem;color:var(--muted)}
.slot-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 12px;position:relative;overflow:hidden}
.slot-actions .mini-btn{flex:1 1 0;justify-content:center;border-radius:14px;padding:10px 6px;white-space:nowrap}
.mini-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:var(--radius-pill);padding:7px 10px;font-size:.76rem;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .2s ease,color .2s ease,background .2s ease}
.mini-btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.mini-btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.mini-btn:disabled:hover{border-color:var(--line);color:var(--muted);transform:none;box-shadow:none}
.mini-btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.mini-btn i{font-size:.8rem}
.mini-lbl{display:none}
.slot-alt-tab{border-top:1px dashed var(--line);padding:0}
.alt-toggle{width:100%;background:var(--surface-2);border:none;color:var(--muted);font-weight:800;font-size:.78rem;padding:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.alt-toggle.refreshing-alt{opacity:.72}
.alt-toggle:hover{color:var(--brand-ink)}
.alt-list{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.alt-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.82rem;background:var(--surface);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.alt-item:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));background:var(--bg-soft)}
.alt-item.current{border:3px solid var(--brand);padding:6px 8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
.alt-item .diff{font-weight:900;white-space:nowrap}
.alt-item .grow{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alt-item .mini-btn{padding:10px 11px;font-size:.78rem}
.alt-ds-spin{color:var(--muted-2);font-size:.75rem;margin-left:4px}
.diff.up{color:var(--danger)}.diff.down{color:var(--success)}.diff.same{color:var(--muted)}
.delivery-tag{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:var(--info);padding:0 14px 10px 84px}
.hidden{display:none!important}
/* picker */
#pickerPanel{margin-bottom:18px;min-width:0;max-width:100%}
.picker-head{display:flex;align-items:center;gap:10px}
#pickerTitle{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-idealo-btn{flex:0 0 auto}
.mode-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:900;color:var(--brand-ink);background:rgba(26,135,68,.10);border:1px solid rgba(26,135,68,.2);padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.fa-layers-plus{position:relative;display:inline-block}
.fa-layers-plus .fa-plus{position:absolute;right:-7px;bottom:-5px;font-size:.55em;background:var(--active-bg);color:var(--active-fg);border-radius:50%;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center}
.picker-head h2{margin:0;font-size:1.1rem}
.picker-tools{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.picker-tools > .search-row:first-child{margin-top:15px}
.picker-tools-btn{display:none;order:3}
.picker-tools-btn.active{background:var(--active-bg);color:var(--active-fg);border-color:var(--active-bg)}
.picker-quickrow{display:flex;align-items:center;gap:8px;min-width:0}
.picker-quickrow .picker-quick{flex:1;min-width:0}
.picker-quickrow .picker-morewrap{flex:0 0 auto;margin-left:auto}
.picker-foot{position:sticky;bottom:0;z-index:6;display:flex;flex-direction:column;gap:8px;margin:10px -18px -18px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--line);border-radius:25px;box-shadow:0 -12px 30px rgba(11,20,16,.10)}
.picker-foot .hint{margin:0;font-size:.72rem;line-height:1.35}
.search-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:10px 14px}
.search-row input{border:none;background:none;outline:none;color:var(--ink);font:inherit;width:100%}
.mini-clear{flex:0 0 auto;order:2;border:none;background:var(--bg-soft);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;padding:0;cursor:pointer}
.mini-clear:hover{color:var(--ink);background:var(--line)}
.wcomp-ic img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.picker-links{display:flex;gap:8px;flex-wrap:wrap}
.hint{font-size:.8rem;color:var(--muted);margin:6px 0}
/* Save-gate: what changed since the last save */
.chglist{list-style:none;margin:10px 0;padding:8px 10px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.chglist li{display:flex;gap:9px;align-items:baseline;font-size:.86rem;font-weight:700;color:var(--ink-2)}
.chglist li i{flex:0 0 auto;width:15px;text-align:center;font-size:.82rem;transform:translateY(1px)}
.chglist li.c-add{color:var(--success)}.chglist li.c-add i{color:var(--success)}
.chglist li.c-del{color:var(--danger)}.chglist li.c-del i{color:var(--danger)}
.chglist li.c-chg{color:var(--warning)}.chglist li.c-chg i{color:var(--warning)}
.chglist li.c-meta{color:var(--muted)}.chglist li.c-meta i{color:var(--muted)}
.chglist li span{min-width:0}
.picker-list{display:flex;flex-direction:column;gap:10px;height:52vh;max-height:52vh;overflow-y:auto;overscroll-behavior:contain}
.picker-results{display:flex;flex-direction:column;gap:10px}
/* Desktop picker: the panel and tools stay fixed; only the Idealo result list scrolls. */
@media (min-width:961px){
  #pickerPanel:not(.hidden){display:flex;flex-direction:column;height:calc(100vh - var(--nav-h) - 28px);max-height:calc(100vh - var(--nav-h) - 28px);height:calc(100dvh - var(--nav-h) - 28px);max-height:calc(100dvh - var(--nav-h) - 28px);min-height:0;overflow:hidden;margin-bottom:0}
  #pickerPanel .picker-head{flex:0 0 auto}
  #pickerPanel .picker-tools{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  #pickerPanel .picker-tools.filters-open{overflow-y:auto}
  #pickerPanel .picker-list{flex:1 1 auto;min-height:0;height:auto;max-height:none;overflow:hidden}
  #pickerPanel #idealoResults{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:2px}
  #pickerPanel #idealoMore{flex:0 0 auto;width:calc(50% - 8.5px);margin:0 auto}
  #pickerPanel .picker-foot{flex:0 0 auto}
}
.picker-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.picker-circlebtn{width:30px;height:30px;padding:0!important;border-radius:50%;justify-content:center;flex:0 0 auto}
.pick-card{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--surface);align-items:center}
.pick-card.current{border-color:var(--brand)}
.pick-card img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--bg-soft)}
.pick-card .pi{flex:1;min-width:0}
.pick-card .pn{font-weight:900;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.direct-badge{color:var(--brand-ink);font-size:.8rem;cursor:help}
.pick-card .ps{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-card .pp{font-weight:900;white-space:nowrap}
.pick-card .pdiff{font-size:.75rem;font-weight:800}
/* selected result cards */
#idealoResults .pick-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"media head actions" "media desc actions";gap:7px 14px;align-items:center;min-height:106px;padding:12px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
#idealoResults .pick-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow-sm)}
#idealoResults .pick-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pick-media{grid-area:media;width:72px;height:72px;border-radius:12px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pick-media img{width:100%;height:100%;object-fit:contain;padding:4px}
.pick-head{grid-area:head;display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.pick-title{font-weight:900;font-size:.9rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;overflow-wrap:anywhere}
.pick-price{font-weight:900;white-space:normal;font-size:.92rem;flex:0 0 auto;max-width:48%;text-align:right;line-height:1.2;overflow-wrap:anywhere}
.pick-desc{grid-area:desc;font-size:.77rem;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.8em}
#idealoResults .pick-card .pick-actions{grid-area:actions;display:flex;flex-direction:column;gap:6px;align-self:center}
#idealoResults .pick-card .pick-actions .mini-btn{white-space:nowrap}
/* component detail replacing the results area */
.picker-detail{display:none;flex:1 1 auto;min-width:0;max-width:100%;min-height:0;overflow:hidden;padding:0}
#pickerPanel.picker-detail-open{display:flex;flex-direction:column;min-height:0}
#pickerPanel.picker-detail-open .picker-head,#pickerPanel.picker-detail-open .picker-tools,#pickerPanel.picker-detail-open .picker-foot{display:none!important}
#pickerPanel.picker-detail-open .picker-detail{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:10px}
.pd-head{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--muted);flex:0 0 auto;padding:0 0 2px}
.pd-head .pd-fav{margin-left:auto;width:34px;height:34px;padding:0;justify-content:center}
.pd-head .pd-edit{width:34px;height:34px;padding:0;justify-content:center}
.pd-fav.active{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 9%,var(--surface))}
.pd-body{flex:1 1 auto;min-width:0;max-width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px;padding:2px 0 0;scrollbar-gutter:stable}
.pd-hero{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;align-items:start;flex:0 0 auto;min-height:170px;min-width:0;max-width:100%}
.pd-media{position:relative;min-height:170px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;color:inherit;font:inherit;cursor:zoom-in}
.pd-media img{width:100%;height:auto;max-height:230px;object-fit:contain;padding:10px;transition:transform .22s ease}
.pd-media:hover img{transform:scale(1.025)}
.pd-media i{font-size:1.4rem;color:var(--muted)}
.pd-media-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:170px}
.pd-media-fallback[hidden]{display:none}
.pd-media.has-gallery{border-color:color-mix(in srgb,var(--brand) 24%,var(--line))}
.pd-media-count{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--glass-bg);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);color:var(--ink);font-size:.66rem;font-weight:900;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-sm)}
.pd-media-loading{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(2px);font-size:1.25rem;color:var(--brand-ink)}
.pd-info{min-width:0;max-width:100%;display:flex;flex-direction:column;gap:8px}
.pd-name{margin:0;font-size:1.15rem;line-height:1.25;overflow-wrap:anywhere;min-width:0}
.pd-price-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pd-price{font-size:1.35rem;font-weight:900;color:var(--ink);line-height:1.1}
.pd-store{width:34px;height:31px;padding:0;justify-content:center;position:relative;flex:0 0 auto}
.pd-store-ext{font-size:.55rem!important;position:absolute;right:5px;top:4px;opacity:.8}
.pd-store:not(:disabled):hover{border-color:var(--brand);color:var(--brand-ink)}
.pd-buyrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;min-height:26px}
.pd-offers-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--brand-ink);border-radius:var(--radius-pill);padding:5px 9px;font-size:.75rem;font-weight:900;cursor:pointer;font-family:inherit;line-height:1.2;text-align:left;max-width:100%}
.pd-offers-link>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.pd-offers-toggle{padding-left:7px;border-left:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pd-offers-link:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.pd-offers-link:disabled{opacity:.6;cursor:wait}
.pd-meta{font-size:.74rem;color:var(--muted);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pd-jumps{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.pd-jumps .mini-btn{font-size:.7rem;padding:5px 9px}
.pd-inline-loading{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:700}
.pd-sec{display:flex;flex-direction:column;gap:9px;min-width:0;max-width:100%}
.pd-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.76rem;font-weight:900;letter-spacing:.01em;color:var(--muted);text-transform:uppercase}
.pd-sec-head>span:first-child{display:inline-flex;align-items:center;gap:7px;min-width:0}
.pd-sec-head i{color:var(--brand-ink)}
.pd-from{font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);font-size:.72rem;white-space:nowrap}
.pd-quick p{margin:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink-2);font-size:.84rem;line-height:1.55;overflow-wrap:anywhere}
/* variants inside the detail card */
.pd-variants{padding-top:2px}
.pd-vfilters{display:flex;flex-direction:column;gap:6px;min-width:0}
.pd-vdim{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.pd-vdim::-webkit-scrollbar{display:none}
.pd-vdim>span{flex:0 0 auto;font-size:.72rem;font-weight:900;color:var(--muted);min-width:54px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-vdim .vchip{flex:0 0 auto;padding:5px 9px;font-size:.7rem}
.pd-vlist{display:flex;gap:8px;min-width:0;max-width:100%;overflow-x:auto;padding:2px 1px 10px;scrollbar-width:thin;overscroll-behavior-x:contain}
.pd-vcard{flex:0 0 136px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:8px 7px;font:inherit;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.pd-vcard:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.pd-vcard.sel{border-color:var(--brand);border-width:2px;padding:7px 6px;background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.pd-vcard img,.pd-vnoimg{width:56px;height:56px;border-radius:9px;background:var(--bg-soft);object-fit:contain;padding:3px}
.pd-vnoimg{display:grid;place-items:center;color:var(--muted)}
.pd-vname{font-size:.68rem;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;overflow-wrap:anywhere}
.pd-vprice{font-size:.74rem;font-weight:900;color:var(--ink)}
/* merchant offers */
.pd-offers{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;min-width:0;max-width:100%}
.pd-offer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.78rem;min-width:0;max-width:100%}
.pd-offer:last-child{border-bottom:none}
.pd-offer:hover{background:var(--bg-soft)}
.pd-offer.is-best{background:color-mix(in srgb,var(--success) 7%,var(--surface))}
.pd-offer.is-best:hover{background:color-mix(in srgb,var(--success) 12%,var(--surface))}
.pd-offer-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.pd-offer-main strong{display:flex;align-items:center;gap:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-offer-main small{font-size:.67rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-offer-rating{color:var(--warning);font-size:.66rem;font-weight:800;white-space:nowrap}
.pd-offer .better-badge,.pd-offer .promo-badge{width:17px;height:17px;font-size:.58rem;flex:0 0 17px}
.pd-offer-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-weight:900;white-space:nowrap;text-align:right}
.pd-offer-price small{font-size:.63rem;font-weight:700;color:var(--muted)}
.pd-offer>i{font-size:.66rem;color:var(--muted)}
.pd-promo{font-size:.62rem;font-weight:900;color:var(--brand-ink);background:rgba(26,135,68,.11);border:1px solid rgba(26,135,68,.22);padding:2px 6px;border-radius:999px}
.pd-offers-close{font-size:.68rem;padding:4px 8px}
.pd-offers-error{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px}
.pd-offers-error .hint{margin:0;color:var(--danger)}
/* datasheet teaser / loader / table */
.pd-ds-locked{position:relative}
.pd-ds-teaser{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);min-height:150px;overflow:hidden}
.pd-ds-fake{padding:11px 12px 48px;opacity:.58;filter:blur(1.2px);user-select:none;pointer-events:none;-webkit-mask-image:linear-gradient(#000 30%,rgba(0,0,0,.45) 72%,transparent);mask-image:linear-gradient(#000 30%,rgba(0,0,0,.45) 72%,transparent)}
.pd-fake-row{display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.76rem}
.pd-fake-row span:first-child{font-weight:800;color:var(--muted)}
.pd-fake-row span:last-child{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-ds-loadbtn{position:absolute;left:0;right:0;bottom:11px;margin:0 auto;width:max-content;transform:none;z-index:2;white-space:nowrap;padding:9px 14px;font-size:.8rem;max-width:calc(100% - 20px)}
.pd-ds-hint{text-align:center;margin:0;font-size:.72rem}
.pd-ds-state{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;color:var(--muted);font-size:.8rem;font-weight:700;text-align:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px}
.pd-ds-state.is-error{color:var(--danger);justify-content:flex-start;text-align:left}
.pd-ds-skeleton{display:flex;flex-direction:column;gap:7px;padding:4px 2px}
.pd-ds-skeleton span{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--line) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
.pd-ds-skeleton span:nth-child(2n){width:82%}
.pd-ds-scroll{max-width:100%;max-height:none;overflow:visible;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pd-ds-group+.pd-ds-group{border-top:1px solid var(--line)}
.pd-ds-group-title{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--bg-soft) 92%,var(--surface));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 11px;font-size:.72rem;font-weight:900;color:var(--brand-ink);border-bottom:1px solid var(--line)}
.pd-ds-table{width:100%;border-collapse:collapse;font-size:.76rem;table-layout:fixed}
.pd-ds-table tr{border-bottom:1px solid var(--line)}
.pd-ds-table tr:last-child{border-bottom:none}
.pd-ds-table th,.pd-ds-table td{padding:6px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere;line-height:1.35}
.pd-ds-table th{width:45%;font-weight:800;color:var(--muted)}
.pd-ds-table td{color:var(--ink-2)}
.pd-actions{position:sticky;bottom:0;z-index:5;margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding:11px 0 2px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--surface) 94%,transparent) 22%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pd-actions .btn{flex:1 1 150px;justify-content:center;min-width:0;padding-inline:10px;white-space:nowrap}
/* photo gallery */
body.gallery-open,body.qr-open{overflow:hidden}
.gallery-overlay{z-index:2300}
.gallery-box{width:min(1100px,96vw);max-height:96dvh;display:flex;flex-direction:column;gap:10px;padding:12px;overflow:hidden}
.gallery-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
#galleryCount{font-size:.78rem;font-weight:900;color:var(--muted)}
.gallery-stage{position:relative;flex:1 1 auto;min-height:min(58dvh,620px);display:flex;align-items:center;justify-content:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:12px 52px;overflow:hidden}
.gallery-img-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:zoom-in}
.gallery-stage img{width:100%;height:100%;max-width:100%;max-height:82dvh;object-fit:contain}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
.gallery-nav:hover{border-color:var(--brand);color:var(--brand-ink)}
.gallery-nav.prev{left:9px}.gallery-nav.next{right:9px}
.gallery-thumbs{display:flex;gap:7px;overflow-x:auto;flex:0 0 auto;padding:1px 1px 4px;scrollbar-width:thin}
.gallery-thumb{flex:0 0 58px;height:48px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);padding:2px;cursor:pointer;overflow:hidden}
.gallery-thumb img{width:100%;height:100%;object-fit:contain}
.gallery-thumb.active{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
@media(max-width:560px){.pd-hero{grid-template-columns:1fr}.pd-media{min-height:150px}.pd-media img{max-height:190px}.pd-ds-loadbtn{font-size:.74rem;padding:8px 10px}.gallery-stage{padding:8px 40px}.gallery-stage img{max-height:62dvh}.gallery-nav{width:34px;height:34px}.gallery-box{padding:9px;gap:8px}.gallery-thumb{flex-basis:50px;height:42px}}
/* right-menu fiche editor */
#editorPanel{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - var(--nav-h) - 28px)}
.editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.editor-titlewrap{display:flex;align-items:center;gap:9px;min-width:0}
.editor-titlewrap>i{color:var(--muted)}
.editor-head h2{margin:0;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 16px;overscroll-behavior:contain}
/* v2.4 — native Idealo results */
.tools-row{display:flex;gap:8px;align-items:center}
.tools-row .grow{flex:1}
.search-row.mini{padding:8px 12px}
.search-row .mini-btn{flex:0 0 auto}
.sort-sel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:9px 12px;color:var(--ink);font:inherit;font-size:.8rem;font-weight:800;flex:0 0 auto}
.skel{height:74px;border-radius:14px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--line) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.idealo-under{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.idealo-under .search-row{flex:1;min-width:200px}
/* picker filters (quick pills + more filters) */
.picker-quick{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.picker-quick::-webkit-scrollbar{display:none}
.picker-quick>*{flex:0 0 auto}
.qf-pill{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:var(--radius-pill);padding:6px 12px;font-size:.76rem;font-weight:800;cursor:pointer;white-space:nowrap}
.qf-pill:hover{border-color:var(--brand);color:var(--brand-ink)}
.qf-pill.active{background:var(--brand);border-color:var(--brand);color:#fff}
.picker-morewrap{display:flex;gap:8px;align-items:center}
.picker-morebtn{width:auto}
.picker-morebtn.active{background:var(--active-bg);color:var(--active-fg);border-color:var(--active-bg)}
.picker-clearbtn{margin-left:auto}
.filter-badge{background:var(--brand);color:#fff;border-radius:999px;font-size:.68rem;font-weight:900;padding:1px 7px;margin-left:2px}
.picker-morebtn.active .filter-badge{background:var(--active-fg);color:var(--active-bg)}
/* ---------- Favorites + KJ statuses ---------- */
.kj-pills{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.kj-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:999px;padding:2px 7px;font-size:.66rem;font-weight:900;line-height:1.25;white-space:nowrap;background:var(--bg-soft);color:var(--ink-2)}
.slot-ai-pill{background:color-mix(in srgb,var(--muted) 10%,var(--surface));border-color:color-mix(in srgb,var(--muted) 24%,var(--line));color:var(--muted)}
.slot-ai-pill i{font-size:.62rem}
.kj-pill i{font-size:.62rem}
.kj-pill.kj-fav{color:var(--kj-fav);background:color-mix(in srgb,var(--kj-fav) 11%,var(--surface));border-color:color-mix(in srgb,var(--kj-fav) 28%,var(--line))}
.kj-pill.kj-top{color:var(--kj-top);background:color-mix(in srgb,var(--kj-top) 12%,var(--surface));border-color:color-mix(in srgb,var(--kj-top) 32%,var(--line))}
.kj-pill.kj-recommended{color:var(--kj-rec);background:color-mix(in srgb,var(--kj-rec) 10%,var(--surface));border-color:color-mix(in srgb,var(--kj-rec) 28%,var(--line))}
.kj-pill.kj-tested{color:var(--kj-tested);background:color-mix(in srgb,var(--kj-tested) 10%,var(--surface));border-color:color-mix(in srgb,var(--kj-tested) 28%,var(--line))}
.kj-pill.kj-avoid{color:var(--kj-avoid);background:color-mix(in srgb,var(--kj-avoid) 9%,var(--surface));border-color:color-mix(in srgb,var(--kj-avoid) 26%,var(--line))}
.kj-tint-fav{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-fav) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-fav) 23%,var(--line))}
.kj-tint-top{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-top) 14%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-top) 40%,var(--line))}
.kj-tint-rec{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-rec) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-rec) 26%,var(--line))}
.kj-tint-tested{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-tested) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-tested) 26%,var(--line))}
.kj-tint-avoid{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-avoid) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-avoid) 26%,var(--line))}
#pickerPanel.kj-tint-fav{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-fav) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-fav) 23%,var(--line))}
#pickerPanel.kj-tint-top{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-top) 14%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-top) 40%,var(--line))}
#pickerPanel.kj-tint-rec{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-rec) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-rec) 26%,var(--line))}
#pickerPanel.kj-tint-tested{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-tested) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-tested) 26%,var(--line))}
#pickerPanel.kj-tint-avoid{background:linear-gradient(135deg,color-mix(in srgb,var(--kj-avoid) 8%,var(--surface)),var(--surface) 66%);border-color:color-mix(in srgb,var(--kj-avoid) 26%,var(--line))}
.kj-heart{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--muted);cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
.kj-heart:hover{border-color:var(--kj-fav);color:var(--kj-fav);transform:translateY(-1px)}
.kj-heart.on{color:var(--kj-fav);border-color:color-mix(in srgb,var(--kj-fav) 42%,var(--line));background:color-mix(in srgb,var(--kj-fav) 10%,var(--surface))}
.slot-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px 9px 84px}
.slot-badges .kj-pills{flex:1;min-width:0}
.slot-fav{width:28px;height:28px;margin-left:auto}
.qf-fav{display:inline-flex;align-items:center;gap:6px}
.qf-fav i{color:var(--kj-fav)}
.qf-fav.active{background:var(--kj-fav);border-color:var(--kj-fav);color:#fff}
.qf-fav.active i{color:#fff}
.qf-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--kj-fav) 13%,var(--surface));color:var(--kj-fav);font-size:.65rem;font-weight:900}
.qf-fav.active .qf-count{background:rgba(255,255,255,.22);color:#fff}
.f-kj{border-color:color-mix(in srgb,var(--kj-top) 28%,var(--line))}
.kj-f-opt i{font-size:.76rem}
.kj-f-opt.kj-top i{color:var(--kj-top)}
.kj-f-opt.kj-recommended i{color:var(--kj-rec)}
.kj-f-opt.kj-tested i{color:var(--kj-tested)}
.kj-f-opt.kj-avoid i{color:var(--kj-avoid)}
.pick-fav{width:28px;height:28px;align-self:center}
.pick-badges{grid-area:badges;display:flex;align-items:center;min-width:0}
#idealoResults .pick-card.has-badges{grid-template-areas:"media head actions" "media badges actions" "media desc actions"}
.pd-hero.has-kj{position:relative;padding:10px;border:0;border-radius:16px;overflow:visible;flex:0 0 auto}
.pd-kj-pills{margin-top:-2px}
.pd-kj-note{display:flex;align-items:flex-start;gap:8px;border:1px solid color-mix(in srgb,var(--kj-top) 24%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--kj-top) 7%,var(--surface));padding:9px 11px;font-size:.8rem;line-height:1.45;color:var(--ink-2)}
.pd-kj-note i{color:var(--kj-top);margin-top:2px}
.kj-stars{position:absolute;top:10px;right:12px;z-index:2;display:inline-flex;gap:3px;color:var(--kj-top);font-size:.7rem;pointer-events:none;filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--kj-top) 35%,transparent))}
.kj-stars i{transform-origin:center}
.kj-anim .kj-stars i{animation:kjTwinkle 1s ease-in-out 2}
.kj-anim .kj-stars i:nth-child(2){animation-delay:.13s}
.kj-anim .kj-stars i:nth-child(3){animation-delay:.26s}
.kj-anim::after,.slot.kj-open::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.46) 46%,transparent 72%);background-size:220% 100%;animation:kjShine 1.1s ease-out 1}
@keyframes kjShine{from{background-position:180% 0;opacity:0}18%{opacity:.9}to{background-position:-80% 0;opacity:0}}
@keyframes kjTwinkle{0%,100%{opacity:.45;transform:scale(.86)}50%{opacity:1;transform:scale(1.1)}}
@media(max-width:960px){
  #idealoResults .pick-card.has-badges{grid-template-areas:"media head" "media badges" "media desc"}
  .pick-fav{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .kj-anim::after,.slot.kj-open::after,.kj-anim .kj-stars i{animation:none!important}
}
/* hide the component result buttons while the filter panel is open */
.picker-tools.filters-open #idealoList,
.picker-tools.filters-open #idealoMore,
.picker-tools.filters-open #idealoStatus,
.picker-tools.filters-open #idealoRetryWrap{display:none!important}
.picker-filters{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);padding:12px;max-height:60vh;overflow:auto}
#pickerFilters:not(.hidden),.alt-list:not(.hidden),.variant-body{animation:dropIn .22s ease both}
@media (min-width:961px){#pickerPanel:not(.hidden){animation:dropIn .24s ease both}}
.f-hint{margin:0 0 2px}
.f-grp{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 11px}
.f-grp.f-always{border-color:rgba(26,135,68,.35)}
.f-head{display:flex;align-items:center;gap:6px}
.f-name{font-weight:900;font-size:.82rem;color:var(--ink)}
.f-info{border:none;background:transparent;color:var(--muted);cursor:help;padding:0;font-size:.8rem;line-height:1}
.f-info:hover{color:var(--brand-ink)}
.f-opts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px}
.f-opts.f-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px 12px;max-height:220px;overflow:auto}
.f-opt{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-2);cursor:pointer;max-width:100%}
.f-opt input{accent-color:var(--brand)}
.f-opt em{font-style:normal;color:var(--muted);font-size:.7rem}
.f-searchrow{display:flex;align-items:center;gap:6px;margin-top:7px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:4px 8px}
.f-searchrow i{color:var(--muted);font-size:.75rem}
.f-searchrow input{flex:1;border:none;background:transparent;color:var(--ink);font-size:.78rem;outline:none}
.f-range{margin-top:8px}
.f-rlbl{display:block;font-size:.76rem;font-weight:800;color:var(--ink-2);white-space:nowrap;margin-top:6px}
/* dual-thumb single-track slider */
.dslider{position:relative;height:26px}
.dslider .dtrack{position:absolute;top:11px;left:0;right:0;height:4px;border-radius:3px;background:var(--line-strong)}
.dslider input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:26px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.dslider input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent;border:none}
.dslider input[type=range]::-moz-range-track{height:4px;background:transparent;border:none}
.dslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;margin-top:-6px}
.dslider input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer}
.dslider input.f-rlo{z-index:5}
.dslider input.f-rhi{z-index:4}
.picker-tip{position:fixed;z-index:9999;max-width:300px;background:var(--active-bg);color:var(--active-fg);border-radius:10px;padding:9px 11px;font-size:.76rem;line-height:1.35;box-shadow:var(--shadow-md)}
.picker-tip a{color:var(--active-link);font-weight:800}
html[data-glass="off"] .picker-tip{background:var(--active-bg)!important;color:var(--active-fg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:.9rem;padding:12px 18px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,transparent),color-mix(in srgb,var(--brand-2) 12%,transparent));color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 25%,transparent),color-mix(in srgb,var(--brand-2) 18%,transparent));border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.65),var(--shadow-md)}
.btn-primary:disabled{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border-color:var(--line);color:var(--muted)}
.btn-sm{padding:9px 14px;font-size:.82rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
/* summary */
#summaryPanel{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-h) - 28px);max-height:calc(100dvh - var(--nav-h) - 28px);min-height:0;overflow:hidden}
.sum-sticky{flex:0 0 auto}
.summary-body{flex:1 1 auto;min-height:0;margin-top:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
.sum-totals-dock{flex:0 0 auto;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sum-totals-dock>.hidden{display:none}
.sum-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
.sum-line .n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.sum-totals{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.sum-totals{font-size:1rem}
.sum-totals .big{font-size:1.45rem;font-weight:900}
#sumPowerPane .sum-totals .sum-line>span:first-child{font-size:1rem;font-weight:800}
#sumDescPane .sum-totals .sum-line>span:first-child,#sumTotalsDesc .sum-totals .sum-line>span:first-child{font-size:1.45rem;font-weight:900}
#sumTotalsPower .sum-totals .sum-line>span:first-child{font-size:1rem;font-weight:800}
.tot-right{display:inline-flex;align-items:baseline;gap:8px}
.diff-mini{font-size:.85rem;font-weight:800;cursor:help;white-space:nowrap}
.diff-mini.ok{color:var(--success)}
.diff-mini.ko{color:var(--danger)}
.badge-ok{color:var(--success);font-weight:900;font-size:1.1rem}.badge-ko{color:var(--danger);font-weight:900;font-size:1.1rem}
.budget-line{cursor:help}
.sum-totals .sum-line{border-bottom:2px dotted var(--line-strong);padding-bottom:8px;margin-bottom:8px}
.sum-totals .sum-line:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
/* usage & tarification editor */
.usage-edit-btn{margin-top:12px;width:100%;justify-content:center}
.usage-tabs{display:flex;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;width:max-content;margin:0 auto 12px}
.usage-tab{border:none;background:transparent;padding:8px 16px;border-radius:var(--radius-pill);font-weight:800;color:var(--muted);cursor:pointer;font-size:.85rem;transition:background .2s ease,color .2s ease,transform .18s ease}
.usage-tab.active{background:var(--active-bg);color:var(--active-fg)}
/* share / export popup */
.se-format-tabs{margin-top:-4px}
.se-format-tabs .usage-tab{padding:6px 15px;font-size:.76rem}
.se-picker{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);border-radius:16px;padding:12px 13px;margin:0 0 14px;box-shadow:var(--shadow-sm)}
.se-picker.locked{border-color:color-mix(in srgb,var(--brand) 24%,var(--line));background:color-mix(in srgb,var(--brand) 4%,var(--glass-bg))}
.se-picker-head{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.se-picker-head h4{margin:0;font-size:.84rem}
.se-picker-head h4 i{color:var(--brand-ink)}
.se-picker-state{font-size:.64rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 8px;background:var(--surface)}
.se-picker>.hint{margin:4px 0 9px;font-size:.73rem;line-height:1.4}
.se-presets{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.se-preset{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 9px;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.se-preset:hover{border-color:var(--brand);color:var(--brand-ink)}
.se-preset.active{background:var(--active-bg);color:var(--active-fg);border-color:transparent}
.se-pick-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.se-pick-row{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid transparent;border-radius:11px;padding:6px 7px;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.se-pick-row:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.se-pick-row.on{background:color-mix(in srgb,var(--brand) 5%,var(--surface));border-color:color-mix(in srgb,var(--brand) 18%,var(--line))}
.se-pick-row.locked{cursor:default}
/* Share view: every option except the always-on configuration is unusable. */
.se-picker.locked .se-pick-row:not(.on){opacity:.42;filter:grayscale(1);cursor:not-allowed}
.se-picker.locked .se-pick-row:not(.on):hover{background:transparent;border-color:transparent}
/* Options unavailable in the active export format (e.g. saved versions in PDF). */
.se-pick-row.unavailable{opacity:.42;filter:grayscale(1);cursor:not-allowed}
.se-pick-row.unavailable:hover{background:transparent;border-color:transparent}
.se-pick-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:16px;height:16px;margin:0;flex:0 0 auto;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface);cursor:pointer;transition:background .18s ease,border-color .18s ease,opacity .18s ease}
.se-pick-row input[type="checkbox"]:checked{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.se-pick-row input[type="checkbox"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.se-pick-row input[type="checkbox"]:disabled{opacity:.55;cursor:not-allowed}
.se-pick-row input[type="checkbox"]:disabled:checked{opacity:1}
.se-pick-ico{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--bg-soft);color:var(--brand-ink);font-size:.68rem}
.se-pick-txt{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}
.se-pick-txt strong{font-size:.75rem;line-height:1.2}
.se-pick-txt small{font-size:.64rem;line-height:1.25;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-pick-tag{flex:0 0 auto;font-size:.56rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);border-radius:999px;padding:2px 5px}
.se-pick-note{margin:8px 0 0!important;font-size:.68rem!important}
.se-pick-note i{color:var(--info);margin-right:3px}
.se-share-note{margin-top:-4px!important;font-size:.72rem!important;color:var(--muted)}
.se-share-note i{color:var(--info);margin-right:3px}
html[data-glass="off"] .se-picker{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.qr-img{display:flex;justify-content:center;margin:0 auto 12px;max-width:240px;cursor:zoom-in;border-radius:10px;outline-offset:3px}
.qr-img:focus-visible{outline:2px solid var(--brand)}
.qr-img svg{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);padding:6px;background:#fff}
/* Desktop share sheet: keep everything above the fold and shrink the QR to the leftover height. */
@media (min-width:961px){
  #modalBody.share-mode{overflow-y:hidden;display:flex;flex-direction:column}
  #modalBody.share-mode .usage-pane[data-pane="share"]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #modalBody.share-mode .qr-img{flex:1 1 0;min-height:0;width:auto;max-height:240px;aspect-ratio:1;align-self:center;margin:0 auto 10px}
  #modalBody.share-mode .qr-img svg{width:100%;height:100%}
}
@media (min-width:961px) and (max-height:850px){
  .modal.modal-wide.share-mode{height:96dvh;max-height:96dvh}
}
.qr-overlay{z-index:2400}
.qr-viewer{width:min(900px,94vw);max-height:94dvh;display:flex;flex-direction:column;gap:10px;padding:12px}
.qr-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
.qr-viewer-top>span{font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qr-viewer-stage{flex:1 1 auto;min-height:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(10px,2.5vw,24px);overflow:hidden}
.qr-viewer-stage svg{width:100%;height:100%;max-width:100%;max-height:100%}
@media(max-width:560px){.qr-viewer{padding:9px;gap:8px}.qr-viewer-stage{border-radius:12px;padding:10px}}
.wk{display:grid;grid-template-columns:42px repeat(7,1fr);grid-auto-rows:1fr;gap:3px;margin-top:6px;width:100%;flex:1;min-height:0}
.wk-corner{visibility:hidden}
.wk-dayh{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.wk-hour{display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:.68rem;font-weight:800;color:var(--muted)}
.day-sq{border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;height:100%;min-height:18px;width:100%;cursor:pointer;padding:0;touch-action:none;transition:.12s}
.day-sq:hover{border-color:var(--brand)}
.day-sq.on{background:var(--brand);border-color:var(--brand);color:#fff}
.day-sq.hp{background:#ffd9a3;border-color:#f0a94a;color:#7a4b00}
.day-sq.hc{background:var(--brand);border-color:var(--brand);color:#fff}
[data-theme="dark"] .day-sq.hp{background:#5a3f12;border-color:#b7791f;color:#ffd9a3}
.charts-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.chart-card{flex:0 0 220px;border:none;border-radius:14px;padding:12px;background:var(--surface);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;position:sticky;top:8px;z-index:5}
.chart-card h3{margin:0 0 6px 0;font-size:.85rem;flex:0 0 100%;text-align:center}
.chart-card svg{flex:0 0 auto}
#sumChartsPane,#sumPowerPane{display:flex;flex-direction:column;gap:14px;overflow:visible;max-height:none;padding-bottom:4px}
#sumChartsPane .chart-card,#sumPowerPane .chart-card{flex:none;width:100%}
#sumChartsPane .dsec.collapsed .chart-card,#sumChartsPane .dsec.collapsed .chart-list,
#sumPowerPane .dsec.collapsed .chart-card,#sumPowerPane .dsec.collapsed .chart-list{display:none}
#sumChartsPane .chart-list,#sumPowerPane .chart-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
#sumChartsPane .chart-row .dot,#sumPowerPane .chart-row .dot{flex:0 0 auto}
.chart-row.hl{background:rgba(26,135,68,.10);border-color:var(--brand)}
.seg{display:flex;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;width:max-content;margin:10px 0}
.seg button{border:none;background:transparent;padding:8px 14px;border-radius:var(--radius-pill);font-weight:800;color:var(--muted);cursor:pointer;font-size:.82rem}
.seg button.active{background:var(--active-bg);color:var(--active-fg)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:.78rem}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .leg{cursor:pointer;user-select:none}
.legend .leg.off{opacity:.45;text-decoration:line-through}
.legend.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.leg-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.leg-tools button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 10px;font-size:.74rem;font-weight:700;cursor:pointer}
.leg-tools button:hover{border-color:var(--accent)}
.leg-tools button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.leg-col{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px}
.leg-col h4{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.leg-col .leg-empty{color:var(--muted);font-style:italic;font-size:.74rem}
@media(max-width:560px){.legend.groups{grid-template-columns:1fr}}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
/* price history */
.price-wrap{position:relative;margin-top:6px}
#priceChart{width:100%;height:auto;display:block;cursor:crosshair;touch-action:pan-y}
.chart-tip{position:absolute;top:8px;transform:translateX(-50%);pointer-events:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-md);padding:8px 10px;font-size:.74rem;min-width:120px;z-index:5}
.chart-tip .ptip-date{font-weight:800;color:var(--muted);margin-bottom:4px;white-space:nowrap}
.chart-tip .ptip-row{display:flex;align-items:center;gap:6px;white-space:nowrap}
.chart-tip .ptip-row span{flex:1}
.chart-tip .ptip-row strong{margin-left:6px}
/* modal */
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page-enter{animation:pageIn .3s cubic-bezier(.2,.8,.2,1) both}
.overlay{position:fixed;inset:0;background:rgba(5,10,8,.52);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.overlay:not(.hidden){animation:overlayIn .22s ease both}
.overlay:not(.hidden) .modal{animation:modalIn .28s cubic-bezier(.2,.8,.2,1) both}
.modal{width:min(640px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
@media (min-width:961px){.modal.modal-xl{width:60vw;height:75vh;max-height:75vh}}
.modal.modal-wide{width:min(900px,96vw)}
@media (min-width:961px){.modal.modal-wide{width:min(900px,82vw);height:90vh;max-height:90vh}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.modal-head h2{margin:0;font-size:1.05rem}
.modal-body{padding:18px;overflow:auto;flex:1;min-height:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:9px 11px;color:var(--ink);font:inherit;font-size:.88rem;width:100%}
.fld textarea.ds-editor{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;line-height:1.45;min-height:150px;resize:vertical}
#f_dsHint.is-warn{color:var(--warning)}
.ds-preview{margin-top:7px;border:1px solid var(--line);border-radius:12px;max-height:220px;overflow:auto;background:var(--surface)}
.ds-preview:empty{display:none}
.ds-preview table{width:100%;border-collapse:collapse;font-size:.74rem}
.ds-preview th,.ds-preview td{padding:5px 8px;border-top:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.3}
.ds-preview tr:first-child th,.ds-preview tr:first-child td{border-top:0}
.ds-preview th{width:42%;color:var(--muted);font-weight:800;background:var(--bg-soft)}
.ds-preview td{overflow-wrap:anywhere}
.ds-preview .ds-more{padding:6px 8px;border-top:1px solid var(--line);color:var(--muted);font-size:.7rem;font-weight:700}
.list-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--surface)}
.list-row .grow{flex:1;min-width:0}
.merchant-row{cursor:pointer}
.merchant-row:hover{border-color:var(--brand)}
code.k{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:.8rem;word-break:break-all}
/* toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:var(--radius-pill);font-weight:800;font-size:.85rem;z-index:3000;box-shadow:var(--shadow-md)}
/* Perplexity AI bubble (bottom-right, no overlay blur) */
#aiBubble{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--brand-ink);cursor:pointer;z-index:1500;border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,var(--brand-2) 14%,transparent));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 18px color-mix(in srgb,var(--brand) 16%,transparent),var(--shadow-md);transition:transform .2s}
#aiBubble:hover{transform:scale(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 22px color-mix(in srgb,var(--brand) 26%,transparent),var(--shadow-lg)}
#aiPopup{position:fixed;right:18px;bottom:82px;width:min(340px,calc(100vw - 36px));z-index:1500;border-radius:18px;padding:14px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);background-clip:padding-box;box-shadow:0 0 22px rgba(47,169,104,.20),var(--shadow-md);animation:aiGlow 10s ease-in-out infinite}
#aiPopup:not(.hidden){animation:aiPopIn .22s cubic-bezier(.2,.8,.2,1) both,aiGlow 10s ease-in-out infinite}
@keyframes aiPopIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes aiGlow{
0%,100%{box-shadow:0 0 0 2px rgba(26,135,68,.65),0 0 22px rgba(47,169,104,.5),0 0 44px rgba(45,212,191,.22),var(--shadow-md)}
20%{box-shadow:0 0 0 2px rgba(20,184,166,.65),0 0 22px rgba(45,212,191,.5),0 0 44px rgba(45,212,191,.3),var(--shadow-md)}
40%{box-shadow:0 0 0 2px rgba(126,212,145,.7),0 0 22px rgba(126,212,145,.55),0 0 44px rgba(126,212,145,.3),var(--shadow-md)}
60%{box-shadow:0 0 0 2px rgba(181,166,66,.7),0 0 22px rgba(181,166,66,.5),0 0 44px rgba(181,166,66,.28),var(--shadow-md)}
80%{box-shadow:0 0 0 2px rgba(15,92,44,.75),0 0 22px rgba(15,92,44,.55),0 0 44px rgba(26,135,68,.3),var(--shadow-md)}
}
#aiPopup::before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;background:linear-gradient(135deg,#0f5c2c,#1a8744 40%,#2dd4bf 75%,#0f5c2c);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ai-head{display:flex;align-items:center;gap:8px;font-weight:900;font-size:.92rem;margin-bottom:10px}
.ai-head .ai-qwrap{color:var(--brand-ink)}
.ai-qwrap{position:relative;display:inline-flex}
.ai-star{position:absolute;font-size:.55em;color:#ffd83d;text-shadow:0 0 4px rgba(255,216,61,.8);animation:aiTwinkle 2.4s ease-in-out infinite}
.ai-star.s1{right:-3px;top:-5px}
.ai-star.s2{left:-4px;top:2px;font-size:.42em;color:#fff;animation-delay:.8s}
.ai-star.s3{right:-1px;bottom:-3px;font-size:.36em;color:#a7f3c9;animation-delay:1.6s}
@keyframes aiTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.ai-close{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:4px 6px}
.ai-close:hover{color:var(--danger)}
.ai-row{display:flex;gap:8px}
#aiInput{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;color:var(--ink);font:inherit;font-size:.86rem;outline:none;resize:vertical;min-height:64px}
#aiInput:focus{border-color:var(--brand)}
.ai-send{flex:0 0 auto;width:42px;border-radius:12px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));cursor:pointer;color:var(--brand-ink);font-size:.95rem;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,var(--brand-2) 14%,transparent));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow-sm)}
.ai-send:hover{filter:brightness(1.05);border-color:color-mix(in srgb,var(--brand) 46%,var(--line))}
@media print{#aiBubble,#aiPopup{display:none!important}}
@media (prefers-reduced-motion:reduce){#aiPopup{animation:none}.ai-star{animation:none}}
/* downloads + footer */
/* project review / partner / services */
.project-review,.partner-idealo{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-top:18px;padding:18px 20px;flex-wrap:wrap}
.review-copy{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1 1 460px}
.review-ico{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,var(--brand-2) 16%,transparent));color:var(--warning);font-size:1.2rem;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line))}
.review-copy h2{margin:2px 0 4px}
.review-eyebrow{font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.review-copy .hint{margin:0;max-width:70ch}
.review-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.review-actions .btn{white-space:nowrap}
.partner-idealo{position:relative;overflow:hidden;align-items:flex-end}
.partner-copy{position:relative;z-index:1;flex:1 1 540px;min-width:0}
.partner-logo{display:block;width:auto;height:32px;max-width:160px;object-fit:contain}
.partner-copy h2{margin:2px 0 6px}
.partner-copy .hint{margin:0 0 12px;max-width:78ch}
.partner-features{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.partner-features>span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.74rem;font-weight:800;color:var(--ink-2)}
.partner-features i{color:var(--brand-ink)}
.partner-cta{position:relative;z-index:1;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:2px}
.ext-services{margin-top:18px;padding:18px 20px}
.ext-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ext-head h2{margin:0 0 4px}
.ext-head .hint{margin:0 0 14px;max-width:95ch}
.ext-nav{display:none;gap:6px;flex:0 0 auto}
.ext-nav-btn{width:32px;height:32px;border-radius:50%}
.ext-nav-btn:disabled{opacity:.35;pointer-events:none}
.service-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.service-group{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 74%,transparent);padding:11px;min-width:0}
@media (min-width:761px) and (max-width:900px){.service-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.service-group h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.service-group h3 i{color:var(--brand-ink)}
.service-links{display:flex;flex-direction:column;gap:5px}
.service-link{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:10px;color:var(--ink-2);transition:background .2s ease,color .2s ease}
.service-link:hover{background:color-mix(in srgb,var(--brand) 7%,var(--surface));color:var(--brand-ink)}
.service-ico{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--bg-soft);color:var(--brand-ink);font-size:.82rem}
.service-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.service-txt strong{font-size:.8rem}
.service-txt small{font-size:.68rem;font-weight:600;color:var(--muted);line-height:1.3}
.service-link>i:last-child{font-size:.62rem;color:var(--muted-2)}
.service-dependency{grid-column:1/-1;margin:0;font-size:.72rem}
.ext-head .service-dependency{margin:-8px 0 14px}
.service-dependency i{color:var(--info);margin-right:4px}
.downloads{margin-top:18px;padding:18px;text-align:center}
.downloads h2{margin-top:0}
/* footer (bridge portfolio) */
.footer{margin:60px 0 0 0;width:100%;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(22px) saturate(1.5);border-top:1px solid var(--line);color:var(--muted)}
.footer-inner{width:min(var(--max),calc(100% - 40px));margin:0 auto;padding:40px 0 24px 0;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;text-align:left}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.footer-name{margin:8px 0 0 0;font-weight:900;font-size:1rem;color:var(--ink)}
.footer-name small{display:block;font-weight:700;font-size:.68rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
.footer-tag{margin:4px 0 0 0;font-size:.88rem;max-width:34ch}
.footercol{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.footercol p{font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:0 0 6px 0}
.footercol a{font-size:.9rem;font-weight:700;color:var(--ink-2)}
.footercol a:hover{color:var(--brand-ink)}
.footer-bottom{width:min(var(--max),calc(100% - 40px));margin:0 auto;padding:16px 0 20px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.82rem}
.footer-services{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.footer-services>p{margin:0;flex:0 0 auto;font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.footer-service-links{display:flex;flex-wrap:wrap;gap:5px 14px}
.footer-service-links a{font-size:.74rem;font-weight:700;color:var(--muted);white-space:nowrap}
.footer-service-links a:hover{color:var(--brand-ink)}
/* video */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
/* Benchmarks : criteres colores + tooltip flottant + barres presets (scope page-bench) */
#page-bench.glass{margin-top:50px}
#page-prices.glass{margin-top:50px}
#page-bench .dsec{margin-bottom:12px}
/* tuiles : chaque section benchmark est une carte */
#page-bench .dsec{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-md);min-width:0}
#page-bench .dsec-head{margin:0 0 10px 0}
/* brief = bloc hero en haut de section */
#bsecBrief{border:1px solid var(--brand);background:linear-gradient(135deg,rgba(47,158,68,.14),rgba(47,158,68,.03));padding:20px 22px}
#bsecBrief .dsec-head{font-size:1.2rem;color:var(--ink)}
/* anti-debordement + stabilite (tailles stables, responsive conserve) */
#page-bench .dsec{overflow:hidden;overflow-wrap:break-word}
#page-bench .dsec-head{flex-wrap:wrap;row-gap:4px}
#page-bench .dsec-head>span:nth-child(2){min-width:0}
#page-bench .dsec-body{min-height:140px}
#page-bench .btn{min-width:0;max-width:100%;white-space:normal;text-align:center;justify-content:center}
#page-bench .search-row input{flex:1 1 auto;min-width:0;width:auto}
#page-bench .bench-select{flex:1;min-width:0;max-width:100%}
#page-bench .bench-gamerow{flex-wrap:wrap}
/* wrap textuel general dans les tuiles bench (fini les troncatures/nowrap) */
#page-bench .di-name{white-space:normal;overflow:visible;text-overflow:clip}
#page-bench .di-specs span{white-space:normal}
#page-bench code.k{overflow-wrap:anywhere}
#page-bench .mini-btn{max-width:100%;white-space:normal;text-align:center;justify-content:center}
.bench-grid2,.bench-grid3{align-items:stretch}
#page-bench .dsec-head{cursor:default}
.pcrit{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;border-radius:10px;padding:3px 9px;margin:2px 4px 2px 0;border:1px solid;cursor:help}
.pcrit.st-ok{color:#1e7e46;border-color:rgba(30,126,70,.4);background:rgba(30,126,70,.08)}
.pcrit.st-warn{color:#b97a0c;border-color:rgba(245,159,0,.45);background:rgba(245,159,0,.10)}
.pcrit.st-err{color:var(--danger);border-color:rgba(224,49,49,.45);background:rgba(224,49,49,.08)}
.dot-ok{color:#1e7e46}.dot-warn{color:#e8a100}.dot-err{color:var(--danger)}
.fps-r{color:var(--danger);font-weight:900}.fps-y{color:#b97a0c;font-weight:900}.fps-g{color:#1e7e46;font-weight:900}.fps-b{color:#1971c2;font-weight:900}
.perf-tip{position:fixed;z-index:9999;max-width:300px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px 12px;pointer-events:none}
.ptip-row{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;padding:3px 0}
.ptip-row.st-ok i{color:#1e7e46}.ptip-row.st-warn i{color:#b97a0c}.ptip-row.st-err i{color:var(--danger)}
.ptip-row small{color:var(--muted)}
.preset-bars{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pbar{display:flex;align-items:center;gap:8px;font-size:.8rem}
.pbar-lbl{flex:0 0 64px;font-weight:800;color:var(--muted)}
.pbar-track{flex:1;height:12px;border-radius:7px;background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
.pbar-fill{display:block;height:100%;border-radius:7px}
.fpsbg-r{background:#e03131}.fpsbg-y{background:#f59f00}.fpsbg-g{background:#2f9e44}.fpsbg-b{background:#1971c2}
.pbar-val{flex:0 0 52px;text-align:right}
.di-sub{display:block;font-size:.78rem;color:var(--muted)}
.di-specs{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.di-specs span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* welcome popup */
.welcome-actions,.welcome-back{display:none}
.wpage h3{margin:4px 0 8px 0;font-size:1rem}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.wgrid label,.wfld{display:flex;flex-direction:column;gap:4px;font-size:.8rem;font-weight:800;color:var(--muted)}
.wgrid input,.wfld textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:9px 11px;color:var(--ink);font:inherit;font-size:.88rem;font-weight:500;width:100%}
.wfld{margin:8px 0}
.wrecents{flex:1;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.wrecents .list-row{animation:rowIn .24s ease both}
.wrecents .list-row:nth-child(2){animation-delay:.03s}
.wrecents .list-row:nth-child(3){animation-delay:.06s}
.wrecents .list-row:nth-child(4){animation-delay:.09s}
.wrecents .list-row:nth-child(5){animation-delay:.12s}
#wAi:not(.hidden){animation:pageIn .26s cubic-bezier(.2,.8,.2,1) both}
.wrow{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-top:8px;background:var(--surface)}
.wrow .grow{flex:1;min-width:0;font-size:.82rem}
.wrow .wst{color:var(--muted);font-size:.75rem;white-space:nowrap}
.wrow-ask{border-color:var(--brand)}
.wslot{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:7px 9px;color:var(--ink);font:inherit;font-size:.8rem;max-width:45%}
#wBuild:disabled{opacity:.75;cursor:wait}
@media (max-width:640px){.wgrid{grid-template-columns:1fr}}
/* welcome v2 : 2 colonnes, boutons bubble, slide IA, consentement */
.wcols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"brand right" "new right";gap:20px;align-items:stretch}
/* remplissage du grand popup : colonnes flex + scrolls internes */
#modalBody:has(#wMain){display:flex;flex-direction:column}
#modalBody:has(.wk){display:flex;flex-direction:column;min-height:0}
#modalBody:has(.wk) .usage-pane{flex:1;min-height:0;display:flex;flex-direction:column}
#wMain,#wAi{flex:1;display:flex;flex-direction:column;min-height:0}
#wMain .wcols{flex:1;min-height:0}
#wMain .wright{display:flex;flex-direction:column;min-height:0}
#wAi .wslide{flex:1;min-height:0}
#wAi .wai-left,#wAi .wai-right{min-height:0;overflow-y:auto;padding-right:2px}
.wtitle{font-size:1.25rem;font-weight:900;text-align:center}
.wtitle a{color:var(--brand-ink)}
.wslogan{margin:2px auto 8px auto;text-align:center;max-width:46ch}
.wlogo{width:150px;height:150px;border-radius:24px;margin:0 auto 12px auto;display:block}
.wbrand{grid-area:brand;text-align:center;min-width:0}
.wright{grid-area:right}
.wnew{grid-area:new;min-width:0}
#wMain,#wAi{justify-content:safe center}
#wMain h3,#wAi h3{text-align:center}
#wUsage{height:clamp(110px,17vh,230px)}
#wPaste{height:clamp(220px,34vh,480px)}
.wconsentwarn{display:flex;gap:8px;align-items:center;border:1px solid rgba(245,159,0,.5);background:rgba(245,159,0,.1);border-radius:12px;padding:8px 10px;font-size:.78rem;font-weight:700;margin-bottom:8px;flex-wrap:wrap}
.bubble-btn{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 20%,transparent),color-mix(in srgb,var(--brand-2) 14%,transparent))!important;color:var(--brand-ink)!important;border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow-sm);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.bubble-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 27%,transparent),color-mix(in srgb,var(--brand-2) 19%,transparent))!important;border-color:color-mix(in srgb,var(--brand) 48%,var(--line))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),var(--shadow-md)}
html[data-glass="off"] .btn-primary,html[data-glass="off"] .bubble-btn,html[data-glass="off"] #aiBubble,html[data-glass="off"] .ai-send{background:color-mix(in srgb,var(--brand) 12%,var(--surface))!important;color:var(--brand-ink)!important;border-color:color-mix(in srgb,var(--brand) 24%,var(--line))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:var(--shadow-sm)!important}
.wslide{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.wslide .wai-left,.wslide .wai-right{transition:transform .35s ease,opacity .35s ease}
.wslide.pre .wai-left{transform:translateX(-26px);opacity:0}
.wslide.pre .wai-right{transform:translateX(26px);opacity:0}
/* boutons composants (style slots non selectionnes) */
.wcomp{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px;margin-bottom:8px;color:var(--ink);font:inherit;cursor:default}
.wcomp-ic{flex:0 0 auto;font-size:1.3rem;color:var(--muted);width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.wcomp-ic svg{width:1.3rem;height:1.3rem;display:block}
.wcomp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.wcomp-tx strong{font-size:.78rem;color:var(--muted)}
.wcomp-ref,.wcomp-vendor{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcomp-ref{font-size:.85rem;font-weight:700}
.wcomp-vendor{font-size:.68rem;font-weight:700;color:var(--muted)}
.wcomp-vendor.hidden{display:none}
.wcomp-st{flex:0 0 auto;font-size:1rem;color:var(--muted);display:flex;align-items:center;justify-content:center}
.wcomp.st-search .wcomp-st{color:#b97a0c}
.wcomp.st-search .wcomp-st i{animation:wmag .7s ease-in-out infinite}
.wcomp.st-import .wcomp-st{color:var(--brand-ink)}
.wcomp.st-import .wcomp-st i{animation:wdl .7s ease-in-out infinite}
.wcomp.st-done{background:rgba(150,230,180,.22);border-color:rgba(60,180,110,.45)}
.wcomp.st-done .wcomp-st{color:#1e7e46}
.wcomp.st-warn{border-color:rgba(245,159,0,.5)}
.wcomp.st-warn .wcomp-st{color:#b97a0c}
/* same shimmer as the price refresh, horizontal while searching and vertical while importing */
.wcomp.st-search,.wcomp.st-import{position:relative;overflow:hidden}
.wcomp.st-search::after,.wcomp.st-import::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(128,128,128,.24) 50%,transparent 75%);background-size:250% 100%;animation:sk 1.4s infinite;z-index:2}
.wcomp.st-import::after{top:-45%;right:0;bottom:auto;left:0;height:45%;background:linear-gradient(180deg,transparent,rgba(128,128,128,.3),transparent);background-size:100% 100%;animation:skv 1.25s linear infinite}
@keyframes wmag{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes wdl{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes skv{from{transform:translateY(0)}to{transform:translateY(322%)}}
#wProgs:not(:empty){margin-top:10px}
.wprog{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 11px;min-width:0}
.wprog-ic{flex:0 0 20px;width:20px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem}
.wprog-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;font-weight:900;color:var(--ink)}
.wprog-st{flex:0 0 auto;font-size:.72rem;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.wprog.st-search .wprog-ic,.wprog.st-search .wprog-st{color:#b97a0c}
.wprog.st-import .wprog-ic,.wprog.st-import .wprog-st{color:var(--brand-ink)}
.wprog.st-manual .wprog-ic,.wprog.st-manual .wprog-st{color:#b97a0c}
.wprog.st-done{border-color:rgba(60,180,110,.45);background:rgba(150,230,180,.18)}
.wprog.st-done .wprog-ic,.wprog.st-done .wprog-st{color:#1e7e46}
.wprog.st-warn{border-color:rgba(245,159,0,.5)}
.wprog.st-warn .wprog-ic,.wprog.st-warn .wprog-st{color:#b97a0c}
#wResults .pick-card{margin-bottom:8px}
/* banniere consentement */
.consent-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:3000;display:flex;gap:12px;align-items:center;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line-strong);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-md);font-size:.82rem;font-weight:700;max-width:min(640px,calc(100vw - 32px));flex-wrap:wrap}
.consent-btns{display:flex;gap:8px}
@media (max-width:960px){
  .wcols{display:flex;flex-direction:column;gap:16px;grid-template:none;flex:none;min-height:auto}
  #wMain{flex:none;min-height:auto}
  #wMain .wright{min-height:auto;overflow:visible}
  #modalBody:has(#wMain){display:block;overflow-y:auto;overscroll-behavior:contain}
  .welcome-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .welcome-actions .btn{width:100%;justify-content:center}
  .welcome-back{display:inline-flex;margin-bottom:8px}
  #wMain.welcome-view-home .wright,#wMain.welcome-view-home .wnew{display:none}
  #wMain.welcome-view-new .wbrand,#wMain.welcome-view-new .wright{display:none}
  #wMain.welcome-view-load .wbrand,#wMain.welcome-view-load .wnew{display:none}
}
@media (max-width:640px){.wcols{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"brand" "right" "new"}.wslide{grid-template-columns:1fr}}
/* welcome hero : logo + slogan + 4 atouts glass */
.wfeats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.wfeat{font-size:.82rem;padding:16px 10px}
.wfeat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;font-size:.72rem;font-weight:800;text-align:center}
.wfeat i{font-size:1.2rem;color:var(--brand-ink)}
@media (max-width:560px){.wfeats{grid-template-columns:repeat(2,1fr)}}
.bench-gamerow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bench-select{flex:1;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:9px 11px;color:var(--ink);font:inherit;font-size:.88rem}
.yt-extra{margin:12px 0 4px 0}
.bench-sub{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.bench-cat{cursor:pointer}
/* bench layout : brief haut, 2 colonnes jeu/videos, 3 colonnes pro/geekbench/3dmark */
.bench-grid2.ratio13{grid-template-columns:1fr 3fr}
.bench-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-bottom:14px}
.bench-grid3{display:grid;grid-template-columns:3fr 2fr 2fr;gap:12px;align-items:stretch}
#page-bench .bench-grid2 .dsec,#page-bench .bench-grid3 .dsec{margin-bottom:0}
/* bench : cartes horizontales + grilles (brief 3 col, iobit 2 puis 3, bas 3/7-2/7-2/7) */
#bsecBrief{margin-bottom:14px}
#briefBody{display:grid;gap:10px;grid-template-columns:repeat(5,1fr);align-items:stretch}
.brief-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);padding:16px 10px;box-shadow:var(--shadow-md);cursor:help;min-width:0;min-height:150px}
.bt-icon{font-size:1.6rem;color:var(--muted)}
.bt-title{font-weight:800;font-size:.85rem}
.bt-status{font-weight:900;font-size:1.05rem}
.bt-res{font-size:.78rem;color:var(--muted)}
.bt-fps{font-size:1.5rem}
.brief-tile.static{cursor:default}
/* barres a checkpoints : zones rouge|jaune|vert + ticks limites + aiguille */
.cbars{display:flex;flex-direction:column;gap:12px}
.cbar{cursor:help;min-width:0}
.cbar-top{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;font-weight:800}
.cbar-track{position:relative;height:14px;margin-top:20px}
.cbar-zones{display:flex;height:100%;border-radius:8px;background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
.cbar-track .zone{height:100%;transition:filter .15s;cursor:help}
.cbar-track .zone:hover{filter:brightness(1.35) saturate(1.3)}
.cbar-track .zone{height:100%}
.z-r{background:rgba(224,49,49,.55)}.z-y{background:rgba(245,159,0,.6)}.z-g{background:rgba(47,158,68,.5)}.z-u{background:rgba(128,128,128,.25);width:100%}
.ckpt{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.75}
.needle{position:absolute;top:-6px;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:2px solid #fff;cursor:help;transition:transform .15s}
.needle:hover{transform:scale(1.25)}
.needle.n-r{background:#e03131;box-shadow:0 0 9px 2px rgba(224,49,49,.85)}
.needle.n-y{background:#f59f00;box-shadow:0 0 9px 2px rgba(245,159,0,.85)}
.needle.n-g{background:#2f9e44;box-shadow:0 0 9px 2px rgba(47,158,68,.85)}
.cbar small{color:var(--muted);font-size:.75rem}
/* splits internes : jeu (gauche/droite), tuiles gb/ts */
.game-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.gb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ts-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
@media (max-width:960px){.game-split{grid-template-columns:1fr}}
@media (max-width:640px){.ts-tiles{grid-template-columns:1fr}.gb-tiles{grid-template-columns:1fr}}
/* tuiles brief pastel tres leger selon statut */
.brief-tile.st-ok{background:rgba(47,158,68,.12)}
.brief-tile.st-warn{background:rgba(245,159,0,.13)}
.brief-tile.st-err{background:rgba(224,49,49,.10)}
/* specs charges lourdes : liste verticale, pas de pills */
.pro-block{border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);padding:12px 14px;box-shadow:var(--shadow-md)}
.pro-head{display:flex;align-items:center;gap:8px;font-weight:900;margin-bottom:8px}
.pro-head span{flex:1}
.spec-list{display:flex;flex-direction:column;gap:6px}
.spec-row{display:flex;gap:8px;align-items:flex-start;font-size:.82rem}
.spec-row i{margin-top:2px}
.spec-row.st-ok i{color:#1e7e46}.spec-row.st-warn i{color:#b97a0c}.spec-row.st-err i{color:var(--danger)}
.spec-txt{display:flex;flex-direction:column}
.spec-txt small{color:var(--muted)}
#gbBody,#tsBody{display:grid;gap:10px;grid-template-columns:1fr;align-items:start}
#dailyBody{display:grid;gap:10px;grid-template-columns:1fr;align-items:start}
#proBody{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);align-items:start}
@media (max-width:1100px){#proBody{grid-template-columns:1fr}}
.iobit-grid2{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:10px}
.iobit-grid3{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-bottom:10px}
.ts-grid2{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:10px}
#page-bench .bench-cat,
#page-bench #gameBody .ditem,
#page-bench #gbBody .ditem,
#page-bench #tsBody .ditem{border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);padding:12px 14px;margin-bottom:0;box-shadow:var(--shadow-md)}
#page-bench #gameBody .ditem:hover,
#page-bench #gbBody .ditem:hover,
#page-bench #tsBody .ditem:hover{background:var(--surface);transform:none;box-shadow:var(--shadow-md)}
@media (max-width:1200px){.bench-grid3{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.bench-grid2{grid-template-columns:1fr}.bench-grid2.ratio13{grid-template-columns:1fr}.bench-grid3{grid-template-columns:1fr}#briefBody{grid-template-columns:repeat(2,1fr)}.iobit-grid2,.iobit-grid3{grid-template-columns:1fr}.iobit-grid2 .ditem,.iobit-grid3 .ditem{align-items:flex-start}}
/* v2.59 — comparaison de configurations */
#page-compare.glass{margin-top:50px;min-width:0;max-width:100%;overflow-x:clip}
#page-compare .cmp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap}
#page-compare .cmp-head h2{margin:0;display:flex;align-items:center;gap:10px}
.cmp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.cmp-toolbar .seg{margin:0}
.cmp-modes{display:flex}
.cmp-modes button{white-space:nowrap}
#cmpAdd:disabled{opacity:.55;cursor:not-allowed}
.cmp-sec{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-md);margin-bottom:14px;min-width:0}
.cmp-sec-main{border-color:rgba(47,158,68,.45)}
.cmp-sec-head{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 0}
.cmp-sec-head>span:nth-child(2){flex:1;min-width:0}
.cmp-sec-head i{font-size:.95rem;color:var(--brand-ink)}
.cmp-sec-badge{font-size:.68rem;letter-spacing:.07em;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted)}
.cmp-controls{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px 0}
.cmp-controls label{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:1 1 220px;min-width:0}
.cmp-controls .bench-select{flex:1;min-width:0;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink)}
.cmp-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cmp-table{--cmp-label-w:210px;--cmp-detail-gap:24px;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cmp-table col.cmp-colrow{width:var(--cmp-label-w)}
.cmp-table thead th{position:sticky;top:0;z-index:3;background:var(--surface);vertical-align:top}
.cmp-table th,.cmp-table td{padding:9px 10px;border-top:1px solid var(--line);font-size:.82rem;text-align:left;vertical-align:middle;overflow-wrap:anywhere}
.cmp-table thead th{border-top:none;border-bottom:1px solid var(--line-strong)}
.cmp-rowhead{position:sticky;left:0;z-index:2;background:var(--surface);width:var(--cmp-label-w);font-size:.76rem;color:var(--ink-2);font-weight:800;padding:0!important}
.cmp-rowhead-inner{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.cmp-rowhead-inner .cmp-rowtoggle{flex:1;min-width:0}
.cmp-rowhead-inner .cmp-rowcards{width:29px;height:27px;margin-right:8px;box-shadow:none}
.cmp-table thead th.cmp-corner{left:0;z-index:9;background:var(--bg-soft)}
.cmp-rowtoggle{display:flex;align-items:center;gap:6px;width:100%;min-width:0;border:0;background:none;padding:9px 10px;font:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer}
.cmp-rowtoggle.cmp-static{cursor:default}
.cmp-rowtoggle:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:8px}
.cmp-rowchev{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:12px;color:var(--muted);font-size:.62rem;transition:transform .18s ease}
.cmp-rowtoggle[aria-expanded="true"] .cmp-rowchev{transform:rotate(90deg);color:var(--brand-ink)}
.cmp-rowicon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--bg-soft);color:var(--muted);vertical-align:middle}
.cmp-rowicon i,.cmp-rowicon svg{font-size:.82rem;width:.95rem;height:.95rem}
.cmp-rowlabel{flex:1;min-width:0;line-height:1.2;white-space:normal;overflow-wrap:break-word}
.cmp-rowhead small{display:block;margin-top:2px;color:var(--muted);font-size:.68rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cmp-detail-head th{background:color-mix(in srgb,var(--brand) 5%,var(--bg-soft));color:var(--brand-ink);font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;padding-top:7px;padding-bottom:7px;border-top:1px dashed var(--line-strong)}
.cmp-detail-head th span{display:inline-block;position:sticky;left:10px}
.cmp-detail-row .cmp-rowhead{color:var(--muted);font-size:.71rem;font-weight:700;background:color-mix(in srgb,var(--bg-soft) 32%,var(--surface))}
.cmp-detail-row .cmp-rowtoggle{padding-left:20px}
.cmp-detail-row .cmp-cell{font-size:.76rem;background:color-mix(in srgb,var(--bg-soft) 18%,var(--surface))}
/* Inline expanded datasheet: a narrower panel inside the comparison table so
   an open component is immediately visible as an inset dropdown. */
.cmp-detail-shell>td{padding:0!important;border-top:0!important;background:transparent!important}
/* Left-inset drawer. The reduced detail label width exactly compensates for
   the inset, so its value columns stay aligned with the main comparison table. */
.cmp-detail-panel{width:calc(100% - var(--cmp-detail-gap));margin:10px 0 14px var(--cmp-detail-gap);border:0;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-sm);overflow:hidden}
.cmp-detail-panel-head{display:flex;align-items:center;gap:7px;padding:9px 12px;background:color-mix(in srgb,var(--brand) 7%,var(--bg-soft));border-bottom:1px solid var(--line);color:var(--brand-ink);font-size:.76rem;font-weight:900;letter-spacing:.04em}
.cmp-detail-panel-head i{font-size:.78rem}
.cmp-detail-table-wrap{overflow:visible}
.cmp-detail-table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--surface)}
.cmp-detail-table th,.cmp-detail-table td{padding:8px 10px;border-top:1px solid var(--line);font-size:.76rem;text-align:left;vertical-align:middle;overflow-wrap:anywhere}
.cmp-detail-table .cmp-detail-colrow{width:calc(var(--cmp-label-w) - var(--cmp-detail-gap))}
.cmp-detail-table .cmp-detail-label{width:calc(var(--cmp-label-w) - var(--cmp-detail-gap));color:var(--muted);font-size:.71rem;font-weight:700;background:color-mix(in srgb,var(--bg-soft) 28%,var(--surface))}
.cmp-detail-cat th{padding-top:9px;padding-bottom:6px;background:color-mix(in srgb,var(--brand) 6%,var(--bg-soft));color:var(--brand-ink);font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.cmp-detail-cat th span{display:inline-block;position:sticky;left:10px}
.cmp-detail-table .cmp-cell{background:color-mix(in srgb,var(--bg-soft) 10%,var(--surface))}
.cmp-detail-table .cmp-changed{background:color-mix(in srgb,var(--warning) 16%,var(--surface))!important}
.cmp-detail-table .cmp-best{background:color-mix(in srgb,var(--success) 12%,var(--surface))!important}
.cmp-detail-table .cmp-worst{background:color-mix(in srgb,var(--danger) 11%,var(--surface))!important}
.cmp-colhead{position:relative;padding-top:13px!important;padding-right:38px!important;border-top:3px solid var(--cmp-accent)!important;min-width:0}
.cmp-colhead.full{padding-top:16px!important}
.cmp-colhead.compact{padding-top:10px!important}
.cmp-colname{display:block;font-size:.82rem;font-weight:900;line-height:1.2;color:var(--ink)}
.cmp-colhead.compact .cmp-colname{font-size:.76rem}
.cmp-colmeta{display:block;margin-top:3px;font-size:.66rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.cmp-colhead.is-unsaved{background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.cmp-colmeta.is-unsaved{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line));border-radius:999px;padding:3px 7px;display:inline-block;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 6%,transparent)}
.cmp-dupe{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 26%,var(--line));color:var(--brand-ink);font-size:.6rem;font-weight:900;letter-spacing:.02em;vertical-align:middle}
.cmp-coltotal{display:block;margin-top:6px;font-size:.85rem;font-weight:900;color:var(--brand-ink)}
.cmp-colrm{position:absolute;top:9px;right:8px;float:none;margin:0;width:25px;height:25px;min-width:25px;max-width:25px;padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0;border:1px solid var(--line);border-radius:50%;font-size:.72rem;line-height:1;color:var(--muted);box-shadow:none}
.cmp-colrm i{display:block;line-height:1;font-size:.7rem}
.cmp-group th{background:var(--bg-soft);color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;padding-top:11px;padding-bottom:7px}
.cmp-group th span{display:inline-block;position:sticky;left:10px}
.cmp-cell{position:relative;color:var(--ink-2)}
.cmp-row:hover .cmp-cell,.cmp-row:hover .cmp-rowhead{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.cmp-product{display:flex;flex-direction:column;gap:3px;min-width:0}
.cmp-prow{display:flex;align-items:center;gap:7px;min-width:0}
.cmp-pname{flex:1;min-width:0;font-size:.78rem;font-weight:800;line-height:1.25;color:var(--ink)}
.cmp-pmeta{font-size:.72rem;color:var(--muted);font-weight:700}
.cmp-cards-open{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:29px;height:27px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;padding:0;box-shadow:var(--shadow-sm)}
.cmp-cards-open i{font-size:.72rem}
.cmp-cards-open:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--bg-soft)}
.cmp-cards-open:focus-visible,.cmp-card-opt-ico:focus-visible,.cmp-card-add:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cmp-swap-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:14px;font-size:.62rem}
.cmp-swap-ico i:first-child{position:absolute;left:0;top:0}
.cmp-swap-ico i:last-child{position:absolute;right:0;bottom:0;font-size:.56rem}
.cmp-none{color:var(--muted-2,var(--muted));font-style:italic;font-size:.76rem}
.cmp-status{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:.76rem;line-height:1.25}
.cmp-status.st-ok{color:var(--success)}.cmp-status.st-warn{color:var(--warning)}.cmp-status.st-err{color:var(--danger)}
.cmp-crit{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;line-height:1.25;cursor:help}
.cmp-crit i{font-size:.68rem;flex:0 0 auto}
.cmp-crit.st-ok i{color:var(--success)}.cmp-crit.st-warn i{color:var(--warning)}.cmp-crit.st-err i{color:var(--danger)}
.cmp-cell small{display:block;margin-top:2px;font-size:.66rem;color:var(--muted);font-weight:600}
.cmp-loading{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.74rem;font-weight:700}
.cmp-retry{padding:4px 7px!important;font-size:.68rem!important}
.cmp-diff-row .cmp-rowhead{color:var(--ink);background:color-mix(in srgb,var(--warning) 8%,var(--surface))}
.cmp-changed{background:color-mix(in srgb,var(--warning) 16%,var(--surface))!important;box-shadow:inset 3px 0 0 rgba(245,159,0,.55)}
.cmp-best{background:color-mix(in srgb,var(--success) 12%,var(--surface))!important;outline:2px solid rgba(47,158,68,.55);outline-offset:-2px;box-shadow:inset 3px 0 0 rgba(47,158,68,.7)}
.cmp-worst{background:color-mix(in srgb,var(--danger) 11%,var(--surface))!important;outline:2px solid rgba(224,49,49,.48);outline-offset:-2px;box-shadow:inset 3px 0 0 rgba(224,49,49,.65)}
.cmp-best strong,.cmp-best .cmp-val,.cmp-best .cmp-status,.cmp-best .cmp-crit,.cmp-best .cmp-crit i,.cmp-best .cmp-status .dot-ok,.cmp-best .cmp-status .dot-warn,.cmp-best .cmp-status .dot-err{color:var(--success)!important}
.cmp-worst strong,.cmp-worst .cmp-val,.cmp-worst .cmp-status,.cmp-worst .cmp-crit,.cmp-worst .cmp-crit i,.cmp-worst .cmp-status .dot-ok,.cmp-worst .cmp-status .dot-warn,.cmp-worst .cmp-status .dot-err{color:var(--danger)!important}
.cmp-diff-row .cmp-changed .cmp-pname{color:var(--ink)}
#cmpBody.cmp-mode-diff .cmp-row:not(.cmp-diff-row){opacity:.46}
#cmpBody.cmp-mode-diff .cmp-row.cmp-diff-row{opacity:1}
#cmpBody.cmp-mode-diff .cmp-group{opacity:.7}
.cmp-empty{margin:6px 0}
.cmp-pick-group{margin:0 0 14px 0}
.cmp-pick-group h3{margin:0 0 6px 0;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp-pick-row,.cmp-opt-row{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 11px;margin-bottom:6px;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cmp-pick-row:hover,.cmp-opt-row:hover{border-color:var(--brand);background:var(--bg-soft)}
.cmp-pick-row.current,.cmp-opt-row.current{border-color:rgba(47,158,68,.5);background:rgba(47,158,68,.08)}
.cmp-opt-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cmp-pick-main,.cmp-opt-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cmp-pick-main strong,.cmp-opt-main strong{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-pick-main small,.cmp-opt-main small{font-size:.7rem;color:var(--muted)}
.cmp-pick-total,.cmp-opt-price{font-weight:900;font-size:.82rem;white-space:nowrap;color:var(--brand-ink)}
.cmp-opt-group{margin:0 0 14px 0}
.cmp-opt-group h3{margin:0 0 7px 0;font-size:.88rem}
.cmp-opt-list{display:flex;flex-direction:column;gap:0}
.modal.modal-cards{width:min(96vw,calc(210px + var(--cmp-card-count,2) * var(--cmp-card-w,240px)));height:min(90vh,860px);max-height:90vh}
.modal.modal-cards .modal-body{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.modal.modal-cards .cmp-cards-hint,.modal.modal-cards .cmp-cards-best{flex:0 0 auto}
.modal.modal-cards .cmp-cards-wrap{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.cmp-cards-hint{margin:0 0 12px}
.cmp-cards-wrap{overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cmp-cards-table{--cmp-label-w:160px;width:max(100%,calc(var(--cmp-label-w) + var(--cmp-card-count,2) * var(--cmp-card-w,240px)));border-collapse:collapse;table-layout:fixed}
.cmp-cards-table col.cmp-cards-col-label{width:var(--cmp-label-w)}
.cmp-cards-table col.cmp-cards-col-value{width:var(--cmp-card-w,240px)}
.cmp-cards-corner,.cmp-cards-dslabel{position:sticky;left:0;z-index:3;background:var(--surface)}
.cmp-cards-corner{z-index:5;border-bottom:1px solid var(--line)}
.cmp-cards-headcell{vertical-align:top;padding:4px;border-bottom:1px solid var(--line)}
.cmp-cards-headcell .cmp-card{height:100%}
.cmp-cards-dsrow .cmp-cards-dslabel{width:var(--cmp-label-w);padding:8px 10px;border-top:1px solid var(--line);text-align:left;font-size:.72rem;line-height:1.3;font-weight:800;color:var(--muted);vertical-align:top;overflow-wrap:anywhere}
.cmp-cards-dsval{padding:8px 10px;border-top:1px solid var(--line);border-left:1px solid var(--line);font-size:.76rem;line-height:1.35;vertical-align:top;overflow-wrap:anywhere}
.cmp-cards-dsrow:hover .cmp-cards-dslabel,.cmp-cards-dsrow:hover .cmp-cards-dsval{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.cmp-cards-empty{margin:12px 10px}
.cmp-cards-best{margin:9px 0 0}
.cmp-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-strong);border-top:3px solid var(--cmp-accent,var(--brand));border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;scroll-snap-align:start}
.cmp-card.is-focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--cmp-accent,var(--brand)) 35%,transparent),var(--shadow-md)}
.cmp-card-top{display:flex;align-items:center;gap:7px;padding:9px 11px;background:color-mix(in srgb,var(--cmp-accent,var(--brand)) 7%,var(--surface));border-bottom:1px solid var(--line)}
.cmp-card-badge{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--cmp-accent,var(--brand)) 48%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--cmp-accent,var(--brand)) 16%,var(--surface));color:var(--ink);font-size:.62rem;font-weight:900;letter-spacing:.03em;padding:4px 7px}
.cmp-card-col{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;font-weight:900;color:var(--ink)}
.cmp-card-opt-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;min-width:27px;padding:0;border:1px solid color-mix(in srgb,var(--cmp-accent,var(--brand)) 30%,var(--line));border-radius:9px;background:var(--surface);color:var(--brand-ink);font-size:.7rem;cursor:pointer;box-shadow:var(--shadow-sm)}
.cmp-card-opt-ico:hover{border-color:var(--cmp-accent,var(--brand));background:var(--bg-soft)}
.cmp-card-opt-ico.is-disabled,.cmp-card-opt-ico:disabled{border-color:var(--line);background:var(--bg-soft);color:var(--muted);opacity:.45;cursor:not-allowed;box-shadow:none}
.cmp-card-img{width:100%;height:148px;object-fit:contain;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.cmp-card-noimg{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:2.2rem}
.cmp-card-body{display:flex;flex-direction:column;gap:4px;padding:11px 12px 8px;min-width:0}
.cmp-card-name{margin:0;font-size:.9rem;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cmp-card-vendor{font-size:.72rem;font-weight:800;color:var(--muted)}
.cmp-card-price{font-size:1rem;font-weight:900;color:var(--brand-ink)}
.cmp-card-price small{font-size:.66rem;font-weight:700;color:var(--muted)}
.cmp-card-pmeta{font-size:.7rem;color:var(--muted);font-weight:700}
.cmp-card-specs{margin:3px 0 0;font-size:.72rem;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cmp-card-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cmp-card-links a{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);color:var(--muted);font-size:.64rem;font-weight:800;padding:4px 7px;text-decoration:none}
.cmp-card-links a:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--surface)}
.cmp-card-actions{display:flex;flex-direction:column;gap:7px;padding:8px 12px 12px;margin-top:auto}
.cmp-card-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px solid color-mix(in srgb,var(--brand) 38%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--brand-ink);font:inherit;font-size:.7rem;font-weight:900;line-height:1.25;text-align:center;padding:8px 7px;cursor:pointer}
.cmp-card-add:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.cmp-card-add.is-added{border-color:var(--line);background:var(--bg-soft);color:var(--muted);cursor:default}
.cmp-card-add.is-placeholder{visibility:hidden;pointer-events:none}
.cmp-card-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:220px;color:var(--muted);font-size:.8rem;font-weight:800;padding:18px}
.cmp-optpop{position:fixed;z-index:2400;overflow:auto;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg);padding:10px;animation:dropIn .16s ease}
.cmp-optpop-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:1px 2px 5px}
.cmp-optpop-head strong{font-size:.84rem;color:var(--ink)}
.cmp-optpop-head small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;color:var(--muted)}
.cmp-optpop .hint{margin:0 2px 8px}
.cmp-optpop .cmp-opt-group:last-child{margin-bottom:0}
@media (max-width:960px){
  #page-compare.glass{margin-top:20px}
  #page-compare .cmp-head{align-items:stretch}
  .cmp-toolbar{margin-left:0;width:100%}
  .cmp-toolbar .seg{flex:1;min-width:0}
  .cmp-modes button{flex:1}
  #cmpAdd{width:100%}
  .cmp-sec{padding:11px 10px;border-radius:16px}
  .cmp-table{--cmp-label-w:164px;--cmp-detail-gap:12px}
  .cmp-table th,.cmp-table td{padding:8px 8px;font-size:.78rem}
  .cmp-colname{font-size:.76rem}
  .cmp-controls label{flex:1 1 100%}
  .cmp-detail-row .cmp-rowhead{font-size:.68rem}
  .cmp-detail-row .cmp-rowtoggle{padding-left:14px}
  .cmp-detail-row .cmp-cell{font-size:.72rem}
  .cmp-detail-panel{width:calc(100% - var(--cmp-detail-gap));margin:8px 0 12px var(--cmp-detail-gap);border-radius:12px}
  .cmp-detail-panel-head{padding:8px 9px;font-size:.7rem}
  .cmp-detail-table th,.cmp-detail-table td{padding:7px 6px;font-size:.7rem}
  .cmp-detail-table .cmp-detail-colrow,.cmp-detail-table .cmp-detail-label{width:calc(var(--cmp-label-w) - var(--cmp-detail-gap))}
  .cmp-rowtoggle{padding:8px}
  .cmp-cards-open{width:26px;height:25px}
  .cmp-table .cmp-rowicon{display:none}
  .cmp-rowlabel{font-size:.72rem}
  .cmp-rowhead-inner .cmp-rowcards{width:26px;height:25px;margin-right:4px}
  .modal.modal-cards{width:100%;height:92dvh;max-height:92dvh}
  .modal.modal-cards .modal-body{padding:12px 4px}
  .cmp-colhead{padding-right:34px!important}
  .cmp-colrm{top:7px;right:6px;width:24px;height:24px;min-width:24px;max-width:24px}
  .cmp-cards-table{--cmp-label-w:clamp(62px,20vw,88px)}
  .cmp-cards-dsrow .cmp-cards-dslabel{padding:8px 4px;font-size:.66rem}
  .cmp-card-img{height:132px}
}
@media (max-width:700px){
  .pill.tabs:not(.small){gap:2px;padding:3px;width:100%;max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}
  .pill.tabs:not(.small) button{padding:11px 12px;gap:7px;font-size:.82rem;letter-spacing:-.015em}
  .pill.tabs:not(.small) button i{font-size:.82rem}
}
@media (max-width:560px){
  .cmp-toolbar{flex-direction:column;align-items:stretch}
  .cmp-toolbar .seg{width:100%}
  .cmp-modes{display:flex;flex-direction:row;align-items:stretch;width:100%}
  .cmp-modes button{flex:1 1 0;width:auto}
  .cmp-sec-head{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .cmp-sec,.cmp-cell,.cmp-pick-row,.cmp-opt-row,.cmp-rowchev{transition:none!important}
  .cmp-optpop{animation:none!important}
}
/* v2.5 — benchmark video cards */
.video-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.vthumb{position:relative;border:none;background:#000;cursor:pointer;padding:0;display:block;width:100%}
.vthumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vthumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vthumb .play i{width:52px;height:52px;border-radius:50%;background:rgba(10,15,30,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:2px solid #fff}
.vthumb:hover .play i{background:var(--brand)}
.video-card .vt{padding:10px 12px 0 12px;font-size:.84rem}
.video-card .vt strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:800}
.vbtns{display:flex;gap:6px;padding:10px 12px 12px 12px;flex-wrap:wrap}
.video-embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin-bottom:6px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-panel-head h2{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.tut-panel-head .hint{margin:0 0 16px}
.tut-playlist-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;margin-bottom:10px;transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}
.tut-playlist-card:last-child{margin-bottom:0}
.tut-playlist-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.tut-playlist-ico{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:rgba(224,49,49,.09);color:#e03131;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.tut-playlist-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tut-playlist-txt strong{font-size:.95rem}
.tut-playlist-txt small{color:var(--muted);font-size:.74rem;font-weight:700}
.tut-playlist-card>i{color:var(--muted)}
.tut-video-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.tut-video-title{flex:1;min-width:0}
.tut-video-title h2{margin:2px 0 0;font-size:1rem;line-height:1.35}
.tut-video-block{margin-bottom:18px}
.tut-video-block:last-child{margin-bottom:0}
.tut-video-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:.78rem;font-weight:800}
.tut-video-source{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.tut-video-source i{color:#e03131}
.tut-video-label a{margin-left:auto;color:var(--brand-ink);display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;text-decoration:none}
.tut-video-label a:hover{text-decoration:underline}
.tut-approx{font-size:.64rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--warning);background:rgba(245,159,0,.12);border:1px solid rgba(245,159,0,.35);padding:2px 7px;border-radius:var(--radius-pill)}
.tut-video-caption{margin:6px 0 0;color:var(--muted);font-size:.76rem;line-height:1.35}
.tut-slot-main{cursor:pointer}
.tut-play-ico{color:var(--brand-ink)}
/* changelog */
.chlog{border-left:3px solid var(--brand);padding:6px 0 6px 14px;margin-bottom:14px}
.chlog h3{margin:0 0 4px 0;font-size:.95rem}
/* responsive */
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  #page-tutorials .col-right{order:-1}
  .col-right{position:static;max-height:none;overflow:visible}
  nav{flex-wrap:wrap;height:auto;min-height:var(--nav-h);align-content:center;row-gap:0;padding:0 8px 0 12px}
  nav:has(.menutitles.show){row-gap:12px}
  .nav-spacer{display:block;width:44px}
  .kjbrand{flex:1;justify-content:center;transition:padding-top .3s ease}
  .brand-name{font-size:.82rem}
  .iloveburgers{display:flex;align-items:center;justify-content:center}
  .ger{background:var(--ink)}
  .menutitles{order:4;flex-basis:100%;flex-direction:column;align-items:stretch;flex-wrap:nowrap;max-height:0;opacity:0;pointer-events:none;overflow:hidden;visibility:hidden;background:transparent;border-top:1px solid transparent;border-radius:0;padding:0 4px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .25s ease,padding .3s ease,border-color .3s ease,visibility .3s}
  .menutitles.show{max-height:430px;opacity:1;pointer-events:auto;visibility:visible;padding:4px 4px 14px;border-top-color:var(--line)}
  nav:has(.menutitles.show),body.scrolled nav:has(.menutitles.show){border-radius:24px;transition:width .26s ease,max-width .26s ease,top .26s ease,box-shadow .26s ease,background .26s ease,border-color .26s ease}
  nav:has(.menutitles.show) .kjbrand{padding-top:10px}
  .menutitles .icon-btn{width:100%;justify-content:flex-start;border:0;background:transparent;box-shadow:none;border-radius:var(--radius-pill);padding:14px 18px;font-size:1rem;color:var(--muted);opacity:1;transform:none;transition:none}
  .menutitles .icon-btn:hover{color:var(--ink);background:rgba(10,15,30,.06);transform:none;box-shadow:none}
  .menutitles .flag{width:22px;height:22px}
  .burger-close{display:none}
  body.scrolled nav{top:12px}
  .slot-actions{padding-left:14px}
  .slot-compat{padding-left:14px}
  .slot-badges{padding-left:14px}
  .delivery-tag{padding-left:14px}
  .fold-btn{display:inline-flex;align-items:center;gap:8px;margin:10px auto 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-pill);padding:8px 16px;font-weight:800;color:var(--muted);cursor:pointer}
  #summaryPanel{display:flex;flex-direction:column;align-items:center}
  #summaryBody.collapsed{display:none}
  .form-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-brand{align-items:center}.footercol{align-items:center}.footer-bottom{justify-content:center;text-align:center}
}
.mobile-totalbar,.mobile-scrim{display:none}
@media (max-width:960px), (display-mode: standalone){
  /* Standalone iOS keeps the status bar over the viewport: reserve its inset. */
  body{padding-top:env(safe-area-inset-top)}
  nav{top:env(safe-area-inset-top)}
  body.scrolled nav{top:calc(12px + env(safe-area-inset-top))}
}
@media (max-width:960px){
  body.summary-sheet-open,body.picker-sheet-open,body.tutorial-sheet-open{overflow:hidden}
  .container{width:100%;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  body:has(#mobileTotalBar:not(.hidden)) .pagebody{padding-bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + 26px)}
  body:has(#mobileTotalBar:not(.hidden)) .footer{padding-bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + 18px)}
  body:has(#mobileTotalBar:not(.hidden)) #aiBubble{bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + 14px)}
  body:has(#mobileTotalBar:not(.hidden)) .toast{bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + 14px)}
  body:has(#mobileTotalBar:not(.hidden)) .progress-pop{bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + 14px)}
  .hero-block{margin-top:10px;padding:14px;gap:12px}
  .install-mobile.btn{display:inline-flex}
  .settings-export.install-settings{display:flex}
  .hero-top{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch}
  .config-id{min-width:0}
  .budget-box{width:100%;min-width:0;flex:none}
  .config-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .config-name{width:100%;font-size:1.12rem;padding:10px 12px}
  .ver-chip{max-width:118px;overflow:hidden;text-overflow:ellipsis;font-size:.66rem;padding:7px 9px}
  .budget-row{padding:10px 12px}
  .hero-block .pill-row{justify-content:safe center}
  .hero-block .pill-row.around{flex-wrap:wrap;justify-content:safe center;overflow:visible;gap:8px}
  .hero-block .pill-row.around>.pill{flex:0 0 auto;width:auto;max-width:100%;justify-content:flex-start;gap:4px;padding:4px}
  .hero-block .pill-row.around>.pill:first-child{flex:0 0 auto;width:max-content;max-width:100%;display:flex;flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero-block .pill-row.around>.pill:first-child::-webkit-scrollbar{display:none}
  .hero-block .pill-row.around>.pill:first-child button{justify-content:center;padding:11px 12px;gap:7px;font-size:.82rem;letter-spacing:-.015em}
  .hero-block .pill-row.around>.pill:last-child{flex:0 0 auto;width:max-content;justify-content:center;gap:3px;overflow:visible}
  .hero-block .pill-row.around>.pill:last-child button{padding:11px 14px;gap:7px;font-size:.82rem;letter-spacing:-.015em}
  .panel{padding:12px}
  .split{gap:12px;margin-top:12px}
  #slotSections>div{margin-bottom:20px}
  nav{padding:0 8px 0 12px;min-height:var(--nav-h);align-content:center;row-gap:0}
  body.scrolled nav{top:8px;width:calc(100% - 16px)}
  .overlay{padding:8px;padding-top:max(8px,env(safe-area-inset-top));align-items:flex-end}
  .modal{width:100%;max-height:92dvh;border-radius:22px 22px 0 0}
  .modal.modal-wide{width:100%}
  .modal-head{padding:14px}
  .modal-body{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .sum-close{display:inline-flex;padding:8px;flex:0 0 auto}
  .mobile-totalbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1700;padding:8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--line);box-shadow:0 -12px 44px rgba(11,20,16,.20)}
  .mobile-totalbar.hidden{display:none!important}
  .mobile-totalbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 4px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
  .mt-main{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label total" "deliv deliv";column-gap:8px;row-gap:1px;align-items:baseline;flex:1;min-width:0}
  .mt-label{grid-area:label;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.1;white-space:nowrap}
  .mt-total{grid-area:total;justify-self:end;text-align:right;min-width:0;font-size:1.28rem;font-weight:900;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mt-delivery{grid-area:deliv;justify-self:end;text-align:right;font-size:.68rem;font-weight:700;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .mt-arrow{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
  .mt-arrow i{transition:transform .3s var(--sheet-ease)}
  body.summary-sheet-open .mt-arrow i{transform:rotate(180deg)}
  .mobile-scrim{display:block;position:fixed;inset:0;z-index:1490;background:rgba(5,10,8,.46);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .26s ease}
  .mobile-scrim.hidden{display:none!important}
  body.summary-sheet-open .mobile-scrim,body.picker-sheet-open .mobile-scrim,body.editor-sheet-open .mobile-scrim,body.tutorial-sheet-open .mobile-scrim{opacity:1}
  #summaryPanel,#pickerPanel,#editorPanel,#tutorialVideoPanel{position:fixed;left:0;right:0;bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom));z-index:1600;margin:0;width:auto;max-height:calc(100dvh - var(--mobilebar-h) - env(safe-area-inset-bottom) - 8px);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(calc(100% + 16px));border-radius:24px 24px 0 0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 -20px 60px rgba(11,20,16,.28);transition:transform .36s var(--sheet-ease),opacity .24s ease,visibility .36s;will-change:transform}
  #tutorialVideoPanel{bottom:0;max-height:calc(100dvh - 8px);padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  #summaryPanel{display:block;height:calc(100dvh - var(--mobilebar-h) - env(safe-area-inset-bottom) - 8px);max-height:calc(100dvh - var(--mobilebar-h) - env(safe-area-inset-bottom) - 8px);padding-top:0;overflow-y:auto}
  #summaryPanel .summary-body{flex:none;min-height:auto;overflow:visible;padding-right:0}
  #summaryPanel .fold-btn{display:none}
  #pickerPanel,#editorPanel{display:flex;flex-direction:column;overflow:hidden;padding:14px}
  #pickerPanel .picker-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .picker-tools-btn{display:inline-flex}
  .picker-quickrow{flex-direction:column;align-items:stretch}
  .picker-list{height:46vh;max-height:46vh}
  #idealoResults .pick-card{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"media head" "media desc";min-height:112px;padding:12px;gap:7px 12px}
  .pick-media{width:64px;height:64px}
  #idealoResults .pick-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.86rem}
  #idealoResults .pick-card .pick-actions{display:none}
  .picker-detail{padding-bottom:0}
  #pickerPanel.picker-detail-open{height:calc(100dvh - var(--mobilebar-h) - env(safe-area-inset-bottom) - 8px)}
  #pickerPanel.picker-detail-open .picker-detail{padding:0}
  .pd-head{margin:-14px -14px 0;padding:11px 14px 10px;border-bottom:1px solid var(--line);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:24px 24px 0 0}
  .pd-head .icon-btn{width:36px;height:36px;justify-content:center;padding:0}
  .pd-actions{margin:0 -14px -14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:0 0 24px 24px;background:var(--glass-bg);border-top:1px solid var(--line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  #editorPanel .editor-head{flex:0 0 auto;margin:-14px -14px 0;padding:12px 14px;border-radius:24px 24px 0 0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  #editorPanel .editor-body{padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
  #editorPanel .btn-row{position:sticky;bottom:0;margin:12px -14px 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--glass-bg);border-top:1px solid var(--line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);z-index:3}
  #pickerPanel:not(.picker-tools-open) .picker-tools>#pickerToolsPanel,
  #pickerPanel:not(.picker-tools-open) .picker-tools>#pickerFilters,
  #pickerPanel:not(.picker-tools-open) .picker-tools>.picker-quickrow{display:none!important}
  .picker-foot{position:static;bottom:auto;flex:0 0 auto;margin:10px -14px -14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:25px}
  #summaryPanel.hidden,#pickerPanel.hidden,#editorPanel.hidden,#tutorialVideoPanel.hidden{display:none!important}
  body.summary-sheet-open #summaryPanel,body.picker-sheet-open #pickerPanel,body.editor-sheet-open #editorPanel,body.tutorial-sheet-open #tutorialVideoPanel{visibility:visible;opacity:1;transform:none}
  #pickerPanel .picker-head{position:sticky;top:0;z-index:5;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  #summaryPanel .sum-sticky{margin:0 -12px 10px;padding:10px 12px 8px;border-radius:24px 24px 0 0}
  #summaryPanel .sum-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin:0 0 10px;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;flex-wrap:nowrap}
  #summaryPanel .sum-id{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon ver";align-items:center;column-gap:7px;row-gap:3px;flex:none;min-width:0}
  #summaryPanel .sum-id>i{grid-area:icon}
  #summaryPanel .sum-id strong{grid-area:name;min-width:0;font-size:1rem;line-height:1.2}
  #summaryPanel .sum-id .ver-chip{grid-area:ver;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.6rem;padding:4px 7px}
  #summaryPanel .sum-head .btn-sm{width:36px;height:36px;padding:0;gap:0;justify-content:center;font-size:.76rem}
  #summaryPanel .sum-head .btn-sm span{display:none}
  #summaryPanel .sum-head .sum-close{width:36px;height:36px;padding:0;justify-content:center}
  #pickerPanel .picker-head{flex-wrap:wrap;align-items:center;gap:8px;row-gap:7px;margin:-14px -14px 0;padding:12px 14px 10px;border-bottom:1px solid var(--line);border-radius:24px 24px 0 0}
  #pickerPanel #pickerTitle{flex:1 1 auto;font-size:1rem;line-height:1.2}
  #pickerPanel .picker-idealo-btn{padding:8px 10px;font-size:.76rem}
  #pickerPanel .mode-chip{padding:5px 9px;font-size:.68rem}
  #pickerPanel #pickerClose{flex:0 0 auto}
  #summaryPanel .pill.tabs.small{width:100%;max-width:100%;justify-content:stretch;gap:2px;padding:3px;overflow-x:hidden}
  #summaryPanel .pill.tabs.small button{flex:1 1 0;min-width:0;padding:8px 5px;gap:4px;font-size:.7rem;letter-spacing:-.02em}
  #summaryPanel .pill.tabs.small button i{font-size:.78rem}
  .sum-totals-dock{position:static;padding:0;background:transparent;box-shadow:none;border-top:0}
  #sumPowerPane .sum-totals .sum-line:nth-child(2),
  #sumPowerPane .sum-totals .sum-line:nth-child(3){display:none}
  #summaryPanel.power-revealed #sumPowerPane .sum-totals .sum-line:nth-child(2),
  #summaryPanel.power-revealed #sumPowerPane .sum-totals .sum-line:nth-child(3){display:flex}
  .sum-totals .sum-line{flex-wrap:wrap;align-items:baseline;row-gap:2px}
  #sumDescPane .sum-totals .sum-line>span:first-child,#sumTotalsDesc .sum-totals .sum-line>span:first-child{font-size:1rem;line-height:1.25}
  .sum-totals .big{font-size:1.22rem;line-height:1.15}
  .sum-totals .tot-right{flex-wrap:wrap;justify-content:flex-end;gap:2px 6px;min-width:0;margin-left:auto}
  .sum-totals .diff-mini{font-size:.76rem}
  .slot-main{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"visual type" "visual name" "specs specs" "side side";align-items:center;gap:4px 10px;padding:12px}
  .slot-info{display:contents}
  .slot-visual{grid-area:visual;align-self:center;width:64px;height:64px;margin:0;border-radius:12px;background:linear-gradient(145deg,var(--bg-soft),color-mix(in srgb,var(--surface) 80%,transparent))}
  .slot-visual img{width:100%;height:100%;object-fit:contain;padding:4px}
  .slot-visual i,.slot-visual .bi,.slot-visual .ti{font-size:1.55rem}
  .slot-type{grid-area:type;align-self:end}
  .slot-name{grid-area:name;align-self:start;margin:0;font-size:1rem;line-height:1.25}
  .slot-main:not(.empty) .slot-specs{grid-area:specs;display:block;margin:2px 0 0;font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}
  .slot-main:not(.empty) .slot-side{grid-area:side;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"vendor price" "vendor deliv";align-items:start;gap:1px 10px;width:100%;max-width:none;min-width:0;margin-top:2px;padding-top:8px;border-top:1px dashed var(--line);text-align:left}
  .slot-main:not(.empty) .slot-vendor{grid-area:vendor;align-self:start;text-align:left;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot-main:not(.empty) .slot-price{grid-area:price;justify-self:end;text-align:right;font-size:1rem}
  .slot-main:not(.empty) .slot-deliv{grid-area:deliv;justify-self:end;text-align:right;font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot-main:not(.empty) .slot-side.stale-side{display:grid;align-items:start;gap:1px 10px;width:100%}
  .slot-main:not(.empty) .slot-side.stale-side .slot-vendor{align-self:center}
  .slot-main:not(.empty) .slot-side.stale-side .slot-stale-row{grid-area:price;justify-self:end;display:flex;align-items:center;gap:4px}
  .slot-main.empty{display:flex;align-items:center;gap:12px;padding:14px}
  .slot-main.empty .slot-info{display:block;flex:1;min-width:0}
  .slot-main.empty .slot-visual{flex:0 0 58px;width:58px;height:58px;margin:0;border-radius:14px;background:var(--bg-soft)}
  .slot-main.empty .slot-visual i,.slot-main.empty .slot-visual .bi,.slot-main.empty .slot-visual .ti{font-size:1.4rem}
  .slot-main.empty .slot-type{display:block}
  .slot-main.empty .slot-name{margin:1px 0 0}
  .mini-btn{border-radius:12px}
  .slot-actions{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .slot-actions::-webkit-scrollbar{display:none}
  .slot-actions .mini-btn{flex:0 0 auto;border-radius:12px;padding:9px 12px}
  .slot-actions .mini-lbl{display:inline}
  .slot:has(> .slot-remove) .slot-main{padding-right:48px}
  .slot-remove{top:10px;right:10px;width:32px;height:32px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .pill-row{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pill-row.around{justify-content:flex-start;flex-wrap:nowrap}
  .pill{flex-wrap:nowrap;flex:0 0 auto;width:max-content;max-width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pill button{flex:0 0 auto}
  .pill.tabs.small{max-width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .picker-quick,.picker-morewrap,.usage-tabs,.seg{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .picker-quick>*,.picker-morewrap>*,.usage-tabs>*,.seg>*{flex:0 0 auto}
  .picker-clearbtn{margin-left:8px}
  .picker-morewrap{padding-bottom:2px}
  .pill-row::-webkit-scrollbar,.pill::-webkit-scrollbar,.pill.tabs.small::-webkit-scrollbar,.hero-block .pill-row.around>.pill::-webkit-scrollbar,.picker-quick::-webkit-scrollbar,.picker-morewrap::-webkit-scrollbar,.usage-tabs::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
  .chart-card{position:static;flex:1 1 100%;width:100%;max-width:100%}
  .charts-row{flex-wrap:wrap;overflow:visible}
  #sumChartsPane,#sumPowerPane{max-height:none;overflow:visible;padding-bottom:0}
  #sumChartsPane .chart-card,#sumPowerPane .chart-card{width:100%}
  .modal:has(.wk){height:92dvh;max-height:92dvh}
  #modalBody:has(.wk){display:block;overflow:auto;padding:12px 12px 0;min-height:0;overscroll-behavior:contain}
  #modalBody:has(.wk) .usage-pane{display:block;min-height:0;flex:none;overflow:visible}
  #modalBody:has(.wk) .usage-tabs{position:sticky;top:-12px;z-index:4;width:max-content;max-width:100%;margin-bottom:8px;padding:6px;background:var(--surface);border-radius:var(--radius-pill)}
  #modalBody:has(.wk) .usage-tab{padding:7px 13px;font-size:.78rem}
  #modalBody:has(.wk) .wk{grid-template-columns:30px repeat(7,1fr);gap:2px;grid-auto-rows:minmax(14px,1fr);margin-top:4px}
  #modalBody:has(.wk) .wk-dayh,#modalBody:has(.wk) .wk-hour{font-size:.58rem}
  #modalBody:has(.wk) .day-sq{min-height:14px;border-radius:4px}
  #modalBody:has(.wk) .hint{font-size:.72rem;margin:6px 0}
  #modalBody:has(.wk) .btn-row{position:sticky;bottom:0;z-index:4;margin:8px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
}
@media (max-width:960px) and (min-width:561px){
  .legend.groups{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  #summaryPanel,#pickerPanel,.mobile-scrim,.mt-arrow i,.menutitles,.menutitles .icon-btn{transition:none!important}
  .page-enter,.overlay:not(.hidden),.overlay:not(.hidden) .modal,#aiPopup:not(.hidden),#wAi:not(.hidden),.wrecents .list-row,#pickerFilters:not(.hidden),.alt-list:not(.hidden),.variant-body{animation:none!important}
}
/* ---------- Print / PDF report ---------- */
#printRoot{display:none}
@page{size:A4;margin:14mm}
@media print{
  /* screen chrome that must never appear on paper */
  nav,.pill-row,.slot-actions,.slot-alt-tab,.picker-links,#pickerPanel,.downloads,.footer,.fold-btn,#toast,#modalOverlay,.btn-row,#mobileTotalBar,.mobile-scrim{display:none!important}
  body{background:#fff!important}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important}
  .split{grid-template-columns:1fr}
  .glass{box-shadow:none}
  /* when a report has been built (button or Ctrl+P), print only the report */
  body.printing > *{display:none!important}
  body.printing #printRoot{display:block!important}
  #printRoot{color:#111;font-size:12px;line-height:1.45;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    --bg:#fff;--bg-soft:#f4f6f4;--surface:#fff;--surface-2:#fbfdfb;--ink:#0b1410;--ink-2:#1c2f24;--muted:#5a6b5f;--muted-2:#8a978d;
    --line:rgba(11,20,16,.12);--line-strong:rgba(11,20,16,.2);--brand:#1a8744;--brand-2:#7ed491;--accent:#2fa968;--brand-ink:#0f5c2c;
    --success:#0ca678;--warning:#e8890c;--danger:#e03131;--info:#1971c2;--shadow-sm:none;--shadow-md:none;--shadow-lg:none}
  /* each of the six sections starts on a fresh page */
  #printRoot .pr-sec{break-before:page;page-break-before:always;padding:0 0 8px}
  #printRoot .pr-sec:first-child{break-before:auto;page-break-before:auto}
  #printRoot .pr-h2{font-size:18px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #1a8744}
  #printRoot .pr-h3{font-size:13px;margin:12px 0 6px;display:flex;align-items:center;gap:6px}
  #printRoot .pr-grp-total{margin-left:auto;font-weight:800}
  #printRoot .pr-title{display:flex;align-items:center;gap:10px}
  #printRoot .pr-name{font-size:24px;font-weight:900}
  #printRoot .pr-headrow{display:flex;gap:22px;margin:10px 0 4px;flex-wrap:wrap}
  #printRoot .pr-kv{display:flex;flex-direction:column;gap:2px}
  #printRoot .pr-k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#5a6b5f}
  #printRoot .pr-v{font-size:16px;font-weight:800}
  #printRoot .pr-v.ok{color:#1a8744}#printRoot .pr-v.ko{color:#e03131}
  #printRoot .pr-meta{color:#8a978d;font-size:10px;margin-top:8px}
  /* page 1: hero card (case image + name + budget/totals/gaps) + app menu */
  #printRoot .pr-hero{display:flex;gap:20px;align-items:center;min-height:90mm;border:1px solid #dfe4e0;border-radius:14px;padding:18px 20px;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-hero-img{width:160px;height:160px;object-fit:contain;flex:0 0 auto}
  #printRoot .pr-hero-icon{width:160px;display:flex;justify-content:center;font-size:96px;color:#1a8744}
  #printRoot .pr-hero-main{flex:1;min-width:0}
  #printRoot .pr-hero-name{font-size:30px;font-weight:900;line-height:1.15}
  #printRoot .pr-hero-badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
  #printRoot .pr-badge{font-size:10px;font-weight:800;border:1px solid #cfd6d0;border-radius:999px;padding:2px 9px;color:#0f5c2c;background:#f3f8f4}
  #printRoot .pr-hero-stats,#printRoot .pr-hero-diffs{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
  #printRoot .pr-hero-stats .pr-v{font-size:18px}
  #printRoot .pr-hero-diffs{margin-top:14px}
  #printRoot .pr-hero-diffs{padding-top:8px;border-top:1px dashed #dfe4e0}
  #printRoot .pr-menu{display:flex;gap:16px;align-items:flex-start;margin-top:18px;border-top:2px solid #1a8744;padding-top:12px;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-menu-logo{width:72px;height:72px;border-radius:16px;flex:0 0 auto}
  #printRoot .pr-menu-main{flex:1;min-width:0}
  #printRoot .pr-menu-title{font-size:17px;font-weight:900}
  #printRoot .pr-menu-title a{color:#0f5c2c;text-decoration:underline}
  #printRoot .pr-menu-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;margin:8px 0}
  #printRoot .pr-menu-feat{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
  #printRoot .pr-menu-feat i{color:#1a8744}
  #printRoot .pr-menu-ver{font-size:11px;font-weight:700;color:#5a6b5f;margin:0 0 6px}
  #printRoot .pr-menu-cta{display:inline-block;background:#1a8744;color:#fff;border-radius:999px;padding:6px 16px;text-decoration:none;font-weight:800;font-size:12px}
  /* consumption configuration (usage & pricing grids) */
  #printRoot .pr-usage-grid{display:flex;gap:20px;margin:8px 0 4px;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-usage-grid>div{flex:1;min-width:0}
  #printRoot .pr-usage .wk{grid-template-columns:22px repeat(7,1fr);gap:2px}
  #printRoot .pr-usage .wk-hour,#printRoot .pr-usage .wk-dayh{font-size:6px}
  #printRoot .pr-usage .day-sq{min-height:8px;border-radius:3px}
  #printRoot a{text-decoration:underline}
  /* component cards keep the on-screen look, with real manual / Idealo / merchant links */
  #printRoot .slot{break-inside:avoid;page-break-inside:avoid;border:1px solid #dfe4e0;border-radius:10px;margin:0 0 8px;padding:10px;background:#fff;box-shadow:none}
  #printRoot .slot-actions{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:8px}
  #printRoot .pr-link{display:inline-flex;align-items:center;gap:5px;border:1px solid #cfd6d0;border-radius:8px;padding:3px 9px;color:#0f5c2c;text-decoration:none;font-size:11px;font-weight:700}
  #printRoot .pr-link-off{color:#aaa;border-color:#e8ece8}
  /* never split a card, section, chart, row or total across pages */
  #printRoot .dsec,#printRoot .chart-card,#printRoot .ditem,#printRoot .sum-totals,#printRoot .pro-block,#printRoot .cbar,#printRoot .brief-tile,#printRoot .preset-bars,#printRoot .slot-compat{break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-chart{break-inside:avoid;page-break-inside:avoid;margin:0 0 12px}
  #printRoot .pr-chart-img{width:100%;height:auto;border:1px solid #e3e8e3;border-radius:8px;background:#fff}
  #printRoot .legend{font-size:10px}
  #printRoot .hint{color:#777;font-size:11px}
  #printRoot #openUsageBtn{display:none!important}
  #printRoot h2,#printRoot h3{break-after:avoid;page-break-after:avoid}
  #printRoot p,#printRoot .slot-info,#printRoot .di-txt{orphans:3;widows:3;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-bench h2{display:none}
  /* Idealo partner ad, after the ConfigMaker ad */
  #printRoot .pr-idealo-ad{display:flex;align-items:center;gap:14px;margin-top:12px;border:1px solid #dfe4e0;border-radius:12px;padding:10px 12px;break-inside:avoid;page-break-inside:avoid;background:#fbfdfb}
  #printRoot .pr-idealo-brand{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
  #printRoot .pr-idealo-wordmark{display:inline-block;background:#1a8744;color:#fff;border-radius:6px;padding:2px 8px;font-size:16px;font-weight:900;letter-spacing:-.04em;line-height:1.2}
  #printRoot .pr-idealo-kicker{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#5a6b5f;font-weight:800}
  #printRoot .pr-idealo-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  #printRoot .pr-idealo-copy strong{font-size:13px}
  #printRoot .pr-idealo-copy span{font-size:10px;color:#5a6b5f}
  #printRoot .pr-idealo-ad>a{color:#0f5c2c;font-weight:800;font-size:11px}
  /* horizontal usage brief, under the ads */
  #printRoot .pr-brief{margin-top:12px;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-brief-body{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  #printRoot .pr-brief .brief-tile{min-height:0;padding:7px 5px;border:1px solid #dfe4e0;border-radius:10px;background:#fff;box-shadow:none;gap:3px}
  #printRoot .pr-brief .brief-tile .bt-title{font-size:9px}
  #printRoot .pr-brief .brief-tile .bt-val{font-size:13px}
  #printRoot .pr-brief .brief-tile .bt-sub{font-size:8px}
  #printRoot .pr-brief .hint{grid-column:1/-1;margin:0;font-size:9px}
  /* IObit / daily / pro sections use the same boxes as heavy-load blocks */
  #printRoot .pr-bench .dsec{border:1px solid #dfe4e0;border-radius:12px;padding:10px 11px;margin:0 0 10px;background:#fff;break-inside:avoid;page-break-inside:avoid}
  #printRoot .pr-bench .dsec-head{margin:0 0 6px;padding:0 0 5px;border-bottom:1px solid #e3e8e3;background:none;color:#1c2f24;font-size:11px}
  #printRoot .pr-bench .dsec-dots{margin:0 0 6px}
  #printRoot .pr-bench .bench-grid2,#printRoot .pr-bench .bench-grid3{gap:8px;margin-bottom:8px}
  #printRoot .pr-bench .ditem{padding:3px 0}
  /* tutorials */
  #printRoot .pr-tut-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #printRoot .pr-tut-item{border:1px solid #dfe4e0;border-radius:10px;padding:8px;break-inside:avoid;page-break-inside:avoid;display:flex;flex-direction:column;gap:4px}
  #printRoot .pr-tut-head{display:flex;flex-direction:column;gap:1px;margin-bottom:2px}
  #printRoot .pr-tut-head strong{font-size:11px}
  #printRoot .pr-tut-head span{font-size:9px;color:#5a6b5f}
  #printRoot .pr-tut-item>a{font-size:9px;line-height:1.3;color:#0f5c2c}
  #printRoot .pr-tut-item>a i{color:#c4302b;margin-right:2px}
  #printRoot .pr-tut-playlists{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
  #printRoot .pr-tut-playlists a{display:flex;flex-direction:column;gap:1px;border:1px solid #dfe4e0;border-radius:9px;padding:7px 9px;font-size:10px;color:#0f5c2c}
  #printRoot .pr-tut-playlists a span{font-size:9px;color:#5a6b5f}
}

/* late responsive overrides (new sections are declared after the first media block) */
@media (max-width:760px){
  .ext-nav{display:flex}
  .service-groups{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
  .service-groups::-webkit-scrollbar{display:none}
  .service-group{flex:0 0 86%;scroll-snap-align:start}
  .se-pick-list{grid-template-columns:1fr}
  .se-picker{padding:11px}
  .project-review,.partner-idealo{padding:16px;align-items:flex-start}
  .review-actions{justify-content:flex-start;width:100%}
  .partner-cta{width:100%;align-items:center;justify-content:center}
  .partner-cta .btn{width:100%;justify-content:center}
  .settings-review-actions{width:100%;margin-left:0}
  .settings-review-actions .btn{flex:1;justify-content:center}
  .footer-services{flex-direction:column;gap:8px}
}