.card-composer-console {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(231, 97, 187, .34);
  border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, rgba(148, 80, 255, .15), transparent 32%), linear-gradient(145deg, rgba(15, 18, 37, .98), rgba(8, 10, 24, .96));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .32);
}
.card-composer-head,.card-composer-summary,.card-composer-actions,.card-composer-review-actions { display:flex; align-items:center; gap:12px; }
.card-composer-head { justify-content:space-between; margin-bottom:18px; }
.card-composer-head h2 { margin:4px 0 0; }
.card-composer-summary { flex-wrap:wrap; }
.card-composer-summary span { min-width:92px; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.035); color:#c8cad8; font-size:.8rem; }
.card-composer-summary strong { display:block; color:#fff; font-size:1.15rem; }
.card-composer-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr); gap:18px; }
.card-composer-panel { padding:18px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(3,6,18,.6); }
.card-composer-panel h3 { margin:0 0 6px; }
.card-composer-form,.card-composer-review-form { display:grid; gap:12px; margin-top:16px; }
.card-composer-form label,.card-composer-review-form label { display:grid; gap:6px; color:#d6d7e2; font-size:.86rem; font-weight:700; }
.card-composer-form input,.card-composer-form select,.card-composer-review-form input,.card-composer-review-form select { width:100%; min-height:44px; padding:9px 12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(8,11,25,.92); color:#fff; font:inherit; }
.card-composer-form input[type="file"] { padding:9px; }
.card-composer-help { margin:8px 0 0; color:#9498ac; font-size:.79rem; line-height:1.5; }
.card-composer-help strong { color:#f2ca72; }
.card-composer-queue { display:grid; gap:9px; max-height:430px; overflow:auto; margin-top:14px; padding-right:4px; }
.card-composer-job { display:grid; grid-template-columns:minmax(120px,1fr) auto auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.025); }
.card-composer-job strong,.card-composer-job small { display:block; }
.card-composer-job small { margin-top:3px; color:#9196aa; }
.card-composer-status { padding:5px 8px; border-radius:999px; background:rgba(130,139,167,.15); color:#c9cddb; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.card-composer-status.ready,.card-composer-status.locked { background:rgba(81,212,159,.14); color:#7de5b7; }
.card-composer-status.processing,.card-composer-status.queued,.card-composer-status.generating { background:rgba(117,173,255,.14); color:#99c4ff; }
.card-composer-status.waiting_for_generator { background:rgba(247,214,111,.14); color:#f7d66f; }
.card-composer-status.failed { background:rgba(255,90,118,.14); color:#ff8ba0; }
.card-composer-job button { min-height:34px; padding:6px 10px; }
.card-composer-review-form[hidden] { display:none; }
.card-composer-review-note { padding:11px 12px; border-left:3px solid #e761bb; border-radius:8px; background:rgba(231,97,187,.07); color:#bfc2d2; font-size:.82rem; }
.card-composer-error { min-height:1.3em; color:#ff9bac; font-size:.82rem; }
.card-composer-watcher { position:relative; overflow:hidden; min-height:360px; }
.card-composer-watcher::after { content:""; position:absolute; width:220px; height:220px; right:-90px; bottom:-100px; border-radius:50%; background:radial-gradient(circle, rgba(231,97,187,.2), transparent 68%); pointer-events:none; }
.card-composer-watcher-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:18px; border:1px solid rgba(231,97,187,.55); border-radius:16px; background:linear-gradient(145deg, rgba(231,97,187,.2), rgba(142,73,255,.16)); color:#ffd1ed; box-shadow:0 0 24px rgba(231,97,187,.18); font-size:1.45rem; }
.card-composer-watcher > p:not(.small-label) { max-width:540px; color:#b8bbca; line-height:1.55; }
.card-composer-watch-state { display:flex; align-items:center; gap:12px; margin:22px 0; padding:14px; border:1px solid rgba(100,231,178,.22); border-radius:14px; background:rgba(65,196,143,.07); }
.card-composer-watch-state > span { width:12px; height:12px; flex:0 0 auto; border-radius:50%; background:#62e5ad; box-shadow:0 0 14px rgba(98,229,173,.8); }
.card-composer-watch-state strong,.card-composer-watch-state small { display:block; }
.card-composer-watch-state strong { color:#dfffee; }
.card-composer-watch-state.generator-offline { border-color:rgba(247,214,111,.3); background:rgba(247,214,111,.07); }
.card-composer-watch-state.generator-offline > span { background:#f7d66f; box-shadow:0 0 14px rgba(247,214,111,.65); }
.card-composer-watch-state.generator-offline strong { color:#ffeaa6; }
.card-composer-watch-state small { margin-top:3px; color:#8fa99d; }
.card-composer-watcher ul { display:grid; gap:10px; margin:0; padding-left:20px; color:#d0d2dc; }
.card-composer-library-panel { margin-top:18px; padding:18px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(3,6,18,.6); }
.card-composer-library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.card-composer-library-head h3 { margin:4px 0 5px; }
.card-composer-library-head p { margin:0; color:#9ca0b2; }
.card-composer-library-count { min-width:86px; padding:10px 14px; border:1px solid rgba(231,97,187,.24); border-radius:14px; background:rgba(231,97,187,.07); color:#aeb1c1; text-align:center; }
.card-composer-library-count strong { display:block; color:#fff; font-size:1.15rem; }
.card-composer-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px; }
.card-composer-library-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:start; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.card-composer-library-card > img { width:72px; height:108px; border:1px solid rgba(255,255,255,.14); border-radius:10px; object-fit:cover; background:#070914; }
.card-composer-library-body { min-width:0; padding-top:2px; }
.card-composer-library-body strong,.card-composer-library-body small { display:block; }
.card-composer-library-body strong { margin:6px 0; overflow:hidden; color:#fff; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.card-composer-library-body small { margin-top:4px; overflow:hidden; color:#969aad; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; text-transform:capitalize; }
.card-composer-rarity { display:inline-flex; padding:4px 7px; border-radius:999px; background:rgba(215,224,232,.1); color:#d7e0e8; font-size:.67rem; font-weight:900; letter-spacing:.08em; }
.card-composer-rarity.rare { background:rgba(94,231,255,.1); color:#5ee7ff; }
.card-composer-rarity.legendary { background:rgba(255,126,234,.1); color:#ff8bea; }
.card-composer-rarity.mythic { background:rgba(247,214,111,.1); color:#f7d66f; }
.card-composer-library-actions { display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; gap:8px; }
.card-composer-library-actions button { min-height:38px; padding:7px 9px; font-size:.78rem; }
.card-composer-library-actions .card-composer-change { border-color:rgba(231,97,187,.36); color:#ffd2ed; }
.card-composer-library-actions .card-composer-revert:disabled { opacity:.38; cursor:not-allowed; }
@media (max-width:980px) { .card-composer-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .card-composer-library-head { align-items:flex-start; flex-direction:column; } .card-composer-library { grid-template-columns:1fr; } .card-composer-console { padding:15px; } .card-composer-head { align-items:flex-start; flex-direction:column; } .card-composer-job { grid-template-columns:1fr auto; } .card-composer-job button { grid-column:1/-1; } }

.admin-composer-launcher { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0; padding:22px 24px; border:1px solid rgba(231,97,187,.34); border-radius:20px; background:linear-gradient(135deg,rgba(231,97,187,.11),rgba(92,72,196,.08)); }
.admin-composer-launcher h2 { margin:4px 0 5px; }
.admin-composer-launcher p { max-width:760px; margin:0; color:#aeb2c4; }
.admin-composer-launcher .button { flex:0 0 auto; min-width:190px; }
.card-composer-page { max-width:none; }
.card-composer-page-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:8px 4px 0; }
.card-composer-page-hero h1 { margin:7px 0 8px; font-size:clamp(2rem,4vw,3.4rem); }
.card-composer-page-hero p:not(.small-label) { max-width:850px; margin:0; color:#aeb2c4; line-height:1.55; }
.card-composer-page-badge { flex:0 0 auto; padding:12px 16px; border:1px solid rgba(231,97,187,.35); border-radius:999px; color:#ffd2ed; font-weight:900; letter-spacing:.08em; }
.card-composer-page .card-composer-console { margin-top:18px; }
.card-composer-pipeline-grid { grid-template-columns:minmax(320px,.75fr) minmax(460px,1.25fr); }
.card-composer-page .card-composer-watcher { min-height:300px; }
.card-composer-review-heading,.card-composer-preview-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.card-composer-review-heading h3 { margin:4px 0 0; font-size:1.35rem; }
.card-composer-review-heading > span { color:#9fa3b7; font-size:.78rem; }
.card-composer-editor { display:grid; grid-template-columns:minmax(340px,520px) minmax(500px,1fr); align-items:start; gap:24px; }
.card-composer-preview-panel { position:sticky; top:18px; min-width:0; padding:16px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(2,4,14,.75); }
.card-composer-preview-head { margin-bottom:13px; }
.card-composer-preview-head strong,.card-composer-preview-head small { display:block; }
.card-composer-preview-head small { margin-top:4px; color:#9499ae; font-size:.76rem; }
.card-composer-preview-head > span { padding:5px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#c9ccda; font-size:.72rem; font-weight:900; }
.card-composer-preview-stage { display:grid; place-items:center; overflow:hidden; min-height:420px; padding:14px; border-radius:14px; background:radial-gradient(circle at 50% 30%,rgba(231,97,187,.12),transparent 52%),#050714; }
#cardComposerPreview { display:block; width:min(100%,430px); height:auto; aspect-ratio:2/3; border-radius:12px; background:#070914; box-shadow:0 18px 48px rgba(0,0,0,.48); }
.card-composer-controls { min-width:0; }
.card-composer-frame-fieldset { min-width:0; margin:0; padding:0; border:0; }
.card-composer-frame-fieldset legend { margin-bottom:10px; color:#f4f0f7; font-size:.9rem; font-weight:900; }
.card-composer-frame-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.card-composer-frame-picker > button { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:12px; min-height:92px; padding:10px; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(255,255,255,.025); color:#fff; text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.card-composer-frame-picker > button:hover { transform:translateY(-1px); border-color:rgba(231,97,187,.45); background:rgba(231,97,187,.06); }
.card-composer-frame-picker > button.active { border-color:#e761bb; background:linear-gradient(135deg,rgba(231,97,187,.14),rgba(131,77,255,.08)); box-shadow:0 0 0 2px rgba(231,97,187,.12); }
.card-composer-frame-picker > .composer-adaptive-choice { grid-column:1/-1; grid-template-columns:88px minmax(0,1fr); min-height:112px; border-color:rgba(231,97,187,.38); background:radial-gradient(circle at 12% 50%,rgba(94,231,255,.11),transparent 28%),linear-gradient(135deg,rgba(231,97,187,.12),rgba(131,77,255,.08)); }
.card-composer-frame-picker > .composer-adaptive-choice strong { color:#ffd6ef; font-size:1rem; }
.composer-frame-swatch.adaptive-generated { width:76px; height:82px; color:#f7d66f; box-shadow:inset 0 0 18px rgba(176,76,255,.34),0 0 16px rgba(94,231,255,.2); }
.composer-frame-swatch.adaptive-generated::before { border-color:#5ee7ff #f7d66f #ff7eea #9b75ff; border-radius:14px; box-shadow:0 0 8px rgba(94,231,255,.65); }
.composer-frame-swatch.adaptive-generated::after { border-color:#ff7eea #5ee7ff #f7d66f #9b75ff; border-radius:9px; }
.composer-frame-swatch.adaptive-generated i { width:24px; height:24px; border-color:#f7d66f #ff7eea #5ee7ff #9b75ff; box-shadow:0 0 8px rgba(247,214,111,.55); }
.card-composer-frame-picker strong,.card-composer-frame-picker small { display:block; }
.card-composer-frame-picker small { margin-top:5px; color:#969bad; font-size:.72rem; }
.composer-frame-swatch { position:relative; display:block; width:64px; height:68px; border-radius:9px; background:linear-gradient(150deg,#20233b,#070914 58%,#181126); }
.composer-frame-swatch::before,.composer-frame-swatch::after,.composer-frame-swatch i { content:""; position:absolute; pointer-events:none; }
.composer-frame-swatch::before { inset:6px; border:2px solid currentColor; border-radius:6px; }
.composer-frame-swatch::after { inset:11px; border:1px solid currentColor; border-radius:4px; opacity:.7; }
.composer-frame-swatch i { left:50%; top:50%; width:13px; height:13px; border:2px solid currentColor; transform:translate(-50%,-50%) rotate(45deg); }
.common-clean { color:#d7e0e8; }
.common-clean::after,.common-clean i { display:none; }
.common-balanced { color:#9fb2c2; }
.rare-neon { color:#5ee7ff; box-shadow:inset 0 0 14px rgba(94,231,255,.3),0 0 12px rgba(94,231,255,.18); }
.rare-neon::before { box-shadow:0 0 7px currentColor; }
.rare-luxe { color:#56a9ff; }
.rare-luxe i { width:3px; height:38px; border:0; background:currentColor; transform:translate(-50%,-50%); box-shadow:-22px 0 0 currentColor,22px 0 0 currentColor; }
.legendary-prism { color:#ff7eea; clip-path:polygon(13% 0,87% 0,100% 13%,100% 87%,87% 100%,13% 100%,0 87%,0 13%); }
.legendary-prism::before,.legendary-prism::after { border-radius:0; clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
.legendary-celestial { color:#a986ff; }
.legendary-celestial i { width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); }
.mythic-crown { color:#f7d66f; box-shadow:inset 0 0 16px rgba(176,76,255,.28); }
.mythic-crown i { top:17px; width:28px; height:16px; border:0; border-bottom:3px solid currentColor; transform:translateX(-50%); clip-path:polygon(0 0,24% 58%,50% 0,76% 58%,100% 0,88% 100%,12% 100%); background:currentColor; }
.mythic-architect { color:#d69cff; }
.mythic-architect::before { border-radius:0; border-width:3px; border-top-color:transparent; border-bottom-color:transparent; }
.mythic-architect i { width:30px; height:30px; border-style:dashed; }
.card-composer-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.card-composer-control-grid label { display:grid; gap:6px; color:#d6d7e2; font-size:.86rem; font-weight:700; }
.card-composer-control-grid input,.card-composer-control-grid select { width:100%; min-height:44px; padding:9px 12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(8,11,25,.92); color:#fff; font:inherit; }
.card-composer-wide-control { grid-column:1/-1; }
.card-composer-controls .card-composer-review-actions { margin-top:18px; }

.card-frame-workflow { display:grid; gap:14px; }
.frame-workflow-step { display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; padding:17px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.frame-workflow-step h4 { margin:3px 0 7px; color:#fff; font-size:1.08rem; }
.frame-workflow-step p:not(.small-label) { margin:0 0 13px; color:#aeb2c4; line-height:1.5; }
.frame-step-number { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(231,97,187,.45); border-radius:12px; background:rgba(231,97,187,.11); color:#ffd2ed; font-weight:900; }
#composerDownloadArtwork { display:inline-flex; width:max-content; text-decoration:none; }
.frame-generator-state { display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:10px; align-items:center; padding:12px; border:1px solid rgba(247,214,111,.28); border-radius:12px; background:rgba(247,214,111,.06); }
.frame-generator-state > span { grid-row:1/3; width:11px; height:11px; border-radius:50%; background:#f7d66f; box-shadow:0 0 12px rgba(247,214,111,.6); }
.frame-generator-state strong,.frame-generator-state small { display:block; }
.frame-generator-state strong { color:#ffeaa6; }
.frame-generator-state small { margin-top:3px; color:#aba791; }
.frame-upload-drop { display:grid; gap:5px; padding:16px; border:1px dashed rgba(231,97,187,.48); border-radius:14px; background:rgba(231,97,187,.045); cursor:pointer; }
.frame-upload-drop + .frame-upload-drop { margin-top:10px; }
.frame-upload-drop input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.frame-upload-drop strong { color:#ffd2ed; }
.frame-upload-drop small { color:#969bad; }
#composerUploadFrame { margin-top:10px; }
.fixed-layout-notice { display:grid; gap:4px; margin-top:12px; padding:12px 14px; border:1px solid rgba(94,231,255,.27); border-radius:12px; background:rgba(94,231,255,.07); }
.fixed-layout-notice strong { color:#8deeff; }
.fixed-layout-notice small { color:#a4a9ba; line-height:1.4; }
.composer-candidate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }
.composer-candidate-grid > .empty-state { grid-column:1/-1; }
.composer-candidate { display:grid; gap:7px; padding:8px; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(255,255,255,.025); color:#d8dbe7; cursor:pointer; }
.composer-candidate.active { border-color:#e761bb; background:rgba(231,97,187,.1); box-shadow:0 0 0 2px rgba(231,97,187,.1); }
.composer-candidate.legacy { border-color:rgba(255,180,94,.35); opacity:.72; }
.composer-candidate img { width:100%; aspect-ratio:2/3; border-radius:8px; object-fit:contain; background-color:#171a27; background-image:linear-gradient(45deg,#24283a 25%,transparent 25%),linear-gradient(-45deg,#24283a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#24283a 75%),linear-gradient(-45deg,transparent 75%,#24283a 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.composer-candidate span { display:grid; gap:3px; min-width:0; overflow:hidden; text-align:left; }
.composer-candidate strong { overflow:hidden; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.composer-candidate small { color:#9298ac; font-size:.66rem; line-height:1.25; white-space:normal; }
.composer-candidate.legacy small { color:#ffbd78; }
.card-frame-workflow > .card-composer-review-actions { justify-content:flex-start; padding-top:3px; }
@media (max-width:760px) { .composer-candidate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:1120px) { .card-composer-editor { grid-template-columns:minmax(300px,420px) minmax(420px,1fr); } }
@media (max-width:900px) { .card-composer-editor,.card-composer-pipeline-grid { grid-template-columns:1fr; } .card-composer-preview-panel { position:relative; top:auto; } .card-composer-preview-stage { min-height:0; } }
@media (max-width:620px) { .admin-composer-launcher,.card-composer-page-hero { align-items:flex-start; flex-direction:column; } .card-composer-frame-picker,.card-composer-control-grid { grid-template-columns:1fr; } .card-composer-wide-control { grid-column:auto; } .card-composer-frame-picker > button { grid-template-columns:64px minmax(0,1fr); } }

.artwork-fit-step { border-color:rgba(94,231,255,.22); background:linear-gradient(145deg,rgba(94,231,255,.05),rgba(255,255,255,.012)); }
.artwork-fit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.artwork-fit-grid label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; min-width:0; }
.artwork-fit-grid select { grid-column:1/-1; }
.artwork-fit-grid input[type="range"] { grid-column:1/-1; min-height:28px; padding:0; accent-color:#e761bb; cursor:pointer; }
.artwork-fit-grid output { color:#7eeaff; font-variant-numeric:tabular-nums; }
.artwork-fit-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:13px; }
.artwork-fit-lock { display:block; margin-top:10px; color:#8f94a8; line-height:1.45; }
.model-focus-tools { display:grid; gap:9px; margin-bottom:14px; padding:13px; border:1px solid rgba(231,97,187,.28); border-radius:14px; background:rgba(231,97,187,.055); }
.model-focus-tools > small { color:#a6aabd; line-height:1.4; }
.model-focus-tools > .button { width:max-content; }
.model-focus-picker { display:grid; gap:10px; margin-top:4px; }
.model-focus-picker > strong { color:#ffd2ed; }
.model-focus-stage { position:relative; width:min(100%,360px); aspect-ratio:2/3; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:#070914; cursor:crosshair; }
.model-focus-stage > img,.model-focus-stage > div { position:absolute; inset:0; width:100%; height:100%; }
.model-focus-stage > img { object-fit:fill; pointer-events:none; }
.model-focus-stage > div { pointer-events:auto; }
.model-focus-marker { position:absolute; display:grid; place-items:center; width:32px; height:32px; padding:0; border:2px solid #fff; border-radius:50%; background:#e761bb; color:#fff; font:950 .82rem/1 inherit; box-shadow:0 0 0 4px rgba(231,97,187,.28),0 0 18px rgba(231,97,187,.8); transform:translate(-50%,-50%); cursor:grab; touch-action:none; user-select:none; }
.model-focus-marker.is-dragging { cursor:grabbing; background:#9c4dff; box-shadow:0 0 0 6px rgba(156,77,255,.32),0 0 24px rgba(231,97,187,.95); }
@media (max-width:620px) { .model-focus-tools > .button,.model-focus-picker > .button { width:100%; } }


.frame-map-builder { margin-top:14px; padding:14px; border:1px solid rgba(94,231,255,.25); border-radius:16px; background:rgba(5,8,19,.72); }
.frame-map-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:13px; }
.frame-map-head > div { display:grid; gap:4px; }
.frame-map-head small { color:#959bad; line-height:1.4; }
.frame-map-head label { display:grid; gap:5px; min-width:230px; color:#d8dbe7; font-size:.8rem; font-weight:800; }
.frame-map-head select,.frame-map-controls select { width:100%; }
.frame-map-workspace { display:grid; grid-template-columns:minmax(250px,380px) minmax(190px,1fr); align-items:start; gap:14px; }
.frame-map-stage { position:relative; width:100%; aspect-ratio:2/3; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:12px; background-color:#111522; background-image:linear-gradient(45deg,#24283a 25%,transparent 25%),linear-gradient(-45deg,#24283a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#24283a 75%),linear-gradient(-45deg,transparent 75%,#24283a 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.frame-map-stage > img,.frame-map-stage > div { position:absolute; inset:0; width:100%; height:100%; }
.frame-map-stage > img { object-fit:fill; pointer-events:none; }
.frame-map-zone { position:absolute; display:grid; place-items:center; min-width:0; min-height:0; padding:2px; overflow:visible; border:2px solid rgba(94,231,255,.82); border-radius:5px; background:rgba(16,189,225,.17); color:#fff; cursor:move; touch-action:none; }
.frame-map-zone span { overflow:hidden; font-size:clamp(.42rem,1vw,.66rem); font-weight:900; line-height:1; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px #000; }
.frame-map-zone.active { z-index:3; border-color:#ff65c5; background:rgba(231,97,187,.26); box-shadow:0 0 0 2px rgba(231,97,187,.16); }
.frame-map-resize { position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; border:2px solid #09101d; border-radius:3px; background:#ff65c5; cursor:nwse-resize; }
.frame-map-controls { display:grid; gap:10px; }
.frame-map-controls label { display:grid; grid-template-columns:1fr auto; gap:6px; color:#d8dbe7; font-size:.8rem; font-weight:800; }
.frame-map-controls label:first-child select { grid-column:1/-1; }
.frame-map-controls input[type="range"] { grid-column:1/-1; min-height:26px; padding:0; accent-color:#e761bb; cursor:pointer; }
.frame-map-controls output { color:#7eeaff; font-variant-numeric:tabular-nums; }
.frame-map-result { display:grid; gap:3px; margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(94,231,255,.07); }
.frame-map-result strong { color:#8deeff; }
.frame-map-result small { color:#9aa0b4; }
.composer-candidate-item { display:grid; align-content:start; gap:5px; min-width:0; }
.composer-candidate-item .composer-candidate { width:100%; }
.composer-candidate-delete { width:100%; padding:7px 8px; border:1px solid rgba(255,99,126,.28); border-radius:9px; background:rgba(255,65,99,.06); color:#ff9aac; font-size:.7rem; font-weight:850; cursor:pointer; }
.composer-candidate-delete:hover { border-color:rgba(255,99,126,.62); background:rgba(255,65,99,.12); }
.composer-candidate-delete:disabled { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.025); color:#73798c; cursor:not-allowed; }
@media (max-width:760px) { .frame-map-head { align-items:stretch; flex-direction:column; } .frame-map-head label { min-width:0; } .frame-map-workspace { grid-template-columns:1fr; } }
@media (max-width:620px) { .artwork-fit-grid { grid-template-columns:1fr; } .artwork-fit-actions .button { width:100%; } }