/* ==========================================================================
   TopMusic Tools — shared design system
   Every tool page loads this. Never redefine these colours locally.
   ========================================================================== */

@font-face{
  font-family:'Recoleta'; src:url('/assets/fonts/recoleta.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Flama'; src:url('/assets/fonts/flama-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Flama'; src:url('/assets/fonts/flama-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Flama'; src:url('/assets/fonts/flama-900.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --teal:#22BFB2;  --teal-dark:#17998F; --teal-soft:#E7F8F6;
  --navy:#1A185C;  --navy-mid:#2A2775;
  --coral:#EC7660; --coral-soft:#FDEEEB;
  --gold:#E9A93C;

  --ink:#1A185C;   --muted:#6B7280;  --line:#E6E8F0;
  --bg:#F7F9FB;    --card:#FFFFFF;

  --serif:'Recoleta',Georgia,'Times New Roman',serif;
  --sans:'Flama','Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --radius:14px;
  --shadow:0 1px 2px rgba(26,24,92,.04), 0 4px 16px rgba(26,24,92,.06);
  --shadow-hi:0 2px 4px rgba(26,24,92,.06), 0 12px 32px rgba(26,24,92,.12);
  --wrap:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.4px; margin:0}
a{color:var(--teal-dark)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.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}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:13px 27px; border-radius:9px; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:15px; text-decoration:none;
  white-space:nowrap; transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{background:var(--teal); color:#06312D}
.btn-primary:hover{background:#3ED6C7}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.32)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-quiet{background:#fff; color:var(--navy); border:1px solid var(--line)}
.btn-quiet:hover{border-color:var(--teal); color:var(--teal-dark)}

/* ---------- shared chrome: every tool page gets this bar ---------- */
.tm-bar{
  background:var(--navy); color:#fff; position:sticky; top:0; z-index:50;
}
.tm-bar .wrap{display:flex; align-items:center; gap:16px; height:56px}
.tm-bar a{color:#fff; text-decoration:none; font-size:14px; font-weight:700}
.tm-bar .tm-home{display:flex; align-items:center; gap:8px; margin-right:auto; opacity:.95}
.tm-bar .tm-home:hover{opacity:1}
.tm-bar .tm-crumb{color:rgba(255,255,255,.6); font-weight:400}
.tm-bar .tm-cta{
  background:var(--teal); color:#06312D; padding:7px 15px; border-radius:7px; font-size:13.5px;
}
.tm-bar .tm-cta:hover{background:#3ED6C7}

/* ---------- footer ---------- */
.tm-foot-site{
  background:#fff; border-top:1px solid var(--line); margin-top:64px; padding:32px 0;
  font-size:13.5px; color:var(--muted);
}
.tm-foot-site .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between}
.tm-foot-site a{color:var(--muted); text-decoration:none; margin-right:18px}
.tm-foot-site a:hover{color:var(--teal-dark)}

/* ---------- generic tool shell ---------- */
.tool-head{padding:40px 0 8px}
.tool-head h1{font-size:clamp(28px,4vw,40px); line-height:1.15}
.tool-head p{color:var(--muted); font-size:17px; max-width:620px; margin:10px 0 0}
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; margin-top:28px;
}

@media (max-width:640px){
  .wrap{padding:0 18px}
  .tm-bar .tm-crumb{display:none}
}