:root{
  --paper:#061615;
  --surface:#ffffff;
  --surface-soft:#edf4f2;
  --ink:#15151a;
  --muted:#667171;
  --line:#d8e2df;
  --line-strong:#a9c2bc;
  --accent:#0f8f84;
  --accent-2:#e15f4f;
  --accent-3:#5f74d8;
  --accent-soft:#dff2ef;
  --danger:#ff3b4f;
  --shadow:0 18px 46px rgba(0,0,0,.18);
  --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:linear-gradient(126deg,#041010 0%,#102226 42%,#38434f 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
}
button,input,textarea,select{font:inherit}
button,a{transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
button{cursor:pointer}
.is-hidden{display:none!important}
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:
    radial-gradient(circle at 96% 18%,rgba(30,159,143,.34),transparent 36rem),
    radial-gradient(circle at 78% 82%,rgba(24,113,105,.26),transparent 34rem),
    linear-gradient(112deg,#020706 0%,#041514 44%,#07594f 100%);
  color:#252731;
}
.login-logo-wrap{
  width:min(250px,72%);
  height:76px;
  margin:0 auto 20px;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.login-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
}
.login-card{
  width:min(390px,100%);
  display:grid;
  gap:10px;
  padding:36px;
  border:1px solid rgba(210,216,220,.95);
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.login-card h1{
  margin:0 0 20px;
  color:#2d3038;
  font-size:1.36rem;
  font-weight:500;
  line-height:1.25;
  text-align:center;
}
.login-card label{
  display:block;
  position:relative;
}
.login-card input{
  width:100%;
  min-height:54px;
  border:1px solid #cfd3d8;
  border-radius:4px;
  outline:0;
  background:#fff;
  color:#252731;
  padding:16px 18px;
  font-size:1rem;
}
.login-card input::placeholder{color:#737783}
.login-card input:focus{
  border-color:#0f8f84;
  box-shadow:0 0 0 3px rgba(15,143,132,.12);
}
.password-field input{padding-right:52px}
.password-toggle{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#727783;
  font-size:1.35rem;
  line-height:1;
}
.login-submit{
  min-height:54px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,#0f8f84,#24c8ba);
  color:#fff;
  font-size:1rem;
  font-weight:760;
}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(15,143,132,.24)}
.shell{width:min(1180px,calc(100% - 40px));margin:0 auto}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0 6px;
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;color:#f5fffc;text-decoration:none}
.brand-logo-link{width:142px;height:40px;overflow:hidden}
.brand-logo-img{
  display:block;
  width:142px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.brand-mark{display:none}
.nav-actions{display:flex;align-items:center;gap:4px}
.nav-actions a,.secondary,.primary,.ghost,.logout-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:var(--radius);
  color:#c5dbd7;
  background:transparent;
  text-decoration:none;
  font-size:.87rem;
  font-weight:720;
}
.nav-actions a:hover,.secondary:hover,.ghost:hover,.concept-actions button:hover,.prompt-tool:hover{
  color:#f7fffd;
  border-color:rgba(196,241,232,.28);
  background:rgba(255,255,255,.10);
}
.primary,.generate,.prompt-generate{
  border-color:#f7fffd;
  background:#f7fffd;
  color:#071716;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.primary:hover,.generate:hover,.prompt-generate:hover{background:#dff2ef;transform:translateY(-1px)}
.hero{display:block;max-width:760px;min-height:auto;padding:74px 0 28px}
.eyebrow{
  margin:0 0 14px;
  color:#8ce9dd;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.panel .eyebrow{color:var(--accent)}
.hero h1{
  max-width:780px;
  margin:0 0 12px;
  color:#f7fffd;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(2.4rem,6vw,4.7rem);
  font-weight:850;
  letter-spacing:0;
  line-height:.94;
  text-wrap:balance;
}
.lead{
  max-width:650px;
  margin:0;
  color:#d9e6e2;
  font-size:1rem;
  line-height:1.58;
}
.hero-prompt{
  max-width:760px;
  margin:24px 0 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.90);
  box-shadow:var(--shadow);
}
.hero-prompt textarea{
  width:100%;
  min-height:118px;
  resize:vertical;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  padding:18px 18px 14px;
  font-weight:620;
  line-height:1.55;
}
.hero-prompt textarea::placeholder{color:#7b8888}
.prompt-toolbar{
  display:flex;
  justify-content:flex-end;
  padding:10px;
  border-top:1px solid var(--line);
}
.prompt-tool{
  min-height:38px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fbfffd;
  color:#5b6969;
  padding:9px 12px;
  font-weight:760;
}
.hero-prompt .prompt-tool:hover{
  color:var(--ink);
  border-color:var(--line-strong);
  background:#eef8f6;
}
.prompt-generate{margin-left:auto;border-radius:var(--radius);padding:10px 18px;font-weight:840}
.youtube-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:8px;
  box-shadow:var(--shadow);
}
.floating-card{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:6px;
  background:#111;
  isolation:isolate;
}
.thumb:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,.08) 52%,rgba(0,0,0,.24)),
    linear-gradient(0deg,rgba(0,0,0,.54),transparent 42%);
}
.theme-portrait{background:linear-gradient(135deg,#15110f 0%,#8b5c4b 52%,#f2d1b8 100%)}
.theme-jazz{background:linear-gradient(90deg,#8a5b37 0%,#9a6a44 48%,#8b5a35 100%)}
.theme-morning{background:linear-gradient(135deg,#735f55 0%,#d7dac0 48%,#739157 100%)}
.theme-lyric-sky{background:linear-gradient(180deg,#196fa1 0%,#9f7ca0 38%,#f6a965 100%)}
.theme-photo-piano{background:linear-gradient(135deg,#100b08 0%,#3d281e 48%,#e0b979 100%)}
.theme-playlist{background:linear-gradient(135deg,#6f4329 0%,#b97848 50%,#f5dfc0 100%)}
.theme-night{background:linear-gradient(135deg,#070b12 0%,#172b45 54%,#6bb9d8 100%)}
.theme-rain{background:linear-gradient(135deg,#081014 0%,#354854 54%,#b8d5e2 100%)}
.theme-warm{background:linear-gradient(135deg,#18100e 0%,#8d4f48 52%,#ffd3ac 100%)}
.theme-stage{background:linear-gradient(135deg,#080810 0%,#532878 45%,#20d2c6 100%)}
.theme-studio{background:linear-gradient(135deg,#090909 0%,#2e3035 52%,#d9d3c4 100%)}
.theme-city{background:linear-gradient(135deg,#080b13 0%,#14345b 50%,#e25e50 100%)}
.theme-piano{background:linear-gradient(135deg,#0f0f12 0%,#444047 52%,#f5f0e5 100%)}
.theme-chanson{background:linear-gradient(135deg,#24150d 0%,#8a6138 52%,#efcf91 100%)}
.theme-mono{background:linear-gradient(135deg,#080808 0%,#3f3f42 54%,#d8d8d8 100%)}
.theme-sunset{background:linear-gradient(135deg,#17120d 0%,#b75c3f 52%,#ffd37a 100%)}
.theme-neon{background:linear-gradient(135deg,#080713 0%,#a9247b 48%,#28e2df 100%)}
.theme-drive{background:linear-gradient(135deg,#05070a 0%,#162a32 54%,#f1c05a 100%)}
.theme-memory{background:linear-gradient(135deg,#17100b 0%,#8b704f 52%,#f0dfbd 100%)}
.theme-khmer2{background:linear-gradient(135deg,#07110f 0%,#0f8f84 50%,#e15f4f 100%)}
.theme-family2{background:linear-gradient(135deg,#17130f 0%,#7d5646 52%,#ffd8bd 100%)}
.theme-cover{background:linear-gradient(135deg,#0d0b09 0%,#745133 52%,#e6c38d 100%)}
.theme-mix{background:linear-gradient(135deg,#07070b 0%,#153f50 50%,#29dacb 100%)}
.theme-release{background:linear-gradient(135deg,#090a0d 0%,#0f8f84 50%,#f5f9f6 100%)}
.theme-duet{background:linear-gradient(135deg,#100d12 0%,#6d3d60 50%,#e9b4cd 100%)}
.theme-finale{background:linear-gradient(135deg,#07080d 0%,#1b4163 50%,#f7f4df 100%)}
.cinema-glow{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 75% 36%,rgba(226,255,248,.82),transparent 20%),
    radial-gradient(circle at 82% 70%,rgba(225,95,79,.50),transparent 28%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.34));
  filter:blur(2px);
}
.tone-serif-stack .cinema-glow,.tone-morning-title .cinema-glow,.tone-lyric-center .cinema-glow,.tone-photo-minimal .cinema-glow,.tone-serif-poster .cinema-glow{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.08));
  filter:none;
}
.tone-serif-stack:after{
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 42%,rgba(0,0,0,.08));
}
.tone-morning-title:after{
  background:radial-gradient(circle at 50% 52%,rgba(0,0,0,.08),rgba(0,0,0,.34));
}
.tone-lyric-center:after{
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.04) 44%,rgba(0,0,0,.20));
}
.tone-photo-minimal:after{
  background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.12) 54%,rgba(0,0,0,.24));
}
.thumb-flare{
  position:absolute;
  right:-8%;
  top:-18%;
  z-index:1;
  width:44%;
  height:70%;
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,0));
  filter:blur(18px);
  transform:rotate(7deg);
}
.label-strip{
  position:absolute;
  left:7%;
  top:8%;
  z-index:4;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:5px;
  background:rgba(0,0,0,.46);
  color:#fff;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.scene{
  position:absolute;
  inset:0;
  z-index:2;
}
.scene:before,.scene:after{content:"";position:absolute;display:block}
.scene-editorial:before{
  left:9%;
  bottom:-7%;
  width:34%;
  height:96%;
  border-radius:48% 48% 9% 9%;
  background:
    radial-gradient(circle at 50% 22%,#f2b18a 0 8%,#9b543d 9% 25%,#23130f 26% 36%,transparent 37%),
    linear-gradient(165deg,transparent 0 29%,#3b1b16 30% 52%,#17100e 53% 100%);
  box-shadow:16px 0 34px rgba(0,0,0,.20);
}
.scene-editorial:after{
  left:5%;
  top:0;
  width:40%;
  height:46%;
  border-radius:50%;
  background:radial-gradient(circle at 58% 64%,transparent 0 34%,#1b1110 35% 55%,transparent 56%);
  transform:rotate(-18deg);
}
.scene-morning:before{
  left:9%;
  bottom:11%;
  width:34%;
  height:32%;
  border-radius:999px 999px 18px 18px;
  background:
    radial-gradient(circle at 26% 44%,#d3aa83 0 19%,transparent 20%),
    linear-gradient(90deg,#87654c 0 38%,#c19b75 39% 100%);
  box-shadow:0 0 0 18px rgba(255,255,255,.10),-28px -18px 34px rgba(255,255,255,.25);
}
.scene-morning:after{
  right:4%;
  top:0;
  width:36%;
  height:86%;
  background:
    radial-gradient(circle at 72% 18%,#ecd1ce 0 7%,transparent 8%),
    radial-gradient(circle at 52% 42%,#f2d8d1 0 6%,transparent 7%),
    radial-gradient(circle at 40% 20%,#dfeea7 0 7%,transparent 8%),
    linear-gradient(135deg,transparent 0 35%,rgba(50,88,41,.38) 36% 100%);
  filter:blur(.2px);
}
.scene-sky:before{
  inset:0;
  background:
    radial-gradient(circle at 62% 22%,rgba(255,255,255,.22),transparent 18%),
    linear-gradient(18deg,transparent 0 36%,rgba(255,255,255,.18) 37% 40%,transparent 41%),
    linear-gradient(-12deg,transparent 0 52%,rgba(255,255,255,.15) 53% 56%,transparent 57%);
  filter:blur(3px);
}
.scene-sky:after{
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 58%);
}
.scene-photo-piano:before{
  right:0;
  bottom:0;
  width:68%;
  height:42%;
  background:repeating-linear-gradient(90deg,#fff5e4 0 28px,#17120f 28px 35px,#fff5e4 35px 56px);
  transform:skewX(-18deg);
  transform-origin:right bottom;
  filter:blur(.2px);
}
.scene-photo-piano:after{
  right:31%;
  top:16%;
  width:24%;
  height:30%;
  border-radius:999px;
  background:linear-gradient(145deg,#d1a37c,#5a3124);
  box-shadow:72px 34px 0 -18px rgba(218,175,133,.86);
  transform:rotate(-10deg);
}
.scene-face:before{
  right:8%;
  top:5%;
  width:38%;
  aspect-ratio:1;
  border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 44% 36%,#fff3e7 0 8%,#c58b73 9% 44%,#3b211d 45% 100%);
  box-shadow:-22px 14px 46px rgba(0,0,0,.34),0 0 0 12px rgba(255,255,255,.08);
}
.scene-face:after{
  right:23%;
  top:36%;
  width:3px;
  height:46px;
  background:linear-gradient(#fff,rgba(255,255,255,0));
}
.scene-phone:before{
  right:18%;
  bottom:16%;
  width:20%;
  height:34%;
  border-radius:8px;
  background:linear-gradient(160deg,#111,#1f2937);
  box-shadow:0 0 42px rgba(107,185,216,.78);
  transform:rotate(-10deg);
}
.scene-phone:after{
  right:48%;
  top:18%;
  width:28%;
  height:54%;
  border-radius:40% 40% 44% 44%;
  background:linear-gradient(145deg,#28313d,#070b12);
}
.scene-rain:before{
  inset:-15%;
  background:repeating-linear-gradient(105deg,rgba(255,255,255,.34) 0 2px,transparent 2px 22px);
  transform:skewX(-10deg);
}
.scene-rain:after{
  right:12%;
  top:14%;
  width:34%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#dde8ec 0 10%,#6f818c 11% 44%,#151b1f 45%);
}
.scene-couple:before,.scene-duet:before{
  right:22%;
  top:18%;
  width:21%;
  height:58%;
  border-radius:44% 44% 20% 20%;
  background:rgba(8,8,10,.72);
  box-shadow:58px 8px 0 rgba(8,8,10,.62);
}
.scene-couple:after,.scene-duet:after{
  right:19%;
  bottom:18%;
  width:39%;
  height:12px;
  border-radius:999px;
  background:rgba(255,230,214,.58);
}
.scene-stage:before,.scene-spotlight:before{
  left:42%;
  top:-10%;
  width:12%;
  height:120%;
  background:linear-gradient(rgba(255,255,255,.70),rgba(255,255,255,0));
  filter:blur(14px);
  transform:rotate(14deg);
  box-shadow:-150px 0 40px rgba(255,255,255,.22),150px 0 40px rgba(32,210,198,.24);
}
.scene-stage:after,.scene-spotlight:after{
  left:14%;
  bottom:15%;
  width:72%;
  height:4px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
}
.scene-mic:before{
  right:20%;
  top:14%;
  width:15%;
  height:38%;
  border-radius:999px;
  background:linear-gradient(#ece9df,#575b62);
}
.scene-mic:after{
  right:26%;
  bottom:18%;
  width:5px;
  height:33%;
  background:#d9d3c4;
  transform:rotate(12deg);
}
.scene-city:before{
  right:6%;
  bottom:0;
  width:48%;
  height:48%;
  background:repeating-linear-gradient(90deg,rgba(5,8,14,.88) 0 28px,transparent 28px 38px);
}
.scene-city:after{
  right:10%;
  bottom:22%;
  width:38%;
  height:4px;
  background:repeating-linear-gradient(90deg,#ffd06d 0 6px,transparent 6px 18px);
  box-shadow:0 16px 0 #7ee2d8,0 31px 0 #e25e50;
}
.scene-piano:before{
  right:4%;
  bottom:5%;
  width:62%;
  height:26%;
  background:repeating-linear-gradient(90deg,#fff 0 22px,#111 22px 28px,#fff 28px 44px);
  transform:skewX(-14deg);
  box-shadow:0 -24px 44px rgba(0,0,0,.28);
}
.scene-piano:after{
  right:33%;
  top:8%;
  width:24%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#eee 0 12%,#555 13% 46%,#111 47%);
}
.scene-profile:before{
  right:10%;
  top:6%;
  width:42%;
  height:88%;
  border-radius:45%;
  background:radial-gradient(circle at 44% 38%,#eee 0 8%,#888 9% 40%,#171717 41%);
  filter:grayscale(1);
}
.scene-road:before,.scene-car:before{
  left:48%;
  bottom:-18%;
  width:44%;
  height:72%;
  background:linear-gradient(105deg,transparent 0 46%,rgba(255,255,255,.8) 47% 49%,transparent 50%);
  transform:perspective(160px) rotateX(58deg);
}
.scene-road:after,.scene-car:after{
  right:10%;
  bottom:20%;
  width:32%;
  height:9%;
  border-radius:999px;
  background:#101010;
  box-shadow:0 0 26px #ffd37a;
}
.scene-neon:before,.scene-equalizer:before{
  right:8%;
  bottom:18%;
  width:44%;
  height:44%;
  background:repeating-linear-gradient(90deg,#22e4de 0 10px,transparent 10px 20px,#ff54bd 20px 30px,transparent 30px 44px);
  clip-path:polygon(0 80%,10% 40%,20% 72%,30% 22%,40% 60%,50% 10%,60% 76%,70% 34%,80% 66%,90% 18%,100% 82%,100% 100%,0 100%);
}
.scene-neon:after{
  right:16%;
  top:12%;
  width:28%;
  aspect-ratio:1;
  border-radius:50%;
  border:8px solid rgba(255,255,255,.82);
  box-shadow:0 0 28px #28e2df;
}
.scene-photo:before{
  right:12%;
  top:15%;
  width:36%;
  height:48%;
  border:8px solid #f0dfbd;
  background:linear-gradient(135deg,#5e4930,#f0dfbd);
  transform:rotate(6deg);
  box-shadow:0 18px 34px rgba(0,0,0,.34);
}
.scene-photo:after{
  right:23%;
  top:29%;
  width:15%;
  aspect-ratio:1;
  border-radius:50%;
  background:#342316;
}
.scene-singer:before{
  left:9%;
  top:7%;
  width:34%;
  height:84%;
  border-radius:48% 48% 34% 34%;
  background:radial-gradient(circle at 44% 24%,#f9d5bf 0 9%,#bd785d 10% 34%,#2d1712 35% 100%);
  box-shadow:0 20px 38px rgba(0,0,0,.34);
}
.scene-singer:after{
  right:7%;
  top:10%;
  width:44%;
  height:76%;
  background:repeating-linear-gradient(0deg,rgba(255,248,232,.88) 0 5px,transparent 5px 38px);
  opacity:.42;
}
.scene-cafe:before{
  right:7%;
  bottom:9%;
  width:42%;
  height:54%;
  border-radius:44% 44% 18% 18%;
  background:radial-gradient(circle at 42% 28%,#f6d4af 0 11%,#8b5638 12% 38%,#2b1a10 39% 100%);
  box-shadow:-18px 18px 44px rgba(0,0,0,.34);
}
.scene-cafe:after{
  left:6%;
  bottom:11%;
  width:48%;
  height:36%;
  background:linear-gradient(180deg,rgba(255,222,151,.20),rgba(36,21,13,.70)),repeating-linear-gradient(90deg,rgba(255,226,166,.34) 0 2px,transparent 2px 24px);
  clip-path:polygon(0 72%,18% 32%,29% 52%,44% 20%,59% 58%,72% 30%,100% 72%,100% 100%,0 100%);
}
.scene-temple:before,.scene-home:before{
  right:10%;
  bottom:14%;
  width:42%;
  height:42%;
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.18));
  clip-path:polygon(50% 0,100% 42%,82% 42%,82% 100%,18% 100%,18% 42%,0 42%);
}
.scene-guitar:before{
  right:16%;
  top:20%;
  width:23%;
  aspect-ratio:1;
  border-radius:50%;
  background:#e6c38d;
  box-shadow:34px 32px 0 -8px #b27b43;
}
.scene-guitar:after{
  right:20%;
  top:20%;
  width:5px;
  height:62%;
  background:#1a120a;
  transform:rotate(-34deg);
}
.scene-poster:before{
  right:12%;
  top:14%;
  width:34%;
  height:60%;
  border-radius:4px;
  background:#f5f9f6;
  box-shadow:0 0 0 8px rgba(255,255,255,.18),0 18px 34px rgba(0,0,0,.28);
}
.scene-poster:after{
  right:18%;
  top:24%;
  width:22%;
  height:6px;
  background:#0f8f84;
  box-shadow:0 18px 0 #111,0 36px 0 #e15f4f;
}
.portrait-orb{
  position:absolute;
  right:9%;
  top:14%;
  z-index:2;
  display:grid;
  place-items:center;
  width:30%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:radial-gradient(circle,#effffb 0 13%,#7ee2d8 14% 42%,#15151a 43% 49%,#383f59 50% 100%);
  color:#f8fffd;
  font-size:3.6rem;
  font-weight:900;
  text-shadow:0 10px 24px rgba(0,0,0,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}
.thumb-text{
  position:absolute;
  left:7%;
  bottom:10%;
  z-index:4;
  max-width:62%;
}
.tone-serif-stack .thumb-text{
  left:auto;
  right:5%;
  top:5%;
  bottom:auto;
  width:50%;
  max-width:50%;
  color:#fff;
  text-align:center;
}
.tone-serif-stack .thumb-text span{
  font-family:Georgia,serif;
  font-size:clamp(1.6rem,3.6vw,4rem);
  font-weight:500;
  line-height:1.13;
  letter-spacing:.18em;
  text-shadow:0 3px 12px rgba(0,0,0,.22);
}
.tone-serif-stack .thumb-text span::first-line{
  font-size:1.55em;
  letter-spacing:.04em;
}
.tone-morning-title .thumb-text{
  inset:24% 9% auto;
  max-width:none;
  text-align:center;
}
.tone-morning-title .thumb-text em{
  display:block;
  color:#fff;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(1.1rem,2.4vw,2rem);
  font-style:normal;
  line-height:1;
  text-shadow:0 3px 12px rgba(0,0,0,.30);
}
.tone-morning-title .thumb-text span{
  color:#fff;
  font-size:clamp(2rem,4.8vw,4.5rem);
  font-weight:400;
  line-height:.92;
  text-shadow:0 4px 18px rgba(0,0,0,.34);
}
.tone-lyric-center .thumb-text{
  inset:22% 8% auto;
  max-width:none;
  text-align:center;
}
.tone-lyric-center .thumb-text em,.tone-lyric-center .thumb-text small{
  display:block;
  color:#2b221f;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:clamp(.78rem,1.5vw,1.25rem);
  font-style:normal;
  line-height:1.2;
  text-shadow:none;
}
.tone-lyric-center .thumb-text small{margin-top:8px}
.tone-lyric-center .thumb-text span{
  margin-top:12px;
  color:#2d2421;
  font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
  font-size:clamp(2.1rem,4.8vw,4.8rem);
  font-weight:900;
  line-height:.95;
  text-shadow:none;
}
.tone-photo-minimal .thumb-text{
  left:7%;
  bottom:14%;
  max-width:52%;
}
.tone-photo-minimal .thumb-text span{
  color:#fff8eb;
  font-family:Georgia,serif;
  font-size:clamp(1.4rem,3vw,3rem);
  font-weight:500;
  line-height:1.03;
}
.tone-photo-minimal .thumb-text small,.tone-serif-poster .thumb-text small{
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.88);
  font-size:.72rem;
  font-weight:700;
  text-shadow:0 4px 16px rgba(0,0,0,.48);
}
.tone-serif-poster .thumb-text{
  left:7%;
  bottom:13%;
  max-width:54%;
}
.tone-serif-poster .thumb-text span{
  font-family:Georgia,serif;
  font-size:clamp(1.45rem,3.1vw,3rem);
  font-weight:700;
  line-height:1;
}
.thumb-text span{
  display:block;
  color:#f8fffd;
  font-size:clamp(1.55rem,3.2vw,3rem);
  font-weight:900;
  letter-spacing:0;
  line-height:.88;
  text-shadow:
    0 4px 0 rgba(0,0,0,.36),
    0 10px 26px rgba(0,0,0,.78);
}
.tone-playlist .thumb-text{
  left:auto;
  right:7%;
  top:12%;
  bottom:auto;
  max-width:46%;
  text-align:center;
}
.tone-playlist .thumb-text span,.tone-retro .thumb-text span{
  font-family:Georgia,serif;
  font-weight:700;
  line-height:1.03;
  text-shadow:0 8px 24px rgba(0,0,0,.50);
}
.tone-ballad .thumb-text{
  left:7%;
  bottom:12%;
  max-width:68%;
}
.play-badge{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:4;
  display:grid;
  place-items:center;
  width:52px;
  height:36px;
  border-radius:6px;
  background:var(--danger);
  color:#fff;
  font-weight:900;
}
.duration-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;
  min-width:46px;
  padding:4px 7px;
  border-radius:4px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  text-align:center;
}
.music-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:5;
  display:grid;
  place-items:center;
  width:34px;
  height:28px;
  border-radius:5px;
  background:rgba(0,0,0,.56);
  color:#fff;
  font-size:1rem;
  font-weight:900;
}
.thumb:not(.theme-playlist) .music-badge{display:none}
.video-meta{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:12px 2px 0;
}
.avatar{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#11110f;
  color:#ecfffb;
  font-weight:900;
}
.video-meta strong{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-size:.92rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.video-meta small{display:block;margin-top:3px;color:var(--muted);font-size:.8rem}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.panel h2,.section-head h2{
  margin:0 0 18px;
  color:#f7fffd;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(1.55rem,2.2vw,2.25rem);
  font-weight:820;
  letter-spacing:0;
}
.panel h2{color:var(--ink)}
.studio-grid{display:block;margin:0 0 34px}
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.86);
  padding:22px;
  box-shadow:var(--shadow);
}
.panel .secondary{
  border-color:var(--line);
  background:#fbfffd;
  color:#4d5959;
}
.panel .secondary:hover{
  border-color:var(--line-strong);
  background:#eef8f6;
  color:var(--ink);
}
.panel .generate{
  border-color:#10131b;
  background:#10131b;
  color:#f8fffd;
}
.panel .generate:hover{background:#222936}
.creator label{
  display:block;
  margin-bottom:14px;
  color:#343f40;
  font-size:.84rem;
  font-weight:780;
}
.creator input,.creator textarea,.creator select{
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  outline:0;
  background:#fbfffd;
  color:var(--ink);
  padding:13px 12px;
}
.creator input:focus,.creator textarea:focus,.creator select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,143,132,.14);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.generate{width:100%;border-radius:var(--radius);padding:15px;font-weight:850}
.results-section{padding:0 0 72px}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}
.concept{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.86);
  padding:8px;
  cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.12);
}
.concept:hover,.concept.active{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
.concept.active{outline:2px solid rgba(15,143,132,.28);outline-offset:2px}
.concept .youtube-card{box-shadow:none}
.concept .thumb-text span{font-size:clamp(1.16rem,1.9vw,2.12rem)}
.concept .portrait-orb{font-size:2.75rem}
.concept-foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 2px 4px;
}
.concept-foot h3{margin:0;color:var(--ink);font-size:.96rem;font-weight:820}
.pill-score{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fbfffd;
  color:#09645e;
  padding:7px 9px;
  font-size:.82rem;
  font-weight:850;
}
.concept-actions{display:flex;gap:8px;padding:10px 2px 2px}
.concept-actions button{
  flex:1;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fbfffd;
  color:#4d5959;
  padding:9px 10px;
  font-size:.82rem;
  font-weight:760;
}
.concept-actions button:hover{
  color:var(--ink);
  border-color:var(--line-strong);
  background:#eef8f6;
}
.concept-actions button:first-child{
  border-color:#11110f;
  background:#11110f;
  color:#f8fffd;
}
.concept-actions button:first-child:hover{
  border-color:#202936;
  background:#202936;
  color:#f8fffd;
}
.loading{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted)}
@media(max-width:980px){
  .shell{width:min(100% - 28px,680px)}
  .topbar{position:relative;align-items:flex-start}
  .nav-actions{display:none}
  .hero{padding:42px 0 24px}
  .hero h1{font-size:clamp(2.2rem,12vw,3.6rem)}
  .prompt-generate{width:100%;margin-left:0}
  .results{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .panel{padding:18px}
  .section-head{display:block}
  .concept-actions{flex-direction:column}
  .video-meta strong{white-space:normal}
}