/* ============================================================
   HORSE TONIC PROTOCOL — Palette + base components
   Tokens copied 1:1 from original index-DTpdln3S.css :root
   ============================================================ */
:root{
  --background:225 20% 5%;
  --foreground:40 15% 93%;
  --card:225 16% 9%;
  --card-foreground:40 15% 93%;
  --primary:40 80% 55%;
  --primary-foreground:225 20% 5%;
  --secondary:225 14% 13%;
  --secondary-foreground:40 12% 80%;
  --muted:225 12% 16%;
  --muted-foreground:220 8% 50%;
  --accent:0 72% 50%;
  --accent-foreground:40 20% 95%;
  --destructive:0 84.2% 60.2%;
  --border:225 12% 16%;
  --input:225 14% 15%;
  --ring:40 80% 55%;
  --radius:.875rem;
  --gold:40 80% 55%;
  --gold-light:40 70% 70%;
  --gold-dark:40 85% 40%;
  --red-accent:0 72% 50%;
  --red-glow:0 72% 60%;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}
a{color:inherit}

.font-display{font-family:'Cinzel','Playfair Display',serif;letter-spacing:.02em}
.text-gold-gradient{
  background:linear-gradient(180deg,hsl(var(--gold-light)) 0%,hsl(var(--gold)) 55%,hsl(var(--gold-dark)) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* layout */
.app-shell{min-height:100vh;display:flex;flex-direction:column;padding-bottom:88px}
.container{max-width:32rem;margin:0 auto;padding:0 1.5rem}
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}

/* typography */
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:hsl(var(--primary))}
.eyebrow-muted{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.h1{font-family:'Cinzel','Playfair Display',serif;font-size:1.875rem;font-weight:700;line-height:1.1;letter-spacing:.05em}
.h2{font-family:'Cinzel','Playfair Display',serif;font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:.05em}
.h3{font-size:1.125rem;font-weight:700;color:hsl(var(--foreground))}
.lead{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6}
.tiny{font-size:10px;color:hsl(var(--muted-foreground))}
.tracking-wide{letter-spacing:.15em;text-transform:uppercase}

/* cards */
.card{
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  padding:1.25rem;
}
.card-elevated{box-shadow:0 6px 30px -10px rgba(0,0,0,.6)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:3rem;padding:0 1rem;border-radius:var(--radius);
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.875rem;
  transition:filter .15s ease, background-color .15s ease;
  width:100%;
}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border:1px solid hsl(var(--border))}
.btn-secondary:hover{background:hsl(var(--muted))}
.btn-ghost{background:transparent;color:hsl(var(--muted-foreground))}
.btn-ghost:hover{color:hsl(var(--foreground))}
.btn-red{background:hsl(var(--red-accent));color:#fff}
.btn-red:hover{filter:brightness(1.08)}

/* form */
.input,.select{
  width:100%;height:3rem;
  background:hsl(var(--secondary));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  padding:0 1rem;color:hsl(var(--foreground));
  text-align:center;
}
.input:focus,.select:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring)/.3)}
.input.left{text-align:left}
.label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:hsl(var(--muted-foreground));margin-bottom:.5rem}

/* slider */
.slider{appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:9999px;background:hsl(var(--secondary));outline:none}
.slider::-webkit-slider-runnable-track{height:6px;border-radius:9999px;background:linear-gradient(to right,hsl(var(--primary)) var(--p,50%),hsl(var(--secondary)) var(--p,50%))}
.slider::-moz-range-track{height:6px;border-radius:9999px;background:hsl(var(--secondary))}
.slider::-moz-range-progress{height:6px;border-radius:9999px;background:hsl(var(--primary))}
.slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:hsl(var(--primary));border:2px solid hsl(var(--background));margin-top:-6px;cursor:pointer}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:hsl(var(--primary));border:2px solid hsl(var(--background));cursor:pointer}

/* badges */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.badge-restricted{background:hsl(var(--accent)/.15);color:hsl(var(--red-glow));border:1px solid hsl(var(--accent)/.4)}
.badge-godmode{background:hsl(var(--primary)/.12);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.4)}

/* warning box */
.warning{
  background:linear-gradient(180deg,hsl(0 60% 14% / .8),hsl(0 50% 10% / .6));
  border:1px solid hsl(var(--accent)/.4);
  border-radius:var(--radius);
  padding:1.25rem;
}
.warning .warning-title{display:flex;align-items:center;gap:.5rem;color:hsl(var(--red-glow));font-weight:700;letter-spacing:.15em;font-size:.75rem;text-transform:uppercase;margin-bottom:.5rem}
.warning p{color:hsl(40 15% 80% / .85);font-size:.875rem;line-height:1.55}

