:root {
  --ink: #131417;
  --muted: #72747b;
  --line: #deded9;
  --line-soft: #ebeae5;
  --paper: #f3f2ed;
  --panel: #faf9f5;
  --white: #fff;
  --acid: #d8ff3e;
  --orange: #ff6037;
  --purple: #7657ff;
  --red: #ef4f5f;
  --green: #16a56f;
  --shadow: 0 18px 56px rgba(25, 25, 28, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--paper); font-family: "DM Sans", Inter, Arial, sans-serif; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
textarea { resize: vertical; }
.hidden { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }
.app-locked .topbar, .app-locked .workspace { display: none; }
.app-locked dialog { display: none !important; }
body:not(.app-locked) .auth-screen { display: none; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 18% 12%, #e3dbff 0, transparent 34%), radial-gradient(circle at 86% 86%, #d8ff3e 0, transparent 32%), var(--paper); }
.auth-checking-card { display: none; width: min(410px, 100%); gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.auth-checking .auth-checking-card { display: grid; }
.auth-checking .auth-card { display: none; }
.auth-checking-card strong { font: 800 25px "Manrope", sans-serif; }
.auth-checking-card p { margin: -2px 0 0; color: var(--muted); font-size: 12px; }
.auth-card { width: min(410px, 100%); display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.auth-card h1 { margin: 0; font: 800 25px "Manrope", sans-serif; }
.auth-card p { margin: -4px 0 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-card label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.auth-card small { min-height: 17px; color: var(--red); font-size: 10px; }
.account-action-dialog { width: min(430px, calc(100vw - 28px)); }
.account-action-form { display: grid; gap: 12px; padding: 24px; }
.account-action-form h2 { margin: 0; font: 800 23px "Manrope", sans-serif; }
.account-action-form p { margin: -5px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-action-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.account-action-form small { min-height: 17px; color: var(--red); font-size: 10px; }
.account-action-form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.topbar {
  height: 70px; display: grid; grid-template-columns: 290px 1fr 290px; align-items: center;
  position: sticky; top: 0; z-index: 100; padding: 0 18px; border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 245, .94); backdrop-filter: blur(18px);
}
.wordmark { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.wordmark-symbol { width: 34px; height: 34px; position: relative; display: block; transform: rotate(-8deg); }
.wordmark-symbol i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: multiply; }
.wordmark-symbol i:nth-child(1) { width: 24px; height: 24px; left: 1px; top: 1px; background: var(--orange); }
.wordmark-symbol i:nth-child(2) { width: 21px; height: 21px; right: 0; bottom: 0; background: var(--purple); }
.wordmark-symbol i:nth-child(3) { width: 10px; height: 10px; right: 2px; top: 0; background: var(--acid); }
.wordmark > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark strong { font: 800 14px/1 "Manrope", sans-serif; letter-spacing: .14em; }
.wordmark small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.topbar-center { justify-self: center; display: flex; align-items: center; gap: 10px; }
.status-badge, .speed-badge { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: var(--white); font-size: 11px; font-weight: 600; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; }
.status-badge i { width: 7px; height: 7px; border-radius: 50%; background: #a3a4aa; }
.status-badge.ready i { background: var(--green); box-shadow: 0 0 0 3px rgba(22, 165, 111, .12); }
.status-badge.local i { background: var(--purple); box-shadow: 0 0 0 3px rgba(118, 87, 255, .12); }
.speed-badge { background: var(--acid); color: #222512; border-color: #c5e835; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.current-user { max-width: 120px; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.workspace { height: calc(100vh - 70px); display: grid; grid-template-columns: 290px minmax(520px, 1fr) 310px; overflow: hidden; }
.left-panel, .right-panel { background: var(--panel); }
.left-panel { min-height: 0; overflow: hidden; border-right: 1px solid var(--line); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.left-panel-content { min-height: 0; }
.right-panel { border-left: 1px solid var(--line); }
.panel-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c8c7c1 transparent; }
.panel-section { padding: 19px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-section.compact { padding: 17px 16px; }
.section-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.section-title > span { width: 25px; color: var(--purple); font: 700 10px/1.4 "Manrope", sans-serif; letter-spacing: .09em; }
.section-title > div { display: flex; flex-direction: column; gap: 3px; }
.section-title strong { font: 700 13px/1.2 "Manrope", sans-serif; }
.section-title small { color: var(--muted); font-size: 10px; }
.field-label { display: flex; flex-direction: column; gap: 6px; color: #5f6168; font-size: 10px; font-weight: 700; letter-spacing: .035em; }
.field-label + .field-label { margin-top: 12px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--white); padding: 9px 10px; font-size: 12px; transition: border-color .15s, box-shadow .15s; }
textarea { line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: #8a75f4; box-shadow: 0 0 0 3px rgba(118, 87, 255, .09); }
.brief-input { min-height: 118px; background: #fff; border-radius: 10px; font-size: 13px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.two-fields .field-label + .field-label { margin-top: 0; }
.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.text-editor-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 10px; }
.text-editor-actions .secondary-button { min-height: 34px; text-align: left; font-size: 10px; }
.text-style-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 10px; }
.text-style-buttons { display: flex; gap: 4px; }
.text-style-buttons button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: 13px; }
.text-style-buttons button[aria-pressed="true"] { border-color: #7657ff; background: #efeaff; color: #5e47cf; box-shadow: 0 0 0 2px rgba(118,87,255,.11); }
.text-style-controls .field-label { min-width: 0; }
.text-style-controls select { min-width: 0; }
.selection-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
.selection-actions .secondary-button, .selection-actions .danger-button { width: 100%; min-height: 38px; text-align: left; white-space: normal; }
.inline-text-editor { position: fixed; z-index: 140; margin: 0; resize: none; overflow: hidden; white-space: pre; border: 0; border-radius: 0; padding: 0; background: transparent; outline: 0; box-shadow: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: currentColor; font-family: "Manrope", Arial, sans-serif; font-weight: 800; letter-spacing: normal; line-height: 1.06; }
.inline-text-editor:focus { border: 0; outline: 0; box-shadow: none; }
.brand-strip { display: flex; align-items: center; min-height: 31px; gap: 6px; margin-top: 9px; }
.brand-swatch { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .08); }
.brand-logo { margin-left: auto; width: 52px; height: 28px; object-fit: contain; object-position: right center; }
.brand-monogram { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #16181e; color: white; font: 800 11px "Manrope", sans-serif; }
.text-button { appearance: none; padding: 0; margin-top: 10px; border: 0; background: transparent; color: #6651d7; font-size: 11px; font-weight: 700; }
.organization-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.organization-actions .text-button { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.brand-settings { display: grid; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--line); }
.brand-settings label { color: var(--muted); font-size: 10px; font-weight: 700; }
.brand-settings input, .brand-settings textarea { margin-top: 4px; }
.pipeline-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; padding: 10px; border-radius: 10px; background: #f0edff; color: #5c4cb8; }
.model-catalog-status { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.model-catalog-status.ready { color: var(--green); }
.model-catalog-status.error { color: var(--red); }
.pipeline-note p { margin: 0; font-size: 10px; line-height: 1.4; }
.pipeline-icon { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: white; font-size: 14px; }
.generate-dock { position: relative; z-index: 12; padding: 11px 12px 12px; border-top: 1px solid var(--line); background: var(--panel); box-shadow: 0 -10px 24px rgba(18, 19, 22, .06); }
.generate-button { width: 100%; min-height: 60px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; border: 0; border-radius: 12px; padding: 10px 12px; background: #16834a; color: white; text-align: left; box-shadow: 0 10px 24px rgba(22, 131, 74, .22); }
.generate-button:hover { transform: translateY(-1px); background: #116b3b; }
.generate-button:active { transform: translateY(0); }
.generate-button.loading { pointer-events: none; background: #342b64; }
.generate-button > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.generate-button strong { font-size: 12px; }
.generate-button small { color: #b8b7be; font-size: 9px; }
.generate-spark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--acid); color: #202214; }
.brief-launch-section .generate-button { min-height: 72px; }
.brief-launch-section .generate-button small { color: rgba(255,255,255,.74); }
kbd { border: 1px solid #4a4b50; border-radius: 5px; padding: 3px 5px; color: #aeb0b7; font: 500 8px sans-serif; }

.stage-column { min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: grid; grid-template-rows: 54px minmax(0, 1fr) 144px; background: #deded9; }
.stage-toolbar { z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #cacac4; background: rgba(239, 238, 233, .94); }
.variant-nav, .view-controls { display: flex; align-items: center; gap: 9px; }
.variant-nav > div { min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.variant-nav strong { font-size: 12px; }
.variant-nav small { color: var(--muted); font-size: 9px; }
.icon-button, .tool-button { border: 1px solid var(--line); background: white; border-radius: 8px; min-width: 31px; height: 31px; display: inline-grid; place-items: center; }
.icon-button:hover:not(:disabled), .tool-button:hover:not(:disabled), .tool-button.active { border-color: #afa4e7; background: #f3efff; color: #5e48d1; }
.view-controls { border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: rgba(255,255,255,.6); }
.view-controls .tool-button { min-width: 28px; height: 26px; border: 0; background: transparent; }
.view-controls .tool-button.active { background: #f1edff; color: #5e48d1; box-shadow: inset 0 0 0 1px #b7aaf0; }
.view-controls .tool-button[data-tooltip] { position: relative; }
.view-controls .tool-button[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 80; right: 0; top: calc(100% + 10px); width: max-content; max-width: 230px; padding: 8px 10px; border-radius: 8px; background: #202126; color: #fff; font: 600 10px/1.35 "DM Sans", sans-serif; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.view-controls .tool-button[data-tooltip]:hover::after, .view-controls .tool-button[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }
.guide-controls { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding-left: 7px; border-left: 1px solid var(--line); }
.guide-controls span { min-width: 90px; color: #5e48d1; font-size: 9px; font-weight: 700; white-space: nowrap; }
.danger-tool { color: #b72e43 !important; }
.view-controls span { min-width: 35px; text-align: center; color: var(--muted); font-size: 10px; }
.stage-viewport { position: relative; display: grid; place-items: center; min-height: 0; overflow: auto; padding: 28px; background-color: #deded9; }
.stage-viewport.show-grid { background-image: radial-gradient(#bcbcb6 1px, transparent 1px); background-size: 18px 18px; }
.canvas-wrap { position: relative; width: var(--canvas-display-width, min(720px, 100%)); height: auto; min-width: 0; max-width: 100%; aspect-ratio: var(--canvas-ratio, 1 / 1); transform-origin: center; transition: transform .2s ease; }
.canvas { width: 100%; height: 100%; overflow: hidden; background: white; box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.08); user-select: none; touch-action: none; }
.canvas svg { display: block; width: 100%; height: 100%; }
.guide-handles { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.guide-grab { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.guide-grab.vertical { top: -17px; bottom: -17px; width: 32px; cursor: ew-resize; }
.guide-grab.horizontal { left: -17px; right: -17px; height: 32px; cursor: ns-resize; }
.guide-grab::after { content: ""; position: absolute; background: #7657ff; opacity: .82; border-radius: 999px; transition: background .15s, opacity .15s; }
.guide-grab.vertical::after { top: 0; bottom: 0; left: 14px; width: 4px; }
.guide-grab.horizontal::after { left: 0; right: 0; top: 14px; height: 4px; }
.guide-grab:hover::after, .guide-grab:focus-visible::after { background: #d8ff3e; opacity: 1; }
.publication-window { display: grid; gap: 8px; margin-top: 8px; }
.publication-window summary { cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 750; }
.publication-window[open] summary { color: var(--purple); }
.brief-chat { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #d9d0ff; border-radius: 11px; background: linear-gradient(135deg, #faf8ff, #f4f1ff); }
.brief-chat.hidden { display: none; }
.brief-chat-heading { display: grid; gap: 2px; }
.brief-chat-heading strong { color: #433192; font-size: 11px; }
.brief-chat-heading small { color: #716f7b; font-size: 9px; line-height: 1.35; }
.chat-brief-entry { display: grid; gap: 6px; color: #514b6e; font-size: 10px; font-weight: 800; }
.chat-brief-entry .brief-input { min-height: 112px; resize: vertical; }
.plan-generation-settings { border: 1px solid #ded8f3; border-radius: 9px; background: rgba(255,255,255,.76); }
.plan-generation-settings > summary { padding: 9px 10px; cursor: pointer; color: #51458b; font-size: 10px; font-weight: 800; }
.plan-generation-settings[open] > summary { border-bottom: 1px dashed #ded8f3; }
.plan-generation-settings-body { display: grid; gap: 10px; padding: 0 10px 10px; }
.plan-generation-settings .generation-options { margin-top: 0; background: white; }
.plan-generation-settings .publication-window { margin-top: 0; }
.chat-start-button { justify-self: stretch; width: 100%; min-height: 36px; margin-top: 2px; }
.brief-chat-messages { display: grid; gap: 6px; max-height: 150px; overflow: auto; }
.brief-chat-message { max-width: 94%; padding: 7px 9px; border-radius: 9px; font-size: 10px; line-height: 1.45; }
.brief-chat-message.assistant { background: white; border: 1px solid #e5dfff; color: #292539; }
.brief-chat-message.user { margin-left: auto; background: #6450d7; color: white; }
.brief-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.brief-chat-compose input { min-width: 0; padding: 8px 9px; font-size: 10px; }
.brief-chat-compose button { min-width: 62px; padding: 0 9px; font-size: 10px; }
.canvas [data-layer-id] { cursor: move; }
.canvas [data-layer-id="artZone"] { cursor: crosshair; }
.canvas .selected-outline { fill: none; stroke: #d8ff3e; stroke-width: 5; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.canvas .multi-selected-outline { fill: rgba(216,255,62,.035); stroke: rgba(216,255,62,.82); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 7 5; pointer-events: none; }
.canvas .selected-group-outline { fill: rgba(118,87,255,.055); stroke: #d8ff3e; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-dasharray: 12 8; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.canvas .multi-selection-label { fill: #15161a; stroke: #d8ff3e; stroke-width: 5; paint-order: stroke; font: 800 16px "Manrope", Arial, sans-serif; letter-spacing: .04em; pointer-events: none; }
.stage-marquee { position: absolute; z-index: 14; display: none; box-sizing: border-box; border: 2px dashed #d8ff3e; background: rgba(118,87,255,.12); box-shadow: 0 0 0 1px rgba(20,20,23,.28); pointer-events: none; }
.stage-marquee.active { display: block; }
.canvas .resize-handle { fill: #15161a; stroke: #d8ff3e; stroke-width: 5; }
.canvas .resize-handle.nw, .canvas .resize-handle.se { cursor: nwse-resize; }
.canvas .resize-handle.ne, .canvas .resize-handle.sw { cursor: nesw-resize; }
.canvas .resize-handle.n, .canvas .resize-handle.s { cursor: ns-resize; }
.canvas .resize-handle.e, .canvas .resize-handle.w { cursor: ew-resize; }
.canvas .rotate-stem { stroke: #d8ff3e; stroke-width: 4; pointer-events: none; }
.canvas .rotate-handle { fill: #7657ff; stroke: #fff; stroke-width: 4; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='2' y='23' font-size='24' fill='%237657ff'%3E%E2%86%BB%3C/text%3E%3C/svg%3E") 14 14, grab; }
.canvas .rotate-handle:active { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='2' y='23' font-size='24' fill='%2315161a'%3E%E2%86%BB%3C/text%3E%3C/svg%3E") 14 14, grabbing; }
.canvas .safe-guide { fill: none; stroke: rgba(255,255,255,.58); stroke-width: 2; stroke-dasharray: 9 9; pointer-events: none; mix-blend-mode: difference; }
.canvas .center-guide { stroke: rgba(118,87,255,.7); stroke-width: 2; stroke-dasharray: 7 7; pointer-events: none; }
.canvas .snap-preview { stroke: #d8ff3e; stroke-width: 4; stroke-dasharray: 8 6; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.canvas .user-guide { stroke: #7657ff; stroke-width: 3; stroke-dasharray: 10 7; pointer-events: none; opacity: .92; }
.canvas .user-guide-hitbox { stroke: transparent; stroke-width: 34; cursor: move; pointer-events: stroke; }
.canvas .user-guide-hitbox:hover { stroke: #d8ff3e; stroke-width: 5; }
.empty-state { width: 410px; text-align: center; color: #5d5f64; }
.empty-state strong { display: block; margin-top: 20px; color: #28292c; font: 700 18px "Manrope", sans-serif; }
.empty-state p { margin: 8px auto 0; max-width: 370px; font-size: 12px; line-height: 1.55; }
.empty-orbit { width: 92px; height: 92px; position: relative; margin: 0 auto; display: grid; place-items: center; border: 1px solid #c3c2bc; border-radius: 50%; }
.empty-orbit span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #17181b; color: var(--acid); font-size: 19px; }
.empty-orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); top: 6px; left: 13px; }
.empty-orbit i:last-child { width: 7px; height: 7px; background: var(--purple); inset: auto 8px 13px auto; }
.stage-toast { position: absolute; left: 50%; bottom: 17px; z-index: 20; max-width: min(720px, calc(100% - 32px)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; border-radius: 14px; padding: 8px 13px; background: #17181b; color: white; font-size: 10px; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: .2s; }
.stage-toast.show { opacity: 1; transform: translate(-50%, 0); }
.stage-toast.error { background: #9d2734; }
.filmstrip-shell { position: relative; z-index: 15; min-width: 0; min-height: 0; overflow: visible; padding: 9px 14px 11px; border-top: 1px solid #cacac4; background: #e9e8e3; box-shadow: 0 -8px 22px rgba(34, 34, 36, .06); }
.filmstrip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filmstrip-head span { font: 700 9px "Manrope", sans-serif; letter-spacing: .1em; }
.filmstrip-head small { color: var(--muted); font-size: 9px; }
.filmstrip { display: flex; min-width: 0; gap: 9px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; }
.filmstrip-empty { color: #8a8b90; font-size: 10px; padding: 30px 4px; }
.film-card { flex: 0 0 184px; height: 91px; position: relative; display: grid; grid-template-columns: 87px minmax(0, 1fr); align-items: stretch; border: 2px solid transparent; border-radius: 9px; padding: 0; background: white; overflow: hidden; text-align: left; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.film-card.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(118,87,255,.15); }
.film-card svg { display: block; width: 87px; height: 87px; }
.film-card-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 8px 8px 9px; border-left: 1px solid var(--line-soft); }
.film-card-copy strong { font-size: 9px; }
.film-card-copy small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.film-card-copy em { color: var(--purple); font: 700 8px/1.2 "Manrope", sans-serif; font-style: normal; }
.film-card .film-status { position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--green); font-size: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.film-card .film-status.loading { color: var(--purple); animation: spin 1s linear infinite; }
.filmstrip-hover-preview { position: absolute; bottom: calc(100% + 8px); z-index: 40; width: 318px; padding: 10px; border: 1px solid rgba(118,87,255,.38); border-radius: 13px; background: rgba(255,255,255,.98); box-shadow: 0 20px 48px rgba(18,18,22,.28); opacity: 0; pointer-events: none; transform: translateY(8px) scale(.96); transition: opacity .14s ease, transform .14s ease; }
.filmstrip-hover-preview:not(.visible) { visibility: hidden; }
.filmstrip-hover-preview.visible { opacity: 1; transform: translateY(0) scale(1); }
.filmstrip-hover-preview .filmstrip-preview-actions button { pointer-events: none; }
.filmstrip-hover-preview.visible .filmstrip-preview-actions button { pointer-events: auto; }
.filmstrip-hover-preview svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 328px; margin-inline: auto; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.filmstrip-hover-preview strong { display: block; margin: 9px 2px 1px; font-size: 11px; line-height: 1.25; }
.filmstrip-hover-preview small { display: block; margin: 0 2px; color: var(--muted); font-size: 9px; }
.filmstrip-hover-preview .filmstrip-preview-actions { display: flex; margin-top: 9px; }
.filmstrip-hover-preview .filmstrip-preview-actions button { width: 100%; min-height: 30px; padding: 5px 8px; font-size: 10px; }

.right-panel { min-width: 0; }
.inspector-tabs { position: sticky; top: 0; z-index: 4; display: flex; height: 48px; background: var(--panel); border-bottom: 1px solid var(--line); }
.inspector-tabs button { min-width: 0; flex: 1 1 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.inspector-tabs button.active { color: var(--ink); border-color: var(--purple); }
.inspector-tab { display: none; }
.inspector-tab.active { display: block; }
.inspector-heading, .subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inspector-heading > div { display: flex; align-items: center; gap: 8px; }
.selection-dot { width: 8px; height: 8px; border-radius: 50%; background: #b6b7bc; }
.selection-dot.active { background: var(--acid); box-shadow: 0 0 0 4px rgba(216,255,62,.18); }
.selection-empty { margin-top: 15px; padding: 15px; border-radius: 9px; border: 1px dashed var(--line); color: var(--muted); font-size: 10px; line-height: 1.45; }
#selectionControls { margin-top: 14px; }
.geometry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.geometry-grid label { display: grid; grid-template-columns: 16px 1fr; align-items: center; color: var(--muted); font-size: 9px; }
.geometry-grid input { min-width: 0; padding: 7px; }
.color-field { margin-top: 10px; display: grid; grid-template-columns: 1fr 32px auto; align-items: center; }
.color-field input { width: 32px; height: 30px; padding: 2px; }
.color-field span { font-size: 10px; }
.subsection-head { margin-bottom: 12px; }
.subsection-head strong { font-size: 12px; }
.subsection-head span, .subsection-head small { color: var(--muted); font-size: 9px; }
.direction-control { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 10px; background: #efeee9; }
.direction-control > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.direction-control small { color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.direction-control strong { font-size: 11px; }
.range-label { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 700; }
.range-label input { grid-column: 1/-1; padding: 0; accent-color: var(--purple); }
.gradient-editor { display: grid; gap: 8px; margin-top: 12px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #faf9fd; }
.gradient-editor .subsection-head { margin: 0; }
.gradient-editor .range-label { margin-top: 0; }
.gradient-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gradient-colors label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.gradient-colors input[type="color"] { width: 100%; min-height: 30px; padding: 2px; border-radius: 6px; }
.emoji-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 7px; }
.emoji-toolbar > span { width: 100%; color: var(--muted); font-size: 9px; font-weight: 700; }
.emoji-toolbar button { width: 27px; height: 27px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 14px; line-height: 1; }
.emoji-toolbar button:hover:not(:disabled) { border-color: #9888ee; background: #f3efff; transform: translateY(-1px); }
.emoji-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button, .secondary-button { min-height: 36px; border-radius: 8px; padding: 8px 11px; font-size: 10px; font-weight: 700; }
.primary-button { border: 1px solid var(--ink); background: var(--ink); color: white; }
.secondary-button { border: 1px solid var(--line); background: white; }
.danger-button { min-height: 36px; border: 1px solid #efc4ca; border-radius: 8px; padding: 8px 11px; background: #fff5f6; color: #a52f42; font-size: 10px; font-weight: 700; }
.wide { width: 100%; margin-top: 12px; }
.export-button { min-height: 36px; border: 0; border-radius: 9px; padding: 0 13px; background: var(--ink); color: white; font-size: 10px; font-weight: 700; }
.export-button span { color: var(--acid); margin-left: 6px; }
.export-mp4-button { background: #5c42d6; }
.export-mp4-button span { color: #e6ddff; }
.export-button:disabled { cursor: not-allowed; opacity: .42; }
.animation-target { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid #dbd4ff; border-radius: 11px; background: linear-gradient(135deg, #f6f3ff, #fff); }
.animation-target > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #7657ff; color: #fff; font-size: 16px; }
.animation-target small { display: block; color: #776bb9; font: 800 8px/1 "Manrope", sans-serif; letter-spacing: .08em; }
.animation-target strong { display: block; margin-top: 3px; font-size: 11px; }
.animation-effect-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.animation-preset-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.animation-preset-tiles .animation-effect-tile { min-height: 64px; }
.animation-effect-tile { min-height: 74px; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.animation-effect-tile:hover { border-color: #9c8cf1; background: #f8f6ff; transform: translateY(-1px); }
.animation-effect-tile.active { border-color: #7657ff; background: #f0edff; box-shadow: 0 0 0 2px rgba(118,87,255,.12); }
.animation-effect-tile .tile-motion { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #edeae4; color: #554e93; font-size: 15px; font-weight: 800; }
.animation-effect-tile.active .tile-motion { background: #7657ff; color: #fff; }
.animation-effect-tile b { display: block; font-size: 9px; }
.animation-effect-tile small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.2; }
.animation-loop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 13px 1px -3px; }
.animation-loop-head strong { font-size: 10px; }
.animation-loop-head small { color: var(--muted); font-size: 8px; text-align: right; }
.animation-loop-tiles { margin-top: 7px; }
.animation-target-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.animation-target-timing label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.animation-target-timing input { min-width: 0; padding: 7px; font-size: 10px; }
.animation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.animation-actions .secondary-button { min-width: 0; padding-inline: 7px; }
.animation-audio-section { background: linear-gradient(135deg, #fbfaff, #fff); }
.animation-audio-state { display: grid; gap: 9px; padding: 10px; border: 1px dashed #cfc8eb; border-radius: 9px; background: rgba(250,249,255,.75); }
.animation-audio-state > div:first-child { display: grid; gap: 3px; }
.animation-audio-state strong { font-size: 10px; }
.animation-audio-state small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.animation-audio-state audio { width: 100%; height: 30px; }
.animation-audio-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.animation-audio-actions .secondary-button { min-width: 0; }
.animation-layer-list { display: grid; gap: 6px; }
.animation-layer-card { width: 100%; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 9px; background: white; text-align: left; }
.animation-layer-card:hover, .animation-layer-card.active { border-color: #a393ef; background: #faf9ff; }
.animation-layer-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #f0edff; color: #624bd4; font-size: 12px; }
.animation-layer-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.animation-layer-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.animation-layer-card small { color: var(--muted); font-size: 8px; }
.animation-layer-card em { color: #6854c9; font: 700 8px "Manrope", sans-serif; font-style: normal; }
.layer-list { display: grid; gap: 6px; }
.layer-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; width: 100%; min-height: 44px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 5px 7px; background: white; text-align: left; }
.layer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.layer-row .layer-item { min-width: 0; }
.layer-actions { display: flex; align-items: center; gap: 3px; }
.layer-actions button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #565860; font-size: 12px; }
.layer-actions button[data-toggle-layer][aria-pressed="false"] { color: #9b9ca1; background: #f0efec; }
.layer-actions button:disabled { opacity: .28; }
.layer-item.active { border-color: #9888ee; box-shadow: 0 0 0 2px rgba(118,87,255,.09); }
.layer-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #efeee9; color: #5f6065; font-size: 10px; }
.layer-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.layer-item strong { font-size: 10px; }
.layer-item small { color: var(--muted); font-size: 8px; }
.layer-item em { color: var(--green); font-style: normal; font-size: 9px; }
.inspector-tip { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.shape-preset-picker { position: relative; margin-top: 10px; }
.shape-preset-menu { position: absolute; z-index: 25; left: 0; right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.shape-preset-menu button { min-height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #424348; font-size: 10px; font-weight: 700; text-align: left; }
.shape-preset-menu button:hover { border-color: #9888ee; background: #f3efff; color: #5e48d1; }
.qa-score { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.qa-score strong { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #efeee9; font: 800 20px "Manrope", sans-serif; }
.qa-score.good strong { background: #e4f9ef; color: var(--green); }
.qa-score.bad strong { background: #fde9ec; color: var(--red); }
.qa-score span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.qa-issues { display: grid; gap: 7px; margin-top: 13px; }
.qa-issue { padding: 9px 10px; border-left: 3px solid #d3a73c; border-radius: 7px; background: #fff8df; color: #6c5726; font-size: 10px; }
.qa-issue.critical { border-color: var(--red); background: #fff0f2; color: #8e3340; }
.qa-pass { padding: 14px; text-align: center; border: 1px dashed #9dd7be; border-radius: 10px; background: #effaf5; color: #197453; font-size: 10px; }
.organization-dialog { width: min(1180px, 94vw); max-height: 92vh; border: 0; border-radius: 18px; padding: 0; overflow: hidden; background: var(--panel); box-shadow: 0 35px 120px rgba(0, 0, 0, .32); }
.organization-dialog::backdrop { background: rgba(18, 19, 22, .58); backdrop-filter: blur(4px); }
.organization-dialog form { max-height: 92vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.organization-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: white; }
.organization-dialog-head h2 { margin: 3px 0 4px; font: 800 20px/1.2 "Manrope", sans-serif; }
.organization-dialog-head p { margin: 0; color: var(--muted); font-size: 11px; }
.dialog-kicker { color: var(--purple); font: 800 9px/1 "Manrope", sans-serif; letter-spacing: .12em; }
.dialog-close { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 20px; line-height: 1; }
.organization-dialog-body { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; overflow: auto; }
.organization-card { align-self: start; display: grid; gap: 10px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: white; }
.organization-card h3 { margin: 0 0 2px; font: 750 12px "Manrope", sans-serif; }
.organization-card label, .organization-field-title { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.organization-card input, .organization-card textarea, .organization-card select { font-size: 11px; }
.organization-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.organization-card output { align-self: flex-end; margin-top: -15px; color: var(--purple); }
.organization-color-editor { display: grid; gap: 6px; margin-top: 6px; }
.organization-color-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 102px; align-items: center; gap: 6px; }
.organization-color-row input[type="color"] { width: 34px; height: 32px; padding: 2px; }
.organization-color-row input[type="text"], .organization-color-row select { min-width: 0; padding: 7px; }
.organization-logo-upload { min-height: 96px; place-items: center; justify-content: center; border: 1px dashed #bfc0c5; border-radius: 10px; padding: 10px; background: #f8f7f3; text-align: center; cursor: pointer; }
.organization-logo-upload input { display: none; }
.organization-logo-upload img { display: block; max-width: 170px; max-height: 70px; margin: 0 auto 6px; object-fit: contain; }
.organization-logo-upload small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; }
.organization-visual-card > .text-button { justify-self: start; margin-top: -4px; }
.analysis-status { display: grid; gap: 7px; min-height: 36px; padding: 10px; border-radius: 8px; background: #f1effc; color: #6256a5; font-size: 9px; line-height: 1.4; }
.analysis-status > strong { font-size: 10px; }
.analysis-status > span { color: #6256a5; }
.analysis-status-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.analysis-status-head strong { color: #342870; font-size: 10px; }
.analysis-status-head small { color: #756ca8; font-size: 8px; text-align: right; }
.analysis-status p { margin: 0; color: #4f477b; }
.analysis-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.analysis-colors span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid #d8d2f0; border-radius: 99px; background: rgba(255,255,255,.72); color: #4f477b; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.analysis-colors i { display: block; width: 11px; height: 11px; border: 1px solid rgba(0,0,0,.14); border-radius: 50%; }
.analysis-result-list { display: grid; gap: 4px; margin: 0; }
.analysis-result-list div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
.analysis-result-list dt { color: #756ca8; font-weight: 800; }
.analysis-result-list dd { margin: 0; color: #443d6d; overflow-wrap: anywhere; }
.analysis-edit-note { color: #756ca8; font-size: 8px; }
.organization-head-actions { display: flex; align-items: center; gap: 8px; }
.organization-head-actions .secondary-button { min-height: 34px; font-size: 10px; }
.organization-card label small { color: var(--muted); font-size: 8px; font-weight: 500; }
.font-picker { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 9px; background: #faf9f6; }
.font-search-results { display: grid; gap: 4px; max-height: 150px; overflow: auto; }
.font-search-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 7px; border: 1px solid var(--line-soft); border-radius: 6px; background: white; color: var(--ink); font-size: 10px; text-align: left; }
.font-search-result span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-search-result em { color: var(--purple); font-size: 8px; font-style: normal; }
.logo-size-editor { display: grid; gap: 7px; padding: 9px; border: 1px dashed var(--line); border-radius: 9px; background: #faf9f6; }
.logo-size-editor > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.logo-size-editor > div:first-child small { color: var(--muted); font-size: 8px; }
.logo-size-controls { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; align-items: center; gap: 5px; }
.logo-size-controls button { min-width: 0; min-height: 31px; padding: 0; }
.logo-size-controls input { min-width: 0; padding: 7px; text-align: center; }
.logo-size-controls span { color: var(--muted); font-size: 9px; }
.logo-canvas-preview { min-height: 146px; border-radius: 8px; overflow: hidden; background: #e8e7e1; }
.logo-canvas-preview svg { display: block; width: 100%; aspect-ratio: 1; background: #f5f3ee; }
.generation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 9px; border: 1px dashed var(--line); border-radius: 10px; }
.generation-options legend { padding: 0 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.generation-options label { display: flex; align-items: center; gap: 5px; color: var(--ink); font-size: 9px; font-weight: 700; }
.generation-options input { width: auto; padding: 0; }
.generation-options small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.35; }
.logo-generation-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo-generation-options .disabled-choice { opacity: .45; }
.generation-logo-assets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.generation-logo-assets.disabled { opacity: .48; }
.generation-logo-choice { position: relative; display: grid !important; grid-template-columns: 18px 32px minmax(0, 1fr); align-items: center !important; gap: 6px !important; min-width: 0; min-height: 46px; padding: 6px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fbfaf7; }
.generation-logo-choice.selected { border-color: var(--purple); box-shadow: 0 0 0 1px rgba(118,87,255,.16); background: #faf8ff; }
.generation-logo-choice img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; background: #fff; }
.generation-logo-choice span { overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.format-summary { display: grid; align-content: center; gap: 3px; }
.format-summary small { color: var(--muted); font-size: 9px; font-weight: 500; }
.organization-dialog-footer { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); background: white; }
.organization-archive-dialog { width: min(660px, calc(100vw - 32px)); }
.organization-archive-list { display: grid; gap: 9px; min-height: 140px; padding: 16px; }
.organization-archive-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.organization-archive-row strong, .organization-archive-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.organization-archive-row strong { font-size: 12px; }
.organization-archive-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.organization-transfer { display: grid; gap: 7px; margin-top: 6px; padding: 10px; border: 1px dashed #d8d2ee; border-radius: 9px; background: #faf9ff; }
.organization-transfer label { display: grid; gap: 5px; color: #6256a5; font-size: 9px; font-weight: 800; }
.organization-transfer small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.media-controls { display: grid; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.media-controls strong { font-size: 10px; }
.organization-logo-choices { display: grid; gap: 6px; padding: 9px; border: 1px dashed #d5cdec; border-radius: 9px; background: #faf9ff; }
.organization-logo-choices > strong { font-size: 9px; }
.organization-logo-choices > small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.organization-logo-choices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.organization-logo-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; padding: 5px; border: 1px solid #ded9ed; border-radius: 7px; background: #fff; color: var(--ink); text-align: left; }
.organization-logo-choice.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(118,87,255,.13); }
.organization-logo-choice img { width: 34px; height: 27px; object-fit: contain; }
.organization-logo-choice span { overflow: hidden; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.organization-logo-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.organization-logo-assets > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.4; }
.organization-logo-asset { position: relative; min-width: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.organization-logo-asset.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(118,87,255,.12); }
.organization-logo-asset > button:first-child { display: grid; grid-template-columns: 42px minmax(0, 1fr); width: 100%; gap: 7px; align-items: center; padding: 6px 23px 6px 6px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.organization-logo-asset img { width: 42px; height: 32px; object-fit: contain; }
.organization-logo-asset span { overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.organization-logo-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; padding: 0; border: 1px solid #efb8bf; border-radius: 50%; background: #fff8f8; color: #ae3341; font: 800 14px/1 Arial, sans-serif; }
.ai-regenerate-controls { display: grid; gap: 7px; padding: 10px; border: 1px dashed #cfc8eb; border-radius: 9px; background: #faf9ff; }
.ai-regenerate-controls > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.ai-regenerate-controls textarea { min-height: 66px; resize: vertical; }
.logo-placement-diagnostics { display: grid; gap: 7px; margin-top: 12px; padding: 10px; border: 1px dashed #cfc8eb; border-radius: 9px; background: #faf9ff; }
.logo-placement-diagnostics .subsection-head { margin: 0; }
.logo-placement-diagnostics p { margin: 0; color: #454050; font-size: 9px; line-height: 1.45; }
.logo-placement-list { display: grid; gap: 4px; }
.logo-placement-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; padding: 6px; border: 1px solid #e1ddef; border-radius: 6px; background: rgba(255,255,255,.78); }
.logo-placement-row.selected { border-color: var(--purple); background: #f0edff; }
.logo-placement-row strong { font-size: 9px; }
.logo-placement-row b { color: #51458b; font-size: 8px; white-space: nowrap; }
.logo-placement-row small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.art-crop-controls { display: grid; gap: 8px; padding: 9px; border: 1px dashed var(--line); border-radius: 9px; background: #faf9f6; }
.art-crop-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.art-crop-actions .secondary-button { min-width: 0; min-height: 32px; padding: 6px; }
.art-crop-actions .secondary-button.active { border-color: var(--purple); background: #f0edff; color: #51459c; box-shadow: 0 0 0 2px rgba(118,87,255,.1); }
.crop-nudge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.crop-nudge-grid .secondary-button { min-width: 0; min-height: 29px; padding: 4px; font-size: 10px; }
.crop-nudge-grid button:first-child { grid-column: 2; }
.crop-nudge-grid button:last-child { grid-column: 2; }
.art-crop-controls .range-label { margin-top: 0; }
.art-crop-controls small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.prompt-stack { display: grid; gap: 12px; }
.prompt-stack textarea { min-height: 90px; background: #f6f5f1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.writing-style-analysis { display: grid; gap: 8px; padding: 10px; border: 1px dashed #d9d2f4; border-radius: 10px; background: #fbfaff; }
.writing-style-analysis .organization-head-actions { justify-content: flex-start; flex-wrap: wrap; }
.topic-memory-settings { display: grid; gap: 8px; padding: 10px; border: 1px dashed #bed8ce; border-radius: 10px; background: #f4fbf7; }
.topic-memory-settings > small { color: #4b6d5a; font-size: 8px; line-height: 1.35; }
.topic-memory-statuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; margin: 0; padding: 8px; border: 1px solid #d1e5d8; border-radius: 7px; background: rgba(255,255,255,.68); }
.topic-memory-statuses legend { padding: 0 3px; color: #365345; font-size: 8px; font-weight: 800; }
.topic-memory-statuses label { display: flex; align-items: center; gap: 4px; margin: 0; color: #315640; font-size: 8px; font-weight: 700; }
.topic-memory-statuses input { width: 12px; height: 12px; margin: 0; accent-color: #4b9c69; }
.topic-memory-status { display: grid; gap: 5px; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.76); color: #365345; font-size: 8px; line-height: 1.35; }
.topic-memory-status > strong { font-size: 9px; color: #214133; }
.topic-memory-status > span { color: #4b6d5a; }
.topic-memory-status ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topic-memory-status li { display: grid; gap: 1px; padding-top: 4px; border-top: 1px solid #d8e8de; }
.topic-memory-status li:first-child { padding-top: 0; border-top: 0; }
.topic-memory-status li span { color: #254935; font-weight: 700; }
.topic-memory-status li small { color: #587865; font-size: 8px; }
.admin-dialog, .post-library-dialog { width: min(930px, 94vw); max-height: 88vh; border: 0; border-radius: 18px; padding: 0; overflow: hidden; background: var(--panel); box-shadow: 0 35px 120px rgba(0,0,0,.32); }
.post-library-dialog { width: min(1120px, 96vw); }
.admin-dialog::backdrop, .post-library-dialog::backdrop { background: rgba(18,19,22,.58); backdrop-filter: blur(4px); }
.plan-dialog { width: min(850px, 94vw); height: min(88vh, 820px); max-height: 88vh; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; border-radius: 18px; padding: 0; overflow: hidden; background: var(--panel); box-shadow: 0 35px 120px rgba(0,0,0,.32); }
.plan-dialog[open] { display: grid; }
.plan-dialog::backdrop { background: rgba(18,19,22,.58); backdrop-filter: blur(4px); }
.plan-dialog-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .7fr); gap: 14px; padding: 14px; overflow: auto; }
.plan-dialog > .organization-dialog-footer { min-height: 62px; }
.content-placement-options { grid-template-columns: 1fr; }
.content-placement-options > small { margin-bottom: 2px; }
.generation-options .content-placement { display: grid; grid-template-columns: minmax(58px, .25fr) minmax(112px, .46fr) minmax(150px, 1fr); align-items: start; gap: 8px; }
.content-placement span { color: var(--ink); font-size: 9px; font-weight: 800; }
.content-placement select { min-width: 0; padding: 6px 7px; font-size: 9px; }
.content-placement textarea { min-width: 0; min-height: 42px; padding: 6px 7px; resize: vertical; font-size: 9px; line-height: 1.35; }
.plan-conversation, .plan-planning-state { grid-column: 1 / -1; margin-top: 0; }
.plan-conversation .brief-chat-messages { max-height: 210px; }
.plan-planning-state { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 16px; border: 1px solid #e6e0ff; border-radius: 12px; background: linear-gradient(135deg, #faf8ff, #f3f0ff); }
.plan-planning-state > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--purple); color: white; font-size: 18px; animation: plan-pulse 1.3s ease-in-out infinite; }
.plan-planning-state > div { display: grid; gap: 4px; }
.plan-planning-state strong { font-size: 13px; }
.plan-planning-state small { color: var(--muted); font-size: 10px; line-height: 1.4; }
@keyframes plan-pulse { 50% { transform: scale(1.1); opacity: .72; } }
.plan-cards { display: grid; gap: 9px; align-content: start; }
.plan-card { width: 100%; display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 12px; background: white; text-align: left; }
.plan-card-main { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.plan-card:hover { border-color: #a89df6; }
.plan-card.selected { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(118,87,255,.1); }
.plan-card-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f0edff; color: var(--purple); font: 800 11px "Manrope", sans-serif; }
.plan-card.selected .plan-card-index { background: var(--purple); color: white; }
.plan-card small, .plan-feedback-card small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.plan-card strong { display: block; margin: 3px 0 5px; font: 800 14px/1.2 "Manrope", sans-serif; }
.plan-card p { margin: 0; color: #53545a; font-size: 11px; line-height: 1.45; }
.plan-card .plan-angle { display: block; margin-top: 7px; color: #6256a5; font-weight: 700; }
.plan-sources { margin: -1px 0 1px 38px; border: 1px solid #ebe8fb; border-radius: 8px; background: #faf9ff; color: #5c5680; font-size: 10px; }
.plan-sources summary { padding: 7px 9px; cursor: pointer; font-weight: 800; }
.plan-sources ul { display: grid; gap: 5px; margin: 0; padding: 0 9px 9px 22px; }
.plan-sources li { display: grid; gap: 1px; }
.plan-sources a { width: fit-content; color: #5444c3; font-weight: 700; text-decoration: none; }
.plan-sources a:hover { text-decoration: underline; }
.plan-sources small, .plan-sources-empty { color: #78738c; font-size: 9px; line-height: 1.35; }
.plan-sources-empty { display: block; margin: -1px 0 1px 38px; }
.plan-elements-summary { display: block; margin: -1px 0 1px 38px; padding: 7px 9px; border-radius: 8px; background: #f7f6fb; color: #625d78 !important; line-height: 1.4; }
.plan-elements-summary b { color: #4c4570; }
.plan-image-upload { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 7px 8px; border: 1px dashed #cfc9e7; border-radius: 8px; color: #5f587d; cursor: pointer; }
.plan-image-upload input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.plan-image-upload::before { content: "▧"; grid-row: 1 / span 2; font-size: 14px; color: #7263bf; }
.plan-image-upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 800; }
.plan-image-upload small { color: #817a9c; font-size: 8px; }
.plan-image-upload.has-image { border-style: solid; border-color: #88c9a4; background: #f0fbf4; color: #266d48; }
.plan-subject { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.plan-feedback-card { align-self: start; display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: white; }
.plan-feedback-card label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.plan-feedback-card textarea { min-height: 108px; resize: vertical; }
.plan-director-details { display: grid; gap: 7px; padding-top: 10px; border-top: 1px dashed var(--line); }
.plan-director-details > small { color: #6256a5; font-size: 9px; line-height: 1.4; }
.plan-director-details > small:not(.hidden) + .text-button { margin-top: -2px; }
.plan-director-details textarea { min-height: 170px; margin: 0; background: #f6f5f1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; line-height: 1.35; }
.admin-dialog-body { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.5fr); gap: 14px; max-height: calc(88vh - 100px); padding: 14px; overflow: auto; }
.admin-note { color: var(--muted); font-size: 10px; line-height: 1.4; }
.admin-users-card { grid-column: 1 / -1; min-height: 0; }
.admin-logs-card { min-height: 270px; }
.admin-log-count { margin-left: auto; color: var(--muted); font-size: 10px; }
.admin-logs-list { display: grid; gap: 6px; max-height: min(66vh, 920px); overflow: auto; padding-right: 3px; }
.admin-log-row { padding: 7px; border: 1px solid var(--line-soft); border-radius: 7px; background: #fbfaf7; }
.admin-log-row.error { border-color: #f2b4bd; background: #fff8f8; }
.admin-log-row summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; cursor: pointer; list-style: none; }
.admin-log-row summary::-webkit-details-marker { display: none; }
.admin-log-row strong, .admin-log-row small { display: block; overflow-wrap: anywhere; }
.admin-log-row strong { font-size: 10px; }
.admin-log-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.admin-log-row time { color: var(--muted); font-size: 8px; white-space: nowrap; }
.admin-log-row pre { margin: 8px 0 0; padding: 8px; overflow: auto; border-radius: 5px; background: #22201d; color: #f5f1e8; font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-log-downloads { display: flex; gap: 6px; }
.admin-user-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 9px; background: #f9f8f4; }
.admin-user-form label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.admin-user-form fieldset { grid-column: 1 / -1; margin: 0; border: 0; padding: 0; }
.admin-user-form legend { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.admin-user-form button { grid-column: 1 / -1; }
.admin-user-form > .admin-note { grid-column: 1 / -1; }
.admin-model-routes { display: grid; gap: 10px; }
.admin-model-route { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfaf7; }
.admin-model-route > strong { font-size: 11px; }
.admin-model-fallback-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }
.admin-model-fallback-picker .secondary-button { min-height: 32px; }
.admin-model-fallback-list { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 10px; }
.admin-model-fallback-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.admin-model-fallback-list code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-model-fallback-list .text-button { min-height: 20px; padding: 1px 4px; font-size: 10px; }
.admin-model-fallback-list .empty { color: var(--muted); }
.member-permissions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.member-permissions-grid label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding: 6px 0; font-size: 10px; }
.admin-user-form .member-permissions-grid label { grid-template-columns: 1fr; align-items: stretch; }
@media (max-width: 680px) { .member-permissions-grid { grid-template-columns: 1fr; } .admin-model-fallback-picker { grid-template-columns: 1fr; } }
.organization-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.organization-checks label { display: flex; flex-direction: row; align-items: center; gap: 5px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 5px; background: white; font-size: 9px; }
.organization-checks input { width: auto; padding: 0; }
.admin-users-list { display: grid; gap: 7px; margin-top: 10px; }
.admin-compositions-card { grid-column: 1 / -1; }
.composition-filter { display: grid; grid-template-columns: auto minmax(112px, 1fr); align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.composition-filter select { min-width: 112px; padding: 5px; font-size: 9px; }
.composition-library-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.composition-library-summary span, .composition-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.composition-library-summary span { border: 1px solid #d9d4ed; background: #f6f4ff; color: #51458b; }
.composition-reference-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.composition-reference-upload { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.composition-reference-upload input { font-size: 9px; }
.composition-reference-upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6256a5; }
.admin-compositions-list { display: grid; grid-template-columns: 1fr; gap: 7px; max-height: 480px; overflow: auto; }
.admin-composition-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.composition-thumb { width: 86px; height: 86px; overflow: hidden; padding: 0; border: 1px solid #d8d4e9; border-radius: 7px; background: #f4f2fa; cursor: pointer; }
.composition-thumb svg { display: block; width: 86px; height: 86px; }
.composition-thumb:hover { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(118,87,255,.12); }
.admin-composition-row strong, .admin-composition-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-composition-row strong { font-size: 10px; }
.admin-composition-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.composition-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.composition-badge.scope-global { background: #e7f8ef; color: #147247; }
.composition-badge.scope-system { background: #eef0f5; color: #5d6473; }
.composition-badge.scope-organization { background: #fff4dd; color: #976008; }
.composition-badge.status-active { background: #ecf3ff; color: #225db5; }
.composition-badge.status-review { background: #f5edff; color: #7045a8; }
.composition-badge.status-archived { background: #f2f2f2; color: #666; }
.admin-composition-row span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.admin-composition-row button { min-height: 28px; padding: 4px 6px; }
.composition-review-dialog { width: min(1040px, 94vw); max-height: 90vh; border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.composition-review-dialog::backdrop { background: rgba(18,19,22,.55); backdrop-filter: blur(3px); }
.composition-review-body { display: grid; grid-template-columns: minmax(290px, .82fr) minmax(430px, 1.18fr); gap: 16px; max-height: calc(90vh - 145px); padding: 16px; overflow: auto; }
.composition-review-summary { display: grid; align-content: start; gap: 10px; }
.composition-review-summary label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.composition-review-summary p { margin: 0; font-size: 11px; line-height: 1.45; }
.composition-review-summary > small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.composition-proposal-preview { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px dashed #bcb5e2; border-radius: 10px; background: linear-gradient(145deg, #f6f3ec, #e7e3ff); }
.proposal-preview-layer { position: absolute; display: grid; place-items: center; box-sizing: border-box; min-width: 8px; min-height: 8px; padding: 3px; overflow: hidden; border: 2px solid var(--layer-color); background: color-mix(in srgb, var(--layer-color) 20%, white); color: #26222f; font-size: 8px; font-weight: 800; text-align: center; }
.proposal-preview-layer.artZone { background: color-mix(in srgb, var(--layer-color) 62%, #1d173f); color: #fff; border-radius: 18px; }
.proposal-preview-layer.cta { border-radius: 999px; }
.composition-proposal-layers { display: grid; gap: 7px; }
.proposal-layer-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.proposal-layer-row strong { font-size: 10px; }
.proposal-layer-row > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.proposal-layer-row label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 800; }
.proposal-layer-row input { min-width: 0; padding: 5px; font-size: 10px; }
.admin-user-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: white; }
.admin-user-details { min-width: 0; }
.admin-user-row strong, .admin-user-row small { display: block; overflow-wrap: anywhere; }
.admin-user-row strong { font-size: 10px; }
.admin-user-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.admin-user-row button { min-height: 28px; padding: 4px 7px; }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 360px; }
.post-library-dialog:not([open]) { display: none; }
.post-library-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); }
.media-gallery-dialog { width: min(1120px, 96vw); height: min(84vh, 820px); border: 0; border-radius: 18px; padding: 0; overflow: hidden; background: var(--panel); box-shadow: 0 35px 120px rgba(0,0,0,.32); }
.media-gallery-dialog::backdrop { background: rgba(18,19,22,.58); backdrop-filter: blur(4px); }
.media-gallery-dialog:not([open]) { display: none; }
.media-gallery-dialog[open] { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); }
.media-gallery-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fbfaf8; }
.media-gallery-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.media-gallery-controls select, .media-gallery-controls input { min-width: 142px; padding: 7px; font-size: 10px; }
.media-gallery-controls button { min-height: 32px; }
.media-gallery-upload-note { margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--line-soft); color: var(--muted); background: #fffefd; font-size: 9px; line-height: 1.35; }
.media-gallery-grid { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-content: start; gap: 12px; padding: 16px 18px 22px; }
.media-gallery-card { display: grid; gap: 7px; min-width: 0; padding: 7px; border: 1px solid var(--line-soft); border-radius: 10px; background: white; }
.media-gallery-card a { display: block; overflow: hidden; border-radius: 7px; background: #efeee9; aspect-ratio: 1; }
.media-gallery-card img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .16s ease; }
.media-gallery-card:hover img { transform: scale(1.035); }
.media-gallery-card strong, .media-gallery-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-gallery-card strong { font-size: 10px; }
.media-gallery-card small { color: var(--muted); font-size: 8px; }
.media-gallery-meta { display: flex; justify-content: space-between; gap: 6px; }
.media-gallery-kind { color: #5b4bbb; font-weight: 800; text-transform: uppercase; }
.media-gallery-empty { grid-column: 1 / -1; padding: 36px 12px; color: var(--muted); text-align: center; }
.format-adapt-dialog { width: min(590px, 92vw); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.format-adapt-dialog::backdrop { background: rgba(18,19,22,.55); backdrop-filter: blur(3px); }
.format-adapt-dialog:not([open]) { display: none; }
.format-adapt-dialog[open] { display: grid; grid-template-rows: auto 1fr auto; position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); }
.export-format-dialog { width: min(650px, 94vw); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.export-format-dialog::backdrop { background: rgba(18,19,22,.55); backdrop-filter: blur(3px); }
.export-format-dialog:not([open]) { display: none; }
.export-format-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); }
.export-format-options { display: grid; gap: 10px; max-height: min(56vh, 510px); overflow: auto; padding: 18px 20px; }
.export-format-mode { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #faf9ff; }
.export-format-mode legend { width: 100%; margin-bottom: 1px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.export-format-mode label, .export-format-family label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.export-format-mode input, .export-format-family input { width: auto; }
.export-format-family { padding: 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: white; }
.export-format-family h3 { margin: 0 0 8px; font-size: 12px; }
.export-format-family > div { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.export-format-family small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.format-adapt-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 18px 20px; max-height: min(56vh, 510px); overflow: auto; }
.format-adapt-option { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; cursor: pointer; }
.format-adapt-option:hover { border-color: rgba(106, 86, 255, .55); background: #fbfaff; }
.format-adapt-option input { width: auto; }
.format-adapt-option span { display: grid; gap: 2px; }
.format-adapt-option strong { font-size: 11px; }
.format-adapt-option small { color: var(--muted); font-size: 9px; }
.post-library-dialog .organization-dialog-head { flex-wrap: wrap; }
.post-library-controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.post-library-selection-actions { display: flex; align-items: center; }
.post-library-selection-actions .secondary-button { min-height: 34px; white-space: nowrap; }
.post-library-filter { display: grid; align-self: center; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.post-library-filter select { min-width: 150px; padding: 7px; font-size: 10px; }
.post-library-filter input { min-width: 120px; padding: 7px; font-size: 10px; }
.post-list-rows { min-height: 0; overflow: auto; display: grid; gap: 8px; padding: 14px; }
.post-list-row { display: grid; grid-template-columns: auto 92px minmax(0, 1fr) 150px 142px auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: white; }
.post-list-row input { width: auto; }
.post-list-thumb { position: relative; width: 92px; height: 92px; cursor: zoom-in; outline: none; }
.post-list-thumb svg { display: block; width: 92px; height: 92px; border-radius: 6px; overflow: hidden; background: #eee; transition: transform .16s ease, box-shadow .16s ease; }
.post-list-thumb:hover svg, .post-list-thumb:focus-visible svg { transform: scale(1.045); box-shadow: 0 6px 16px rgba(36, 27, 16, .2); }
.post-list-thumb:focus-visible svg { outline: 2px solid var(--purple); outline-offset: 2px; }
.post-list-thumb span { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; border-radius: 5px; background: rgba(20, 18, 16, .76); color: white; font-size: 7px; font-weight: 800; opacity: 0; transform: translateY(2px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.post-list-thumb:hover span, .post-list-thumb:focus-visible span { opacity: 1; transform: translateY(0); }
.post-list-hover-preview { position: absolute; z-index: 12; width: var(--post-library-preview-width, 320px); padding: 8px; border: 1px solid rgba(106, 86, 255, .35); border-radius: 12px; background: rgba(255, 255, 255, .98); box-shadow: 0 20px 46px rgba(31, 25, 18, .28); opacity: 0; transform: scale(.96); transform-origin: top left; transition: opacity .14s ease, transform .14s ease; pointer-events: none; }
.post-list-hover-preview:not(.is-visible) { visibility: hidden; }
.post-list-hover-preview.is-visible { opacity: 1; transform: scale(1); }
.post-list-hover-preview svg { display: block; width: 100%; height: auto; border-radius: 8px; overflow: hidden; background: #eee; }
.post-library-footer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.post-library-footer button { min-width: 0; min-height: 38px; justify-content: center; }
.post-list-copy { min-width: 0; }
.post-list-copy strong, .post-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-list-copy strong { font-size: 11px; }
.post-list-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.post-generated-date { color: #746b90 !important; }
.post-format-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.post-format-chip { display: inline-flex; align-items: center; min-height: 19px; padding: 2px 5px; border: 0; border-radius: 999px; background: #f0edff; color: #6052b4; font-size: 8px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.post-format-chip:hover, .post-format-chip:focus-visible { background: #ddd6ff; color: #42328f; outline: 0; }
.post-format-chip.current { background: #e2ddff; color: #42328f; }
.post-list-copy .post-format-list { overflow: visible; text-overflow: clip; white-space: normal; }
.post-list-action-stack { display: grid; gap: 5px; }
.post-list-action-stack button { white-space: nowrap; }
.post-status-label, .post-publication-label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.post-status-label select, .post-publication-label input { min-width: 0; padding: 6px; font-size: 10px; }
.post-publication-label input { width: 100%; box-sizing: border-box; }
.confirm-dialog { border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.confirm-dialog::backdrop { background: rgba(18,19,22,.55); backdrop-filter: blur(3px); }
.confirm-dialog form { width: 390px; padding: 28px; text-align: center; }
.plan-model-dialog-content { width: min(480px, 92vw); padding: 28px; text-align: center; }
.dialog-symbol { width: 50px; height: 50px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 16px; background: #efedff; color: var(--purple); font-size: 24px; }
.confirm-dialog h2 { margin: 0; font: 750 18px "Manrope", sans-serif; }
.confirm-dialog p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.confirm-dialog form > div { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.plan-model-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 260px minmax(450px, 1fr) 285px; }
  .topbar { grid-template-columns: 260px 1fr 260px; }
  .canvas-wrap { max-width: 620px; min-width: 0; }
  .organization-dialog-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dialog-body { grid-template-columns: 1fr; }
  .plan-dialog-body { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-center { display: none; }
  .workspace { height: auto; grid-template-columns: 1fr; overflow: visible; }
  .left-panel, .right-panel { border: 0; overflow: visible; display: block; }
  .left-panel-content { overflow: visible; }
  .stage-column { min-height: 760px; order: -1; }
  .canvas-wrap { max-width: 620px; min-width: 0; }
  .generate-dock { position: relative; }
  .organization-dialog { width: 96vw; max-height: 96vh; }
  .organization-dialog form { max-height: 96vh; }
  .organization-dialog-body { grid-template-columns: 1fr; }
  .organization-dialog-footer { grid-template-columns: 1fr 1fr; }
  .organization-dialog-footer span { display: none; }
  .post-list-row { grid-template-columns: auto 72px minmax(0, 1fr); }
  .post-list-thumb, .post-list-thumb svg { width: 72px; height: 72px; }
  .post-list-row .secondary-button, .post-list-row .post-status-label, .post-list-row .post-publication-label, .post-list-row .post-list-action-stack { grid-column: 2 / -1; }
}
@media (max-width: 620px) {
  .generation-options .content-placement { grid-template-columns: 1fr; gap: 4px; }
  .admin-user-row { grid-template-columns: 1fr; }
  .admin-user-actions { justify-content: flex-start; max-width: none; }
  .post-library-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-adapt-options { grid-template-columns: 1fr; }
}