:root{
  --bg:#0b0c10;
  --card:#12141c;
  --muted:#8a90a2;
  --text:#e9ecf5;
  --line:#1f2330;
  --accent:#7c5cff;
  --good:#2dd4bf;
  --warn:#fbbf24;
}

*{box-sizing:border-box}
/* min-height (not height) on body: html stays a fixed 100% so short pages
   still fill the viewport, but body must be free to grow taller than one
   screen with its content — with a fixed height:100%, anything past one
   viewport (which this page always has) overflows the box, and body's own
   padding-bottom (reserved for the sticky ad) ends up rendered mid-page
   instead of after the real last element. That's what let the sticky ad
   cover the footer. */
html{height:100%}
body{
  min-height:100%;
  margin:0;
  background:radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.22), transparent 60%),
             radial-gradient(900px 450px at 90% 10%, rgba(45,212,191,.14), transparent 55%),
             var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.5;
  /* Reserves room at the very bottom of the page so the fixed sticky ad
     never sits on top of the footer. --sticky-ad-space is measured live in
     app.js from the ad's actual rendered height (it changes once a real
     AdSense unit fills the placeholder, and on mobile line-wraps), with this
     120px as a same-ballpark fallback before JS runs / if it's ever absent. */
  padding-bottom:calc(var(--sticky-ad-space, 120px) + 14px);
}

.wrap{max-width:1100px;margin:0 auto;padding:18px 16px}

.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(11,12,16,.65);
  backdrop-filter: blur(8px);
  position:sticky;top:0;z-index:10;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.brand{display:flex;gap:12px;align-items:center}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(124,92,255,.15);border:1px solid rgba(124,92,255,.25);font-size:22px}
.brand-name{font-weight:750;letter-spacing:.2px}
.brand-tag{color:var(--muted);font-size:13px;margin-top:2px}

.lang-select-wrap{flex:0 0 auto}
.lang-select{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:30px;
}
.lang-select:hover{border-color:rgba(124,92,255,.45)}
.lang-select:focus{outline:none;box-shadow:0 0 0 4px rgba(124,92,255,.18)}

/* Right-to-left languages (Arabic): move the dropdown's chevron to the
   leading (left) edge instead of the trailing edge. */
html[dir="rtl"] .lang-select{
  padding-right:12px;
  padding-left:30px;
  background-position:16px center, 11px center;
}

.hero h1{font-size:34px;line-height:1.15;margin:18px 0 10px}
.hero p{color:#c8cde0;max-width:68ch;margin:0 0 18px}

.app-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:18px;overflow:hidden}

.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.panel{padding:16px;border-right:1px solid var(--line)}
.panel:last-child{border-right:none}
.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px}
.panel h2{margin:0;font-size:16px}
.hint{color:var(--muted);font-size:12.5px}

.dropzone{
  position:relative;
  border:1px dashed rgba(124,92,255,.45);
  border-radius:14px;
  background:rgba(124,92,255,.06);
  min-height:280px;
  padding:14px;
  cursor:pointer;
  outline:none;
}
.dropzone:focus{box-shadow:0 0 0 4px rgba(124,92,255,.18)}
.dropzone.dragover{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.6)}

#fileInput{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}

.dz-inner{display:flex;gap:12px;align-items:center;justify-content:center;height:100%}
.dz-icon{font-size:26px;opacity:.9}
.dz-title{font-weight:700}
.dz-sub{color:var(--muted);font-size:13px;margin-top:2px}

/* Audio preview: replaces the image <preview> element used by the other
   sibling sites. A small canvas draws a static waveform (computed once from
   the decoded PCM data — cheap, purely cosmetic) above the native <audio>
   player so the user gets both a visual and a way to actually listen back. */
.audio-preview-wrap{
  display:none;
  width:100%;
  min-height:280px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  padding:16px;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:14px;
}
.waveform{
  width:100%;
  height:120px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
}
.audio-preview{width:100%}

.status-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
.status{font-size:13px;color:var(--muted)}
.status.good{color:var(--good)}
.status.warn{color:var(--warn)}

.btn{
  background:linear-gradient(180deg, rgba(124,92,255,.95), rgba(124,92,255,.75));
  color:white;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(124,92,255,.20);
}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.cf-turnstile{margin-top:12px}

