:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #100e13;
  color: #edeaf0;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: #c9afd8; text-decoration: none; }
a:hover { color: #f2e5fa; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #cda9e1; outline-offset: 3px; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
img { display: block; max-width: 100%; }
p { margin: .55rem 0 1rem; }
h1, h2, h3 { line-height: 1.16; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 3vw, 3rem); margin: .15rem 0 .6rem; font-weight: 700; }
h2 { font-size: 1.25rem; margin: .1rem 0 1rem; font-weight: 650; }
h3 { font-size: 1rem; margin: .45rem 0; }
small, .small { font-size: .82rem; }
.muted { color: #aaa3b2; }
.eyebrow { color: #b8a2c4; text-transform: uppercase; letter-spacing: .14em; font-size: .69rem; font-weight: 750; margin: 0 0 .45rem; }
.signed-in { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; width: 236px; flex: 0 0 236px; background: #17141b; border-right: 1px solid #322c39; display: flex; flex-direction: column; padding: 1.4rem 1rem; }
.brand { color: #f4eff7; display: flex; align-items: center; gap: .7rem; font-size: .96rem; font-weight: 750; line-height: 1.08; letter-spacing: -.02em; }
.brand small { color: #ab91ba; letter-spacing: .16em; text-transform: uppercase; font-size: .64rem; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; background: #493251; border: 1px solid #76567d; border-radius: 10px; color: #f8ecff; font-family: Georgia, serif; font-size: .93rem; }
.nav-caption { margin: 2.3rem .65rem .65rem; color: #817789; text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; font-weight: 700; }
.sidebar nav { display: grid; gap: .15rem; }
.nav-link { padding: .67rem .75rem; border-radius: 9px; color: #ada5b3; font-size: .89rem; font-weight: 550; }
.nav-link:hover, .nav-link.is-active { background: #302739; color: #f2e5f7; }
.nav-link.is-active { box-shadow: inset 3px 0 0 #b793c9; }
.sidebar-foot { margin-top: auto; color: #817789; font-size: .72rem; padding: 1rem .7rem 0; border-top: 1px solid #322c39; }
.live-dot { display: inline-block; width: 7px; height: 7px; background: #7eb69d; border-radius: 100%; margin-right: .35rem; }
.app-column { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar { min-height: 68px; padding: 0 clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #2c2732; background: #141117; }
.topbar-label { color: #b4adba; font-size: .83rem; }
.topbar-separator { color: #665b6d; margin: 0 .4rem; }
.topbar form { margin: 0; }
.text-button { border: 0; background: transparent; color: #cdbbd6; padding: .65rem .3rem; font-size: .83rem; }
.text-button:hover { color: white; }
.mobile-menu { display: none; position: relative; }
.content { width: min(100%, 1480px); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem); flex: 1; }
.app-footer { padding: 1.1rem clamp(1rem, 3vw, 2.5rem); border-top: 1px solid #2c2732; color: #817789; font-size: .75rem; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.page-heading > * { min-width: 0; }
.page-heading .muted { margin: 0; }
.button, button[type=submit] { display: inline-flex; justify-content: center; align-items: center; gap: .35rem; min-height: 43px; padding: .62rem 1rem; border: 1px solid #ad88bc; border-radius: 9px; background: #755384; color: #fff; font-weight: 700; white-space: nowrap; text-align: center; }
.button:hover, button[type=submit]:hover { background: #876397; color: #fff; }
.button.subtle { background: #25202b; border-color: #493c50; color: #ddd1e3; }
.button.subtle:hover { background: #352b3d; }
button[type=submit].reject { background: #402831; border-color: #80515d; }
button[type=submit].approve { background: #3c5d4c; border-color: #639478; }
.panel { background: #1b171f; border: 1px solid #38313e; border-radius: 15px; padding: clamp(1rem, 2vw, 1.4rem); margin: 0 0 1rem; min-width: 0; }
.panel > :last-child { margin-bottom: 0; }
.section-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.section-head h2 { margin-bottom: 0; }
.section-head > a { font-size: .8rem; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin: 1.5rem 0; }
.metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 108px; padding: 1rem; background: #1d1922; border: 1px solid #3a3241; border-radius: 14px; color: #bcb4c2; font-size: .78rem; }
.metric:hover { border-color: #8d719b; color: #ddd5e0; }
.metric strong { color: #f6f0f7; font-size: 1.95rem; font-weight: 680; line-height: 1; }
.metric.accent { background: #2d2134; border-color: #67486f; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.two-column > *, .three-column > * { min-width: 0; }
.status-list > div, .detail-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .72rem 0; border-bottom: 1px solid #302a35; font-size: .86rem; }
.status-list > div:last-child, .detail-row:last-child { border-bottom: 0; }
.detail-row strong, .detail-row code { text-align: right; font-size: .82rem; overflow-wrap: anywhere; }
.feature-value { color: #f3e8f7; font-weight: 650; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; border-radius: 99px; padding: .25rem .62rem; font-size: .7rem; font-weight: 750; white-space: nowrap; letter-spacing: .02em; }
.badge.good { background: #203c30; color: #9ed8b5; }
.badge.bad { background: #4a2831; color: #f4b7be; }
.badge.neutral { background: #372d41; color: #d4bfe1; }
.notice { border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.25rem; font-size: .88rem; }
.notice.warning { background: #3c3222; border: 1px solid #77623b; color: #f4e1b5; }
.notice.danger { background: #47252e; border: 1px solid #8b4a59; color: #ffd1d5; }
.notice.neutral-notice { background: #25202b; border: 1px solid #4a3c53; color: #ddd0e5; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mini-metrics > div { display: flex; flex-direction: column; padding: .8rem; border-radius: 10px; background: #29232e; }
.mini-metrics strong { font-size: 1.65rem; }
.mini-metrics span { color: #a9a0ae; font-size: .72rem; }
.character-strip { display: flex; gap: .9rem; align-items: center; color: #eee9f0; padding: .6rem; border-radius: 10px; background: #28212d; }
.character-strip img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; }
.character-strip > span:nth-child(2) { flex: 1; display: grid; gap: .15rem; }
.character-strip small { color: #aca2b2; }
.visual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .9rem; }
.visual-card { display: block; background: #24202a; color: #eee7f2; border: 1px solid #3c3342; border-radius: 12px; overflow: hidden; min-width: 0; }
.visual-card:hover { border-color: #9773a8; }
.visual-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #2a2430; }
.visual-card-meta { display: grid; gap: .15rem; padding: .7rem .8rem; }
.visual-card-meta strong, .visual-card-meta small { overflow-wrap: anywhere; }
.visual-card-meta small { color: #aca2b2; font-size: .72rem; }
.row-list > a, .job-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid #342e39; color: #ede6f1; }
.row-list > a:last-child, .job-row:last-child { border: 0; }
.row-list > a > span:first-child, .job-main { display: grid; min-width: 0; }
.row-list small, .job-main small, .job-side small { color: #aba2b2; }
.job-list { display: grid; }
.job-row { padding: 1rem .1rem; }
.job-side { display: grid; justify-items: end; gap: .35rem; }
.error-text { color: #f4b7be !important; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 2.4rem 1rem; color: #aaa1b1; }
.empty strong { color: #eee9f1; font-size: 1rem; }
.empty .button { margin-top: .5rem; }
.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.character-card { padding: 0; overflow: hidden; color: #eee9f1; }
.character-card > img { width: 100%; height: 300px; object-fit: cover; }
.character-card-body { display: grid; gap: .35rem; padding: 1rem; }
.character-card-body strong { font-size: 1.35rem; }
.character-card-body small { color: #aca2b2; }
.trait-list { margin: 0; }
.trait-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #312a36; font-size: .83rem; }
.trait-list dt { color: #aaa1b1; }
.trait-list dd { margin: 0; text-align: right; max-width: 58%; }
.pill-list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; }
.pill-list li, .workflow-steps span { border: 1px solid #493b52; background: #2b2331; border-radius: 99px; padding: .36rem .7rem; font-size: .76rem; }
.reference-section { margin-top: 1rem; }
.reference-grid figure { margin: 0; min-width: 0; }
.reference-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; background: #2a2430; }
.reference-grid figcaption { color: #a99eae; font-size: .7rem; padding: .4rem 0; overflow-wrap: anywhere; }
.compose-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .8fr); gap: 1rem; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
label { display: block; color: #d9d0dd; font-size: .8rem; font-weight: 650; margin: .65rem 0; }
input, select, textarea { display: block; width: 100%; min-width: 0; margin: .28rem 0 0; padding: .65rem .72rem; background: #121015; border: 1px solid #54465d; border-radius: 8px; color: #f5eff7; font-weight: 450; }
input:disabled { color: #aaa1b1; background: #211c25; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #7d7484; }
.reference-preview img { width: 100%; max-height: 340px; object-fit: contain; border-radius: 9px; background: #151217; }
.reference-preview .preset-preview p { font-size: .8rem; }
.advanced { border-top: 1px solid #3a3140; margin: 1.1rem 0; padding-top: .7rem; }
details summary { cursor: pointer; color: #cbb6d5; font-weight: 650; }
.primary-action { width: 100%; }
.filter-pills, .workflow-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filter-pills a { border: 1px solid #423748; background: #201b25; padding: .5rem .78rem; border-radius: 99px; color: #bdb1c5; font-size: .78rem; }
.filter-pills a.selected { background: #503b5b; color: #fff; border-color: #87699a; }
.small-reference { display: flex; align-items: center; gap: .8rem; font-size: .82rem; overflow-wrap: anywhere; }
.small-reference img { width: 65px; height: 70px; object-fit: cover; border-radius: 7px; }
.asset-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 1rem; align-items: start; }
.asset-stage { background: #19161c; border: 1px solid #38313e; border-radius: 15px; display: grid; place-items: center; min-height: 350px; overflow: hidden; }
.asset-stage img { max-height: min(78vh, 900px); object-fit: contain; }
.asset-panel { min-width: 0; }
.review-action { margin: .7rem 0; }
.review-action .button { width: 100%; }
.reference-mini { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #37303c; }
.reference-mini a { display: flex; align-items: center; gap: .7rem; }
.reference-mini img { width: 65px; height: 75px; object-fit: cover; border-radius: 7px; }
.inline-link { display: inline-block; margin: .75rem 0; font-size: .85rem; }
.review-pager { display: flex; justify-content: space-between; margin: 1rem 0; }
.filter-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: .7rem; align-items: end; }
.filter-form label { margin: 0; }
.filter-form button { margin: 0; }
.score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; }
.workflow-steps span { color: #92889a; }
.workflow-steps span.active { color: #eee5f2; border-color: #8b6b9b; }
.stack { display: grid; gap: .4rem; max-width: 650px; }
.stack button { justify-self: start; }
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.draft-card { display: grid; grid-template-columns: 100px 1fr; gap: .8rem; background: #27212d; border-radius: 10px; overflow: hidden; min-width: 0; }
.draft-card img { width: 100px; height: 100%; min-height: 145px; object-fit: cover; }
.draft-card > div { padding: .75rem .75rem .75rem 0; min-width: 0; }
.draft-card p { overflow-wrap: anywhere; }
.model-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #37303c; }
.model-row:last-child { border: 0; }
.model-row h3 { overflow-wrap: anywhere; }
.model-status { display: grid; justify-items: end; gap: .3rem; white-space: nowrap; }
.model-status small { color: #aaa1b1; }
.placeholder { color: #aaa1b1; }
.placeholder h2 { color: #ede8f0; }
code { color: #d8c4e2; }
.login-layout { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 440px); padding: clamp(1.4rem, 4vw, 2.5rem); background: #1d1822; border: 1px solid #4a3b52; border-radius: 18px; box-shadow: 0 20px 75px #0005; }
.login-brand { margin-bottom: 2.5rem; }
.login-card .stack { margin: 1.4rem 0; }
.login-card .stack button { width: 100%; }
@media (max-width: 1250px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { list-style: none; cursor: pointer; color: #e8d7ef; padding: .55rem .6rem; border: 1px solid #53445c; border-radius: 8px; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; top: calc(100% + .4rem); left: 0; width: min(280px, 88vw); z-index: 10; display: grid; max-height: 70vh; overflow: auto; padding: .6rem; background: #211b26; border: 1px solid #594762; border-radius: 12px; box-shadow: 0 20px 50px #0009; }
  .compose-layout, .asset-layout { grid-template-columns: 1fr; }
  .reference-preview { max-width: 420px; }
}
@media (max-width: 640px) {
  .content { padding: 1.1rem .85rem 2rem; }
  .topbar { padding: 0 .85rem; }
  .topbar-label { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading > .button { width: 100%; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .metric { min-height: 90px; padding: .8rem; }
  .metric strong { font-size: 1.6rem; }
  .two-column, .three-column, .form-grid, .filter-form, .score-grid { grid-template-columns: 1fr; }
  .mini-metrics { gap: .35rem; }
  .mini-metrics > div { padding: .55rem; }
  .job-row { align-items: flex-start; }
  .job-side { min-width: 84px; }
  .model-row { align-items: flex-start; flex-direction: column; }
  .model-status { justify-items: start; }
  .asset-stage { min-height: 250px; }
  .review-action .button, .review-pager .button { min-height: 48px; }
  .workflow-steps { gap: .35rem; }
  .workflow-steps span { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }