@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{
  color-scheme:light;
  --bg:#f7f5ff;
  --card:#ffffff;
  --ink:#18122b;
  --line:#e4ddf4;
  --muted:#5b5275;
  --accent:#7c3aed;
  --accent-pink:#db2777;
  --accent-orange:#f97316;
  --soft:#f2ecff;
  --peach:#ffe8d6;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 10% 6%,rgba(124,58,237,.13),transparent 36%),
    radial-gradient(circle at 90% 10%,rgba(236,72,153,.12),transparent 34%),
    radial-gradient(circle at 50% 96%,rgba(249,115,22,.09),transparent 42%),
    var(--bg);
  color:var(--ink);
  font:15px/1.6 'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button,input,textarea,select,a{outline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a78bfa}
button{transition:background .18s,box-shadow .18s,transform .18s,filter .18s,border-color .18s}
button:disabled{cursor:default;opacity:.55;transform:none}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;vertical-align:middle;cursor:pointer}

header{
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(32px,calc((100% - 1160px) / 2));
  gap:20px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(124,58,237,.14);
}
.brand{display:flex;align-items:center;font:800 24px Manrope,sans-serif;letter-spacing:-1px;white-space:nowrap;color:var(--ink)}
.brand>span:not(.logo){color:var(--accent)}
.brand-dot{color:var(--accent-pink)!important}
.logo{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed 0%,#ec4899 60%,#f97316 100%);
  border-radius:12px;
  margin-right:10px;
  font:700 24px 'DM Sans',sans-serif;
  transform:rotate(-6deg);
  box-shadow:0 8px 20px -4px rgba(124,58,237,.45);
}
nav{display:flex;gap:6px;flex-wrap:nowrap}
.nav{border:0;background:transparent;color:#52486b;font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:999px;white-space:nowrap}
.nav:hover{background:#f1ebff;color:#5b21b6}
.nav.active{
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#db2777);
  font-weight:700;
  box-shadow:0 6px 16px -4px rgba(124,58,237,.45);
}
.version{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:#4c4366;
  background:#f4effd;
  border:1px solid #e3d7fb;
  padding:7px 13px;
  border-radius:999px;
  white-space:nowrap;
}
.version>span{width:8px;height:8px;background:#10b981;border-radius:50%;box-shadow:0 0 0 3px rgba(16,185,129,.22)}

main{max-width:1224px;margin:auto;padding:0 32px}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding:44px 0 48px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6d28d9;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  padding:6px 13px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
}
.eyebrow>span{color:var(--accent-pink);font-size:15px}
h1{font:800 clamp(40px,4.8vw,62px)/1.08 Manrope,sans-serif;letter-spacing:-2.2px;margin:20px 0 18px;color:var(--ink)}
h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#6d28d9 0%,#db2777 55%,#ea580c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy>p{color:var(--muted);line-height:1.72;font-size:16px;margin:0;max-width:520px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-tags span{
  font-size:12.5px;
  font-weight:700;
  border:1px solid rgba(124,58,237,.18);
  border-radius:999px;
  padding:8px 14px;
  color:#3f345d;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 16px -6px rgba(91,33,182,.14);
}
.hero-tags span:first-child{color:#6d28d9;border-color:rgba(124,58,237,.3)}

@keyframes spinRecord{to{transform:rotate(360deg)}}
@keyframes eqPulse{0%{transform:scaleY(.45);opacity:.65}100%{transform:scaleY(1.2);opacity:1}}
.hero-art{
  position:relative;
  height:324px;
  border-radius:24px;
  background:
    radial-gradient(circle at 82% 18%,rgba(236,72,153,.45),transparent 46%),
    radial-gradient(circle at 18% 85%,rgba(249,115,22,.32),transparent 44%),
    linear-gradient(135deg,#1b0f36 0%,#381254 52%,#6d1b53 100%);
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 26px 55px -16px rgba(45,16,84,.55),inset 0 0 0 1px rgba(255,255,255,.15);
  transform:rotate(1.5deg);
}
.hero-art:before{content:'';position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.28),transparent 70%);right:-75px;top:-115px;z-index:-1}
.hero-art:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid rgba(255,255,255,.14);left:-75px;bottom:-55px;z-index:-1}
.art-caption{position:absolute;left:24px;top:20px;color:rgba(243,238,255,.78);letter-spacing:1.6px;font-size:9.5px;font-weight:700}
.record{
  position:absolute;
  width:228px;
  height:228px;
  border-radius:50%;
  top:50px;
  left:42px;
  background:repeating-radial-gradient(circle at center,#181523 0,#181523 1px,#272238 2px,#15121e 3px,#15121e 5px);
  box-shadow:0 20px 38px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.1);
  border:7px solid #262035;
  animation:spinRecord 18s linear infinite;
}
.record:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0deg,rgba(255,255,255,.18) 38deg,transparent 72deg,transparent 180deg,rgba(244,114,182,.16) 210deg,transparent 255deg)}
.record-label{
  position:absolute;
  inset:62px;
  border-radius:50%;
  background:linear-gradient(135deg,#f472b6 0%,#7c3aed 65%,#f59e0b 100%);
  border:2px solid rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.record-label:after{content:'';position:absolute;width:8px;height:8px;background:#18122b;border:2px solid rgba(255,255,255,.8);border-radius:50%;left:calc(50% - 4px);top:calc(50% - 4px)}
.record-label>span{font:800 24px Manrope,sans-serif;color:#fff;position:absolute;top:9px;letter-spacing:-1.5px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.record-label>span span{font-size:15px}
.record-label small{font-size:4.5px;font-weight:700;letter-spacing:1px;position:absolute;bottom:14px;color:rgba(255,255,255,.9)}
.tonearm{position:absolute;right:52px;top:56px;width:10px;height:132px;background:linear-gradient(90deg,#b7a9d4,#ffffff,#9b8cbe);border-radius:5px;transform:rotate(22deg);transform-origin:top;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.tonearm:before{content:'';position:absolute;width:24px;height:24px;left:-7px;top:-7px;background:#c4b5fd;border:6px solid #ede9fe;border-radius:50%}
.tonearm:after{content:'';position:absolute;width:17px;height:29px;bottom:-13px;left:-3px;background:#db2777;border-radius:4px;transform:rotate(-12deg)}
.sound{position:absolute;right:22px;bottom:48px;display:flex;align-items:center;gap:2.5px;height:28px}
.sound i{width:2.5px;height:calc(var(--h) / 6);background:linear-gradient(180deg,#f9a8d4,#a78bfa);border-radius:3px;transform-origin:bottom;animation:eqPulse 1.1s ease-in-out infinite alternate}
.sound i:nth-child(2n){animation-duration:.85s;animation-delay:.18s}
.sound i:nth-child(3n){animation-duration:1.3s;animation-delay:.35s}
.floating-note{position:absolute;right:22px;top:116px;color:#fbbf24;font-size:38px;transform:rotate(14deg);text-shadow:0 0 22px rgba(251,191,36,.55)}
.art-sticker{
  position:absolute;
  left:18px;
  bottom:34px;
  padding:11px 17px;
  background:linear-gradient(135deg,#fde68a,#fbbf24);
  color:#451a03;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  transform:rotate(-10deg);
  border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.32);
}
.art-sticker>span{float:left;font-size:24px;margin-right:9px;line-height:1}
.art-bottom{position:absolute;left:24px;right:24px;bottom:14px;display:flex;justify-content:space-between;font-size:8.5px;font-weight:700;letter-spacing:1.3px;color:rgba(243,238,255,.68)}

.workspace{
  border:1px solid #e2d8f5;
  border-top:4px solid var(--accent);
  border-radius:24px;
  background:var(--card);
  box-shadow:0 24px 60px -12px rgba(91,33,182,.16);
  overflow:hidden;
  scroll-margin-top:96px;
}
.tabs{display:flex;gap:8px;padding:12px;background:#f4effc;border-bottom:1px solid #e7dff7}
.tabs button{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  border:0;
  border-radius:14px;
  background:transparent;
  padding:14px 16px;
  font-size:14px;
  font-weight:700;
  color:#52486b;
  white-space:nowrap;
}
.tabs button:hover{background:#e9e0fb;color:#4c1d95}
.tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,#7c3aed 0%,#db2777 100%);
  box-shadow:0 8px 20px -4px rgba(124,58,237,.45);
}
.panel{padding:34px 40px 32px}
.section-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.step{font-size:11px;letter-spacing:1.6px;font-weight:800;color:var(--accent)}
.badge{
  font-size:11.5px;
  font-weight:700;
  color:#166534;
  background:#dcfce7;
  border:1px solid #bbf7d0;
  border-radius:999px;
  padding:6px 12px;
}
.badge:before{content:'●';font-size:8px;vertical-align:1px;margin-right:6px}
.badge.amber{color:#92400e;background:#fef3c7;border-color:#fde68a}
h2{font:800 28px/1.25 Manrope,sans-serif;letter-spacing:-.9px;margin:14px 0 8px;color:var(--ink)}
.muted{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 10px}
label{display:block;color:#2d2346;font-size:13.5px;font-weight:700;margin:20px 0 8px}
input:not([type=checkbox]),textarea,select{
  display:block;
  width:100%;
  border:1.5px solid #dfd7f0;
  border-radius:12px;
  background:#fcfbfe;
  color:var(--ink);
  font-size:15px;
  padding:14px 16px;
  resize:vertical;
  transition:border-color .15s,box-shadow .15s,background .15s;
  min-width:0;
}
input:not([type=checkbox]):focus,textarea:focus,select:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 4px rgba(124,58,237,.15);
  outline:none;
}
input::placeholder,textarea::placeholder{color:#8f85a8;font-size:14px}
.input-row{display:flex;gap:12px}
.input-row input{flex:1}
.primary,.secondary{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:12px;
  padding:14px 24px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.primary{
  background:linear-gradient(135deg,#7c3aed 0%,#c026d3 55%,#ec4899 100%);
  color:#fff;
  box-shadow:0 10px 22px -6px rgba(124,58,237,.48);
}
.primary:hover:not(:disabled){
  filter:brightness(1.06);
  box-shadow:0 14px 28px -6px rgba(219,39,119,.45);
  transform:translateY(-2px);
}
.primary:active:not(:disabled){transform:translateY(0)}
.secondary{
  border:1.5px solid #ddd4ee;
  background:#faf8ff;
  color:#453a63;
  font-size:13.5px;
  font-weight:600;
}
.secondary:hover:not(:disabled){background:#efe8fc;border-color:#c4b5fd;color:#4c1d95}
.hint{font-size:12.5px;line-height:1.65;color:#665c80;margin:10px 0 0}
.notice{
  margin-top:24px;
  padding:14px 18px;
  border-radius:12px;
  background:#f8f6fc;
  border:1px solid #ece6f7;
  font-size:12.5px;
  line-height:1.65;
  color:#5f5578;
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.choices{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:18px 0}
.choices label{margin:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
[role=status]{
  margin:16px 0 0;
  padding:12px 16px;
  border-radius:12px;
  background:#f4f0ff;
  border-left:4px solid var(--accent);
  color:#4c1d95;
  font-size:13.5px;
  font-weight:600;
  line-height:1.6;
}
[role=status]:empty{display:none}
[hidden]{display:none!important}

.result-head{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding:20px;
  border-radius:16px;
  background:linear-gradient(135deg,#f8f5ff 0%,#fff1f7 100%);
  border:1px solid #e7dcf9;
}
.result-head img{width:100px;height:100px;border-radius:14px;object-fit:cover;box-shadow:0 10px 24px rgba(76,29,149,.18)}
.result-head h3{font:800 20px/1.3 Manrope,sans-serif;letter-spacing:-.4px;margin:6px 0;color:var(--ink)}
.result-head .muted{margin:0}
h3{overflow-wrap:anywhere}
audio{width:100%;margin-top:20px;height:46px;accent-color:var(--accent);border-radius:12px}

.draft{padding:20px 0;border-bottom:1px solid var(--line)}
.draft:last-child{border-bottom:0}
.draft h3{margin:0 0 6px;font:700 17px Manrope,sans-serif;color:var(--ink)}
.draft .actions button{padding:10px 16px;font-size:13px}

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 0 48px}
.benefits article{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:22px;
  background:#fff;
  border:1px solid #e6def5;
  border-radius:18px;
  box-shadow:0 10px 28px -10px rgba(76,29,149,.1);
  transition:transform .18s,box-shadow .18s;
}
.benefits article:hover{transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(124,58,237,.18)}
.benefits article>span{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:42px;
  height:42px;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  border-radius:13px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 18px -4px rgba(124,58,237,.45);
}
.benefits article:nth-child(2)>span{background:linear-gradient(135deg,#ec4899,#f97316);box-shadow:0 8px 18px -4px rgba(236,72,153,.42)}
.benefits article:nth-child(3)>span{background:linear-gradient(135deg,#059669,#14b8a6);box-shadow:0 8px 18px -4px rgba(16,185,129,.42)}
.benefits h3{font:700 16px/1.3 Manrope,sans-serif;margin:0 0 6px;color:var(--ink)}
.benefits p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

.faq{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.45fr;gap:44px;padding:44px 0 56px}
.faq h2{font-size:28px}
.faq details{
  background:#fff;
  border:1px solid #e6def5;
  border-radius:14px;
  padding:16px 20px;
  margin-bottom:12px;
  box-shadow:0 4px 14px rgba(76,29,149,.04);
}
.faq summary{
  cursor:pointer;
  color:#2b2144;
  font-size:15px;
  font-weight:700;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.faq summary:after{content:'+';font:600 22px Manrope,sans-serif;color:var(--accent)}
.faq details[open] summary:after{content:'−'}
.faq details p{line-height:1.7;color:var(--muted);font-size:14px;margin:12px 0 2px}
.faq summary::-webkit-details-marker{display:none}

footer{
  max-width:1224px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:28px 32px 40px;
}
footer .brand{font-size:19px}
footer p,footer>span{font-size:12.5px;color:#665c80;margin:0}
footer button{background:#f3effd;border:1px solid #e3d7fb;border-radius:999px;padding:8px 14px;color:#4c1d95;font-size:12.5px;font-weight:600;margin-left:auto}
footer button:hover{background:#e7defc}
footer .manual-link{font-size:13px;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}

dialog{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--ink);
  padding:30px;
  max-width:520px;
  box-shadow:0 30px 90px rgba(34,15,61,.3);
}
dialog h2{margin-top:0;font-size:22px}
dialog p{font-size:14px;color:var(--muted);line-height:1.75}
dialog::backdrop{background:rgba(24,18,43,.52);backdrop-filter:blur(6px)}

.batch-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.batch-toolbar label{margin:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.batch-table-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:14px;margin-top:14px;background:#fff}
.batch-table{border-collapse:collapse;width:100%;text-align:left;font-size:13.5px}
.batch-table th{background:#f5f1fc;color:#4c3f6b;font-weight:700;font-size:12px;padding:13px 14px}
.batch-table td{padding:15px 14px;border-top:1px solid #eee8f6;vertical-align:top}
.batch-table td:first-child{width:68px;text-align:center}
.batch-table strong{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px;color:var(--ink);overflow-wrap:anywhere}
.batch-table a{font-size:12px;color:#6e638c;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:rgba(110,99,140,.3)}
.batch-state{width:30%;font-size:12.5px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}
.batch-state.ready,.batch-state.done{color:#15803d}
.batch-state.failed,.batch-state.stopped{color:#c2410c}
.batch-state.loading{color:#7c3aed}
.batch-state.duplicate{color:#6b7280}
.batch-progress{display:grid;gap:8px;margin-top:22px}
.batch-progress progress{width:100%;height:10px;accent-color:var(--accent);border-radius:999px}
#batch-results>select{max-width:460px}
.batch-cover-opt{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;font-size:13px;font-weight:600;color:#453a63;cursor:pointer}
.batch-packages{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.batch-packages a{
  background:linear-gradient(135deg,#059669,#10b981);
  border:0;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:14px 22px;
  border-radius:12px;
  text-align:center;
  white-space:normal;
  box-shadow:0 10px 22px -6px rgba(5,150,105,.45);
}
.batch-packages a:hover{filter:brightness(1.06);transform:translateY(-2px)}

@media(min-width:1250px){
  .hero-art{height:344px}
  .record{width:248px;height:248px;left:48px;top:50px}
  .record-label{inset:68px}
  .record-label>span{font-size:28px}
  .record-label small{font-size:5px}
  .tonearm{height:148px;right:58px;top:58px}
  .floating-note{top:132px;right:28px}
}
@media(max-width:1160px){
  header{gap:12px;padding:0 20px}
  .nav{padding:8px 10px;font-size:12.5px}
  .version{font-size:11.5px;padding:6px 10px}
}
@media(max-width:950px){
  header{padding:0 24px}
  .version{display:none}
  .tabs{flex-wrap:wrap}
  main{padding:0 24px}
  .hero{gap:28px}
  .hero-art{height:280px}
  .record{width:196px;height:196px;left:24px;top:46px}
  .record-label{inset:52px}
  .tonearm{right:28px;top:52px;height:114px}
  .floating-note{right:12px;font-size:28px}
  .art-sticker{font-size:11px;bottom:30px;left:12px}
  .art-caption{font-size:8px;left:20px}
  .sound{right:12px;gap:2px}
  .panel{padding:28px}
  .faq{gap:28px}
  .benefits{gap:16px}
}
@media(max-width:700px){
  header{height:76px;padding:0 18px}
  nav{gap:2px}
  .nav{padding:8px 10px;font-size:12px}
  .brand{font-size:21px}
  .logo{width:34px;height:34px;font-size:20px;margin-right:8px}
  main{padding:0 18px}
  .hero{grid-template-columns:1fr .82fr;gap:14px;padding:30px 0}
  .eyebrow{font-size:9.5px;letter-spacing:1px}
  h1{font-size:34px;letter-spacing:-1.6px;margin:16px 0}
  .hero-copy>p{font-size:13.5px}
  .hero-art{height:226px;border-radius:18px}
  .record{width:154px;height:154px;left:18px;top:42px;border-width:5px}
  .record-label{inset:41px}
  .record-label>span{font-size:19px;top:7px}
  .record-label small{font-size:3.5px;bottom:11px}
  .tonearm{height:93px;right:23px;top:48px;width:7px}
  .tonearm:before{width:18px;height:18px;border-width:5px;left:-6px}
  .tonearm:after{width:12px;height:22px;left:-2px}
  .art-caption{top:14px;left:15px;font-size:7px}
  .art-bottom{left:15px;right:15px;font-size:6.5px;bottom:10px}
  .art-sticker{padding:8px 10px;font-size:10px;bottom:25px}
  .art-sticker>span{font-size:18px;margin-right:5px}
  .floating-note{font-size:24px;top:110px;right:9px}
  .hero-tags{gap:8px;margin-top:18px}
  .hero-tags span{font-size:11px;padding:6px 10px}
  .hero-tags span:last-child{display:none}
  .tabs button{font-size:12.5px;padding:12px 10px}
  .panel{padding:24px}
  h2{font-size:23px}
  .benefits{grid-template-columns:1fr;gap:14px;padding:28px 0 32px}
  .faq{grid-template-columns:1fr;gap:20px;padding:32px 0 40px}
  footer{padding:24px 18px;gap:14px}
  .result-head{padding:16px}
  .result-head h3{font-size:17px}
  .result-head img{width:76px;height:76px}
}
@media(max-width:520px){
  header{height:72px}
  nav{display:none}
  .version{display:flex;font-size:11px;padding:6px 10px}
  main{padding:0 14px}
  .hero{grid-template-columns:1fr;padding:24px 0 26px;gap:20px}
  .hero-copy{text-align:center}
  .eyebrow{justify-content:center;font-size:9.5px}
  h1{font-size:36px;letter-spacing:-1.8px;margin:14px 0}
  .hero-copy>p{font-size:14px;line-height:1.7}
  .hero-tags{justify-content:center;margin-top:18px;gap:8px}
  .hero-tags span{font-size:11.5px}
  .hero-tags span:last-child{display:inline}
  .hero-art{display:none}
  .workspace{border-radius:18px}
  .tabs{padding:8px;gap:5px;display:grid;grid-template-columns:1fr 1fr}
  .tabs button{font-size:12.5px;padding:12px 8px;border-radius:10px}
  .panel{padding:22px 16px}
  h2{font-size:22px}
  .input-row{flex-direction:column;gap:10px}
  .primary,.secondary{font-size:13px;padding:13px 16px;white-space:normal}
  .two{grid-template-columns:1fr;gap:0}
  .choices{align-items:flex-start}
  .desktop{display:none}
  footer{padding:22px 14px;gap:12px}
  footer>span{width:100%}
  footer button{margin-left:0}
  .result-head{padding:14px;gap:14px}
  .result-head h3{font-size:15px}
  .result-head img{width:64px;height:64px}
  .batch-toolbar{flex-direction:column;align-items:flex-start;gap:8px}
  .batch-table{min-width:290px}
  .batch-table td,.batch-table th{padding:11px 9px}
  .batch-table td:first-child{width:38px}
  .batch-state{width:32%;font-size:11.5px}
}
.ai-box,.suno-auto-box{
  margin-top:22px;
  padding:22px 24px;
  border-radius:18px;
  background:linear-gradient(135deg,#f8f5ff 0%,#fff4f8 100%);
  border:1.5px solid #e4daf7;
}
.suno-auto-box{
  background:linear-gradient(135deg,#f3f8ff 0%,#f7f3ff 100%);
  border-color:#d9e2fa;
}
.box-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.box-head .hint{margin:0}
.box-head.spaced{margin-top:26px}
.ext-tools{display:flex;gap:8px;flex-wrap:wrap}
.compact-btn{padding:8px 14px;font-size:12.5px}
.inline-check{display:inline-flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:13px;font-weight:600;color:#453a63;cursor:pointer}
.accent-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:12px;
  padding:14px 22px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#059669 0%,#0d9488 100%);
  box-shadow:0 10px 22px -6px rgba(5,150,105,.45);
}
.accent-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px)}
.pipeline-box{
  margin-top:18px;
  padding:16px 18px;
  border-radius:14px;
  background:#fff;
  border:1px solid #dfd7f3;
}
.pipeline-msg{margin:0;font-size:13.5px;font-weight:700;color:#4c1d95}
.auto-songs{display:grid;gap:10px;margin-top:12px}
.auto-song-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:12px;
  background:#faf8ff;
  border:1px solid #e6def5;
}
.auto-song-item strong{display:block;font-size:14px;color:var(--ink)}
.auto-song-item small{display:block;font-size:12px;color:#5b5275}
.auto-song-actions{display:flex;gap:8px;flex-wrap:wrap}
.auto-song-actions a,.auto-song-actions button{padding:8px 13px;font-size:12.5px}
dialog ol{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.75}
dialog code{background:#f4effd;padding:2px 6px;border-radius:6px;color:#5b21b6;font-size:12.5px}
.chat-shell{
  margin-top:18px;
  border:1.5px solid #dfd4f5;
  border-radius:16px;
  background:#fff;
  padding:14px;
  display:grid;
  gap:12px;
}
.chat-log{
  max-height:460px;
  min-height:220px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:6px 4px 4px;
}
.chat-msg{
  max-width:88%;
  padding:11px 14px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-msg.assistant{
  align-self:flex-start;
  background:#f5f0ff;
  border:1px solid #e4daf8;
  color:var(--ink);
}
.chat-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#7c3aed,#db2777);
  color:#fff;
}
.chat-msg small{
  display:inline-block;
  margin-top:6px;
  padding:3px 9px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:11.5px;
  font-weight:700;
}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{
  border:1px solid #dfd5f6;
  background:#faf7ff;
  color:#4c1d95;
  border-radius:999px;
  padding:7px 13px;
  font-size:12.5px;
  font-weight:700;
}
.chip-btn:hover:not(:disabled){background:#efe7fe;border-color:#c4b5fd}
.chat-compose{display:flex;gap:10px;align-items:flex-end}
.chat-compose textarea{flex:1;min-height:54px}
.queue-box{
  margin-top:22px;
  padding:20px 22px;
  border-radius:18px;
  background:#faf8ff;
  border:1.5px solid #e4daf7;
}
.queue-pill{
  display:inline-block;
  margin-left:8px;
  padding:3px 10px;
  border-radius:999px;
  background:#ede9fe;
  color:#5b21b6;
  font-size:11px;
  letter-spacing:.3px;
}
.song-queue{display:grid;gap:10px;margin-top:12px;max-height:330px;overflow-y:auto}
.queue-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid #e5dcf6;
}
.queue-item.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.queue-item-info{flex:1;min-width:210px}
.queue-item-info strong{display:block;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.queue-item-info p{margin:3px 0 0;font-size:12px;color:#5b5275;overflow-wrap:anywhere}
.queue-item-status{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:#6d28d9}
.queue-item-status.done{color:#15803d}
.queue-item-status.error{color:#c2410c}
.queue-item-actions{display:flex;gap:8px;flex-wrap:wrap}
.queue-item-actions button{padding:7px 12px;font-size:12px}
.status-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge.green{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.studio-bar{display:grid;gap:12px}
.studio-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.studio-field{flex:1;min-width:220px}
.studio-field label{margin-top:0}
.studio-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.project-memory-panel{
  margin:4px 0;
  padding:16px 18px;
  border-radius:14px;
  background:#fff;
  border:1.5px solid #dcd1f5;
}
.compose-btns{display:flex;gap:8px;flex-direction:column}
.chat-msg.assistant{max-width:94%}
.chat-msg.streaming::after{
  content:'▍';
  margin-left:3px;
  color:var(--accent);
  animation:blinkCursor .9s steps(2,start) infinite;
}
@keyframes blinkCursor{to{visibility:hidden}}
.chat-prose{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-cards-wrap{display:grid;gap:12px;margin-top:12px}
.song-card,.seo-card{
  border:1.5px solid #ddd2f6;
  border-radius:14px;
  background:#fff;
  padding:14px 16px;
  display:grid;
  gap:10px;
}
.seo-card{background:#fdfcff;border-color:#cfe2ff}
.song-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:6px;
  border-bottom:1px solid #efe9fc;
}
.song-card-head strong{font-size:15px;color:var(--ink)}
.dup-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #fdba74;
  color:#9a3412;
  font-size:11.5px;
  font-weight:700;
}
.ok-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:11.5px;
  font-weight:700;
}
.song-block{
  padding:9px 11px;
  border-radius:10px;
  background:#faf8ff;
  border:1px solid #eae2fa;
}
.song-block-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.song-block-head span{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#5b21b6;
}
.copy-mini{
  border:1px solid #d7caf5;
  background:#fff;
  color:#4c1d95;
  border-radius:8px;
  padding:4px 10px;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
}
.copy-mini:hover:not(:disabled){background:#efe7fe;border-color:#a78bfa}
.song-block-val{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.song-block-lyrics{
  max-height:240px;
  overflow-y:auto;
  font-family:inherit;
}
.song-card-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.song-card-actions button{padding:8px 13px;font-size:12px}
.field-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.field-head label{margin:0}
.library-toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:14px 0 18px;
  padding:14px 16px;
  border-radius:14px;
  background:#faf8ff;
  border:1.5px solid #e4daf7;
}
.library-filter-item{min-width:210px}
.library-filter-item.grow{flex:1}
.library-filter-item label{margin-top:0}
.usage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin:14px 0 16px;
}
.usage-card{
  background:#fff;
  border:1.5px solid #dce5fb;
  border-radius:14px;
  padding:14px;
  display:grid;
  gap:4px;
}
.usage-card span{font-size:11.5px;font-weight:700;color:#5b5275;text-transform:uppercase}
.usage-card strong{font-size:20px;color:#312e81}
.usage-card small{font-size:11.5px;color:#64748b}
.usage-table{margin-top:10px;font-size:12.5px}
.admin-clear-wrap{display:flex;align-items:flex-end;padding-bottom:8px}
.admin-projects-list{display:grid;gap:10px;margin-top:12px}
.admin-proj-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid #e4daf7;
}
.admin-proj-item strong{display:block;font-size:14px}
.admin-proj-item small{display:block;font-size:12px;color:#5b5275}
.ext-hub-grid{display:grid;gap:16px;margin-top:16px}
.ext-card{
  background:#fff;
  border:1.5px solid #dfd4f5;
  border-radius:16px;
  padding:20px 22px;
  display:grid;
  gap:14px;
  box-shadow:0 8px 24px -12px rgba(91,33,182,.14);
}
.ext-card-slot{
  background:linear-gradient(135deg,#faf8ff 0%,#fdfaff 100%);
  border-style:dashed;
  border-color:#d4c7f3;
  box-shadow:none;
}
.ext-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px solid #efe9fc;
}
.ext-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.ext-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#7c3aed 0%,#db2777 100%);
  color:#fff;
  font-size:20px;
  flex-shrink:0;
}
.ext-icon.slot{background:#ede9fe;color:#5b21b6}
.ext-title-wrap h3{margin:0;font-size:17px;color:var(--ink)}
.ext-version-pill{
  display:inline-block;
  margin-top:3px;
  padding:2px 9px;
  border-radius:999px;
  background:#f3edff;
  border:1px solid #dfd3fa;
  color:#5b21b6;
  font-size:11.5px;
  font-weight:700;
}
.ext-feature-list{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:6px;
  font-size:13.5px;
  color:#3f345d;
  line-height:1.55;
}
.ext-feature-list code{background:#f4effd;padding:1px 6px;border-radius:6px;color:#5b21b6;font-size:12px}
.ext-tags{display:flex;flex-wrap:wrap;gap:8px}
.ext-tags span{
  font-size:11.5px;
  font-weight:700;
  color:#4c1d95;
  background:#f7f3ff;
  border:1px solid #e5daf9;
  border-radius:999px;
  padding:4px 11px;
}
.ext-path-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:11px 14px;
  border-radius:12px;
  background:#faf8ff;
  border:1px solid #e6def7;
}
.ext-path-meta{display:grid;gap:4px;min-width:0}
.ext-path-code{
  font-size:12.5px;
  color:#4c1d95;
  background:#fff;
  border:1px solid #e2d8f8;
  padding:4px 9px;
  border-radius:8px;
  overflow-wrap:anywhere;
}
.ext-icon.sincro-icon{background:linear-gradient(135deg,#0ea5e9 0%,#7c3aed 65%,#db2777 100%)}
.sincro-workspace{
  margin-top:26px;
  padding:24px;
  border-radius:18px;
  background:#faf8ff;
  border:1.5px solid #dfd4f5;
  display:grid;
  gap:18px;
  scroll-margin-top:96px;
}
.sincro-ws-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid #e8dff9;
}
.sincro-ws-head h3{margin:4px 0 0;font:800 22px/1.2 Manrope,sans-serif;color:var(--ink)}
.sincro-ws-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sincro-provider-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#92400e;
  background:#fef3c7;
  border:1px solid #fde68a;
}
.sincro-provider-pill:before{content:'●';font-size:8px}
.sincro-provider-pill.ready{color:#166534;background:#dcfce7;border-color:#bbf7d0}
.sincro-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.sincro-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid #e6def7;
  color:var(--muted);
}
.sincro-step b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#efe8fc;
  color:#5b21b6;
  font-size:13px;
  flex-shrink:0;
}
.sincro-step span{display:grid;line-height:1.25}
.sincro-step strong{font-size:13px;color:var(--ink)}
.sincro-step small{font-size:11.5px;color:var(--muted)}
.sincro-step.active{border-color:var(--accent);box-shadow:0 6px 18px -10px rgba(124,58,237,.35)}
.sincro-step.active b{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}
.sincro-step.complete b{background:#10b981;color:#fff}
.sincro-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.sincro-subcard{
  background:#fff;
  border:1.5px solid #e4daf7;
  border-radius:16px;
  padding:18px;
  display:grid;
  gap:12px;
  align-content:start;
}
.sincro-subcard h4,.sincro-results-header h4,.sincro-progress-card h4{margin:4px 0 0;font:700 16px Manrope,sans-serif;color:var(--ink)}
.sincro-drop-zone{
  display:grid;
  place-items:center;
  text-align:center;
  gap:6px;
  width:100%;
  min-height:178px;
  padding:22px 16px;
  border:2px dashed #cbbcf2;
  border-radius:14px;
  background:#faf8ff;
  color:#3f345d;
}
.sincro-drop-zone:hover,.sincro-drop-zone.dragging{
  border-color:var(--accent);
  background:#f2ebff;
}
.sincro-upload-mark{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#db2777);
  color:#fff;
  font-size:22px;
  margin-bottom:4px;
}
.sincro-drop-zone small{font-size:11.5px;color:var(--muted)}
.sincro-selected-file{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f6f2ff;
  border:1px solid #dfd3fa;
}
.sincro-file-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#7c3aed;
  color:#fff;
  font-size:18px;
  flex-shrink:0;
}
.sincro-file-copy{flex:1;min-width:0;display:grid;gap:2px}
.sincro-file-copy strong{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.sincro-file-copy span,.sincro-file-copy small{font-size:12px;color:var(--muted)}
.sincro-library-pull{display:flex;gap:8px;align-items:center}
.sincro-library-pull select{flex:1;padding:10px 12px;font-size:13px}
.sincro-lyrics-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.sincro-lyrics-footer .hint{margin:0}
.sincro-queue-box{
  background:#fff;
  border:1.5px solid #e4daf7;
  border-radius:16px;
  padding:16px 18px;
  display:grid;
  gap:12px;
}
.sincro-queue-list{display:grid;gap:8px;max-height:260px;overflow-y:auto}
.sincro-queue-row{
  display:grid;
  grid-template-columns:34px 1.2fr 1.2fr auto auto auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1.5px solid #eae2fa;
  background:#fcfbfe;
  cursor:pointer;
}
.sincro-queue-row:hover{border-color:#c4b5fd}
.sincro-queue-row.active{border-color:var(--accent);background:#f7f3ff}
.sincro-q-num{font:700 12px Manrope,sans-serif;color:var(--accent)}
.sincro-q-col{min-width:0;display:grid;gap:1px}
.sincro-q-col strong{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.sincro-q-col span{font-size:11.5px;color:var(--muted)}
.sincro-q-status{
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  background:#ede9fe;
  color:#5b21b6;
  white-space:nowrap;
}
.sincro-q-status.done{background:#dcfce7;color:#166534}
.sincro-q-status.error{background:#ffedd5;color:#c2410c}
.sincro-q-status.processing{background:#dbeafe;color:#1d4ed8}
.sincro-queue-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.sincro-control-strip{
  background:#fff;
  border:1.5px solid #e4daf7;
  border-radius:16px;
  padding:16px 18px;
  display:grid;
  gap:12px;
}
.sincro-control-fields{
  display:grid;
  grid-template-columns:1.2fr 180px 1.3fr;
  gap:12px;
  align-items:end;
}
.sincro-field{margin:0;display:grid;gap:6px}
.sincro-field span{font-size:12px;font-weight:700;color:#453a63}
.sincro-field select{padding:10px 12px;font-size:13.5px}
.sincro-mode-hint{margin:0 0 8px}
.sincro-control-strip .actions{margin-top:4px;justify-content:flex-end}
.sincro-progress-card{
  background:#fff;
  border:1.5px solid #d4c4f7;
  border-radius:16px;
  padding:18px;
  display:grid;
  gap:12px;
}
.sincro-progress-track{
  height:10px;
  border-radius:999px;
  background:#ede9fe;
  overflow:hidden;
}
.sincro-progress-track span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#7c3aed,#db2777);
  transition:width .25s ease;
}
.sincro-progress-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sincro-progress-bottom .hint{margin:0}
.sincro-results{
  background:#fff;
  border:1.5px solid #d8cbf6;
  border-radius:16px;
  padding:20px;
  display:grid;
  gap:16px;
}
.sincro-results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.sincro-metrics{display:flex;gap:10px;flex-wrap:wrap}
.sincro-metrics span{
  padding:5px 11px;
  border-radius:999px;
  background:#f4effd;
  border:1px solid #dfd3fa;
  font-size:12.5px;
  color:#4c1d95;
}
.sincro-result-toolbar{
  display:grid;
  grid-template-columns:1fr 1fr 220px;
  gap:12px;
  align-items:end;
}
.sincro-result-toolbar label{margin:0;display:grid;gap:6px;font-size:12.5px}
.sincro-result-toolbar input{padding:10px 12px;font-size:13.5px}
.sincro-offset-row{display:flex;gap:8px;align-items:center}
.sincro-editor-card{
  border:1.5px solid #e4daf7;
  border-radius:14px;
  overflow:hidden;
}
.sincro-editor-head{
  display:grid;
  grid-template-columns:42px 92px 92px 1fr 56px;
  gap:8px;
  padding:10px 12px;
  background:#f5f1fc;
  font-size:11.5px;
  font-weight:800;
  color:#4c3f6b;
  text-transform:uppercase;
}
.sincro-cue-list{max-height:360px;overflow-y:auto;display:grid}
.sincro-cue-row{
  display:grid;
  grid-template-columns:42px 92px 92px 1fr 56px;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-top:1px solid #eee8f8;
}
.sincro-cue-row.current{background:#f3e8ff}
.sincro-cue-index{font-size:12px;font-weight:700;color:var(--accent)}
.sincro-cue-row input{padding:7px 9px;font-size:13px;border-radius:8px}
.sincro-cue-play{
  padding:7px 0;
  border-radius:8px;
  border:1.5px solid #ddd4ee;
  background:#faf8ff;
  color:#4c1d95;
  font-weight:700;
}
.sincro-cue-play:hover:not(:disabled){background:#ede9fe;border-color:var(--accent)}
.sincro-export-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid #eee8f8;
}
.sincro-export-bar .hint{margin:4px 0 0}
.sincro-export-buttons{display:flex;gap:8px;flex-wrap:wrap}
.sincro-export-btn small{font-weight:500;opacity:.85}
.sincro-status-msg{margin:0}
.sincro-status-msg.is-error{border-left-color:#ea580c;background:#fff7ed;color:#9a3412}
.sincro-dialog{max-width:580px;width:calc(100% - 24px)}
.sincro-dialog-section{
  margin-top:14px;
  padding:14px;
  border-radius:12px;
  background:#faf8ff;
  border:1px solid #e6def7;
}
.sincro-dialog-section label{margin-top:10px}
.sincro-dialog-section .actions{margin-top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.account-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1.5px solid #e4daf7;border-radius:999px;padding:4px 10px}
.user-chip-name{font-size:13px;font-weight:700;color:#2c1d4c;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#fff,#f6f1ff);border:1.5px solid #dfd3fa;border-radius:16px;padding:18px 20px;margin-bottom:18px}
.auth-banner h3{margin:0 0 4px;font-size:18px}
.auth-tabs{display:flex;gap:8px;margin:12px 0 14px;flex-wrap:wrap}
.auth-tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.auth-dialog{max-width:480px;width:calc(100% - 24px)}
.auth-form{display:grid;gap:10px}
.auth-form label{margin-top:4px}
.auth-divider{border:0;border-top:1px solid #e6def7;margin:14px 0}
.sessions-list{display:grid;gap:10px;margin-top:10px}
.session-item{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid #e6def7;border-radius:10px;background:#faf8ff}
.session-item strong{font-size:13px;display:block}
.session-item small{font-size:12px;color:var(--muted)}
.admin-users-actions{display:flex;gap:6px;flex-wrap:wrap}
.reset-token-box{margin-top:12px;padding:12px;border-radius:10px;border:1.5px dashed #a78bfa;background:#f5f3ff}
.reset-token-box code{display:block;margin-top:6px;padding:8px;background:#fff;border-radius:8px;word-break:break-all;font-size:13px}
@media(max-width:780px){
  .sincro-columns,.sincro-steps,.sincro-control-fields,.sincro-result-toolbar{grid-template-columns:1fr}
  .sincro-queue-row{grid-template-columns:30px 1fr auto;gap:8px}
  .sincro-editor-head,.sincro-cue-row{grid-template-columns:34px 72px 72px 1fr 44px;gap:6px}
}
@media(max-width:520px){
  .chat-compose{flex-direction:column;align-items:stretch}
  .chat-msg{max-width:97%}
  .ai-box,.queue-box,.suno-auto-box{padding:16px}
  .studio-row{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}