/* upsell card */
.upsell{
  background:linear-gradient(180deg,hsl(0 60% 14% / .55),hsl(0 30% 8% / .35));
  border:1px solid hsl(var(--accent)/.55);
  border-radius:var(--radius);
  padding:1.25rem;
  text-align:center;
  box-shadow:0 0 60px -20px hsl(var(--accent)/.4) inset;
}
.upsell .upsell-eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;color:hsl(var(--red-glow));text-transform:uppercase;display:inline-block;border:1px solid hsl(var(--accent)/.5);padding:.375rem .75rem;border-radius:9999px;margin-bottom:1rem}
.upsell img{margin:0 auto;max-width:200px;border-radius:.75rem}
.upsell h3{margin:1rem 0 .75rem;font-size:1.125rem;font-weight:800;color:hsl(var(--foreground))}
.upsell p{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.55;margin-bottom:1rem}
.upsell .tiny{margin-top:.5rem;display:block}

/* dashboard stat row */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1rem}
.stat-row .stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.stat-row .stat .num{font-size:1.25rem;font-weight:800;color:hsl(var(--primary))}
.stat-row .stat .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:hsl(var(--muted-foreground))}

/* card grid */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.card-link{
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:1rem;text-align:left;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .15s ease, transform .15s ease;
}
.card-link:hover{border-color:hsl(var(--primary)/.5);transform:translateY(-1px)}
.card-link h3{font-size:1rem;color:hsl(var(--foreground))}
.card-link p{font-size:.75rem;color:hsl(var(--muted-foreground))}

/* ingredient card */
.ing-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.ing-head{display:flex;align-items:center;justify-content:space-between}
.ing-head h3{font-size:1rem;color:hsl(var(--foreground))}
.ing-dose{font-size:1rem;font-weight:800;color:hsl(var(--primary));letter-spacing:.05em}
.ing-meta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ing-meta div{background:hsl(var(--secondary));border-radius:.5rem;padding:.5rem .75rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
.ing-meta strong{display:block;color:hsl(var(--foreground));font-weight:600;font-size:.8125rem;margin-top:.125rem}
.ing-card p.what{font-size:.875rem;color:hsl(var(--secondary-foreground));line-height:1.55}
.ing-card .where{background:hsl(var(--muted)/.4);border-left:2px solid hsl(var(--primary));padding:.5rem .75rem;border-radius:.25rem;font-size:.75rem;color:hsl(var(--muted-foreground))}

/* steps */
.steps{display:flex;flex-direction:column;gap:.75rem}
.step{display:flex;gap:.75rem;align-items:flex-start}
.step .n{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:9999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.875rem}
.step p{font-size:.875rem;color:hsl(var(--secondary-foreground));line-height:1.55}

/* comparison table */
.compare{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.compare .head{display:grid;grid-template-columns:1.2fr 1fr 1fr;background:hsl(var(--secondary));padding:.75rem 1rem;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.compare .head .ef{color:hsl(var(--red-glow));font-weight:700}
.compare .row{display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:.75rem 1rem;font-size:.8125rem;border-top:1px solid hsl(var(--border));align-items:center}
.compare .row .label{font-weight:600;color:hsl(var(--foreground));text-transform:none;letter-spacing:0;margin:0}
.compare .row .manual{color:hsl(var(--muted-foreground))}
.compare .row .ef{color:hsl(var(--red-glow));display:flex;align-items:center;gap:.25rem;font-weight:600}
.compare .foot{padding:1rem;border-top:1px solid hsl(var(--border));text-align:center}
.compare .foot p{font-size:.8125rem;color:hsl(var(--muted-foreground));margin-bottom:.75rem;font-style:italic}

/* accordion */
.acc{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.acc + .acc{margin-top:.5rem}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:.5rem;width:100%;padding:1rem 1.25rem;text-align:left;font-weight:600;font-size:.9375rem;color:hsl(var(--foreground))}
.acc-q .chev{transition:transform .2s ease;color:hsl(var(--muted-foreground))}
.acc.open .acc-q .chev{transform:rotate(180deg)}
.acc-a{padding:0 1.25rem 1rem;font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6;display:none}
.acc.open .acc-a{display:block}

/* freq buttons */
.freq{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.freq button{height:2.75rem;border:1px solid hsl(var(--border));border-radius:.75rem;background:hsl(var(--secondary));color:hsl(var(--muted-foreground));font-size:.875rem;font-weight:600}
.freq button.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}

/* selects (height) */
.height-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.select-wrap{position:relative}
.select-wrap select{appearance:none;padding-right:2rem}
.select-wrap .arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:hsl(var(--muted-foreground))}

/* bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:hsl(var(--card)/.95);backdrop-filter:blur(10px);border-top:1px solid hsl(var(--border));z-index:50}
.bottom-nav .inner{max-width:32rem;margin:0 auto;display:flex;justify-content:space-around;padding:.5rem .5rem}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 0;color:hsl(var(--muted-foreground));font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.bottom-nav button.active{color:hsl(var(--primary))}
.bottom-nav svg{width:20px;height:20px}

/* progress bar (processing) */
.progress{width:100%;height:6px;background:hsl(var(--secondary));border-radius:9999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,hsl(var(--gold-dark)),hsl(var(--gold)),hsl(var(--gold-light)));transition:width .4s ease}

/* calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.cal-grid .dow{font-size:10px;text-align:center;color:hsl(var(--muted-foreground));padding:.25rem 0;letter-spacing:.1em}
.cal-grid button{aspect-ratio:1;border-radius:.5rem;background:hsl(var(--secondary));color:hsl(var(--muted-foreground));font-size:.875rem;font-weight:500}
.cal-grid button.today{border:1px solid hsl(var(--primary));color:hsl(var(--primary))}
.cal-grid button.done{background:hsl(var(--primary)/.2);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.6)}
.cal-grid button.rest{opacity:.4}

/* cycle bar */
.cycle-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin:.5rem 0}
.cycle-bar div{height:.625rem;border-radius:9999px;background:hsl(var(--secondary))}
.cycle-bar div.active{background:hsl(var(--primary))}
.cycle-bar div.rest{background:hsl(var(--muted))}

