/* =========================================================
   ViralSky — night-sky navy + electric cyan/violet creator tool
   ========================================================= */

:root{
  --bg:        #070912;
  --bg-2:      #0b0f1f;
  --panel:     rgba(20,26,48,.55);
  --panel-2:   rgba(28,34,62,.6);
  --stroke:    rgba(120,140,220,.16);
  --stroke-2:  rgba(140,160,255,.28);
  --ink:       #eef1ff;
  --ink-dim:   #a6adcf;
  --ink-faint: #6b7299;

  --cyan:   #22e3ff;
  --violet: #a55bff;
  --pink:   #ff4d8d;
  --lime:   #7dffb0;
  --amber:  #ffcf5c;

  --grad:    linear-gradient(120deg, var(--cyan), var(--violet));
  --grad-hot:linear-gradient(120deg, #2ee9ff, #a55bff 55%, #ff4d8d);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  --glow-c: 0 0 0 1px rgba(34,227,255,.4), 0 0 32px -4px rgba(34,227,255,.45);

  --sans: "General Sans","Space Grotesk", system-ui, sans-serif;
  --display: "Clash Display","Space Grotesk", system-ui, sans-serif;

  --side: 264px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(165,91,255,.4); color:#fff; }

/* ---------- aurora background ---------- */
.aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(165,91,255,.18), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(34,227,255,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.aurora__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen; }
.aurora__blob--1{ width:520px;height:520px; left:-120px; top:-100px;
  background:radial-gradient(circle, var(--cyan), transparent 65%); animation:float1 22s ease-in-out infinite; }
.aurora__blob--2{ width:560px;height:560px; right:-160px; top:8%;
  background:radial-gradient(circle, var(--violet), transparent 65%); animation:float2 26s ease-in-out infinite; }
.aurora__blob--3{ width:480px;height:480px; left:30%; bottom:-180px;
  background:radial-gradient(circle, var(--pink), transparent 65%); animation:float3 30s ease-in-out infinite; opacity:.35; }
.aurora__grid{ position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(120,140,220,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,220,.05) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 80%);
}
@keyframes float1{ 50%{ transform:translate(80px,60px) scale(1.1);} }
@keyframes float2{ 50%{ transform:translate(-70px,50px) scale(1.08);} }
@keyframes float3{ 50%{ transform:translate(40px,-50px) scale(1.12);} }

/* ---------- layout ---------- */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:var(--side); z-index:30;
  display:flex; flex-direction:column; gap:8px; padding:22px 18px;
  background:linear-gradient(180deg, rgba(13,17,33,.92), rgba(9,12,24,.92));
  border-right:1px solid var(--stroke);
  backdrop-filter:blur(18px);
}
.main{
  position:absolute; inset:0 0 0 var(--side); z-index:10;
  overflow-y:auto; padding:34px clamp(20px,4vw,52px) 80px;
}
.main::-webkit-scrollbar{ width:10px; }
.main::-webkit-scrollbar-thumb{ background:rgba(120,140,220,.22); border-radius:20px; border:3px solid transparent; background-clip:content-box; }

/* ---------- brand ---------- */
.brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.brand__mark{ display:grid; place-items:center; width:42px;height:42px; border-radius:13px;
  background:rgba(34,227,255,.08); border:1px solid var(--stroke-2);
  box-shadow:0 0 24px -6px rgba(34,227,255,.5); }
.brand__mark svg path{ filter:drop-shadow(0 0 6px rgba(165,91,255,.6)); }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:.2px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand__tag{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- nav ---------- */
.nav{ display:flex; flex-direction:column; gap:4px; }
.nav__item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 13px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; color:var(--ink-dim); font-size:14.5px; font-weight:500;
  text-align:left; transition:.18s; position:relative;
}
.nav__item .ico{ width:19px;height:19px; }
.nav__item:hover{ color:var(--ink); background:rgba(120,140,220,.08); }
.nav__item.is-active{ color:#fff; background:rgba(34,227,255,.1); border-color:var(--stroke-2);
  box-shadow:inset 0 0 0 1px rgba(34,227,255,.1), 0 0 22px -8px rgba(34,227,255,.5); }
