*,*::before,*::after{box-sizing:border-box}
  :root{
    --ember:#E4572E; --ember-strong:#C4431D; --ember-tint:#FBE3D9;
    --glacier:#1D7A8C; --glacier-strong:#145A68; --glacier-tint:#DCEEF1;
    --ink:#1B1F23; --ink-soft:#5B6460; --ink-faint:#8A928D;
    --ground:#F4F5F1; --surface:#FFFFFF; --surface-2:#ECEEE8; --border:#DFE2DA;
    --positive:#2F8F5B; --positive-tint:#E1F3E8;
    --radius-l:16px; --radius-m:12px; --radius-s:8px;
    --shadow: 0 1px 2px rgba(27,31,35,.06), 0 6px 20px rgba(27,31,35,.06);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ember:#FF8A5C; --ember-strong:#FFA57D; --ember-tint:#3A2419;
      --glacier:#5BC7DC; --glacier-strong:#7FD6E7; --glacier-tint:#12333A;
      --ink:#EEF0EC; --ink-soft:#AAB2AC; --ink-faint:#727972;
      --ground:#14181A; --surface:#1C2123; --surface-2:#252B2C; --border:#33393A;
      --positive:#4FBE84; --positive-tint:#15342390;
      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ember:#FF8A5C; --ember-strong:#FFA57D; --ember-tint:#3A2419;
    --glacier:#5BC7DC; --glacier-strong:#7FD6E7; --glacier-tint:#12333A;
    --ink:#EEF0EC; --ink-soft:#AAB2AC; --ink-faint:#727972;
    --ground:#14181A; --surface:#1C2123; --surface-2:#252B2C; --border:#33393A;
    --positive:#4FBE84; --positive-tint:#15342390;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
  h1,h2,h3,.brand-mark,.card-title,.section-title{ font-family:"Bricolage Grotesque",system-ui,sans-serif; text-wrap:balance; }
  .num{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
  a{color:inherit}
  button{ font:inherit; color:inherit; }
  input,select,textarea{ font:inherit; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:9px 11px; }
  input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{ outline:2px solid var(--glacier); outline-offset:2px; }
  .visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .topbar{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
  .topbar-inner{ max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:10px; }
  @media (min-width:760px){ .topbar-inner{ gap:16px; } }
  .brand{ display:flex; align-items:baseline; gap:2px; text-decoration:none; margin-right:auto; }
  .brand-mark{ font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
  .brand-accent{ color:var(--ember); }
  .brand-tld{ font-size:.95rem; color:var(--ink-faint); font-weight:600; }
  .tagline{ display:none; font-size:.78rem; color:var(--ink-faint); margin-left:10px; padding-left:10px; border-left:1px solid var(--border); }
  @media (min-width:760px){ .tagline{display:inline} }

  .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; }
  .icon-btn:hover{ background:var(--surface-2); }
  .lang-switch{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
  .lang-switch button{ padding:6px 10px; background:var(--surface); border:0; cursor:pointer; font-size:.76rem; font-weight:700; letter-spacing:.02em; }
  .lang-switch button+button{ border-left:1px solid var(--border); }
  .lang-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--ground); }

  .profile-chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:5px 12px 5px 6px; cursor:pointer; max-width:130px; }
  .profile-chip span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (min-width:760px){ .profile-chip{ max-width:none; } }
  .avatar{ width:24px;height:24px;border-radius:999px; background:linear-gradient(135deg,var(--ember),var(--glacier)); display:flex;align-items:center;justify-content:center; font-size:.7rem; font-weight:800; color:#fff; }
  .btn{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:9px 16px; font-weight:700; font-size:.9rem; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
  .btn-primary{ background:var(--ember); color:#fff; }
  .btn-primary:hover{ background:var(--ember-strong); }
  .btn-ghost{ background:transparent; border-color:var(--border); }
  .btn-ghost:hover{ background:var(--surface-2); }
  .btn-glacier{ background:var(--glacier); color:#fff; }
  .btn-glacier:hover{ background:var(--glacier-strong); }
  .btn-small{ padding:6px 12px; font-size:.8rem; }
  .btn[disabled]{ opacity:.5; cursor:not-allowed; }
  @media (max-width:480px){ .btn-label{ display:none; } }

  .banner{ max-width:1180px; margin:12px auto 0; padding:0 20px; }
  .banner-inner{ background:var(--glacier-tint); color:var(--glacier-strong); border:1px solid var(--glacier); border-radius:var(--radius-m); padding:10px 14px; font-size:.85rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .banner-inner.warn{ background:var(--ember-tint); color:var(--ember-strong); border-color:var(--ember); }
  .banner-inner input{ flex:1; min-width:140px; }

  .toast-wrap{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
  .toast{ background:var(--ink); color:var(--ground); padding:10px 18px; border-radius:999px; font-size:.85rem; font-weight:600; box-shadow:var(--shadow); animation:toastin .18s ease; }
  @keyframes toastin{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

  .container{ max-width:1180px; margin:0 auto; padding:20px; }
  .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
  .chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:14px; scrollbar-width:thin; }
  .chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:.85rem; font-weight:600; }
  .chip[aria-pressed="true"]{ background:var(--ink); color:var(--ground); border-color:var(--ink); }
  .toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .toolbar .search{ flex:1 1 220px; }
  .toggle-field{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }

  .layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
  @media (min-width:920px){ .layout{ grid-template-columns:minmax(0,1fr) 300px; } }
  .feed{ display:flex; flex-direction:column; gap:14px; min-width:0; }
  .sidebar{ display:flex; flex-direction:column; gap:16px; }
  .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:16px; }
  .section-title{ font-size:.95rem; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:6px; }
  .rank-row{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:.86rem; }
  .rank-num{ width:18px; color:var(--ink-faint); font-weight:700; }
  .rank-name{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rank-pts{ color:var(--ink-faint); }
  .trend-row{ display:block; padding:7px 0; border-top:1px solid var(--border); font-size:.83rem; cursor:pointer; }
  .trend-row:first-of-type{ border-top:0; }
  .trend-title{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .trend-temp{ color:var(--ember); font-weight:700; }

  .deal-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); display:flex; gap:14px; padding:14px; border-left:4px solid var(--border); }
  .deal-card.heat-hot{ border-left-color:var(--ember); }
  .deal-card.heat-cold{ border-left-color:var(--glacier); }
  .deal-card.is-expired{ opacity:.6; }
  .vote-col{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 46px; }
  .vote-btn{ width:34px; height:30px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface-2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.9rem; line-height:1; }
  .vote-btn[aria-pressed="true"].up{ background:var(--ember); border-color:var(--ember); color:#fff; }
  .vote-btn[aria-pressed="true"].down{ background:var(--glacier); border-color:var(--glacier); color:#fff; }
  .temp{ font-weight:700; font-size:.86rem; padding:2px 0; }
  .temp.hot{ color:var(--ember); } .temp.cold{ color:var(--glacier); } .temp.neutral{ color:var(--ink-faint); }

  .deal-main{ flex:1; min-width:0; }
  .deal-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
  .tag{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); }
  .tag.ship{ background:var(--positive-tint); color:var(--positive); }
  .tag.expiry{ background:var(--ember-tint); color:var(--ember-strong); }
  .card-title{ font-size:1.02rem; font-weight:700; margin:0 0 6px; line-height:1.3; cursor:pointer; }
  .card-title:hover{ color:var(--ember); }
  .price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .price-now{ font-size:1.2rem; font-weight:700; }
  .price-old{ color:var(--ink-faint); text-decoration:line-through; font-size:.86rem; }
  .price-off{ background:var(--ember); color:#fff; font-weight:700; font-size:.72rem; padding:2px 7px; border-radius:6px; }
  .merch-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:.82rem; color:var(--ink-soft); }
  .meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-faint); }
  .meta-row button{ background:none; border:0; padding:0; cursor:pointer; color:inherit; font-size:inherit; display:inline-flex; gap:4px; align-items:center; }
  .meta-row button:hover{ color:var(--ink); }

  .detail{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .detail p{ margin:0 0 12px; color:var(--ink-soft); white-space:pre-wrap; }
  .comments{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
  .comment{ display:flex; gap:8px; }
  .comment-body{ flex:1; background:var(--surface-2); border-radius:var(--radius-m); padding:8px 12px; }
  .comment-head{ display:flex; gap:8px; align-items:baseline; margin-bottom:2px; }
  .comment-author{ font-weight:700; font-size:.82rem; }
  .comment-time{ font-size:.72rem; color:var(--ink-faint); }
  .comment-text{ font-size:.85rem; }
  .comment-form{ display:flex; gap:8px; }
  .comment-form input{ flex:1; }
  .empty-state{ text-align:center; padding:48px 20px; color:var(--ink-faint); }

  .modal-overlay{ position:fixed; inset:0; background:rgba(20,22,20,.5); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:60; overflow-y:auto; }
  .modal{ background:var(--surface); border-radius:var(--radius-l); max-width:520px; width:100%; padding:22px; box-shadow:var(--shadow); }
  .modal h2{ margin:0 0 4px; font-size:1.15rem; }
  .modal .sub{ color:var(--ink-faint); font-size:.84rem; margin:0 0 16px; }
  .field{ margin-bottom:13px; }
  .field label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:5px; }
  .field input,.field select,.field textarea{ width:100%; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .field-hint{ font-size:.72rem; color:var(--ink-faint); margin-top:4px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  .checkline{ display:flex; align-items:center; gap:8px; font-size:.86rem; }
  .checkline input{ width:auto; padding:0; }

  footer{ max-width:1180px; margin:30px auto 40px; padding:20px; color:var(--ink-faint); font-size:.78rem; text-align:center; border-top:1px solid var(--border); }