/* ============================
   PillGuide — Polished Styles
   ============================ */
:root{
  --bg1:#0f1023;
  --bg2:#141a33;
  --brand1:#7aa2ff;
  --brand2:#b25cff;
  --ok:#67f0a8;
  --warn:#ffb86b;
  --danger:#ff6b88;
  --text:#f6f8ff;
  --muted:#b9c1ff;
  --card:rgba(16,22,46,.6);
  --ring:rgba(122,162,255,.45);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --radius:18px;
  --speed:.25s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 10% -10%, #1b2350 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 10%, #2a1b57 0%, transparent 55%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

.container{max-width:980px; margin:0 auto; padding:28px}
header, footer{opacity:.9}
header h1{margin:0 0 6px; font-size:2.15rem; letter-spacing:.3px}
.tagline{margin:0; color:var(--muted)}
footer{margin-top:20px; color:var(--muted); font-size:.92rem}

/* hero */
.hero{
  position:relative; overflow:hidden; border-radius:calc(var(--radius) + 6px);
  padding:36px; margin:18px 0 26px;
  background:linear-gradient(145deg, rgba(122,162,255,.18), rgba(178,92,255,.18));
  backdrop-filter: blur(8px); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.08);
}
.hero h2{margin:0 0 10px; font-size:1.8rem}
.hero p{margin:0 0 16px; color:var(--muted)}
.hero .media{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.hero img{
  width:260px; max-width:100%; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.35);
  transform:translateY(0); transition:transform var(--speed) ease;
}
.hero img:hover{ transform: translateY(-6px) }

.steps{display:flex; gap:14px; flex-wrap:wrap; padding-left:18px; margin:0}
.steps li{margin:.2rem 0}

/* cards */
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  border-color: rgba(122,162,255,.3);
}
.card h2, .card h3, .card h4{margin-top:0}

/* focus ring when focusing a card or inputs */
.focusable:focus{ outline:2px solid transparent; box-shadow:0 0 0 6px var(--ring) }

/* buttons / links */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:0; cursor:pointer; text-decoration:none; font-weight:700; letter-spacing:.2px;
  padding:12px 18px; border-radius:14px; color:#0b1020;
  background: linear-gradient(135deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 26px rgba(122,162,255,.35), inset 0 -1px 0 rgba(255,255,255,.25);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, filter var(--speed) ease;
}
.btn:hover{ transform:translateY(-2px); filter:saturate(1.1); box-shadow:0 16px 34px rgba(122,162,255,.45) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.3) }

.link{ color:var(--brand1); text-decoration:none; border-bottom:1px dashed transparent; transition:border-color var(--speed) }
.link:hover{ border-color:var(--brand1) }

/* uploader */
.uploader{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px }
.file input{ display:none }
.file span{
  display:inline-block; padding:14px 16px; border-radius:12px; cursor:pointer; color:var(--text);
  border:1.5px dashed rgba(122,162,255,.5); background:rgba(255,255,255,.03);
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
}
.file span:hover{ background:rgba(122,162,255,.07); border-color:var(--brand1); transform:translateY(-1px) }

/* subtle hover pop */
.bounce-hover{ transition:transform .18s ease }
.bounce-hover:hover{ transform: translateY(-2px) }

/* drag & drop */
.dropzone{
  display:none; margin-top:12px; padding:16px; text-align:center; border-radius:12px;
  border:2px dashed rgba(122,162,255,.5); color:var(--muted); background:rgba(122,162,255,.07);
  transition: border-color var(--speed), background var(--speed);
}
.dropzone.active{ display:block; border-color:var(--brand1); background:rgba(122,162,255,.12) }

/* image preview */
.preview img{ max-width:100%; border-radius:16px; margin-top:14px; border:1px solid rgba(255,255,255,.09) }

/* chips */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(122,162,255,.18); color:var(--text); border:1px solid rgba(122,162,255,.35); font-size:.88rem;
}

/* results layout */
.status{ margin-top:10px; color:var(--muted) }
.result-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px }
@media (max-width:900px){ .result-grid{ grid-template-columns:1fr } }

.facts p{ margin:.35rem 0 }
.warnbox{
  margin-top:12px; padding:12px 14px; border-radius:12px; background:rgba(255,107,136,.12);
  border:1px solid rgba(255,107,136,.35)
}

/* busy pulse */
.is-busy{ animation:pulse 1s ease-in-out infinite alternate }
@keyframes pulse{ from{filter:brightness(1); transform:translateY(0)} to{filter:brightness(1.1); transform:translateY(-1px)} }

/* utility */
.hidden{display:none}
/* === Simple Play / Stop Buttons === */
#ttsPlay, #ttsStop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.7em 1.3em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--speed) ease;
  margin-right: 0.6em;
}

/* Play = blue-purple gradient */
#ttsPlay {
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #0b1020;
  box-shadow: 0 8px 20px rgba(122,162,255,.35);
}
#ttsPlay:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(122,162,255,.45);
}

/* Stop = red gradient */
#ttsStop {
  background: linear-gradient(135deg, #ff6b88, #ff3b5e);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255,107,136,.35);
}
#ttsStop:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,107,136,.5);
}

/* Status text */
#tts-status {
  display: inline-block;
  margin-left: 0.8em;
  color: var(--muted);
  font-size: 0.95rem;
}