/* =========================
   WooGenerator Landing v3
   - zero horizontal scroll on mobile
   - readable example (no tables)
   - clean SEO-friendly structure
========================= */

:root{
  --bg:#070a0f;
  --bg2:#0b1020;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.58);
  --border:rgba(255,255,255,.10);

  --a:#6ee7ff;
  --b:#a78bfa;
  --c:#34d399;

  --ok:#34d399;
  --shadow: 0 18px 60px rgba(0,0,0,.48);
  --shadow2: 0 14px 34px rgba(0,0,0,.35);

  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;

  --container:1120px;
  --focus: 0 0 0 3px rgba(110,231,255,.26), 0 0 0 1px rgba(110,231,255,.38);

  color-scheme: dark;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden; /* hard stop */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:14px}

/* hard stop for horizontal scroll caused by any child */
main, header, footer, section, .container, .hero-grid, .example, .sheet { max-width: 100%; }
pre, code { max-width: 100%; }

/* Skip link */
.skip{
  position:absolute;left:-999px;top:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  padding:10px 12px;border-radius:12px;
  z-index:9999;
}
.skip:focus{left:16px;outline:none;box-shadow:var(--focus)}

/* =========================
   Background
========================= */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-grid{
  position:absolute;inset:-260px;
  background:
    radial-gradient(circle at 20% 20%, rgba(110,231,255,.10), transparent 46%),
    radial-gradient(circle at 72% 16%, rgba(167,139,250,.12), transparent 52%),
    radial-gradient(circle at 62% 76%, rgba(52,211,153,.07), transparent 56%),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 52px);
  opacity:.52;
}
.bg-glow{
  position:absolute;width:620px;height:620px;border-radius:999px;
  filter:blur(90px);opacity:.20;pointer-events:none
}
.g1{left:-220px;top:120px;background:rgba(110,231,255,.95)}
.g2{right:-220px;top:240px;background:rgba(167,139,250,.95)}
.bg-noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.12;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* =========================
   Header
========================= */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(7,10,15,.68);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:900;letter-spacing:-.4px;
  background:linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.38);
}
.brand-mark-sm{width:38px;height:38px;border-radius:12px}
.brand-txt{min-width:0}
.brand-name{font-weight:950;letter-spacing:-.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:12px;color:var(--muted2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  margin-left:6px;
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.84);
  white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-size:14px;
  color:rgba(255,255,255,.76);
  padding:8px 10px;border-radius:12px;
}
.nav a:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  background:transparent;
  color:inherit;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:12px 16px;border-radius:16px}
.btn-primary{
  background:linear-gradient(135deg, rgba(110,231,255,.20), rgba(167,139,250,.22));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 60px rgba(0,0,0,.30);
}
.btn-primary:hover{
  background:linear-gradient(135deg, rgba(110,231,255,.28), rgba(167,139,250,.30));
  border-color:rgba(255,255,255,.26);
}
.btn-ghost{background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.arr{font-weight:950}

/* Burger / Mobile */
.burger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.burger span{
  display:block;height:2px;width:18px;margin:4px auto;
  background:rgba(255,255,255,.86);
  border-radius:9px;
}

.mobile{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,10,15,.82);
  backdrop-filter:blur(14px);
}
.mobile-inner{
  padding:12px 0 16px;
  display:flex;flex-direction:column;gap:6px;
}
.mobile a{
  padding:12px 10px;border-radius:12px;
  color:rgba(255,255,255,.88);
}
.mobile a:hover{background:rgba(255,255,255,.06)}
.mobile-cta{display:flex;gap:10px;padding:10px 10px 0;flex-wrap:wrap}

/* =========================
   Hero
========================= */
.hero{padding:56px 0 24px}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:start;
}

.eyebrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tag{
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.tag-soft{background:rgba(255,255,255,.04);color:rgba(255,255,255,.80)}
.dot{width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.42)}

