.creator-dialog{width:min(1500px,98vw);max-width:none;height:min(950px,96vh);max-height:none;margin:auto}
.creator-dialog::backdrop{background:rgb(var(--black-rgb) / .88);backdrop-filter:blur(5px)}
.creator-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:linear-gradient(145deg,var(--surface-raised),var(--surface-low) 55%,var(--surface-low));border:1px solid var(--accent-700);border-radius:var(--radius-xl);overflow:hidden;color:var(--text)}
.creator-top{display:grid;grid-template-columns:minmax(180px,1fr) minmax(420px,2fr) minmax(140px,1fr);align-items:center;gap:var(--space-10);padding:16px 22px;border-bottom:1px solid var(--stone-780);background:rgb(var(--surface-low-rgb) / .96)}
.creator-top small,.creator-heading small{font:var(--size-caption) var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.creator-top h2{margin:4px 0 0;color:var(--accent-300);font:500 var(--size-title) var(--body)}
.creator-progress{display:flex;justify-content:center;gap:var(--space-2)}
.creator-progress button{position:relative;flex:1;min-width:64px;border:0;background:transparent;color:var(--muted);padding:0 3px;font:var(--size-caption) var(--head)}
.creator-progress button::before{content:attr(data-number);display:grid;place-items:center;width:29px;height:29px;margin:0 auto 7px;border:1px solid var(--stone-550);border-radius:var(--radius-round);background:var(--stone-900);color:var(--text-soft);font-size:var(--size-ui)}
.creator-progress button::after{content:"";position:absolute;top:14px;left:calc(50% + 17px);right:calc(-50% + 17px);height:1px;background:var(--stone-750)}
.creator-progress button:last-child::after{display:none}
.creator-progress button.active,.creator-progress button.complete{color:var(--accent-350)}
.creator-progress button.active::before{background:var(--accent-400);color:var(--on-accent);border-color:var(--accent-300)}
.creator-progress button.complete::before{border-color:var(--accent-550);color:var(--accent-300)}
.creator-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 270px;min-height:0}
.creator-sidebar,.creator-preview{background:rgb(var(--surface-low-rgb) / .9);padding:18px 14px;overflow:auto}
.creator-sidebar{border-right:1px solid var(--stone-780);display:flex;flex-direction:column;gap:var(--space-9)}
.creator-preview{border-left:1px solid var(--stone-780)}
.creator-steps{display:grid;gap:var(--space-4)}
.creator-steps button{display:flex;align-items:center;gap:var(--space-5);width:100%;border-color:transparent;background:transparent;color:var(--muted);text-align:left}
.creator-steps button::before{content:attr(data-number);display:grid;place-items:center;flex:0 0 28px;height:28px;border:1px solid var(--stone-700);border-radius:var(--radius-round);font:var(--size-label) var(--head)}
.creator-steps button.active{border-color:var(--accent-550);background:linear-gradient(90deg,rgb(var(--accent-700-rgb) / .55),rgb(var(--accent-700-rgb) / .12));color:var(--accent-200)}
.creator-rules,.creation-status,.setting-card,.creator-review article{border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--well-rgb) / .75);padding:15px}
.creator-rules h3,.creator-preview h3,.creation-status h4,.setting-card h4{margin:0 0 10px;color:var(--accent-350);font:500 var(--size-compact) var(--body);text-transform:uppercase;letter-spacing:.06em}
.creator-rules ul{margin:0;padding-left:18px;color:var(--text-dim);font-size:var(--size-small);line-height:1.65}
#creator-randomize{margin-top:auto;color:var(--accent-350)}
.creator-main{overflow:auto;padding:24px clamp(20px,3.5vw,55px);background:radial-gradient(circle at 85% 10%,rgb(var(--stone-780-rgb) / .22),transparent 35%)}
.creator-main:focus-visible,.creator-preview:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.creator-panel{max-width:900px;margin:0 auto}
.creator-heading{border-bottom:1px solid var(--stone-800);padding-bottom:16px;margin-bottom:22px}
.creator-heading h3{margin:5px 0 7px;color:var(--accent-200);font:500 var(--size-headline) var(--body)}
.creator-heading p,.creator-fieldset>p,.setting-card p{margin:.3em 0;color:var(--text-dim);line-height:1.55}
.creator-import-row{display:flex;justify-content:flex-end;margin:-8px 0 18px}
.creator-import-row button{min-height:42px}
.creator-main label{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:16px;color:var(--stone-200);font-size:var(--size-compact)}
.creator-main label small{color:var(--muted);font-size:var(--size-ui)}
.creator-main input,.creator-main textarea,.creator-main select{width:100%;border:1px solid var(--stone-700);border-radius:var(--radius-sm);background:var(--field);padding:11px 12px;color:var(--text)}
.creator-main input:focus,.creator-main textarea:focus,.creator-main select:focus{outline:none;border-color:var(--accent-450);box-shadow:0 0 0 2px rgb(var(--accent-450-rgb) / .14)}
.creator-main textarea{min-height:88px;resize:vertical}
.setting-card{margin:10px 0 24px;background:linear-gradient(120deg,rgb(var(--accent-900-rgb) / .75),rgb(var(--well-rgb) / .8))}
.creator-fieldset{border:1px solid var(--stone-750);border-radius:var(--radius-md);padding:18px;margin:24px 0;background:rgb(var(--surface-low-rgb) / .58)}
.creator-fieldset legend{padding:0 8px;color:var(--accent-350);font:500 var(--size-body) var(--body)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:15px 0}
.choice-card{display:block;cursor:pointer;position:relative}
.choice-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.choice-card span{display:grid;place-items:center;min-height:58px;padding:8px;border:1px solid var(--stone-700);border-radius:var(--radius-sm);background:var(--surface-raised);text-align:center;color:var(--text-soft)}
.choice-card input:checked+span{border-color:var(--accent-450);background:linear-gradient(var(--stone-780),var(--accent-950));color:var(--accent-200);box-shadow:0 0 0 1px rgb(var(--accent-450-rgb) / .2)}
.attribute-grid{display:grid;grid-template-columns:130px minmax(180px,1fr) 130px minmax(180px,1fr);gap:var(--space-5) var(--space-7);align-items:center}
.attribute-group{grid-column:1/-1;margin-top:10px;padding-bottom:6px;border-bottom:1px solid var(--stone-750);color:var(--accent-350);font:var(--size-label) var(--head);text-transform:uppercase;letter-spacing:.12em}
.attribute-name{color:var(--stone-200)}
.attribute-grid select{margin:0}
.attribute-grid .locked{opacity:.7}
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.skill-pick{display:grid;gap:var(--space-4)}
.creator-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
.creator-review article h4{margin:0 0 9px;color:var(--accent-350);font:500 var(--size-body) var(--body)}
.creator-review dl{margin:0}
.creator-review dl div{display:flex;justify-content:space-between;gap:var(--space-8);padding:6px 0;border-top:1px solid var(--stone-800)}
.creator-review dt{color:var(--muted)}.creator-review dd{margin:0;text-align:right}
.creator-preview h3{text-align:center;margin-bottom:14px}
.creator-portrait{width:126px;height:126px;margin:0 auto 13px;border:1px solid var(--stone-600);border-radius:var(--radius-round);display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--stone-750),var(--surface-low) 67%);overflow:hidden}
.creator-portrait span{font-size:112px;color:var(--surface-raised);text-shadow:0 0 18px rgb(var(--accent-300-rgb) / .24)}
.creator-preview>h4{text-align:center;color:var(--accent-300);font:500 var(--size-story) var(--body);margin:0}
.creator-preview>p{text-align:center;color:var(--muted);font-style:italic;margin:7px 0 20px}
.creator-preview>dl{margin:0 0 18px}
.creator-preview>dl div{padding:11px 0;border-top:1px solid var(--stone-800)}
.creator-preview dt{color:var(--stone-200)}.creator-preview dd{margin:4px 0 0;color:var(--muted);font-size:var(--size-small)}
.creation-status{margin-top:14px}
.status-step{display:flex;align-items:center;gap:var(--space-5);color:var(--muted);padding:5px 0}
.status-step::before{content:"";width:13px;height:13px;border:1px solid var(--stone-550);border-radius:var(--radius-round)}
.status-step.complete{color:var(--accent-400)}.status-step.complete::before{border-color:var(--accent-400);background:var(--accent-400);box-shadow:inset 0 0 0 3px var(--stone-900)}
.creator-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);min-height:72px;padding:12px 22px;border-top:1px solid var(--stone-780);background:var(--surface-low)}
.creator-footer>p{margin:0;color:var(--danger-400);font-size:var(--size-small);max-width:65%}
.creator-footer>div{display:flex;gap:var(--space-5);margin-left:auto}
.creator-footer button{min-width:110px}

