:root{
  --h: 198; --h2: 265;
  --sat: 92%; --sat2: 85%;
  --bg: hsl(222 40% 8%);
  --panel: hsl(223 38% 12%);
  --card: hsl(224 34% 14% / .76);
  --text: hsl(220 55% 96%);
  --muted: hsl(222 30% 78%);
  --line: hsl(224 28% 26% / .8);

  --accent: hsl(var(--h) var(--sat) 65%);
  --accent2: hsl(var(--h2) var(--sat2) 70%);
  --good: hsl(158 72% 50%);
  --warn: hsl(42 90% 60%);

  --shadow: 0 18px 50px hsl(222 55% 4% / .55);
  --radius: 18px;
  --radius2: 22px;

  --max: 1120px;
  --pad: clamp(16px, 2.4vw, 26px);
  --gap: clamp(12px, 1.8vw, 18px);
  --focus: 0 0 0 3px hsl(var(--h) 92% 65% / .25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  line-height: 1.55;
  background:
    radial-gradient(1200px 700px at 12% 0%, hsl(var(--h) 92% 60% / .18), transparent 56%),
    radial-gradient(1000px 620px at 88% 8%, hsl(var(--h2) 85% 70% / .16), transparent 60%),
    radial-gradient(900px 520px at 50% 105%, hsl(158 72% 50% / .10), transparent 54%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: var(--pad);}

header{
  position: sticky; top:0; z-index: 60;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  background: hsl(222 40% 8% / .62);
}
.topbar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:160px}
.logo{
  width:40px; height:40px; border-radius:14px; position:relative;
  background: linear-gradient(135deg, hsl(var(--h) 92% 62% / .95), hsl(var(--h2) 85% 70% / .9));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.logo:after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(circle at 28% 25%, rgba(255,255,255,.35), transparent 60%);
  transform: rotate(25deg);
}
.brand-title{display:flex; flex-direction:column; gap:2px; white-space:nowrap}
.brand-title strong{letter-spacing:.14em; font-size:13px}
.brand-title span{color:var(--muted); font-size:12px}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.btn,.pill,.iconbtn,.segbtn{
  border: 1px solid var(--line);
  background: hsl(224 34% 14% / .55);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover,.pill:hover,.iconbtn:hover,.segbtn:hover{
  transform: translateY(-1px);
  background: hsl(224 34% 16% / .78);
  border-color: hsl(var(--h) 92% 65% / .45);
}
.btn:focus,.pill:focus,.iconbtn:focus,.segbtn:focus,input:focus{outline:none; box-shadow:var(--focus)}
.btn.primary{
  border-color: hsl(var(--h) 92% 65% / .6);
  background: linear-gradient(135deg, hsl(var(--h) 92% 65% / .14), hsl(var(--h2) 85% 70% / .12));
}
.btn.ghost{background:transparent}
.iconbtn{padding:10px 12px}
.kbd{
  font-size:11px; color:var(--muted);
  border:1px solid var(--line);
  background:hsl(224 34% 14% / .35);
  padding:2px 8px; border-radius:999px;
}

.seg{
  display:flex; align-items:center;
  border:1px solid var(--line);
  background:hsl(224 34% 14% / .35);
  border-radius:999px; padding:4px; gap:6px;
}
.segbtn{border:0; background:transparent; padding:8px 12px}
.segbtn.active{
  background:hsl(var(--h) 92% 65% / .16);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 92% 65% / .35);
}

.grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--gap);
  align-items:start;
  padding-top: 18px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .brand-title span{display:none}
}

.hero, .aside, section.block{
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.hero{
  background: linear-gradient(180deg, hsl(224 34% 14% / .68), hsl(224 34% 12% / .35));
  padding: clamp(18px, 3vw, 28px);
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 18% 20%, hsl(var(--h) 92% 65% / .22), transparent 55%),
    radial-gradient(circle at 85% 35%, hsl(var(--h2) 85% 70% / .16), transparent 58%);
  transform: rotate(6deg);
  pointer-events:none;
}
.hero > *{position:relative}
.headline{margin:0 0 10px; font-size:clamp(26px, 4.2vw, 46px); line-height:1.08; letter-spacing:-.02em}
.subhead{margin:0 0 16px; color:var(--muted); font-size:16px; max-width:68ch}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

.aside{
  position: sticky; top: 76px;
  background: hsl(224 34% 14% / .45);
  padding: 16px;
}
@media (max-width: 980px){ .aside{position:relative; top:auto} }
.aside h3{margin:0 0 8px; font-size:15px}
.aside p{margin:0 0 12px; color:var(--muted); font-size:14px}