.privacy{margin-top:10px;font-size:12.5px;color:#b8bdd1}

.results{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  min-height:340px;
  max-height:420px;
  overflow:auto;
  background:rgba(0,0,0,.14);
}

.results-empty .big{font-weight:800;font-size:16px;margin-bottom:6px}
.results-empty .small{color:var(--muted);font-size:13px;margin-bottom:12px}
.tips{color:#c7cbe0;margin:0;padding-left:18px}

.reading h3{margin:18px 0 8px;font-size:14px;color:#dfe3f4}
.reading p{margin:0 0 10px;color:#cbd0e6}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#dfe3f4;background:rgba(45,212,191,.10);border:1px solid rgba(45,212,191,.20);padding:6px 10px;border-radius:999px;margin:4px 0 10px}

.badges-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{font-size:11.5px;color:#dfe3f4;background:rgba(124,92,255,.10);border:1px solid rgba(124,92,255,.22);padding:5px 9px;border-radius:999px}

/* Trait score bars — eight 0-10 acoustic trait scores rendered as small
   horizontal bars under the reading. Unlike the sibling sites, these numbers
   are computed directly from the audio signal in the browser (real DSP), not
   generated by the AI model — the AI only writes the narrative around them. */
.trait-scores{margin:6px 0 16px}
.trait-row{display:grid;grid-template-columns:120px 1fr 28px;align-items:center;gap:10px;margin:7px 0}
.trait-name{font-size:12.5px;color:#c7cbe0}
.trait-track{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.trait-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(124,92,255,.85), rgba(45,212,191,.85))}
.trait-value{font-size:12px;color:var(--muted);text-align:right}

/* Recording-quality mini meter + warning list. */
.quality-box{margin:6px 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.quality-score-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#c7cbe0}
.quality-warnings{margin:8px 0 0;padding-left:18px;color:var(--warn);font-size:12.5px}

.ad-slot{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.03)}
.ad-label{font-size:11px;color:var(--muted);padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.ad-box{display:grid;place-items:center;min-height:90px;padding:14px;color:#cdd2e7}

.ad-top{margin-top:14px}
.ad-top .ad-box{min-height:110px}

.inline-ad-wrap{padding:0 16px 18px}
.ad-inline .ad-box{min-height:260px}

.ad-sticky{
  position:fixed;left:12px;right:12px;bottom:10px;
  max-width:1100px;margin:0 auto;
  z-index:30;
}
.ad-sticky .ad-box{min-height:70px}

.seo{margin-top:18px}
.seo h2{margin:22px 0 10px;font-size:20px}
.seo p{color:#cbd0e6;max-width:80ch}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
.seo-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:14px}
.seo-card h3{margin:0 0 6px;font-size:14px}
.seo-card p{margin:0;color:#cbd0e6;font-size:13.5px}

details{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:10px 0}
summary{cursor:pointer;font-weight:700}

.footer-note{margin-top:18px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}

.site-footer{margin-top:36px;border-top:1px solid var(--line);padding:20px 16px 32px}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#c8cde0;text-decoration:none;font-size:13.5px}
.footer-links a:hover{color:var(--text);text-decoration:underline}
.footer-copy{color:var(--muted);font-size:12.5px}

.legal{max-width:760px;margin:0 auto;padding:26px 0 20px}
.legal h1{font-size:28px;margin:6px 0 14px}
.legal h2{font-size:17px;margin:26px 0 8px;color:#dfe3f4}
.legal .lede{color:#c8cde0;font-size:16px;max-width:65ch}
.legal p{color:#cbd0e6;margin:0 0 14px}
.legal ul{color:#cbd0e6;padding-left:20px;margin:0 0 14px}
.legal a{color:var(--accent)}
.legal .updated{color:var(--muted);font-size:13px;margin-bottom:20px}

@media (max-width: 900px){
  .footer-inner{flex-direction:column;align-items:flex-start}
  .app-grid{grid-template-columns:1fr}
  .panel{border-right:none;border-bottom:1px solid var(--line)}
  .panel:last-child{border-bottom:none}
  .hero h1{font-size:28px}
  .seo-grid{grid-template-columns:1fr}
  .ad-sticky{left:10px;right:10px}
}