.nav__item.is-active::before{ content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--grad); }
.nav__badge{ margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--grad); color:#06121a; }

.sidebar__foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px; }
.streak-card{ padding:14px; border-radius:var(--r-md); border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(165,91,255,.12), rgba(34,227,255,.08)); }
.streak-card__top{ display:flex; align-items:baseline; gap:8px; }
.streak-card__flame{ font-size:20px; }
.streak-card__num{ font-family:var(--display); font-weight:700; font-size:26px; color:#fff; }
.streak-card__label{ margin:4px 0 9px; font-size:11.5px; color:var(--ink-dim); }
.streak-card__bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.streak-card__bar span{ display:block; height:100%; background:var(--grad-hot); border-radius:6px; }

.user{ display:flex; align-items:center; gap:11px; padding:8px; border-radius:var(--r-sm); }
.user__avatar{ width:38px;height:38px; border-radius:11px; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:#06121a; background:var(--grad); }
.user__meta{ display:flex; flex-direction:column; line-height:1.25; }
.user__name{ font-weight:600; font-size:13.5px; }
.user__plan{ font-size:11px; color:var(--cyan); }

/* mobile menu */
.menu-toggle{ position:fixed; top:16px; right:16px; z-index:40; display:none;
  width:46px;height:46px; border-radius:13px; border:1px solid var(--stroke-2);
  background:rgba(13,17,33,.8); backdrop-filter:blur(12px); }
.menu-toggle svg{ width:22px;height:22px; stroke:var(--ink); stroke-width:2; fill:none; }

/* ---------- views ---------- */
.view{ display:none; max-width:1180px; margin:0 auto; animation:viewIn .4s ease; }
.view.is-active{ display:block; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; border-radius:var(--r-lg); padding:42px 40px; margin-bottom:26px;
  overflow:hidden; border:1px solid var(--stroke-2);
  background:linear-gradient(135deg, rgba(34,227,255,.1), rgba(165,91,255,.1));
  isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, rgba(34,227,255,.18), rgba(165,91,255,.16), rgba(255,77,141,.14), rgba(34,227,255,.18));
  background-size:300% 300%; animation:gradShift 11s ease infinite; opacity:.9; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.4;
  background:radial-gradient(420px 220px at 88% 10%, rgba(255,255,255,.18), transparent 60%); }
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.hero__eyebrow,.page-head .hero__eyebrow{ display:inline-block; font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  padding:5px 11px; border-radius:99px; background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); }
.hero__title{ font-family:var(--display); font-weight:600; font-size:clamp(30px,4.4vw,50px);
  line-height:1.02; margin:16px 0 12px; letter-spacing:-.5px; }
.hero__sub{ max-width:560px; color:var(--ink-dim); font-size:15.5px; line-height:1.55; margin:0; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.page-head__title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px);
  margin:14px 0 6px; letter-spacing:-.4px; }
.page-head__sub{ margin:0; color:var(--ink-dim); font-size:14.5px; }

/* ---------- panel ---------- */
.panel{ background:var(--panel); border:1px solid var(--stroke); border-radius:var(--r-lg);
  backdrop-filter:blur(16px); box-shadow:var(--shadow); }

/* ---------- composer ---------- */
.composer{ display:grid; grid-template-columns:minmax(360px,420px) 1fr; gap:24px; align-items:start; }
.composer__form{ padding:26px; display:flex; flex-direction:column; gap:22px; position:sticky; top:8px; }

