.ah-love-wrap {
--accent: #ff6a00;
--fg: #fff; --muted:#b8b8b8; --pos:60;
display:block; width:100%;
margin: .5rem 0 .75rem;
border-radius: .5rem; padding: .6rem .7rem .7rem;
background:#1a1a1a; color:var(--fg);
box-shadow:0 6px 22px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
min-height: 65px;
}
.ah-love-header{font-size:.85rem;font-weight:700;letter-spacing:.2px;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.ah-love-control{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}

.ah-love-wrap input[type="range"]{
-webkit-appearance:none;width:100%;height:12px;border-radius:999px;outline:0;cursor:pointer;
background:linear-gradient(currentColor 0 0) 0/0% 100% no-repeat, rgba(255,255,255,.12);
color:var(--accent); transition:filter .2s ease;
}
.ah-love-wrap input[type="range"]:focus{filter: drop-shadow(0 0 6px rgba(255,255,255,.18))}
.ah-love-wrap input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
background:
radial-gradient(circle at 50% 45%, #ff2d55 28%, #c71736 29% 52%, transparent 53%),
radial-gradient(circle at 50% 55%, #ff2d55 28%, #c71736 29% 52%, transparent 53%),
radial-gradient(circle at 50% 50%, #ff2d55 62%, transparent 63%);
border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.ah-love-wrap input[type="range"]::-moz-range-thumb{
width:28px;height:28px;border-radius:50%;background:#ff2d55;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.35)
}

.ah-love-value{font-variant-numeric:tabular-nums;font-weight:700;min-width:3ch;text-align:right}
.ah-love-caption{margin-top:.25rem;font-size:.8rem;color:var(--muted);min-height:1.2rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ah-love-remark{font-weight:600;color:#e7e7e7}

.ah-love-wrap input[type="range"]{background-size:calc(var(--pos)*1%) 100%,100% 100%}

/* Badge */
.ah-love-badge{margin:.6rem auto;padding:.6rem;text-align:center;border-radius:.5rem;background:#1e1e1e;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3);max-width:280px}
.ah-badge-title{font-size:.9rem;font-weight:600}
.ah-badge-score{font-size:1.8rem;margin:.3rem 0;font-weight:700}
.ah-badge-remark{margin-top:.2rem;font-size:.85rem;color:#ddd;display:flex;justify-content:center;align-items:center;gap:.3rem}
.ah-badge-footer{font-size:.75rem;color:#aaa;margin-top:.25rem}

/* Share buttons */
.ah-love-share{margin-top:.6rem;text-align:center}
.ah-share-label{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:.4rem;font-size:.8rem;color:var(--muted)}
.ah-share-text{font-weight:500}
.ah-share-arrow{font-size:.9rem;opacity:.7}
.ah-share-buttons{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap}
.ah-social-btn{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;
text-decoration:none;font-weight:500;font-size:1rem;
transition:all .2s ease;border:none;cursor:pointer;
background:transparent;color:#333;
}
.ah-social-btn:hover{transform:translateY(-2px);opacity:.7}

/* === Soft Burnt-Orange Halloween Theme === */
html.is-halloween-window .ah-love-wrap,
.ah-love-wrap.is-halloween {
  /* Tokens */
  --accent:       #E07A3F;  /* Burnt Orange 500 */
  --accent-tint:  #EEA370;  /* Burnt Orange 300 */
  --wash:         #FFE7D1;  /* Peach 100 */
  --card:         #FFF5EC;  /* Cream 50 */
  --fg:           #2C1A12;  /* Raisin 900 (text) */
  --muted:        #6B4A3A;  /* Cocoa 700 */

  background:
    radial-gradient(120% 120% at 100% 0%, rgba(224,122,63,0.09), transparent 60%),
    radial-gradient(140% 140% at 0% 100%, rgba(122,95,163,0.06), transparent 55%),
    var(--card);
  color: var(--fg);
  border: 1px solid #F2C4A4;                     /* Hairline */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Range track on light card */
html.is-halloween-window .ah-love-wrap input[type="range"],
.ah-love-wrap.is-halloween input[type="range"] {
  color: var(--accent);
  background:
    linear-gradient(currentColor 0 0) 0/0% 100% no-repeat,
    rgba(224,122,63,0.18); /* soft fill rail */
}

/* Focus ring: soft, visible on light bg */
html.is-halloween-window .ah-love-wrap input[type="range"]:focus,
.ah-love-wrap.is-halloween input[type="range"]:focus {
  outline: 2px solid rgba(238,163,112,0.65);   /* Burnt Orange 300 @ 65% */
  outline-offset: 2px;
  filter: drop-shadow(0 0 6px rgba(191,168,230,0.18)); /* Plum halo */
}

/* Heart thumb keeps readable edge on light bg */
html.is-halloween-window .ah-love-wrap input[type="range"]::-webkit-slider-thumb,
.ah-love-wrap.is-halloween input[type="range"]::-webkit-slider-thumb {
  border: 2px solid rgba(224,122,63,0.35);     /* subtle orange edge */
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
html.is-halloween-window .ah-love-wrap input[type="range"]::-moz-range-thumb,
.ah-love-wrap.is-halloween input[type="range"]::-moz-range-thumb {
  border: 2px solid rgba(224,122,63,0.35);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Caption + remark on light card */
html.is-halloween-window .ah-love-wrap .ah-love-caption,
.ah-love-wrap.is-halloween .ah-love-caption { color: var(--muted); }
html.is-halloween-window .ah-love-wrap .ah-love-remark,
.ah-love-wrap.is-halloween .ah-love-remark { color: var(--fg); font-weight: 600; }

/* Badge adopts the same soft card look */
html.is-halloween-window .ah-love-badge,
.ah-love-wrap.is-halloween .ah-love-badge {
  background: linear-gradient(180deg, rgba(255,231,209,0.55), rgba(255,245,236,0.55)), var(--card);
  border: 1px solid #F2C4A4;
  color: var(--fg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
html.is-halloween-window .ah-badge-title,
.ah-love-wrap.is-halloween .ah-badge-title { color: var(--fg); }
html.is-halloween-window .ah-badge-score,
.ah-love-wrap.is-halloween .ah-badge-score { color: #7B3E18; } /* deeper orange ink */
html.is-halloween-window .ah-badge-remark,
.ah-love-wrap.is-halloween .ah-badge-remark { color: var(--fg); }

/* Decorative marker (softer than black theme) */
.ah-love-wrap.is-halloween::after {
  content: "🦇";
  position: absolute; right: 12px; top: -10px; font-size: 18px;
  filter: drop-shadow(0 0 3px rgba(224,122,63,0.20));
}

/* Ensure track fill respects --pos on light bg */
html.is-halloween-window .ah-love-wrap input[type="range"],
.ah-love-wrap.is-halloween input[type="range"] {
  background-size: calc(var(--pos) * 1%) 100%, 100% 100%;
}

@media (max-width:640px){.ah-love-wrap{padding:.5rem .6rem .6rem}}