:root{
  --bg:#f6f7fb; --text:#111; --muted:#6b7280; --card:#ffffff; --accent:#3b82f6;
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --chip:#e5e7eb; --line:#e5e7eb;
}
body.dark{ --bg:#0b0f14; --text:#e5eef9; --muted:#9aa6b2; --card:#0f1720; --accent:#60a5fa; --chip:#1f2937; --line:#202938 }
*{box-sizing:border-box}
body{margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--text); transition: background .4s ease, color .4s ease;}
a{color:inherit}

/* HEADER + LOGO */
header{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 16px; position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(140%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); transition: background .4s ease;}
header .sp{flex:1}
.logo{height:64px; width:auto; display:block; transition: filter .4s ease;}

/* TOGGLE & OUTLINE BUTTONS */
.btn-toggle{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  padding:6px 14px;
  border-radius:8px;
  cursor:pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-toggle.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-outline{
  border:1px dashed var(--line);
  background:transparent;
  color:var(--text);
  padding:6px 14px;
  border-radius:8px;
  cursor:pointer;
}

/* LAYOUT */
.container{max-width:1100px; margin:18px auto 120px; padding:0 16px; display:grid; grid-template-columns:360px 1fr; gap:16px}
@media (max-width:960px){ .container{ grid-template-columns:1fr } }

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 0 rgba(0,0,0,.04); transition: background .4s ease, border-color .4s ease;}
.card .body{padding:14px}
.card h3{margin:0 0 10px; font-size:15px}

.controls{display:grid; gap:10px}

/* Filters panel */
.filters-panel.hidden{ display:none; }

/* Range row grid */
.range-row{
  display:grid;
  grid-template-columns: 100px 1fr 16px 1fr;
  align-items:center;
  column-gap:8px;
}
.range-row label{ min-width:0; }
.range-row input[type="number"]{ width:100%; text-align:right; }
.sep{ text-align:center; color:var(--muted); user-select:none; }

/* Dual-thumb slider */
.slider{
  position: relative;
  margin: 6px 0 12px 100px;
  width: calc(100% - 100px);
  height: 22px;
}
.slider::before{
  content:"";
  position:absolute; left:0; right:0; top:8px; height:6px;
  background: var(--line);
  border-radius: 4px;
}
.slider input[type="range"]{
  -webkit-appearance: none; appearance: none;
  position:absolute; left:0; top:0; width:100%; height:22px;
  background: transparent;
  pointer-events: none; /* track ignores clicks; only thumbs get events */
  z-index: 2;
}
.slider input[type="range"]:not(:last-child)::-webkit-slider-runnable-track{ background: transparent; }
.slider input[type="range"]:not(:last-child)::-moz-range-track{ background: transparent; }
.slider input[type="range"]::-webkit-slider-runnable-track{ height:6px; background: transparent; }
.slider input[type="range"]::-moz-range-track{ height:6px; background: transparent; }
.slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-6px;
  border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
  pointer-events: auto;
}
.slider input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border:none; border-radius:50%; background:var(--accent);
  pointer-events: auto;
}
body.dark .slider::before{ background:#243244; }

/* Stats */
.stats{display:grid; gap:8px}
.bar{height:22px; background:var(--chip); border-radius:999px; position:relative}
.bar>span{position:absolute; top:0; left:0; height:100%; background:var(--accent); border-radius:999px}
.bar label{position:absolute; right:8px; top:0; bottom:0; display:flex; align-items:center; font-weight:600}
body.dark .bar{background:#1f2937}
body.dark .bar>span{background:var(--accent)}

/* Inputs / buttons */
input[type="text"], input[type="number"], button, select{
  border:1px solid color-mix(in oklab, var(--text) 15%, transparent);
  background:var(--card); color:var(--text); padding:10px 12px; border-radius:10px; outline:none;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
button{cursor:pointer}
button.primary{background:var(--accent); color:#fff; border-color:transparent}

/* Suggestions */
.suggest{position:relative}
.suggest-list{position:absolute; left:0; right:0; top:100%; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; z-index:10; max-height:280px; overflow:auto; transition: background .4s ease, border-color .4s ease;}
.suggest-item{display:flex; gap:10px; padding:8px 10px; cursor:pointer; align-items:center}
.suggest-item:hover{background:color-mix(in oklab, var(--accent) 12%, var(--card))}
.suggest-item img{width:44px; height:32px; object-fit:cover; border-radius:6px; background:#ddd}

/* History */
.history{display:grid; gap:12px}
.guess{display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; transition: background .4s ease, border-color .4s ease;}
.guess .row{align-items:flex-start}
.guess img{width:180px; height:auto; border-radius:10px; border:1px solid var(--line); background:#ddd}

.chip{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; background:var(--chip); margin:4px 6px 0 0; font-size:13px; transition: background .4s ease;}
.badge{padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600}

/* Fade */
body.motion .reveal{opacity:0; transform:translateY(6px) scale(.98); transition:opacity .28s ease, transform .28s ease; will-change:opacity,transform;}
body.motion .reveal.on{opacity:1; transform:none;}

/* Footer repeated image */
.footer-banner{
  position:fixed; left:0; right:0; bottom:0; height:80px;
  background-image:url("images/footer-banner.png");
  background-repeat:repeat-x; background-position:bottom left; background-size:auto 80px;
  pointer-events:none; user-select:none; z-index:0; opacity:.95;
  transition:filter .4s ease, opacity .4s ease;
}
body.dark .footer-banner{ filter:invert(1) hue-rotate(180deg) brightness(.9); }

/* Cards & header above banner */
.card, header{position:relative; z-index:5;}

/* Dark mode extras */
body.dark .card{background:#0f1720; border-color:#202938; color:#e5eef9}
body.dark .suggest-list{background:#0f1720; border-color:#202938}
body.dark .suggest-item:hover{background:rgba(96,165,250,.12)}
body.dark .chip{background:#1f2937}
body.dark .guess{border-color:#202938}
body.dark .guess img{border-color:#202938}
body.dark .logo{filter:invert(1) hue-rotate(180deg);}

/* MODAL */
.modal.hidden{ display:none; }
.modal{ position:fixed; inset:0; z-index:40; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); }
.modal-card{
  position:relative; margin:8vh auto 0; max-width:560px; background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal-body{ padding:14px 16px; }
.modal-foot{ padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.icon-btn{ background:transparent; border:1px solid var(--line); border-radius:8px; padding:4px 8px; cursor:pointer; }
.lead{ margin-top:0; }
.steps{ margin:8px 0 0 18px; }