.field{ display:flex; flex-direction:column; gap:10px; }
.field__label{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

.platforms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.platform{ display:flex; flex-direction:column; gap:2px; padding:11px 10px; border-radius:var(--r-sm);
  border:1px solid var(--stroke); background:rgba(120,140,220,.05); color:var(--ink-dim);
  text-align:left; transition:.16s; }
.platform__glyph{ font-size:18px; line-height:1; }
.platform__name{ font-weight:600; font-size:13px; color:var(--ink); }
.platform__hint{ font-size:10px; color:var(--ink-faint); }
.platform:hover{ border-color:var(--stroke-2); transform:translateY(-1px); }
.platform.is-on{ border-color:transparent; background:rgba(34,227,255,.12);
  box-shadow:inset 0 0 0 1.5px rgba(34,227,255,.5), 0 0 22px -8px rgba(34,227,255,.6); }
.platform.is-on .platform__name{ color:#fff; }

.input{ width:100%; padding:13px 15px; border-radius:var(--r-sm); font-size:15px;
  background:rgba(8,11,22,.6); border:1px solid var(--stroke); color:var(--ink); transition:.16s; }
.input::placeholder{ color:var(--ink-faint); }
.input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,227,255,.16); }
.input--area{ resize:vertical; line-height:1.5; font-family:inherit; }

.chips,.topicSuggestions{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-size:12px; padding:6px 11px; border-radius:99px; color:var(--ink-dim);
  background:rgba(120,140,220,.07); border:1px solid var(--stroke); transition:.15s; }
.chip:hover{ color:#fff; border-color:var(--stroke-2); background:rgba(34,227,255,.1); }

.tones{ display:flex; flex-wrap:wrap; gap:8px; }
.tone{ font-size:13px; font-weight:500; padding:9px 13px; border-radius:99px; color:var(--ink-dim);
  background:rgba(120,140,220,.06); border:1px solid var(--stroke); transition:.16s; }
.tone:hover{ color:#fff; border-color:var(--stroke-2); }
.tone.is-on{ color:#06121a; font-weight:600; background:var(--grad); border-color:transparent;
  box-shadow:0 0 22px -8px rgba(165,91,255,.7); }

.btn-generate{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; border:none; border-radius:14px; font-size:15.5px; font-weight:600; color:#06121a;
  background:var(--grad-hot); box-shadow:0 14px 40px -12px rgba(34,227,255,.7); transition:.2s; }
.btn-generate .ico{ width:20px;height:20px; }
.btn-generate:hover{ transform:translateY(-2px); box-shadow:0 18px 48px -12px rgba(165,91,255,.8); }
.btn-generate:active{ transform:translateY(0); }
.btn-generate:disabled{ opacity:.85; cursor:wait; }
.btn-generate__glow{ position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-130%); }
.btn-generate.is-loading .btn-generate__glow{ animation:sweep 1s linear infinite; }
@keyframes sweep{ to{ transform:translateX(130%);} }
.btn-generate--sm{ padding:11px 18px; font-size:14px; box-shadow:none; }

.ico{ width:20px;height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- output / empty / thinking ---------- */
.composer__output{ min-height:420px; }
.empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:60px 30px; border:1px dashed var(--stroke-2); border-radius:var(--r-lg);
  background:rgba(120,140,220,.03); }
.empty--full{ min-height:50vh; justify-content:center; }
.empty h3{ font-family:var(--display); font-weight:600; font-size:20px; margin:8px 0 0; }
.empty p{ color:var(--ink-dim); max-width:340px; margin:0; font-size:14px; line-height:1.55; }
.empty__orb{ width:74px;height:74px; border-radius:50%; background:var(--grad);
  box-shadow:0 0 50px -6px rgba(34,227,255,.7); animation:pulse 2.6s ease-in-out infinite; }
.empty .btn-ghost{ margin-top:8px; }
@keyframes pulse{ 50%{ transform:scale(.86); opacity:.7; } }

.thinking{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:80px 20px; }
.thinking__orb{ position:relative; width:90px;height:90px; }
.thinking__orb span{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent;
  border-top-color:var(--cyan); border-right-color:var(--violet); animation:spin 1.1s linear infinite; }
.thinking__orb span:nth-child(2){ inset:12px; animation-duration:1.5s; animation-direction:reverse;
  border-top-color:var(--pink); border-right-color:var(--cyan); }
.thinking__orb span:nth-child(3){ inset:26px; animation-duration:.9s;
  border-top-color:var(--violet); border-right-color:var(--pink); }
@keyframes spin{ to{ transform:rotate(360deg);} }
.thinking__step{ font-size:14.5px; color:var(--ink-dim); font-weight:500; }
.thinking__rail{ width:220px; height:5px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.thinking__rail i{ display:block; height:100%; width:40%; border-radius:5px; background:var(--grad-hot);
  animation:rail 1.4s ease-in-out infinite; }
@keyframes rail{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} }

/* ---------- variant cards ---------- */
.variants{ display:flex; flex-direction:column; gap:16px; }
.variant{ padding:22px; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:var(--panel); backdrop-filter:blur(16px); box-shadow:var(--shadow);
  opacity:0; transform:translateY(14px); animation:cardIn .5s ease forwards; position:relative; overflow:hidden; }
.variant::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-hot); opacity:.85; }
@keyframes cardIn{ to{ opacity:1; transform:none; } }
.variant__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.variant__plat{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-dim);
  letter-spacing:.04em; text-transform:uppercase; }
