:root{
  color-scheme:dark;
  --page:#0b1420;
  --page-deep:#07111a;
  --surface:#102230;
  --surface-raised:#132a39;
  --surface-soft:#0d1c28;
  --surface-accent:#12313b;
  --line:#284357;
  --line-strong:#36566c;
  --text:#eaf2f7;
  --text-soft:#d5e1e8;
  --muted:#9fb2c1;
  --muted-2:#8197a6;
  --accent:#4fd1c5;
  --accent-bright:#7fe1d8;
  --accent-soft:rgba(79,209,197,.1);
  --danger:#d45b68;
  --shadow:0 20px 55px rgba(2,10,16,.28);
}

html{background:var(--page)}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 74% 4%,rgba(31,91,113,.52),transparent 34rem),
    linear-gradient(155deg,var(--page-deep),var(--page) 48%,#0d202c);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.5;
}
button,input,textarea,select{font-family:inherit}
button{min-height:42px;line-height:1.25}
button,.ghost,.back,input,textarea,select{transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[role=button]:focus-visible{
  outline:3px solid rgba(79,209,197,.26);
  outline-offset:2px;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,209,197,.1)}
input::placeholder,textarea::placeholder{color:#718897;opacity:1}
p{line-height:1.65}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em}
.heading h1,.character-intro h1,.look-detail-content h1,.work-main-info h1,.mv-work-info h1,.simple-mv-head h1{
  font-size:clamp(38px,6vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}
.section-title{justify-content:space-between}
.section-title h2{margin-bottom:4px;line-height:1.1}
.section-title p{margin:0}
.app-header{border-bottom:1px solid rgba(54,86,108,.45)}
.global-nav button,.global-tools button{white-space:nowrap}

/* Shared dark surfaces */
.works-toolbar,.task-center-card,.filtered-job-list>button,.relation-card,
.simple-mv-step,.simple-mv-image,.simple-mv-music,.detail-action-panel,
.look-creation-details,.active-image-jobs button,.creation-review span,
.studio-step,.image-work-builder>section{
  border-color:var(--line);
  background:var(--surface);
  color:var(--text);
  box-shadow:none;
}
.works-toolbar{
  gap:14px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(145deg,var(--surface),#0f2634);
}
.works-toolbar label>span,.task-type-filter,.task-auto-refresh,
.task-main p,.filtered-job-list small,.relation-card small,
.simple-mv-head>p:last-child,.simple-mv-step-title p,.simple-mv-music small,
.simple-mv-time-help,.simple-mv-empty p,.detail-action-heading small,
.look-creation-details summary small,.creation-review small,.step-heading p{
  color:var(--muted);
}
.works-toolbar input,.works-toolbar select{min-height:44px;background:var(--surface-soft);border-color:var(--line-strong)}
.works-toolbar .works-search{min-width:260px}
.library-work-tags span,.task-kind{
  background:var(--accent-soft);
  color:var(--accent-bright);
}
.filtered-job-list>button,.relation-card{color:var(--text)}
.filtered-job-list>button:hover,.relation-card:hover{
  border-color:var(--accent);
  background:var(--surface-accent);
}
.filtered-job-list em,.work-main-info dt,.simple-mv-image i,.simple-mv-music i,
.simple-mv-time-row>span,.studio-steps li.active,.detail-action-panel a{
  color:var(--accent-bright);
}

/* Tasks */
.task-center-heading>strong{
  background:var(--accent-soft);
  color:var(--accent-bright);
  border:1px solid rgba(79,209,197,.24);
}
.task-filter-tabs{gap:4px;border-bottom-color:var(--line)}
.task-filter-tabs button{color:var(--muted);white-space:nowrap}
.task-filter-tabs button:hover{color:var(--text);background:var(--accent-soft)}
.task-filter-tabs button.active{color:var(--accent-bright);border-bottom-color:var(--accent)}
.task-center-card{box-shadow:0 12px 32px rgba(2,10,16,.16)}
.task-center-card.failed{border-color:rgba(212,91,104,.45);background:#251a22}
.task-error{color:#ffabb5!important}

/* Image creation and details */
.studio-steps li{color:var(--muted)}
.studio-steps li:not(:last-child):after{background:var(--line)}
.studio-steps b{background:#1a3443;color:var(--muted)}
.studio-steps li.active b{background:var(--accent);color:#07131b}
.fixed-output,.work-main-info>small{
  border:1px solid rgba(79,209,197,.24);
  background:var(--accent-soft);
  color:var(--accent-bright);
}
.creation-review span{border:1px solid var(--line)}
.work-main-info>p:not(.eyebrow),.work-main-info dd,.candidate-heading p,.candidate-heading>span{color:var(--muted)}
.candidate-heading{border-top-color:var(--line)}
.work-detail-toolbar .work-more summary,.work-detail-actions .work-more summary{
  border-color:var(--line-strong);
  background:var(--surface-soft);
  color:var(--text);
}
.detail-action-panel{background:linear-gradient(145deg,var(--surface),#0f2634)}
.look-creation-details dl{border-top-color:var(--line)}
.action-feedback{
  border-color:rgba(79,209,197,.42);
  background:#12332f;
  color:#c9fff7;
  box-shadow:var(--shadow);
}

/* Quick video */
.simple-mv-step{box-shadow:0 14px 38px rgba(2,10,16,.16)}
.simple-mv-step-title>span{background:var(--accent-soft);color:var(--accent-bright)}
.simple-mv-step-title>strong{background:#17313f;color:var(--muted)}
.simple-mv-step-title>strong:not(.invalid){color:var(--accent-bright)}
.simple-mv-step-title>strong.invalid{color:#ffabb5;background:#351d26}
.simple-mv-image,.simple-mv-music{background:var(--surface-soft)}
.simple-mv-image span{color:var(--text-soft)}
.simple-mv-image.selected,.simple-mv-music.selected{
  border-color:var(--accent);
  background:var(--surface-accent);
  box-shadow:0 0 0 2px rgba(79,209,197,.1);
}
.simple-mv-empty{border-color:var(--line-strong)}
.simple-mv-submit small{letter-spacing:0}

/* English copy needs more breathing room */
.create-launcher-grid button{min-height:104px}
.create-launcher-grid strong{font-size:16px;line-height:1.25}
.create-launcher-grid small{font-size:13px;line-height:1.45}
.discover-search{max-width:720px;margin-inline:auto}
.discover-search input{min-height:50px;padding-inline:18px;font-size:16px}
.discover-tabs button,.works-type-tabs button,.character-tabs button{min-width:max-content}
.works-type-tabs{border-bottom-color:var(--line)}
.works-type-tabs button{color:var(--muted)}
.works-type-tabs button:hover{color:var(--text);background:var(--accent-soft)}
.works-type-tabs button.active{color:var(--accent-bright);border-bottom-color:var(--accent)}
.discover-card h3,.wardrobe-card h3,.work-card h3{line-height:1.25;overflow-wrap:anywhere}
.discover-card p,.wardrobe-card p,.work-card p{line-height:1.5}
.look-open-hint,.discover-card b{line-height:1.35}
.task-auto-refresh{letter-spacing:0}
.cards .card p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden;
}
main:has(.task-center-heading),main:has(.look-library-toolbar){width:min(1040px,calc(100% - 40px))}

@media(max-width:900px){
  main{padding-top:30px}
  .heading{align-items:flex-start}
  .heading>button,.heading>div+button{flex:none}
  .works-toolbar .works-search{min-width:0}
}
@media(max-width:620px){
  body{font-size:14px}
  main{padding-top:22px}
  main:has(.task-center-heading),main:has(.look-library-toolbar){width:min(100% - 24px,680px)}
  .heading h1,.character-intro h1,.look-detail-content h1,.work-main-info h1,.mv-work-info h1,.simple-mv-head h1{font-size:36px}
  .dashboard-hero h1,.discover-hero h1{font-size:clamp(40px,12vw,58px);line-height:1}
  .heading{display:grid;gap:16px}
  .heading>button,.heading>div+button{width:100%}
  .section-title{align-items:flex-start}
  .section-title>span{flex:none}
  .create-launcher-grid button{min-height:88px}
  .discover-card b,.look-open-hint{font-size:12px}
  .task-filter-tabs{padding-bottom:2px}
}