.h1{
  margin:0;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-1.1px;
}
.grad{
  background:linear-gradient(90deg,var(--a),var(--b),var(--c));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{
  margin:14px 0 18px;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.7;
  max-width: 62ch;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.hero-bullets{
  margin-top:16px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.hero-bullets .pill{
  font-size:12px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.76);
  font-weight:950;
}

.hero-note{
  margin-top:16px;
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(110,231,255,.08), rgba(167,139,250,.08));
  padding:14px 16px;
  box-shadow:var(--shadow2);
}
.hero-note-title{font-weight:950}
.hero-note-desc{margin-top:6px;color:rgba(255,255,255,.74);line-height:1.65}

/* Right UI card */
.ui-card{
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  overflow:hidden;
  max-width: 100%;
}
.ui-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.ui-lights{display:flex;gap:7px}
.ui-lights span{width:10px;height:10px;border-radius:999px;opacity:.85}
.ui-lights span:nth-child(1){background:#ff5f57}
.ui-lights span:nth-child(2){background:#febc2e}
.ui-lights span:nth-child(3){background:#28c840}
.ui-title{font-weight:950;font-size:13px;color:rgba(255,255,255,.86)}

.ui-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
}
.stat-k{font-size:12px;color:rgba(255,255,255,.66);font-weight:900}
.stat-v{margin-top:2px;font-size:20px;font-weight:950;letter-spacing:-.4px}
.stat-v.ok{color:rgba(52,211,153,.92)}

.ui-block{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
}
.ui-label{font-size:12px;color:rgba(255,255,255,.68);font-weight:900;margin-bottom:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
}

.export{display:flex;gap:8px;flex-wrap:wrap}
.export-pill{
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(52,211,153,.10), rgba(110,231,255,.08));
  color:rgba(255,255,255,.84);
}
.ui-hint{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  padding:10px 12px;
  color:rgba(255,255,255,.74);
  line-height:1.6;
}

.hero-facts{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.fact{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:12px;
}
.fact-k{font-weight:950;font-size:12px;color:rgba(255,255,255,.70)}
.fact-v{margin-top:4px;color:rgba(255,255,255,.78);font-size:13px}

/* =========================
   Sections
========================= */
.section{padding:56px 0}
.section.alt{
  background:rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section-head{
  text-align:center;
  max-width:860px;
  margin:0 auto 24px;
}
.h2{
  margin:0 0 10px;
  font-size:36px;
  letter-spacing:-.7px;
  line-height:1.15;
}
.sub{
  margin:0;
  color:rgba(255,255,255,.74);
  line-height:1.7;
}

/* Cards grid */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}
.card{
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
  padding:16px;
  min-width:0;
}
.ico{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.card h3{margin:10px 0 8px;font-size:16px;font-weight:950}
.card p{margin:0;color:rgba(255,255,255,.72);line-height:1.65}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}
.step{
  display:flex;
  gap:12px;
  padding:16px;
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
}
.step-no{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:950;
  background:linear-gradient(135deg, rgba(110,231,255,.14), rgba(167,139,250,.16));
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.step-title{font-weight:950;margin-bottom:4px}
.step-desc{color:rgba(255,255,255,.74);line-height:1.7}

/* Callout */
.callout{
  margin-top:18px;
  padding:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(110,231,255,.09), rgba(167,139,250,.09));
  box-shadow:var(--shadow2);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.callout-title{font-size:18px;font-weight:950}
.callout-desc{margin-top:6px;color:rgba(255,255,255,.74);line-height:1.65}
.callout-actions{display:flex;gap:10px;flex-wrap:wrap}

/* =========================
   Example (NO TABLES)
========================= */
.example{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}
.example-col{
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
  padding:16px;
  min-width:0;
}
.example-head{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.example-badge{
  width:max-content;
  font-size:12px;
  font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.82);
}
.example-title{font-weight:900;color:rgba(255,255,255,.88);line-height:1.4}

.sheet{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  padding:12px;
  overflow:hidden; /* no sideways scroll */
}
.sheet pre{
  margin:0;
  white-space:pre-wrap;       /* wraps lines */
  word-break:break-word;      /* hard wrap long tokens */
  overflow-wrap:anywhere;
  max-width:100%;
}
.sheet code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color:rgba(255,255,255,.80);
}

.example-foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.mini-tag{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
}
.mini-tag.strong{
  background:linear-gradient(135deg, rgba(52,211,153,.12), rgba(110,231,255,.10));
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.86);
}

.note{
  margin-top:14px;
  border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow2);
  padding:14px 16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.note-ico{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.note-title{font-weight:950}
.note-desc{margin-top:6px;color:rgba(255,255,255,.74);line-height:1.65}

/* =========================
   Pricing
========================= */
.pricing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}
.price{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
  padding:18px;
  min-width:0;
}
.price-strong{
  background:linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.10));
  border-color:rgba(255,255,255,.18);
}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.price-name{font-weight:950;font-size:16px}
.chip{
  font-size:12px;font-weight:950;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.82);
}
.chip-strong{
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.28);
}
.price-main{margin-top:12px}
.price-val{font-size:38px;font-weight:950;letter-spacing:-.9px}
.price-sub{margin-top:2px;color:rgba(255,255,255,.72)}