.variant__glyph{ display:grid; place-items:center; width:30px;height:30px; border-radius:9px; font-size:15px;
  background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); color:var(--cyan); }
.variant__hook{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.25; margin:0 0 12px;
  cursor:pointer; transition:.15s; }
.variant__hook:hover{ color:var(--cyan); }
.variant__caption{ color:var(--ink-dim); font-size:14px; line-height:1.6; margin:0 0 12px; white-space:normal; }
.variant__tags{ color:var(--cyan); font-size:13px; font-weight:500; margin:0 0 10px; }
.variant__trend{ margin-left:8px; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:600;
  letter-spacing:.02em; text-transform:none; color:#ffd27a; background:rgba(255,178,60,.12);
  border:1px solid rgba(255,178,60,.3); }
.variant__meta{ display:flex; justify-content:flex-end; margin:0 0 14px; }
.variant__chars{ font-size:11.5px; font-weight:500; color:var(--ink-dim); letter-spacing:.02em; }

/* gauge */
.gauge{ position:relative; width:64px;height:64px; flex:none; }
.gauge svg{ width:64px;height:64px; }
.gauge__track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:6; }
.gauge__fill{ fill:none; stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.gauge--high .gauge__fill{ stroke:var(--lime); }
.gauge--mid  .gauge__fill{ stroke:var(--cyan); }
.gauge--low  .gauge__fill{ stroke:var(--amber); }
.gauge__num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.gauge__num b{ font-family:var(--display); font-size:18px; }
.gauge__num span{ font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }

/* factor bars */
.factors{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px;
  padding:14px; border-radius:var(--r-md); background:rgba(8,11,22,.4); border:1px solid var(--stroke); }
.factor{ display:grid; grid-template-columns:110px 1fr 26px; align-items:center; gap:10px; }
.factor__name{ font-size:11.5px; color:var(--ink-dim); }
.factor__bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.factor__bar i{ display:block; height:100%; border-radius:6px; background:var(--grad); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.factor__val{ font-size:11.5px; font-weight:600; color:var(--ink); text-align:right; }

.variant__actions{ display:flex; gap:10px; }
.vbtn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600;
  border:1px solid var(--stroke-2); background:rgba(120,140,220,.06); color:var(--ink); transition:.16s; }
.vbtn .ico{ width:17px;height:17px; }
.vbtn:hover{ background:rgba(120,140,220,.12); transform:translateY(-1px); }
.vbtn--primary{ border-color:transparent; color:#06121a; background:var(--grad); }
.vbtn--primary:hover{ box-shadow:0 0 22px -8px rgba(34,227,255,.7); }
.vbtn.is-saved{ background:rgba(125,255,176,.16); color:var(--lime); border-color:rgba(125,255,176,.4); }

/* ---------- hooks library ---------- */
.search{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:99px;
  background:rgba(8,11,22,.6); border:1px solid var(--stroke); min-width:240px; }
.search .ico{ width:18px;height:18px; color:var(--ink-faint); }
.search input{ background:none; border:none; outline:none; color:var(--ink); font-size:14px; width:100%; font-family:inherit; }
.search input::placeholder{ color:var(--ink-faint); }

.cat-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.cat{ font-size:13px; font-weight:500; padding:8px 15px; border-radius:99px; color:var(--ink-dim);
  background:rgba(120,140,220,.06); border:1px solid var(--stroke); transition:.16s; }
.cat:hover{ color:#fff; border-color:var(--stroke-2); }
.cat.is-on{ color:#06121a; font-weight:600; background:var(--grad); border-color:transparent; }

.hooks-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.hook{ display:flex; flex-direction:column; gap:13px; padding:20px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--stroke); backdrop-filter:blur(14px); transition:.18s; }
.hook:hover{ transform:translateY(-3px); border-color:var(--stroke-2); box-shadow:var(--shadow); }
.hook__top{ display:flex; align-items:center; justify-content:space-between; }
.hook__cat{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);
  padding:4px 9px; border-radius:99px; background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); }
.star{ background:none; border:none; padding:2px; line-height:0; }
.star svg{ width:21px;height:21px; fill:none; stroke:var(--ink-faint); stroke-width:1.6; transition:.16s; }
.star:hover svg{ stroke:var(--amber); transform:scale(1.12); }
.hook.is-fav .star svg{ fill:var(--amber); stroke:var(--amber); filter:drop-shadow(0 0 8px rgba(255,207,92,.6)); }
.hook__text{ font-family:var(--display); font-weight:500; font-size:16px; line-height:1.32; margin:0; flex:1; }
.hook__actions{ display:flex; gap:8px; }
.hook__copy{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px;
  border-radius:var(--r-sm); font-size:12.5px; font-weight:600; color:var(--ink-dim);
  background:rgba(120,140,220,.06); border:1px solid var(--stroke); transition:.16s; }
.hook__copy .ico{ width:15px;height:15px; }
.hook__copy:hover{ color:#fff; background:rgba(34,227,255,.1); border-color:var(--stroke-2); }
.hook__use:hover{ color:#fff; background:rgba(165,91,255,.12); border-color:rgba(165,91,255,.4); }

/* ---------- trending ---------- */
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:600; color:var(--ink); background:rgba(120,140,220,.07); border:1px solid var(--stroke-2); transition:.16s; }
.btn-ghost .ico{ width:17px;height:17px; }
.btn-ghost:hover{ background:rgba(120,140,220,.14); transform:translateY(-1px); }

.trend-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trend-panel{ padding:22px; }
.trend-panel__title{ font-family:var(--display); font-weight:600; font-size:18px; margin:0 0 16px; }
.trend{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  padding:13px; border-radius:var(--r-md); transition:.15s; }
.trend:hover{ background:rgba(120,140,220,.06); }
.trend + .trend{ margin-top:2px; }
.trend__name{ font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:7px; }
.trend__sub{ font-size:12px; color:var(--ink-faint); margin:3px 0 8px; }
.trend__delta{ font-size:10px; }
.trend__delta.up{ color:var(--lime); }
.trend__delta.down{ color:var(--pink); }
.trend__bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.trend__bar i{ display:block; height:100%; border-radius:6px; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.trend__bar--high{ background:var(--lime); }
.trend__bar--mid{ background:var(--grad); }
.trend__bar--low{ background:var(--amber); }
.trend__score{ font-family:var(--display); font-weight:700; font-size:20px; display:flex; flex-direction:column; align-items:center; line-height:1; }
.trend__score span{ font-family:var(--sans); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }

/* ---------- drafts ---------- */
.drafts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.draft{ display:flex; flex-direction:column; gap:11px; padding:20px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--stroke); backdrop-filter:blur(14px); transition:.18s; }
.draft:hover{ transform:translateY(-3px); border-color:var(--stroke-2); box-shadow:var(--shadow); }
.draft__top{ display:flex; align-items:center; justify-content:space-between; }
.draft__plat{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.05em; }
.draft__glyph{ display:grid; place-items:center; width:26px;height:26px; border-radius:8px; font-size:13px;
  background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); color:var(--cyan); }
.draft__score{ font-family:var(--display); font-weight:700; font-size:16px; padding:3px 10px; border-radius:99px; }
.draft__score--high{ color:var(--lime); background:rgba(125,255,176,.12); }
.draft__score--mid{ color:var(--cyan); background:rgba(34,227,255,.12); }
.draft__score--low{ color:var(--amber); background:rgba(255,207,92,.12); }
.draft__hook{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3; margin:0; }
.draft__caption{ color:var(--ink-dim); font-size:13px; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.draft__tags{ color:var(--cyan); font-size:12px; margin:0; }
.draft__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
.draft__time{ font-size:11.5px; color:var(--ink-faint); }
.draft__actions{ display:flex; gap:6px; }
.iconbtn{ display:grid; place-items:center; width:34px;height:34px; border-radius:9px;
  background:rgba(120,140,220,.07); border:1px solid var(--stroke); color:var(--ink-dim); transition:.15s; }
.iconbtn .ico{ width:16px;height:16px; }
.iconbtn:hover{ color:#fff; background:rgba(34,227,255,.12); border-color:var(--stroke-2); }
.iconbtn--danger:hover{ color:var(--pink); background:rgba(255,77,141,.12); border-color:rgba(255,77,141,.4); }
.trend__use{ width:34px;height:34px; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.is-open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(4,6,14,.7); backdrop-filter:blur(6px); animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal__card{ position:relative; width:min(560px,100%); padding:26px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(22,28,52,.96), rgba(12,16,32,.96));
  border:1px solid var(--stroke-2); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;
  animation:modalIn .3s cubic-bezier(.2,.9,.3,1); max-height:90vh; overflow:auto; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(20px) scale(.97);} }
.modal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal__head h3{ font-family:var(--display); font-weight:600; font-size:21px; margin:0; }
.modal__x{ width:34px;height:34px; border-radius:9px; border:1px solid var(--stroke); background:rgba(120,140,220,.07);
  color:var(--ink-dim); font-size:22px; line-height:1; }
.modal__x:hover{ color:#fff; }
.modal__card .field__label{ margin-top:10px; }
.modal__foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:11px; padding:12px 18px; border-radius:99px;
  background:rgba(18,23,44,.95); border:1px solid var(--stroke-2); color:var(--ink); font-size:14px; font-weight:500;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.8); backdrop-filter:blur(12px);
  opacity:0; transform:translateY(16px) scale(.96); transition:.3s cubic-bezier(.2,.9,.3,1); }
.toast.is-in{ opacity:1; transform:none; }
.toast__dot{ width:8px;height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.toast--warn .toast__dot{ background:var(--amber); box-shadow:0 0 10px var(--amber); }

/* ---------- user account menu ---------- */
.user{ position:relative; cursor:pointer; transition:.15s; }
.user:hover{ background:rgba(120,140,220,.08); }
.user__chev{ width:16px;height:16px; margin-left:auto; color:var(--ink-faint); transition:.2s; }
.user.is-open .user__chev{ transform:rotate(180deg); }
.usermenu{ position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:50;
  display:none; flex-direction:column; gap:2px; padding:7px;
  background:linear-gradient(160deg, rgba(22,28,52,.98), rgba(12,16,32,.98));
  border:1px solid var(--stroke-2); border-radius:var(--r-md); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.user.is-open .usermenu{ display:flex; animation:modalIn .2s ease; }
.usermenu__item{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px;
  border-radius:var(--r-sm); border:none; background:transparent; color:var(--ink-dim);
  font-size:13.5px; font-weight:500; text-align:left; text-decoration:none; transition:.15s; }
.usermenu__item .ico{ width:17px;height:17px; flex:none; }
.usermenu__item:hover{ color:#fff; background:rgba(34,227,255,.1); }
.usermenu__item--danger:hover{ color:var(--pink); background:rgba(255,77,141,.1); }

/* ---------- dashboard ---------- */
.dash-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  position:relative; border-radius:var(--r-lg); padding:34px 38px; margin-bottom:24px; overflow:hidden;
  border:1px solid var(--stroke-2);
  background:linear-gradient(135deg, rgba(34,227,255,.1), rgba(165,91,255,.1)); isolation:isolate; }
.dash-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, rgba(34,227,255,.16), rgba(165,91,255,.14), rgba(255,77,141,.12), rgba(34,227,255,.16));
  background-size:300% 300%; animation:gradShift 11s ease infinite; opacity:.9; }
.dash-hero__text{ min-width:0; }
.dash-hero .hero__title{ font-size:clamp(26px,3.6vw,40px); margin:14px 0 10px; }
.dash-hero .hero__sub{ font-size:14.5px; }
.dash-hero__cta{ flex:none; box-shadow:0 14px 40px -12px rgba(34,227,255,.7); }

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat{ padding:20px 22px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--stroke);
  backdrop-filter:blur(14px); position:relative; overflow:hidden; transition:.18s; }
