/* WobbleYak Creative Workbench */
.creative-heading { margin-bottom:18px; }
.creative-heading-actions { display:flex; gap:8px; flex-wrap:wrap; }
.creative-collection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin:20px 0 30px; }
.creative-collection-card { background:#171b23; border:1px solid #303744; border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:14px; }
.creative-collection-card h2 { margin:0; font-size:24px; }
.creative-card-topline,.creative-slot-heading,.creative-section-title { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.creative-card-meta { display:flex; flex-direction:column; gap:4px; color:#929caf; font-size:12px; }
.creative-open { align-self:flex-start; margin-top:auto; }
.creative-progress-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.creative-progress-row > div { display:grid; gap:5px; }
.creative-progress-row span { color:#9ea8b8; font-size:12px; }
.creative-progress-row strong { font-size:18px; }
.creative-progress { height:7px; border-radius:999px; background:#252b36; overflow:hidden; }
.creative-progress span { display:block; height:100%; background:#5f9fe8; border-radius:999px; }
.creative-status,.creative-count-badge,.creative-qa { display:inline-flex; align-items:center; width:max-content; padding:5px 8px; border:1px solid #3b4657; background:#202631; border-radius:999px; color:#b9c7db; font-size:11px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.creative-status.approvedlocked,.creative-status.readytocompose,.creative-qa.pass { border-color:#397b55; background:#14251b; color:#a9ddb8; }
.creative-status.review,.creative-status.anchorreview,.creative-qa.review { border-color:#775b2e; background:#271f13; color:#e0c18b; }
.creative-status.rejected,.creative-status.escalated,.creative-qa.fail { border-color:#8d4343; background:#2a1717; color:#ffb1b1; }
.creative-new-collection { margin-top:34px; }
.creative-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px; }
.creative-form-grid label { min-width:0; }
.creative-form-grid small { display:block; color:#8f98a9; font-weight:400; margin-top:-8px; }
.creative-form-wide { grid-column:1 / -1; }
.creative-summary-cards .card strong { overflow-wrap:anywhere; }
.creative-style-panel p { max-width:1100px; line-height:1.55; color:#c3cad6; }
.creative-style-panel details { margin-top:12px; }
.creative-workbench-section { margin:34px 0 42px; }
.creative-section-title { align-items:flex-end; margin-bottom:14px; }
.creative-section-title h2 { margin:4px 0 4px; }
.creative-section-title p { margin:0; }
.creative-slot-stack { display:grid; gap:16px; }
.creative-slot-card { display:grid; grid-template-columns:minmax(220px,320px) minmax(0,1fr); gap:20px; padding:18px; border:1px solid #303744; border-radius:14px; background:#171b23; margin-bottom:16px; }
.creative-slot-card.creative-slot-blocked { opacity:.72; border-style:dashed; }
.creative-slot-preview { min-height:240px; background:#10141b; border:1px solid #2c3440; border-radius:11px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.creative-slot-preview img { width:100%; height:300px; object-fit:contain; background:
linear-gradient(45deg,#171c24 25%,transparent 25%),
linear-gradient(-45deg,#171c24 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#171c24 75%),
linear-gradient(-45deg,transparent 75%,#171c24 75%);
background-size:24px 24px;
background-position:0 0,0 12px,12px -12px,-12px 0; }
.creative-preview-meta { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:#11161d; color:#9da7b8; font-size:11px; }
.creative-empty-preview { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; color:#768195; min-height:280px; }
.creative-empty-preview strong { font-size:30px; color:#a8b5c9; }
.creative-slot-body { min-width:0; }
.creative-slot-heading h3 { margin:3px 0 10px; font-size:23px; }
.creative-slot-code { color:#83b6ff; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.creative-gate-note { margin:0 0 12px; padding:10px 12px; border:1px solid #665b35; background:#211f17; border-radius:8px; color:#d9c38e; }
.creative-escalation-note { display:grid; gap:7px; margin:0 0 14px; padding:12px 13px; border:1px solid #8a6330; border-radius:9px; background:#2b2113; color:#e6c68d; }
.creative-escalation-note strong { color:#ffd79a; }
.creative-escalation-note span { font-size:12px; line-height:1.45; }
.creative-escalation-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.creative-approved-note { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:9px 11px; border:1px solid #315f43; border-radius:8px; background:#142019; color:#b3dfbf; font-size:12px; }
.creative-qa-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.creative-provider-row { display:grid; grid-template-columns:minmax(160px,.35fr) minmax(240px,1fr); gap:12px; }
.creative-provider-row select,.creative-provider-row input { margin-bottom:10px; }
.creative-slot-actions,.creative-decision-row { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.creative-spend-note { margin:-4px 0 14px; color:#8f98a9; font-size:12px; line-height:1.45; }
.creative-upload-box { padding:12px; border:1px solid #364050; background:#131820; border-radius:10px; margin:12px 0; }
.creative-upload-box label { margin-top:0; }
.creative-upload-box .meta { margin-left:9px; }
.creative-history { margin-top:14px; border-top:1px solid #303744; padding-top:12px; }
.creative-history summary { cursor:pointer; color:#b9c8dd; font-weight:700; }
.creative-version-list { display:grid; gap:9px; margin-top:10px; }
.creative-version-row { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; padding:8px; border:1px solid #2d3440; border-radius:8px; background:#12171e; }
.creative-version-row img { width:64px; height:64px; object-fit:contain; border-radius:6px; background:#0e1117; }
.creative-version-row div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.creative-version-row span { color:#939dae; font-size:11px; overflow-wrap:anywhere; }
.creative-compose-panel { display:flex; justify-content:space-between; align-items:center; gap:20px; border-style:dashed; }
.creative-compose-panel.ready { border-style:solid; border-color:#397b55; background:#142019; }


.creative-pattern-review { margin:34px 0 44px; padding:20px; border:1px solid #35506f; border-radius:14px; background:#141b25; }
.creative-pattern-images { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.creative-pattern-images figure { margin:0; padding:12px; border:1px solid #303744; border-radius:11px; background:#10141b; }
.creative-pattern-images figcaption { margin-bottom:9px; color:#b9c5d7; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.creative-pattern-images img { display:block; width:100%; max-height:620px; object-fit:contain; border-radius:8px; background:#0d1117; }
.creative-pattern-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.creative-pattern-metrics > div { display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid #303744; border-radius:9px; background:#121820; }
.creative-pattern-metrics span { color:#8f98a9; font-size:11px; }
.creative-pattern-metrics strong { font-size:20px; color:#e8edf6; }
.creative-pattern-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.creative-review-note { padding:10px 12px; border-left:3px solid #6c86aa; background:#111720; color:#c7d0dd; }

@media (max-width:900px) {
    .creative-form-grid { grid-template-columns:1fr 1fr; }
    .creative-pattern-images { grid-template-columns:1fr; }
    .creative-pattern-metrics { grid-template-columns:1fr 1fr; }
    .creative-slot-card { grid-template-columns:1fr; }
    .creative-slot-preview { max-width:520px; width:100%; }
    .creative-compose-panel { flex-direction:column; align-items:flex-start; }
}
@media (max-width:620px) {
    .creative-form-grid,.creative-progress-row,.creative-provider-row,.creative-pattern-metrics { grid-template-columns:1fr; }
    .creative-form-wide { grid-column:auto; }
    .creative-card-topline,.creative-slot-heading,.creative-section-title { flex-direction:column; align-items:flex-start; }
    .creative-upload-box .meta { display:block; margin:9px 0 0; }
}


/* Creative Workbench operation feedback */
.creative-provider-health {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 14px;
}
.creative-provider-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #3a4350;
    background:#151b23;
    color:#b8c1ce;
    font-size:12px;
    font-weight:800;
}
.creative-provider-pill.ready {
    border-color:#315f43;
    background:#142019;
    color:#b3dfbf;
}
.creative-provider-pill.unavailable {
    border-color:#76504d;
    background:#261817;
    color:#e0aaa4;
}
.creative-toast-stack {
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:2000;
    display:grid;
    gap:10px;
    width:min(390px,calc(100vw - 28px));
    pointer-events:none;
}
.creative-toast {
    opacity:0;
    transform:translateY(12px);
    padding:12px 14px;
    border:1px solid #315f43;
    border-radius:10px;
    background:#142019;
    color:#d9f2df;
    box-shadow:0 12px 34px rgba(0,0,0,.35);
    font-size:13px;
    line-height:1.45;
    transition:opacity .18s ease,transform .18s ease;
}
.creative-toast.show {
    opacity:1;
    transform:translateY(0);
}
.creative-toast.error {
    border-color:#81514d;
    background:#281817;
    color:#f1c2bd;
}
.creative-slot-card.is-busy {
    outline:1px solid #537aa7;
    box-shadow:0 0 0 3px rgba(83,122,167,.12);
}
.creative-operation-progress {
    margin:0 0 14px;
    padding:11px 12px;
    border:1px solid #365171;
    border-radius:9px;
    background:#111923;
}
.creative-operation-progress.failed {
    border-color:#81514d;
    background:#241716;
}
.creative-operation-progress-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    color:#c9d7e8;
    font-size:12px;
    font-weight:800;
}
.creative-operation-progress-track {
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#0c1118;
}
.creative-operation-progress-fill {
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#597fae,#8aa9ce);
    transition:width .55s ease;
}
.creative-operation-progress small {
    display:block;
    margin-top:7px;
    color:#8591a2;
    font-size:10px;
    line-height:1.4;
}
@media (max-width:620px) {
    .creative-toast-stack {
        right:14px;
        bottom:14px;
        width:calc(100vw - 28px);
    }
}


/* Collection comparison and image provenance */
.creative-preview-provenance {
    display:grid;
    gap:3px;
    padding:8px 10px 10px;
    border-top:1px solid #232b36;
    background:#11161d;
    color:#8995a7;
    font-size:10px;
    line-height:1.35;
}
.creative-preview-provenance span { overflow-wrap:anywhere; }
.creative-slot-highlight {
    outline:2px solid #6f9ed5 !important;
    box-shadow:0 0 0 6px rgba(111,158,213,.14) !important;
    transition:outline-color .2s ease,box-shadow .2s ease;
}
.creative-gallery-section {
    scroll-margin-top:18px;
    margin:42px 0 56px;
    padding:20px;
    border:1px solid #35506f;
    border-radius:14px;
    background:#141b25;
}
.creative-spend-cards {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:16px 0 20px;
}
.creative-spend-cards .card { min-width:0; }
.creative-spend-cards .card strong {
    font-size:18px;
    overflow-wrap:anywhere;
}
.creative-gallery-filters {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 16px;
}
.creative-gallery-filter {
    padding:7px 11px;
    border:1px solid #3b4657;
    border-radius:999px;
    background:#1b222d;
    color:#aeb9c9;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:800;
}
.creative-gallery-filter:hover,
.creative-gallery-filter.active {
    border-color:#5d84b1;
    background:#203249;
    color:#e0edff;
}
.creative-gallery-details-toggle {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    padding:7px 11px;
    border:1px solid #3b4657;
    border-radius:999px;
    background:#1b222d;
    color:#aeb9c9;
    cursor:pointer;
    font-size:12px;
    font-weight:800;
}
.creative-gallery-details-toggle input {
    width:auto;
    margin:0;
    accent-color:#6f9ed5;
}
.creative-gallery-details {
    display:grid;
    gap:9px;
}
.creative-gallery-section.gallery-details-hidden .creative-gallery-details {
    display:none;
}
.creative-gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
}
.creative-gallery-tile {
    min-width:0;
    overflow:hidden;
    border:1px solid #3b4657;
    border-radius:12px;
    background:#111720;
}
.creative-gallery-tile.approvedlocked { border-color:#397b55; }
.creative-gallery-tile.review,
.creative-gallery-tile.anchorreview { border-color:#775b2e; }
.creative-gallery-tile.rejected,
.creative-gallery-tile.escalated { border-color:#8d4343; }
.creative-gallery-image-button {
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#0e131a;
    cursor:zoom-in;
}
.creative-gallery-image-button img {
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:
        linear-gradient(45deg,#171c24 25%,transparent 25%),
        linear-gradient(-45deg,#171c24 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#171c24 75%),
        linear-gradient(-45deg,transparent 75%,#171c24 75%);
    background-size:22px 22px;
    background-position:0 0,0 11px,11px -11px,-11px 0;
}
.creative-gallery-empty {
    display:flex;
    aspect-ratio:1 / 1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#0e131a;
    color:#748094;
}
.creative-gallery-empty strong {
    color:#a8b5c9;
    font-size:24px;
}
.creative-gallery-body {
    display:grid;
    gap:9px;
    padding:12px;
}
.creative-gallery-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}
.creative-gallery-heading h3 {
    margin:3px 0 0;
    font-size:16px;
    line-height:1.25;
}
.creative-gallery-version {
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:#aeb8c6;
    font-size:11px;
    font-weight:800;
}
.creative-gallery-provenance {
    display:grid;
    gap:3px;
    min-height:44px;
    color:#8793a5;
    font-size:10px;
    line-height:1.35;
    overflow-wrap:anywhere;
}
.creative-gallery-jump {
    justify-self:start;
    margin-top:2px;
}
.creative-gallery-dialog {
    width:min(900px,calc(100vw - 28px));
    max-height:90vh;
    padding:0;
    border:1px solid #465974;
    border-radius:14px;
    background:#10151d;
    color:#e9eef5;
}
.creative-gallery-dialog::backdrop { background:rgba(0,0,0,.78); }
.creative-gallery-dialog-inner {
    position:relative;
    display:grid;
    gap:10px;
    padding:16px;
}
.creative-gallery-dialog-image {
    display:block;
    width:100%;
    max-height:76vh;
    object-fit:contain;
    border-radius:9px;
    background:#0a0e14;
}
.creative-gallery-dialog-title {
    color:#cbd6e5;
    font-size:13px;
}
.creative-gallery-dialog-close {
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    width:36px;
    height:36px;
    border:1px solid #465467;
    border-radius:999px;
    background:#161d27;
    color:#eef4fb;
    cursor:pointer;
    font-size:24px;
    line-height:1;
}
@media (max-width:1100px) {
    .creative-spend-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
    .creative-spend-cards { grid-template-columns:1fr 1fr; }
    .creative-gallery-section { padding:14px; }
}
@media (max-width:480px) {
    .creative-spend-cards { grid-template-columns:1fr; }
    .creative-gallery-grid {
        grid-template-columns:1fr 1fr;
        gap:9px;
    }
    .creative-gallery-body { padding:9px; }
    .creative-gallery-heading { display:grid; }
    .creative-gallery-heading h3 { font-size:14px; }
}


/* Hero composition diversity contract */
.creative-diversity-plan {
    margin:12px 0 14px;
    padding:13px;
    border:1px solid #3d5370;
    border-radius:10px;
    background:#121a25;
}
.creative-diversity-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}
.creative-diversity-heading > div {
    display:grid;
    gap:3px;
}
.creative-diversity-heading strong {
    color:#dbe7f7;
    font-size:14px;
}
.creative-diversity-mode {
    display:inline-flex;
    padding:4px 7px;
    border:1px solid #49698f;
    border-radius:999px;
    background:#19283b;
    color:#b9d6f8;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}
.creative-diversity-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 12px;
    margin-top:10px;
}
.creative-diversity-grid label:last-child {
    grid-column:1 / -1;
}
.creative-diversity-warnings {
    display:grid;
    gap:5px;
    margin-top:8px;
    padding:9px 10px;
    border:1px solid #775b2e;
    border-radius:8px;
    background:#271f13;
    color:#e0c18b;
    font-size:11px;
    line-height:1.4;
}
.creative-anchor-reference-toggle {
    display:grid;
    gap:5px;
    margin:8px 0 12px;
    padding:10px 12px;
    border:1px solid #303b49;
    border-radius:9px;
    background:#121820;
}
.creative-anchor-reference-toggle > span {
    display:flex;
    align-items:center;
    gap:8px;
    color:#c8d3e2;
    font-size:12px;
    font-weight:800;
}
.creative-anchor-reference-toggle input {
    width:auto;
    margin:0;
}
.creative-anchor-reference-toggle small {
    color:#8793a5;
    font-size:10px;
    line-height:1.4;
}
.creative-generation-mode-note {
    margin:-6px 0 14px;
    color:#8f9bad;
    font-size:11px;
    line-height:1.45;
}
.creative-generation-mode-note strong {
    color:#c8d5e6;
}
@media (max-width:620px) {
    .creative-diversity-grid { grid-template-columns:1fr; }
    .creative-diversity-grid label:last-child { grid-column:auto; }
    .creative-diversity-heading { display:grid; }
}

.creative-gallery-composition {
    display:grid;
    gap:2px;
    padding:7px 8px;
    border:1px solid #2d3948;
    border-radius:7px;
    background:#0f151d;
    color:#8f9caf;
    font-size:10px;
    line-height:1.35;
}
.creative-gallery-composition strong {
    display:inline-block;
    min-width:58px;
    color:#b8c7da;
    font-weight:800;
}

@media (max-width:700px) {
    .creative-gallery-details-toggle {
        margin-left:0;
    }
}


/* Creative collection slot management */
.creative-slot-manager {
    margin:20px 0 28px;
}
.creative-slot-manager-controls {
    display:grid;
    grid-template-columns:minmax(150px,220px) minmax(150px,220px) minmax(180px,220px);
    align-items:start;
    gap:12px;
    max-width:820px;
}
.creative-slot-manager-controls label {
    margin:0;
}
.creative-slot-manager-controls input {
    margin-bottom:0;
}
.creative-slot-manager-controls small {
    display:block;
    margin-top:5px;
    color:#8f98a9;
    font-size:10px;
    font-weight:400;
}
.creative-slot-manager-controls button {
    min-height:43px;
    margin:23px 0 0;
    align-self:start;
}
@media (max-width:700px) {
    .creative-slot-manager-controls {
        grid-template-columns:1fr 1fr;
    }
    .creative-slot-manager-controls button {
        grid-column:1 / -1;
        justify-self:start;
    }
}


/* Pattern composition controls */
.creative-compose-main {
    flex:1 1 auto;
    min-width:0;
}
.creative-pattern-controls {
    display:grid;
    grid-template-columns:minmax(220px,1.2fr) minmax(190px,1fr) minmax(220px,1fr);
    gap:12px;
    margin-top:16px;
}
.creative-pattern-controls > label {
    margin:0;
}
.creative-pattern-controls small {
    display:block;
    margin-top:5px;
    color:#8e99aa;
    font-size:10px;
    font-weight:400;
    line-height:1.4;
}
.creative-pattern-colour-control {
    grid-row:span 2;
}
.creative-colour-inputs {
    display:grid;
    grid-template-columns:48px 1fr;
    gap:8px;
    align-items:center;
}
.creative-colour-inputs input[type="color"] {
    width:48px;
    height:43px;
    padding:3px;
    border-radius:8px;
    cursor:pointer;
}
.creative-colour-inputs input[type="text"] {
    margin:0;
    text-transform:uppercase;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.creative-colour-presets {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
.creative-colour-preset {
    padding:5px 8px;
    border:1px solid #394554;
    border-radius:999px;
    background:#18202a;
    color:#aeb9c8;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
}
.creative-colour-preset:hover:not(:disabled) {
    border-color:#5d84b1;
    color:#e1ebf8;
}
.creative-seed-control {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}
.creative-seed-control input,
.creative-seed-control button {
    margin:0;
}
.creative-pattern-anchor-toggle {
    grid-column:2 / -1;
    align-self:end;
    padding:10px 12px;
    border:1px solid #334052;
    border-radius:9px;
    background:#111923;
}
.creative-pattern-anchor-toggle > span {
    display:flex;
    align-items:center;
    gap:8px;
    color:#c7d3e3;
    font-size:12px;
    font-weight:800;
}
.creative-pattern-anchor-toggle input {
    width:auto;
    margin:0;
}
.creative-pattern-recipe-summary {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px 12px;
    margin:12px 0 16px;
    padding:9px 11px;
    border:1px solid #303b49;
    border-radius:9px;
    background:#111820;
    color:#98a5b7;
    font-size:11px;
}
.creative-pattern-recipe-summary strong {
    color:#d6e1ef;
}
.creative-pattern-swatch {
    width:20px;
    height:20px;
    flex:0 0 20px;
    border:1px solid #556170;
    border-radius:5px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
@media (max-width:1050px) {
    .creative-pattern-controls {
        grid-template-columns:1fr 1fr;
    }
    .creative-pattern-colour-control {
        grid-row:auto;
    }
    .creative-pattern-anchor-toggle {
        grid-column:1 / -1;
    }
}
@media (max-width:650px) {
    .creative-pattern-controls {
        grid-template-columns:1fr;
    }
    .creative-pattern-anchor-toggle {
        grid-column:auto;
    }
    .creative-seed-control {
        grid-template-columns:1fr;
    }
    .creative-seed-control button {
        justify-self:start;
    }
}


/* Pattern gap / distribution QA */
.creative-pattern-status-row {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    justify-content:flex-end;
}
.creative-distribution-note {
    margin:10px 0 0;
    padding:10px 12px;
    border-left:3px solid #8d6d33;
    background:#181711;
    color:#d6c79f;
    line-height:1.45;
    font-size:12px;
}
.creative-distribution-note strong {
    color:#f0d89b;
}
@media (max-width:700px) {
    .creative-pattern-status-row {
        justify-content:flex-start;
    }
}


/* Surface Pattern Engine V2 filler-role controls */
.creative-pattern-role-plan {
    margin:12px 0 14px;
    padding:13px;
    border:1px solid #40614f;
    border-radius:10px;
    background:#111d18;
}
.creative-pattern-role-plan .creative-diversity-mode {
    border-color:#4e765f;
    background:#172a20;
    color:#bfe2cb;
}


/* Surface Engine V2 role planning */
.creative-surface-plan {
    border-color:#365846;
    background:#0f1b16;
}

.creative-surface-role-status {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 14px;
}

.creative-surface-role-status > span {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border:1px solid #355043;
    border-radius:999px;
    background:#14231c;
    color:#c7d9cf;
    font-size:.82rem;
}

.creative-surface-role-status > span.attention {
    border-color:#735d28;
    background:#241f12;
    color:#f0d994;
}

.creative-surface-plan-controls {
    grid-template-columns:repeat(3,minmax(150px,220px)) minmax(190px,230px);
    align-items:start;
    max-width:940px;
}

.creative-surface-plan-controls button {
    margin-top:23px;
    width:100%;
}

.creative-surface-role-groups {
    display:grid;
    gap:22px;
}

.creative-surface-role-group {
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid #263849;
    border-radius:12px;
    background:#0e151d;
}

.creative-surface-role-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.creative-surface-role-heading h3 {
    margin:2px 0 4px;
}

.creative-surface-role-group.secondary {
    border-color:#315b50;
}

.creative-surface-role-group.accent {
    border-color:#5e5030;
}

.creative-surface-role-group.texture {
    border-color:#46526b;
}

@media (max-width: 900px) {
    .creative-surface-plan-controls {
        grid-template-columns:1fr 1fr;
    }

    .creative-surface-role-heading {
        flex-direction:column;
    }
}

@media (max-width: 620px) {
    .creative-surface-plan-controls {
        grid-template-columns:1fr;
    }
}


/* Keep collection-structure and surface-plan controls on one visual baseline. */
.creative-slot-manager-controls > label,
.creative-surface-plan-controls > label {
    display:grid;
    grid-template-rows:auto 43px auto;
    align-content:start;
}

.creative-slot-manager-controls > label > input,
.creative-surface-plan-controls > label > input {
    height:43px;
    box-sizing:border-box;
}