.list{
  margin:14px 0 16px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:rgba(255,255,255,.76);
}
.list li{display:flex;gap:10px;line-height:1.55}
.list li:before{content:"✓";font-weight:950;color:rgba(52,211,153,.92)}
.center-note{
  margin-top:14px;
  text-align:center;
  color:rgba(255,255,255,.70);
  line-height:1.65;
}

/* =========================
   FAQ
========================= */
.faq{
  max-width:920px;
  margin:20px auto 0;
}
.faq-q{
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
  font-weight:950;
  cursor:pointer;
  margin-top:12px;
}
.faq-q:hover{background:rgba(255,255,255,.06)}
.chev{opacity:.75;transition:transform .18s ease}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{
  display:none;
  padding:12px 16px 2px;
  color:rgba(255,255,255,.74);
  line-height:1.75;
}
.faq-a.open{display:block}

/* =========================
   Contact
========================= */
.contact{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.contact-pills{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.cp{
  font-size:12px;
  font-weight:950;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
}

/* =========================
   Footer
========================= */
.footer{
  padding:26px 0 34px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-title{font-weight:950}
.foot-sub{color:rgba(255,255,255,.62);font-size:12px;margin-top:2px}
.foot-copy{margin-top:12px;color:rgba(255,255,255,.52);font-size:12px}
.foot-right{display:flex;gap:10px;flex-wrap:wrap}
.foot-right a{
  color:rgba(255,255,255,.72);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.foot-right a:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}

/* =========================
   Toast + Noscript
========================= */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:rgba(7,10,15,.86);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  max-width:min(560px,calc(100% - 24px));
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px)}

.noscript{
  margin:18px auto;
  width:min(var(--container),calc(100% - 40px));
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .example{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
}

@media (max-width: 760px){
  .nav{display:none}
  .burger{display:block}
  .container{width:min(var(--container),calc(100% - 28px))}
  .hero{padding:44px 0 18px}
  .h1{font-size:36px}
  .h2{font-size:30px}
}

@media (prefers-reduced-motion: reduce){
  .btn,.toast,.chev{transition:none}
}

/* =========================
   Cookie banner + panel
========================= */
.cookie{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:9999;
  padding:12px;
}
.cookie.show{display:flex}

.cookie-box{
  width:min(980px, 100%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,10,15,.92);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  padding:16px 18px;
}

.cookie-title{font-weight:950;font-size:16px}
.cookie-desc{
  margin-top:6px;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.6;
}
.cookie-desc a{color:rgba(255,255,255,.92);text-decoration:underline}

.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  justify-content:flex-end;
}

.cookie-panel{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:14px;
}

.cookie-panel-title{font-weight:950}
.cookie-panel-sub{margin-top:6px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}

.cookie-prefs{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cookie-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

.cookie-row-left{display:flex;flex-direction:column;gap:4px;min-width:0}
.cookie-row-name{font-weight:950}
.cookie-row-desc{color:rgba(255,255,255,.70);font-size:13px;line-height:1.5}

.cookie-row-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.cookie-row input[type="checkbox"]{
  width:18px;height:18px;
  accent-color: rgba(110,231,255,.95);
}

.cookie-pill{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
}
.cookie-pill.on{
  background:linear-gradient(135deg, rgba(52,211,153,.16), rgba(110,231,255,.10));
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.86);
}

.cookie-panel-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

/* Footer cookie button (optional) */
.foot-cookie{
  background:transparent;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.72);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.foot-cookie:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
}

/* Mobile */
@media (max-width: 640px){
  .cookie-actions{justify-content:stretch}
  .cookie-actions .btn{flex:1}
  .cookie-row{align-items:flex-start}
  .cookie-row-right{align-items:flex-start}
}