.stat:hover{ transform:translateY(-3px); border-color:var(--stroke-2); box-shadow:var(--shadow); }
.stat__icon{ width:38px;height:38px; border-radius:11px; display:grid; place-items:center; font-size:18px;
  background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); margin-bottom:14px; }
.stat__val{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1; color:#fff; }
.stat__label{ font-size:12.5px; color:var(--ink-dim); margin-top:6px; letter-spacing:.02em; }

.dash-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dash-block{ padding:24px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--stroke);
  backdrop-filter:blur(16px); box-shadow:var(--shadow); }
.dash-block__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dash-block__title{ font-family:var(--display); font-weight:600; font-size:18px; margin:0; }
.link-btn{ background:none; border:none; color:var(--cyan); font-size:13px; font-weight:600; padding:4px 6px; border-radius:8px; transition:.15s; }
.link-btn:hover{ background:rgba(34,227,255,.1); }

.dash-draft{ display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:var(--r-md); transition:.15s; cursor:pointer; }
.dash-draft:hover{ background:rgba(120,140,220,.06); }
.dash-draft + .dash-draft{ margin-top:2px; }
.dash-draft__score{ flex:none; width:42px;height:42px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:16px; }
.dash-draft__score--high{ color:var(--lime); background:rgba(125,255,176,.12); }
.dash-draft__score--mid{ color:var(--cyan); background:rgba(34,227,255,.12); }
.dash-draft__score--low{ color:var(--amber); background:rgba(255,207,92,.12); }
.dash-draft__body{ min-width:0; }
.dash-draft__hook{ font-weight:600; font-size:14px; margin:0 0 3px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dash-draft__meta{ font-size:11.5px; color:var(--ink-faint); }
.dash-empty{ text-align:center; padding:28px 16px; color:var(--ink-dim); }
.dash-empty p{ margin:8px 0 14px; font-size:13.5px; }
.dash-empty__orb{ width:54px;height:54px; margin:0 auto; border-radius:50%; background:var(--grad);
  box-shadow:0 0 40px -6px rgba(34,227,255,.7); animation:pulse 2.6s ease-in-out infinite; }

.dash-trend{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:11px; border-radius:var(--r-md); transition:.15s; }
.dash-trend:hover{ background:rgba(120,140,220,.06); }
.dash-trend__name{ font-weight:600; font-size:14px; }
.dash-trend__sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.dash-trend__score{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--cyan); }

