:root {
  --ink: #17192b;
  --muted: #71748a;
  --muted-2: #9a9cad;
  --line: #e9e9f0;
  --line-strong: #dcdee9;
  --surface: #ffffff;
  --surface-soft: #f7f7fb;
  --canvas: #f3f3f7;
  --sidebar: #151727;
  --sidebar-soft: #202337;
  --primary: #6757e8;
  --primary-strong: #5545d2;
  --primary-soft: #eeebff;
  --blue: #3878ef;
  --green: #1ca66f;
  --green-soft: #e7f7f0;
  --orange: #e68b27;
  --orange-soft: #fff2e0;
  --red: #d54a5d;
  --red-soft: #ffedf0;
  --shadow-sm: 0 1px 2px rgb(20 22 42 / 4%), 0 5px 16px rgb(20 22 42 / 3%);
  --shadow-md: 0 18px 50px rgb(20 22 42 / 12%);
  --radius-sm: 10px;
  --radius: 15px;
  --radius-lg: 22px;
  --sidebar-width: 244px;
  --topbar-height: 72px;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
.is-hidden { display: none !important; }
html { min-width: 320px; background: var(--canvas); }
body { overflow-x: hidden; margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, a { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgb(103 87 232 / 22%); outline-offset: 2px; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: var(--sidebar-width); flex-direction: column; overflow: hidden; color: #fff; background: radial-gradient(circle at 0 0, #242743 0, transparent 35%), var(--sidebar); }
.brand-lockup { display: flex; height: var(--topbar-height); align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.brand-mark { position: relative; width: 32px; height: 32px; transform: rotate(-8deg); }
.brand-mark span { position: absolute; display: block; border-radius: 7px; background: linear-gradient(145deg, #a99cff, #6f5fff); box-shadow: 0 4px 14px rgb(108 91 239 / 28%); }
.brand-mark span:nth-child(1) { inset: 2px 12px 12px 2px; }
.brand-mark span:nth-child(2) { inset: 9px 2px 5px 9px; opacity: .8; }
.brand-mark span:nth-child(3) { width: 7px; height: 7px; right: 1px; top: 1px; background: #63d4b3; }
.brand-lockup strong { display: block; font-size: 17px; letter-spacing: .06em; }
.brand-lockup small { display: block; margin-top: -1px; color: #888da7; font-size: 8px; letter-spacing: .13em; }
.sidebar-close { display: none; margin-left: auto; color: #b7bace !important; }
.main-nav { flex: 1; overflow-y: auto; padding: 17px 11px; scrollbar-width: thin; }
.nav-label { margin: 12px 12px 7px; color: #6f738d; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.nav-item { display: flex; height: 43px; align-items: center; gap: 12px; margin: 3px 0; padding: 0 13px; color: #aeb1c4; border-radius: 10px; font-size: 13px; font-weight: 550; transition: .18s ease; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { flex: 1; }
.nav-item em { padding: 2px 6px; color: #c6bcff; border: 1px solid rgb(168 154 255 / 25%); border-radius: 5px; background: rgb(111 95 255 / 10%); font-size: 8px; font-style: normal; font-weight: 700; }
.nav-item:hover { color: #fff; background: rgb(255 255 255 / 5%); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgb(111 95 255 / 22%), rgb(111 95 255 / 9%)); box-shadow: inset 3px 0 #8f7fff; }

.module-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; padding: 12px; }
.module-shortcuts button { display: flex; align-items: center; gap: 12px; padding: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.module-shortcuts button:hover { border-color: #b9b1f7; background: #faf9ff; }
.module-shortcuts svg { width: 20px; height: 20px; color: var(--primary); }
.module-shortcuts span { display: grid; gap: 3px; }
.module-shortcuts small { color: var(--muted); font-size: 11px; }

#page-brand.brand-framework-mode > .module-shortcuts,
#page-brand.brand-framework-mode > .brand-completeness,
#page-brand.brand-framework-mode > .segmented-tabs,
#page-brand.brand-framework-mode > .brand-panel { display: none !important; }
.brand-level-explainer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 16px; padding: 17px 20px; }
.brand-level-explainer > div { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
.brand-level-explainer > div > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: var(--primary); font-size: 10px; font-weight: 800; }
.brand-level-explainer > div:last-child > span { background: #1c8a63; }
.brand-level-explainer strong { font-size: 13px; }
.brand-level-explainer p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.brand-level-explainer > i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted-2); border-radius: 50%; background: var(--surface-soft); }
.brand-level-explainer > i svg { width: 14px; }
.brand-framework-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.brand-framework-card { padding: 20px; }
.brand-framework-card > header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.brand-framework-card h2 { margin: 7px 0 4px; font-size: 18px; }
.brand-framework-card header p { margin: 0; color: var(--muted); font-size: 10px; }
.framework-level { padding: 4px 7px; color: #5b4bd0; border-radius: 5px; background: var(--primary-soft); font-size: 9px; font-weight: 750; }
.brand-framework-card.ip .framework-level { color: #15704f; background: var(--green-soft); }
.framework-version { height: fit-content; padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; font-size: 9px; white-space: nowrap; }
.brand-framework-card form { display: grid; gap: 10px; }
.brand-framework-card form label > span { display: block; margin-bottom: 7px; color: #4e5162; font-size: 10px; font-weight: 700; }
.brand-framework-card textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; resize: vertical; background: #fbfbfd; font: inherit; font-size: 12px; line-height: 1.65; }
.brand-framework-card textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(103 87 232 / 9%); background: #fff; }
.framework-result { margin-top: 16px; display: grid; gap: 9px; }
.framework-empty { padding: 18px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface-soft); font-size: 10px; text-align: center; }
.framework-summary { padding: 11px 12px; color: #4e456f; border-radius: 8px; background: #f5f3ff; font-size: 10px; line-height: 1.55; }
.framework-rule-group { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; }
.framework-rule-group strong { display: block; margin-bottom: 7px; font-size: 10px; }
.framework-rule-group div { display: flex; flex-wrap: wrap; gap: 5px; }
.framework-rule-group span { padding: 4px 7px; color: #5d6172; border-radius: 5px; background: var(--surface-soft); font-size: 9px; line-height: 1.4; }

.brand-graph-heading { align-items: center; }
.brand-command { margin-bottom: 16px; padding: 20px 22px; }
.brand-command-copy h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.brand-command-copy p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.brand-command form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; margin-top: 15px; }
.brand-command textarea { min-height: 76px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 11px; outline: none; resize: vertical; color: var(--ink); background: #fbfbfd; font-size: 13px; line-height: 1.65; }
.brand-command textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgb(103 87 232 / 9%); }
.brand-command-actions { display: grid; min-width: 166px; gap: 8px; }
.brand-command-actions .button { justify-content: center; }
.brand-upload-button { cursor: pointer; }
.brand-file-selection { margin-top: 10px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; color: #565a6d; border: 1px solid #e3e4eb; border-radius: 8px; background: #f8f8fb; font-size: 10px; }
.brand-file-selection svg { width: 15px; color: var(--primary); }
.brand-file-selection button { margin-left: auto; color: var(--muted); background: transparent; font-size: 10px; }
.brand-status { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.brand-status > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.brand-status > div > i { width: 20px; height: 20px; flex: none; border: 1px solid #d7d9e3; border-radius: 50%; background: #fff; }
.brand-status > div > span { min-width: 0; display: grid; gap: 1px; }
.brand-status strong { font-size: 10px; }
.brand-status small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.brand-status > b { width: 28px; height: 1px; background: #dedfe7; }
.brand-status [data-complete="true"] > i { position: relative; border-color: var(--green); background: var(--green); }
.brand-status [data-complete="true"] > i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.brand-status [data-current="true"] > i { border: 5px solid var(--primary-soft); background: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.brand-status [data-current="true"] strong { color: var(--primary-strong); }
.brand-status-message { margin-top: 9px; color: var(--muted); font-size: 10px; }
.brand-status-message.is-warning { color: #95601a; }
.brand-status-message.is-success { color: #15704f; }

.brand-graph-shell { display: grid; grid-template-columns: minmax(0, 1fr) 294px; gap: 16px; align-items: stretch; }
.brand-graph-main { min-width: 0; overflow: hidden; }
.brand-graph-toolbar { min-height: 88px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.brand-graph-toolbar h2 { margin: 0; font-size: 16px; }
.brand-graph-toolbar p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.brand-graph-toolbar > div:last-child { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.brand-node-palette { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.brand-node-palette button { min-height: 28px; padding: 0 9px; border: 1px solid #d9dbe5; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; color: #5d6070; background: #fff; cursor: grab; font-size: 8px; font-weight: 700; }
.brand-node-palette button:hover { color: var(--primary); border-color: #bcb5ed; background: var(--primary-soft); }
.brand-node-palette button:active { cursor: grabbing; }
.brand-node-palette svg { width: 12px; }
.brand-graph-canvas { position: relative; height: 590px; overflow: auto; background-color: #fcfcfe; background-image: radial-gradient(#dedfe9 0.8px, transparent 0.8px); background-size: 22px 22px; }
.brand-graph-canvas.is-drop-target { box-shadow: inset 0 0 0 2px var(--primary); background-color: #faf9ff; }
.brand-graph-lines, .brand-graph-nodes { position: absolute; inset: 0; width: 1080px; height: 760px; }
.brand-graph-lines { z-index: 1; overflow: visible; pointer-events: auto; }
.brand-graph-nodes { z-index: 2; pointer-events: none; }
.brand-graph-node { pointer-events: auto; }
.brand-graph-line { fill: none; stroke: #c7c9d8; stroke-width: 1.5; pointer-events: stroke; cursor: pointer; }
.brand-graph-line-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.brand-graph-line.is-selected { stroke: var(--primary); stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.brand-graph-line-label { fill: #777b8e; font-size: 9px; paint-order: stroke; stroke: #fcfcfe; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.brand-edge-remove { fill: #fff; stroke: #c7c9d8; stroke-width: 1; cursor: pointer; pointer-events: all; }
.brand-edge-remove-mark { fill: #8b8e9d; font-size: 12px; font-weight: 800; cursor: pointer; pointer-events: all; }
g[data-brand-edge]:hover .brand-graph-line { stroke: #8e82e4; stroke-width: 2; }
g[data-brand-edge]:hover .brand-edge-remove { stroke: var(--primary); }
g[data-brand-edge]:hover .brand-edge-remove-mark { fill: var(--primary); }
.brand-graph-node { position: absolute; width: 216px; min-height: 102px; padding: 14px 15px 13px; border: 1px solid #dfe1e9; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgb(28 31 58 / 6%); cursor: grab; user-select: none; touch-action: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.brand-graph-node:hover { border-color: #bdb8ec; box-shadow: 0 10px 28px rgb(32 29 77 / 9%); }
.brand-graph-node.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(103 87 232 / 10%), 0 12px 30px rgb(32 29 77 / 10%); }
.brand-graph-node.is-dragging { z-index: 5; cursor: grabbing; transform: scale(1.015); }
.brand-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand-node-scope { color: #76798a; font-size: 8px; font-weight: 750; letter-spacing: .04em; }
.brand-node-state { padding: 3px 6px; color: #747788; border-radius: 5px; background: #f1f2f6; font-size: 8px; }
.brand-graph-node[data-status="active"] .brand-node-state { color: #14704f; background: var(--green-soft); }
.brand-graph-node[data-status="ready"] .brand-node-state { color: #936117; background: var(--orange-soft); }
.brand-graph-node[data-status="provider_pending"] .brand-node-state { color: #9c4d5b; background: var(--red-soft); }
.brand-graph-node h3 { overflow: hidden; margin: 9px 0 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.brand-graph-node p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.brand-node-version { display: block; margin-top: 9px; color: var(--muted-2); font-size: 8px; }
.brand-node-handle { position: absolute; top: 43px; right: -7px; width: 14px; height: 14px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px #aca4ec; cursor: crosshair; }
.brand-node-handle:hover { transform: scale(1.2); }
.brand-node-target { position: absolute; top: 43px; left: -7px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #c7c9d6; box-shadow: 0 0 0 1px #c7c9d6; }
.brand-graph-node.is-connect-target .brand-node-target { background: var(--green); box-shadow: 0 0 0 4px rgb(28 166 111 / 14%); }
.brand-graph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }

.brand-inspector { min-width: 0; padding: 18px; }
.brand-inspector-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.brand-inspector-empty svg { width: 27px; margin-bottom: 10px; color: var(--primary); }
.brand-inspector-empty strong { color: var(--ink); font-size: 13px; }
.brand-inspector-empty p { max-width: 190px; margin: 6px 0 0; font-size: 10px; line-height: 1.6; }
.brand-inspector-content > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.brand-inspector-content header span:first-child { color: var(--primary); font-size: 8px; font-weight: 750; }
.brand-inspector-content h2 { margin: 5px 0 0; font-size: 17px; line-height: 1.35; }
.brand-node-status { flex: none; padding: 4px 7px; color: #7a5a19; border-radius: 6px; background: var(--orange-soft); font-size: 8px; }
.brand-node-status.active { color: #15704f; background: var(--green-soft); }
.brand-node-status.provider_pending { color: #9c4d5b; background: var(--red-soft); }
.brand-inspector-meta { margin: 14px 0; display: grid; gap: 7px; }
.brand-inspector-meta > div { display: flex; justify-content: space-between; gap: 12px; }
.brand-inspector-meta dt { color: var(--muted); font-size: 9px; }
.brand-inspector-meta dd { margin: 0; color: #4e5161; font-size: 9px; text-align: right; }
.brand-inspector-summary { padding: 10px 11px; color: #4f476f; border-radius: 8px; background: #f5f3ff; font-size: 10px; line-height: 1.6; }
.brand-inspector-rules { margin-top: 13px; display: grid; gap: 10px; }
.brand-inspector-rule strong { display: block; margin-bottom: 5px; font-size: 9px; }
.brand-inspector-rule ul { margin: 0; padding-left: 16px; color: #5f6272; font-size: 9px; line-height: 1.6; }
.brand-inspector-connections { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.brand-inspector-connections > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand-inspector-connections > header strong { font-size: 9px; }
.brand-inspector-connections > header span { color: var(--muted); font-size: 8px; }
#brand-inspector-connections { display: grid; gap: 7px; margin-top: 8px; }
.brand-connection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbfd; }
.brand-connection-row span { min-width: 0; color: #5f6272; font-size: 8px; line-height: 1.45; }
.brand-connection-row span strong { display: block; overflow: hidden; color: #404353; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.brand-connection-row button { min-height: 27px; padding: 0 8px; color: #9c4d5b; border: 1px solid #ead8dc; border-radius: 6px; background: #fff; font-size: 8px; cursor: pointer; }
.brand-connection-row button:hover { color: #8a3142; border-color: #d8aeb7; background: #fff7f8; }
.brand-connection-empty { padding: 8px; color: var(--muted); border-radius: 7px; background: var(--surface-soft); font-size: 8px; line-height: 1.5; }
.brand-inspector-actions { margin-top: 16px; display: grid; gap: 8px; }
.brand-inspector-actions .button { width: 100%; justify-content: center; }
.brand-disable-button { width: 100%; margin-top: 9px; padding: 7px; color: #9294a2; background: transparent; font-size: 9px; }
.brand-disable-button:hover { color: var(--red); }

.brand-ip-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: var(--shadow-md); }
.brand-ip-dialog::backdrop { background: rgb(20 22 42 / 42%); backdrop-filter: blur(3px); }
.brand-ip-dialog form { padding: 22px; display: grid; gap: 15px; }
.brand-ip-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.brand-ip-dialog h2 { margin: 0; font-size: 20px; }
.brand-ip-dialog header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.brand-ip-dialog textarea { resize: vertical; }
.brand-ip-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

.platform-create-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; margin-bottom: 16px; }
.platform-ai-create, .platform-manual-create { padding: 18px; }
.platform-ai-create { display: flex; align-items: flex-start; gap: 13px; background: linear-gradient(135deg,#faf9ff,#f5f8ff); }
.platform-ai-create > div { min-width: 0; flex: 1; }
.platform-ai-create strong, .platform-manual-create strong { font-size: 14px; }
.platform-ai-create p, .platform-manual-create p { margin: 5px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.platform-ai-create label { display: flex; gap: 8px; }
.platform-ai-create input, .platform-manual-fields input { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; background: #fff; }
.platform-ai-create input { flex: 1; }
.platform-ai-create input:focus, .platform-manual-fields input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(103 87 232 / 10%); }
.platform-ai-create small { display: block; margin-top: 8px; color: #87899a; font-size: 9px; }
.platform-manual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.platform-manual-fields .button { grid-column: 1 / -1; }

.platform-page-heading .eyebrow { display: none; }
.platform-command-center { margin-bottom: 18px; padding: 22px; }
.platform-command-center form { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
.platform-command-orb { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; border-radius: 12px; background: var(--primary); }
.platform-command-orb svg { width: 21px; }
.platform-command-center form > label { display: grid; gap: 3px; }
.platform-command-center form > label strong { font-size: 15px; }
.platform-command-center form > label small { color: var(--muted); font-size: 10px; line-height: 1.55; }
.platform-command-input { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 9px; }
.platform-command-input textarea { min-height: 64px; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; resize: vertical; color: var(--ink); background: #fbfbfd; font-size: 12px; line-height: 1.65; }
.platform-command-input textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgb(103 87 232 / 9%); }
.platform-command-input .button { min-width: 128px; align-self: stretch; }
.platform-capability { grid-column: 2; margin-top: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #e3e1f5; border-radius: 9px; background: #faf9ff; }
.platform-capability span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.platform-capability i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.platform-capability strong { font-size: 10px; }
.platform-capability p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.platform-ai-progress { grid-column: 2; margin-top: 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.platform-ai-progress span { padding: 9px; display: flex; align-items: center; gap: 7px; color: var(--muted); border-radius: 8px; background: var(--surface-soft); font-size: 9px; }
.platform-ai-progress i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e9e9f1; font-style: normal; font-weight: 750; }
.platform-ai-progress span.active { color: var(--primary); background: var(--primary-soft); }
.platform-ai-progress span.active i { color: #fff; background: var(--primary); }
.platform-ai-progress span.complete { color: #14714e; background: var(--green-soft); }
.platform-ai-progress span.complete i { color: #fff; background: var(--green); }
.platform-ai-progress span.skipped { color: #8b661d; background: var(--orange-soft); }
.platform-ai-status { grid-column: 2; margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.platform-intelligence-layout { display: grid; grid-template-columns: minmax(420px, .96fr) minmax(360px, 1.04fr); gap: 15px; align-items: start; }
.platform-list-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.platform-list-toolbar { padding: 16px 17px 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .6fr); gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.platform-list-toolbar > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.platform-list-toolbar h2 { margin: 0; font-size: 14px; }
.platform-list-toolbar > div:first-child span { color: var(--muted); font-size: 9px; }
.platform-list-toolbar .filter-chips { grid-column: 1 / -1; }
.platform-list { display: grid; }
.platform-row { width: 100%; padding: 14px 16px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); background: #fff; text-align: left; transition: .16s ease; }
.platform-row:last-child { border-bottom: 0; }
.platform-row:hover { background: #fafafe; }
.platform-row.selected { background: #f7f5ff; box-shadow: inset 3px 0 var(--primary); }
.platform-row.disabled { opacity: .58; }
.platform-row-logo { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 10px; font-size: 12px; font-weight: 800; }
.platform-row-main { min-width: 0; }
.platform-row-title { display: flex; align-items: center; gap: 7px; }
.platform-row-title strong { font-size: 12px; }
.platform-row-title span { color: #14704e; font-size: 8px; }
.platform-row-main p { overflow: hidden; margin: 4px 0 5px; color: #55586a; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.platform-row-main small { color: var(--muted-2); font-size: 8px; }
.platform-row-state { display: grid; justify-items: end; gap: 6px; }
.platform-row-state span { color: var(--muted); font-size: 8px; }
.platform-detail { position: sticky; top: calc(var(--topbar-height) + 16px); min-height: 470px; padding: 20px; }
.platform-detail-header { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.platform-detail-header .platform-row-logo { width: 43px; height: 43px; }
.platform-detail-header > div:nth-child(2) { min-width: 0; flex: 1; }
.platform-detail-header h2 { margin: 0; font-size: 17px; }
.platform-detail-header p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.platform-business-toggle { padding: 7px 9px; color: #5146b8; border-radius: 7px; background: var(--primary-soft); font-size: 9px; font-weight: 700; }
.platform-business-toggle.off { color: var(--muted); background: var(--surface-soft); }
.platform-detail-summary { margin: 15px 0; padding: 12px; color: #484b5e; border-radius: 9px; background: #f8f8fb; font-size: 11px; line-height: 1.65; }
.platform-rule-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.platform-rule-section { padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.platform-rule-section strong { display: block; margin-bottom: 5px; font-size: 9px; }
.platform-rule-section p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.platform-source-list { margin-top: 14px; }
.platform-source-list > strong { display: block; margin-bottom: 7px; font-size: 10px; }
.platform-source-item { padding: 8px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid var(--line); }
.platform-source-item span { font-size: 9px; }
.platform-source-item small { color: var(--muted); font-size: 8px; }
.platform-source-item em { color: #14714e; font-size: 8px; font-style: normal; }
.platform-source-item.pending em { color: #9a701e; }
.platform-performance-note { margin-top: 12px; display: flex; gap: 14px; color: var(--muted); font-size: 8px; }
.platform-performance-note b { color: var(--ink); font-size: 10px; }
.platform-correction { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.platform-correction label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; }
.platform-correction div { display: flex; gap: 7px; }
.platform-correction textarea { min-height: 58px; padding: 10px 11px; flex: 1; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; resize: vertical; font-size: 10px; line-height: 1.55; }
.platform-correction textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(103 87 232 / 8%); }
.platform-correction .button { align-self: stretch; }

@media (max-width: 1120px) {
  .platform-intelligence-layout { grid-template-columns: 1fr; }
  .platform-detail { position: static; min-height: 0; }
}

@media (max-width: 680px) {
  .platform-command-center { padding: 16px; }
  .platform-command-center form { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .platform-command-orb { width: 34px; height: 34px; border-radius: 9px; }
  .platform-command-input { grid-template-columns: 1fr; }
  .platform-command-input .button { min-height: 44px; }
  .platform-capability { align-items: flex-start; flex-direction: column; }
  .platform-ai-progress { grid-template-columns: 1fr 1fr; }
  .platform-list-toolbar { grid-template-columns: 1fr; }
  .platform-list-toolbar .filter-chips { grid-column: auto; overflow-x: auto; }
  .platform-row { grid-template-columns: 34px minmax(0, 1fr); }
  .platform-row-logo { width: 34px; height: 34px; border-radius: 9px; }
  .platform-row-state { grid-column: 2; grid-row: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .platform-rule-sections { grid-template-columns: 1fr; }
  .platform-correction div { flex-direction: column; }
  .platform-correction .button { min-height: 42px; }
}

.recommendation-admin-card { margin-bottom: 18px; padding: 18px; }
.recommendation-admin-list { display: grid; gap: 9px; margin-top: 14px; }
.recommendation-admin-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfd; }
.recommendation-admin-title { display: flex; align-items: center; gap: 8px; }
.recommendation-admin-title > span { padding: 3px 7px; color: #6757e8; border-radius: 5px; background: #efedff; font-size: 10px; }
.recommendation-admin-item.active .recommendation-admin-title > span { color: #14724d; background: #e5f6ee; }
.recommendation-admin-item.paused .recommendation-admin-title > span { color: #8a6215; background: #fff3d7; }
.recommendation-admin-main p { margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.recommendation-admin-main small { color: #7d8190; }
.recommendation-admin-main small b { color: #5c50ca; font-weight: 650; }
.recommendation-admin-stats { display: flex; gap: 14px; }
.recommendation-admin-stats span { display: grid; min-width: 38px; text-align: center; }
.recommendation-admin-stats strong { font-size: 15px; }
.recommendation-admin-stats small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.recommendation-admin-actions { min-width: 74px; text-align: right; }

#page-operations.generation-priority-mode .operation-summary-grid,
#page-operations.generation-priority-mode .operation-global-toolbar,
#page-operations.generation-priority-mode .operation-tabs,
#page-operations.generation-priority-mode .operation-planner-grid,
#page-operations.generation-priority-mode .operation-campaigns-card,
#page-operations.generation-priority-mode [data-operation-panel]:not([data-operation-panel="planner"]),
#page-operations.generation-priority-mode #operation-new { display: none !important; }
#page-operations.generation-priority-mode .recommendation-admin-card { margin-top: 4px; }

@media (max-width: 900px) {
  .module-shortcuts { grid-template-columns: 1fr; }
  .platform-create-grid { grid-template-columns: 1fr; }
  .brand-framework-grid { grid-template-columns: 1fr; }
  .brand-level-explainer { grid-template-columns: 1fr; }
  .brand-level-explainer > i { transform: rotate(90deg); justify-self: center; }
  .recommendation-admin-item { grid-template-columns: 1fr; }
  .recommendation-admin-stats { justify-content: flex-start; }
  .recommendation-admin-actions { text-align: left; }
  .brand-graph-heading { align-items: flex-start; flex-direction: column; }
  .brand-graph-heading .button { width: 100%; }
  .brand-command form { grid-template-columns: 1fr; }
  .brand-command-actions { grid-template-columns: 1fr 1fr; }
  .brand-status { grid-template-columns: 1fr; gap: 7px; }
  .brand-status > b { width: 1px; height: 12px; margin-left: 10px; }
  .brand-status small { white-space: normal; }
  .brand-graph-shell { grid-template-columns: 1fr; }
  .brand-graph-toolbar { align-items: flex-start; flex-direction: column; }
  .brand-node-palette { width: 100%; }
  .brand-graph-canvas { height: auto; min-height: 0; padding: 12px; overflow: visible; background-image: none; }
  .brand-graph-lines { display: none; }
  .brand-graph-nodes { position: static; width: auto !important; height: auto !important; display: grid; gap: 9px; }
  .brand-graph-node { position: relative !important; inset: auto !important; width: 100%; min-height: 0; cursor: pointer; touch-action: auto; }
  .brand-node-handle, .brand-node-target { display: none; }
  .brand-inspector { min-height: 320px; }
}
.sidebar-bottom { padding: 11px; border-top: 1px solid rgb(255 255 255 / 7%); }
.assistant-entry { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px; color: #fff; text-align: left; border: 1px solid rgb(158 145 255 / 18%); border-radius: 12px; background: linear-gradient(145deg, rgb(112 94 244 / 15%), rgb(60 64 98 / 20%)); }
.assistant-entry > span:nth-child(2) { min-width: 0; flex: 1; }
.assistant-entry strong, .assistant-entry small { display: block; }
.assistant-entry strong { font-size: 12px; }
.assistant-entry small { overflow: hidden; margin-top: 1px; color: #8f93aa; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.assistant-entry .arrow { width: 15px; color: #898da5; }
.assistant-orb { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: white; border-radius: 10px; background: linear-gradient(145deg, #806ff6, #5746d4); box-shadow: 0 7px 18px rgb(94 75 222 / 28%); }
.assistant-orb svg { width: 16px; }
.assistant-orb.large { width: 44px; height: 44px; border-radius: 14px; }
.assistant-orb.large svg { width: 22px; }
.sidebar-profile { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 7px 2px; }
.avatar { display: grid; width: 31px; height: 31px; place-items: center; color: #dbd6ff; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; background: #30334c; font-size: 12px; font-weight: 700; }
.sidebar-profile { position: relative; }
.admin-account-menu { position: absolute; right: 0; bottom: 45px; z-index: 80; width: 178px; padding: 7px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 11px; background: #202337; box-shadow: 0 18px 46px rgb(4 7 17 / 38%); }
.admin-account-menu button, .admin-account-menu a { display: block; width: 100%; padding: 9px 10px; color: #d9dcec; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-size: 10px; }
.admin-account-menu button:hover, .admin-account-menu a:hover { color: white; background: rgb(255 255 255 / 7%); }
.account-dialog { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: transparent; }
.account-dialog.compact { width: min(440px, calc(100vw - 28px)); }
.account-dialog::backdrop { background: rgb(17 20 34 / 55%); backdrop-filter: blur(4px); }
.account-dialog-shell { max-height: calc(100vh - 40px); padding: 24px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 28px 80px rgb(20 24 40 / 28%); }
.account-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.account-dialog-shell > header small { color: var(--primary); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.account-dialog-shell > header h2 { margin: 5px 0 4px; font-size: 22px; }
.account-dialog-shell > header p { margin: 0; color: var(--muted); font-size: 10px; }
.member-list { display: grid; gap: 7px; margin-bottom: 18px; }
.member-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.member-row > i { display: grid; width: 34px; height: 34px; place-items: center; color: white; border-radius: 9px; background: var(--ink); font-style: normal; font-size: 11px; font-weight: 800; }
.member-row strong, .member-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-row strong { font-size: 10px; }
.member-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.member-row em { color: var(--primary); font-size: 8px; font-style: normal; }
.form-help { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.sidebar-profile > div:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-profile strong, .sidebar-profile small { display: block; }
.sidebar-profile strong { color: #dadce8; font-size: 11px; }
.sidebar-profile small { color: #777b93; font-size: 9px; }
.sidebar-profile .icon-button { color: #777b93; }

.workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 88%); backdrop-filter: blur(16px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.menu-button { display: none !important; }
.icon-button { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; color: var(--muted); border-radius: 9px; background: transparent; }
.icon-button:hover { color: var(--ink); background: var(--surface-soft); }
.icon-button svg { width: 18px; }
.store-switcher { position: relative; }
.store-trigger { display: flex; min-width: 214px; align-items: center; gap: 10px; padding: 5px 9px 5px 6px; text-align: left; border-radius: 11px; background: transparent; }
.store-trigger:hover, .store-trigger[aria-expanded="true"] { background: var(--surface-soft); }
.store-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 9px; background: linear-gradient(145deg, #31354e, #1a1d31); font-size: 12px; font-weight: 700; }
.store-trigger-copy { min-width: 0; flex: 1; }
.store-trigger-copy small, .store-trigger-copy strong { display: block; }
.store-trigger-copy small { color: var(--muted-2); font-size: 9px; }
.store-trigger-copy strong { overflow: hidden; max-width: 180px; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.store-trigger > svg { width: 16px; color: var(--muted); transition: transform .2s ease; }
.store-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.store-menu { position: absolute; top: calc(100% + 9px); left: 0; z-index: 50; display: none; width: 330px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-md); }
.store-menu.open { display: block; animation: pop .16s ease; }
.store-menu-head { display: flex; justify-content: space-between; padding: 5px 5px 9px; }
.store-menu-head strong { font-size: 13px; }
.store-menu-head span { color: var(--muted); font-size: 11px; }
.store-list { max-height: 285px; overflow-y: auto; margin-top: 7px; }
.store-option { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 8px; text-align: left; border-radius: 10px; background: transparent; }
.store-option:hover { background: var(--surface-soft); }
.store-option.active { background: var(--primary-soft); }
.store-option .store-avatar { width: 34px; height: 34px; }
.store-option-copy { min-width: 0; flex: 1; }
.store-option strong, .store-option small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.store-option strong { font-size: 12px; }
.store-option small { color: var(--muted); font-size: 10px; }
.store-option .check { display: none; width: 20px; color: var(--primary); }
.store-option.active .check { display: block; }
.store-manage { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 7px; padding: 10px 9px 3px; color: var(--muted); text-align: left; border-top: 1px solid var(--line); background: transparent; font-size: 11px; }
.store-manage > svg { width: 16px; }
.store-manage .arrow { margin-left: auto; }
.sync-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.sync-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.sync-status.saving i { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); animation: pulse 1s infinite; }
.sync-status.error i { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.ai-top-button { display: inline-flex; height: 36px; align-items: center; gap: 7px; padding: 0 13px; color: #fff; border-radius: 9px; background: var(--ink); font-size: 11px; font-weight: 650; }
.ai-top-button:hover { background: #292c43; }
.ai-top-button svg { width: 15px; }

.main-content { position: relative; max-width: 1600px; min-height: calc(100vh - var(--topbar-height)); margin: 0 auto; padding: 30px 32px 70px; }
.page { display: none; animation: pageIn .25s ease; }
.page.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.page-heading h1 { margin: 0; font-size: clamp(25px, 2vw, 31px); line-height: 1.2; letter-spacing: -.04em; }
.page-heading p { max-width: 660px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; background: none; font-size: 11px; font-weight: 650; transition: .15s ease; }
.button svg { width: 15px; }
.button.primary { color: white; background: var(--primary); box-shadow: 0 7px 18px rgb(103 87 232 / 19%); }
.button.primary:hover { background: var(--primary-strong); transform: translateY(-1px); }
.button.secondary { color: #45485e; border-color: var(--line-strong); background: white; }
.button.secondary:hover { border-color: #c9cadd; background: var(--surface-soft); }
.button.ghost { color: var(--primary); background: var(--primary-soft); }
.button.dark { color: white; background: var(--ink); }
.button.wide { width: 100%; }
.compact-button { min-height: 32px; padding: 0 12px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 650; }
.text-button svg { width: 13px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }

.loading-screen { position: absolute; inset: 0; z-index: 25; display: none; min-height: 520px; align-items: center; justify-content: center; flex-direction: column; background: var(--canvas); }
.loading-screen.visible { display: flex; }
.loading-screen strong { margin-top: 17px; font-size: 14px; }
.loading-screen small { margin-top: 4px; color: var(--muted); }
.loading-orb { position: relative; width: 48px; height: 48px; }
.loading-orb span { position: absolute; border-radius: 12px; background: var(--primary); animation: loader 1.5s ease-in-out infinite; }
.loading-orb span:nth-child(1) { inset: 2px 20px 20px 2px; }
.loading-orb span:nth-child(2) { inset: 14px 2px 6px 14px; animation-delay: -.25s; opacity: .65; }
.loading-orb span:nth-child(3) { width: 9px; height: 9px; right: 2px; top: 2px; background: var(--green); animation-delay: -.5s; }

.overview-hero { position: relative; display: grid; min-height: 185px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); overflow: hidden; color: white; border: 0; background: radial-gradient(circle at 72% 10%, rgb(124 104 246 / 34%), transparent 27%), radial-gradient(circle at 17% 120%, rgb(36 185 134 / 13%), transparent 35%), #191b31; box-shadow: 0 20px 45px rgb(25 27 49 / 15%); }
.overview-hero::after { position: absolute; width: 240px; height: 240px; right: -70px; bottom: -150px; content: ""; border: 1px solid rgb(255 255 255 / 9%); border-radius: 50%; box-shadow: 0 0 0 35px rgb(255 255 255 / 2%), 0 0 0 70px rgb(255 255 255 / 1.5%); }
.hero-copy { position: relative; z-index: 1; padding: 29px 31px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 650; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.positive { color: #a8edd4; background: rgb(42 191 139 / 12%); }
.status-pill.positive i { background: #56d8aa; box-shadow: 0 0 0 4px rgb(86 216 170 / 10%); }
.hero-copy h2 { margin: 17px 0 7px; font-size: clamp(20px, 2vw, 27px); line-height: 1.28; letter-spacing: -.03em; }
.hero-copy > p { max-width: 650px; margin: 0; color: #aeb1c5; font-size: 12px; }
.hero-meta { display: flex; align-items: center; gap: 19px; margin-top: 21px; }
.hero-meta > span { display: flex; align-items: center; gap: 5px; color: #777c96; font-size: 9px; }
.hero-meta svg { width: 13px; }
.hero-meta .text-button { color: #aaa0ff; }
.health-panel { position: relative; z-index: 1; display: flex; align-items: center; gap: 17px; margin: 22px; padding: 20px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 14px; background: rgb(255 255 255 / 5%); backdrop-filter: blur(10px); }
.health-ring { --score: 0; position: relative; display: grid; width: 92px; height: 92px; flex: 0 0 auto; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle closest-side, #22253b 81%, transparent 82% 100%), conic-gradient(#8c7afb calc(var(--score) * 1%), rgb(255 255 255 / 8%) 0); }
.health-ring strong { font-size: 24px; line-height: 1; }
.health-ring small { margin-top: 4px; color: #7f849e; font-size: 8px; }
.health-copy { min-width: 0; flex: 1; }
.health-copy strong { font-size: 13px; }
.health-copy p { margin: 5px 0 12px; color: #8f93a9; font-size: 9px; }
.micro-progress { height: 4px; overflow: hidden; border-radius: 5px; background: rgb(255 255 255 / 10%); }
.micro-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7565ec, #9a8dff); transition: width .6s ease; }
.micro-progress.large { height: 6px; background: #ececf4; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 14px 0; }
.metric-card { min-width: 0; padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.metric-card.highlight { border-color: #dcd6ff; background: linear-gradient(145deg, #fff, #f9f7ff); }
.metric-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; }
.metric-icon svg { width: 14px; }
.metric-icon.purple, .summary-icon.purple { color: var(--primary); background: var(--primary-soft); }
.metric-icon.blue, .summary-icon.blue { color: var(--blue); background: #eaf2ff; }
.metric-icon.green, .summary-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.orange { color: var(--orange); background: var(--orange-soft); }
.metric-card > strong { display: block; margin: 9px 0 2px; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.metric-card > small { color: var(--muted-2); font-size: 9px; }
.metric-card > small.positive { color: var(--green); }
.metric-card > small.negative { color: var(--red); }
.trend-badge { padding: 2px 6px; color: var(--muted); border-radius: 10px; background: var(--surface-soft); font-size: 9px; }
.trend-badge.positive { color: var(--green); background: var(--green-soft); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 14px; }
.dashboard-grid .span-2 { grid-column: auto; }
.dashboard-grid .span-3 { grid-column: 1 / -1; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 19px 20px 0; }
.card-heading h3 { margin: 0; font-size: 13px; }
.card-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-line { width: 13px; height: 3px; border-radius: 4px; }
.legend-line.purple { background: var(--primary); }
.legend-line.green { background: var(--green); }
.chart-card { min-height: 300px; }
.trend-chart, .analytics-chart { height: 225px; padding: 15px 14px 13px; }
.trend-chart svg, .analytics-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid-line { stroke: #ececf2; stroke-width: 1; }
.chart-axis-label { fill: #9a9cad; font-size: 9px; }
.chart-area { opacity: .13; }
.chart-dot { stroke: #fff; stroke-width: 2; }
.recommendations-card { min-height: 300px; }
.recommendation-list { padding: 9px 13px 14px; }
.recommendation-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 7px; border-bottom: 1px solid var(--line); }
.recommendation-item:last-child { border: 0; }
.recommendation-priority { display: grid; width: 25px; height: 25px; place-items: center; color: var(--primary); border-radius: 7px; background: var(--primary-soft); font-size: 9px; font-weight: 800; }
.recommendation-item strong { display: block; font-size: 10px; }
.recommendation-item p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.recommendation-item button { align-self: center; padding: 4px; color: var(--muted); background: transparent; }
.recommendation-item button svg { width: 13px; }
.channel-card { min-height: 268px; }
.channel-list { padding: 13px 20px 17px; }
.channel-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 37px; align-items: center; gap: 10px; margin: 13px 0; }
.channel-name { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; }
.channel-dot { width: 8px; height: 8px; border-radius: 3px; }
.channel-bar { height: 6px; overflow: hidden; border-radius: 8px; background: #eeeef3; }
.channel-bar span { display: block; height: 100%; border-radius: inherit; }
.channel-value { color: var(--muted); text-align: right; font-size: 9px; }
.recent-card { min-height: 268px; }
.table-wrap { width: 100%; overflow-x: auto; padding: 10px 12px 13px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 8px; color: var(--muted-2); text-align: left; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 650; letter-spacing: .04em; }
td { max-width: 230px; padding: 11px 8px; overflow: hidden; color: #55586d; border-bottom: 1px solid #f0f0f4; font-size: 9px; text-overflow: ellipsis; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafafe; }
.task-title { display: block; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 600; text-overflow: ellipsis; }
.task-id { display: block; margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 12px; font-size: 8px; font-weight: 650; }
.status-badge::before { width: 5px; height: 5px; content: ""; border-radius: 50%; }
.status-badge.success { color: var(--green); background: var(--green-soft); }
.status-badge.success::before { background: var(--green); }
.status-badge.processing { color: var(--orange); background: var(--orange-soft); }
.status-badge.processing::before { background: var(--orange); animation: pulse 1s infinite; }
.status-badge.pending { color: var(--primary); background: var(--primary-soft); }
.status-badge.pending::before { background: var(--primary); }
.status-badge.failed { color: var(--red); background: var(--red-soft); }
.status-badge.failed::before { background: var(--red); }
.platform-badge { display: inline-flex; align-items: center; gap: 5px; }
.platform-badge i { display: grid; width: 19px; height: 19px; place-items: center; color: white; border-radius: 5px; font-size: 7px; font-style: normal; font-weight: 800; }

.brand-completeness { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 13px; padding: 14px 16px; }
.brand-complete-icon { display: grid; width: 37px; height: 37px; place-items: center; color: var(--primary); border-radius: 10px; background: var(--primary-soft); }
.brand-complete-icon svg { width: 18px; }
.complete-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.complete-title strong { font-size: 11px; }
.complete-title span { color: var(--primary); font-size: 11px; font-weight: 750; }
.brand-completeness p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.segmented-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 13px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #e9e9ef; }
.segmented-tabs button { padding: 9px 12px; color: var(--muted); border-radius: 9px; background: transparent; font-size: 11px; font-weight: 650; }
.segmented-tabs button span { display: block; margin-top: 1px; color: var(--muted-2); font-size: 8px; font-weight: 400; }
.segmented-tabs button.active { color: var(--ink); background: white; box-shadow: 0 2px 8px rgb(21 23 39 / 8%); }
.segmented-tabs.compact-tabs { display: inline-flex; grid-template-columns: none; }
.brand-panel, .knowledge-panel { display: none; }
.brand-panel.active, .knowledge-panel.active { display: block; animation: pageIn .2s ease; }
.config-form { display: grid; gap: 13px; }
.form-card { padding: 20px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-heading > div { display: flex; gap: 11px; }
.section-index { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--primary); border-radius: 8px; background: var(--primary-soft); font-size: 9px; font-weight: 800; }
.section-heading h3 { margin: 1px 0 0; font-size: 13px; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.ai-inline { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--primary); border-radius: 8px; background: var(--primary-soft); font-size: 9px; font-weight: 650; }
.ai-inline svg { width: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #4e5164; font-size: 10px; font-weight: 600; }
.field.span-2 { grid-column: 1 / -1; }
.field input, .field textarea, .field select, .toolbar select { width: 100%; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; outline: none; background: white; font-size: 11px; font-weight: 400; transition: .15s ease; }
.field input, .field select { height: 39px; padding: 0 11px; }
.field textarea { min-height: 78px; padding: 10px 11px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #b1b2c0; }
.field input:focus, .field textarea:focus, .field select:focus, .toolbar select:focus { border-color: #9b90ee; box-shadow: 0 0 0 3px rgb(103 87 232 / 9%); }
.field small { color: var(--muted-2); font-size: 8px; font-weight: 400; }
.field-label { display: block; margin-bottom: 8px; color: #4e5164; font-size: 10px; font-weight: 600; }
.sticky-save { position: sticky; z-index: 5; bottom: 14px; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 91%); box-shadow: 0 12px 35px rgb(20 22 42 / 12%); backdrop-filter: blur(12px); }
.save-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.visual-config-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 30px; }
.visual-config-grid > div:first-child { display: grid; gap: 14px; }
.palette-editor { padding: 15px; border-radius: 12px; background: var(--surface-soft); }
.palette-list { display: grid; gap: 8px; }
.color-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.color-row input[type="color"] { width: 36px; height: 34px; padding: 2px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.color-row input[type="text"] { min-width: 0; border: 0; outline: none; font-size: 10px; font-weight: 600; }
.color-row button { display: grid; width: 27px; height: 27px; place-items: center; color: var(--muted-2); border-radius: 7px; background: transparent; }
.color-row button:hover { color: var(--red); background: var(--red-soft); }
.color-row button svg { width: 13px; }
.add-color, .add-strategy { display: flex; width: 100%; min-height: 37px; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--primary); border: 1px dashed #bdb6ed; border-radius: 9px; background: #f8f7ff; font-size: 9px; font-weight: 650; }
.add-color svg, .add-strategy svg { width: 13px; }
.palette-editor > small { display: block; margin-top: 9px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.range-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 30px; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.range-labels { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 8px; }
.range-labels strong { color: var(--primary); font-size: 10px; }
.range-note { display: flex; gap: 9px; padding: 13px; color: #595c70; border-radius: 10px; background: var(--primary-soft); font-size: 9px; }
.range-note svg { width: 16px; color: var(--primary); }
.range-note p { margin: 0; }
.strategy-list { display: grid; gap: 9px; }
.strategy-item { display: grid; grid-template-columns: 34px minmax(120px, .35fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.strategy-item .strategy-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--primary); border-radius: 9px; background: var(--primary-soft); font-weight: 750; }
.strategy-item input { min-width: 0; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 10px; }
.strategy-item input:focus { border-color: var(--line-strong); background: white; outline: none; }
.strategy-item .strategy-name { font-weight: 650; }
.strategy-item button { color: var(--muted-2); background: transparent; }
.strategy-item button:hover { color: var(--red); }
.strategy-item button svg { width: 15px; }
.toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.toggle-row { position: relative; display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.toggle-row.simple { border: 0; padding-inline: 0; }
.toggle-row > span { min-width: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 10px; }
.toggle-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row > i { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 20px; background: #c9cad4; transition: .2s ease; }
.toggle-row > i::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; content: ""; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: .2s ease; }
.toggle-row input:checked + i { background: var(--primary); }
.toggle-row input:checked + i::after { transform: translateX(15px); }

.info-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; padding: 13px 15px; color: #465a55; border: 1px solid #d5eee4; border-radius: 12px; background: #f2fbf7; }
.info-banner > svg { width: 19px; color: var(--green); }
.info-banner > div { min-width: 0; flex: 1; }
.info-banner strong { font-size: 10px; }
.info-banner p { margin: 2px 0 0; color: #758a84; font-size: 8px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; padding: 10px; }
.toolbar.borderless { margin: 0; border: 0; box-shadow: none; }
.search-field { display: flex; min-width: 220px; max-width: 390px; flex: 1; height: 37px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; }
.search-field.compact { min-width: 0; max-width: none; height: 34px; }
.search-field svg { width: 15px; color: var(--muted-2); }
.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10px; }
.filter-chips { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.filter-chips button { min-height: 27px; padding: 0 10px; color: var(--muted); border-radius: 7px; background: transparent; font-size: 9px; }
.filter-chips button.active { color: var(--ink); background: white; box-shadow: 0 1px 5px rgb(20 22 42 / 8%); font-weight: 650; }
.toolbar-count { margin-left: auto; padding-right: 5px; color: var(--muted); font-size: 9px; }
.toolbar select { width: auto; height: 34px; padding: 0 29px 0 10px; font-size: 9px; }
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.platform-card { position: relative; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); transition: .18s ease; }
.platform-card:hover { border-color: #d4d1e8; transform: translateY(-2px); box-shadow: 0 12px 30px rgb(20 22 42 / 7%); }
.platform-card.disabled { opacity: .68; }
.platform-card-top { display: flex; align-items: center; gap: 10px; }
.platform-logo { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: white; border-radius: 10px; background: #24273b; font-size: 11px; font-weight: 800; }
.platform-title { min-width: 0; flex: 1; }
.platform-title strong, .platform-title small { display: block; }
.platform-title strong { font-size: 12px; }
.platform-title small { color: var(--muted); font-size: 8px; }
.switch-mini { position: relative; width: 32px; height: 18px; border-radius: 20px; background: #cccdd6; }
.switch-mini::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; content: ""; border-radius: 50%; background: white; transition: .2s; }
.switch-mini.on { background: var(--green); }
.switch-mini.on::after { transform: translateX(14px); }
.platform-card > p { min-height: 45px; margin: 14px 0 12px; color: #686b7e; font-size: 9px; line-height: 1.65; }
.strategy-tags { display: flex; min-height: 45px; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.strategy-tags span { padding: 3px 7px; color: #65687a; border-radius: 6px; background: var(--surface-soft); font-size: 8px; }
.platform-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.completeness { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.completeness i { width: 38px; height: 4px; overflow: hidden; border-radius: 4px; background: #eeeef2; }
.completeness i span { display: block; height: 100%; border-radius: inherit; background: var(--green); }

.knowledge-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 13px; }
.knowledge-summary { display: flex; align-items: center; gap: 13px; padding: 16px; }
.summary-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 11px; }
.summary-icon svg { width: 18px; }
.knowledge-summary strong { display: inline; margin-right: 5px; font-size: 19px; }
.knowledge-summary span:not(.summary-icon) { color: #65687a; font-size: 9px; }
.knowledge-summary small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.knowledge-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.knowledge-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.knowledge-edit-button { min-height: 25px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; cursor: pointer; font-size: 8px; }
.knowledge-edit-button:hover { color: var(--primary); border-color: #bbb5ed; }
.knowledge-type { padding: 3px 7px; color: var(--primary); border-radius: 6px; background: var(--primary-soft); font-size: 8px; font-weight: 650; }
.knowledge-card h3 { margin: 12px 0 5px; font-size: 11px; }
.knowledge-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.65; }
.knowledge-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.knowledge-tags span { padding: 3px 6px; color: var(--muted); border-radius: 5px; background: var(--surface-soft); font-size: 7px; }
.knowledge-card-foot { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 10px; color: var(--muted-2); border-top: 1px solid var(--line); font-size: 8px; }
.upload-zone { display: flex; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 14px; padding: 25px; text-align: center; border-style: dashed; cursor: pointer; }
.asset-upload-toolbar { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; }
.asset-upload-toolbar label { display: flex; align-items: center; gap: 8px; color: #5f6272; font-size: 9px; font-weight: 700; }
.asset-upload-toolbar select { min-height: 32px; padding: 0 28px 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: #fff; font-size: 9px; }
.asset-upload-toolbar p { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.asset-upload-toolbar p i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.asset-upload-toolbar p.is-processing i { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.asset-upload-toolbar p.is-error { color: var(--red); }
.asset-upload-toolbar p.is-error i { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.upload-zone.dragging { border-color: var(--primary); background: var(--primary-soft); }
.upload-zone input { display: none; }
.upload-zone .upload-icon { display: grid; width: 45px; height: 45px; place-items: center; color: var(--primary); border-radius: 13px; background: var(--primary-soft); }
.upload-zone strong { margin-top: 12px; font-size: 12px; }
.upload-zone p { margin: 4px 0 13px; color: var(--muted); font-size: 9px; }
.asset-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.asset-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.asset-preview { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, #383d58, #1e2134); }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-preview > svg { width: 27px; opacity: .7; }
.asset-ai-tag { position: absolute; top: 7px; right: 7px; padding: 3px 6px; border-radius: 5px; background: rgb(24 26 45 / 70%); backdrop-filter: blur(5px); font-size: 7px; }
.asset-copy { padding: 9px; }
.asset-copy strong { display: block; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.asset-copy small { color: var(--muted); font-size: 7px; }
.asset-copy em { margin-top: 4px; display: block; color: #44705a; font-size: 7px; font-style: normal; line-height: 1.45; }
.visual-dimension-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 13px; }
.visual-dimension { min-height: 82px; padding: 15px; display: flex; align-items: center; gap: 12px; }
.visual-dimension > div { min-width: 0; }
.visual-dimension strong { display: inline; margin-right: 5px; font-size: 20px; }
.visual-dimension span:not(.summary-icon) { color: #626779; font-size: 9px; font-weight: 700; }
.visual-dimension small { margin-top: 3px; display: block; color: var(--muted-2); font-size: 8px; }
.visual-upload-panel { margin-bottom: 13px; padding: 16px; }
.visual-upload-fields { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(170px,.8fr) minmax(260px,1.5fr); gap: 10px; }
.visual-upload-fields label { display: grid; gap: 6px; color: #5e6273; font-size: 9px; font-weight: 700; }
.visual-upload-fields label span small { color: var(--muted-2); font-size: 7px; font-weight: 500; }
.visual-upload-fields select, .visual-upload-fields input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; color: var(--ink); background: #fff; font-size: 9px; }
.visual-upload-fields select:focus, .visual-upload-fields input:focus { border-color: #8d85d6; box-shadow: 0 0 0 3px rgba(98,84,223,.08); }
.visual-upload-zone { min-height: 86px; margin-top: 12px; padding: 14px 16px; border: 1px dashed #c9cbd7; border-radius: 10px; display: flex; align-items: center; gap: 12px; background: #fafafd; cursor: pointer; transition: .18s ease; }
.visual-upload-zone:hover, .visual-upload-zone.dragging { border-color: var(--primary); background: #f5f3ff; }
.visual-upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visual-upload-zone .upload-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; color: var(--primary); border-radius: 10px; background: var(--primary-soft); }
.visual-upload-zone .upload-icon svg { width: 18px; }
.visual-upload-zone > span:nth-of-type(2) { min-width: 0; display: grid; gap: 4px; }
.visual-upload-zone strong { font-size: 10px; }
.visual-upload-zone small { color: var(--muted); font-size: 8px; line-height: 1.55; }
.visual-upload-zone em { margin-left: auto; padding: 8px 11px; color: var(--primary); border: 1px solid #cbc7ef; border-radius: 7px; background: #fff; font-size: 8px; font-style: normal; font-weight: 750; white-space: nowrap; }
.visual-upload-status { margin: 10px 0 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.visual-upload-status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.visual-upload-status.is-processing i { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); animation: pulse 1.1s ease infinite; }
.visual-upload-status.is-error { color: var(--red); }
.visual-upload-status.is-error i { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.visual-guideline-toolbar { margin: 17px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.visual-guideline-toolbar .segmented-tabs { margin: 0; }
.visual-guideline-toolbar > span { color: var(--muted); font-size: 8px; }
.visual-guideline-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.visual-guideline-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 142px minmax(0,1fr); background: #fff; box-shadow: var(--shadow-sm); }
.visual-guideline-preview { min-height: 190px; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#272a35,#555c72); }
.visual-guideline-preview img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.visual-guideline-preview > svg { width: 28px; opacity: .65; }
.visual-guideline-preview::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 45%,rgba(18,19,27,.64)); pointer-events: none; }
.visual-guideline-ip { position: absolute; left: 9px; bottom: 9px; z-index: 1; padding: 5px 7px; border-radius: 6px; color: #fff; background: rgba(24,25,34,.72); backdrop-filter: blur(8px); font-size: 7px; font-weight: 750; }
.visual-guideline-body { min-width: 0; padding: 14px; display: flex; flex-direction: column; }
.visual-guideline-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.visual-guideline-status { padding: 4px 7px; border-radius: 999px; color: #6e7281; background: #f0f1f4; font-size: 7px; font-weight: 750; }
.visual-guideline-status.active { color: #28714e; background: var(--green-soft); }
.visual-guideline-status.ready { color: #8a611c; background: var(--orange-soft); }
.visual-guideline-status.failed { color: var(--red); background: var(--red-soft); }
.visual-guideline-version { color: var(--muted-2); font-size: 7px; }
.visual-guideline-body h3 { margin: 10px 0 5px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.visual-guideline-body > p { min-height: 38px; margin: 0; display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.visual-guideline-dimensions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.visual-guideline-dimensions span { padding: 4px 6px; color: #5d6170; border-radius: 5px; background: var(--surface-soft); font-size: 7px; }
.visual-guideline-dimensions span.is-present { color: var(--primary); background: var(--primary-soft); font-weight: 750; }
.visual-guideline-actions { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 6px; }
.visual-guideline-actions button { min-height: 29px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: #5e6270; background: #fff; cursor: pointer; font-size: 8px; font-weight: 700; }
.visual-guideline-actions button:hover { color: var(--primary); border-color: #bbb5ed; }
.visual-guideline-actions button.primary { color: #fff; border-color: var(--primary); background: var(--primary); }
.visual-guideline-actions button.danger { margin-left: auto; color: var(--red); border-color: #efd6d1; }
.insight-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.design-insight { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.design-insight .insight-number { color: var(--primary); font-size: 9px; font-weight: 800; }
.design-insight h3 { margin: 9px 0 6px; font-size: 12px; }
.design-insight p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.design-insight footer { display: flex; justify-content: space-between; margin-top: 13px; color: var(--muted-2); font-size: 8px; }

.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.template-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); transition: .18s; }
.template-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(20 22 42 / 7%); }
.template-preview { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #ececf2; }
.template-canvas { position: relative; width: 45%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--preview-bg, #25283c); box-shadow: 0 8px 20px rgb(20 22 42 / 18%); }
.template-canvas::before { position: absolute; top: 11%; left: 10%; width: 56%; height: 8%; content: ""; border-radius: 3px; background: var(--preview-accent, #8f80ff); }
.template-canvas::after { position: absolute; right: -13%; bottom: 12%; width: 75%; height: 48%; content: ""; border-radius: 50% 40% 30% 60%; background: rgb(255 255 255 / 25%); }
.template-layout-lines { position: absolute; inset: 26% 10% auto; height: 21%; border-top: 3px solid rgb(255 255 255 / 75%); border-bottom: 2px solid rgb(255 255 255 / 35%); }
.template-platform { position: absolute; top: 9px; left: 9px; padding: 3px 6px; color: white; border-radius: 5px; background: rgb(20 22 42 / 65%); font-size: 7px; }
.template-copy { padding: 12px; }
.template-copy h3 { margin: 0; font-size: 11px; }
.template-copy p { overflow: hidden; height: 29px; margin: 4px 0 9px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.template-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 8px; }
.template-meta button { color: var(--primary); background: transparent; font-size: 8px; font-weight: 650; }

.task-table-card { overflow: hidden; }
.large-table th, .large-table td { padding-block: 12px; }
.large-table td:first-child { max-width: 320px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 17px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.pagination { display: flex; gap: 4px; }
.pagination button { min-width: 28px; height: 27px; padding: 0 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 8px; }
.pagination button.active { color: white; border-color: var(--primary); background: var(--primary); }
.pagination button:disabled { opacity: .5; cursor: default; }

.period-switch { display: flex; padding: 3px; border-radius: 9px; background: #e8e8ee; }
.period-switch button { min-height: 31px; padding: 0 11px; color: var(--muted); border-radius: 7px; background: transparent; font-size: 9px; }
.period-switch button.active { color: var(--ink); background: white; box-shadow: 0 1px 5px rgb(20 22 42 / 8%); }
.analytics-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr); gap: 14px; }
.analytics-chart-card { min-height: 325px; }
.analytics-chart { height: 260px; }
.ai-insight-card { display: flex; align-items: flex-start; flex-direction: column; padding: 22px; color: white; border: 0; background: radial-gradient(circle at 100% 0, rgb(117 100 236 / 40%), transparent 39%), #1b1d32; }
.ai-insight-card .eyebrow { margin-top: 18px; color: #a99fff; }
.ai-insight-card h3 { margin: 3px 0 9px; font-size: 17px; line-height: 1.35; }
.ai-insight-card > p { margin: 0; color: #999db2; font-size: 9px; line-height: 1.7; }
.ai-insight-card > div { width: 100%; flex: 1; padding: 14px 0; }
.ai-action-item { display: flex; gap: 8px; margin: 9px 0; color: #c6c9d7; font-size: 9px; }
.ai-action-item::before { display: block; width: 5px; height: 5px; flex: 0 0 auto; margin-top: 5px; content: ""; border-radius: 50%; background: #8f80ff; }
.analytics-bottom { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); margin-top: 14px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 17px 20px 20px; }
.topic-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.topic-chip strong { font-size: 9px; }
.topic-chip span { color: var(--muted); font-size: 8px; }
.revision-list { padding: 11px 20px 19px; }
.revision-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.revision-item:last-child { border: 0; }
.revision-item strong { font-size: 9px; }
.revision-item small { display: block; color: var(--muted); font-size: 8px; }
.revision-item > span { color: var(--primary); font-size: 9px; font-weight: 700; }
.platform-data-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 20px 20px; }
.platform-data-cell { padding: 11px 14px; border-right: 1px solid var(--line); }
.platform-data-cell:last-child { border: 0; }
.platform-data-cell header { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.platform-data-cell header i { display: grid; width: 23px; height: 23px; place-items: center; color: white; border-radius: 6px; font-size: 7px; font-style: normal; font-weight: 800; }
.platform-data-cell header strong { font-size: 9px; }
.platform-data-row { display: flex; justify-content: space-between; margin: 6px 0; color: var(--muted); font-size: 8px; }
.platform-data-row b { color: var(--ink); font-size: 9px; }

/* Operations command center */
.operation-heading { margin-bottom: 18px; }
.operation-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.operation-global-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 11px 13px; }
.operation-global-title { display: flex; min-width: 190px; align-items: center; gap: 10px; }
.operation-global-title strong, .operation-global-title small { display: block; }
.operation-global-title strong { font-size: 10px; }
.operation-global-title small { overflow: hidden; max-width: 280px; margin-top: 2px; color: var(--muted); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.operation-global-filters { display: flex; min-width: 0; flex: 1; align-items: flex-end; justify-content: flex-end; gap: 7px; }
.operation-global-filters label { min-width: 112px; }
.operation-global-filters label span { display: block; margin: 0 0 3px 2px; color: var(--muted-2); font-size: 7px; }
.operation-global-filters select { width: 100%; height: 32px; padding: 0 25px 0 8px; color: #56596c; border: 1px solid var(--line); border-radius: 8px; outline: none; background: white; font-size: 8px; }
.operation-global-filters select:focus { border-color: #9b90ee; box-shadow: 0 0 0 3px rgb(103 87 232 / 8%); }
.operation-global-filters .text-button { min-height: 32px; padding: 0 7px; white-space: nowrap; }
.operation-tabs { position: sticky; top: calc(var(--topbar-height) + 10px); z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 15px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / 92%); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.operation-tabs button { position: relative; display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: var(--muted); border-radius: 9px; background: transparent; font-size: 10px; font-weight: 650; transition: .16s ease; }
.operation-tabs button:hover { color: var(--ink); background: var(--surface-soft); }
.operation-tabs button.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgb(103 87 232 / 7%); }
.operation-tabs svg { width: 15px; }
.operation-tabs em { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; color: var(--red); border-radius: 9px; background: var(--red-soft); font-size: 8px; font-style: normal; }
.operation-panel { display: none; animation: pageIn .22s ease; }
.operation-panel.active { display: block; }
.operation-planner-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); align-items: start; gap: 14px; }
.operation-form, .operation-plan-card { min-width: 0; padding: 20px; }
.operation-plan-card { position: sticky; top: calc(var(--topbar-height) + 67px); }
.operation-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.operation-card-heading > div { display: flex; min-width: 0; align-items: flex-start; gap: 11px; }
.operation-card-heading h2 { margin: 0; font-size: 14px; line-height: 1.35; }
.operation-card-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.operation-step { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--primary); border-radius: 10px; background: var(--primary-soft); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.ai-live-pill, .plan-state { display: inline-flex; min-height: 25px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 8px; color: var(--green); border: 1px solid #cdeee1; border-radius: 15px; background: var(--green-soft); font-size: 8px; font-weight: 700; white-space: nowrap; }
.ai-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(28 166 111 / 9%); animation: pulse 1.8s infinite; }
.plan-state { color: var(--muted); border-color: var(--line); background: var(--surface-soft); }
.plan-state.ready { color: var(--green); border-color: #cdeee1; background: var(--green-soft); }
.plan-state.analyzing { color: var(--primary); border-color: #ddd7ff; background: var(--primary-soft); }
.plan-state.analyzing::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--primary); animation: pulse .8s infinite; }
.operation-objective { margin-bottom: 16px; }
.operation-objective textarea { min-height: 116px; font-size: 12px; line-height: 1.65; }
.operation-objective > small { text-align: right; }
.operation-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.operation-form-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.operation-ip-profile { margin: -2px 0 16px; padding: 13px; border: 1px solid #ddd8fb; border-radius: 11px; background: linear-gradient(145deg, #fdfcff, #f7f5ff); }
.operation-ip-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.operation-ip-profile-head > div { min-width: 0; }
.profile-kicker, .operation-ip-profile-head strong { display: block; }
.profile-kicker { color: var(--primary); font-size: 7px; font-weight: 750; letter-spacing: .08em; }
.operation-ip-profile-head strong { overflow: hidden; margin-top: 2px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.operation-ip-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.operation-ip-profile-grid > div { min-width: 0; padding: 8px 9px; border: 1px solid rgb(103 87 232 / 9%); border-radius: 8px; background: rgb(255 255 255 / 68%); }
.operation-ip-profile-grid span { color: var(--muted-2); font-size: 7px; }
.operation-ip-profile-grid p { display: -webkit-box; overflow: hidden; min-height: 24px; margin: 3px 0 0; color: #55586c; font-size: 8px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.operation-ip-profile > small { display: block; margin-top: 8px; color: var(--muted); font-size: 7px; }
.scope-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.scope-switch label { cursor: pointer; }
.scope-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scope-switch span { display: grid; min-height: 34px; place-items: center; color: var(--muted); border-radius: 7px; font-size: 9px; font-weight: 650; transition: .15s ease; }
.scope-switch input:checked + span { color: var(--ink); background: white; box-shadow: 0 2px 8px rgb(20 22 42 / 8%); }
.operation-fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.operation-fieldset legend, .fieldset-title { color: #4e5164; font-size: 10px; font-weight: 650; }
.fieldset-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fieldset-title legend { padding: 0; }
.operation-fieldset > legend { margin-bottom: 8px; padding: 0; }
.operation-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.operation-mode-card { position: relative; display: grid; min-width: 0; grid-template-columns: 31px minmax(0, 1fr) 15px; align-items: center; gap: 8px; padding: 11px; cursor: pointer; border: 1px solid var(--line); border-radius: 11px; background: white; transition: .16s ease; }
.operation-mode-card:hover { border-color: #d7d2f4; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.operation-mode-card.active { border-color: #bcb2f7; background: linear-gradient(145deg, #fff, #f8f6ff); box-shadow: 0 8px 22px rgb(80 65 190 / 8%); }
.operation-mode-card > input { position: absolute; opacity: 0; pointer-events: none; }
.operation-mode-card > span:nth-of-type(2) { min-width: 0; }
.operation-mode-card strong, .operation-mode-card small { display: block; }
.operation-mode-card strong { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.operation-mode-card small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.operation-mode-card > i { display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }
.operation-mode-card.active > i { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px white; }
.mode-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; }
.mode-icon svg { width: 15px; }
.mode-icon.purple { color: var(--primary); background: var(--primary-soft); }
.mode-icon.blue { color: var(--blue); background: #eaf2ff; }
.mode-icon.green { color: var(--green); background: var(--green-soft); }
.operation-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.operation-target-card { position: relative; display: grid; min-width: 0; grid-template-columns: 31px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 9px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: white; transition: .15s ease; }
.operation-target-card:hover { border-color: #d3cee9; background: #fdfdff; }
.operation-target-card.selected { border-color: #bdb4f5; background: var(--primary-soft); }
.operation-target-card input { position: absolute; opacity: 0; pointer-events: none; }
.operation-target-card .store-avatar { width: 31px; height: 31px; font-size: 10px; }
.operation-target-card > span:nth-of-type(2) { min-width: 0; }
.operation-target-card strong, .operation-target-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.operation-target-card strong { font-size: 9px; }
.operation-target-card small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.operation-target-card > i { display: grid; width: 17px; height: 17px; place-items: center; color: transparent; border: 1px solid var(--line-strong); border-radius: 50%; background: white; }
.operation-target-card > i svg { width: 10px; }
.operation-target-card.selected > i { color: white; border-color: var(--primary); background: var(--primary); }
.operation-inline-loading { grid-column: 1 / -1; display: block; padding: 20px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-soft); font-size: 9px; }
.field-help { display: block; margin-top: 7px; color: var(--muted-2); font-size: 8px; }
.operation-platform-list { display: flex; flex-wrap: wrap; gap: 7px; }
.operation-platform-chip { position: relative; display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 10px 0 7px; cursor: pointer; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 9px; font-weight: 650; transition: .15s ease; }
.operation-platform-chip:hover { border-color: color-mix(in srgb, var(--platform-color), #fff 55%); }
.operation-platform-chip.selected { color: var(--ink); border-color: color-mix(in srgb, var(--platform-color), #fff 48%); background: color-mix(in srgb, var(--platform-color), #fff 94%); }
.operation-platform-chip input { position: absolute; opacity: 0; pointer-events: none; }
.operation-platform-chip > i { display: grid; width: 22px; height: 22px; place-items: center; color: white; border-radius: 6px; background: var(--platform-color); font-size: 7px; font-style: normal; }
.operation-platform-chip > svg { display: none; width: 11px; color: var(--platform-color); }
.operation-platform-chip.selected > svg { display: block; }
.operation-publish-package { padding: 14px; border: 1px solid #cfe9df; border-radius: 12px; background: linear-gradient(145deg, #fff, #f5fbf8); }
.publish-package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.publish-package-head legend { margin: 0 0 2px !important; }
.publish-package-head small { display: block; color: var(--muted); font-size: 8px; }
.publish-package-head > span { display: inline-flex; min-height: 25px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 8px; color: var(--green); border-radius: 14px; background: var(--green-soft); font-size: 7px; font-weight: 700; }
.publish-package-head > span svg { width: 12px; }
.operation-publish-package > .field { margin-bottom: 12px; }
.operation-publish-package > .field:last-child { margin-bottom: 0; }
.operation-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.operation-ai-button { min-width: 190px; }
.button:disabled { cursor: not-allowed; opacity: .6; transform: none !important; }
.button-loader { width: 13px; height: 13px; border: 2px solid rgb(255 255 255 / 38%); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }

.operation-plan-placeholder { display: grid; min-height: 455px; place-content: center; padding: 38px 24px; text-align: center; border: 1px dashed #dcd7f6; border-radius: 13px; background: radial-gradient(circle at 50% 22%, rgb(103 87 232 / 8%), transparent 26%), linear-gradient(145deg, #fff, #faf9ff); }
.operation-plan-placeholder .assistant-orb { margin: 0 auto; }
.operation-plan-placeholder h3 { margin: 15px 0 6px; font-size: 13px; }
.operation-plan-placeholder p { max-width: 330px; margin: 0 auto; color: var(--muted); font-size: 9px; line-height: 1.65; }
.operation-plan-placeholder > div { display: flex; justify-content: center; gap: 5px; margin-top: 17px; }
.operation-plan-placeholder > div span { padding: 5px 7px; color: var(--primary); border-radius: 7px; background: var(--primary-soft); font-size: 7px; font-weight: 650; }
.operation-plan-content { display: grid; gap: 13px; }
.plan-campaign { padding: 15px; color: white; border-radius: 13px; background: radial-gradient(circle at 100% 0, rgb(139 122 255 / 38%), transparent 42%), #1b1d32; }
.plan-campaign > span { color: #9d93ee; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.plan-campaign h3 { margin: 7px 0 5px; font-size: 14px; line-height: 1.35; }
.plan-campaign p { margin: 0; color: #9da0b5; font-size: 8px; line-height: 1.6; }
.plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.plan-facts > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.plan-facts span, .plan-facts strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plan-facts span { color: var(--muted); font-size: 7px; }
.plan-facts strong { margin-top: 3px; font-size: 9px; }
.plan-section { padding-top: 3px; }
.plan-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.plan-section-title strong { font-size: 9px; }
.plan-section-title span { color: var(--muted); font-size: 7px; }
.plan-task-list, .plan-risk-list { display: grid; gap: 6px; }
.plan-task-item { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.plan-task-item > span { display: grid; width: 23px; height: 23px; place-items: center; color: var(--primary); border-radius: 7px; background: var(--primary-soft); font-size: 7px; font-weight: 800; }
.plan-task-item div { min-width: 0; }
.plan-task-item strong, .plan-task-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plan-task-item strong { font-size: 8px; }
.plan-task-item small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.plan-task-item em { padding: 3px 6px; color: var(--primary); border-radius: 7px; background: var(--primary-soft); font-size: 7px; font-style: normal; }
.plan-risk-item { display: flex; align-items: flex-start; gap: 7px; color: #5b5e72; font-size: 8px; line-height: 1.5; }
.plan-risk-item svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; color: var(--green); }
.plan-dispatch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 12px; border: 1px solid #dcd6ff; border-radius: 11px; background: linear-gradient(145deg, #fbfaff, #f4f1ff); }
.plan-dispatch > div { min-width: 0; }
.plan-dispatch strong, .plan-dispatch small { display: block; }
.plan-dispatch strong { font-size: 9px; }
.plan-dispatch small { margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.4; }
.plan-dispatch .button { flex: 0 0 auto; }

.operation-campaigns-card { margin-top: 14px; overflow: hidden; }
.operation-campaign-list { padding: 10px 14px 14px; }
.operation-campaign-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 32px; align-items: center; gap: 11px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.operation-campaign-row:last-child { border-bottom: 0; }
.operation-campaign-row:hover { background: #fafafe; }
.campaign-ip { display: grid; width: 36px; height: 36px; place-items: center; color: #ddd8ff; border-radius: 10px; background: linear-gradient(145deg, #33364f, #202338); font-size: 8px; font-weight: 750; }
.campaign-main { min-width: 0; }
.campaign-main > div { display: flex; align-items: center; gap: 7px; }
.campaign-main strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.campaign-main > p { overflow: hidden; margin: 3px 0 7px; color: var(--muted); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.campaign-progress { display: flex; align-items: center; gap: 8px; }
.campaign-progress > i { width: min(180px, 45%); height: 4px; overflow: hidden; border-radius: 5px; background: #ececf3; }
.campaign-progress > i span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #8f82f8); }
.campaign-progress small { color: var(--muted-2); font-size: 7px; }
.campaign-meta { min-width: 75px; text-align: right; }
.campaign-meta strong, .campaign-meta small { display: block; }
.campaign-meta strong { font-size: 9px; }
.campaign-meta small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.operation-mode-badge { display: inline-flex; align-items: center; padding: 3px 6px; color: var(--primary); border-radius: 7px; background: var(--primary-soft); font-size: 7px; font-weight: 700; white-space: nowrap; }
.operation-mode-badge.collect { color: var(--blue); background: #eaf2ff; }
.operation-mode-badge.publish { color: var(--green); background: var(--green-soft); }

.operation-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 6px 0 14px; }
.operation-board-head h2 { margin: 0; font-size: 16px; }
.operation-board-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.board-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 8px; }
.board-legend span { display: flex; align-items: center; gap: 5px; }
.board-legend i { width: 7px; height: 7px; border-radius: 50%; background: #9b9dac; }
.board-legend i.distributed { background: #9a9cad; }
.board-legend i.accepted { background: var(--blue); }
.board-legend i.in-progress { background: var(--orange); }
.board-legend i.completed { background: var(--green); }
.operation-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 10px; overflow-x: auto; padding: 1px 1px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.operation-board-column { min-height: 470px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #f7f7fa; scroll-snap-align: start; }
.operation-board-column > header { padding: 3px 3px 10px; }
.operation-board-column > header > div { display: flex; align-items: center; gap: 7px; }
.operation-board-column > header i { width: 8px; height: 8px; border-radius: 50%; background: #9a9cad; }
.operation-board-column.accepted > header i { background: var(--blue); }
.operation-board-column.in_progress > header i { background: var(--orange); }
.operation-board-column.completed > header i { background: var(--green); }
.operation-board-column > header strong { font-size: 10px; }
.operation-board-column > header span { display: grid; min-width: 18px; height: 18px; place-items: center; color: var(--muted); border-radius: 9px; background: white; font-size: 7px; }
.operation-board-column > header small { display: block; margin: 3px 0 0 15px; color: var(--muted-2); font-size: 7px; }
.operation-board-list { display: grid; align-content: start; gap: 8px; }
.operation-task-card { padding: 11px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 2px 8px rgb(20 22 42 / 3%); transition: .16s ease; }
.operation-task-card:hover { border-color: #cfc9ee; transform: translateY(-1px); box-shadow: 0 8px 20px rgb(20 22 42 / 8%); }
.operation-task-top { display: flex; align-items: center; justify-content: space-between; }
.task-priority { color: var(--muted-2); font-size: 7px; }
.task-priority.high { color: var(--red); }
.operation-task-card h3 { margin: 9px 0 4px; font-size: 10px; line-height: 1.4; }
.operation-task-card > p { display: -webkit-box; overflow: hidden; min-height: 25px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.operation-task-platforms { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0; }
.operation-task-platforms span { padding: 3px 5px; color: #606377; border-radius: 5px; background: var(--surface-soft); font-size: 7px; }
.operation-task-progress { display: grid; grid-template-columns: minmax(0, 1fr) 25px; align-items: center; gap: 7px; }
.operation-task-progress > i { height: 4px; overflow: hidden; border-radius: 5px; background: #ececf3; }
.operation-task-progress > i span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.operation-task-progress small { color: var(--muted); text-align: right; font-size: 7px; }
.operation-task-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; color: var(--muted-2); border-top: 1px solid var(--line); font-size: 7px; }
.operation-task-card footer span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-empty { display: grid; min-height: 118px; place-items: center; color: var(--muted-2); border: 1px dashed var(--line-strong); border-radius: 9px; background: rgb(255 255 255 / 45%); font-size: 8px; }

.operation-exception-card, .operation-reserve-card { min-height: 360px; overflow: hidden; }
.operation-exception-list { padding: 10px 16px 16px; }
.operation-exception-item { display: grid; grid-template-columns: 35px minmax(0, 1fr) minmax(220px, .48fr); align-items: start; gap: 12px; padding: 14px 5px; border-bottom: 1px solid var(--line); }
.operation-exception-item:last-child { border-bottom: 0; }
.exception-icon { display: grid; width: 35px; height: 35px; place-items: center; color: var(--orange); border-radius: 10px; background: var(--orange-soft); }
.operation-exception-item.high .exception-icon { color: var(--red); background: var(--red-soft); }
.exception-icon svg { width: 16px; }
.exception-copy { min-width: 0; }
.exception-copy > div { display: flex; align-items: center; gap: 7px; }
.exception-copy > div span { padding: 3px 6px; color: var(--orange); border-radius: 6px; background: var(--orange-soft); font-size: 7px; font-weight: 700; }
.operation-exception-item.high .exception-copy > div span { color: var(--red); background: var(--red-soft); }
.exception-copy strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.exception-copy p { margin: 5px 0 4px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.exception-copy small { color: var(--muted-2); font-size: 7px; }
.exception-action { padding: 10px; border-radius: 9px; background: var(--surface-soft); }
.exception-action > span { color: var(--primary); font-size: 7px; font-weight: 750; }
.exception-action p { margin: 4px 0 7px; color: #5d6074; font-size: 8px; line-height: 1.5; }
.operation-success-state { display: flex; min-height: 250px; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.operation-success-state > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--green); border-radius: 13px; background: var(--green-soft); }
.operation-success-state svg { width: 20px; }
.operation-success-state strong { display: block; font-size: 11px; }
.operation-success-state p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }

.operation-reserve-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 14px 18px 18px; }
.operation-reserve-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow-sm); }
.reserve-preview { position: relative; display: grid; aspect-ratio: 16 / 8.5; overflow: hidden; place-items: center; color: white; background: radial-gradient(circle at 75% 20%, rgb(255 255 255 / 18%), transparent 28%), linear-gradient(145deg, color-mix(in srgb, var(--reserve-color), #fff 10%), color-mix(in srgb, var(--reserve-color), #000 25%)); }
.reserve-preview::after { position: absolute; width: 90px; height: 90px; right: -30px; bottom: -45px; content: ""; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; box-shadow: 0 0 0 17px rgb(255 255 255 / 4%); }
.reserve-preview img { width: 100%; height: 100%; object-fit: cover; }
.reserve-preview > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 12px; background: rgb(255 255 255 / 9%); }
.reserve-preview > span svg { width: 20px; }
.reserve-preview em { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 3px 6px; border-radius: 7px; background: rgb(25 27 49 / 72%); font-size: 7px; font-style: normal; backdrop-filter: blur(8px); }
.reserve-preview em.ready { color: #d4cfff; }
.reserve-preview em.published { color: #a9ead5; }
.reserve-preview > strong { position: absolute; z-index: 1; right: 10px; bottom: 8px; font-size: 8px; }
.reserve-copy { padding: 12px; }
.reserve-copy > span { color: var(--primary); font-size: 7px; font-weight: 750; }
.reserve-copy h3 { overflow: hidden; margin: 4px 0 3px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.reserve-copy > p { margin: 0; color: var(--muted); font-size: 7px; }
.reserve-copy > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.reserve-copy > div small { padding: 3px 5px; color: #5e6175; border-radius: 5px; background: var(--surface-soft); font-size: 7px; }
.reserve-copy footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.reserve-copy time { color: var(--muted-2); font-size: 7px; }

.operation-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 5px 0 14px; }
.operation-section-head h2 { margin: 3px 0 0; font-size: 17px; }
.operation-section-head p { max-width: 680px; margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.ai-insight-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; padding: 15px 17px; overflow: hidden; background: radial-gradient(circle at 78% 0%, rgb(103 87 232 / 10%), transparent 32%), white; }
.ai-insight-strip > div:first-child { display: flex; min-width: 0; align-items: center; gap: 11px; }
.ai-insight-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--primary); border-radius: 11px; background: var(--primary-soft); }
.ai-insight-icon svg { width: 18px; }
.ai-insight-strip strong { font-size: 11px; }
.ai-insight-strip p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.ai-insight-metrics { display: flex; flex: 0 0 auto; gap: 7px; }
.ai-insight-metrics span { min-width: 75px; padding: 8px 10px; text-align: center; border: 1px solid var(--line); border-radius: 9px; background: rgb(255 255 255 / 72%); }
.ai-insight-metrics strong, .ai-insight-metrics small { display: block; }
.ai-insight-metrics strong { color: var(--primary); font-size: 14px; }
.ai-insight-metrics small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.ai-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px; }
.ai-decision-card { min-width: 0; padding: 17px; border-color: #dedaf5; }
.ai-decision-card.is-adopted { border-color: #d4ebdf; background: linear-gradient(145deg, #fff, #f7fcf9); }
.ai-decision-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.decision-source { color: var(--primary); font-size: 7px; font-weight: 750; }
.ai-decision-card h3 { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.confidence-badge { padding: 4px 7px; color: var(--green); border-radius: 8px; background: var(--green-soft); font-size: 7px; font-weight: 750; white-space: nowrap; }
.decision-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 13px 0; }
.decision-evidence span { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.decision-evidence small, .decision-evidence strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.decision-evidence small { color: var(--muted); font-size: 7px; }
.decision-evidence strong { margin-top: 3px; font-size: 10px; }
.decision-goal { padding: 10px 11px; border-left: 3px solid var(--primary); border-radius: 8px; background: #f8f7ff; }
.decision-goal span, .decision-task-list > div > span { color: var(--primary); font-size: 7px; font-weight: 750; }
.decision-goal p { margin: 4px 0 0; color: #55586d; font-size: 9px; line-height: 1.55; }
.decision-task-list { display: grid; gap: 6px; margin-top: 12px; }
.decision-task-list > div { display: flex; align-items: center; justify-content: space-between; }
.decision-task-list > div small { color: var(--muted); font-size: 7px; }
.decision-task-list article { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; }
.decision-task-list article > i { display: grid; width: 29px; height: 29px; place-items: center; color: var(--primary); border-radius: 8px; background: var(--primary-soft); font-size: 7px; font-style: normal; font-weight: 750; }
.decision-task-list article div { min-width: 0; }
.decision-task-list article strong, .decision-task-list article small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.decision-task-list article strong { font-size: 8px; }
.decision-task-list article small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.decision-task-list article em { color: var(--muted); font-size: 7px; font-style: normal; white-space: nowrap; }
.decision-diff, .review-precheck, .automation-rules { margin-top: 11px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.decision-diff summary, .review-precheck summary, .automation-rules summary { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; cursor: pointer; list-style: none; font-size: 8px; font-weight: 650; }
.decision-diff summary::-webkit-details-marker, .review-precheck summary::-webkit-details-marker, .automation-rules summary::-webkit-details-marker { display: none; }
.decision-diff summary small, .review-precheck summary small, .automation-rules summary small { color: var(--muted); font-size: 7px; font-weight: 400; }
.decision-diff > div { display: grid; gap: 5px; padding: 0 9px 9px; }
.decision-diff article { padding: 7px; border-radius: 7px; background: var(--surface-soft); }
.decision-diff article strong { display: block; margin-bottom: 3px; font-size: 7px; }
.decision-diff article span { display: flex; align-items: center; gap: 5px; font-size: 7px; }
.decision-diff del { color: var(--muted); }
.decision-diff i { color: var(--primary); font-style: normal; }
.decision-diff ins { color: var(--green); text-decoration: none; }
.decision-refinement { display: flex; align-items: flex-start; gap: 5px; margin: 10px 0 0; color: #5c6076; font-size: 8px; line-height: 1.5; }
.decision-refinement svg { width: 12px; flex: 0 0 auto; color: var(--primary); }
.decision-refine-form { display: flex; align-items: flex-end; gap: 7px; margin-top: 10px; padding: 9px; border-radius: 9px; background: var(--primary-soft); }
.decision-refine-form label { min-width: 0; flex: 1; }
.decision-refine-form label span { display: block; margin-bottom: 4px; color: var(--primary); font-size: 7px; font-weight: 700; }
.decision-refine-form input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #cbc4f5; border-radius: 8px; outline: none; font-size: 8px; }
.ai-decision-card > footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.decision-adopted { display: flex; flex: 1; align-items: center; gap: 6px; color: var(--green); font-size: 8px; font-weight: 650; }
.decision-adopted svg { width: 13px; }

.managed-publish-banner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 13px; padding: 14px 16px; color: white; border: 0; background: radial-gradient(circle at 76% -30%, rgb(104 91 236 / 55%), transparent 38%), #1b1e34; }
.managed-publish-banner strong { font-size: 12px; }
.managed-publish-banner p { margin: 3px 0 0; color: #9ea3bc; font-size: 8px; line-height: 1.5; }
.review-publish-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); align-items: start; gap: 13px; }
.review-queue-card, .publication-control-card, .media-account-card { min-width: 0; overflow: hidden; }
.review-queue { display: grid; gap: 10px; padding: 12px 15px 16px; }
.review-item { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.review-item.has-risk { border-color: #ecd7bd; box-shadow: inset 3px 0 0 #e3a256; }
.review-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.review-item-head > div { min-width: 0; }
.review-item-head > div > strong, .review-item-head > div > small { display: block; }
.review-item-head > div > strong { overflow: hidden; margin-top: 6px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.review-item-head > div > small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.ai-score { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-content: center; color: var(--green); text-align: center; border-radius: 12px; background: var(--green-soft); font-size: 14px; font-weight: 800; }
.ai-score.warning { color: var(--orange); background: var(--orange-soft); }
.ai-score small { display: block; font-size: 6px; font-weight: 500; }
.review-platform-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 11px 0; }
.review-platform-preview { min-width: 0; }
.review-platform-preview > div { display: grid; aspect-ratio: 4 / 3; overflow: hidden; place-items: center; color: white; border-radius: 8px; background: radial-gradient(circle at 72% 18%, rgb(255 255 255 / 18%), transparent 27%), linear-gradient(145deg, color-mix(in srgb, var(--review-color), #fff 5%), color-mix(in srgb, var(--review-color), #000 30%)); }
.review-platform-preview img { width: 100%; height: 100%; object-fit: cover; }
.review-platform-preview > div span { font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.review-platform-preview > small { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 7px; }
.review-platform-preview > small i { display: grid; width: 17px; height: 17px; place-items: center; color: white; border-radius: 5px; font-size: 6px; font-style: normal; }
.review-copy { margin: 0; padding: 8px 9px; color: #5a5d71; border-radius: 8px; background: var(--surface-soft); font-size: 8px; line-height: 1.55; }
.review-precheck summary span { display: flex; align-items: center; gap: 5px; }
.review-precheck summary i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.review-precheck summary i.warning { background: var(--orange); }
.review-precheck summary i.error { background: var(--red); }
.review-precheck > div { display: grid; gap: 5px; padding: 0 9px 9px; }
.review-precheck p { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 7px; border-radius: 7px; font-size: 7px; line-height: 1.45; }
.review-precheck p.pass { color: #48675c; background: var(--green-soft); }
.review-precheck p.warning { color: #855d31; background: var(--orange-soft); }
.review-precheck p.error { color: #934c45; background: var(--red-soft); }
.review-precheck p svg { width: 11px; flex: 0 0 auto; }
.review-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.review-return-reasons { margin-top: 8px; padding: 9px; border-radius: 9px; background: var(--surface-soft); }
.review-return-reasons > span { color: var(--muted); font-size: 7px; }
.review-return-reasons > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.review-return-reasons button { padding: 5px 7px; color: #676a7c; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 7px; }
.review-return-reasons button:hover { color: var(--red); border-color: #e7c9c5; }
.review-finished { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 8px; }
.review-finished svg { width: 13px; }
.review-empty { min-height: 230px; }
.publication-calendar { display: grid; grid-template-columns: repeat(7, minmax(36px, 1fr)); gap: 4px; padding: 13px 14px 10px; }
.publication-day { display: grid; min-height: 63px; place-content: center; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.publication-day.today { border-color: #c9c1f5; background: var(--primary-soft); }
.publication-day.has-jobs { box-shadow: inset 0 -3px 0 var(--primary); }
.publication-day small, .publication-day span { color: var(--muted); font-size: 6px; }
.publication-day strong { margin: 2px 0; font-size: 11px; }
.publication-queue { display: grid; max-height: 405px; gap: 7px; overflow-y: auto; padding: 0 14px 14px; }
.publication-job { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.publication-job.failed { order: -1; border-color: #eed0cb; background: #fffafa; }
.publication-job > i { display: grid; width: 29px; height: 29px; place-items: center; color: white; border-radius: 8px; font-size: 7px; font-style: normal; font-weight: 800; }
.publication-job > div { min-width: 0; }
.publication-job > div > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; }
.publication-job strong { overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.publication-job p, .publication-job small { overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.publication-job small { display: block; color: var(--red); }
.automation-rules { margin: 0 14px 14px; }
.automation-rules summary span { display: flex; align-items: center; gap: 6px; }
.automation-rules summary svg { width: 13px; color: var(--primary); }
.automation-rules > div { padding: 0 10px 8px; }
.operation-reserve-card { margin-top: 13px; }
.operation-exception-card.embedded { min-height: 0; margin-top: 13px; }
.operation-exception-card.embedded .operation-success-state { min-height: 130px; }
.operation-exception-card.embedded + .operation-board { margin-top: 13px; }
.status-badge.muted { color: var(--muted); background: var(--surface-soft); }
.status-badge.muted::before { background: var(--muted-2); }

.operation-data-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.media-account-form { margin-bottom: 13px; padding: 18px; }
.media-account-list { padding: 10px 15px 15px; }
.media-account-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(220px, .5fr) auto; align-items: center; gap: 11px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.media-account-row:last-child { border-bottom: 0; }
.media-platform-logo { display: grid; width: 38px; height: 38px; place-items: center; color: white; border-radius: 10px; font-size: 9px; font-weight: 800; }
.media-account-main { min-width: 0; }
.media-account-main > div { display: flex; align-items: center; gap: 7px; }
.media-account-main strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.media-account-main p, .media-account-main small { overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.sync-health { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 7px; font-size: 7px; white-space: nowrap; }
.sync-health i { width: 5px; height: 5px; border-radius: 50%; }
.sync-health.healthy { color: var(--green); background: var(--green-soft); }
.sync-health.healthy i { background: var(--green); }
.sync-health.delayed { color: var(--orange); background: var(--orange-soft); }
.sync-health.delayed i { background: var(--orange); }
.sync-health.failed { color: var(--red); background: var(--red-soft); }
.sync-health.failed i { background: var(--red); }
.media-account-metrics { display: grid; grid-template-columns: repeat(3, minmax(60px, 1fr)); gap: 6px; }
.media-account-metrics span { min-width: 0; padding: 7px; text-align: center; border-radius: 8px; background: var(--surface-soft); }
.media-account-metrics strong, .media-account-metrics small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.media-account-metrics strong { font-size: 9px; }
.media-account-metrics small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.media-account-actions { display: grid; gap: 6px; }
.media-account-actions .button { min-width: 78px; }

.drawer-overlay { position: fixed; inset: 0; z-index: 70; visibility: hidden; background: rgb(15 17 32 / 25%); opacity: 0; transition: .22s; backdrop-filter: blur(2px); }
.drawer-overlay.open { visibility: visible; opacity: 1; }
.assistant-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; display: flex; width: min(460px, 100vw); flex-direction: column; background: white; box-shadow: -20px 0 60px rgb(20 22 42 / 18%); transform: translateX(105%); transition: transform .25s cubic-bezier(.22,.8,.32,1); }
.assistant-drawer.open { transform: translateX(0); }
.assistant-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.assistant-header > div { display: flex; align-items: center; gap: 10px; }
.assistant-header strong, .assistant-header small { display: block; }
.assistant-header strong { font-size: 13px; }
.assistant-header small { color: var(--muted); font-size: 8px; }
.assistant-body { flex: 1; overflow-y: auto; padding: 20px; background: #fafafe; }
.assistant-welcome { text-align: center; padding: 20px 7px 10px; }
.assistant-welcome h3 { margin: 13px 0 5px; font-size: 15px; }
.assistant-welcome p { max-width: 360px; margin: 0 auto; color: var(--muted); font-size: 9px; line-height: 1.7; }
.assistant-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; text-align: left; }
.assistant-suggestions button { padding: 10px; color: #5b5e72; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 9px; line-height: 1.45; }
.assistant-suggestions button:hover { color: var(--primary); border-color: #c8c0f7; }
.assistant-messages { display: grid; gap: 11px; padding-top: 10px; }
.assistant-message { max-width: 87%; padding: 10px 12px; border-radius: 12px; font-size: 10px; line-height: 1.65; }
.assistant-message.user { justify-self: end; color: white; border-bottom-right-radius: 4px; background: var(--primary); }
.assistant-message.ai { justify-self: start; color: #55586b; border: 1px solid var(--line); border-bottom-left-radius: 4px; background: white; }
.assistant-typing { display: flex; gap: 4px; padding: 12px; }
.assistant-typing i { width: 5px; height: 5px; border-radius: 50%; background: #aaa5d9; animation: typing 1s infinite; }
.assistant-typing i:nth-child(2) { animation-delay: .15s; }
.assistant-typing i:nth-child(3) { animation-delay: .3s; }
.assistant-result { margin-top: 13px; padding: 14px; border: 1px solid #dcd7fb; border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.result-head { display: flex; align-items: center; justify-content: space-between; }
.result-head span { display: flex; align-items: center; gap: 6px; color: var(--primary); font-size: 9px; font-weight: 700; }
.result-head svg { width: 14px; }
.result-head em { padding: 3px 6px; color: var(--orange); border-radius: 6px; background: var(--orange-soft); font-size: 7px; font-style: normal; }
.assistant-result h4 { margin: 13px 0 5px; font-size: 12px; }
.assistant-result > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.change-list { display: grid; gap: 7px; margin: 12px 0; }
.change-item { padding: 9px; border-radius: 8px; background: var(--surface-soft); }
.change-item strong { display: block; font-size: 9px; }
.change-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.assistant-result-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 11px; border-top: 1px solid var(--line); }
.assistant-composer { padding: 13px; border-top: 1px solid var(--line); background: white; }
.assistant-composer textarea { width: 100%; min-height: 63px; max-height: 140px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; resize: none; font-size: 10px; line-height: 1.5; }
.assistant-composer textarea:focus { border-color: #9b90ee; box-shadow: 0 0 0 3px rgb(103 87 232 / 9%); }
.assistant-composer > div { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.assistant-composer span { color: var(--muted-2); font-size: 8px; }
kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-soft); font-family: inherit; font-size: 7px; }
.assistant-composer button { display: grid; width: 31px; height: 31px; place-items: center; color: white; border-radius: 8px; background: var(--primary); }
.assistant-composer button:disabled { opacity: .5; cursor: wait; }
.assistant-composer button svg { width: 15px; }

.admin-ai-diagnostic { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 18px; }
.admin-ai-diagnostic.is-hidden { display: none; }
.admin-ai-diagnostic-scrim { position: absolute; inset: 0; border: 0; background: rgb(15 17 32 / 52%); backdrop-filter: blur(4px); }
.admin-ai-diagnostic > article { position: relative; z-index: 1; width: min(760px, 100%); max-height: calc(100vh - 36px); padding: 20px; overflow-y: auto; border-radius: 15px; background: #fff; box-shadow: 0 28px 90px rgb(18 20 40 / 30%); }
.admin-ai-diagnostic > article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-ai-diagnostic header small { color: #a24c5d; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.admin-ai-diagnostic h2 { margin: 5px 0 0; font-size: 18px; }
#admin-ai-diagnostic-summary { margin: 16px 0; padding: 11px 12px; color: #7e3f4d; border-radius: 8px; background: #fff2f4; font-size: 10px; line-height: 1.65; }
#admin-ai-diagnostic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
#admin-ai-diagnostic-grid div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbfd; }
#admin-ai-diagnostic-grid dt { color: var(--muted); font-size: 8px; }
#admin-ai-diagnostic-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #444758; font-size: 9px; line-height: 1.5; }
.admin-ai-diagnostic details { margin-top: 14px; border-top: 1px solid var(--line); }
.admin-ai-diagnostic summary { padding: 12px 0; color: #666a7c; cursor: pointer; font-size: 9px; }
.admin-ai-diagnostic pre { max-height: 330px; margin: 0; padding: 12px; overflow: auto; color: #e6e9f5; border-radius: 8px; background: #252838; font: 9px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-ai-diagnostic footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 720px) { #admin-ai-diagnostic-grid { grid-template-columns: 1fr; } .admin-ai-diagnostic { padding: 8px; } .admin-ai-diagnostic > article { max-height: calc(100vh - 16px); padding: 16px; } .admin-ai-diagnostic footer { display: grid; grid-template-columns: 1fr; } }

.modal-backdrop { position: fixed; inset: 0; z-index: 85; visibility: hidden; background: rgb(15 17 32 / 38%); opacity: 0; transition: .2s; backdrop-filter: blur(3px); }
.modal-backdrop.open { visibility: visible; opacity: 1; }
.modal { position: fixed; top: 50%; left: 50%; z-index: 90; width: min(590px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 24px 80px rgb(20 22 42 / 25%); transform: translate(-50%, -48%); animation: modalIn .2s ease forwards; }
.modal > header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.modal > header > div { display: flex; align-items: center; gap: 11px; }
.modal h2 { margin: 0; font-size: 14px; }
.modal header p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.modal form { display: flex; max-height: calc(100vh - 110px); flex-direction: column; }
.modal-content { display: grid; gap: 14px; overflow-y: auto; padding: 18px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fbfbfd; }
.template-modal-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--primary); border-radius: 10px; background: var(--primary-soft); }
.template-modal-icon svg { width: 18px; }
.template-zones { display: flex; flex-wrap: wrap; gap: 8px; }
.template-zones > span { width: 100%; color: #4e5164; font-size: 10px; font-weight: 600; }
.template-zones label { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.template-zones input { accent-color: var(--primary); }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 8px; pointer-events: none; }
.toast { display: grid; min-width: 260px; max-width: 380px; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow-md); animation: toastIn .22s ease; pointer-events: auto; }
.toast > i { display: grid; width: 25px; height: 25px; place-items: center; color: var(--green); border-radius: 7px; background: var(--green-soft); font-style: normal; }
.toast.error > i { color: var(--red); background: var(--red-soft); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 10px; }
.toast small { color: var(--muted); font-size: 8px; }
.mobile-overlay { display: none; }
.empty-state { grid-column: 1 / -1; padding: 55px 20px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: 13px; background: white; font-size: 10px; }

@keyframes pop { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
@keyframes modalIn { to { transform: translate(-50%, -50%); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes loader { 50% { transform: scale(.82) rotate(12deg); opacity: .55; } }
@keyframes typing { 50% { transform: translateY(-3px); opacity: .45; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(15px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1280px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); }
  .dashboard-grid .recent-card { grid-column: 1; }
  .dashboard-grid .channel-card { grid-column: 2; grid-row: 2; }
  .dashboard-grid .recommendations-card { grid-column: 2; grid-row: 1; }
  .dashboard-grid .chart-card { grid-column: 1; grid-row: 1; }
}

@media (max-width: 1180px) {
  .platform-grid, .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .platform-data-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-data-cell:nth-child(2) { border-right: 0; }
  .platform-data-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .operation-global-toolbar { align-items: flex-start; flex-direction: column; }
  .operation-global-filters { width: 100%; justify-content: flex-start; }
  .operation-global-filters label { flex: 1; }
  .media-account-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .media-account-metrics { grid-column: 2; grid-row: 2; }
  .media-account-actions { grid-column: 3; grid-row: 1 / span 2; }
  .visual-guideline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  :root { --sidebar-width: 216px; }
  .main-content { padding-inline: 22px; }
  .overview-hero { grid-template-columns: 1fr; }
  .health-panel { max-width: 380px; margin-top: 0; }
  .dashboard-grid, .analytics-layout, .analytics-bottom { grid-template-columns: 1fr; }
  .dashboard-grid .span-3 { grid-column: auto; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-config-grid, .range-layout { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operation-planner-grid { grid-template-columns: 1fr; }
  .operation-plan-card { position: static; }
  .operation-board { grid-template-columns: repeat(4, minmax(250px, 1fr)); }
  .operation-reserve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-plan-grid, .review-publish-grid { grid-template-columns: 1fr; }
  .publication-control-card { position: static; }
  .operation-data-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visual-upload-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .visual-upload-instruction { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --topbar-height: 64px; }
  .sidebar { width: min(280px, 86vw); transform: translateX(-105%); transition: transform .24s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .mobile-overlay { position: fixed; inset: 0; z-index: 35; display: block; visibility: hidden; background: rgb(15 17 32 / 30%); opacity: 0; transition: .22s; }
  .mobile-overlay.open { visibility: visible; opacity: 1; }
  .workspace { margin-left: 0; }
  .topbar { padding: 0 14px; }
  .menu-button { display: inline-flex !important; }
  .store-trigger { min-width: 0; }
  .store-trigger-copy small { display: none; }
  .store-trigger-copy strong { max-width: 150px; }
  .store-menu { position: fixed; top: 69px; right: 12px; left: 12px; width: auto; }
  .sync-status { display: none; }
  .ai-top-button span { display: none; }
  .ai-top-button { width: 36px; padding: 0; justify-content: center; }
  .main-content { padding: 23px 14px 60px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .heading-actions { width: 100%; }
  .heading-actions > .button { flex: 1; }
  .asset-upload-toolbar { align-items: stretch; flex-direction: column; }
  .asset-upload-toolbar label { justify-content: space-between; }
  .visual-dimension-grid, .visual-upload-fields { grid-template-columns: 1fr; }
  .visual-upload-instruction { grid-column: auto; }
  .visual-guideline-card { grid-template-columns: 104px minmax(0,1fr); }
  .visual-guideline-preview { min-height: 210px; }
  .visual-guideline-toolbar { align-items: flex-start; flex-direction: column; }
  .overview-hero { min-height: 0; }
  .hero-copy { padding: 23px 20px; }
  .hero-copy h2 { font-size: 20px; }
  .hero-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .health-panel { margin: 0 14px 14px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding: 14px; }
  .metric-card > strong { font-size: 20px; }
  .dashboard-grid { gap: 10px; }
  .page-heading p { font-size: 10px; }
  .form-grid, .toggle-grid { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: auto; }
  .form-card { padding: 16px; }
  .section-heading { margin-bottom: 15px; }
  .sticky-save { bottom: 9px; }
  .save-state { display: none; }
  .sticky-save .button { width: 100%; }
  .strategy-item { grid-template-columns: 31px minmax(0, 1fr) auto; }
  .strategy-item input:nth-of-type(2) { grid-column: 2 / -1; }
  .platform-grid, .knowledge-grid, .knowledge-summary-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-wrap: wrap; }
  .search-field { width: 100%; max-width: none; }
  .filter-chips { max-width: 100%; overflow-x: auto; }
  .toolbar-count { margin-left: 0; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-board { grid-template-columns: 1fr; }
  .period-switch { flex: 1; }
  .period-switch button { flex: 1; }
  .platform-data-table { grid-template-columns: 1fr; }
  .platform-data-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .platform-data-cell:last-child { border-bottom: 0; }
  .assistant-suggestions { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 20px); }
  .toast-region { right: 10px; bottom: 10px; left: 10px; }
  .toast { width: 100%; min-width: 0; max-width: none; }
  .operation-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .operation-global-filters { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-global-filters .text-button { justify-self: start; }
  .operation-tabs { top: calc(var(--topbar-height) + 7px); display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .operation-tabs button { min-width: max-content; flex: 1 0 auto; scroll-snap-align: start; }
  .operation-form, .operation-plan-card { padding: 16px; }
  .operation-form-grid.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-form-grid.thirds .field:last-child { grid-column: 1 / -1; }
  .operation-ip-profile-grid { grid-template-columns: 1fr; }
  .operation-mode-grid { grid-template-columns: 1fr; }
  .operation-mode-card { grid-template-columns: 34px minmax(0, 1fr) 17px; }
  .operation-target-grid { grid-template-columns: 1fr; }
  .operation-plan-placeholder { min-height: 340px; }
  .operation-campaign-row { grid-template-columns: 36px minmax(0, 1fr) 31px; }
  .campaign-meta { display: none; }
  .operation-board-head { align-items: flex-start; flex-direction: column; }
  .board-legend { justify-content: flex-start; }
  .operation-exception-item { grid-template-columns: 35px minmax(0, 1fr); }
  .exception-action { grid-column: 2; }
  .operation-reserve-grid { gap: 9px; padding: 12px; }
  .operation-section-head { align-items: flex-start; flex-direction: column; }
  .operation-section-head .button { width: 100%; }
  .ai-insight-strip { align-items: flex-start; flex-direction: column; }
  .ai-insight-metrics { width: 100%; }
  .ai-insight-metrics span { min-width: 0; flex: 1; }
  .managed-publish-banner { grid-template-columns: 38px minmax(0, 1fr); }
  .managed-publish-banner .status-pill { grid-column: 2; justify-self: start; }
  .review-platform-previews { overflow-x: auto; grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .publication-calendar { overflow-x: auto; grid-template-columns: repeat(7, minmax(48px, 1fr)); }
  .media-account-row { grid-template-columns: 35px minmax(0, 1fr); align-items: start; }
  .media-account-metrics { grid-column: 1 / -1; grid-row: auto; }
  .media-account-actions { display: grid; grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-account-actions .button { width: 100%; }
  button { min-width: 44px; min-height: 44px !important; font-size: 16px !important; }
  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]), select { min-height: 44px !important; font-size: 16px !important; }
  textarea { font-size: 16px !important; }
  .field { font-size: 14px; }
  .field small, .operation-global-filters label span, .decision-refine-form label span { font-size: 12px; }
  .operation-mode-card, .operation-target-card, .operation-platform-chip, .scope-switch label, .toggle-row { min-height: 44px; }
  .operation-mode-card strong, .operation-target-card strong, .operation-platform-chip, .scope-switch span { font-size: 16px !important; }
  .operation-mode-card small, .operation-target-card small { font-size: 12px; }
}

@media (max-width: 440px) {
  .store-trigger-copy strong { max-width: 105px; }
  .page-heading h1 { font-size: 24px; }
  .heading-actions { flex-wrap: wrap; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-head span:first-child { font-size: 9px; }
  .brand-completeness { grid-template-columns: auto minmax(0, 1fr); }
  .brand-completeness .compact-button { display: none; }
  .segmented-tabs button { padding-inline: 5px; font-size: 10px; }
  .template-grid { grid-template-columns: 1fr; }
  .template-preview { aspect-ratio: 16 / 9; }
  .template-canvas { width: 32%; }
  .health-panel { align-items: flex-start; flex-direction: column; }
  .health-ring { width: 80px; height: 80px; }
  .operation-summary-grid .metric-card { min-height: 108px; }
  .operation-form, .operation-plan-card { padding: 14px; }
  .operation-card-heading { align-items: flex-start; }
  .ai-live-pill { display: none; }
  .operation-form-grid, .operation-form-grid.thirds { grid-template-columns: 1fr; }
  .operation-form-grid.thirds .field:last-child { grid-column: auto; }
  .operation-ip-profile-head, .publish-package-head { align-items: flex-start; flex-direction: column; }
  .scope-switch span { font-size: 16px; }
  .operation-platform-chip { flex: 1 1 calc(50% - 4px); justify-content: flex-start; }
  .operation-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .operation-form-actions .button, .operation-ai-button { width: 100%; }
  .operation-plan-placeholder > div { align-items: center; flex-direction: column; }
  .plan-facts { grid-template-columns: 1fr; }
  .plan-dispatch { align-items: stretch; flex-direction: column; }
  .plan-dispatch .button { width: 100%; }
  .operation-campaign-row { grid-template-columns: 33px minmax(0, 1fr); gap: 9px; }
  .operation-campaign-row > .icon-button { display: none; }
  .campaign-ip { width: 33px; height: 33px; }
  .campaign-main > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .campaign-progress { align-items: flex-start; flex-direction: column; gap: 4px; }
  .campaign-progress > i { width: 100%; }
  .operation-exception-card .card-heading { align-items: flex-start; flex-direction: column; }
  .operation-exception-item { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .exception-icon { width: 30px; height: 30px; }
  .exception-copy > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .exception-action { grid-column: 1 / -1; }
  .operation-reserve-card .card-heading { align-items: flex-start; flex-direction: column; }
  .operation-reserve-grid { grid-template-columns: 1fr; }
  .operation-global-title { min-width: 0; }
  .operation-global-filters { grid-template-columns: 1fr; }
  .operation-global-filters label { width: 100%; }
  .operation-data-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .decision-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-refine-form, .ai-decision-card > footer { align-items: stretch; flex-direction: column; }
  .decision-refine-form .button, .ai-decision-card > footer .button { width: 100%; }
  .managed-publish-banner { grid-template-columns: 1fr; text-align: center; }
  .managed-publish-banner .assistant-orb, .managed-publish-banner .status-pill { grid-column: auto; justify-self: center; }
  .review-actions { align-items: stretch; flex-direction: column-reverse; }
  .review-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}