@media(max-width:1100px){
  .creator-layout{grid-template-columns:185px minmax(0,1fr)}
  .creator-preview{display:none}
  .creator-top{grid-template-columns:1fr 2fr auto}
  .attribute-grid{grid-template-columns:120px minmax(160px,1fr)}
  .attribute-group{grid-column:1/-1}
}

@media(max-width:760px){
  .creator-dialog{width:100vw;height:100dvh;max-width:none;max-height:none}
  .creator-shell{border:0;border-radius:0}
  .creator-top{grid-template-columns:1fr auto;padding:11px 13px}
  .creator-top>div small,.creator-top>div h2{display:none}
  .creator-progress{grid-column:1}
  .creator-progress button{min-width:0;font-size:0}
  .creator-progress button::before{margin-bottom:0}
  .creator-progress button::after{top:14px}
  .creator-layout{display:block;overflow:hidden}
  .creator-sidebar{display:none}
  .creator-main{height:100%;padding:18px 15px}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill-grid,.creator-review{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .creator-footer{padding:9px 12px;min-height:64px}
  .creator-footer>p{position:absolute;left:14px;right:14px;bottom:67px;max-width:none;padding:7px 9px;background:var(--danger-950);border:1px solid var(--danger-700);border-radius:var(--radius-sm);pointer-events:none}
  .creator-footer>p:empty{display:none}
  .creator-footer>div{width:100%}
  .creator-footer button{flex:1;min-width:0}
}

@media(max-width:420px){
  .creator-progress button::before{width:25px;height:25px}
  .creator-progress button::after{top:12px;left:calc(50% + 15px);right:calc(-50% + 15px)}
  .choice-grid{grid-template-columns:1fr}
  .creator-main{padding-inline:12px}
  .creator-heading h3{font-size:var(--size-title)}
  .creator-import-row{justify-content:stretch}
  .creator-import-row button{width:100%}
  .creator-fieldset{padding:14px}
}
.creator-portrait img{width:100%;height:100%;object-fit:cover;display:block}