/* ---------- onboarding ---------- */
.onb{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,6,14,.82); backdrop-filter:blur(10px); }
.onb.is-open{ display:flex; animation:fade .3s ease; }
.onb__sky{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 500px at 70% -10%, rgba(165,91,255,.22), transparent 60%),
            radial-gradient(700px 500px at 10% 110%, rgba(34,227,255,.18), transparent 60%); }
.onb__card{ position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; padding:34px;
  border-radius:var(--r-lg); border:1px solid var(--stroke-2);
  background:linear-gradient(160deg, rgba(22,28,52,.97), rgba(12,16,32,.98));
  box-shadow:var(--shadow); animation:modalIn .35s cubic-bezier(.2,.9,.3,1); }
.onb__skip{ position:absolute; top:18px; right:18px; background:none; border:none; color:var(--ink-faint);
  font-size:13px; font-weight:500; padding:6px 8px; border-radius:8px; transition:.15s; }
.onb__skip:hover{ color:var(--ink); background:rgba(120,140,220,.08); }
.onb__progress{ display:flex; gap:7px; margin-bottom:24px; }
.onb__progress span{ flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.08); transition:.3s; }
.onb__progress span.is-done{ background:var(--grad-hot); }
.onb__step{ display:none; animation:viewIn .35s ease; }
.onb__step.is-active{ display:block; }
.onb__mark{ font-size:42px; margin-bottom:6px; }
.onb__title{ font-family:var(--display); font-weight:600; font-size:27px; line-height:1.1; margin:10px 0 8px; letter-spacing:-.4px; }
.onb__lede{ color:var(--ink-dim); font-size:14.5px; line-height:1.55; margin:0 0 20px; }
.onb__feats{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; }
.onb__feats li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); }
.onb__feats span{ width:34px;height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:16px;
  background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); }
