.cmp-hero{padding-block:var(--s10) var(--s9);text-align:center}
.cmp-hero h1{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.025em}
.cmp-hero p{color:var(--fg-2);font-size:var(--fs-lg);margin-top:var(--s4)}
.cmp-tools{display:flex;justify-content:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s8)}
.switch{display:inline-flex;align-items:center;gap:var(--s4);cursor:pointer;font-size:var(--fs-sm);background:#fff;border-radius:var(--r-pill);padding:var(--s3) var(--s8) var(--s3) var(--s3);min-height:40px;box-shadow:var(--shadow)}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:var(--r-pill);background:#d2d2d7;position:relative;cursor:pointer;margin:0;transition:background var(--t)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--t) var(--ease)}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:disabled{opacity:.5;cursor:not-allowed}
.cmp-tools .btn-clear{background:#fff;color:var(--fg);box-shadow:var(--shadow);min-height:40px;font-size:var(--fs-sm)}
.cmp-tools .btn-clear:hover{color:var(--err)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.4vw,28px)}
.slot{background:#fff;border-radius:var(--r-lg);padding:var(--s9) var(--s8);display:grid;justify-items:center;text-align:center;gap:var(--s4);position:relative;min-width:0;align-content:start}
.slot .pick{width:100%;min-height:40px;border-radius:12px;border:1px solid #d2d2d7;background:#fff;padding:0 var(--s5);font-size:var(--fs-sm);color:var(--fg);text-overflow:ellipsis}
.slot .pick:focus-visible{border-color:var(--action)}
.slot .img{width:100%;max-width:220px;aspect-ratio:1;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:var(--media)}
.slot .img:has(img.shot){background:#fff}
.slot .img img{width:100%;height:100%;object-fit:cover}
.slot .img img.shot{object-fit:contain;mix-blend-mode:multiply}
.slot .img .fb svg{width:84%}
.slot .nm{min-height:2.5em;font-size:var(--fs-lg);font-weight:600;line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slot .nm a{color:var(--fg);text-decoration:none}
.slot .nm a:hover{color:var(--action)}
.slot .pr{font-size:var(--fs-md)}
.slot .pr s{color:var(--fg-2);font-size:var(--fs-xs);display:block}
.slot .btn{min-height:40px;font-size:var(--fs-sm)}
.slot .rm{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:0;background:#f5f5f7;color:var(--fg-2);cursor:pointer;display:grid;place-items:center;transition:background var(--t),color var(--t)}
.slot .rm:hover{background:#e8e8ed;color:var(--fg)}
.slot.empty{border:2px dashed #d2d2d7;background:transparent;min-height:100%;align-content:center}
.slot.empty .plus{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--action);box-shadow:var(--shadow)}
.slot.empty p{font-size:var(--fs-sm);color:var(--fg-2)}
.stick{position:sticky;top:calc(env(safe-area-inset-top,0px) + 53px);z-index:6;background:var(--head);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t) var(--ease);margin-top:-1px}
.stick.show{opacity:1;transform:none;pointer-events:auto}
.stick .cols{padding-block:var(--s5)}
.stick .mini{display:flex;align-items:center;gap:var(--s4);min-width:0}
.stick .mini span{font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stick .mini b{font-size:var(--fs-xs);font-weight:500;color:var(--fg-2);white-space:nowrap}
.stick .mini i{width:32px;height:32px;flex:none;border-radius:8px;background:#fff;overflow:hidden;display:grid;place-items:center}
.stick .mini i img{width:100%;height:100%;object-fit:contain}
.stick .mini i svg{width:30px}
.spec{margin-top:var(--s10);display:grid;gap:var(--s9)}
.grp{background:#fff;border-radius:var(--r-lg);padding:var(--s9) clamp(14px,2.6vw,32px)}
.grp h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s4)}
.row{padding-block:var(--s8);border-top:1px solid var(--line)}
.grp h2+.row{border-top:0}
.row h3{font-size:var(--fs-xs);font-weight:500;color:var(--fg-2);letter-spacing:0;margin-bottom:var(--s4)}
.row .cols{align-items:start}
.v{font-size:var(--fs-md);line-height:1.4;overflow-wrap:anywhere;min-width:0}
.v.na{color:#a1a1a6}
.v .best{display:inline-block;margin-top:var(--s2);font-size:var(--fs-xs);font-weight:600;color:var(--ok);background:#eaf6ec;border-radius:6px;padding:1px 7px}
.row.same .v{color:var(--fg-2)}
.row[hidden]{display:none}
.no-diff{background:#fff;border-radius:var(--r-card);padding:var(--s9);text-align:center;color:var(--fg-2)}
.cmp-empty{background:#fff;border-radius:var(--r-lg);padding:var(--s10) var(--s9);text-align:center;display:grid;gap:var(--s8);justify-items:center;margin-top:var(--s9)}
.cmp-empty h2{font-size:var(--fs-2xl)}
.cmp-empty p{color:var(--fg-2);max-width:52ch}
.combos{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}
.combos a{background:#f5f5f7;border-radius:var(--r-pill);padding:var(--s4) var(--s8);color:var(--fg);text-decoration:none;font-size:var(--fs-sm);font-weight:500;transition:background var(--t)}
.combos a:hover{background:#e8e8ed;color:var(--action)}
@media (max-width:640px){
  .slot{padding:var(--s8) var(--s3) var(--s6);border-radius:var(--r-card)}
  .slot .nm{font-size:var(--fs-sm)}
  .slot .pr{font-size:var(--fs-sm)}
  .slot .btn{padding:0 var(--s4);width:100%;font-size:var(--fs-xs)}
  .slot .pick{font-size:var(--fs-xs);padding:0 var(--s2)}
  .slot .rm{top:4px;right:4px;width:28px;height:28px}
  .v{font-size:var(--fs-sm)}
  .stick .mini i,.stick .mini b{display:none}
  .stick .mini span{font-size:var(--fs-xs);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}