.chips{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pill{justify-content:center; padding:10px 12px}

section.block{
  margin-top: var(--gap);
  background: hsl(224 34% 14% / .45);
  padding: 18px;
}
section.block h2{margin:0 0 10px; font-size:20px}
section.block p{margin:0 0 10px; color:var(--muted)}
.note{
  border-left: 3px solid hsl(var(--h) 92% 65% / .7);
  background: hsl(var(--h) 92% 65% / .07);
  border-radius:14px;
  padding:12px 14px;
  margin-top:12px;
}

.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:12px}
.card{
  grid-column: span 6;
  border:1px solid var(--line);
  background:hsl(224 34% 14% / .40);
  border-radius:var(--radius);
  padding:16px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: hsl(var(--h) 92% 65% / .35);
  background:hsl(224 34% 16% / .45);
}
.card h3{margin:0 0 6px; font-size:16px}
.card ul{margin:10px 0 0 18px; color:var(--muted)}
.card li{margin:6px 0}
@media (max-width: 860px){ .card{grid-column: span 12} }

.footer{
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
}
.links{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.links a{text-decoration:none; border-bottom: 1px dashed hsl(var(--h) 92% 65% / .35)}

/* Theme drawer */
.drawer{
  position: fixed; right: 16px; bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--line);
  background: hsl(224 34% 12% / .85);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 80;
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.drawer.open{opacity:1; transform:translateY(0); pointer-events:auto}
.drawer-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.drawer-header strong{font-size:14px}
.drawer small{color:var(--muted)}
.tone-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px}
.tone{
  height:36px; border-radius:14px;
  border:1px solid var(--line);
  cursor:pointer;
}
.tone.active{box-shadow: inset 0 0 0 2px hsl(var(--h) 92% 65% / .35)}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
.range{width:100%; accent-color: var(--accent)}
textarea.btn{border-radius:18px; white-space:pre; min-height:140px}
code{color: var(--text)}


/* === Kids-friendly color boosts + Market UI === */
body{
  background:
    radial-gradient(800px 500px at 15% 10%, hsl(var(--h) 90% 55% / .22), transparent 60%),
    radial-gradient(700px 480px at 85% 15%, hsl(var(--h2) 85% 62% / .20), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, hsl(158 72% 50% / .14), transparent 60%),
    linear-gradient(180deg, hsl(222 40% 7%), hsl(223 45% 9%));
}
.container:before{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size: 240px 240px, 260px 260px, 280px 280px;
  opacity:.35;
  z-index:-1;
}
.market-controls{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin: 12px 0 14px;
}
.market-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: hsl(224 34% 14% / .65);
}
.tab{
  border:0;
  background:transparent;
  color: var(--muted);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.tab.active{
  color: var(--text);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px hsl(222 55% 4% / .35);
}
.market-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: hsl(224 34% 14% / .65);
}
.badge.free{
  border-color: hsl(158 72% 50% / .55);
  background: hsl(158 72% 50% / .14);
}
.badge.premium{
  border-color: hsl(42 90% 60% / .55);
  background: hsl(42 90% 60% / .16);
}
.market-card{
  position:relative;
  overflow:hidden;
}
.market-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(600px 300px at 0% 0%, hsl(var(--h) 90% 55% / .18), transparent 60%),
              radial-gradient(600px 300px at 100% 0%, hsl(var(--h2) 85% 62% / .14), transparent 60%);
  opacity:.8;
}
.market-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.market-top h3{margin:0; position:relative; z-index:1}
.market-card p, .market-card .tags, .market-card .lockline {position:relative; z-index:1}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.lockline{
  margin-top:8px;
  font-weight:900;
  color: hsl(42 90% 70%);
}
.pill.subtle{
  background: hsl(224 34% 14% / .55);
}


/* === Kid-friendly visuals === */
body.kids-theme{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(255,217,61,.25), transparent 55%),
              radial-gradient(900px 700px at 90% 20%, rgba(96,165,250,.22), transparent 55%),
              radial-gradient(900px 700px at 50% 90%, rgba(34,197,94,.18), transparent 55%),
              linear-gradient(180deg, #070a14, #0b1020);
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:24px;
}
.hero::after{
  content:"";
  position:absolute; inset:-40px -60px;
  background:url("/assets/img/mascot-rocket.svg") no-repeat right 10% bottom 10%;
  background-size: min(420px, 55vw);
  opacity:.95;
  pointer-events:none;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.25));
}
@media(max-width:520px){
  .hero::after{ background-position: center bottom; background-size: 320px; opacity:.9; }
}

.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media(max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .cards{ grid-template-columns:1fr;} }

.market-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.card-media{
  width:100%;
  height:140px;
  border-radius:18px;
  overflow:hidden;
  background: radial-gradient(600px 200px at 20% 20%, rgba(255,255,255,.18), transparent 60%),
              rgba(255,255,255,.06);
  margin-bottom:10px;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.kid-card{
  position:relative;
  overflow:hidden;
}
.kid-card .kid-illu{
  width:100%;
  height:120px;
  border-radius:16px;
  object-fit:cover;
  display:block;
  margin:0 0 10px;
}

.badge.free{ background: rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.35); }
.badge.premium{ background: rgba(255,217,61,.18); border:1px solid rgba(255,217,61,.35); }

.pill.subtle{ background: rgba(96,165,250,.16); border:1px solid rgba(96,165,250,.25); }


.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 6px;
}
.pill-ico{
  width:18px;
  height:18px;
  vertical-align:middle;
  margin-right:8px;
  border-radius:6px;
}