/* milestones */
.milestones{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.milestone{background:hsl(var(--secondary));border-radius:.75rem;padding:.875rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:.55}
.milestone.unlocked{opacity:1;border:1px solid hsl(var(--primary)/.5)}
.milestone .ico{font-size:1.25rem}
.milestone .name{font-size:.75rem;letter-spacing:.05em;color:hsl(var(--muted-foreground));text-transform:uppercase}

/* testimonials */
.testimonials{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;margin:0 -1.5rem;padding:0 1.5rem .5rem}
.testimonials::-webkit-scrollbar{display:none}
.testimonial{scroll-snap-align:start;flex-shrink:0;width:85%;max-width:320px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.testimonial .stars{color:hsl(var(--primary));font-size:.875rem}
.testimonial p{font-size:.8125rem;color:hsl(var(--secondary-foreground));line-height:1.55;font-style:italic}
.testimonial .name{font-size:.8125rem;font-weight:600;color:hsl(var(--foreground))}
.testimonial .tag{font-size:.6875rem;color:hsl(var(--red-glow));background:hsl(var(--accent)/.15);border-radius:.25rem;padding:.25rem .5rem;display:inline-block;align-self:flex-start}

/* timeline */
.timeline-section{display:flex;flex-direction:column;gap:.75rem}
.timeline-section .week-title{font-family:'Cinzel',serif;color:hsl(var(--primary));letter-spacing:.1em;font-size:1.25rem}
.tl-col{padding:1rem;border-radius:var(--radius);border:1px solid hsl(var(--border))}
.tl-col.manual{background:hsl(var(--card));}
.tl-col.ef{background:linear-gradient(180deg,hsl(0 50% 12% / .35),hsl(0 30% 8% / .25));border-color:hsl(var(--accent)/.4)}
.tl-col .col-head{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.75rem}
.tl-col.manual .col-head{color:hsl(var(--primary))}
.tl-col.ef .col-head{color:hsl(var(--red-glow))}
.tl-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.tl-col li{display:flex;gap:.5rem;font-size:.8125rem;color:hsl(var(--secondary-foreground));line-height:1.55}
.tl-col li::before{content:"";flex-shrink:0;margin-top:.5rem;width:.375rem;height:.375rem;border-radius:50%;background:currentColor;color:hsl(var(--primary))}
.tl-col.ef li::before{color:hsl(var(--red-glow))}
.tl-col .tag{margin-top:.75rem;font-style:italic;font-size:.75rem;color:hsl(var(--muted-foreground))}

/* science / faq sections */
.sec{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.sec h3{font-size:.9375rem;color:hsl(var(--primary));letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.sec p{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6}

/* misc */
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-sm{display:flex;flex-direction:column;gap:.5rem}
.stack-lg{display:flex;flex-direction:column;gap:1.5rem}
.row{display:flex;align-items:center;gap:.5rem}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.text-center{text-align:center}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.muted{color:hsl(var(--muted-foreground))}
.primary{color:hsl(var(--primary))}
.red{color:hsl(var(--red-glow))}
.hidden{display:none !important}

/* page header */
.page-head{padding:1.25rem 0 1rem;display:flex;flex-direction:column;gap:.5rem;text-align:center}
.page-head h1{font-family:'Cinzel',serif;font-size:1.5rem;color:hsl(var(--primary));letter-spacing:.1em}
.page-head p{font-size:.75rem;color:hsl(var(--muted-foreground));letter-spacing:.1em;text-transform:uppercase}

.back-btn{display:inline-flex;align-items:center;gap:.375rem;color:hsl(var(--muted-foreground));font-size:.8125rem;padding:1rem 0}
.back-btn:hover{color:hsl(var(--foreground))}