.onb__err{ color:var(--pink); font-size:12.5px; margin:8px 0 0; }
.onb__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.onb__platforms{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.onb__platforms .platform{ padding:14px 13px; }
.onb__niches{ display:flex; flex-wrap:wrap; gap:8px; }
.onb__niches .chip{ font-size:13px; padding:9px 14px; }
.onb__niches .chip.is-on{ color:#06121a; font-weight:600; background:var(--grad); border-color:transparent; }
.onb__tones{ display:flex; flex-wrap:wrap; gap:9px; }
.onb__tones .tone{ font-size:14px; padding:11px 16px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .composer{ grid-template-columns:1fr; }
  .composer__form{ position:static; }
  .trend-cols{ grid-template-columns:1fr; }
  .dash-cols{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  body{ overflow:auto; }
  .menu-toggle{ display:grid; place-items:center; }
  .sidebar{ transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.9,.3,1); width:260px; }
  .sidebar.is-open{ transform:none; box-shadow:30px 0 80px rgba(0,0,0,.6); }
  .main{ position:static; inset:auto; padding:70px 18px 60px; }
  .hero{ padding:30px 22px; }
}
@media (max-width:430px){
  .factor{ grid-template-columns:88px 1fr 24px; }
  .variant__actions{ flex-direction:column; }
  .page-head{ align-items:stretch; }
  .search{ width:100%; }
  .dash-hero{ flex-direction:column; align-items:stretch; padding:26px 22px; }
  .dash-hero__cta{ width:100%; justify-content:center; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat{ padding:16px; }
  .stat__val{ font-size:24px; }
  .dash-block{ padding:18px; }
  .onb__card{ padding:24px 20px; }
  .onb__title{ font-size:23px; }
  .onb__platforms{ grid-template-columns:1fr; }
}

/* ===== Hook generator + angle generator inputs ===== */
.hook-gen{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hook-gen .input{ min-width:240px; flex:1 1 240px; }
.hook-gen .input--select{ min-width:200px; }

/* ===== AI angles ===== */
.angle{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--stroke); }
.angle:last-child{ border-bottom:none; }
.angle__title{ font-weight:600; font-size:15px; color:#fff; }
.angle__why{ font-size:13px; color:var(--ink-dim); margin-top:4px; line-height:1.5; }
.angle__use{ flex-shrink:0; }

/* ===== Honest error state ===== */
.empty--error{ border-color:rgba(255,120,120,.35); background:rgba(255,90,90,.04); }
.empty__orb--error{ background:linear-gradient(135deg,#ff6b6b,#ff9a3c);
  box-shadow:0 0 50px -6px rgba(255,107,107,.6); }