* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --ink: #03040a;
  --deep: #070913;
  --panel: rgba(10, 13, 26, 0.78);
  --panel-strong: rgba(13, 17, 34, 0.94);
  --text: #f6f0e8;
  --muted: rgba(246, 240, 232, 0.66);
  --line: rgba(255, 255, 255, 0.13);
  --hot: #dcff2f;
  --cyan: #35f7ff;
  --rose: #ff2d7a;
  --violet: #7b61ff;
  font-family: Manrope, ui-sans-serif, sans-serif;
  background: var(--ink);
  color: var(--text);
}

body { margin: 0; min-height: 100vh; background: var(--ink); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .72; }

.page-shell {
  position: relative; min-height: 100vh; overflow: hidden;
  background:
    radial-gradient(circle at 80% 16%, rgba(53,247,255,.18), transparent 24rem),
    radial-gradient(circle at 16% 82%, rgba(255,45,122,.24), transparent 27rem),
    radial-gradient(circle at 48% 44%, rgba(123,97,255,.16), transparent 30rem),
    linear-gradient(135deg, #02030a 0%, #090d1c 45%, #05050a 100%);
}
.page-shell::before { content:""; position:absolute; inset:-20%; z-index:0; background: linear-gradient(115deg, transparent 0 42%, rgba(220,255,47,.11) 43%, transparent 45% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 92px); transform: rotate(-7deg); pointer-events:none; }
.grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42; background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.09) 0 1px, transparent 1px), radial-gradient(circle at 75% 65%, rgba(255,255,255,.06) 0 1px, transparent 1px); background-size:5px 5px, 7px 7px; mix-blend-mode:screen; }

.topbar { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px clamp(18px, 4vw, 58px); }
.brand { display:inline-flex; align-items:center; gap:12px; border:0; background:transparent; color:var(--text); font-weight:900; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(220,255,47,.55); border-radius:14px; color:var(--ink); background:var(--hot); font-family:"Archivo Black", sans-serif; box-shadow:0 0 34px rgba(220,255,47,.36); }
.brand-tag { padding:5px 9px; border:1px solid rgba(53,247,255,.32); border-radius:999px; color:var(--cyan); font-family:"JetBrains Mono", monospace; font-size:11px; }
.tab-bar { display:flex; align-items:center; gap:7px; padding:8px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.045); backdrop-filter:blur(18px); }
.tab { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:10px 13px; color:rgba(246,240,232,.68); background:transparent; font-size:13px; font-weight:900; }
.tab.is-active { color:#05060a; background:linear-gradient(135deg, var(--hot), var(--cyan)); box-shadow:0 14px 34px rgba(53,247,255,.16); }
.tab-dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-actions button, .primary-btn { border:0; border-radius:999px; color:#05060a; background:linear-gradient(135deg, var(--hot), #8dff7a 52%, var(--cyan)); font-weight:900; box-shadow:0 0 0 1px rgba(255,255,255,.24) inset, 0 16px 44px rgba(220,255,47,.24), 0 0 34px rgba(53,247,255,.18); }
.nav-actions button { padding:12px 17px; }
.ghost-btn, .ghost-mini { border:1px solid rgba(255,255,255,.16); border-radius:999px; color:var(--text); background:rgba(255,255,255,.055); font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ghost-btn { padding:14px 20px; }
.ghost-mini { padding:9px 12px; font-size:12px; }
.primary-btn { padding:15px 22px; }

.demo-ribbon { position:relative; z-index:4; display:flex; align-items:center; gap:14px; margin:0 clamp(18px, 4vw, 58px) 18px; padding:12px 16px; border:1px solid rgba(53,247,255,.18); border-radius:18px; background:rgba(53,247,255,.06); color:var(--muted); font-size:13px; }
.demo-ribbon strong { color:var(--cyan); font-family:"JetBrains Mono", monospace; }
.demo-ribbon button { margin-left:auto; border:1px solid rgba(220,255,47,.32); border-radius:999px; color:var(--hot); background:transparent; padding:8px 12px; font-weight:900; }

.workspace { position:relative; z-index:2; padding:18px clamp(18px, 5vw, 76px) 80px; }
.tab-pane[hidden] { display:none; }
.panel, .stat-card, .preview-panel { border:1px solid rgba(255,255,255,.14); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)), var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(22px); }
.pane-head { margin:26px 0 32px; }
.eyebrow, .kicker { color:var(--hot); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; }
.eyebrow::before { content:""; width:42px; height:1px; background:var(--hot); box-shadow:0 0 16px var(--hot); }
.pane-title { max-width:980px; margin:0; font-family:"DM Serif Display", Georgia, serif; font-size:clamp(54px, 7.2vw, 118px); font-weight:400; letter-spacing:-.075em; line-height:.9; }
.pane-title-mid { max-width:none; font-size:clamp(30px, 3.6vw, 56px); letter-spacing:-.055em; line-height:1; white-space:nowrap; }
.hero-title { max-width:1060px; }
.pane-sub { max-width:none; color:var(--muted); font-size:clamp(13px, 1vw, 16px); line-height:1.45; white-space:nowrap; }
.hero-actions, .form-actions, .result-actions, .modal-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }

.dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.dash-stats { grid-column:1 / -1; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; }
.stat-card { padding:22px; min-height:150px; }
.big-stat { display:block; margin:10px 0; font-family:"Archivo Black", sans-serif; font-size:clamp(34px, 4vw, 58px); letter-spacing:-.05em; }
.muted-line { color:var(--muted); font-size:13px; }
.stat-accent { border-color:rgba(220,255,47,.34); box-shadow:0 0 60px rgba(220,255,47,.1); }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; font-weight:900; }
.segmented { display:flex; gap:6px; padding:5px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); }
.segmented button { border:0; border-radius:999px; padding:7px 11px; color:var(--muted); background:transparent; font-weight:900; font-size:12px; }
.segmented button.is-active { color:#05060a; background:var(--hot); }
.chart-bars, .sparkline-bars { display:flex; align-items:end; gap:7px; height:250px; padding:18px 22px 8px; }
.chart-bars i, .sparkline-bars i { flex:1; min-width:4px; border-radius:999px 999px 0 0; background:linear-gradient(180deg, var(--cyan), var(--violet)); box-shadow:0 0 18px rgba(53,247,255,.18); animation:rise .52s both; }
.sparkline-bars { height:90px; padding:0; gap:5px; }
.chart-caption { display:flex; justify-content:space-between; padding:0 22px 20px; color:var(--muted); }
.rank-row, .activity-row { width:100%; display:grid; grid-template-columns:42px 54px 1fr auto auto; align-items:center; gap:12px; border:0; border-top:1px solid rgba(255,255,255,.08); padding:15px 20px; color:var(--text); background:transparent; text-align:left; }
.rank-name, .activity-row span { display:grid; gap:4px; }
.rank-name em, .activity-row em { color:var(--muted); font-style:normal; font-size:12px; }
.rank-score { font-family:"Archivo Black"; font-size:24px; }
.opp-card, .activity-row { border-top:1px solid rgba(255,255,255,.08); }
.opp-card { display:flex; justify-content:space-between; gap:18px; padding:18px 20px; }
.opp-card strong { display:block; margin:6px 0; }
.opp-card p { margin:0; color:var(--muted); line-height:1.55; }

.pane-head-marquee { position:relative; }
.marquee-rule { display:flex; align-items:center; gap:14px; margin-bottom:24px; color:rgba(246,240,232,.55); font-family:"JetBrains Mono", monospace; font-size:11px; }
.rule-line { flex:1; height:1px; background:rgba(255,255,255,.14); }
.marquee-grid { display:grid; grid-template-columns:minmax(360px, 1fr) auto minmax(280px, 1fr); gap:34px; align-items:center; }
.marquee-headline { min-width:0; justify-self:start; }
.marquee-create { justify-self:center; display:grid; place-items:center; }
.hero-create-btn { min-width:180px; padding:16px 28px; white-space:nowrap; }
.marquee-aside { justify-self:end; }
.marquee-title { max-width:560px; font-size:clamp(38px, 4vw, 64px); letter-spacing:-.065em; line-height:1; }
.title-row { display:inline-flex; align-items:baseline; gap:.08em; flex-wrap:wrap; }
.marquee-empty-zone { min-height:315px; display:grid; place-items:center; align-content:center; justify-items:center; gap:12px; text-align:center; }
.marquee-empty-zone strong { color:var(--text); font-size:24px; font-weight:900; }
.marquee-empty-zone span { max-width:390px; color:rgba(246,240,232,.72); font-size:15px; line-height:1.7; }
.hero-empty-btn { min-width:230px; padding:18px 32px; font-size:16px; }
.marquee-title em { color:var(--hot); font-style:italic; }
.marquee-aside { display:grid; gap:14px; }
.marquee-pulse, .marquee-whisper { border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:22px; background:linear-gradient(180deg, rgba(8,12,24,.9), rgba(12,18,35,.72)); box-shadow:0 20px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.marquee-pulse .big-stat { margin:12px 0 8px; font-size:clamp(40px, 4.2vw, 62px); }
.marquee-pulse .kicker { color:var(--hot); font-size:13px; letter-spacing:.12em; }
.marquee-pulse .muted-line { color:rgba(246,240,232,.78); }
.pulse-foot { margin-bottom:14px; }
.pulse-head, .pulse-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.whisper-quote { color:var(--text); line-height:1.6; }
.whisper-attr { color:var(--muted); font-size:12px; }
.pane-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; padding:18px 20px; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:rgba(255,255,255,.04); }
.meta-cell { display:grid; gap:4px; }
.meta-cell strong { font-family:"Archivo Black"; font-size:26px; }
.meta-cell span { color:var(--muted); font-size:12px; }
.meta-vsep { width:1px; background:rgba(255,255,255,.12); }
.meta-cell-accent strong { color:var(--hot); }

.library-tools { display:grid; grid-template-columns:1fr 170px 180px auto; gap:12px; padding:14px; margin-bottom:18px; }
input, select, textarea { width:100%; border:1px solid rgba(255,255,255,.13); border-radius:16px; color:var(--text); background:rgba(2,3,10,.56); padding:13px 14px; outline:none; }
textarea { resize:vertical; }
.library-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.library-card { overflow:hidden; transition:transform .2s ease, border-color .2s ease; }
.library-card:hover { transform:translateY(-4px); border-color:rgba(53,247,255,.32); }
.library-portrait-wrap { position:relative; padding:12px 12px 0; }
.library-portrait { height:250px; border-radius:24px; box-shadow:0 22px 60px rgba(0,0,0,.32); }
.library-rank { position:absolute; left:26px; top:26px; z-index:2; padding:7px 10px; border-radius:999px; background:rgba(2,3,10,.54); color:var(--hot); font-family:"JetBrains Mono"; font-size:11px; }
.library-meta { padding:18px; }
.library-name { display:grid; gap:5px; }
.library-name strong { font-size:22px; }
.library-genre, .library-desc { color:var(--muted); }
.library-desc { min-height:50px; line-height:1.55; }
.library-tags, .profile-tags, .result-tags { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.library-tags span, .profile-tags span, .result-tags span, .preview-chip, .placeholder-tag { border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:7px 10px; color:rgba(246,240,232,.78); background:rgba(255,255,255,.045); font-size:12px; font-weight:900; }
.library-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:15px 0; }
.library-stats div { border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:10px; }
.library-stats strong { display:block; font-family:"Archivo Black"; }
.library-stats span { color:var(--muted); font-size:11px; }
.card-actions { display:grid; grid-template-columns:minmax(0, 1fr) minmax(148px, auto); gap:10px; align-items:center; margin-top:18px; }
.card-actions .library-cta { grid-column:1 / -1; justify-self:center; min-width:168px; padding:14px 22px; font-size:14px; }
.card-actions .ghost-btn { padding:12px 16px; justify-content:center; }
.library-cta { border:0; border-radius:999px; padding:11px 14px; color:#05060a; background:var(--hot); font-weight:900; }
.empty-state { display:grid; place-items:center; gap:12px; padding:44px; border:1px dashed rgba(255,255,255,.2); border-radius:26px; color:var(--muted); text-align:center; }
.empty-state strong { color:var(--text); font-size:22px; }
.empty-state.inline { padding:26px; }

.portrait-virtual { --p1:#35f7ff; --p2:#ff2d7a; --p3:#dcff2f; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.16), transparent 18%), linear-gradient(135deg, color-mix(in srgb, var(--p1), transparent 12%), color-mix(in srgb, var(--p2), transparent 18%) 55%, color-mix(in srgb, var(--p3), transparent 16%)); }
.portrait-virtual::before { content:""; position:absolute; inset:10%; border:1px solid rgba(255,255,255,.26); border-radius:40% 60% 45% 55%; box-shadow:0 0 60px color-mix(in srgb, var(--p1), transparent 55%); animation:pulse-ring 5s ease-in-out infinite; }
.portrait-virtual::after { content:""; position:absolute; inset:auto 18% 0; height:38%; background:linear-gradient(135deg, rgba(3,4,10,.72), rgba(255,255,255,.16)); clip-path:polygon(24% 0, 76% 0, 100% 100%, 0 100%); }
.virtual-face { position:relative; z-index:1; width:40%; aspect-ratio:1 / 1.25; border-radius:48% 48% 42% 42%; background:linear-gradient(180deg, #ffe0d2, #b9797c); box-shadow:0 0 32px rgba(255,255,255,.22); }
.virtual-face::before { content:""; position:absolute; left:-22%; right:-22%; top:-26%; height:62%; border-radius:55% 45% 42% 58%; background:linear-gradient(135deg, #05060a, color-mix(in srgb, var(--p2), #05060a 45%)); }
.virtual-face::after { content:""; position:absolute; left:50%; top:43%; width:118%; height:16%; transform:translateX(-50%) skewX(-12deg); border-radius:999px; background:linear-gradient(90deg, var(--p1), var(--p3)); box-shadow:0 0 28px var(--p1); }
.mini-portrait, .activity-portrait { width:48px; height:48px; border-radius:16px; flex:0 0 auto; }
.activity-portrait { width:42px; height:42px; }
.work-cover, .proposal-avatar { width:86px; height:86px; border-radius:22px; flex:0 0 auto; }
.result-portrait { width:160px; height:160px; border-radius:30px; }

.create-grid, .ai-grid { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr); gap:22px; align-items:start; }
.create-form, .ai-form { padding:22px; }
.create-form .form-actions { justify-content:center; gap:14px; padding-top:14px; margin-top:8px; }
#createSubmitBtn { min-width:220px; padding:18px 30px; font-size:16px; }
.create-form .form-actions .ghost-btn { padding:16px 22px; }
.field { border:0; padding:0; margin:0 0 18px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
legend { margin-bottom:9px; color:var(--text); font-weight:900; }
.legend-num { color:var(--hot); font-family:"JetBrains Mono"; margin-right:8px; }
.hint { color:var(--muted); font-size:12px; }
.avatar-picker { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.avatar-tile { display:grid; gap:7px; justify-items:center; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:10px; color:var(--muted); background:rgba(255,255,255,.035); font-weight:900; }
.avatar-tile.is-active { border-color:var(--hot); color:var(--hot); box-shadow:0 0 30px rgba(220,255,47,.1); }
.chip-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.chip-add, .quick-tags button, .chip { border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--text); background:rgba(255,255,255,.05); padding:10px 13px; font-weight:900; }
.quick-tags { display:flex; flex-wrap:wrap; gap:7px; margin:9px 0; }
.quick-tags button { padding:7px 10px; color:var(--cyan); font-size:12px; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; }
.chip { color:#05060a; background:linear-gradient(135deg, var(--cyan), var(--hot)); }
.create-preview { position:sticky; top:20px; display:grid; gap:16px; }
.preview-stage { position:relative; display:grid; place-items:center; min-height:440px; }
.halo-ring { position:absolute; width:310px; height:310px; border:1px solid rgba(220,255,47,.48); border-radius:50%; box-shadow:0 0 0 38px rgba(220,255,47,.025), 0 0 80px rgba(220,255,47,.16); animation:pulse-ring 5s ease-in-out infinite; }
.idol-card { position:relative; width:min(330px, 76%); border:1px solid rgba(255,255,255,.16); border-radius:30px; background:linear-gradient(180deg, rgba(12,16,31,.72), rgba(2,3,10,.92)); box-shadow:0 28px 70px rgba(0,0,0,.48); overflow:hidden; transform:rotate(2deg); }
.portrait { height:370px; }
.portrait-image {
  position:relative;
  overflow:hidden;
  background-image:none !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border-radius:inherit;
}
.portrait-image > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:brightness(1.05) contrast(1.02);
}
.portrait-image::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(2,3,10,.5));
  pointer-events:none;
  z-index:1;
}
.portrait-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(53,247,255,.08) 0%, transparent 50%, rgba(255,45,122,.05) 100%);
  pointer-events:none;
  z-index:2;
}
.upload-side-preview.has-image {
  position:relative;
  overflow:hidden;
  background-image:none !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.upload-side-preview.has-image > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.library-portrait.portrait-image > img {
  object-fit:contain;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(2,3,10,.76));
}
.profile-art.portrait-image > img, .commercial-portrait.portrait-image > img, .studio-brief-portrait.portrait-image > img {
  object-position:center top;
}
.card-caption { display:grid; gap:6px; padding:18px 20px 22px; }
.card-caption strong { font-family:"Archivo Black"; letter-spacing:.05em; }
.card-caption span { color:var(--muted); font-size:13px; font-weight:700; }
.preview-tags { display:flex; flex-wrap:wrap; gap:8px; padding:18px; }
.preview-meters { display:grid; gap:12px; padding:18px; border:1px solid rgba(255,255,255,.13); border-radius:24px; background:rgba(255,255,255,.04); }
.meter-row { display:grid; grid-template-columns:88px 1fr 32px; align-items:center; gap:10px; }
.meter-label, .meter-num { color:var(--muted); font-size:12px; font-weight:900; }
.meter { height:9px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.meter span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--rose), var(--hot), var(--cyan)); }

.profile-hero { display:grid; grid-template-columns:260px 1fr 150px; align-items:center; gap:28px; padding:26px; }
.profile-art { height:300px; border-radius:30px; box-shadow:0 30px 90px rgba(0,0,0,.34); }
.profile-copy h2 { margin:0; font-family:"DM Serif Display"; font-size:clamp(56px, 7vw, 104px); line-height:.85; letter-spacing:-.07em; }
.profile-copy p, .profile-text { color:var(--muted); line-height:1.75; }
.profile-score { display:grid; place-items:center; gap:8px; width:140px; height:140px; border:1px solid rgba(220,255,47,.32); border-radius:50%; box-shadow:0 0 60px rgba(220,255,47,.12); }
.profile-score strong { font-family:"Archivo Black"; font-size:48px; }
.profile-score em { color:var(--cyan); font-style:normal; font-weight:900; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.profile-grid .panel { padding:22px; }
.info-list, .audience-grid, .brand-fit, .work-list { display:grid; gap:10px; }
.info-list span, .audience-grid div, .brand-fit div { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; background:rgba(255,255,255,.035); }
.audience-grid { grid-template-columns:repeat(3, 1fr); }
.audience-grid strong { display:block; font-family:"Archivo Black"; font-size:30px; color:var(--hot); }
.audience-grid span, .brand-fit span, .brand-fit p { color:var(--muted); }
.works-panel, .profile-commercial { grid-column:1 / -1; }
.work-card { display:flex; align-items:center; gap:14px; width:100%; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:12px; color:var(--text); background:rgba(255,255,255,.035); text-align:left; }
.work-card span { display:grid; gap:5px; }
.work-card em, .work-card p { margin:0; color:var(--muted); font-style:normal; }

.idol-strip { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.idol-strip.compact { margin:0; flex:1; }
.strip-kicker { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.strip-roster { display:flex; flex-wrap:wrap; gap:9px; }
.strip-chip { display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:7px 12px 7px 7px; color:var(--text); background:rgba(255,255,255,.045); }
.strip-chip.is-active { border-color:var(--hot); box-shadow:0 0 30px rgba(220,255,47,.11); }
.strip-chip-name { display:grid; text-align:left; }
.strip-chip-name span { color:var(--muted); font-size:11px; }
.mode-tabs { display:flex; gap:10px; margin-bottom:18px; position:relative; z-index:1; }
.mode-tab { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:12px 16px; color:var(--muted); background:rgba(255,255,255,.04); font-weight:900; cursor:pointer; pointer-events:auto; position:relative; z-index:2; }
.mode-tab:hover { border-color:rgba(220,255,47,.32); color:var(--text); }
.mode-tab.is-active { color:#05060a; background:var(--hot); border-color:var(--hot); z-index:3; }
.studio-brief-card { display:grid; grid-template-columns:120px minmax(0, 1fr) minmax(160px, 220px); gap:18px; align-items:center; margin:0 0 14px; padding:16px; }
.studio-threeview { margin:0 0 18px; overflow:hidden; position:relative; }
.studio-threeview::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(53,247,255,.06) 0%, rgba(255,45,122,.04) 100%);
  pointer-events:none;
  z-index:0;
}
.threeview-frame { display:grid; grid-template-columns:minmax(220px, 360px) minmax(0, 1fr); gap:16px; align-items:center; padding:12px 16px 16px; position:relative; z-index:1; }
.threeview-frame img { display:block; width:100%; max-height:220px; aspect-ratio:16 / 9; object-fit:contain; object-position:center; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(2,3,10,.46); box-shadow:0 8px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(53,247,255,.1); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.threeview-frame img:hover { transform:scale(1.02); box-shadow:0 24px 60px rgba(0,0,0,.35), 0 0 0 2px rgba(53,247,255,.2), 0 0 40px rgba(53,247,255,.1); }
.threeview-caption { display:grid; gap:10px; align-content:center; }
.threeview-caption strong { font-family:"Archivo Black"; font-size:clamp(22px, 2.6vw, 36px); letter-spacing:-.04em; line-height:1; color:var(--text); }
.threeview-caption span { color:var(--muted); line-height:1.65; }
.threeview-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(53,247,255,.3); border-radius:999px; background:rgba(53,247,255,.08); color:var(--cyan); font-size:11px; font-weight:900; font-family:"JetBrains Mono"; margin-bottom:8px; width:fit-content; }
@media (max-width: 920px) { .threeview-frame { grid-template-columns:1fr; } .studio-brief-card { grid-template-columns:1fr; } }
.studio-brief-portrait { width:120px; height:120px; border-radius:18px; box-shadow:0 12px 32px rgba(0,0,0,.24); }
.studio-brief-copy { display:grid; gap:6px; }
.studio-brief-copy h3 { margin:0; font-family:"Archivo Black"; font-size:clamp(24px, 3vw, 42px); line-height:.92; letter-spacing:-.05em; }
.studio-brief-copy p { margin:0; color:var(--muted); line-height:1.65; }
.studio-brief-metrics { display:grid; gap:10px; }
.studio-brief-metrics div { display:flex; justify-content:space-between; gap:12px; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:13px 15px; background:rgba(255,255,255,.045); }
.studio-brief-metrics span { color:var(--muted); font-size:12px; font-weight:900; }
.studio-brief-metrics strong { color:var(--hot); font-family:"Archivo Black"; font-size:18px; }
.mode-panel { border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:14px; margin-bottom:18px; background:rgba(255,255,255,.035); }
.mode-panel[hidden] { display:none; }
.compact-panel-header { padding:0 0 14px; }
.spec-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.spec-grid label { display:grid; gap:8px; color:var(--muted); font-size:12px; font-weight:900; }
.spec-card { display:grid; gap:12px; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; margin:14px 0; background:rgba(255,255,255,.04); }
.spec-card > strong { color:var(--hot); }
.spec-card > div { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.spec-card span { display:grid; gap:4px; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; color:var(--text); background:rgba(255,255,255,.035); }
.spec-card em { color:var(--muted); font-style:normal; font-size:11px; }
.generation-steps { display:grid; place-items:center; padding:18px 22px; }
.generation-steps[hidden], .result-empty[hidden], .result-body[hidden] { display:none; }
.generation-steps > span { border:1px solid rgba(53,247,255,.18); border-radius:16px; padding:12px; background:rgba(53,247,255,.055); animation:stepGlow .9s both; }
.studio-progress { width:min(560px, 100%); display:grid; gap:18px; padding:24px; border:1px solid rgba(220,255,47,.22); border-radius:26px; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow:0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.progress-head { display:grid; grid-template-columns:1fr auto; gap:8px 16px; align-items:end; }
.progress-head span { grid-column:1 / -1; color:var(--cyan); font-family:"JetBrains Mono"; font-size:11px; font-weight:900; letter-spacing:.18em; }
.progress-head strong { color:var(--text); font-family:"Archivo Black"; font-size:clamp(22px, 3vw, 36px); letter-spacing:-.04em; }
.progress-head em { color:var(--hot); font-family:"Archivo Black"; font-size:28px; font-style:normal; }
.progress-track { position:relative; height:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(2,3,10,.67); }
.progress-track::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 15px); opacity:.44; }
.progress-track i { position:absolute; inset:0 auto 0 0; width:0%; border-radius:inherit; background:linear-gradient(90deg, var(--hot), var(--cyan), var(--rose)); box-shadow:0 0 24px rgba(53,247,255,.22); transition:width 0.18s linear; }
.progress-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; font-weight:900; }
.result-empty { display:grid; place-items:stretch; padding:22px; text-align:left; color:var(--muted); }
.studio-ready-card { display:grid; align-content:center; gap:14px; min-height:360px; padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:radial-gradient(circle at 18% 18%, rgba(53,247,255,.14), transparent 18rem), radial-gradient(circle at 86% 78%, rgba(255,45,122,.12), transparent 16rem), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
.ready-kicker { color:var(--cyan); font-family:"JetBrains Mono"; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.studio-ready-card strong { color:var(--text); font-family:"Archivo Black"; font-size:clamp(24px, 3vw, 38px); letter-spacing:-.04em; line-height:1; }
.studio-ready-card p { max-width:520px; margin:0; line-height:1.65; }
.studio-ready-card .ready-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.studio-ready-card .ready-chip-row span { border:1px solid rgba(220,255,47,.22); border-radius:999px; padding:8px 11px; color:var(--hot); background:rgba(220,255,47,.06); font-size:12px; font-weight:900; }
.ready-preview-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:4px; }
.ready-preview-grid article { display:grid; gap:7px; min-height:96px; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; background:rgba(255,255,255,.04); }
.ready-preview-grid em { color:var(--cyan); font-style:normal; font-size:11px; font-weight:900; letter-spacing:.08em; }
.ready-preview-grid strong { font-family:inherit; font-size:15px; line-height:1.35; letter-spacing:0; }
.result-empty-glyph { width:92px; height:92px; border:1px solid rgba(220,255,47,.36); border-radius:32px; background:conic-gradient(from 120deg, var(--cyan), var(--rose), var(--hot), var(--cyan)); filter:blur(.2px); box-shadow:0 0 60px rgba(53,247,255,.18); }
.result-body { padding:0 22px 22px; }
.result-cover { display:flex; gap:16px; align-items:center; margin-bottom:16px; }
.result-cover-meta { display:grid; gap:7px; }
.result-cover-meta strong { font-family:"Archivo Black"; font-size:32px; }
.fake-player { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:16px 0; }
.fake-player button { border:0; border-radius:999px; padding:10px 14px; color:#05060a; background:var(--cyan); font-weight:900; }
.fake-player button.is-playing { background:var(--hot); }
.video-player { overflow:hidden; margin:0 0 16px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(0,0,0,.28); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.video-player video { display:block; width:100%; max-height:520px; object-fit:contain; background:#05060a; }
.video-download-btn { display:inline-flex; align-items:center; justify-content:center; margin:12px; border:1px solid rgba(220,255,47,.32); border-radius:999px; padding:10px 14px; color:#05060a; background:var(--hot); font-size:13px; font-weight:900; text-decoration:none; }
.result-waveform { display:flex; align-items:center; gap:3px; height:74px; }
.result-waveform i { flex:1; border-radius:999px; background:linear-gradient(180deg, var(--cyan), var(--violet)); opacity:.76; }
.lyrics-card { white-space:pre-wrap; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:16px; color:var(--text); background:rgba(0,0,0,.24); line-height:1.7; }
.publish-card, .version-grid button { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; background:rgba(255,255,255,.04); }
.publish-card p { color:var(--muted); line-height:1.6; }
.version-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:14px 0; }
.version-grid button { color:var(--text); font-weight:900; }

.commerce-board { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.commerce-hero { grid-column:1 / -1; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 260px; gap:28px; align-items:center; padding:30px; min-height:310px; background:radial-gradient(circle at 84% 20%, rgba(220,255,47,.24), transparent 24rem), radial-gradient(circle at 20% 95%, rgba(53,247,255,.18), transparent 24rem), linear-gradient(135deg, rgba(15,19,38,.94), rgba(4,6,14,.92)); }
.commerce-hero::before { content:"商业化"; position:absolute; right:22px; bottom:-18px; color:rgba(255,255,255,.035); font-family:"Archivo Black"; font-size:clamp(76px, 11vw, 160px); letter-spacing:-.08em; pointer-events:none; }
.commerce-hero-copy { position:relative; z-index:1; }
.commerce-hero-copy h3 { max-width:820px; margin:0; font-family:"DM Serif Display", Georgia, serif; font-size:clamp(48px, 6vw, 96px); line-height:.88; letter-spacing:-.07em; }
.commerce-hero-copy p { max-width:680px; color:var(--muted); line-height:1.72; }
.commerce-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.commerce-pills span { border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 12px; color:rgba(246,240,232,.82); background:rgba(255,255,255,.055); font-size:12px; font-weight:900; }
.commerce-score { position:relative; z-index:1; display:grid; place-items:center; gap:10px; aspect-ratio:1; border:1px solid rgba(220,255,47,.42); border-radius:50%; background:radial-gradient(circle, rgba(220,255,47,.12), rgba(53,247,255,.05) 54%, transparent 70%); box-shadow:0 0 80px rgba(220,255,47,.14), inset 0 0 42px rgba(53,247,255,.08); text-align:center; }
.commerce-score span { color:var(--hot); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.commerce-score strong { font-family:"Archivo Black"; font-size:76px; line-height:.9; }
.commerce-score em { max-width:170px; color:var(--cyan); font-style:normal; font-weight:900; font-size:12px; line-height:1.45; }
.commerce-channel-grid { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.commerce-channel { position:relative; overflow:hidden; min-height:210px; padding:22px; }
.commerce-channel::after { content:""; position:absolute; inset:auto -20% -42% 30%; height:120px; transform:rotate(-10deg); background:linear-gradient(90deg, transparent, rgba(53,247,255,.18), rgba(220,255,47,.14)); filter:blur(2px); }
.channel-index { position:absolute; right:18px; top:14px; color:rgba(246,240,232,.18); font-family:"Archivo Black"; font-size:34px; }
.commerce-channel strong { display:block; margin:12px 0; font-family:"Archivo Black"; font-size:clamp(24px, 2.8vw, 42px); letter-spacing:-.04em; }
.commerce-channel p:not(.kicker) { color:var(--muted); line-height:1.55; }
.channel-meter { display:grid; grid-template-columns:1fr 44px; align-items:center; gap:10px; margin-top:18px; }
.channel-meter::before { content:""; grid-column:1; grid-row:1; height:9px; border-radius:999px; background:rgba(255,255,255,.09); }
.channel-meter i { grid-column:1; grid-row:1; height:9px; border-radius:999px; background:linear-gradient(90deg, var(--hot), var(--cyan)); box-shadow:0 0 18px rgba(53,247,255,.22); }
.channel-meter span { color:var(--hot); font-size:12px; font-weight:900; }
.commerce-roadmap { padding-bottom:20px; }
.roadmap-list { display:grid; gap:12px; padding:0 22px; }
.roadmap-list article { display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:start; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:16px; background:rgba(255,255,255,.04); }
.roadmap-list article > span { display:grid; place-items:center; width:42px; height:42px; border-radius:15px; color:#05060a; background:var(--hot); font-family:"Archivo Black"; }
.roadmap-list strong { display:block; margin-bottom:6px; }
.roadmap-list p { margin:0; color:var(--muted); line-height:1.58; }
.bar-list, .platform-list { list-style:none; margin:0; padding:0 20px 20px; display:grid; gap:14px; }
.bar-list li, .platform-list li { display:grid; grid-template-columns:90px 1fr 80px; gap:12px; align-items:center; color:var(--muted); }
.bar-track, .plat-bar { height:10px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.bar-track i, .plat-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--hot), var(--cyan)); }
.radar-grid { display:grid; gap:12px; padding:0 22px 22px; }
.radar-grid div { display:grid; grid-template-columns:80px 1fr; align-items:center; gap:12px; color:var(--muted); }
.radar-grid i { height:10px; border-radius:999px; background:linear-gradient(90deg, var(--rose), var(--cyan)); }
.opportunities-panel { grid-column:1 / -1; }
.opp-row { display:grid; grid-template-columns:1fr 220px; gap:16px; padding:18px 22px; border-top:1px solid rgba(255,255,255,.08); }
.opp-row p, .opp-row em { color:var(--muted); line-height:1.55; }
.opp-row em { display:block; font-style:normal; }
.opp-row > div:last-child { display:grid; gap:12px; justify-items:end; align-content:center; }

.commercial-light { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
.commercial-idol-card { position:sticky; top:20px; display:grid; gap:14px; padding:22px; border:1px solid rgba(255,255,255,.14); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)), var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(22px); }
.commercial-portrait { height:260px; border-radius:22px; }
.commercial-idol-name { display:grid; gap:5px; padding:4px 2px; }
.commercial-idol-name strong { font-family:"Archivo Black", sans-serif; font-size:22px; letter-spacing:-.02em; }
.commercial-idol-name span { color:var(--muted); font-size:12px; }
.commercial-metric { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px 16px; background:rgba(255,255,255,.04); }
.commercial-metric span { color:var(--muted); font-size:13px; font-weight:900; }
.commercial-metric strong { font-family:"Archivo Black", sans-serif; font-size:18px; letter-spacing:-.01em; }
.commercial-metric.metric-lavender { border-color:rgba(123,97,255,.32); background:linear-gradient(135deg, rgba(123,97,255,.18), rgba(123,97,255,.06)); }
.commercial-metric.metric-lavender strong { color:#cbb7ff; }
.commercial-metric.metric-mint { border-color:rgba(53,247,255,.32); background:linear-gradient(135deg, rgba(53,247,255,.18), rgba(53,247,255,.05)); }
.commercial-metric.metric-mint strong { color:var(--cyan); }
.commercial-metric.metric-cream { border-color:rgba(220,255,47,.34); background:linear-gradient(135deg, rgba(220,255,47,.18), rgba(220,255,47,.05)); }
.commercial-metric.metric-cream strong { color:var(--hot); }
.income-card { display:flex; align-items:flex-start; gap:14px; border:1px solid rgba(141,255,122,.34); border-radius:22px; padding:16px; margin-top:4px; background:linear-gradient(135deg, rgba(141,255,122,.16), rgba(53,247,255,.08)); box-shadow:0 0 40px rgba(141,255,122,.08); }
.income-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; color:#05060a; background:linear-gradient(135deg, #8dff7a, var(--hot)); font-family:"Archivo Black", sans-serif; font-size:18px; flex:0 0 auto; }
.income-card > div { display:grid; gap:3px; }
.income-card span { color:var(--muted); font-size:12px; font-weight:900; }
.income-card strong { font-family:"Archivo Black", sans-serif; font-size:26px; color:#8dff7a; letter-spacing:-.02em; }
.income-card em { color:rgba(246,240,232,.6); font-style:normal; font-size:11px; line-height:1.5; }

.commercial-recommendations { display:grid; gap:18px; }
.recommend-panel { border:1px solid rgba(255,255,255,.14); border-radius:28px; padding:22px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--panel); box-shadow:0 22px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(22px); }
.recommend-panel h3 { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-family:"Archivo Black", sans-serif; font-size:16px; letter-spacing:-.01em; }
.section-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; font-size:15px; flex:0 0 auto; }
.section-icon.icon-purple { color:#cbb7ff; background:linear-gradient(135deg, rgba(123,97,255,.32), rgba(123,97,255,.12)); border:1px solid rgba(123,97,255,.4); }
.section-icon.icon-green { color:#8dff7a; background:linear-gradient(135deg, rgba(141,255,122,.28), rgba(141,255,122,.08)); border:1px solid rgba(141,255,122,.4); }
.section-icon.icon-blue { color:var(--cyan); background:linear-gradient(135deg, rgba(53,247,255,.28), rgba(53,247,255,.08)); border:1px solid rgba(53,247,255,.4); }

.style-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.style-card { display:grid; gap:12px; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:16px; background:rgba(255,255,255,.035); transition:border-color .2s ease, transform .2s ease; }
.style-card:hover { border-color:rgba(255,45,122,.32); transform:translateY(-2px); }
.style-card strong { display:block; margin-bottom:5px; font-size:15px; font-weight:900; }
.style-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.mini-score { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.mini-score::before { content:""; grid-column:1; grid-row:1; height:7px; border-radius:999px; background:rgba(255,255,255,.09); }
.mini-score i { grid-column:1; grid-row:1; height:7px; border-radius:999px; background:linear-gradient(90deg, var(--rose), var(--violet)); box-shadow:0 0 14px rgba(255,45,122,.32); }
.mini-score span { color:var(--text); font-family:"JetBrains Mono", monospace; font-size:12px; font-weight:900; }

.brand-list { display:grid; gap:12px; }
.brand-rec { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:16px 18px; background:rgba(255,255,255,.035); transition:border-color .2s ease; }
.brand-rec:hover { border-color:rgba(141,255,122,.32); }
.brand-copy { display:grid; gap:8px; min-width:0; }
.brand-copy strong { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15px; font-weight:900; }
.brand-copy strong em { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:3px 9px; color:var(--muted); background:rgba(255,255,255,.04); font-style:normal; font-size:11px; font-weight:900; }
.brand-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.brand-bar { display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.brand-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #8dff7a, var(--cyan)); box-shadow:0 0 14px rgba(141,255,122,.32); }
.brand-score { display:grid; gap:4px; justify-items:end; text-align:right; min-width:78px; }
.brand-score strong { font-family:"Archivo Black", sans-serif; font-size:34px; color:#8dff7a; letter-spacing:-.04em; line-height:1; }
.brand-score span { color:var(--muted); font-size:11px; font-weight:900; }
.brand-score .ghost-mini { margin-top:6px; padding:7px 10px; font-size:11px; }

.goods-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.goods-card { display:grid; gap:8px; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:18px 12px; background:rgba(255,255,255,.035); text-align:center; transition:border-color .2s ease, transform .2s ease; }
.goods-card:hover { border-color:rgba(53,247,255,.32); transform:translateY(-2px); }
.goods-card > span { font-size:30px; line-height:1; }
.goods-card strong { font-size:14px; font-weight:900; }
.goods-card em { color:var(--hot); font-style:normal; font-size:12px; font-weight:900; }

.trend-controls { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px; margin-bottom:18px; }
.trend-summary { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.trend-secondary { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tag-cloud { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:8px 22px 24px; }
.tag-cloud span { color:var(--text); }
.size-1 { font-size:15px; color:var(--muted) !important; }
.size-2 { font-size:22px; color:var(--cyan) !important; }
.size-3 { font-size:32px; color:var(--hot) !important; font-family:"Archivo Black"; }
.event-list, .suggestions { display:grid; gap:10px; }
.event-list { padding:0 22px 22px; }
.event-list button, .suggestions article { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; color:var(--text); background:rgba(255,255,255,.04); text-align:left; }
.event-list span, .suggestions p { color:var(--muted); line-height:1.55; }
.suggestions { padding:0 22px 22px; }

.live-dot { display:inline-flex; align-items:center; gap:8px; color:var(--cyan); }
.live-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.trend-tag { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:5px 8px; background:rgba(220,255,47,.12); color:var(--hot); font-size:12px; font-weight:900; }
.trend-tag.down { background:rgba(255,45,122,.12); color:var(--rose); }
.rank { color:var(--muted); font-family:"JetBrains Mono"; }

.toast-stack { position:fixed; right:22px; bottom:22px; z-index:30; display:grid; gap:10px; }
.toast { transform:translateY(10px); opacity:0; min-width:260px; border:1px solid rgba(220,255,47,.28); border-radius:18px; padding:14px 16px; color:var(--text); background:rgba(10,13,26,.94); box-shadow:0 20px 70px rgba(0,0,0,.38); transition:.24s ease; }
.toast.is-visible { transform:translateY(0); opacity:1; }
.toast.warn { border-color:rgba(255,45,122,.42); }
.modal-root[hidden], .tour-popover[hidden] { display:none; }
.modal-root { position:fixed; inset:0; z-index:25; display:grid; place-items:center; padding:22px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(8px); }
.modal-card { position:relative; width:min(760px, 100%); border:1px solid rgba(255,255,255,.16); border-radius:28px; padding:28px; background:linear-gradient(180deg, rgba(24,29,52,.98), rgba(7,9,19,.98)); box-shadow:0 34px 120px rgba(0,0,0,.65); }
.modal-card h2 { margin:0 0 18px; font-family:"DM Serif Display"; font-size:48px; letter-spacing:-.05em; }
.modal-close { position:absolute; right:18px; top:14px; border:0; color:var(--text); background:transparent; font-size:30px; }
.proposal-card { display:flex; gap:18px; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:16px; background:rgba(255,255,255,.04); }
.proposal-card p, .proposal-card li { color:var(--muted); line-height:1.6; }
.pdf-preview { display:grid; gap:16px; border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:18px; background:#f6f0e8; color:#11131d; }
.pdf-cover { display:grid; gap:8px; padding:22px; border-radius:18px; background:linear-gradient(135deg, #11131d, #30345c); color:#f6f0e8; }
.pdf-cover span { color:var(--hot); font-family:"JetBrains Mono"; font-size:12px; text-transform:uppercase; }
.pdf-cover strong { font-size:28px; }
.pdf-cover em { font-style:normal; color:rgba(246,240,232,.7); }
.tour-popover { position:fixed; right:24px; top:108px; z-index:24; width:min(360px, calc(100vw - 48px)); border:1px solid rgba(220,255,47,.28); border-radius:22px; padding:18px; background:rgba(10,13,26,.96); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.tour-popover p { color:var(--muted); line-height:1.6; }
.tour-popover button { margin-right:8px; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 12px; color:var(--text); background:rgba(255,255,255,.06); font-weight:900; }

@keyframes progressFill { 0% { width:0%; } 100% { width:100%; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes rise { from { transform:scaleY(.2); opacity:.25; } to { transform:scaleY(1); opacity:1; } }
@keyframes pulse-ring { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.05); opacity:1; } }
@keyframes stepGlow { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }

@media (max-width: 1280px) {
  .topbar { flex-wrap:wrap; }
  .tab-bar { order:3; width:100%; overflow:auto; justify-content:flex-start; border-radius:22px; }
  .marquee-grid { grid-template-columns:1fr; align-items:start; }
  .marquee-create, .marquee-aside { justify-self:center; }
  .marquee-empty-zone { min-height:160px; transform:none; }
  .hero-empty-btn { min-width:220px; }
  .marquee-title { max-width:100%; font-size:clamp(40px, 7vw, 68px); }
  .title-row { white-space:normal; }
  .dashboard-grid, .create-grid, .ai-grid, .profile-grid, .commerce-board, .trend-secondary, .commercial-light, .studio-brief-card { grid-template-columns:1fr; }
  .commercial-idol-card { position:static; }
  .commerce-hero { grid-template-columns:1fr; }
  .commerce-score { width:240px; justify-self:center; }
  .commerce-channel-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dash-stats, .trend-summary { grid-template-columns:repeat(2, 1fr); }
  .library-grid { grid-template-columns:repeat(2, 1fr); }
  .profile-hero { grid-template-columns:220px 1fr; }
  .profile-score { grid-column:1 / -1; width:auto; height:auto; border-radius:24px; padding:18px; }
  .create-preview { position:static; }
}

@media (max-width: 760px) {
  .topbar, .workspace { padding-left:16px; padding-right:16px; }
  .trend-controls, .idol-strip, .result-cover, .proposal-card { flex-direction:column; align-items:flex-start; }
  .pane-title { font-size:48px; }
  .marquee-title { font-size:38px; line-height:1.02; }
  .title-row { white-space:normal; }
  .card-actions { grid-template-columns:1fr; }
  .card-actions .library-cta { min-width:180px; }
  .create-form .form-actions { justify-content:center; }
  #createSubmitBtn { width:100%; min-width:0; }
  .dash-stats, .trend-summary, .library-grid, .library-tools, .field-row, .avatar-picker, .profile-hero, .audience-grid, .version-grid, .commerce-channel-grid, .style-grid { grid-template-columns:1fr; }
  .goods-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .brand-rec { grid-template-columns:1fr; }
  .brand-score { justify-items:start; text-align:left; }
  .commerce-hero { padding:22px; min-height:0; }
  .commerce-score { width:210px; }
  .commerce-score strong { font-size:62px; }
  .rank-row { grid-template-columns:32px 44px 1fr; }
  .rank-score, .rank-row .trend-tag { display:none; }
  .opp-row { grid-template-columns:1fr; }
  .bar-list li, .platform-list li { grid-template-columns:70px 1fr 52px; }
  .toast-stack { left:16px; right:16px; }
}