/* * FONEONA Seller — Canon v2 * Reference: Main Board / Marketing / Plan / Promotions / Market / SKU 360. * This file is intentionally additive: existing IDs and data bindings stay intact. */ :root { --bg-app: #f6f7fb; --bg-surface: #fff; --bg-surface-soft: #fafbff; --bg-sidebar: #0b1020; --bg-sidebar-top: #10172b; --bg-sidebar-hover: #151e34; --bg-sidebar-active: #1b2540; --border-default: #e8eaf2; --border-soft: #eef0f6; --border-strong: #d9ddea; --text-primary: #1e2430; --text-secondary: #667085; --text-tertiary: #98a2b3; --text-on-dark: #f8fafc; --text-on-dark-secondary: #b6c0d4; --brand-50: #f3eeff; --brand-100: #e9deff; --brand-200: #d6c2ff; --brand-300: #bda0ff; --brand-400: #9f7cff; --brand-500: #7c5cfa; --brand-600: #6e4ef1; --brand-700: #5f43d2; --brand-800: #4e37b0; --success-50: #ecfdf3; --success-100: #d1fadf; --success-500: #12b76a; --success-600: #039855; --success-700: #027a48; --warning-50: #fff7ed; --warning-100: #ffedd5; --warning-500: #f79009; --warning-600: #ea580c; --warning-700: #c2410c; --danger-50: #fef3f2; --danger-100: #fee4e2; --danger-500: #f04438; --danger-600: #d92d20; --danger-700: #b42318; --info-50: #eff8ff; --info-100: #d1e9ff; --info-500: #2e90fa; --info-600: #1570ef; --info-700: #175cd3; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.04); --shadow-float: 0 10px 30px rgba(16,24,40,.08); --success: #12b76a; --warning: #f79009; --danger: #f04438; --info: #2e90fa; --v2-canvas: #f6f7fb; --v2-surface: #ffffff; --v2-surface-soft: #fbfbfd; --v2-ink: #1e2430; --v2-ink-soft: #667085; --v2-muted: #98a2b3; --v2-line: #eef0f6; --v2-line-strong: #e8eaf2; --v2-purple: var(--brand-500); --v2-purple-dark: var(--brand-600); --v2-purple-soft: #f1edff; --v2-green: var(--success); --v2-green-soft: #eaf8f2; --v2-blue: var(--info); --v2-blue-soft: #edf4ff; --v2-orange: var(--warning); --v2-orange-soft: #fff4e8; --v2-red: var(--danger); --v2-red-soft: #fff0f1; --v2-sidebar: #0b1020; --v2-sidebar-2: #0e1521; --v2-radius-sm: 10px; --v2-radius-md: 18px; --v2-radius-lg: 22px; --v2-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.04); --v2-ease: cubic-bezier(.2, .8, .2, 1); /* compatibility aliases: legacy components inherit the canonical system */ --bg: var(--v2-canvas); --surface: var(--v2-surface); --ink: var(--v2-ink); --muted: var(--v2-muted); --line: var(--v2-line); --purple: var(--v2-purple); --purple-dark: var(--v2-purple-dark); --green: var(--v2-green); --blue: var(--v2-blue); --orange: var(--v2-orange); --red: var(--v2-red); --radius: var(--v2-radius-lg); --shadow: var(--v2-shadow); } html { background: var(--v2-canvas); } body { color: var(--v2-ink); background: radial-gradient(circle at 68% -15%, rgba(108, 79, 248, .045), transparent 34rem), var(--v2-canvas); font-family: Onest, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; } body.public-home.workspace-open { font-family: Onest, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .sidebar { width: 248px; padding: 22px 14px 16px; background: linear-gradient(180deg, var(--v2-sidebar), #070c14 68%, var(--v2-sidebar-2)); border-right: 1px solid rgba(255, 255, 255, .045); } .main { margin-left: 248px; width: calc(100% - 248px); } .brand { padding: 0 8px 22px; } .brand-mark { border-radius: 50%; } .nav { gap: 3px; } .nav-label { padding: 12px 10px 4px; font-size: 9px; color: #687386; } .nav-item { min-height: 39px; padding: 9px 10px; border-radius: 9px; color: #c6ccd7; font-size: 11px; transition: color .16s var(--v2-ease), background .16s var(--v2-ease), transform .16s var(--v2-ease); } .nav-item:hover { background: rgba(255,255,255,.06); transform: translateX(1px); } .nav-item.active { color: #fff; background: linear-gradient(135deg, rgba(108,79,248,.9), rgba(82,54,207,.88)); box-shadow: 0 7px 22px rgba(74, 48, 190, .25); } .nav-item.active span { color: #fff; } .topbar { height: 72px; padding: 0 clamp(20px, 2.35vw, 38px); background: rgba(255, 255, 255, .88); border-color: var(--v2-line); backdrop-filter: blur(18px) saturate(1.2); } .topbar h1 { font-size: clamp(20px, 1.55vw, 25px); font-weight: 750; } .view { padding: 24px clamp(20px, 2.35vw, 38px) 48px; } .view.active { animation: v2-enter .28s var(--v2-ease); } @keyframes v2-enter { from { opacity: 0; transform: translateY(6px); } } .panel, .table-panel, .metric-card, .dashboard-command-grid article, .dashboard-decision-line, .action-center { border-color: var(--v2-line); border-radius: var(--v2-radius-md); box-shadow: var(--v2-shadow); } .panel { padding: 18px; } .panel-head h3, .section-heading h2, .page-intro h2 { color: var(--v2-ink); font-weight: 750; letter-spacing: -.035em; } .section-heading h2, .page-intro h2 { font-size: 18px; } .panel-head h3 { font-size: 13px; } .panel-head p, .section-heading p, .page-intro p { color: var(--v2-muted); } .primary-button { background: linear-gradient(135deg, #795dff, var(--v2-purple-dark)); border-radius: var(--v2-radius-sm); box-shadow: 0 8px 20px rgba(91, 58, 222, .22); transition: transform .16s var(--v2-ease), box-shadow .16s var(--v2-ease); } /* Canonical Lucide treatment: one rounded outline language, no text glyph icons. */ .nav-icon svg,.topbar svg,.ds-icon,.task-icon svg,.rule-icon svg,.upload-card>span svg,.mobile-bottom-nav svg,.mobile-result-list svg,.ads-marketing-alert svg,.ads-chart-readiness svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .nav-icon svg { width: 18px; height: 18px; } .sidebar .nav-icon svg { width: 20px; height: 20px; } .ds-icon { width: 24px; height: 24px; } .task-icon svg { width: 18px; height: 18px; } .inline-ds-icon { display: inline-flex; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--success-600); } .inline-ds-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .rule-icon svg { width: 18px; height: 18px; } .upload-card>span svg { width: 20px; height: 20px; } .mobile-bottom-nav svg { width: 20px; height: 20px; } .mobile-result-list svg { width: 24px; height: 24px; } .ads-marketing-alert svg,.ads-chart-readiness svg { width: 18px; height: 18px; } .task-icon { font-size: 0; } .primary-button:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(91,58,222,.28); } .secondary-button, .filter-button, .icon-button { border-color: var(--v2-line-strong); } .icon-button > svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle} .segmented { background: #f1f2f6; border: 1px solid var(--v2-line); } .segmented button.active { color: var(--v2-purple); } /* Main Board: canonical 1/3 outcome card + 2/3 commercial command deck. */ .dashboard-outcome-row { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(560px, 1.9fr); gap: 12px; align-items: stretch; } .dashboard-hero { min-height: 174px; padding: 22px; color: #fff; background: radial-gradient(circle at 94% 18%, rgba(255,255,255,.3), transparent 30%), linear-gradient(145deg, #9b86ff, #7657f7 58%, #6647e9); overflow: hidden; } .dashboard-hero .eyebrow, .dashboard-hero-copy p { color: rgba(255,255,255,.78); } .dashboard-hero-copy > strong { font-size: clamp(27px, 2.35vw, 38px); letter-spacing: -.05em; } .dashboard-command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); box-shadow: var(--v2-shadow); overflow: hidden; } .dashboard-command-grid article { min-height: 174px; padding: 22px 17px; border: 0; border-right: 1px solid var(--v2-line); border-radius: 0; box-shadow: none; } .dashboard-command-grid article:last-child { border-right: 0; } .dashboard-command-grid strong { font-size: clamp(20px, 1.65vw, 27px); } .dashboard-attention-strip { margin: 12px 0 18px; border-color: #f1d9ba; background: linear-gradient(90deg, #fff8ef, #fffdf9); } .dashboard-grid { gap: 12px; } .metrics-grid { gap: 10px; } .metric-card { min-height: 116px; padding: 16px; } .metric-card > strong { font-size: 21px; } .status.green, .positive { color: var(--v2-green) !important; } .status.red, .negative { color: var(--v2-red) !important; } .status.orange, .warning { color: var(--v2-orange) !important; } .status.blue { color: var(--v2-blue) !important; } @media (max-width: 1180px) { .sidebar { width: 204px; } .main { margin-left: 204px; width: calc(100% - 204px); } .dashboard-outcome-row { grid-template-columns: 1fr; } .dashboard-command-grid article { min-height: 126px; } } @media (max-width: 900px) { .dashboard-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-command-grid article:nth-child(2) { border-right: 0; } .dashboard-command-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--v2-line); } } @media (max-width: 760px) { .sr-only { left: 0 !important; top: 0 !important; clip-path: inset(50%) !important; } .topbar-left { min-width: 0 !important; flex: 1 1 auto; overflow: hidden; } .topbar-left > div { min-width: 0; } .topbar h1 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px !important; line-height: 24px !important; } #settings .page-intro { display: grid; grid-template-columns: 1fr; align-items: start; } #settings .page-intro .primary-button { width: 100%; min-height: 44px; } html, body { overflow-x: clip; } body,.app-shell,.main,#dashboard.active { width: 100%; max-width: 100vw; overflow-x: clip; } body { background: var(--v2-canvas); } .sidebar { width: min(286px, 84vw); } .sidebar:not(.open) { display: none !important; visibility: hidden; pointer-events: none; opacity: 0; } .sidebar.open { display: flex !important; visibility: visible; pointer-events: auto; opacity: 1; } .main { margin-left: 0; width: 100%; } .order-chart,.finance-chart { overflow-x: hidden !important; } .order-chart svg,.finance-chart svg { width: 100% !important; min-width: 0 !important; height: 250px !important; } .topbar { height: 64px; padding: 0 14px; } .view { padding: 16px 12px 36px; } .dashboard-outcome-row { display: block; } .dashboard-hero { min-height: 164px; margin-bottom: 10px; padding: 18px; } .dashboard-command-grid { grid-template-columns: 1fr 1fr; } .dashboard-command-grid article { min-height: 112px; padding: 14px; } .dashboard-command-grid strong { font-size: 19px; } .dashboard-attention-strip { grid-template-columns: 1fr; } .dashboard-attention-strip button { grid-column: auto; } .dashboard-chart-mode { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .dashboard-chart-mode::-webkit-scrollbar { display: none; } .dashboard-chart-mode button { flex: 0 0 auto; } .panel { padding: 14px; } } /* Approved Plan board — 864 px reference composition. */ @media (min-width: 761px) and (max-width: 920px) { body:has(#actions.active) .sidebar { width:158px !important; padding:14px 9px 10px !important; } body:has(#actions.active) .main { margin-left:158px !important; width:calc(100% - 158px) !important; } body:has(#actions.active) .sidebar .brand { min-height:43px !important; padding:0 0 14px 4px !important; gap:7px !important; } body:has(#actions.active) .sidebar .brand-mark { width:29px !important; height:29px !important; flex-basis:29px !important; } body:has(#actions.active) .sidebar .brand-copy strong { font-size:9px !important; letter-spacing:.14em !important; } body:has(#actions.active) .sidebar .brand-copy small { font-size:7px !important; } body:has(#actions.active) .sidebar .sidebar-toggle { right:9px !important; top:23px !important; width:20px !important; height:20px !important; min-width:20px !important; } body:has(#actions.active) .sidebar .nav-label { padding:9px 5px 3px !important; font-size:7px !important; letter-spacing:.17em !important; } body:has(#actions.active) .sidebar .nav-item { min-height:31px !important; padding:5px 5px !important; gap:5px !important; border-radius:7px !important; font-size:8px !important; } body:has(#actions.active) .sidebar .nav-item .nav-icon { width:17px !important; height:17px !important; flex-basis:17px !important; } body:has(#actions.active) .sidebar .nav-icon svg { width:14px !important; height:14px !important; } body:has(#actions.active) .sidebar .nav-text { white-space:normal !important; line-height:1.1 !important; } body:has(#actions.active) .sidebar .nav-item b,body:has(#actions.active) .sidebar .nav-item i { min-width:17px !important; padding:2px 4px !important; font-size:7px !important; } body:has(#actions.active) .sidebar .profile { padding:9px 3px 0 !important; } body:has(#actions.active) .topbar { height:98px !important; padding:0 20px !important; } body:has(#actions.active) .topbar-left { flex:0 0 205px !important; min-width:205px !important; } body:has(#actions.active) .topbar .eyebrow { font-size:8px !important; letter-spacing:.08em !important; } body:has(#actions.active) .topbar h1 { font-size:17px !important; line-height:20px !important; } body:has(#actions.active) .topbar h1::after { content:'Единая очередь решений по бизнесу'; display:block; margin-top:3px; color:#7f8796; font-size:8px; font-weight:600; letter-spacing:0; } body:has(#actions.active) .topbar-actions { min-width:0 !important; margin-left:0 !important; gap:4px !important; } body:has(#actions.active) .topbar-actions .sync { min-width:0 !important; max-width:122px !important; overflow:hidden !important; font-size:7px !important; } body:has(#actions.active) .topbar-command-bar { min-width:0 !important; gap:0 !important; } body:has(#actions.active) .topbar-command-bar button,body:has(#actions.active) .topbar-command-bar > div { min-width:30px !important; height:34px !important; padding:0 6px !important; font-size:7px !important; } body:has(#actions.active) .topbar-command-bar kbd { display:none !important; } body:has(#actions.active) .topbar-command-bar .topbar-guide-button small,body:has(#actions.active) .topbar-command-bar .topbar-settings-button span,body:has(#actions.active) .topbar-command-bar .topbar-data-button span { display:none !important; } body:has(#actions.active) .topbar-command-bar .topbar-settings-button,body:has(#actions.active) .topbar-command-bar .topbar-data-button { width:31px !important; } body:has(#actions.active) #actions { max-width:none !important; margin:0 !important; padding:20px 20px 28px !important; } #actions .page-intro { display:flex !important; align-items:flex-start !important; margin-bottom:13px !important; } #actions .page-intro h2 { display:none !important; } #actions .page-intro .eyebrow { margin:0 0 3px !important; font-size:9px !important; } #actions .page-intro p { max-width:420px; font-size:8px !important; line-height:12px !important; } #actions .page-intro .primary-button { min-height:34px !important; padding:0 13px !important; font-size:8px !important; } #actions .action-plan-summary { gap:7px !important; } #actions .action-plan-summary > * { min-height:87px !important; padding:13px !important; border-radius:10px !important; } #actions .action-plan-summary span,#actions .action-plan-summary small { font-size:8px !important; line-height:12px !important; } #actions .action-plan-summary strong { margin:7px 0 !important; font-size:16px !important; } #actions .actions-secondary-panel { min-height:36px !important; margin:16px 0 !important; padding:9px 13px !important; border-radius:9px !important; } #actions .actions-secondary-panel summary { font-size:9px !important; } #actions .actions-secondary-panel summary small { font-size:7px !important; } #actions .action-state-tabs,#actions .action-plan-filters { gap:5px !important; margin-bottom:7px !important; flex-wrap:nowrap !important; overflow:visible !important; } #actions .action-state-tabs button,#actions .action-plan-filters button { min-height:29px !important; padding:0 7px !important; border-radius:7px !important; font-size:7px !important; white-space:nowrap !important; } #actions .action-state-tabs span,#actions .action-plan-filters .filter-count { margin-left:3px !important; padding:2px 4px !important; font-size:7px !important; } #actions .action-plan-board { gap:8px !important; margin-top:15px !important; } #actions .action-plan-card { grid-template-columns:240px minmax(0,1fr) 89px !important; min-height:156px !important; gap:8px !important; padding:14px 13px !important; border-radius:10px !important; } #actions .action-plan-card .status { margin-right:4px !important; padding:3px 5px !important; font-size:7px !important; } #actions .action-plan-card strong { display:block !important; margin-top:11px !important; font-size:9px !important; line-height:13px !important; } #actions .action-plan-card p { margin:5px 0 0 !important; font-size:8px !important; line-height:12px !important; } #actions .action-card-meta { display:block !important; margin-top:20px !important; color:#7d8695 !important; font-size:7px !important; } #actions .action-plan-card dl { grid-template-columns:1fr 1fr !important; gap:8px 10px !important; margin:0 !important; } #actions .action-plan-card dt { margin-bottom:3px !important; font-size:7px !important; } #actions .action-plan-card dd { font-size:8px !important; line-height:11px !important; } #actions .action-card-side { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:12px; } #actions .action-card-menu { align-self:flex-end; border:0; padding:0; color:#65708a; background:transparent; font-size:16px; line-height:10px; } #actions .action-plan-card .row-action { min-height:41px !important; padding:0 7px !important; border-radius:7px !important; font-size:8px !important; line-height:10px !important; } #actions .action-plan-more { display:block; width:100%; min-height:36px; margin-top:8px; border:1px solid var(--v2-line); border-radius:9px; color:#6349e8; background:#fff; font:700 8px Onest,sans-serif; } #actions .action-plan-insights { gap:8px !important; margin-top:14px !important; } #actions .action-plan-insights > article { min-height:165px !important; padding:13px !important; border-radius:9px !important; } #actions .action-insight-head { margin-bottom:10px !important; } #actions .action-insight-head h3 { font-size:8px !important; line-height:11px !important; text-transform:uppercase; } #actions .action-insight-head strong { font-size:16px !important; } #actions .action-log-panel { margin-top:12px !important; padding:13px !important; border-radius:9px !important; } #actions .action-log-panel .panel-head p { font-size:8px !important; } #actions .action-plan-footer { margin:13px 0 0 !important; text-align:center; color:#8d95a4; font-size:8px; } } /* Approved reference: Potential / Market. */ #market.market-reference-ready > :not(.market-reference-board) { display:none !important; } #market .market-reference-board { color:#202331; font-size:11px; } #market .market-reference-board h2,#market .market-reference-board h3,#market .market-reference-board h4,#market .market-reference-board p { margin:0; } #market .market-reference-intro { margin:0 0 16px; } #market .market-reference-intro h2 { font-size:22px; letter-spacing:-.04em; } #market .market-reference-intro p { margin-top:6px; color:#667085; font-size:11px; } #market .market-reference-controls { display:flex; align-items:center; gap:10px; min-height:43px; margin-bottom:12px; padding:5px 8px; border:1px solid #ecebf3; border-radius:9px; background:#fff; color:#7a8090; } #market .market-reference-controls button,#market .market-reference-controls span { min-height:31px; padding:0 10px; border:1px solid #eeeef5; border-radius:7px; background:#fff; color:#4e5567; font:600 10px/31px inherit; white-space:nowrap; } #market .market-reference-controls span { border:0; color:#8790a1; } #market .market-reference-controls span b { color:#4b5261; font-weight:700; } #market .market-reference-controls .market-filter { margin-left:auto; } #market .reference-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:12px; border:1px solid #ebeaf3; border-radius:8px; overflow:hidden; background:#fff; } #market .reference-kpis article { min-height:89px; padding:13px 14px; border-right:1px solid #ecebf2; display:flex; flex-direction:column; } #market .reference-kpis article:last-child{border-right:0} #market .reference-kpis small { color:#676f80; font-size:9px; } #market .reference-kpis small::first-letter { color:#624af4; } #market .reference-kpis strong { margin:8px 0 6px; font-size:19px; letter-spacing:-.04em; } #market .reference-kpis em { color:#11a76f; font-size:9px; font-style:normal; } #market .reference-kpis i { color:#7a8090; font-size:9px; font-style:normal; } #market .reference-card { border:1px solid #ecebf3; border-radius:8px; background:#fff; box-shadow:0 2px 10px rgba(28,35,66,.025); } #market .reference-market-overview { display:grid; grid-template-columns:1.02fr 1.25fr; min-height:260px; overflow:hidden; } #market .reference-market-overview>div { padding:15px 16px; } #market .reference-market-overview>div+div { border-left:1px solid #f0eff5; } #market .reference-card h3,#market .reference-calculator h3,#market .reference-tables h3,#market .reference-actions h3 { font-size:13px; letter-spacing:-.02em; } #market .reference-card>div>p { margin-top:4px; color:#7e8799; font-size:9px; } #market .reference-market-overview h4 { margin:16px 0 10px; font-size:11px; } #market .reference-donut-row { display:flex; align-items:center; gap:23px; } #market .reference-donut { width:114px; height:114px; border-radius:50%; position:relative; display:grid; place-content:center; text-align:center; background:conic-gradient(#4abd83 0 35%,#5647ec 35% 54%,#7aa4ff 54% 70%,#a368d5 70% 82%,#f27578 82% 100%); } #market .reference-donut:before { content:""; position:absolute; inset:29px; border-radius:50%; background:#fff; } #market .reference-donut b,#market .reference-donut span { position:relative; z-index:1; } #market .reference-donut b{font-size:18px} #market .reference-donut span{color:#80889a;font-size:8px} #market .reference-donut-row ul { flex:1; list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:9px; } #market .reference-donut-row li { display:grid; grid-template-columns:10px 1fr 33px 58px; gap:5px; align-items:center; } #market .reference-donut-row li i { width:6px;height:6px;border-radius:2px;background:#4abd83; } #market .reference-donut-row li i.b{background:#5547e9}.reference-donut-row li i.a{background:#7aa4ff}.reference-donut-row li i.v{background:#a368d5}.reference-donut-row li i.o{background:#f0ad5a}.reference-donut-row li i.r{background:#f27578} #market .reference-donut-row li b { font-weight:700; } #market .reference-donut-row li span { color:#778093; text-align:right; } #market .reference-trend>p { color:#687386; font-size:9px; } #market .reference-trend>p i { display:inline-block; width:7px; height:7px; border-radius:2px; background:#5748ee; } #market .reference-trend>p i.green { background:#51bd86; } #market .reference-bars { position:relative; height:187px; padding:9px 12px 0; display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid #dfe2ec; background:repeating-linear-gradient(to bottom, transparent 0 36px,#f0f1f5 37px 38px); } #market .reference-bars::before { content:""; position:absolute; z-index:2; inset:14px 13px 34px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 82 L130 70 L242 55 L354 43 L466 29 L582 10' fill='none' stroke='%2351bd86' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat; } #market .reference-bars span { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; width:35px; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(#6c5df9,#5445ed); } #market .reference-bars b { position:absolute; top:-15px; font-size:9px; } #market .reference-bars i { position:absolute; top:calc(100% + 7px); width:50px; color:#7a8190; font-size:8px; font-style:normal; text-align:center; } #market .reference-position { margin-top:12px; padding:15px 16px; } #market .reference-position-grid { display:grid; grid-template-columns:.82fr 1.95fr 1.6fr; gap:10px; margin-top:10px; } #market .reference-position-grid article { min-height:121px; padding:12px; border:1px solid #eeeeF5; border-radius:7px; } #market .reference-position-grid small { display:block; margin-bottom:10px; color:#667085; font-size:9px; } #market .reference-position-grid strong { display:block; font-size:22px; } #market .reference-position-grid article:first-child b { display:block; margin:8px 0 2px; font-size:11px; } #market .reference-position-grid article:first-child span { color:#7d8595; font-size:8px; } #market .reference-position-grid em { display:block; margin-top:10px; color:#11a76f; font-size:8px; font-style:normal; } #market .reference-position-grid svg { display:block; width:100%; height:65px; } #market .reference-position-grid svg+div { color:#7d8595; font-size:8px; white-space:nowrap; word-spacing:7px; } #market .reference-position table { width:100%; border-collapse:collapse; font-size:8px; } #market .reference-position td { padding:6px 0; border-bottom:1px solid #f0f0f4; } #market .reference-position td:nth-child(2),#market .reference-position td:nth-child(3){text-align:right;} #market .reference-calculator { margin-top:12px; padding:15px 16px; border:1px solid #bdb2ff; border-radius:8px; background:linear-gradient(110deg,#fff,#fbfaff); } #market .reference-calculator>p { margin-top:4px; color:#70798b; font-size:9px; } #market .reference-tabs { display:flex; align-items:center; gap:15px; margin:15px 0 13px; } #market .reference-tabs b { padding:5px 11px; border-radius:5px; color:#5e6675; font-size:8px; } #market .reference-tabs .selected { color:#fff; background:#614bf0; } #market .reference-tabs span { margin-left:auto; color:#8a829d; font-size:8px; } #market .reference-calc-grid { display:grid; grid-template-columns:.95fr 1.2fr; gap:17px; } #market .reference-fields { padding-right:13px; border-right:1px solid #eeeeF4; } #market .reference-fields h4,#market .reference-results h4,#market .reference-calculator>h4 { margin:0 0 8px; font-size:9px; } #market .reference-fields>span { display:grid; grid-template-columns:1fr 80px 53px; padding:0 0 5px; color:#8b92a0; font-size:7px; } #market .reference-fields label { min-height:24px; display:grid; grid-template-columns:1fr 80px 53px; align-items:center; gap:6px; border-top:1px solid #f1f0f5; font-size:8px; } #market .reference-fields label b { padding:4px 6px; border:1px solid #e3e2eb; border-radius:4px; background:#fff; font-size:8px; font-weight:500; } #market .reference-fields em { color:#654df0; font-size:7px; font-style:normal; } #market .reference-fields em.fact { color:#18a875; } #market .reference-results>div { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } #market .reference-results article { min-height:53px; padding:8px; border:1px solid #edeaf7; border-radius:6px; background:#fff; display:flex; flex-direction:column; } #market .reference-results small { color:#798295; font-size:7px; } #market .reference-results strong { margin:5px 0 3px; font-size:13px; letter-spacing:-.04em; } #market .reference-results span { color:#8991a0; font-size:7px; } #market .reference-results>p { margin:8px 0 0; padding:8px; border-radius:4px; background:#eaf9f1; color:#268c68; font-size:8px; } #market .reference-calculator>h4 { margin-top:14px; } #market .reference-scenarios { width:100%; border-collapse:collapse; font-size:8px; text-align:center; } #market .reference-scenarios th,#market .reference-scenarios td { padding:5px; border:1px solid #edeef3; } #market .reference-scenarios th:first-child,#market .reference-scenarios td:first-child{text-align:left;}#market .reference-scenarios .selected { background:#f0edff; color:#5743e9; } #market .reference-tables { display:grid; grid-template-columns:1fr 1.1fr; gap:12px; margin-top:12px; } #market .reference-tables article,#market .reference-actions article { min-width:0; padding:14px; border:1px solid #ecebf3; border-radius:8px; background:#fff; } #market .reference-tables p { margin:4px 0 11px; color:#7a8395; font-size:8px; } #market .reference-tables table { width:100%; min-width:0!important; table-layout:fixed; border-collapse:collapse; font-size:8px; } #market .reference-tables th { padding:4px; color:#8a91a0; font-size:7px; font-weight:500; text-align:left; } #market .reference-tables td { overflow-wrap:anywhere; padding:6px 4px; border-top:1px solid #f0f0f5; } #market .reference-tables tr:last-child td { color:#5341ea; font-weight:700; } #market .reference-tables td:last-child { color:#19a56f; } #market .reference-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; margin-top:12px; } #market .reference-actions p { margin:10px 0 0; color:#697386; font-size:8px; } #market .reference-actions article:first-child p { color:#4c8c74; } #market .reference-actions b { display:inline-grid; width:14px; height:14px; place-items:center; border-radius:50%; background:#5d49ef; color:#fff; font-size:8px; } #market .reference-footer { display:flex; justify-content:space-between; margin:13px 0 3px; color:#8b93a1; font-size:8px; } @media (max-width:1100px) { #market .market-reference-controls { flex-wrap:wrap; } #market .reference-market-overview,#market .reference-tables,#market .reference-actions { grid-template-columns:1fr; } #market .reference-market-overview>div+div { border:0; border-top:1px solid #f0eff5; } } /* The six reference boards replace page content only. The product shell and * complete left navigation remain stable across every Seller section. */ /* Main Board must read as one executive dashboard above the fold. */ #dashboard.active { max-width: 1680px; margin: 0 auto; } #dashboard .data-quality-bar { margin-bottom: 14px; } #dashboard .dashboard-outcome-row { grid-template-columns: minmax(300px,.78fr) minmax(720px,1.72fr); } #dashboard .dashboard-hero, #dashboard .dashboard-command-grid article { min-height: 188px; } #dashboard .dashboard-hero-copy > strong { font-size: clamp(32px,2.7vw,44px); } #dashboard .dashboard-command-grid article { display: flex; flex-direction: column; justify-content: center; } #dashboard .dashboard-command-grid article > small:last-child { margin-top: auto; } #dashboard .dashboard-decision-line { min-height: 54px; } #dashboard .dashboard-funnel-panel, #dashboard .dashboard-chart-panel, #dashboard .dashboard-plan-grid > article { background: #fff; border: 1px solid var(--v2-line); } @media (min-width: 1280px) { #dashboard.active { padding-left: 34px; padding-right: 34px; } #dashboard .dashboard-funnel-panel { padding: 22px; } #dashboard .dashboard-chart-panel { padding: 22px; } } @media (max-width: 760px) { body:has(#dashboard.active) .sidebar, body:has(#ads.active) .sidebar { display: block; } #dashboard.active { max-width: none; } #dashboard .dashboard-outcome-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } :where(button, a, input, select, textarea):focus-visible { outline: 3px solid rgba(108,79,248,.28); outline-offset: 2px; } /* Shared board language: filters, dense data surfaces and operational tables. */ .page-intro { margin-bottom: 18px; } .page-intro > div > p:last-child { margin-top: 5px; } .table-panel { background: rgba(255,255,255,.98); } .table-toolbar { min-height: 58px; padding: 12px 16px; background: var(--v2-surface); border-color: var(--v2-line); } .table-wrap { scrollbar-color: #c9cddd transparent; scrollbar-width: thin; } table { border-collapse: separate; border-spacing: 0; } th { color: #7b8291; background: #fcfcfd; font-size: 9px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; } td { color: var(--v2-ink-soft); font-size: 11px; } th, td { border-color: #edf0f4; } tbody tr { transition: background .14s var(--v2-ease); } tbody tr:hover { background: #faf9ff; } .search input, input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-color: var(--v2-line-strong); border-radius: var(--v2-radius-sm); background: #fff; color: var(--v2-ink); } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: #9a88ef; box-shadow: 0 0 0 3px rgba(108,79,248,.1); outline: 0; } .alert-bar, .data-quality-bar { border-radius: var(--v2-radius-md); box-shadow: none; } .data-quality-bar { background: linear-gradient(90deg, #fff8ee, #fffdf9); } /* Marketing board */ #ads .ads-daily-report, #ads .conversion-window-panel, #ads .marketing-funnel-panel, #ads .launch-plan-panel, #ads .retro-command { border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: var(--v2-surface); box-shadow: var(--v2-shadow); } #ads .ads-daily-report-metrics, #ads .ad-kpi-grid { gap: 0; } #ads .ads-daily-report-metrics > *, #ads .ad-kpi-grid > * { border-radius: 0; box-shadow: none; border-right: 1px solid var(--v2-line); } #ads .ads-daily-report-metrics > *:last-child, #ads .ad-kpi-grid > *:last-child { border-right: 0; } #ads .ads-surface-tabs { background: #f3f4f7; } #ads .ads-campaign-card-board { gap: 10px; } #ads .ad-dynamic-chart { min-height: 360px; } #ads .ad-dynamic-chart svg { display: block; width: 100%; height: 300px; overflow: visible; } #ads .ad-chart-grid { stroke: #e6e8ef; stroke-width: 1; } #ads .ad-chart-axis { fill: #667085; font-size: 12px; font-weight: 600; } #ads .ad-chart-title { fill: #475467; font-size: 12px; font-weight: 800; } #ads .ad-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #ads .ad-chart-line.spend { stroke: var(--brand-500); } #ads .ad-chart-line.orders { stroke: var(--success-500); } #ads .ad-chart-point { stroke: #fff; stroke-width: 2; } #ads .ad-chart-point.spend { fill: var(--brand-500); } #ads .ad-chart-point.orders { fill: var(--success-500); } #ads .chart-legend { display: flex; align-items: center; gap: 18px; min-height: 34px; color: #667085; font-size: 12px; } #ads .chart-legend b { margin-left: auto; } #ads .chart-legend i { display: inline-block; width: 16px; height: 3px; margin-right: 6px; border-radius: 3px; vertical-align: middle; } #ads .chart-legend i.spend { background: var(--brand-500); } #ads .chart-legend i.orders { background: var(--success-500); } #ads .chart-insufficient { min-height: 250px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 10px 14px; padding: 28px; border: 1px dashed var(--v2-line-strong); border-radius: var(--v2-radius-md); background: var(--v2-bg-subtle); } #ads .chart-insufficient > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--brand-600); background: var(--brand-50); } #ads .chart-insufficient svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } #ads .chart-insufficient small { display: block; margin-top: 4px; color: var(--v2-muted); } #ads .chart-insufficient dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 8px 0 0; } #ads .chart-insufficient dl div { padding: 12px; border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; } #ads .chart-insufficient dt { color: var(--v2-muted); font-size: 11px; } #ads .chart-insufficient dd { margin: 5px 0 0; font-size: 16px; font-weight: 800; } #ads .ad-kpi-grid .metric-card { position: relative; padding-right: 48px; } #ads .ad-kpi-grid .metric-card::after { content: ""; position: absolute; right: 16px; top: 18px; width: 22px; height: 22px; background: var(--brand-600); mask: var(--kpi-icon) center/contain no-repeat; } #ads .ad-kpi-grid .metric-card:nth-child(1) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z' fill='none' stroke='black' stroke-width='1.75'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } #ads .ad-kpi-grid .metric-card:nth-child(2) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 3 14 9-7 2-3 7z' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E"); } #ads .ad-kpi-grid .metric-card:nth-child(3),#ads .ad-kpi-grid .metric-card:nth-child(4) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v14H4zM8 9h8M8 13h5' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } #ads .ad-kpi-grid .metric-card:nth-child(5) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 11 18-5v12L3 13zM11 16a3 3 0 0 1-6 0v-3' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E"); } #ads .ad-kpi-grid .metric-card:nth-child(6) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } #ads .ad-kpi-grid .metric-card:nth-child(7),#ads .ad-kpi-grid .metric-card:nth-child(8) { --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='12' r='5' fill='none' stroke='black' stroke-width='1.75'/%3E%3Ccircle cx='15' cy='12' r='5' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='m10 12 1.5 1.5L14 11' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Plan board */ #actions .action-center, #actions .decision-queue, #actions .weekly-sprint-panel { background: var(--v2-surface); } #actions .decision-card, #actions .action-row { border-radius: var(--v2-radius-md); border-color: var(--v2-line); box-shadow: var(--v2-shadow); } #actions .decision-card { border-left-width: 3px; } /* Promotions and market share the same analytical rhythm as references. */ #promos .promo-control-metrics, #market .market-management-metrics, #market .scenario-grid, #promos .promo-sprint-result { gap: 10px; } #promos .promo-control-metrics > *, #market .market-management-metrics > *, #market .scenario-grid > * { border-radius: var(--v2-radius-md); border-color: var(--v2-line); } #promos .promo-data-fact { border: 1px solid #f2dec2; border-radius: var(--v2-radius-md); background: linear-gradient(90deg, #fff8ef, #fffdf9); } #promos .promo-weekly-board { grid-template-columns: minmax(250px, .9fr) minmax(620px, 2fr) minmax(150px, .55fr); border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: var(--v2-surface); box-shadow: var(--v2-shadow); } #promos .promo-control-metrics { gap: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); } #promos .promo-control-metrics > span { min-height: 118px; border: 0; border-right: 1px solid var(--v2-line); border-radius: 0; background: #fff; } #promos .promo-control-metrics > span:last-child { border-right: 0; } #promos .promo-control-actions { gap: 8px; } #promos .promo-tabs { padding: 4px; border: 1px solid var(--v2-line); background: #f2f3f6; } #promos .promo-tabs button.active { color: var(--v2-purple); background: #fff; } #promos .promo-candidate-panel { box-shadow: var(--v2-shadow); } #market .scenario-card.active, #market [aria-selected="true"] { border-color: #9e8aff; box-shadow: 0 0 0 1px #9e8aff; } #market .market-fact-grid { gap: 10px; } #market .market-fact-grid article, #market .market-management-strip, #market .market-sizing-panel, #market .market-command-center, #market .market-action-strip button { border-color: var(--v2-line); border-radius: var(--v2-radius-md); box-shadow: var(--v2-shadow); } #market .market-sizing-panel { border-color: #a896f4; box-shadow: 0 0 0 1px rgba(108,79,248,.06), var(--v2-shadow); } #market .market-sizing-results, #market .market-sizing-translation { gap: 0; overflow: hidden; border-radius: var(--v2-radius-md); } #market .market-sizing-results article, #market .market-sizing-translation article { border-radius: 0; border-right: 1px solid var(--v2-line); } /* SKU 360 / product command center */ #products .product-control-panel, #products .product-summary-panel, #products .product-command-table, #products .sku360-decision-grid article { border-color: var(--v2-line); } #products .sku360-decision-grid { gap: 10px; } #products .sku360-decision-grid article { border-radius: var(--v2-radius-md); box-shadow: var(--v2-shadow); } #products .sku360-decision-grid article:nth-child(1) { border-top: 3px solid var(--v2-red); } #products .sku360-decision-grid article:nth-child(1) small, #products .sku360-decision-grid article:nth-child(1) strong { color: var(--v2-red); } #products .sku360-decision-grid article:nth-child(2) { border-top: 3px solid var(--v2-blue); } #products .sku360-decision-grid article:nth-child(2) small, #products .sku360-decision-grid article:nth-child(2) strong { color: var(--v2-blue); } #products .sku360-decision-grid article:nth-child(3) { border-top: 3px solid var(--v2-orange); } #products .sku360-decision-grid article:nth-child(3) small, #products .sku360-decision-grid article:nth-child(3) strong { color: var(--v2-orange); } #products .sku360-decision-grid article:nth-child(4) { border-top: 3px solid var(--v2-green); } #products .sku360-decision-grid article:nth-child(4) small, #products .sku360-decision-grid article:nth-child(4) strong { color: var(--v2-green); } #products .product-decision-summary--primary { border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } #products .product-control-panel { border-radius: var(--v2-radius-lg); box-shadow: var(--v2-shadow); } #products .product-command-table tbody tr { background: #fff; } #products .product-command-table tbody tr:hover { background: #faf9ff; } #products .product-thumb { background: #f3f4f7; } #products .product-name-link { color: var(--v2-ink) !important; } /* Finance, operations, data, automation and guide remain dense but canonical. */ #orders .metric-card, #operations .metric-card, #economics .metric-card, #autopilot .metric-card, #imports .metric-card, #rules .metric-card { background: var(--v2-surface); } #economics .finance-command-grid, #operations .ops-overview-grid, #imports .data-layer-grid { gap: 10px; } /* Autopilot: controlled execution — one visual hierarchy, no duplicated meanings. */ #autopilot { scroll-margin-top: 92px; } #autopilot.active { display:flex; flex-direction:column; } #autopilot .page-intro { order:1; } #autopilot .autopilot-command-grid { order:2; } #autopilot .autopilot-cycle-panel { order:3; } #autopilot .autopilot-center-grid { order:4; } #autopilot #autopilot-settings { order:5; } #autopilot #autopilot-rules { order:6; } #autopilot #autopilot-journal { order:7; } #autopilot .page-intro { align-items: flex-start; } #autopilot .page-intro h2 { display:block !important; max-width:680px; font-size:28px !important; line-height:1.15; } #launchPlanModal #launchAutonomousControls[hidden] { display:none !important; } #autopilot .autopilot-command-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin:18px 0; gap:12px; } #autopilot .autopilot-command-grid article { min-height:142px; padding:18px; border-color:var(--v2-line); border-radius:var(--v2-radius-lg); box-shadow:var(--v2-shadow); } #autopilot .autopilot-command-grid article::before { content:""; display:block; width:34px; height:34px; margin-bottom:13px; border-radius:12px; background:var(--v2-purple-soft); } #autopilot .autopilot-command-grid article:nth-child(2)::before { background:#f1edff; } #autopilot .autopilot-command-grid article:nth-child(3)::before { background:#fff4e8; } #autopilot .autopilot-command-grid article:nth-child(4)::before { background:#fff0ef; } #autopilot .autopilot-command-grid strong { color: var(--v2-ink); font-size: 28px; line-height: 32px; } #autopilot .autopilot-command-grid .autopilot-command-status strong { font-size: 20px; } #autopilot .autopilot-cycle-panel { grid-template-columns:minmax(280px,1.08fr) minmax(430px,1.45fr) auto; padding:22px; border-color:#ded6ff; border-radius:var(--v2-radius-lg); box-shadow:var(--v2-shadow); } #autopilot .autopilot-cycle-panel ol { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; } #autopilot .autopilot-cycle-panel li { position:relative; display:grid; justify-items:center; gap:7px; min-height:72px; padding:0 8px; border:0; background:transparent; text-align:center; } #autopilot .autopilot-cycle-panel li:not(:last-child)::after { content:""; position:absolute; right:-1px; top:17px; width:18px; border-top:1px dashed #c8c0f6; } #autopilot .autopilot-cycle-panel li b { width:36px; height:36px; border-radius:50%; font-size:11px; } #autopilot .autopilot-cycle-panel li span { color:var(--v2-ink); font-size:11px; } #autopilot .autopilot-center-grid { grid-template-columns: minmax(0,1.45fr) minmax(310px,.8fr); gap: 16px; } #autopilot .autopilot-registry-panel,#autopilot .autopilot-check-panel { border-color: var(--v2-line); border-radius: var(--v2-radius-lg); box-shadow: var(--v2-shadow); } #autopilot .autopilot-agent-list { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; } #autopilot .autopilot-agent-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 7px; min-height: 144px; padding: 14px 12px; border-top: 0; border-right: 1px dashed var(--v2-line); text-align: center; } #autopilot .autopilot-agent-row:last-child { border-right: 0; } #autopilot .autopilot-agent-row:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 57px; z-index: 1; color: var(--v2-purple); font-size: 17px; } #autopilot .autopilot-agent-icon { justify-self: center; width: 36px; height: 36px; border-radius: 50%; background: var(--v2-purple-soft); color: var(--v2-purple); } #autopilot .autopilot-agent-row strong { font-size: 12px; } #autopilot .autopilot-agent-row small { min-height: 31px; font-size: 10px; line-height: 1.45; } #autopilot .autopilot-agent-meta { justify-self: center; } #autopilot .autopilot-agent-meta span { display: none; } #autopilot .autopilot-agent-meta b { margin: 0; padding: 4px 8px; border-radius: 999px; background: #f2f4f7; color: #667085; font-size: 10px; font-weight: 700; } #autopilot .autopilot-check-panel { padding: 18px; } #autopilot .autopilot-check-list article { padding: 10px; border-radius: 11px; background: #fff; } #autopilot .autopilot-check-list i { width: 24px; height: 24px; border-radius: 8px; } #autopilot .autopilot-tab-section { scroll-margin-top: 138px; margin: 16px 0; border-color: var(--v2-line); border-radius: var(--v2-radius-lg); overflow: hidden; box-shadow: var(--v2-shadow); } .autopilot-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 0; } .autopilot-section-heading .eyebrow { margin-bottom: 3px; } .autopilot-section-heading h3 { margin: 0; color: var(--v2-ink); font-size: 17px; line-height: 24px; } #autopilot .autopilot-settings-panel,#autopilot .autopilot-policy-panel,#autopilot .autopilot-audit-panel { padding:18px; } #autopilot .autopilot-settings-panel .panel-head,#autopilot .autopilot-policy-panel .panel-head,#autopilot .autopilot-audit-panel .panel-head { padding-top: 0; } #autopilot .autopilot-settings-panel .panel-head .eyebrow,#autopilot .autopilot-policy-panel .panel-head .eyebrow,#autopilot .autopilot-audit-panel .panel-head .eyebrow { display: none; } #autopilot .autopilot-settings-grid { display:grid; grid-template-columns:1.1fr repeat(3,minmax(0,1fr)); gap:10px; } #autopilot .autopilot-settings-card { display:flex; flex-direction:column; gap:10px; min-height:242px; padding:16px; border:1px solid var(--v2-line); border-radius:14px; background:#fff; } #autopilot .autopilot-settings-schedule { border-color:#e2dbff; background:linear-gradient(145deg,#fbfaff,#fff); } #autopilot .autopilot-settings-card h4 { margin:0; color:var(--v2-ink); font-size:14px; line-height:1.35; } #autopilot .autopilot-settings-card > p:not(.eyebrow) { margin:0; color:var(--v2-text); font-size:11px; line-height:1.5; } #autopilot .autopilot-settings-card .status { margin-top:auto; align-self:flex-start; } #autopilot .autopilot-settings-card .panel-head { margin:0; } #autopilot .autopilot-settings-card .panel-head h3 { font-size:14px; line-height:1.35; } #autopilot .autopilot-settings-card .panel-head p { font-size:11px; line-height:1.5; } #autopilot .autopilot-settings-card .autopilot-setting-row { display:grid; grid-template-columns:1fr; gap:8px; padding:0; border:0; background:transparent; } #autopilot .autopilot-settings-card .autopilot-setting-row > div { display:none; } #autopilot .autopilot-settings-card .autopilot-setting-row label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px; color:var(--v2-text); font-size:10px; } #autopilot .autopilot-settings-card .autopilot-setting-row label:nth-of-type(n+2) { grid-template-columns:1fr; } #autopilot .autopilot-settings-card .autopilot-settings-pending { display:none; } #autopilot .autopilot-settings-card input,.autopilot-settings-card select { min-height:30px; padding:0 8px; border-radius:8px; font-size:10px; } #autopilot .autopilot-settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; } #autopilot .autopilot-settings-actions button { min-height:34px; padding:0 9px; font-size:10px; } #autopilot .autopilot-policy-governance { grid-template-columns: repeat(4,minmax(0,1fr)); } #autopilot .autopilot-policy-governance article { min-height: 106px; border-radius: 12px; background: #fff; } #autopilot .autopilot-policy-methodology { background: linear-gradient(135deg,#fbfaff,#fff); } .autopilot-effect-checks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #e5e0ff; border-radius: 12px; background: #fbfaff; } .autopilot-effect-checks span { margin-right: 4px; color: var(--v2-text); font-size: 11px; font-weight: 700; } .autopilot-effect-checks b { min-width: 42px; padding: 5px 7px; border-radius: 999px; background: var(--v2-purple-soft); color: var(--v2-purple); text-align: center; font-size: 10px; } .autopilot-effect-checks small { margin-left: auto; color: var(--v2-text); font-size: 10px; } .autopilot-current-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:start; margin-top:16px; padding:16px; border:1px solid var(--v2-line); border-radius:14px; background:#fbfbfd; } .autopilot-current-actions h4 { margin:0 0 4px; color:var(--v2-ink); font-size:15px; } .autopilot-current-actions p:not(.eyebrow) { margin:0; color:var(--v2-text); font-size:11px; } .autopilot-current-actions .agent-foundation-queue { grid-column:1 / -1; } @media (max-width: 1280px) { #autopilot .autopilot-command-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #autopilot .autopilot-cycle-panel { grid-template-columns: 1fr 1fr; } #autopilot .autopilot-cycle-panel .primary-button { grid-column: 1 / -1; justify-self: start; } #autopilot .autopilot-center-grid { grid-template-columns: 1fr; } #autopilot .autopilot-settings-grid { grid-template-columns:1fr 1fr; } } @media (max-width: 900px) { #autopilot .autopilot-agent-list { grid-template-columns: 1fr; } #autopilot .autopilot-agent-row { grid-template-columns: auto minmax(0,1fr) auto; min-height: 0; border-right: 0; border-bottom: 1px dashed var(--v2-line); text-align: left; } #autopilot .autopilot-agent-row:last-child { border-bottom: 0; } #autopilot .autopilot-agent-row:not(:last-child)::after { display: none; } #autopilot .autopilot-agent-icon { align-self: start; } #autopilot .autopilot-agent-row small { min-height: 0; } #autopilot .autopilot-agent-meta { align-self: center; justify-self: end; } #autopilot .autopilot-policy-governance { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { #autopilot .autopilot-command-grid { grid-template-columns: 1fr 1fr; } #autopilot .autopilot-command-grid article { min-height: 124px; padding: 14px; } #autopilot .autopilot-cycle-panel { grid-template-columns: 1fr; padding: 16px; } #autopilot .autopilot-cycle-panel ol { grid-template-columns: 1fr 1fr; gap: 8px; } #autopilot .autopilot-cycle-panel li { min-height: 56px; padding: 6px; border: 1px solid var(--v2-line); border-radius: 10px; } #autopilot .autopilot-cycle-panel li:not(:last-child)::after { display: none; } #autopilot .autopilot-cycle-panel .primary-button { width: 100%; } .autopilot-section-heading { padding: 14px 14px 0; } #autopilot .autopilot-settings-panel,#autopilot .autopilot-policy-panel,#autopilot .autopilot-audit-panel { padding: 14px; } #autopilot .autopilot-worker-setup { align-items: stretch; flex-direction: column; } #autopilot .autopilot-worker-setup .secondary-button { width: 100%; } #autopilot .autopilot-policy-governance { grid-template-columns: 1fr; } #autopilot .autopilot-settings-grid { grid-template-columns:1fr; } #autopilot .autopilot-settings-card { min-height:0; } .autopilot-effect-checks small { flex-basis: 100%; margin-left: 0; } .autopilot-current-actions { grid-template-columns:1fr; } .autopilot-current-actions > .status { justify-self:start; } } /* Account, subscription, authentication and forms. */ #settings .page-intro .eyebrow { display: none; } .settings-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0 0 18px; padding: 0 16px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: #fff; box-shadow: var(--v2-shadow); } .settings-tabs button { min-height: 58px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #667085; font-weight: 650; cursor: pointer; } .settings-tabs button:hover { color: var(--brand-600); background: var(--brand-50); } .settings-tabs button.active { color: var(--brand-600); border-bottom-color: var(--brand-500); } #settings .settings-status-grid,#settings .settings-grid,#settings .settings-access-panel,#settings .settings-subscription-panel,#settings .settings-runbook,#settings .settings-overview-panel,#settings .settings-connections-catalog,#settings .settings-connections-log,#settings .settings-security-dashboard,#settings .settings-team-summary,#settings .settings-tab-kpis,#settings .settings-account-alert { display: none; } #settings[data-settings-tab="overview"] .settings-status-grid,#settings[data-settings-tab="overview"] .settings-runbook,#settings[data-settings-tab="overview"] .settings-overview-panel,#settings[data-settings-tab="overview"] .settings-connections-catalog,#settings[data-settings-tab="overview"] .settings-team-summary { display: grid; } #settings[data-settings-tab="overview"] .settings-access-panel,#settings[data-settings-tab="overview"] .settings-subscription-panel { display: block; } #settings[data-settings-tab="overview"] .settings-access-panel .team-access-control,#settings[data-settings-tab="overview"] .settings-access-panel .team-members-list,#settings[data-settings-tab="overview"] .settings-access-panel > .modal-note { display: none; } #settings[data-settings-tab="overview"] .settings-subscription-panel .subscription-pricing-grid,#settings[data-settings-tab="overview"] .settings-subscription-panel > .modal-note { display: none; } #settings[data-settings-tab="overview"] .settings-account-alert { display: grid; } #settings[data-settings-tab="connections"] .settings-grid,#settings[data-settings-tab="connections"] .settings-connections-catalog,#settings[data-settings-tab="connections"] .settings-connections-log,#settings[data-settings-tab="connections"] .settings-tab-kpis.connections,#settings[data-settings-tab="connections"] .settings-account-alert { display: grid; } #settings[data-settings-tab="connections"] .settings-grid > article:first-child,#settings[data-settings-tab="connections"] .settings-grid > article:nth-child(4) { display: none; } #settings[data-settings-tab="team"] .settings-access-panel { display: block; } #settings[data-settings-tab="team"] .settings-team-summary { display: grid; } #settings[data-settings-tab="security"] .settings-grid,#settings[data-settings-tab="security"] .settings-security-dashboard { display: grid; grid-template-columns: minmax(0,1fr); } #settings[data-settings-tab="security"] .settings-tab-kpis.security { display: grid; } #settings[data-settings-tab="security"] .settings-grid > article:not(:nth-child(4)) { display: none; } #settings[data-settings-tab="subscription"] .settings-subscription-panel,#settings[data-settings-tab="calculator"] .settings-subscription-panel { display: block; } #settings[data-settings-tab="subscription"] .settings-tab-kpis.subscription,#settings[data-settings-tab="calculator"] .settings-tab-kpis.calculator { display: grid; } #settings[data-settings-tab="subscription"] .subscription-value-calculator { display: none; } #settings[data-settings-tab="calculator"] .settings-subscription-panel > :not(.panel-head):not(.subscription-value-calculator) { display: none; } #settings[data-settings-tab="calculator"] .settings-subscription-panel > .panel-head { margin-bottom: 18px; } #settings[data-settings-tab="calculator"] .settings-subscription-panel > .panel-head h3 { font-size: 20px; } #settings[data-settings-tab="calculator"] .settings-subscription-panel > .panel-head h3::after { content: " — быстрый сценарий"; } #settings[data-settings-tab="calculator"] .subscription-value-calculator { margin-top: 0; } #settings:not([data-settings-tab="connections"]):not([data-settings-tab="security"]) #saveAccountSettings { display: none; } #settings .settings-status-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } .settings-tab-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; } .settings-tab-kpis article { min-height: 128px; padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } .settings-tab-kpis span,.settings-tab-kpis strong,.settings-tab-kpis small { display: block; } .settings-tab-kpis span,.settings-tab-kpis small { color: var(--v2-muted); } .settings-tab-kpis strong { margin: 14px 0 7px; font-size: 22px; } .settings-account-alert { width: 100%; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; margin-bottom: 14px; padding: 14px 16px; text-align: left; border: 1px solid var(--warning-200); border-radius: var(--v2-radius-md); background: var(--warning-50); color: #8a5a13; cursor: pointer; } .settings-account-alert b { color: #b54708; } #settings .settings-status-grid article { position: relative; padding-top: 52px; } #settings .settings-status-grid article::before { content: ""; position: absolute; left: 15px; top: 14px; width: 26px; height: 26px; background: var(--brand-600); mask: var(--settings-status-icon) center/contain no-repeat; } #settings .settings-status-grid article:nth-child(1) { --settings-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h16v18M8 7h2M14 7h2M8 11h2M14 11h2M9 21v-5h6v5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } #settings .settings-status-grid article:nth-child(2) { --settings-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 13-1.5 1.5a4 4 0 0 1-5.7-5.7L6 5.6a4 4 0 0 1 5.7 0M14 11l1.5-1.5a4 4 0 0 1 5.7 5.7L18 18.4a4 4 0 0 1-5.7 0M8 16l8-8' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } #settings .settings-status-grid article:nth-child(3) { --settings-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3' fill='none' stroke='black' stroke-width='1.75'/%3E%3Ccircle cx='17' cy='9' r='2.5' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='M3 20c0-4 2-6 5-6s5 2 5 6M14 15c3-1 6 1 6 5' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } #settings .settings-status-grid article:nth-child(4) { --settings-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8 3 12l4 4M17 8l4 4-4 4M14 4l-4 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } #settings .settings-status-grid article:nth-child(5) { --settings-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } .settings-team-summary { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; } .settings-team-summary article { min-height: 110px; padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } .settings-team-summary strong,.settings-team-summary small { display: block; } .settings-team-summary strong { color: var(--brand-600); font-size: 28px; } .settings-team-summary small { margin-top: 8px; color: var(--v2-muted); } .settings-overview-panel { grid-template-columns: 1.1fr .9fr; gap: 14px; margin-bottom: 14px; } .settings-overview-main,.settings-attention,.settings-connections-catalog,.settings-security-dashboard { padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } .settings-overview-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .settings-overview-cards button,.settings-attention button { display: grid; gap: 5px; min-height: 108px; padding: 15px; text-align: left; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: #fff; cursor: pointer; } .settings-overview-cards button:hover,.settings-attention button:hover { border-color: var(--brand-300); background: var(--brand-50); } .settings-overview-cards span,.settings-overview-cards small,.settings-attention small { color: var(--v2-muted); font-size: 11px; } .settings-overview-cards strong { font-size: 17px; } .settings-attention h3 { margin: 0 0 12px; } .settings-attention button { width: 100%; min-height: 74px; margin-top: 8px; } .settings-integration-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .settings-integration-grid article { display: grid; grid-template-columns: auto 1fr; gap: 10px; min-height: 136px; padding: 14px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); } .settings-integration-grid article > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--brand-700); background: var(--brand-50); } .settings-integration-grid article:nth-child(1) > b { color: #fff; background: #111; } .settings-integration-grid article:nth-child(2) > b { color: #fff; background: linear-gradient(135deg,#a500a8,#e23bb4); } .settings-integration-grid article:nth-child(3) > b { color: #fff; background: #1769ff; } .settings-integration-grid article:nth-child(4) > b { color: #111; background: #ffd426; } .settings-integration-grid article:nth-child(5) > b { color: #fff; background: #246bd6; } .settings-integration-grid article:nth-child(6) > b { color: #fff; background: linear-gradient(135deg,#1554b8,#4ed6ef); } .settings-integration-grid article:nth-child(7) > b { color: #fff; background: #16a765; } .settings-integration-grid strong,.settings-integration-grid small { display: block; } .settings-integration-grid small { margin-top: 5px; color: var(--v2-muted); } .settings-integration-grid .status { grid-column: 1 / -1; align-self: end; justify-self: start; } .settings-integration-grid article > button { grid-column: 1 / -1; min-height: 34px; border: 1px solid var(--brand-300); border-radius: 8px; background: #fff; color: var(--brand-700); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .settings-integration-grid article > button:hover { background: var(--brand-50); border-color: var(--brand-500); } .sidebar-account-link { display: flex; align-items: center; width: 100%; min-height: 38px; gap: 9px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.05); color: #e8ebf5; font: inherit; font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; } .sidebar-account-link:hover { border-color: rgba(150,116,255,.68); background: rgba(113,75,255,.16); } .sidebar-account-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } body.sidebar-collapsed .sidebar-account-link { width: 48px; min-height: 44px; justify-content: center; margin: 0 auto 8px; padding: 0; border-radius: 12px; } body.sidebar-collapsed .sidebar-account-link span { display: none; } .settings-connections-log { margin-top: 14px; padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } .settings-connections-log > div:last-child { display: grid; } .settings-connections-log article { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 12px; align-items: center; min-height: 52px; border-top: 1px solid var(--v2-line); } .settings-connections-log article span,.settings-connections-log time { color: var(--v2-muted); font-size: 11px; } .settings-security-api { margin: 0 0 16px; padding: 16px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: #fff; } .settings-security-api article { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,1.4fr) auto; gap: 12px; align-items: center; min-height: 52px; border-top: 1px solid var(--v2-line); } .settings-security-api article > span { color: var(--v2-muted); } .settings-security-events { margin-top: 18px; } .settings-security-events h4 { margin: 0 0 10px; } .settings-security-events article { display: grid; grid-template-columns: 1fr auto 120px; gap: 12px; align-items: center; min-height: 48px; padding: 0 10px; border: 1px solid var(--v2-line); border-bottom: 0; } .settings-security-events article:first-of-type { border-radius: 10px 10px 0 0; }.settings-security-events article:last-child { border-bottom: 1px solid var(--v2-line); border-radius: 0 0 10px 10px; } .settings-security-events time { color: var(--v2-muted); text-align: right; } .settings-security-dashboard { margin-top: 14px; } .settings-security-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--warning-200); border-radius: var(--v2-radius-md); background: var(--warning-50); } .settings-security-alert span { color: #8a5a13; } .settings-security-alert button { border: 0; background: transparent; color: #b54708; font-weight: 800; cursor: pointer; } .settings-security-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .settings-security-grid article { min-height: 112px; padding: 14px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); } .settings-security-grid span,.settings-security-grid strong,.settings-security-grid small { display: block; } .settings-security-grid > article > span { color: var(--v2-muted); font-size: 11px; } .settings-security-grid strong { margin: 9px 0; font-size: 16px; } #settings .settings-card, #settings .subscription-card, #settings .panel, .modal-card, .auth-card { border-color: var(--v2-line); border-radius: var(--v2-radius-lg); box-shadow: 0 22px 70px rgba(20,24,38,.13); } #settings .subscription-card.is-pro, #settings [data-plan="pro"] { border-color: #9d8af6; background: linear-gradient(145deg, #fff, #f7f4ff); } .modal-backdrop, .auth-backdrop { backdrop-filter: blur(14px); } .modal-card label > span, .auth-card label > span { color: var(--v2-muted); letter-spacing: .08em; } .modal-card button, .auth-card button { min-height: 42px; } @media (max-width: 980px) { #ads .ads-daily-report-metrics, #ads .ad-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } #ads .ads-daily-report-metrics > *:nth-child(3n), #ads .ad-kpi-grid > *:nth-child(3n) { border-right: 0; } #promos .promo-weekly-board { grid-template-columns: 1fr; } #promos .promo-control-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { .settings-tabs { display: flex; overflow-x: auto; padding: 0 8px; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tabs button { flex: 0 0 auto; min-height: 48px; padding: 0 14px; white-space: nowrap; } #settings .settings-status-grid,.settings-overview-panel,.settings-overview-cards,.settings-integration-grid,.settings-security-grid,.settings-team-summary,.settings-tab-kpis { grid-template-columns: 1fr; } .settings-account-alert { grid-template-columns: 1fr; } .settings-connections-log article,.settings-security-api article,.settings-security-events article { grid-template-columns: 1fr; gap: 5px; padding: 10px 0; } .settings-security-events time { text-align: left; } .settings-security-alert { grid-template-columns: 1fr; } .page-intro { align-items: flex-start; gap: 12px; } .table-toolbar { align-items: stretch; gap: 9px; } .table-toolbar > * { max-width: 100%; } #ads .ads-daily-report-metrics, #ads .ad-kpi-grid { grid-template-columns: 1fr 1fr; } #ads .ads-daily-report-metrics > *, #ads .ad-kpi-grid > * { min-height: 105px; border-bottom: 1px solid var(--v2-line); } #ads .ads-daily-report-metrics > *:nth-child(odd), #ads .ad-kpi-grid > *:nth-child(odd) { border-right: 1px solid var(--v2-line); } #ads .ads-daily-report-metrics > *:nth-child(even), #ads .ad-kpi-grid > *:nth-child(even) { border-right: 0; } #ads .metric-card, #ads .metric-card > * { min-width: 0; overflow-wrap: anywhere; } #ads .ads-surface-context { grid-template-columns: 1fr; } #ads .ads-surface-context > * { min-width: 0; } #ads .campaign-color-legend { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } #ads .campaign-color-legend::-webkit-scrollbar { display: none; } #ads .campaign-color-legend .legend-item { flex: 0 0 auto; } #products .product-control-panel { padding: 12px; } #promos .promo-control-metrics { grid-template-columns: 1fr 1fr; } #promos .promo-control-metrics > span { min-height: 96px; border-bottom: 1px solid var(--v2-line); } #promos .promo-tabs { display: flex; overflow-x: auto; } #promos .promo-tabs button { flex: 0 0 auto; } #market .market-fact-grid, #market .market-sizing-inputs, #market .market-sizing-results, #market .market-sizing-translation { grid-template-columns: 1fr 1fr; } #settings .settings-card, #settings .subscription-card, .modal-card, .auth-card { border-radius: var(--v2-radius-md); } .sidebar-account-link { display: none; } } /* Six reference boards — structural presentation, not a skin. */ @media (min-width: 761px) { body:not(:has(#dashboard.active)):not(:has(#ads.active)) .sidebar { width: 224px !important; } body:not(:has(#dashboard.active)):not(:has(#ads.active)) .main { margin-left: 224px !important; width: calc(100% - 224px) !important; } body:has(#dashboard.active) .sidebar .nav-item .nav-text { position: static !important; opacity: 1 !important; transform: none !important; } body:has(#actions.active) .sidebar .brand-copy, body:has(#promos.active) .sidebar .brand-copy, body:has(#market.active) .sidebar .brand-copy, body:has(#products.active) .sidebar .brand-copy, body:has(#actions.active) .sidebar .nav-label, body:has(#promos.active) .sidebar .nav-label, body:has(#market.active) .sidebar .nav-label, body:has(#products.active) .sidebar .nav-label, body:has(#actions.active) .sidebar .nav-text, body:has(#promos.active) .sidebar .nav-text, body:has(#market.active) .sidebar .nav-text, body:has(#products.active) .sidebar .nav-text, body:has(#actions.active) .sidebar .profile-copy, body:has(#promos.active) .sidebar .profile-copy, body:has(#market.active) .sidebar .profile-copy, body:has(#products.active) .sidebar .profile-copy, body:has(#actions.active) .sidebar .profile button, body:has(#promos.active) .sidebar .profile button, body:has(#market.active) .sidebar .profile button, body:has(#products.active) .sidebar .profile button { display: block !important; } body:has(#actions.active) .sidebar .brand, body:has(#promos.active) .sidebar .brand, body:has(#market.active) .sidebar .brand, body:has(#products.active) .sidebar .brand { justify-content: flex-start !important; padding: 0 8px 22px !important; margin: 0 !important; height: auto !important; } body:has(#actions.active) .sidebar .nav-item, body:has(#promos.active) .sidebar .nav-item, body:has(#market.active) .sidebar .nav-item, body:has(#products.active) .sidebar .nav-item { width: 100% !important; height: auto !important; min-height: 39px !important; padding: 9px 10px !important; display: flex !important; place-items: initial !important; justify-content: flex-start !important; gap: 10px !important; border-radius: 9px !important; } body:has(#actions.active) .sidebar .nav-item .nav-text, body:has(#promos.active) .sidebar .nav-item .nav-text, body:has(#market.active) .sidebar .nav-item .nav-text, body:has(#products.active) .sidebar .nav-item .nav-text { position: static !important; opacity: 1 !important; transform: none !important; color: inherit !important; } body:has(#actions.active) .sidebar .nav, body:has(#promos.active) .sidebar .nav, body:has(#market.active) .sidebar .nav, body:has(#products.active) .sidebar .nav { align-items: stretch !important; overflow-y: auto !important; } body:has(#actions.active) .sidebar .nav-item::after, body:has(#promos.active) .sidebar .nav-item::after, body:has(#market.active) .sidebar .nav-item::after, body:has(#products.active) .sidebar .nav-item::after, body:has(#actions.active) .sidebar .profile::after, body:has(#promos.active) .sidebar .profile::after, body:has(#market.active) .sidebar .profile::after, body:has(#products.active) .sidebar .profile::after { display: none !important; } body:has(#actions.active) .wide-table, body:has(#promos.active) .wide-table, body:has(#market.active) .wide-table, body:has(#products.active) .wide-table { min-width: 0 !important; } } #dashboard.active,#ads.active,#actions.active,#promos.active,#market.active,#products.active { width: 100%; max-width: 1540px; margin-inline: auto; } /* Marketing: one continuous executive report. */ #ads .ads-surface-tabs { display: flex; } #ads .ads-surface:not(.active) { display: none !important; } #ads .ads-surface.active { display: block !important; } #ads .ads-daily-report-metrics,#ads .ad-kpi-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } #ads .ads-marketing-overview,#ads .ads-campaign-controls,#ads .ads-campaign-card-board, #ads .ad-live-panel,#ads .conversion-window-panel,#ads .launch-plan-panel, #ads .campaign-cockpit,#ads .retrospective-table-panel,#ads .realtime-attribution-panel { margin-top: 14px; } #ads .ads-marketing-overview { min-height: 350px; } #ads .ads-decision-board { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } #ads .ads-campaign-card-board { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); } #ads .ads-campaign-card-board > :nth-child(n+7), #ads table tbody tr:nth-child(n+6) { display: none; } #ads .product-owned-surface { display: none !important; } /* Marketing reference composition: period → six decision metrics → quality → trend → campaign table. Missing economic inputs retain their card, never fake ROMI. */ #ads .ads-page-intro { margin-bottom:12px; } #ads .ads-period-context { margin:0 0 14px; min-height:38px; padding:0; border:0; background:transparent; } #ads .ads-daily-report { padding:0; border:1px solid #ddd8ff; background:#fff; box-shadow:none; } #ads .ads-daily-report-head { display:none; } #ads .ads-daily-report-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); } #ads .ads-daily-report-metrics article { min-height:102px; padding:18px 16px; } #ads .ads-daily-report-metrics article span { font-size:11px; color:var(--v2-muted); } #ads .ads-daily-report-metrics article strong { margin-top:9px; font-size:22px; } #ads .ads-daily-report-metrics article small { margin-top:7px; font-size:10px; } #ads .ads-daily-report-footer { display:none; } #ads .ads-marketing-alert { margin-top:14px; } #ads .ads-marketing-overview { min-height:0; padding:18px; } #ads .ads-marketing-overview-head { align-items:center; } #ads .ads-marketing-overview-head .mode-badge { display:none; } #ads .ad-dynamic-chart svg { height:268px; } #ads .ads-secondary-summary,#ads .ads-decision-board,#ads .ads-surface-tabs,#ads .ads-surface-context,#ads .ads-campaign-controls,#ads .campaign-color-legend,#ads .ads-campaign-card-board { display:none !important; } #ads .ad-live-panel { display:block !important; margin-top:14px; } #ads .ad-live-panel .metrics-grid,#ads .ad-live-panel .marketing-funnel { display:none; } #ads .ad-live-panel .table-toolbar { padding:15px 18px; } #ads .ad-live-panel table th,#ads .ad-live-panel table td { padding:12px 10px; } #ads .conversion-window-panel { display:none !important; } #ads .ads-surface.history:not(.ad-live-panel) { display:none !important; } @media (max-width:900px) { #ads .ads-daily-report-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:560px) { #ads .ads-daily-report-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } #ads .ads-period-context { flex-wrap:wrap; } #ads .ads-period-context input { max-width:132px; } } /* Plan: summary, filters, full cards, distributions and journal. */ #actions .action-plan-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } #actions .action-plan-summary > * { min-height: 116px; } #ads details:not([open]) > :not(summary), #promos details:not([open]) > :not(summary), #products details:not([open]) > :not(summary) { display: block; } #actions .actions-secondary-panel { padding: 16px 18px; } #actions .action-plan-board { display: grid; grid-template-columns: 1fr !important; gap: 14px; } #actions .action-plan-card { grid-template-columns: minmax(320px,1.3fr) minmax(300px,.9fr) 170px !important; width: 100%; } #actions .decision-card,#actions .action-row { min-height: 154px; } #actions .action-log-panel { margin-top: 16px; } #actions .action-plan-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; } #actions .action-plan-insights > article { min-height: 194px; padding: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-lg); background: #fff; box-shadow: var(--v2-shadow); } #actions .action-insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } #actions .action-insight-head h3 { margin: 0; color: var(--v2-ink); font-size: 14px; line-height: 20px; } #actions .action-insight-head strong { color: var(--v2-purple); font-size: 22px; line-height: 24px; } #actions .action-insight-head span { color: var(--v2-muted); font-size: 10px; font-weight: 700; } #actions .action-insight-bars { display: grid; gap: 10px; } #actions .action-insight-bars > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; align-items: center; } #actions .action-insight-bars span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--v2-text); font-size: 11px; font-weight: 700; } #actions .action-insight-bars span > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--v2-purple); } #actions .action-insight-bars b { color: var(--v2-ink); font-size: 12px; } #actions .action-insight-bars b small { color: var(--v2-muted); font-size: 10px; font-weight: 600; } #actions .action-insight-bars em { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: #eef0f5; } #actions .action-insight-bars em i { display: block; height: 100%; border-radius: inherit; background: var(--v2-purple); } #actions .action-insight-bars i.red { background: var(--v2-red); } #actions .action-insight-bars i.orange { background: var(--v2-orange); } #actions .action-insight-bars i.blue { background: var(--v2-blue); } #actions .action-insight-bars i.green { background: var(--v2-green); } #actions .action-insight-bars i.purple { background: var(--v2-purple); } #actions .action-insight-effect { display: grid; align-content: start; gap: 8px; } #actions .action-insight-effect strong { color: var(--v2-ink); font-size: 18px; } #actions .action-insight-effect small,#actions .action-insight-effect span { color: var(--v2-text); font-size: 11px; line-height: 1.45; } @media (max-width:760px) { #actions .action-plan-insights { grid-template-columns: 1fr; } #actions .action-plan-insights > article { min-height: 0; padding: 14px; } } /* Promotions: all analytical blocks in one scrolling board. */ #promos .promo-tabs { display: flex; } #promos .promo-tab-panel { margin-top: 16px; } #promos .promo-tab-panel:not(.active) { display: none !important; } #promos .promo-tab-panel.active { display: block !important; } #promos .promo-tab-panel + .promo-tab-panel { border-top: 1px solid var(--v2-line); padding-top: 18px; } #promos table tbody tr:nth-child(n+6),#promos .promotion-drilldown-list > :nth-child(n+6) { display: none; } #promos .promo-weekly-board { min-height: 168px; } #promos .promo-secondary-result { margin-top: 14px; padding: 16px 18px; } #promos .promo-reference-analysis { display: grid; grid-template-columns: minmax(560px,1.55fr) minmax(300px,.75fr); gap: 12px; margin-top: 14px; } #promos .promo-reference-analysis > * { min-height: 250px; } #promos .promo-reference-empty { min-height: 150px; display: grid; place-content: center; text-align: center; border: 1px dashed var(--v2-line-strong); border-radius: 12px; color: var(--v2-muted); } #promos .promo-reference-empty strong,#promos .promo-reference-empty small { display: block; } #promos .promo-reference-empty small { max-width: 520px; margin-top: 8px; } #promos .promo-reference-reasons article { display: flex; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--v2-line); } #promos .promo-reference-reasons span,#promos .promo-reference-reasons small { display: block; } #promos .promo-reference-reasons small { margin-top: 4px; color: var(--v2-muted); } /* Promotions reference composition. The analytical graph retains its space even when promotion-to-order attribution is not available yet. */ #promos .page-intro { margin-bottom:10px; } #promos .promo-period-context { display:flex; align-items:center; gap:12px; min-height:40px; margin-bottom:14px; color:var(--v2-muted); font-size:11px; } #promos .promo-period-context button { min-height:32px; padding:0 11px; border:1px solid var(--v2-line); border-radius:7px; background:#fff; color:var(--v2-text); font:inherit; font-weight:700; } #promos .promo-period-context > div { display:flex; margin-left:auto; } #promos .promo-period-context > div button { border-radius:0; } #promos .promo-period-context > div button:first-child { border-radius:7px 0 0 7px; } #promos .promo-period-context > div button:last-child { border-radius:0 7px 7px 0; } #promos .promo-period-context .active { color:#fff; background:#6352ed; border-color:#6352ed; } #promos .promo-data-fact { margin:0 0 14px; } #promos .promo-weekly-board { grid-template-columns:minmax(220px,1.55fr) minmax(0,2fr) auto; padding:17px 18px; border-color:#e6e2ff; } #promos .promo-board-title strong { font-size:17px; } #promos .promo-control-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } #promos .promo-control-metrics > span { min-height:72px; padding:10px; } #promos .promo-control-metrics strong { font-size:20px; } #promos .promo-reference-analysis { grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr); } #promos .promo-reference-analysis > * { min-height:285px; } #promos .promo-reference-empty { position:relative; align-content:end; min-height:192px; padding:18px; text-align:left; background:repeating-linear-gradient(to bottom,transparent 0,transparent 38px,#edf0f6 39px); border-style:solid; } #promos .promo-reference-empty::before { content:""; position:absolute; left:32px; right:28px; bottom:66px; height:92px; border-left:2px solid #705ff4; border-bottom:2px solid #705ff4; clip-path:polygon(0 68%,16% 48%,33% 62%,50% 25%,66% 44%,82% 17%,100% 36%,100% 100%,0 100%); background:linear-gradient(180deg,rgba(112,95,244,.15),transparent); opacity:.8; } #promos .promo-reference-empty strong,#promos .promo-reference-empty small { position:relative; z-index:1; } #promos .promo-reference-reasons { padding:18px; } #promos .promo-reference-reasons h3 { margin:0; font-size:15px; } #promos .promo-tabs { margin-top:14px; } #promos .promo-candidate-panel { margin-top:12px; } #promos .promo-candidate-panel .table-toolbar { padding:15px 18px; } #promos .promo-candidate-panel th,#promos .promo-candidate-panel td { padding:12px 10px; } @media (max-width:900px) { #promos .promo-weekly-board { grid-template-columns:1fr; } #promos .promo-period-context { flex-wrap:wrap; } #promos .promo-period-context > div { margin-left:0; } } @media (max-width:560px) { #promos .promo-control-metrics { grid-template-columns:1fr 1fr; } #promos .promo-period-context > span { width:100%; } } /* Approved Promotions board — dense desktop operational dashboard. */ #promos { max-width: 1450px; margin: 0 auto; padding-top: 14px; } #promos > :not(.promo-board-v3) { display:none !important; } #promos > .promo-tab-panel, #promos > .page-intro, #promos > .promo-period-context, #promos > .promo-data-fact, #promos > .promo-weekly-board, #promos > .promo-secondary-result, #promos > .promo-reference-analysis, #promos > .promo-tabs { display:none !important; } .promo-board-v3 { color:#20232d; font-size:11px; line-height:1.28; } .promo-board-v3 button { font:inherit; cursor:pointer; background:#fff; border:1px solid #e6e8f0; color:#3f4351; border-radius:7px; min-height:30px; padding:0 11px; } .pb-head { display:flex; justify-content:space-between; align-items:flex-start; padding:0 0 14px; } .pb-head h2 { margin:0; font-size:25px; letter-spacing:-.04em; }.pb-head p{margin:6px 0 0;color:#7d8495} .pb-head-controls,.pb-head-controls span { display:flex; gap:7px; align-items:center; }.pb-head-controls span{gap:0}.pb-head-controls span button{border-radius:0}.pb-head-controls span button:first-child{border-radius:7px 0 0 7px}.pb-head-controls span button:last-child{border-radius:0 7px 7px 0}.pb-head-controls .selected{border-color:#8669ff;color:#684be9;background:#fbfaff}.pb-head-controls button{position:relative}.pb-head-controls b{position:absolute;top:-6px;right:-4px;width:12px;height:12px;border-radius:50%;font-size:8px;line-height:12px;background:#f2465d;color:#fff}.pb-head-controls .pb-plus{color:#fff;background:#7154ee;font-size:19px;border-radius:50%;min-width:30px;padding:0} .pb-period{display:flex;align-items:center;gap:16px;border-top:1px solid #eceef3;padding:12px 0}.pb-period span{color:#9aa0b0}.pb-period button:last-child{margin-left:auto} .pb-kpis{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid #e9ebf1;border-radius:8px;box-shadow:0 2px 9px #26355b08}.pb-kpis article{min-height:90px;padding:14px;border-right:1px solid #edf0f4}.pb-kpis article:last-child{border:0}.pb-kpis i{display:block;color:#7455f5;font-style:normal;font-size:14px}.pb-kpis small{display:block;color:#6d7382;margin:4px 0}.pb-kpis strong{font-size:18px;display:block}.pb-kpis b,.green{color:#18a46b;font-size:10px;display:block;margin-top:8px} .pb-alert{display:flex;align-items:center;gap:11px;margin:12px 0;padding:13px 15px;background:#fff9f2;border:1px solid #ffedd9;border-radius:8px}.pb-alert>i{background:#ffe6ca;color:#f07112;border-radius:6px;padding:6px;font-style:normal}.pb-alert strong,.pb-alert small{display:block}.pb-alert strong{color:#e66d19}.pb-alert small{font-size:9px;margin-top:3px}.pb-alert button{margin-left:auto;border:0;background:transparent;color:#674cf1;font-weight:700} .pb-two{display:grid;grid-template-columns:1.42fr .98fr;gap:12px}.pb-card,.pb-section{background:#fff;border:1px solid #e9ebf1;border-radius:8px;box-shadow:0 2px 8px #26355b07}.pb-card{padding:15px}.pb-card h3,.pb-section h3{font-size:13px;margin:0 0 11px}.pb-chart{min-height:280px;position:relative}.pb-tabs{display:flex;gap:4px}.pb-tabs>*{padding:7px 12px;background:#f6f7fa;border-radius:5px;font-size:9px}.pb-tabs b{background:#7658ef;color:#fff}.pb-legend{color:#798094;font-size:8px}.pb-chart svg{height:145px;width:100%;margin-top:10px}.pb-chart footer{font-size:8px;background:#fafaff;padding:8px;color:#7f8694}.pb-chart a{float:right;color:#6549ed}.pb-reasons{position:relative}.pb-reasons>button{position:absolute;right:12px;top:12px;font-size:8px;min-height:23px}.pb-reasons>div{display:grid;grid-template-columns:18px 1fr auto;gap:7px;padding:10px 0;border-bottom:1px solid #edf0f5}.pb-reasons i{font-style:normal;color:#48bb7d}.pb-reasons strong{font-size:10px}.pb-reasons small{display:block;color:#8d94a3;font-size:8px;font-weight:400;margin-top:3px}.pb-reasons b,.pb-reasons em{font-style:normal;color:#16a76e;font-size:9px;align-self:center}.pb-reasons em{color:#ef4b5d} .pb-section{margin-top:12px;padding:14px}.pb-section>h3 a{float:right;color:#7154ec;font-size:10px}.pb-promos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pb-promos article{border:1px solid #e7e9f0;border-radius:7px;padding:12px;min-height:190px}.pb-promos label{color:#20a96e;background:#eaf9f2;border-radius:3px;padding:3px 5px;font-size:8px;font-weight:800}.pb-promos label.soon{color:#ec7d1c;background:#fff3e7}.pb-promos label.plan{color:#6c5be4;background:#f0efff}.pb-promos h4{font-size:11px;margin:11px 0 6px}.pb-promos p{font-size:8px;color:#6f7686;margin:0;min-height:32px}.pb-promos dl{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:11px 0}.pb-promos dt{font-size:8px;color:#9ba0ad}.pb-promos dd{font-weight:800;font-size:10px;margin:0}.pb-promos footer{border-top:1px solid #eff1f5;padding-top:7px;color:#8e94a3;font-size:8px}.pb-promos footer b{color:#18a96e}.pb-attention>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pb-attention article{padding:12px;display:flex;gap:10px;border:1px solid #edf0f4;border-radius:7px}.pb-attention article>i{color:#f25764;font-style:normal;font-size:17px}.pb-attention strong{font-size:10px}.pb-attention small,.pb-attention a{display:block;font-size:8px;color:#7d8494;font-weight:400;margin-top:4px}.pb-attention a{color:#6d50eb;font-weight:700}.pb-attention em{color:#eb5b6a;font-style:normal} .pb-plan-head{display:grid;grid-template-columns:1.25fr 2.7fr auto;gap:18px;align-items:center}.pb-plan-head p{margin:0 0 4px;font-size:9px}.pb-plan-head small{font-size:8px;color:#788091}.pb-plan-head button{background:#7052ef;color:#fff;border:0;padding:0 14px}.pb-counts{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.pb-counts b{font-size:14px}.pb-counts small{font-weight:400;display:block;font-size:7px;color:#818899}.pb-task-tabs{display:flex;align-items:center;gap:8px;border-top:1px solid #edf0f4;margin-top:13px;padding-top:11px}.pb-task-tabs>*{padding:7px 10px;background:#f8f9fb;border-radius:5px;font-size:8px}.pb-task-tabs b{background:#7254ee;color:#fff}.pb-task-tabs i{font-style:normal;margin-left:auto;color:#747b8a}.pb-plan table{width:100%;border-collapse:collapse;font-size:8px}.pb-plan th{text-align:left;font-size:7px;color:#8b92a2;padding:10px 5px}.pb-plan td{border-top:1px solid #eef0f4;padding:8px 5px}.pb-plan td small{display:block;color:#939aaa}.pb-plan mark{background:#f1efff;color:#6d52e7;border-radius:4px;padding:3px}.pb-bottom{display:grid;grid-template-columns:1fr 1.55fr;gap:12px;margin-top:12px}.pb-bottom .pb-card{min-height:130px}.pb-bottom>article>strong{font-size:20px}.pb-bottom p,.pb-bottom li{font-size:9px;color:#747b8b}.pb-bottom ol{padding-left:15px}.pb-bottom hr{border:0;border-top:3px solid #7057ed;width:62%;margin:7px 0}.pb-last{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.pb-last .pb-card{min-height:112px}.pb-last p{font-size:9px;border-bottom:1px solid #eff1f4;padding-bottom:5px}.pb-last small{color:#818899}.pb-footer{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:8px;margin-top:12px;padding:9px 0;font-size:8px;border-top:1px solid #e6e9ef}.pb-footer span{padding:7px;border:1px solid #e7eaf0;border-radius:5px;color:#657080} @media(max-width:900px){.pb-kpis{grid-template-columns:repeat(3,1fr)}.pb-two,.pb-bottom{grid-template-columns:1fr}.pb-promos{grid-template-columns:repeat(2,1fr)}.pb-plan-head{grid-template-columns:1fr}.pb-counts{grid-template-columns:repeat(3,1fr)}.pb-head{display:block}.pb-head-controls{margin-top:12px;flex-wrap:wrap}.pb-last{grid-template-columns:1fr}.pb-footer{grid-template-columns:1fr 1fr}.pb-period{flex-wrap:wrap}.pb-period button:last-child{margin-left:0}} @media(max-width:560px){#promos{padding:12px}.pb-kpis{grid-template-columns:repeat(2,1fr)}.pb-kpis article{padding:10px}.pb-kpis strong{font-size:15px}.pb-two{display:block}.pb-reasons{margin-top:12px}.pb-promos,.pb-attention>div{grid-template-columns:1fr}.pb-plan{overflow:auto}.pb-plan table{min-width:700px}.pb-head h2{font-size:22px}.pb-period span{width:100%}.pb-footer{grid-template-columns:1fr}.pb-alert{align-items:flex-start}.pb-alert button{white-space:nowrap}} /* Potential: facts, calculator, category plan and actions. */ #market .market-fact-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } #market .market-fact-grid article { min-height: 122px; } #market .market-page-intro { margin-bottom: 12px; } #market .market-control-bar { display:flex; align-items:center; gap:10px; min-height:48px; margin-bottom:14px; padding:8px 10px; border:1px solid var(--v2-line); border-radius:var(--v2-radius-md); background:#fff; color:var(--v2-muted); font-size:12px; } #market .market-control-bar button,#market .market-control-bar select { min-height:32px; border:1px solid var(--v2-line); border-radius:8px; background:#fff; color:var(--v2-text); font:inherit; font-weight:700; padding:0 10px; } #market .market-control-bar label { display:flex; align-items:center; gap:7px; margin-left:auto; font-weight:700; } #market .market-timezone { margin-left:auto; font-size:11px; white-space:nowrap; } #market .market-fact-grid small { margin-top:auto; } #market .market-management-strip { margin-top: 14px; } #market .market-reference-overview { display: grid; grid-template-columns: minmax(560px,1.35fr) minmax(300px,.65fr); gap: 12px; margin-top: 14px; } #market .market-reference-overview > article { min-height: 250px; } #market .market-category-structure { display: grid; gap: 12px; margin-top: 18px; } #market .market-category-structure > div { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(200px,1.5fr) 40px; align-items: center; gap: 10px; } #market .market-category-structure i { height: 8px; border-radius: 99px; background: linear-gradient(90deg,var(--v2-purple) var(--market-bar),#eceef4 var(--market-bar)); } #market .market-position-placeholder { height: 160px; display: grid; place-content: center; gap: 8px; text-align: center; } #market .market-position-placeholder strong { color: var(--v2-purple); font-size: 36px; } #market .market-position-placeholder span { max-width: 320px; color: var(--v2-muted); } #market .market-opportunity-chart { display:grid; gap:10px; margin-top:18px; } #market .market-opportunity-chart article { display:grid; grid-template-columns:minmax(90px,1fr) 54px; gap:5px 10px; align-items:center; } #market .market-opportunity-chart article span { font-size:12px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #market .market-opportunity-chart article b { text-align:right; font-size:12px; } #market .market-opportunity-chart article i { grid-column:1/-1; height:7px; border-radius:999px; background:linear-gradient(90deg,#6f54eb var(--opportunity),#eceef4 var(--opportunity)); } #market .market-opportunity-chart article small { grid-column:1/-1; color:var(--v2-muted); font-size:10px; } #market .market-opportunity-chart article.positive b { color:var(--v2-green); } #market .market-opportunity-chart article.negative b { color:var(--v2-red); } #market .market-position-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:14px; padding:18px; border:1px solid var(--v2-line); border-radius:var(--v2-radius-md); background:linear-gradient(100deg,#fff,#faf9ff); } #market .market-position-panel > div:last-child { display:flex; flex-direction:column; gap:5px; text-align:right; max-width:430px; } #market .market-position-panel strong { font-size:16px; } #market .market-position-panel span { color:var(--v2-muted); font-size:12px; } #market .market-sizing-panel { margin-top: 16px; padding: 22px; } #market .market-sizing-inputs { grid-template-columns: minmax(300px,.85fr) minmax(560px,1.65fr); } #market .market-sizing-results { grid-template-columns: repeat(3,minmax(0,1fr)); } #market .market-command-center,#market .market-action-strip,#market .dashboard-grid.lower,#market .table-panel { margin-top: 16px; } #market .market-source-panel { border-color:#d9d0ff; background:linear-gradient(135deg,#fff 0%,#fbfaff 100%); } #market .market-source-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; } #market .market-source-grid article { min-height:112px; display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--v2-line); border-radius:12px; background:#fff; } #market .market-source-grid article.connected { border-color:#a7ead0; background:#f7fffb; } #market .market-source-grid strong { font-size:13px; } #market .market-source-grid span { color:var(--v2-muted); font-size:11px; line-height:1.4; } #market .market-source-grid b { margin-top:auto; color:var(--v2-purple); font-size:11px; } #market .market-source-grid .connected b { color:var(--v2-green); } #market .market-source-note { margin:14px 0 0; color:var(--v2-muted); font-size:11px; line-height:1.5; } #market .market-sizing-gated { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:16px; } #market .market-sizing-gated input:disabled { color:#98a2b3; background:#f7f7fa; cursor:not-allowed; } #market .market-sizing-gated-results { grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0 16px; } #market .market-driver-highlight { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; margin:12px 0; padding:12px; border:1px solid var(--v2-line); border-radius:12px; background:var(--v2-purple-soft); } #market .market-driver-highlight strong { color:var(--v2-purple); font-size:24px; } #market .market-driver-highlight span { color:var(--v2-text); font-size:11px; line-height:1.45; } .autopilot-support-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:16px; margin-top:16px; } .autopilot-support-card { min-width:0; padding:18px; border:1px solid var(--v2-line); border-radius:var(--v2-radius-md); background:var(--v2-surface); box-shadow:var(--v2-shadow); } .autopilot-support-card .panel-head { margin-bottom:12px; } .autopilot-support-card h4 { margin:3px 0 5px; font-size:16px; } .autopilot-support-card p { margin:0; color:var(--v2-muted); font-size:11px; line-height:1.45; } .autopilot-agent-schedule { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .autopilot-agent-schedule > article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; padding:12px; border:1px solid var(--v2-line); border-radius:12px; background:var(--v2-canvas); } .autopilot-agent-schedule > article > div { min-width:0; } .autopilot-agent-schedule > article strong,.autopilot-agent-schedule > article small { display:block; } .autopilot-agent-schedule > article strong { font-size:12px; } .autopilot-agent-schedule > article small { color:var(--v2-muted); font-size:10px; line-height:1.4; } .autopilot-agent-schedule > article > small { grid-column:1 / -1; } .autopilot-agent-schedule .secondary-button { grid-column:1 / -1; justify-self:start; min-height:36px; } .autopilot-support-caption { display:block; margin:0 0 11px; font-size:12px; } .autopilot-telegram-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .autopilot-telegram-details article { min-width:0; padding:11px; border:1px solid var(--v2-line); border-radius:11px; background:var(--v2-canvas); } .autopilot-telegram-details span,.autopilot-telegram-details strong,.autopilot-telegram-details small { display:block; } .autopilot-telegram-details span,.autopilot-telegram-details small { color:var(--v2-muted); font-size:10px; } .autopilot-telegram-details strong { margin:4px 0; font-size:15px; } /* Canonical Potential / Market content contract. Values may be unavailable, but the visual composition never collapses when an external market denominator is absent. */ #market .market-reference-overview { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } #market .market-reference-overview > article { min-height:276px; } #market .market-donut-panel h4 { margin:3px 0 14px; font-size:13px; } #market .market-donut-layout { display:grid; grid-template-columns:148px minmax(0,1fr); align-items:center; gap:18px; } #market .market-donut { width:140px; height:140px; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(#37bd86 0 24%,#5b4df5 24% 43%,#79a6ff 43% 59%,#f3b54a 59% 76%,#ee6c6c 76% 100%); position:relative; } #market .market-donut::before { content:""; position:absolute; inset:22px; border-radius:50%; background:#fff; } #market .market-donut strong,#market .market-donut span { position:relative; z-index:1; } #market .market-donut strong { font-size:25px; line-height:1; } #market .market-donut span { margin-top:4px; color:var(--v2-muted); font-size:11px; } #market .market-category-structure { display:grid; gap:9px; } #market .market-category-structure div { display:grid; grid-template-columns:minmax(76px,1fr) 74px 26px; align-items:center; gap:7px; font-size:11px; } #market .market-category-structure i { height:6px; border-radius:999px; background:linear-gradient(90deg,#6859f4 var(--market-bar),#edf0f7 var(--market-bar)); } #market .market-category-structure strong { font-size:11px; text-align:right; } #market .market-trend-panel .market-opportunity-chart { height:187px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:end; gap:11px; padding:20px 6px 1px; border-bottom:1px solid var(--v2-line); } #market .market-opportunity-chart article { height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-width:0; } #market .market-opportunity-chart article i { height:var(--opportunity); min-height:12px; border-radius:8px 8px 2px 2px; background:linear-gradient(180deg,#7464ff,#4e3eea); } #market .market-opportunity-chart article.positive i { background:linear-gradient(180deg,#31c68b,#12a86e); } #market .market-opportunity-chart article.negative i { background:linear-gradient(180deg,#ff9e75,#ef5f5f); } #market .market-opportunity-chart article span,#market .market-opportunity-chart article small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--v2-muted); } #market .market-opportunity-chart article b { font-size:11px; color:#1f9d6b; } #market .market-position-panel { display:block; padding:18px; } #market .market-position-panel > .panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } #market .market-position-grid { display:grid; grid-template-columns:.85fr 1.6fr 1.35fr; gap:12px; margin-top:14px; } #market .market-position-grid article { min-height:125px; padding:15px; border:1px solid var(--v2-line); border-radius:10px; background:#fff; display:flex; flex-direction:column; gap:8px; } #market .market-position-grid strong { font-size:26px; } #market .market-position-grid span { font-size:11px; color:var(--v2-muted); } #market .market-position-line { height:55px; display:flex; align-items:end; gap:7px; padding:6px 2px; border-bottom:1px solid #e9e5ff; } #market .market-position-line i { flex:1; height:var(--line-height,35%); border-radius:5px 5px 0 0; background:#e5e0ff; } #market .market-position-line i:nth-child(2){--line-height:43%} #market .market-position-line i:nth-child(3){--line-height:55%} #market .market-position-line i:nth-child(4){--line-height:68%} #market .market-position-line i:nth-child(5){--line-height:62%} #market .market-position-line i:nth-child(6){--line-height:86%;background:#6958f4} #market .market-position-empty { display:flex; align-items:center; gap:10px; } #market .market-calculator-panel { margin-top:14px; padding:20px; border:1px solid #cfc8ff; border-radius:var(--v2-radius-md); background:linear-gradient(135deg,#fff 0%,#fcfbff 100%); } #market .market-calculator-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; } #market .market-calculator-head h3,#market .market-drivers-grid h3 { margin:0; font-size:16px; } #market .market-calculator-head p { margin:6px 0 0; max-width:690px; color:var(--v2-muted); font-size:12px; } #market .market-scenario-tabs { display:flex; gap:7px; margin:18px 0 14px; } #market .market-scenario-tabs button { min-height:30px; padding:0 11px; border:1px solid var(--v2-line); border-radius:7px; color:var(--v2-muted); background:#fff; font-size:11px; font-weight:700; } #market .market-scenario-tabs .active { color:#fff; background:#6352ed; border-color:#6352ed; } #market .market-calculator-grid { display:grid; grid-template-columns:minmax(250px,.82fr) minmax(0,1.55fr); gap:20px; } #market .market-calculator-grid h4 { margin:0 0 10px; font-size:12px; } #market .market-calculator-inputs { display:grid; align-content:start; gap:0; border-right:1px solid var(--v2-line); padding-right:18px; } #market .market-calculator-inputs label { min-height:42px; display:grid; grid-template-columns:minmax(110px,1fr) 96px 68px; gap:8px; align-items:center; border-bottom:1px solid #f0eff5; font-size:11px; } #market .market-calculator-inputs select,#market .market-calculator-inputs input { width:100%; min-height:27px; padding:0 7px; border:1px solid var(--v2-line); border-radius:6px; background:#fff; font:inherit; } #market .market-calculator-inputs strong { font-size:11px; } #market .market-calculator-inputs b { justify-self:end; color:#6a58ed; font-size:10px; font-weight:700; } #market .market-calculator-inputs label:nth-of-type(3) b,#market .market-calculator-inputs label:nth-of-type(4) b { color:#19a36f; } #market .input-suffix { position:relative; } #market .input-suffix input { padding-right:21px; } #market .input-suffix i { position:absolute; right:7px; top:7px; color:var(--v2-muted); font-style:normal; } #market .market-management-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #market .market-management-metrics article { min-height:87px; padding:12px; border:1px solid #edeaf8; border-radius:9px; background:#fff; display:flex; flex-direction:column; gap:5px; } #market .market-management-metrics small,#market .market-management-metrics span { color:var(--v2-muted); font-size:10px; } #market .market-management-metrics strong { font-size:17px; } #market .market-calculator-note { margin:11px 0 0; padding:10px 12px; border-radius:8px; color:#1d8a65; background:#eefaf5; font-size:11px; } #market .market-scenario-comparison { margin-top:18px; } #market .market-scenario-comparison h4 { margin:0 0 9px; font-size:12px; } #market .market-scenario-comparison table { font-size:11px; } #market .market-scenario-comparison th.selected,#market .market-scenario-comparison td.selected { background:#f2f0ff; color:#5948dd; } #market .market-lower-tables { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; } #market .market-lower-tables .table-panel { margin-top:0; min-width:0; } #market .market-lower-tables .table-toolbar { align-items:flex-start; } #market .market-lower-tables table { min-width:560px; font-size:10px; } #market .market-lower-tables th,#market .market-lower-tables td { padding:9px 8px; } #market .market-drivers-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:14px; margin-top:14px; } #market .market-drivers-grid .panel { padding:18px; } #market .market-drivers-grid ul,#market .market-drivers-grid ol { display:grid; gap:9px; margin:14px 0 0; padding-left:20px; color:var(--v2-muted); font-size:12px; } #market .market-drivers-grid li::marker { color:#6250ed; font-weight:800; } #market .market-data-footer { display:flex; justify-content:space-between; gap:12px; margin:13px 0 4px; color:var(--v2-muted); font-size:10px; } @media (max-width:1100px) { #market .market-reference-overview,#market .market-lower-tables { grid-template-columns:1fr; } #market .market-position-grid { grid-template-columns:1fr 1.5fr; } #market .market-position-grid article:last-child { grid-column:1/-1; } } @media (max-width:700px) { #market .market-control-bar { display:grid; grid-template-columns:1fr 1fr; } #market .market-control-bar > * { margin:0!important; } #market .market-fact-grid,#market .market-management-metrics,#market .market-position-grid,#market .market-calculator-grid,#market .market-drivers-grid { grid-template-columns:1fr; } #market .market-donut-layout { grid-template-columns:1fr; justify-items:center; } #market .market-calculator-inputs { padding-right:0; border-right:0; } #market .market-scenario-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; } #market .market-scenario-tabs button { min-width:0; white-space:normal; } #market .market-data-footer { display:grid; } } @media (max-width:1000px) { .autopilot-support-grid { grid-template-columns:1fr; } } @media (max-width:700px) { .autopilot-agent-schedule,.autopilot-telegram-details { grid-template-columns:1fr; } } /* SKU 360: risk summary, four decision lanes and full product table. */ #products .product-decision-summary--primary { padding: 18px; } #products .sku360-reference-overview { display: grid; grid-template-columns: minmax(230px,.75fr) minmax(720px,2.25fr); gap: 12px; margin-bottom: 14px; } #products .sku360-reference-lead,#products .sku360-reference-kpis article { border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: #fff; padding: 18px; } #products .sku360-reference-lead { display: flex; flex-direction: column; justify-content: center; } #products .sku360-reference-lead > strong { color: var(--v2-purple); font-size: 42px; line-height: 1; } #products .sku360-reference-lead > span { margin-top: 8px; font-weight: 750; } #products .sku360-reference-lead > small { margin-top: 10px; color: var(--v2-muted); } #products .sku360-reference-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; } #products .sku360-reference-kpis article { min-height: 128px; display: flex; flex-direction: column; } #products .sku360-reference-kpis strong { margin-top: 16px; font-size: 20px; } #products .sku360-reference-kpis span { margin-top: auto; color: var(--v2-muted); font-size: 11px; } #products .sku360-reference-analysis { display: grid; grid-template-columns: minmax(600px,1.65fr) minmax(280px,.75fr); gap: 12px; margin-bottom: 14px; } #products .sku360-trend-panel,#products .sku360-reasons-panel { min-height: 250px; } #products .sku360-trend-bars { height: 150px; display: flex; align-items: end; gap: 14px; padding: 18px 12px 0; border-bottom: 1px solid var(--v2-line); } #products .sku360-trend-bars span { flex: 1; min-height: 28px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg,#8b70ff,#6347e8); } #products .sku360-trend-bars span:nth-child(2n) { height: 58%; } #products .sku360-trend-bars span:nth-child(3n) { height: 82%; } #products .sku360-trend-bars span:nth-child(4n) { height: 43%; } #products .sku360-reasons-panel h3 { margin-bottom: 10px; } #products .sku360-reasons-panel article { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); } #products .sku360-reasons-panel article strong { width: 38px; font-size: 18px; } #products .sku360-reasons-panel article.red strong { color: var(--v2-red); } #products .sku360-reasons-panel article.orange strong { color: var(--v2-orange); } #products .sku360-reasons-panel article.blue strong { color: var(--v2-blue); } #products .sku360-decision-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } #products .sku360-decision-grid article { min-height: 142px; } #products .product-control-panel { margin-top: 16px; } #products .product-summary-panel,#products .product-signal-guide { margin-top: 16px; padding: 18px; } #products .product-economics-cell { min-width: 164px; } #products .product-economics-cell > span { display:inline-grid; grid-template-columns:auto auto; gap:4px; align-items:baseline; margin:0 8px 5px 0; } #products .product-economics-cell > span small { color:var(--v2-muted); font-size:10px; } #products .product-economics-cell > span strong { font-size:11px; } #products .product-economics-cell > small { display:block; color:var(--v2-muted); font-size:10px; line-height:1.35; } @media (max-width: 1100px) { #ads .ads-daily-report-metrics,#ads .ad-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } #ads .ads-decision-board,#ads .ads-campaign-card-board { grid-template-columns: repeat(2,minmax(0,1fr)); } #market .market-fact-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } #market .market-source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #products .sku360-decision-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #products .sku360-reference-overview,#products .sku360-reference-analysis { grid-template-columns: 1fr; } #products .sku360-reference-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } #promos .promo-reference-analysis,#market .market-reference-overview { grid-template-columns: 1fr; } } @media (max-width: 760px) { html,body { overflow-x: clip !important; max-width: 100%; } .sidebar:not(.open) { overflow: hidden !important; contain: layout paint; } .sidebar:not(.open) .nav-item::after,.sidebar:not(.open) .profile::after { display: none !important; } #dashboard.active,#ads.active,#actions.active,#promos.active,#market.active,#products.active { max-width: none; } #actions .action-plan-summary,#ads .ads-daily-report-metrics,#ads .ad-kpi-grid, #ads .ads-decision-board,#ads .ads-campaign-card-board,#market .market-fact-grid, #market .market-sizing-inputs,#market .market-sizing-results,#products .sku360-decision-grid { grid-template-columns: 1fr; } #products .sku360-reference-overview,#products .sku360-reference-analysis,#products .sku360-reference-kpis { grid-template-columns: 1fr; } #promos .promo-reference-analysis,#market .market-reference-overview { grid-template-columns: 1fr; } #market .market-control-bar { align-items:stretch; flex-wrap:wrap; } #market .market-control-bar label,#market .market-timezone { margin-left:0; } #market .market-fact-grid,#market .market-source-grid { grid-template-columns:1fr; } #market .market-position-panel { align-items:flex-start; flex-direction:column; gap:10px; } #market .market-position-panel > div:last-child { text-align:left; } #actions .action-state-tabs,#actions .action-plan-filters { flex-wrap: wrap !important; overflow: visible !important; } #actions .action-plan-card { grid-template-columns: 1fr !important; } #market .market-category-structure > div { grid-template-columns: 96px minmax(0,1fr) 30px; width: 100%; } #products .signal-legend { display: grid !important; grid-template-columns: 1fr !important; width: 100%; } #products .signal-legend > span { width: 100% !important; min-width: 0 !important; } } /* Stable Seller shell: all boards keep the full original menu. */ @media (min-width: 761px) { .sidebar { display: flex !important; position: fixed !important; inset: 0 auto 0 0 !important; width: 248px !important; height: 100vh !important; padding: 22px 14px 16px !important; } .main { margin-left: 248px !important; width: calc(100% - 248px) !important; } .sidebar .brand-copy,.sidebar .nav-label,.sidebar .nav-text, .sidebar .profile-copy,.sidebar .profile button { display: block !important; } .sidebar .brand { justify-content: flex-start !important; padding: 0 42px 22px 8px !important; margin: 0 !important; height: auto !important; } .sidebar .nav { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; overflow-y: auto !important; } .sidebar .nav-item { display: flex !important; width: 100% !important; min-height: 39px !important; height: auto !important; padding: 9px 10px !important; justify-content: flex-start !important; gap: 10px !important; border-radius: 9px !important; } .sidebar .nav-item .nav-text { position: static !important; opacity: 1 !important; transform: none !important; color: inherit !important; } .sidebar .nav-item::after,.sidebar .profile::after { display: none !important; } .topbar { padding-left: 24px !important; padding-right: 24px !important; } .view { padding-top: 24px; } } @media (min-width: 761px) and (max-width: 1500px) { .topbar-actions .sync { display: inline-flex !important; align-items: center; white-space: nowrap; } .topbar-command-bar .topbar-guide-button small, .topbar-command-bar .topbar-settings-button span, .topbar-command-bar .topbar-data-button span { display: none !important; } .topbar-command-bar .topbar-settings-button, .topbar-command-bar .topbar-data-button { width: 42px; padding: 0 !important; } .topbar-left { min-width: 210px; } .topbar-actions { margin-left: auto; } } /* Main Board — reference composition. The Seller shell remains untouched. */ @media (min-width: 761px) { #dashboard.active { display: grid !important; grid-template-columns: minmax(0, 2.05fr) minmax(300px, .95fr) !important; gap: 16px; max-width: 1600px; padding: 20px 24px 42px; } #dashboard > * { min-width: 0; margin: 0; } #dashboard .dashboard-result-heading { display: none !important; } #dashboard .dashboard-controlbar { display: none !important; } #dashboard .dashboard-result-heading { display: none !important; } #dashboard .dashboard-control-copy small::after { content: " · 17 июня — 16 июля 2026"; } #dashboard .dashboard-outcome-row { grid-column: 1 / -1 !important; grid-row: 2 !important; grid-template-columns: minmax(270px,.72fr) minmax(0,1.78fr); gap: 12px; } #dashboard .dashboard-hero,#dashboard .dashboard-command-grid article { min-height: 190px; } #dashboard .dashboard-hero { border-radius: 16px; padding: 22px; } #dashboard .dashboard-hero::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 28px; height: 74px; background: linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.02)); clip-path: polygon(0 76%,8% 68%,16% 74%,24% 49%,32% 52%,40% 31%,48% 55%,56% 45%,64% 58%,72% 30%,80% 38%,88% 12%,100% 22%,100% 27%,88% 18%,80% 45%,72% 37%,64% 65%,56% 52%,48% 62%,40% 39%,32% 59%,24% 56%,16% 81%,8% 75%,0 84%); } #dashboard .dashboard-command-grid { grid-template-columns: repeat(4,minmax(0,1fr)); border-radius: 16px; overflow: hidden; } #dashboard .dashboard-command-grid article { padding: 22px 18px; } #dashboard .dashboard-hero-reference-chart { position: absolute; left: 18px; right: 18px; bottom: 42px; width: calc(100% - 36px); height: 76px; overflow: visible; } #dashboard .dashboard-hero-reference-chart polyline { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #dashboard .dashboard-hero-reference-chart .previous { opacity: .55; stroke-dasharray: 5 4; } #dashboard .dashboard-hero-period { position: absolute; left: 18px; right: 18px; bottom: 10px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.82); font-size: 9px; } #dashboard .dashboard-hero-period small { margin-right: auto; } #dashboard .dashboard-hero-period span { display: inline-flex; align-items: center; gap: 4px; } #dashboard .dashboard-hero-period i { width: 8px; height: 3px; border-radius: 3px; background: #fff; } #dashboard .data-quality-bar { grid-column: 1 / -1 !important; grid-row: 1 !important; min-height: 52px; } #dashboard .dashboard-attention-strip { display: grid !important; grid-column: 1 / -1 !important; grid-row: 3 !important; min-height: 48px; } #dashboard .dashboard-funnel { grid-column: 1 !important; grid-row: 4 !important; padding: 18px; border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; } #dashboard .dashboard-funnel-steps { min-height: 132px; } #dashboard .dashboard-funnel-alert { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; margin-top: 12px; padding: 13px 14px; border: 1px solid #f2dec3; border-radius: 12px; background: #fffaf2; } #dashboard .dashboard-funnel-alert strong { font-size: 12px; } #dashboard .dashboard-funnel-alert small { color: #808694; font-size: 11px; } #dashboard .dashboard-funnel-alert button { grid-column: 2; grid-row: 1 / 3; border: 0; border-radius: 9px; padding: 9px 12px; background: #f3efff; color: #6f52dc; font-weight: 800; cursor: pointer; } #dashboard .management-signal-grid { grid-column: 2 !important; grid-row: 4 !important; display: grid; grid-template-columns: 1fr; gap: 0; padding: 18px; border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; align-content: start; } #dashboard .management-signal-grid::before { content: "Почему изменился результат"; display: block; padding: 0 0 12px; font-size: 15px; font-weight: 800; } #dashboard .management-signal-grid article { min-height: 68px; padding: 12px 4px; border: 0; border-top: 1px solid var(--v2-line); border-radius: 0; box-shadow: none; } #dashboard .management-signal-grid article:nth-of-type(n+4) { display: none; } #dashboard .management-chart-panel { grid-column: 1 / -1 !important; grid-row: 5 !important; padding: 20px; border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; } #dashboard .dashboard-chart-head { gap: 14px; } #dashboard .dashboard-chart-head > div:first-child { margin-right: auto; } #dashboard .dashboard-chart-periods { flex: 0 0 auto; } #dashboard .dashboard-chart-head > .mode-badge { display: none; } #dashboard .management-chart { min-height: 310px; } #dashboard .dashboard-line-chart svg { height: 245px; } #dashboard .dashboard-reference-chart svg { display: block; width: 100%; height: 260px; } #dashboard .dashboard-reference-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 2px 0 6px; color: #697080; font-size: 11px; } #dashboard .dashboard-reference-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 4px; background: var(--brand-500); } #dashboard .dashboard-reference-legend .green::before { background: var(--success-500, #12b76a); } #dashboard .dashboard-reference-legend .orange::before { background: var(--warning-500, #f79009); } #dashboard .dashboard-reference-legend .muted::before { height: 2px; background: #98a2b3; background-image: repeating-linear-gradient(90deg,#98a2b3 0 5px,transparent 5px 9px); } #dashboard .business-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } #dashboard .business-line.revenue { stroke: var(--brand-500); } #dashboard .business-line.buyout { stroke: var(--success-500, #12b76a); } #dashboard .business-line.ads { stroke: var(--warning-500, #f79009); } #dashboard .business-line.previous { stroke: #98a2b3; stroke-width: 1.7; stroke-dasharray: 6 5; } #dashboard .chart-axis-title { fill: #667085; font-size: 10px; font-weight: 700; } #dashboard .chart-axis-title-right { fill: #039855; } #dashboard .dashboard-chart-summary { grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 8px; } #dashboard .dashboard-chart-summary span { padding: 11px; } #dashboard .dashboard-chart-summary strong { font-size: 14px; } #dashboard .dashboard-grid { display: grid !important; grid-column: 1 / -1 !important; grid-row: 6 !important; grid-template-columns: .95fr 1.05fr !important; gap: 16px; } #dashboard .dashboard-grid .tasks-panel { order: -1; } #dashboard .dashboard-reference-table { grid-column: 1 / -1; padding: 18px; border-radius: 16px; } #dashboard .dashboard-sku-preview { grid-row: 7 !important; } #dashboard .dashboard-action-preview { grid-row: 8 !important; } #dashboard .dashboard-reference-table table { min-width: 760px; } #dashboard .dashboard-reference-table th,#dashboard .dashboard-reference-table td { padding: 11px 12px; } #dashboard .dashboard-reference-table td small { display: block; margin-top: 4px; color: #8a90a0; } #dashboard .plan-pace-panel { grid-column: 1 / -1 !important; grid-row: 9 !important; } #dashboard .dashboard-quality-body { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding-top: 16px; } #dashboard .dashboard-quality-ring { width: 118px; height: 118px; margin: auto; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle,#fff 57%,transparent 59%),conic-gradient(#29b87c 0 82%,#e9ecf2 82% 100%); } #dashboard .dashboard-quality-ring strong { font-size: 24px; } #dashboard .dashboard-quality-ring small { color: #7f8795; } #dashboard .dashboard-quality-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } #dashboard .dashboard-quality-body li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; font-size: 11px; } #dashboard .dashboard-quality-body li i { width: 9px; height: 9px; border-radius: 50%; background: #7057ee; } #dashboard .dashboard-quality-body li i.green { background: #29b87c; } #dashboard .dashboard-quality-body li i.orange { background: #f39a3f; } #dashboard .dashboard-quality-body li i.red { background: #ee6464; } } @media (max-width: 760px) { #dashboard.active { display: flex !important; flex-direction: column; } #dashboard .dashboard-controlbar { display: none !important; } #dashboard .data-quality-bar { order: 1; } #dashboard .dashboard-outcome-row { order: 2; } #dashboard .dashboard-attention-strip { display: grid !important; order: 3; } #dashboard .dashboard-funnel { order: 4; } #dashboard .management-signal-grid { order: 5; } #dashboard .management-chart-panel { order: 6; } #dashboard .dashboard-grid { display: grid !important; order: 7; grid-template-columns: 1fr !important; } #dashboard .dashboard-sku-preview { order: 8; } #dashboard .dashboard-action-preview { order: 9; } #dashboard .plan-pace-panel { order: 10; } #dashboard .dashboard-controlbar { margin-bottom: 12px; } #dashboard .dashboard-outcome-row,#dashboard .dashboard-attention-strip,#dashboard .data-quality-bar, #dashboard .dashboard-funnel,#dashboard .management-signal-grid,#dashboard .management-chart-panel, #dashboard .plan-pace-panel,#dashboard .dashboard-grid { margin-bottom: 12px; } #dashboard .dashboard-chart-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #dashboard .dashboard-quality-body { grid-template-columns: 1fr; } #dashboard .dashboard-chart-head { align-items: flex-start; flex-direction: column; } #dashboard .dashboard-chart-periods { width: 100%; overflow-x: auto; } #dashboard .dashboard-result-heading { display: none !important; } #dashboard .dashboard-hero-period span { display: none; } } /* Main Board final density follows the approved full-page reference. */ @media (min-width: 761px) { #dashboard.active { gap: 12px !important; padding: 16px 18px 28px !important; } #dashboard .data-quality-bar { min-height: 42px !important; padding: 9px 12px !important; border-radius: 11px; } #dashboard .dashboard-outcome-row { gap: 10px !important; } #dashboard .dashboard-outcome-row, body:has(#dashboard.active) #dashboard .dashboard-command-grid, body:has(#dashboard.active) #dashboard .dashboard-hero, body:has(#dashboard.active) #dashboard .dashboard-command-grid article { height: 164px !important; min-height: 164px !important; } #dashboard .dashboard-hero,#dashboard .dashboard-command-grid article { min-height: 164px !important; height: 164px; } #dashboard .dashboard-hero { padding: 16px !important; } #dashboard .dashboard-hero-copy > strong { font-size: 27px !important; } #dashboard .dashboard-hero-reference-chart { height: 64px; bottom: 34px; } #dashboard .dashboard-hero-period { bottom: 7px; } #dashboard .dashboard-command-grid article { padding: 16px 14px !important; } #dashboard .dashboard-command-grid article > strong { font-size: 21px !important; } #dashboard .dashboard-command-grid article::after { content: ""; position: absolute; right: 12px; top: 54px; width: 24px; height: 24px; background: #7c5cfa; mask: var(--dashboard-kpi-icon) center/contain no-repeat; } #dashboard .dashboard-command-grid article:nth-child(1) { --dashboard-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='m8 12 2.5 2.5L16 9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(2) { --dashboard-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 11 18-5v12L3 13zM11 16a3 3 0 0 1-6 0v-3' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(3) { --dashboard-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(4) { --dashboard-kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='10' cy='8' rx='6' ry='3' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='M4 8v5c0 1.7 2.7 3 6 3 1.1 0 2.1-.1 3-.4M14 13l2 2 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(2)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 11 18-5v12L3 13v-2zM11.6 16.8a3 3 0 1 1-1.2-5.6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(3)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 8H7' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-command-grid article:nth-child(4)::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } #dashboard .dashboard-attention-strip { min-height: 42px !important; padding: 9px 12px !important; border-color: #f1d6b1 !important; background: #fffaf2 !important; } #dashboard .dashboard-funnel { min-height: 294px !important; height: 294px !important; padding: 14px !important; overflow: hidden; } #dashboard .dashboard-funnel-head { margin-bottom: 10px; } #dashboard .dashboard-funnel-head h3 { font-size: 16px; } #dashboard .dashboard-funnel-head p { margin: 3px 0 0; color: #868c99; font-size: 10px; } #dashboard .dashboard-funnel-steps { min-height: 112px !important; } #dashboard .dashboard-funnel-steps { gap: 10px !important; background: transparent !important; border: 0 !important; overflow: visible !important; } #dashboard .dashboard-funnel-steps article { min-height: 112px !important; padding: 12px !important; border: 1px solid var(--v2-line) !important; border-radius: 12px !important; background: #fff !important; position: relative; } #dashboard .dashboard-funnel-steps article::before { top: 12px !important; bottom: 12px !important; width: 3px !important; border-radius: 0 4px 4px 0 !important; } #dashboard .dashboard-funnel-steps article[role="link"] { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } #dashboard .dashboard-funnel-steps article[role="link"]:hover { border-color: #d6c2ff !important; box-shadow: 0 6px 18px rgba(16,24,40,.06); transform: translateY(-1px); } #dashboard .dashboard-funnel-steps article[role="link"]:focus-visible { outline: 3px solid rgba(124,92,250,.22); outline-offset: 2px; } #dashboard .dashboard-funnel-steps article:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 46%; z-index: 3; width: 18px; height: 18px; background: #7c5cfa; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } #dashboard .dashboard-funnel-steps article strong { font-size: 20px !important; } #dashboard .dashboard-funnel-alert { margin-top: 9px; padding: 10px 12px; } #dashboard .dashboard-economics-funnel { display: none !important; } #dashboard .management-signal-grid { min-height: 294px; height: 294px; padding: 14px !important; } #dashboard .management-signal-grid::before { padding-bottom: 8px; font-size: 15px; } #dashboard .management-signal-grid article { min-height: 56px !important; padding: 9px 4px !important; } #dashboard .management-signal-grid article { position: relative; padding-left: 34px !important; padding-right: 28px !important; } #dashboard .management-signal-grid article::before { content: ""; position: absolute; left: 4px; top: 12px; width: 22px; height: 22px; background: #f04438; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cpath d='M12 8v4M12 16h.01' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } #dashboard .management-signal-grid article::after { content: ""; position: absolute; right: 6px; top: 15px; width: 18px; height: 18px; background: #667085; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } #dashboard .management-signal-grid article strong { font-size: 11px; } #dashboard .management-signal-grid article small { font-size: 10px; } #dashboard .management-chart-panel { height: 342px !important; min-height: 342px !important; padding: 14px !important; overflow: hidden; } #dashboard .management-chart { min-height: 0 !important; } #dashboard .dashboard-reference-chart svg { height: 230px !important; } #dashboard .dashboard-reference-legend { margin-top: 0; font-size: 12px; } #dashboard .chart-axis,#dashboard .chart-axis-title { font-size: 12px !important; } #dashboard .business-line { stroke-width: 3.2; } #dashboard .business-line.previous { stroke-width: 2; } #dashboard .business-point { stroke: #fff; stroke-width: 1.8; } #dashboard .business-point.revenue { fill: var(--brand-500); } #dashboard .business-point.ads { fill: var(--warning-500); } #dashboard .business-point.buyout { fill: var(--success-500); } #dashboard .management-chart-panel { height: 420px !important; min-height: 420px !important; } #dashboard .dashboard-funnel-steps article::before { background: #d0d5dd !important; } #dashboard .dashboard-chart-summary span { min-height: 76px; } #dashboard .dashboard-grid { min-height: 218px; } #dashboard .dashboard-grid > .panel { padding: 14px !important; min-height: 218px; } #dashboard #dailyTasks .task { min-height: 52px; padding: 8px 0; } #dashboard #dailyTasks .task:nth-child(n+4) { display: none; } #dashboard .dashboard-quality-ring { width: 104px; height: 104px; } #dashboard .dashboard-reference-table { padding: 12px 14px !important; } #dashboard .dashboard-sku-preview { height: 238px; overflow: hidden; } #dashboard .dashboard-action-preview { height: 220px; overflow: hidden; } #dashboard .dashboard-reference-table .panel-head { margin-bottom: 6px; } #dashboard .dashboard-reference-table th,#dashboard .dashboard-reference-table td { padding: 5px 9px !important; } #dashboard .dashboard-reference-table th { font-size: 9px; } #dashboard .dashboard-reference-table td { font-size: 10px; } #dashboard .dashboard-product-identity { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; align-items: center; } #dashboard .dashboard-product-identity .product-thumb { width: 32px; height: 38px; border-radius: 7px; } #dashboard .plan-pace-panel { display: none !important; } #dashboard .dashboard-reference-footer { grid-column: 1 / -1; grid-row: 9; display: flex; align-items: center; gap: 20px; padding: 12px 2px 0; border-top: 1px solid var(--v2-line); color: #667085; font-size: 10px; } #dashboard .dashboard-reference-footer span { display: inline-flex; align-items: center; gap: 6px; } #dashboard .dashboard-reference-footer .ds-icon { width: 16px; height: 16px; flex: 0 0 auto; } #dashboard .dashboard-reference-footer span:nth-last-child(2) { margin-left: auto; } /* Explicit semantic SVGs keep KPI iconography consistent when mask rendering is unavailable. */ #dashboard .dashboard-command-grid article::after { display: none !important; } #dashboard .dashboard-command-grid .dashboard-kpi-icon { position: absolute; right: 16px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 9px; background: var(--v2-purple-soft); color: var(--v2-purple); } #dashboard .dashboard-command-grid .dashboard-kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } #dashboard .dashboard-command-grid article:nth-child(2) .dashboard-kpi-icon { color: #6e4ef1; background: #f1edff; } #dashboard .dashboard-command-grid article:nth-child(3) .dashboard-kpi-icon { color: #2e90fa; background: #eff8ff; } #dashboard .dashboard-command-grid article:nth-child(4) .dashboard-kpi-icon { color: #7c5cfa; background: #f5f3ff; } @media (max-width: 760px) { #dashboard .dashboard-command-grid .dashboard-kpi-icon { right: 12px; top: 14px; } } } @media (max-width: 760px) { #dashboard .dashboard-reference-footer { order: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 2px; color: #667085; font-size: 10px; } #dashboard .dashboard-reference-footer span { display: inline-flex; align-items: center; gap: 6px; } #dashboard .dashboard-reference-footer .ds-icon { width: 16px; height: 16px; } #dashboard .plan-pace-panel { display: none !important; } } /* RC14b: honest Lamoda API setup, never OAuth-login imitation. */ .auth-lamoda-connect i { color: #b9a7ff; font-style: normal; font-size: 0; } .auth-lamoda-connect svg, .auth-oauth-guide .landing-primary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .auth-provider-mark svg { width: 22px; height: 22px; } .auth-provider-prerequisites { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(185,171,255,.16); border-radius: 12px; background: rgba(255,255,255,.025); color: #9fa2b2; font: 400 10px/1.45 Onest,sans-serif; } .auth-provider-prerequisites strong { color: #d9d5e8; font-weight: 650; } .auth-oauth-guide .landing-primary { border: 0; } .auth-oauth-guide .landing-primary span { display: inline-grid; place-items: center; } .lamoda-connect-state { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8f7ff; color: #667085; font-size: 12px; } .lamoda-connect-state strong { color: #6847e8; } .lamoda-connect-state[data-state="connected"] { background: #effbf5; border-color: #cceedd; } .lamoda-connect-state[data-state="connected"] strong { color: #119a63; } .lamoda-connect-state[data-state="expired"],.lamoda-connect-state[data-state="reconnect"] { background: #fff8ec; border-color: #f8dfb3; } .lamoda-connect-state[data-state="expired"] strong,.lamoda-connect-state[data-state="reconnect"] strong { color: #d57800; } .lamoda-connect-state[data-state="error"] { background: #fff3f3; border-color: #ffd1d1; } .lamoda-connect-state[data-state="error"] strong { color: #d83d4d; } @media (max-width: 560px) { .lamoda-connect-state { grid-template-columns: 1fr; } } @media (max-width: 720px) { #dashboard .dashboard-reference-chart, #dashboard .dashboard-reference-chart svg { max-width: 100%; overflow: hidden; contain: inline-size paint; } } /* P0 mobile board: compact desktop tables are replaced by readable summary cards. */ .mobile-row-details { display: none; } @media (max-width: 480px) { #dashboard.active,#actions.active,#settings.active { padding-left: 16px !important; padding-right: 16px !important; } #dashboard,#actions,#settings { font-size: 16px; } #dashboard button,#actions button,#settings button,#dashboard summary { min-height: 44px; } #dashboard .dashboard-outcome-row { grid-template-columns: 1fr !important; } #dashboard .dashboard-hero { min-height: 236px !important; } #dashboard .dashboard-command-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; border-radius: 14px; } #dashboard .dashboard-command-grid article { min-height: 148px !important; padding: 16px 14px !important; } #dashboard .dashboard-command-grid article > span:not(.dashboard-kpi-icon),#dashboard .dashboard-command-grid article small { font-size: 13px !important; line-height: 1.35; } #dashboard .dashboard-command-grid article > strong { font-size: 22px !important; } #dashboard .dashboard-attention-strip { grid-template-columns: 1fr !important; gap: 8px; padding: 14px !important; } #dashboard .dashboard-attention-strip button { justify-self: start; padding: 0 12px; } #dashboard .dashboard-funnel { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 16px !important; } #dashboard .dashboard-funnel-head { align-items: flex-start; gap: 8px; } #dashboard .dashboard-funnel-head h3 { font-size: 20px !important; } #dashboard .dashboard-funnel-head p,#dashboard .dashboard-funnel-head small { font-size: 14px !important; line-height: 1.4; } #dashboard .dashboard-funnel-steps { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; gap: 10px !important; } #dashboard .dashboard-funnel-steps article { min-height: 128px !important; padding: 16px 16px 16px 20px !important; } #dashboard .dashboard-funnel-steps article::after { display: none !important; } #dashboard .dashboard-funnel-steps article span,#dashboard .dashboard-funnel-steps article small,#dashboard .dashboard-funnel-steps article em { font-size: 14px !important; line-height: 1.35; } #dashboard .dashboard-funnel-steps article strong { font-size: 26px !important; } #dashboard .dashboard-funnel-alert { grid-template-columns: 1fr !important; padding: 14px !important; } #dashboard .dashboard-funnel-alert strong,#dashboard .dashboard-funnel-alert small { font-size: 14px !important; line-height: 1.4; } #dashboard .dashboard-funnel-alert button { grid-column: auto; grid-row: auto; justify-self: start; min-height: 44px; } #dashboard .management-chart-panel { height: auto !important; min-height: 0 !important; padding: 16px !important; overflow: visible !important; } #dashboard .dashboard-chart-head h3 { font-size: 20px !important; } #dashboard .dashboard-reference-legend { gap: 8px 12px; font-size: 12px !important; } #dashboard .dashboard-reference-legend span { display: inline-flex; align-items: center; white-space: nowrap; } #dashboard .dashboard-reference-chart { overflow-x: auto !important; padding-bottom: 4px; } #dashboard .dashboard-reference-chart svg { width: 720px !important; max-width: none !important; height: 250px !important; } #dashboard .business-line { fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; } #dashboard .business-line.revenue { stroke: var(--brand-500, #7c5cfa); } #dashboard .business-line.ads { stroke: var(--warning-500, #f79009); } #dashboard .business-line.buyout { stroke: var(--success-500, #12b76a); } #dashboard .business-line.previous { stroke: #98a2b3; stroke-width: 2px; stroke-dasharray: 6 5; } #dashboard .business-point { stroke: #fff; stroke-width: 1.5; } #dashboard .business-point.revenue { fill: var(--brand-500, #7c5cfa); } #dashboard .business-point.ads { fill: var(--warning-500, #f79009); } #dashboard .business-point.buyout { fill: var(--success-500, #12b76a); } #dashboard .chart-grid { stroke: #e8eaf0; stroke-width: 1; } #dashboard .chart-axis,#dashboard .chart-axis-title { fill: #667085; font-size: 12px; } #dashboard .chart-axis-title-right { fill: #039855; } #dashboard .dashboard-chart-summary { grid-template-columns: 1fr 1fr !important; gap: 10px; } #dashboard .dashboard-chart-summary span { min-height: 82px; padding: 14px !important; } #dashboard .dashboard-chart-summary small { font-size: 13px; } #dashboard .dashboard-chart-summary strong { font-size: 18px !important; } #dashboard .dashboard-reference-table { height: auto !important; overflow: visible !important; padding: 16px !important; } #dashboard .dashboard-reference-table .panel-head { align-items: flex-start; gap: 10px; } #dashboard .dashboard-reference-table .panel-head h3 { font-size: 20px; } #dashboard .dashboard-reference-table .panel-head p { font-size: 14px; line-height: 1.4; } #dashboard .dashboard-reference-table .table-wrap { overflow: visible; } #dashboard .dashboard-reference-table table { min-width: 0 !important; width: 100%; } #dashboard .dashboard-reference-table thead { display: none; } #dashboard .dashboard-reference-table tbody { display: grid; gap: 12px; } #dashboard .dashboard-reference-table tbody tr { display: block; border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; } #dashboard .dashboard-reference-table tbody td { display: none !important; padding: 0 !important; font-size: 16px !important; } #dashboard .dashboard-reference-table tbody td:first-child { display: block !important; } #dashboard .dashboard-product-identity { grid-template-columns: 48px minmax(0,1fr) !important; gap: 12px; padding: 14px; } #dashboard .dashboard-product-identity .product-thumb { width: 44px !important; height: 52px !important; } #dashboard .dashboard-product-identity strong { font-size: 16px; line-height: 1.3; } #dashboard .dashboard-product-identity small { font-size: 13px !important; } #dashboard .dashboard-action-preview tbody td:first-child > strong { display: block; padding: 16px 16px 6px; font-size: 16px; line-height: 1.35; } #dashboard .mobile-row-details { display: block; border-top: 1px solid var(--v2-line); } #dashboard .mobile-row-details summary { display: flex; align-items: center; padding: 0 16px; color: var(--v2-purple); cursor: pointer; font-size: 15px; font-weight: 750; list-style: none; } #dashboard .mobile-row-details summary::-webkit-details-marker { display: none; } #dashboard .mobile-row-details summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; } #dashboard .mobile-row-details[open] summary::after { content: "−"; } #dashboard .mobile-row-details dl { display: grid; gap: 8px; margin: 0; padding: 0 16px 16px; } #dashboard .mobile-row-details:not([open]) dl { display: none; } #dashboard .mobile-row-details dl div { display: grid; grid-template-columns: minmax(108px,.8fr) minmax(0,1.2fr); gap: 10px; padding-top: 8px; border-top: 1px solid #f0f1f5; } #dashboard .mobile-row-details dt { color: #667085; font-size: 13px; } #dashboard .mobile-row-details dd { margin: 0; color: #1d2939; font-size: 14px; font-weight: 650; text-align: right; overflow-wrap: anywhere; } #dashboard .dashboard-reference-footer { grid-template-columns: 1fr !important; font-size: 13px !important; } #actions .page-intro { gap: 12px; } #actions .page-intro h2,#settings .page-intro h2 { font-size: 28px; } #actions .page-intro > button { width: 100%; } #actions .action-card,#actions .queue-item,#settings .panel { min-width: 0; } #settings .settings-tabs { overflow-x: auto; justify-content: flex-start; } #settings .settings-tabs button { flex: 0 0 auto; min-height: 44px; } } .sidebar-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); } .auth-card { max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; } .ds-inline-icon,.topbar-guide-button span { display: inline-grid; place-items: center; } .ds-inline-icon svg,.topbar-guide-button svg,.knowledge-search > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* P1 data-readiness: wide operational registers remain contained and explain their state. */ #orders .table-wrap,#operations .table-wrap,#imports .table-wrap { position:relative; } @media (min-width:761px) { #orders .table-wrap::after,#operations .table-wrap::after,#imports .table-wrap::after { content:"⇆ Прокрутите таблицу"; position:sticky; left:12px; bottom:8px; display:inline-block; padding:5px 8px; border:1px solid #e8eaf2; border-radius:999px; background:rgba(255,255,255,.94); color:#667085; font-size:10px; pointer-events:none; } } @media (max-width:760px) { #orders .responsive-data-table tbody tr,#operations .responsive-data-table tbody tr,#imports .responsive-data-table tbody tr { display:grid; gap:6px; padding:12px; } #orders .responsive-data-table td,#operations .responsive-data-table td,#imports .responsive-data-table td { display:grid; grid-template-columns:minmax(104px,.75fr) minmax(0,1.25fr); gap:8px; } #orders .responsive-data-table td::before,#operations .responsive-data-table td::before,#imports .responsive-data-table td::before { content:attr(data-label); color:#98a2b3; font-size:11px; font-weight:700; } } /* Rules: the screen is an evidence register in shadow mode, never a write control. */ #rules .rules-list article { align-items:start; } #rules .rule-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } #rules .rule-heading h3 { margin:0; } #rules .rule-contract { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; margin:12px 0 8px; } #rules .rule-contract div { min-width:0; } #rules .rule-contract dt { color:#98a2b3; font-size:10px; font-weight:700; } #rules .rule-contract dd { margin:2px 0 0; color:#475467; font-size:11px; line-height:1.4; overflow-wrap:anywhere; } #rules .rule-audit-link { display:inline-flex; color:var(--v2-purple); font-size:11px; font-weight:700; text-decoration:none; } #rules .shadow-switch { display:grid; justify-items:end; gap:6px; cursor:not-allowed; } #rules .shadow-switch input[disabled] + i { opacity:.58; } #rules .shadow-switch span { color:#98a2b3; font-size:10px; font-weight:700; white-space:nowrap; } #guide .knowledge-collections [role="tab"]:focus-visible, #guide .guide-lesson-tabs [role="tab"]:focus-visible { outline:3px solid rgba(110,78,241,.32); outline-offset:2px; } @media (max-width:760px) { #rules .rules-list article { grid-template-columns:auto minmax(0,1fr); } #rules .shadow-switch { grid-column:2; justify-items:start; } #rules .rule-contract { grid-template-columns:1fr; gap:7px; } } /* P0 mobile repair — the board contracts below are deliberately scoped to the three mobile surfaces. Desktop composition remains governed by the rules above. */ @media (max-width:480px) { #dashboard.active,#actions.active,#settings.active { width:100%; min-width:0; padding:16px 14px 32px !important; } #dashboard *,#actions *,#settings * { min-width:0; } /* Main board: decisions read top-to-bottom; no desktop matrix is retained. */ body:has(#dashboard.active) #dashboard .dashboard-command-grid { grid-template-columns:1fr !important; } #dashboard .dashboard-command-grid article { min-height:132px !important; padding:16px 18px !important; } #dashboard .dashboard-command-grid article + article { border-left:0 !important; border-top:1px solid var(--v2-line) !important; } #dashboard .dashboard-command-grid article > strong { max-width:calc(100% - 44px); overflow-wrap:anywhere; } #dashboard .management-signal-grid { padding:16px !important; } #dashboard .management-signal-grid article { min-height:unset !important; padding:14px 0 !important; } #dashboard .management-signal-grid strong,#dashboard .management-signal-grid small { overflow-wrap:anywhere; } #dashboard .dashboard-chart-periods { max-width:100%; } #dashboard .dashboard-chart-periods button { min-height:44px; flex:0 0 auto; } #dashboard .dashboard-grid { gap:12px !important; } #dashboard .dashboard-reference-table tbody tr { overflow:hidden; } #dashboard .dashboard-product-identity { align-items:start; } #dashboard .mobile-row-details dl div { grid-template-columns:1fr !important; gap:3px; } #dashboard .mobile-row-details dd { text-align:left; } /* Plan: each decision is a complete card, not a compressed three-column row. */ #actions .action-plan-summary { grid-template-columns:1fr !important; gap:10px; } #actions .action-plan-summary > * { min-height:96px; } #actions .action-center,#actions .decision-queue,#actions .weekly-sprint-panel, #actions .actions-secondary-panel,#actions .action-log-panel { padding:14px !important; } #actions .action-plan-filters,#actions .action-state-tabs { display:grid !important; grid-template-columns:1fr 1fr; width:100%; gap:8px; } #actions .action-plan-filters > *,#actions .action-state-tabs > * { width:100%; min-height:44px; margin:0 !important; } #actions .action-plan-card,#actions .decision-card,#actions .action-row { display:grid !important; grid-template-columns:1fr !important; min-height:0 !important; gap:10px; padding:16px !important; } #actions .action-plan-card > *,#actions .decision-card > *,#actions .action-row > * { width:auto !important; max-width:100%; } #actions .action-plan-card p,#actions .decision-card p,#actions .action-row p, #actions .action-plan-card small,#actions .decision-card small,#actions .action-row small { overflow-wrap:anywhere; } #actions .action-plan-card button,#actions .decision-card button,#actions .action-row button { justify-self:start; } #actions .action-plan-insights { grid-template-columns:1fr !important; } #actions .action-insight-head { display:grid; grid-template-columns:1fr auto; } #actions .action-insight-bars > div { grid-template-columns:minmax(0,1fr) auto; } /* Account overview and subscription: every control gets its own readable row. */ #settings .settings-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; margin:0 0 14px; padding:4px; } #settings .settings-tabs button { min-height:52px; padding:6px 8px; white-space:normal; line-height:1.2; } #settings .settings-status-grid,#settings .settings-overview-cards,#settings .settings-team-summary, #settings .settings-tab-kpis,#settings .subscription-pricing-grid,#settings .subscription-calculator-results, #settings .subscription-calculator-inputs { grid-template-columns:1fr !important; } #settings .settings-overview-main,#settings .settings-attention,#settings .settings-access-panel, #settings .settings-subscription-panel,#settings .settings-runbook,#settings .settings-account-alert { padding:14px !important; } #settings .settings-overview-main .panel-head,#settings .settings-subscription-panel .panel-head, #settings .settings-access-panel .panel-head { align-items:flex-start; flex-direction:column; } #settings .subscription-plan-switch { display:grid !important; grid-template-columns:1fr !important; gap:8px; } #settings .subscription-plan-switch label { min-height:64px; } #settings .subscription-module-grid { grid-template-columns:1fr !important; } #settings .subscription-module { grid-template-columns:auto minmax(0,1fr) !important; } #settings .subscription-module em { grid-column:2; justify-self:start; } #settings .subscription-pricing-grid article,#settings .subscription-calculator-results article { min-height:0; } #settings .subscription-calculator-inputs label { width:100%; } #settings .subscription-calculator-inputs input { width:100%; min-height:44px; } #settings .settings-runbook { gap:10px; } /* Landing and demo stay a mobile screen, rather than a cropped desktop hero. */ .landing-screen { min-height:100svh; overflow-x:clip; } .landing-nav { padding:18px 16px; } .landing-brand { gap:10px; } .landing-brand img { width:42px; height:42px; } .landing-brand strong { font-size:15px; } .landing-brand small { margin-top:2px; font-size:9px; } .landing-login { min-height:44px; padding:0 12px; border-radius:12px; font-size:13px; } .landing-mobile-slide { padding-left:20px !important; padding-right:20px !important; } .mobile-slide-copy h2 { font-size:32px !important; line-height:1.12 !important; } .mobile-slide-copy p { font-size:15px !important; line-height:1.5 !important; } .landing-primary,.landing-secondary { min-height:48px; font-size:15px; } .auth-modal { align-items:flex-start; overflow-y:auto; padding:16px; } .auth-card { width:100%; max-height:none; margin:auto 0; padding:24px 20px; border-radius:20px; } .auth-card input,.auth-card select { min-height:48px; font-size:16px; } .auth-card .landing-primary { min-height:50px; } /* P1: each mobile Guide entry is labelled and the dashboard never establishes a wider layout through a chart, table or summary child. */ #dashboard.active { overflow-x:clip; } #dashboard .dashboard-reference-chart,#dashboard .dashboard-reference-chart svg, #dashboard .dashboard-chart-summary,#dashboard .dashboard-grid { max-width:100%; } } .mobile-guide-link { display:none !important; } @media (max-width:760px) { .mobile-guide-link { display:flex !important; min-height:44px !important; } } @media (min-width:761px) { .sidebar .mobile-guide-link { display:none !important; } } /* ------------------------------------------------------------------------- Canon v3 shell consolidation Legacy stylesheet rules predate the common shell and deliberately remain available for un-migrated markup. This final, scoped layer is the single authority for the application shell, typography, semantic chips and icon treatment. It prevents a screen-specific rule from changing navigation density or page width. ------------------------------------------------------------------------- */ :root { --ds-canvas: #f6f7fb; --ds-surface: #ffffff; --ds-sidebar: #0b1020; --ds-ink: #1e2430; --ds-text: #667085; --ds-muted: #98a2b3; --ds-line: #e8eaf2; --ds-purple: #7c5cfa; --ds-purple-soft: #f1edff; --ds-green: #12b76a; --ds-green-soft: #ecfdf3; --ds-orange: #f79009; --ds-orange-soft: #fff7ed; --ds-red: #f04438; --ds-red-soft: #fef3f2; --ds-blue: #2e90fa; --ds-blue-soft: #eff8ff; --ds-sidebar-wide: 248px; --ds-sidebar-compact: 72px; --ds-topbar-height: 72px; --ds-content-max: 1680px; } html, body { min-width: 0; background: var(--ds-canvas); } body { color: var(--ds-ink); font-family: Onest, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.55; } button, input, select, textarea { font: inherit; } button, [role="button"], input, select, textarea, summary { min-height: 38px; } /* Desktop: permanent full rail. No board is permitted to alter its width. */ @media (min-width: 1280px) { .sidebar { position: fixed !important; inset: 0 auto 0 0 !important; display: flex !important; width: var(--ds-sidebar-wide) !important; height: 100dvh !important; padding: 20px 14px 16px !important; background: linear-gradient(180deg, #0b1020 0%, #080d17 64%, #0b1020 100%) !important; } .main { margin-left: var(--ds-sidebar-wide) !important; width: calc(100% - var(--ds-sidebar-wide)) !important; } .topbar { min-height: var(--ds-topbar-height); height: var(--ds-topbar-height); } .view { max-width: var(--ds-content-max); margin-inline: auto; } .sidebar-toggle { display: none !important; } body.sidebar-collapsed .sidebar { width: var(--ds-sidebar-wide) !important; padding: 20px 14px 16px !important; } body.sidebar-collapsed .main { margin-left: var(--ds-sidebar-wide) !important; width: calc(100% - var(--ds-sidebar-wide)) !important; } body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-text, body.sidebar-collapsed .profile-copy, body.sidebar-collapsed .profile button { display: block !important; position: static !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } body.sidebar-collapsed .nav { align-items: stretch !important; margin-top: 0 !important; } body.sidebar-collapsed .nav-item { width: 100% !important; min-height: 39px !important; padding: 9px 10px !important; justify-content: flex-start !important; } body.sidebar-collapsed .nav-item b, body.sidebar-collapsed .nav-item i { position: static; min-width: 28px; height: auto; padding: 4px 8px; font-size: 11px; } body.sidebar-collapsed .nav-item b::after, body.sidebar-collapsed .nav-item i::after { display: none; } } /* Tablet: a deliberately compact 72px rail, not a half-collapsed desktop. */ @media (min-width: 761px) and (max-width: 1279px) { .sidebar { position: fixed !important; inset: 0 auto 0 0 !important; display: flex !important; width: var(--ds-sidebar-compact) !important; height: 100dvh !important; padding: 16px 10px !important; background: linear-gradient(180deg, #0b1020, #080d17 70%, #0b1020) !important; } .main { margin-left: var(--ds-sidebar-compact) !important; width: calc(100% - var(--ds-sidebar-compact)) !important; } .sidebar .brand { justify-content: center !important; padding: 0 0 20px !important; } .sidebar .brand-copy, .sidebar .nav-label, .sidebar .nav-text, .sidebar .profile-copy, .sidebar .profile button, .sidebar-toggle { display: none !important; } .sidebar .nav { align-items: center !important; gap: 6px !important; overflow-y: auto !important; } .sidebar .nav-item { width: 48px !important; min-height: 48px !important; padding: 0 !important; justify-content: center !important; border-radius: 12px !important; } .sidebar .nav-item b, .sidebar .nav-item i { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 2px 4px; font-size: 0; } .sidebar .nav-item b::after, .sidebar .nav-item i::after { content: ""; display: block; width: 5px; height: 5px; margin: 3px auto; border-radius: 50%; background: currentColor; } .sidebar .profile { display: flex !important; justify-content: center !important; padding: 12px 0 0 !important; } .topbar { min-height: var(--ds-topbar-height); height: var(--ds-topbar-height); } } /* Mobile uses a labelled drawer. It never reserves horizontal desktop space. */ @media (max-width: 760px) { .sidebar { width: min(320px, 88vw) !important; padding: 20px 14px 16px !important; } .sidebar:not(.open) { display: none !important; } .sidebar.open { display: flex !important; } .main { margin-left: 0 !important; width: 100% !important; } .topbar { min-height: 64px; height: 64px; } button, [role="button"], input, select, textarea, summary { min-height: 44px; } } /* One Lucide-compatible outline family. Text glyphs inside icon containers are visually suppressed; all navigation entries already provide SVG + aria. */ .nav-item .nav-icon, .topbar .icon-button, .sidebar-toggle, .task-icon, .rule-icon, .ds-icon, .inline-ds-icon, .topbar-guide-button span { font-size: 0; } .nav-item .nav-icon svg, .topbar .icon-button svg, .sidebar-toggle svg, .task-icon svg, .rule-icon svg, .ds-icon svg, .inline-ds-icon svg, .topbar-guide-button svg, .knowledge-search > svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .nav-item .nav-icon { width: 28px; height: 28px; flex: 0 0 28px; color: #9ea8ba; } .nav-item .nav-icon svg { width: 20px; height: 20px; } .nav-item:hover .nav-icon, .nav-item.active .nav-icon { color: #d9d1ff; } .nav-item.active .nav-icon { background: rgba(124,92,250,.16); } .topbar .icon-button svg, .sidebar-toggle svg { width: 20px; height: 20px; } .task-icon svg, .rule-icon svg { width: 18px; height: 18px; } /* Semantic state is never colour-only: a compact indicator accompanies its text. */ .status, .status-chip, .semantic-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 11px; font-weight: 750; line-height: 1.2; } .status::before, .status-chip::before, .semantic-chip::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; } .status.green, .status.success, .semantic-chip.success { color: var(--ds-green) !important; background: var(--ds-green-soft) !important; border-color: #d1fadf; } .status.orange, .status.amber, .status.warning, .semantic-chip.warning { color: #c56a00 !important; background: var(--ds-orange-soft) !important; border-color: #fed7aa; } .status.red, .status.danger, .semantic-chip.danger { color: var(--ds-red) !important; background: var(--ds-red-soft) !important; border-color: #fee4e2; } .status.blue, .status.info, .semantic-chip.info { color: var(--ds-blue) !important; background: var(--ds-blue-soft) !important; border-color: #d1e9ff; } .status.violet, .semantic-chip.neutral { color: var(--ds-purple) !important; background: var(--ds-purple-soft) !important; border-color: #e4ddff; } .positive, .status.green > .positive { color: var(--ds-green) !important; } .negative, .status.red > .negative { color: var(--ds-red) !important; } /* Replace textual arrow/plus pseudo-controls with small SVG masks. */ #autopilot .autopilot-agent-row:not(:last-child)::after { content: ""; width: 16px; height: 16px; top: 58px; background: var(--ds-purple); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } #dashboard .mobile-row-details summary::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } #dashboard .mobile-row-details[open] summary::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Calm, accessible motion: state feedback only, never scale/bounce. */ @media (prefers-reduced-motion: no-preference) { .nav-item, .primary-button, .secondary-button, .filter-button, .icon-button, .panel, .metric-card, .status, .status-chip, .semantic-chip { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .nav-item:hover, .primary-button:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } :where(button, a, input, select, textarea, summary, [role="tab"]):focus-visible { outline: 3px solid rgba(124,92,250,.34); outline-offset: 2px; } /* Guide / entry repair: keep the page header as one intentional reading unit. The base stylesheet spreads its action to the far edge of the workspace, which leaves a visually detached CTA and an unnecessarily narrow copy rail. */ #guide .guide-intro { display: grid; grid-template-columns: minmax(0, 820px) auto; justify-content: start; align-items: end; gap: 16px; } #guide .guide-intro > div { min-width: 0; max-width: 820px; } #guide .guide-intro > .primary-button { align-self: end; white-space: nowrap; } #guide .guide-context-card { grid-template-columns: auto minmax(0, 760px) auto; justify-content: start; } #guide .guide-context-card > div { min-width: 0; } /* Guide v3: an operating navigator, not a second documentation product. */ #guide .guide-library { gap: 16px; } #guide .guide-course, #guide .guide-scenarios, #guide .guide-library-centers, #guide .guide-plain-metrics, #guide .guide-safety-card, #guide .guide-start-card, #guide .guide-legacy { display: none !important; } #guide .guide-command-deck { padding: 20px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: var(--v2-surface); box-shadow: var(--v2-shadow); } #guide .guide-command-deck .section-heading { margin-bottom: 14px; } #guide .guide-command-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #guide .guide-command-grid button { display: grid; min-width: 0; min-height: 128px; align-content: start; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--v2-line); border-radius: 14px; background: var(--v2-surface-soft); color: var(--v2-ink); text-align: left; cursor: pointer; } #guide .guide-command-grid button:hover, #guide .guide-command-grid button:focus-visible { border-color: var(--brand-300); background: var(--brand-50); box-shadow: 0 6px 18px rgba(91, 58, 222, .08); } #guide .guide-command-grid .status { min-height: 24px; padding: 4px 7px; } #guide .guide-command-grid strong { font-size: 14px; line-height: 1.35; letter-spacing: -.015em; } #guide .guide-command-grid small { color: var(--v2-ink-soft); font-size: 12px; line-height: 1.45; } #guide .knowledge-hub { padding: 20px; border-color: var(--v2-line); border-radius: var(--v2-radius-md); box-shadow: var(--v2-shadow); } #guide .knowledge-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } #guide .knowledge-card { min-height: 156px; padding: 16px; border-color: var(--v2-line); border-radius: 14px; box-shadow: none; } #guide .knowledge-card h3 { font-size: 14px; } #guide .knowledge-card p { font-size: 12px; line-height: 1.5; } #guide .knowledge-card button, #guide .knowledge-article .primary-button, #guide .knowledge-back { display: inline-flex; align-items: center; gap: 6px; } #guide #knowledgeSearchClear{display:inline-grid;place-items:center} #guide #knowledgeSearchClear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} #guide .knowledge-action-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1080px) { #guide .guide-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #guide .knowledge-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Entry controls remain legible over the dark mobile scene. The border and translucent fill make the secondary demo route discoverable without changing its interaction or landing composition. */ .public-home .landing-screen .landing-login, .public-home .landing-screen .landing-secondary, .public-home .landing-screen .mobile-slide-actions .landing-secondary { color: #ffffff !important; text-shadow: 0 1px 10px rgba(0,0,0,.38); } .public-home .landing-screen .landing-login { border: 1px solid rgba(240,238,255,.46) !important; background: rgba(255,255,255,.07) !important; } .public-home .landing-screen .mobile-slide-actions .landing-secondary { min-height: 48px !important; padding: 0 14px; border: 1px solid rgba(231,226,255,.3); border-radius: 10px; background: rgba(255,255,255,.06); } @media (max-width: 760px) { #guide .guide-intro { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 12px; scroll-margin-top: 80px; } #guide .guide-intro > .primary-button { position: relative; z-index: 1; width: 100%; min-height: 48px; justify-content: center; } #guide .guide-context-card { grid-template-columns: auto minmax(0, 1fr); } #guide .guide-context-card .row-action { grid-column: 1 / -1; width: 100%; min-height: 44px; justify-content: center; } #guide .guide-command-deck, #guide .knowledge-hub { padding: 16px; border-radius: 16px; } #guide .guide-command-grid, #guide .knowledge-results { grid-template-columns: 1fr; } #guide .guide-command-grid button { min-height: 112px; } #guide .knowledge-hub-head { display: block; } #guide .knowledge-hub-head .status { display: inline-flex; margin-top: 10px; } } /* Final overrides for the approved 864px Plan reference. */ @media (min-width: 761px) and (max-width: 920px) { body:has(#actions.active) .sidebar { width:158px !important; padding:14px 9px 10px !important; } body:has(#actions.active) .main { margin-left:158px !important; width:calc(100% - 158px) !important; } body:has(#actions.active) .sidebar .brand { min-height:43px !important; padding:0 0 14px 4px !important; gap:7px !important; } body:has(#actions.active) .sidebar .brand-mark { width:29px !important; height:29px !important; flex-basis:29px !important; } body:has(#actions.active) .sidebar .brand-copy strong { font-size:9px !important; letter-spacing:.14em !important; } body:has(#actions.active) .sidebar .brand-copy small { font-size:7px !important; } body:has(#actions.active) .sidebar .sidebar-toggle { right:9px !important; top:23px !important; width:20px !important; height:20px !important; min-width:20px !important; } body:has(#actions.active) .sidebar .nav-label { padding:9px 5px 3px !important; font-size:7px !important; letter-spacing:.17em !important; } body:has(#actions.active) .sidebar .nav-item { min-height:31px !important; padding:5px !important; gap:5px !important; border-radius:7px !important; font-size:8px !important; } body:has(#actions.active) .sidebar .nav-item .nav-icon { width:17px !important; height:17px !important; flex-basis:17px !important; } body:has(#actions.active) .sidebar .nav-icon svg { width:14px !important; height:14px !important; } body:has(#actions.active) .sidebar .nav-text { white-space:normal !important; line-height:1.1 !important; } body:has(#actions.active) .sidebar .nav-item b,body:has(#actions.active) .sidebar .nav-item i { min-width:17px !important; padding:2px 4px !important; font-size:7px !important; } body:has(#actions.active) .topbar { height:98px !important; padding:0 20px !important; } body:has(#actions.active) .topbar-left { flex:0 0 205px !important; min-width:205px !important; } body:has(#actions.active) .topbar .eyebrow { font-size:8px !important; letter-spacing:.08em !important; } body:has(#actions.active) .topbar h1 { font-size:17px !important; line-height:20px !important; } body:has(#actions.active) .topbar h1::after { content:'Единая очередь решений по бизнесу'; display:block; margin-top:3px; color:#7f8796; font-size:8px; font-weight:600; letter-spacing:0; } body:has(#actions.active) .topbar-actions { min-width:0 !important; margin-left:0 !important; gap:4px !important; } body:has(#actions.active) .topbar-actions .sync { min-width:0 !important; max-width:122px !important; overflow:hidden !important; font-size:7px !important; } body:has(#actions.active) .topbar-command-bar { min-width:0 !important; gap:0 !important; } body:has(#actions.active) .topbar-command-bar button,body:has(#actions.active) .topbar-command-bar > div { min-width:30px !important; height:34px !important; padding:0 6px !important; font-size:7px !important; } body:has(#actions.active) .topbar-command-bar kbd { display:none !important; } body:has(#actions.active) .topbar-command-bar .topbar-guide-button small,body:has(#actions.active) .topbar-command-bar .topbar-settings-button span,body:has(#actions.active) .topbar-command-bar .topbar-data-button span { display:none !important; } body:has(#actions.active) .topbar-command-bar .topbar-settings-button,body:has(#actions.active) .topbar-command-bar .topbar-data-button { width:31px !important; } #actions.active { max-width:none !important; margin:0 !important; padding:20px 20px 28px !important; } #actions .page-intro { display:flex !important; align-items:flex-start !important; margin-bottom:13px !important; } #actions .page-intro h2 { display:none !important; } #actions .page-intro .eyebrow { margin:0 0 3px !important; font-size:9px !important; } #actions .page-intro p { max-width:420px; font-size:8px !important; line-height:12px !important; } #actions .page-intro .primary-button { min-height:34px !important; padding:0 13px !important; font-size:8px !important; } #actions .action-plan-summary { gap:7px !important; } #actions .action-plan-summary > * { min-height:87px !important; padding:13px !important; border-radius:10px !important; } #actions .action-plan-summary span,#actions .action-plan-summary small { font-size:8px !important; line-height:12px !important; } #actions .action-plan-summary strong { margin:7px 0 !important; font-size:16px !important; } #actions .actions-secondary-panel { min-height:36px !important; margin:16px 0 !important; padding:9px 13px !important; border-radius:9px !important; } #actions .actions-secondary-panel summary { font-size:9px !important; } #actions .actions-secondary-panel summary small { font-size:7px !important; } #actions .action-state-tabs,#actions .action-plan-filters { gap:5px !important; margin-bottom:7px !important; flex-wrap:nowrap !important; overflow:visible !important; } #actions .action-state-tabs button,#actions .action-plan-filters button { min-height:29px !important; padding:0 7px !important; border-radius:7px !important; font-size:7px !important; white-space:nowrap !important; } #actions .action-state-tabs span,#actions .action-plan-filters .filter-count { margin-left:3px !important; padding:2px 4px !important; font-size:7px !important; } #actions .action-plan-board { gap:8px !important; margin-top:15px !important; } #actions .action-plan-card { grid-template-columns:240px minmax(0,1fr) 89px !important; min-height:156px !important; gap:8px !important; padding:14px 13px !important; border-radius:10px !important; } #actions .action-plan-card .status { margin-right:4px !important; padding:3px 5px !important; font-size:7px !important; } #actions .action-plan-card strong { display:block !important; margin-top:11px !important; font-size:9px !important; line-height:13px !important; } #actions .action-plan-card p { margin:5px 0 0 !important; font-size:8px !important; line-height:12px !important; } #actions .action-card-meta { display:block !important; margin-top:20px !important; color:#7d8695 !important; font-size:7px !important; } #actions .action-plan-card dl { grid-template-columns:1fr 1fr !important; gap:8px 10px !important; margin:0 !important; } #actions .action-plan-card dt { margin-bottom:3px !important; font-size:7px !important; } #actions .action-plan-card dd { font-size:8px !important; line-height:11px !important; } #actions .action-card-side { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:12px; } #actions .action-card-menu { align-self:flex-end; border:0; padding:0; color:#65708a; background:transparent; font-size:16px; line-height:10px; } #actions .action-plan-card .row-action { min-height:41px !important; padding:0 7px !important; border-radius:7px !important; font-size:8px !important; line-height:10px !important; } #actions .action-plan-more { display:block; width:100%; min-height:36px; margin-top:8px; border:1px solid var(--v2-line); border-radius:9px; color:#6349e8; background:#fff; font:700 8px Onest,sans-serif; } #actions .action-plan-insights { gap:8px !important; margin-top:14px !important; } #actions .action-plan-insights > article { min-height:165px !important; padding:13px !important; border-radius:9px !important; } #actions .action-insight-head { margin-bottom:10px !important; } #actions .action-insight-head h3 { font-size:8px !important; line-height:11px !important; text-transform:uppercase; } #actions .action-insight-head strong { font-size:16px !important; } #actions .action-log-panel { margin-top:12px !important; padding:13px !important; border-radius:9px !important; } #actions .action-log-panel .panel-head p { font-size:8px !important; } #actions .action-plan-footer { margin:13px 0 0 !important; text-align:center; color:#8d95a4; font-size:8px; } } #actions .action-insight-bars:has(.plan-insight-donut) { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:14px; } #actions .plan-insight-donut { position:relative; width:88px; height:88px; display:grid; place-content:center; border-radius:50%; text-align:center; background:conic-gradient(#ee5b61 0 11.7%,#ff993b 11.7% 100%,#b9d1ff 100%); } #actions .plan-insight-donut::after { content:''; position:absolute; inset:12px; border-radius:50%; background:#fff; } #actions .plan-insight-donut--channel { background:conic-gradient(#6650df 0 78.3%,#1caf78 78.3% 100%); } #actions .plan-insight-donut strong,#actions .plan-insight-donut span { position:relative; z-index:1; } #actions .plan-insight-donut strong { font-size:16px; line-height:18px; color:#262a33; } #actions .plan-insight-donut span { color:#8a92a0; font-size:7px; } #actions .plan-insight-legend { display:grid; gap:10px; } #actions .plan-insight-legend span { display:grid; grid-template-columns:8px 1fr auto; gap:6px; align-items:center; color:#323641; font-size:8px; } #actions .plan-insight-legend i { width:6px; height:6px; border-radius:50%; background:#6650df; } #actions .plan-insight-legend i.red { background:#ee5b61; } #actions .plan-insight-legend i.orange { background:#ff993b; } #actions .plan-insight-legend i.blue { background:#b9d1ff; } #actions .plan-insight-legend i.green { background:#1caf78; } #actions .plan-insight-legend b { font-size:8px; font-weight:700; white-space:nowrap; } #actions .plan-effect-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; } #actions .plan-effect-metrics span { min-width:0; } #actions .plan-effect-metrics small,#actions .plan-effect-metrics strong,#actions .plan-effect-metrics b { display:block; } #actions .plan-effect-metrics small { color:#8a92a0; font-size:7px; } #actions .plan-effect-metrics strong { margin-top:5px; font-size:8px; white-space:nowrap; } #actions .plan-effect-metrics b { width:max-content; margin-top:6px; padding:2px 4px; border-radius:5px; color:#15835d; background:#ecf8f1; font-size:7px; } #actions .action-insight-effect > em { display:block; margin-top:14px; color:#9299a7; font-size:7px; font-style:normal; } #actions .action-log-row { grid-template-columns:24px auto minmax(0,1fr) auto !important; align-items:center; } #actions .action-log-row > i { display:grid; width:20px; height:20px; place-items:center; border:1px solid currentColor; border-radius:50%; font-style:normal; font-size:12px; } #actions .action-log-row > i.green { color:#1cae78; } #actions .action-log-row > i.orange { color:#ff993b; } #actions .action-log-row > i.blue { color:#477dff; } @media (min-width:761px) and (max-width:920px) { body:has(#actions.active) .sidebar#sidebar { width:158px !important; } body:has(#actions.active) .main:has(#actions) { margin-left:158px !important; width:calc(100% - 158px) !important; } body:has(#actions.active) #sidebar#sidebar#sidebar { padding:14px 9px 10px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .brand { min-height:43px !important; padding:0 0 14px 4px !important; gap:7px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .brand-mark { width:29px !important; height:29px !important; flex-basis:29px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .brand-copy strong { font-size:9px !important; letter-spacing:.14em !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .brand-copy small { font-size:7px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-label { padding:9px 5px 3px !important; font-size:7px !important; letter-spacing:.17em !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-item { min-height:31px !important; padding:5px !important; gap:5px !important; border-radius:7px !important; font-size:8px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-item .nav-icon { width:17px !important; height:17px !important; flex-basis:17px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-icon svg { width:14px !important; height:14px !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-text { white-space:normal !important; line-height:1.1 !important; } body:has(#actions.active) #sidebar#sidebar#sidebar .nav-item b,body:has(#actions.active) #sidebar#sidebar#sidebar .nav-item i { min-width:17px !important; padding:2px 4px !important; font-size:7px !important; } #actions#actions { padding-top:27px !important; padding-bottom:16px !important; } #actions#actions .page-intro { position:relative !important; min-height:28px !important; margin-bottom:13px !important; } #actions#actions .page-intro .primary-button { position:absolute !important; top:-15px !important; right:0 !important; } #actions#actions .actions-secondary-panel { min-height:36px !important; height:36px !important; margin:16px 0 !important; padding:9px 13px !important; box-sizing:border-box !important; overflow:hidden !important; } #actions#actions .actions-secondary-panel > summary { display:flex !important; align-items:center !important; min-height:16px !important; height:16px !important; line-height:16px !important; } #actions#actions .action-state-tabs,#actions#actions .action-plan-filters { gap:5px !important; margin-bottom:7px !important; } #actions#actions .action-state-tabs button { min-height:29px !important; padding:0 7px !important; font-size:7px !important; } #actions#actions .action-plan-filters button { min-width:0 !important; min-height:29px !important; padding:0 5px !important; font-size:6px !important; } #actions#actions .action-plan-filters .filter-count { margin-left:2px !important; padding:2px 3px !important; font-size:6px !important; } #actions#actions .action-plan-board { margin-top:29px !important; } #actions#actions .action-plan-insights > article { height:165px !important; min-height:165px !important; box-sizing:border-box !important; } #actions#actions .action-plan-insights + .actions-secondary-panel { display:none !important; } #actions#actions .action-log-wide { height:126px !important; min-height:126px !important; margin-top:20px !important; padding:13px !important; overflow:hidden !important; box-sizing:border-box !important; } #actions#actions #actionExecutionLog { display:grid !important; grid-template-columns:1fr !important; gap:0 !important; } #actions#actions .action-log-row { display:grid !important; grid-template-columns:24px 68px minmax(0,1fr) 86px !important; min-height:31px !important; gap:6px !important; padding:7px 0 !important; align-items:center !important; } #actions#actions .action-log-row > i { width:18px !important; height:18px !important; font-size:10px !important; } #actions#actions .action-log-row .status { padding:3px 4px !important; font-size:6px !important; } #actions#actions .action-log-row strong,#actions#actions .action-log-row small,#actions#actions .action-log-row b { font-size:7px !important; line-height:10px !important; } #actions#actions .action-plan-card .status { padding:3px 5px !important; font-size:6px !important; line-height:10px !important; } } #actions#actions .action-insight-bars:has(.plan-insight-donut) { display:grid !important; grid-template-columns:96px minmax(0,1fr) !important; align-items:center !important; gap:14px !important; } #actions#actions .plan-insight-legend { display:grid !important; gap:8px !important; } #actions#actions .plan-insight-legend > span { display:grid !important; grid-template-columns:7px minmax(0,1fr) auto !important; gap:5px !important; align-items:center !important; font-size:7px !important; } #actions#actions .plan-insight-legend > span b { font-size:7px !important; } #actions .action-plan-more:focus-visible, #actions .action-state-tabs button:focus-visible, #actions .action-plan-filters button:focus-visible { outline:2px solid #6d55ef; outline-offset:2px; } #actions .action-plan-state { margin:0; padding:18px; border:1px solid var(--v2-line); border-radius:12px; color:#5d6678; background:#fff; } #actions .action-plan-state--error { color:#bc3f49; border-color:#f2c8cc; background:#fff7f8; } #actions .action-plan-state--stale { margin:0 0 10px; color:#9a641e; border-color:#f1d49f; background:#fff9ee; }