:root { /* Серо-золотая фирменная палитра: тёплый графит + тёмное золото с градиентами. Единая тема на всей платформе (без переключения светлая/тёмная) — так гарантированно ровный, некричащий вид. */ color-scheme: dark; --page: #121110; --surface-1: #1b1917; --surface-2: #221f1b; --text-primary: #f1ead9; --text-secondary: #bdb2a0; --text-muted: #8c8375; --gridline: #2f2b25; --baseline: #464036; --border: rgba(212,175,106,0.16); --gold-light: #f0d38a; --gold: #cc9c4f; --gold-dark: #8a6a30; --series-1: var(--gold); --seq-250: #5b4726; --seq-350: #8a6a30; --seq-450: #cc9c4f; --seq-550: #f0d38a; --good: #8fbf74; --good-bg: rgba(143,191,116,0.14); --critical: #d97a5f; --critical-bg: rgba(217,122,95,0.16); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; } /* ------------------------------------------------------------------------- Release 05G — изолированный финансовый блок. Префиксы financial-/service-/safety- не затрагивают пять рабочих страниц. ------------------------------------------------------------------------- */ .brand-menu { position: relative; flex: none; } .brand { padding: 5px 7px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; } .brand:hover, .brand[aria-expanded="true"] { background: rgba(204,156,79,.08); } .brand-chevron { width: 15px; height: 15px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; transition: transform .2s ease; } .brand[aria-expanded="true"] .brand-chevron { transform: rotate(180deg); } .brand-menu-popup { position: absolute; top: calc(100% + 11px); left: 0; width: min(340px, calc(100vw - 28px)); padding: 7px; border: 1px solid rgba(240,211,138,.2); border-radius: 16px; background: rgba(27,25,23,.98); box-shadow: 0 18px 55px rgba(0,0,0,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .brand-menu-popup[hidden] { display: none; } .brand-menu-popup a { display: grid; grid-template-columns: 11px 1fr; align-items: center; gap: 11px; padding: 12px; border-radius: 11px; color: var(--text-secondary); text-decoration: none; } .brand-menu-popup a:hover { background: rgba(255,255,255,.035); color: var(--text-primary); } .brand-menu-popup a.active { background: rgba(204,156,79,.1); color: var(--gold-light); } .brand-menu-popup a > span:last-child { display: grid; gap: 3px; } .brand-menu-popup strong { font-size: 13px; } .brand-menu-popup small { color: var(--text-muted); font-size: 10px; } .brand-menu-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(204,156,79,.45); } .brand-menu-mark.financial { border-radius: 3px; transform: rotate(45deg); } .financial-mode .content { max-width: 1380px; padding-top: 22px; } .financial-mode .global-report-bar { max-width: 1380px; } .financial-mode .financial-period-bar { grid-template-columns: minmax(250px, 1fr) auto minmax(200px, .75fr); } .financial-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; margin: 4px 0 18px; padding: 4px 2px 0; } .financial-eyebrow { color: var(--gold-light); font-size: 10px; font-weight: 780; letter-spacing: .15em; text-transform: uppercase; } .financial-hero h1 { margin: 7px 0 8px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1; letter-spacing: -.045em; } .financial-hero p { max-width: 750px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; } .financial-action-hub { display: grid; gap: 11px; min-width: 390px; } .price-action-zone { display: grid; grid-template-columns: minmax(155px,auto) 154px; align-items: center; gap: 6px 14px; } .price-action-label { display: grid; gap: 3px; text-align: right; } .price-action-label strong { font-size: 12px; } .price-action-label span, .price-action-zone > small { color: var(--text-muted); font-size: 9.5px; } .price-action-label b { color: #8fd0a6; font-weight: 780; } .price-action-zone > small { grid-column: 1 / -1; text-align: right; } .safety-control { position: relative; width: 154px; height: 50px; perspective: 480px; } .danger-sync-button { position: absolute; inset: 6px 8px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #ef8f78; border-radius: 12px; background: linear-gradient(180deg,#b73b2d,#7f241a); color: #fff3ef; font: inherit; font-size: 10px; font-weight: 780; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 13px rgba(117,31,23,.36); } .danger-sync-button:disabled { cursor: default; } .danger-led { width: 7px; height: 7px; border-radius: 50%; background: #ffb6a6; box-shadow: 0 0 7px rgba(255,182,166,.8); } .safety-cap { position: absolute; z-index: 2; inset: 0; overflow: hidden; transform-origin: 50% 0; border: 1px solid rgba(255,255,255,.23); border-radius: 14px; background: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.055)); color: rgba(255,255,255,.83); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 7px 16px rgba(0,0,0,.25); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform .48s cubic-bezier(.2,.8,.2,1), opacity .35s ease; } .safety-cap.open { transform: rotateX(118deg) translateY(-4px); opacity: .38; pointer-events: none; } .safety-cap-shine { position: absolute; inset: -30% 45% -30% -20%; transform: rotate(20deg); background: rgba(255,255,255,.08); } .safety-cap-label { position: relative; font-size: 8.5px; font-weight: 720; letter-spacing: .02em; } .export-control { width: 154px; height: 50px; } .price-export-button { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(99,188,132,.6); border-radius: 14px; background: linear-gradient(135deg,rgba(66,119,83,.2),rgba(32,55,39,.18)); color: #91dfac; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 7px 16px rgba(0,0,0,.22); transition: border-color .16s ease, background .16s ease, transform .16s ease; } .price-export-button:hover { border-color: rgba(135,224,166,.84); background: rgba(73,135,93,.2); } .price-export-button:active { transform: translateY(1px); } .price-export-button:disabled { cursor: wait; opacity: .68; transform: none; } .export-led { width: 7px; height: 7px; border-radius: 50%; background: #82d7a0; box-shadow: 0 0 8px rgba(130,215,160,.72); } .financial-export-message { grid-column: 1 / -1; margin: 0; text-align: right; color: #9fd9b3; font-size: 9.5px; line-height: 1.35; } .financial-export-message.error { color: #efb4a3; } .financial-notice { margin: 0 0 15px; padding: 12px 15px; border: 1px solid; border-radius: 13px; font-size: 11px; line-height: 1.5; } .financial-notice.success { border-color: rgba(143,191,116,.3); background: rgba(143,191,116,.09); color: #c9e6b8; } .financial-notice.error { border-color: rgba(217,122,95,.35); background: rgba(217,122,95,.09); color: #efb4a3; } .financial-kpis { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; } .financial-kpis article { min-height: 112px; display: grid; align-content: center; gap: 5px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg,rgba(34,31,27,.97),rgba(25,23,21,.97)); box-shadow: var(--shadow-sm); } .financial-kpis span { color: var(--text-secondary); font-size: 10.5px; } .financial-kpis strong { color: var(--gold-light); font-size: clamp(21px,2.2vw,29px); font-variant-numeric: tabular-nums; letter-spacing: -.025em; } .financial-kpis small { color: var(--text-muted); font-size: 9.5px; } .financial-kpis .clinic-margin-kpi { border-color: rgba(204,156,79,.34); background: linear-gradient(145deg,rgba(72,58,35,.28),rgba(25,23,21,.97)); } .financial-kpis .unlinked-payments-kpi { border-color:rgba(83,145,211,.28); background:linear-gradient(145deg,rgba(35,57,80,.24),rgba(25,23,21,.97)); } .financial-controls { display: grid; grid-template-columns: minmax(270px,.65fr) minmax(0,1.6fr); gap: 13px 18px; align-items: end; margin: 0 0 14px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-1); } .financial-search { display: grid; gap: 6px; color: var(--text-muted); font-size: 10px; } .financial-search-field { position: relative; display: block; } .financial-search-field svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 1.7; } .financial-search-field input { width: 100%; min-height: 42px; padding: 9px 35px 9px 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--page); color: var(--text-primary); font: inherit; font-size: 12px; } .financial-search-field input:focus { outline: 1px solid var(--gold-dark); border-color: var(--gold-dark); } #financial-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; } .financial-category-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .financial-category-tabs button { flex: none; display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--page); color: var(--text-secondary); font: inherit; font-size: 10.5px; cursor: pointer; white-space: nowrap; } .financial-category-tabs button span { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--text-muted); font-size: 9px; } .financial-category-tabs button.active { border-color: rgba(240,211,138,.4); background: rgba(204,156,79,.12); color: var(--gold-light); } .financial-category-tabs button.active span { color: var(--gold-light); background: rgba(204,156,79,.12); } .financial-results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 2px 10px; color: var(--text-muted); font-size: 10px; } .financial-results-head strong { color: var(--text-primary); font-size: 13px; } .margin-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; } .margin-legend span { display: flex; align-items: center; gap: 5px; } .margin-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; } .margin-legend .low::before { background: #cc7665; } .margin-legend .attention::before { background: #d0aa55; } .margin-legend .healthy::before { background: #7fae6b; } .margin-legend .needs-setup::before { background: #777066; } .financial-service-list { display: grid; gap: 9px; } .financial-service-card { --tone-border: rgba(255,255,255,.08); --tone-wash: rgba(255,255,255,.018); --tone-accent: var(--text-muted); overflow: clip; border: 1px solid var(--tone-border); border-radius: 16px; background: linear-gradient(100deg,var(--tone-wash),rgba(27,25,23,.97) 42%); box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .financial-service-card.tone-low { --tone-border: rgba(217,122,95,.3); --tone-wash: rgba(217,122,95,.13); --tone-accent: #e69a84; } .financial-service-card.tone-attention { --tone-border: rgba(204,156,79,.34); --tone-wash: rgba(204,156,79,.13); --tone-accent: #e2bd6f; } .financial-service-card.tone-healthy { --tone-border: rgba(143,191,116,.3); --tone-wash: rgba(143,191,116,.12); --tone-accent: #acd495; } .financial-service-card.tone-needs-setup { --tone-border: rgba(180,170,154,.16); --tone-wash: rgba(180,170,154,.045); --tone-accent: #a59c8e; } .financial-service-card[open] { border-color: color-mix(in srgb,var(--tone-accent) 42%,transparent); box-shadow: 0 12px 35px rgba(0,0,0,.28); } .financial-service-card > summary { list-style: none; display: grid; grid-template-columns: 34px minmax(250px,1.8fr) minmax(90px,.42fr) minmax(125px,.58fr) minmax(145px,.65fr) 24px; align-items: center; gap: 13px; min-height: 91px; padding: 12px 15px; cursor: pointer; } .financial-service-card > summary::-webkit-details-marker { display: none; } .service-rank { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--tone-border); border-radius: 10px; background: rgba(0,0,0,.13); color: var(--tone-accent); font-size: 10px; font-weight: 750; } .service-identity { min-width: 0; } .service-title-line { display: flex; align-items: flex-start; gap: 8px; } .service-title-line h2 { min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; } .margin-status { flex: none; margin-top: 1px; padding: 3px 6px; border: 1px solid var(--tone-border); border-radius: 999px; color: var(--tone-accent); background: rgba(0,0,0,.1); font-size: 8px; font-weight: 700; } .service-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; color: var(--text-muted); font-size: 9px; } .service-meta span + span::before { content: "·"; margin-right: 10px; } .service-period-quantity, .service-period-money { display: none; } .service-period-quantity b, .service-period-money b { color: var(--text-primary); font-variant-numeric: tabular-nums; } .service-stat { display: grid; gap: 4px; min-width: 0; } .service-stat span { color: var(--text-muted); font-size: 9px; } .service-stat strong { color: var(--text-primary); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .service-stat small { overflow: hidden; color: var(--text-muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; } .service-value-stat small { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.3; } .service-stat.margin-main strong { color: var(--tone-accent); font-size: 18px; } .service-expand svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.7; transition: transform .25s ease; } .financial-service-card[open] .service-expand svg { transform: rotate(180deg); } .financial-card-body { padding: 0 16px 17px; border-top: 1px solid rgba(255,255,255,.045); } .setup-warning { margin: 14px 0 0; padding: 10px 12px; border: 1px solid rgba(204,156,79,.22); border-radius: 10px; background: rgba(204,156,79,.065); color: var(--text-secondary); font-size: 10px; line-height: 1.45; } .setup-warning strong { color: var(--gold-light); } .financial-comparison { display: grid; grid-template-columns: 1fr 35px 1fr; align-items: stretch; gap: 10px; margin: 14px 0; } .financial-comparison article { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 14px; border: 1px solid var(--gridline); border-radius: 13px; background: rgba(0,0,0,.12); } .financial-comparison article > span { color: var(--text-muted); font-size: 10px; } .financial-comparison article > strong { color: var(--text-primary); font-size: 19px; font-variant-numeric: tabular-nums; } .financial-comparison article.planned-economy { border-color: rgba(204,156,79,.25); background: rgba(204,156,79,.055); } .financial-comparison article.planned-economy > strong { color: var(--gold-light); } .financial-comparison .price-range-basis { grid-column: 1 / -1; color: var(--text-muted); font-size: 8.5px; line-height: 1.35; } .financial-comparison dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 7px 0 0; } .financial-comparison dl div { display: grid; gap: 3px; padding: 8px 9px; border-radius: 8px; background: rgba(0,0,0,.12); } .financial-comparison dt { color: var(--text-muted); font-size: 8.5px; } .financial-comparison dd { margin: 0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .comparison-arrow { display: grid; place-items: center; color: var(--gold-dark); font-size: 20px; } .financial-settings { display: grid; gap: 11px; } .financial-section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.045); } .financial-section-title > div { display: grid; gap: 3px; } .financial-section-title strong { font-size: 11px; } .financial-section-title span { color: var(--text-muted); font-size: 9px; } .financial-input-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; } .financial-input-grid.planning-grid { grid-template-columns: minmax(190px,.8fr) 1fr 1fr; } .financial-input-grid label, .duration-input-card, .calculated-field { display: grid; align-content: start; gap: 6px; min-height: 91px; padding: 11px; border: 1px solid var(--gridline); border-radius: 11px; background: rgba(0,0,0,.11); } .financial-input-grid label > span:first-child, .duration-input-card > span:first-child, .calculated-field > span:first-child { color: var(--text-muted); font-size: 9px; } .financial-input-grid label small, .duration-input-card small, .calculated-field small { color: var(--text-muted); font-size: 8px; line-height: 1.35; } .use-crm-duration { justify-self: start; padding: 4px 7px; border: 1px solid rgba(143,191,116,.3); border-radius: 7px; background: rgba(143,191,116,.08); color: #b9dba8; font: inherit; font-size: 7.5px; cursor: pointer; } .financial-input-grid .primary-input { border-color: rgba(204,156,79,.28); background: rgba(204,156,79,.05); } .input-with-suffix { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; } .input-with-suffix input { width: 100%; min-width: 0; height: 34px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text-primary); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; } .input-with-suffix input:focus { outline: 1px solid var(--gold-dark); border-color: var(--gold-dark); } .input-with-suffix b { color: var(--text-secondary); font-size: 9px; } .calculated-field strong { color: var(--gold-light); font-size: 19px; font-variant-numeric: tabular-nums; } .cost-breakdown { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--gridline); border-radius: 11px; background: rgba(0,0,0,.11); } .cost-breakdown span { display: grid; gap: 4px; padding: 9px 10px; border-right: 1px solid var(--gridline); color: var(--text-muted); font-size: 8px; } .cost-breakdown span:last-child { border-right: 0; } .cost-breakdown b { color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; } .financial-form-actions { display: flex; align-items: center; gap: 9px; margin-top: 2px; } .financial-save, .financial-reset { min-height: 36px; padding: 8px 13px; border-radius: 9px; font: inherit; font-size: 9.5px; font-weight: 720; cursor: pointer; } .financial-save { border: 1px solid var(--gold); background: linear-gradient(135deg,var(--gold-light),var(--gold)); color: #211a11; } .financial-reset { border: 1px solid var(--border); background: transparent; color: var(--text-muted); } .unsaved-indicator { display: none; margin-left: auto; color: var(--gold-light); font-size: 9px; } .financial-settings.dirty .unsaved-indicator { display: inline; } .financial-empty { display: grid; justify-items: center; gap: 5px; padding: 50px 20px; color: var(--text-muted); } .financial-empty strong { color: var(--text-secondary); } @media (max-width: 1050px) { .financial-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); } .financial-service-card > summary { grid-template-columns: 32px minmax(230px,1.4fr) repeat(3,minmax(90px,.5fr)) 22px; gap: 9px; } .financial-input-grid, .financial-input-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); } .cost-breakdown { grid-template-columns: repeat(3,1fr); } .cost-breakdown span:nth-child(3) { border-right: 0; } .cost-breakdown span:nth-child(-n+3) { border-bottom: 1px solid var(--gridline); } } @media (max-width: 820px) { .financial-mode .financial-period-bar { grid-template-columns: minmax(0,1fr) auto; } .financial-period-bar .global-period-fields { grid-column: 1 / -1; justify-self: stretch; } .financial-hero { grid-template-columns: 1fr; align-items: start; } .financial-action-hub { justify-self: start; min-width: 0; } .price-action-label { text-align: left; } .price-action-zone > small, .financial-export-message { text-align: left; } .financial-kpis { grid-template-columns: repeat(2,1fr); } .financial-kpis .clinic-margin-kpi { grid-column: 1 / -1; } .financial-controls { grid-template-columns: 1fr; } .financial-service-card > summary { grid-template-columns: 30px minmax(0,1fr) 105px 22px; } .service-stat { display: none; } .service-stat.margin-main { display: grid; } .service-period-quantity, .service-period-money { display: inline; } .financial-comparison { grid-template-columns: 1fr; } .comparison-arrow { transform: rotate(90deg); min-height: 24px; } .financial-input-grid.planning-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 640px) { .financial-mode .content { padding: 15px 11px calc(88px + env(safe-area-inset-bottom)); } .financial-mode .financial-period-bar { display: grid; grid-template-columns: minmax(0,1fr); top: calc(61px + env(safe-area-inset-top)); padding: 9px 12px; border-radius: 0 0 15px 15px; } .financial-mode .financial-period-bar .global-period-summary { grid-column: 1 / -1; display: grid; gap: 3px; } .financial-mode .financial-period-bar .global-period-summary strong { overflow: visible; white-space: normal; font-size: 11.5px; line-height: 1.25; } .financial-period-bar .global-period-toggle { justify-self: stretch; width: 100%; } .financial-period-bar .global-period-toggle button { flex: 1; } .financial-period-bar .global-period-fields { min-width: 0; } .financial-period-bar .global-period-fields label { justify-content: space-between; width: 100%; } .financial-period-bar .global-period-fields select { max-width: none; width: 70%; } .financial-hero { gap: 18px; margin-top: 6px; } .financial-hero h1 { font-size: 34px; } .financial-action-hub { width: 100%; } .price-action-zone { grid-template-columns: minmax(0,1fr) auto; width: 100%; } .financial-kpis { gap: 7px; } .financial-kpis article { min-height: 101px; padding: 12px; } .financial-kpis strong { font-size: 20px; } .financial-controls { padding: 12px; } .financial-results-head { align-items: flex-start; } .margin-legend { max-width: 210px; gap: 6px 8px; } .financial-service-card > summary { grid-template-columns: 28px minmax(0,1fr) 69px 18px; min-height: 86px; padding: 10px 9px; gap: 7px; } .service-rank { width: 27px; height: 27px; } .service-title-line { display: grid; gap: 4px; } .service-title-line h2 { font-size: clamp(10.5px,3.2vw,12px); } .margin-status { width: fit-content; font-size: 7px; } .service-stat.margin-main { text-align: right; } .service-stat.margin-main strong { font-size: 15px; } .service-stat.margin-main small { display: none; } .service-meta { font-size: 7.5px; } .financial-card-body { padding: 0 10px 13px; } .financial-comparison article { grid-template-columns: 1fr; } .financial-comparison article > strong { font-size: 18px; } .financial-comparison dl { grid-template-columns: 1fr 1fr; } .financial-comparison dl div:last-child { grid-column: 1 / -1; } .financial-input-grid, .financial-input-grid.compact, .financial-input-grid.planning-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .financial-input-grid.planning-grid .primary-input { grid-column: 1 / -1; } .financial-input-grid label, .calculated-field { min-height: 88px; padding: 9px; } .cost-breakdown { grid-template-columns: repeat(2,1fr); } .cost-breakdown span:nth-child(n) { border-right: 1px solid var(--gridline); border-bottom: 1px solid var(--gridline); } .cost-breakdown span:nth-child(2n) { border-right: 0; } .cost-breakdown span:nth-last-child(-n+2) { border-bottom: 0; } .financial-form-actions { flex-wrap: wrap; } .financial-save, .financial-reset { flex: 1; } .unsaved-indicator { width: 100%; margin-left: 0; text-align: center; } } /* ------------------------------------------------------------------------- Release 05E — management interface for Funnel and Channels only. All selectors use the mg- prefix so the three untouched pages preserve their existing layout and behaviour. ------------------------------------------------------------------------- */ .mg-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 10px 0 20px; } .marketing-live-root { display: contents; } .mg-hero h1 { margin: 4px 0 7px; font-size: clamp(27px, 4vw, 38px); line-height: 1.05; letter-spacing: -.035em; } .mg-hero p { margin: 0; color: var(--text-secondary); max-width: 690px; line-height: 1.5; font-size: 14px; } .mg-eyebrow { color: var(--gold-light); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .mg-period-chip, .mg-status { flex: none; border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--text-secondary); background: var(--surface-1); font-size: 11px; font-weight: 650; } .mg-status.is-open { color: var(--gold-light); background: rgba(204,156,79,.09); border-color: rgba(204,156,79,.3); } .mg-control-panel { display: grid; grid-template-columns: auto minmax(230px, 1fr); gap: 14px 22px; align-items: end; padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(34,31,27,.98), rgba(24,22,20,.98)); box-shadow: var(--shadow-sm); } .mg-control-panel .period-toggle { align-self: center; } .mg-period-fields { margin: 0; justify-content: flex-end; } .mg-filter-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; align-items: end; } .mg-filter-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: 12px; } .mg-filter-grid select { appearance: none; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page); color: var(--text-primary); font: inherit; } .mg-control-label { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 6px; } .mg-control-panel-period { grid-template-columns: auto minmax(230px, 1fr); } .mg-control-note { grid-column: 1 / -1; margin: -2px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; } .traffic-toggle { display: flex; width: fit-content; max-width: 100%; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--page); } .traffic-toggle button { border: 0; border-radius: 999px; padding: 8px 13px; color: var(--text-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; } .traffic-toggle button.active { color: #1b1611; background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-weight: 700; } .mg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; } .mg-kpis-paid { margin: 14px 0 0; } .mg-kpi-card { position: relative; min-height: 150px; padding: 17px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-sm); } .mg-kpi-card::after { content: ""; position: absolute; inset: auto -25px -35px auto; width: 92px; height: 92px; border-radius: 50%; background: rgba(204,156,79,.045); } .mg-kpi-card.is-gold { background: linear-gradient(145deg, rgba(80,61,31,.42), var(--surface-1) 68%); border-color: rgba(240,211,138,.35); } .mg-kpi-label { min-height: 34px; color: var(--text-secondary); font-size: 12px; line-height: 1.35; } .mg-kpi-value, .mg-kpi-value-static, .mg-primary-number { display: block; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; font-size: 29px; line-height: 1.15; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.025em; } .mg-kpi-value, .mg-primary-number { color: var(--gold-light); cursor: pointer; border-bottom: 1px dashed rgba(240,211,138,.45); } .mg-kpi-value:hover, .mg-primary-number:hover { color: #fff2c9; } .mg-kpi-context { margin-top: 5px; min-height: 27px; color: var(--text-muted); font-size: 10.5px; line-height: 1.3; } .mg-comparison { margin-top: 8px; color: var(--text-secondary); font-size: 10.5px; font-variant-numeric: tabular-nums; } .mg-comparison span { color: var(--text-muted); } .mg-comparison.is-good { color: var(--good); } .mg-comparison.is-bad { color: var(--critical); } .mg-comparison.is-muted { color: var(--text-muted); } .mg-section-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 14px; margin-bottom: 14px; } .mg-panel { margin-bottom: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm); } .mg-section-grid > .mg-panel { margin-bottom: 0; } .mg-panel h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.015em; } .mg-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .mg-funnel-chart { display: grid; gap: 13px; } .mg-funnel-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--text-secondary); } .mg-funnel-copy button { border: 0; padding: 0; border-bottom: 1px dashed rgba(240,211,138,.4); background: none; color: var(--gold-light); cursor: pointer; font: inherit; font-size: 17px; font-weight: 720; } .mg-funnel-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--page); border: 1px solid rgba(255,255,255,.025); } .mg-funnel-fill { min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); box-shadow: 0 0 16px rgba(204,156,79,.16); } .mg-funnel-conversion { margin-top: 4px; color: var(--text-muted); font-size: 10px; } .mg-small-sample { margin-left: 6px; padding: 2px 6px; border-radius: 999px; color: var(--gold-light); background: rgba(204,156,79,.1); } .mg-attention-panel { background: linear-gradient(150deg, rgba(34,31,27,1), rgba(20,19,17,1)); } .mg-attention-list { display: grid; gap: 9px; margin-top: 14px; } .mg-attention { position: relative; display: grid; gap: 3px; padding: 11px 12px 11px 15px; border: 1px solid var(--gridline); border-radius: var(--radius-sm); background: rgba(0,0,0,.12); } .mg-attention::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 3px; background: var(--text-muted); } .mg-attention.warning::before, .mg-attention.neutral::before { background: var(--gold); } .mg-attention.critical::before { background: var(--critical); } .mg-attention.info::before { background: var(--good); } .mg-attention strong { font-size: 11.5px; } .mg-attention span { color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } .mg-explain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; } .mg-explain-grid article { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--gridline); border-radius: var(--radius-md); background: rgba(27,25,23,.62); } .mg-explain-grid strong { color: var(--gold-light); font-size: 11px; } .mg-explain-grid span { color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } .mg-inline-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .mg-inline-metrics.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .mg-inline-metrics > div, .mg-inline-metrics > button, .mg-cost-grid > div { display: grid; gap: 4px; align-content: start; min-height: 76px; padding: 12px; text-align: left; border: 1px solid var(--gridline); border-radius: var(--radius-sm); background: var(--page); color: inherit; font: inherit; } .mg-inline-metrics > button { cursor: pointer; } .mg-inline-metrics > button:hover { border-color: var(--gold-dark); } .mg-inline-metrics span, .mg-cost-grid span { color: var(--text-muted); font-size: 10px; line-height: 1.35; } .mg-inline-metrics strong, .mg-cost-grid strong { color: var(--text-primary); font-size: 18px; font-variant-numeric: tabular-nums; } .mg-inline-metrics button strong { color: var(--gold-light); } .mg-inline-metrics small { color: var(--text-muted); font-size: 9.5px; } .mg-note { margin: 12px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.55; } .mg-note.is-warning { padding: 9px 11px; border-radius: var(--radius-sm); background: rgba(204,156,79,.08); color: var(--text-secondary); } .mg-primary-number { font-size: 25px; } .mg-primary-number span { font-size: 11px; font-weight: 600; color: var(--text-secondary); } .mg-trend { display: grid; gap: 8px; margin-top: 17px; max-height: 320px; overflow-y: auto; padding-right: 5px; } .mg-trend-row, .mg-spend-row { display: grid; grid-template-columns: 92px 1fr 54px; gap: 10px; align-items: center; font-size: 10.5px; } .mg-trend-row > div, .mg-spend-row > div { height: 8px; overflow: hidden; border-radius: 999px; background: var(--page); } .mg-trend-row i, .mg-spend-row i { display: block; min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); } .mg-trend-row strong, .mg-spend-row strong { text-align: right; font-variant-numeric: tabular-nums; } .mg-channel-accordions { display: grid; gap: 9px; margin-top: 14px; } .mg-channel-card .accordion-head { padding: 15px 17px; } .mg-channel-card .accordion-body { padding-top: 15px; } .mg-channel-class { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; } .mg-cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; margin-top: 10px; } .mg-money-total { color: var(--gold-light); font-size: 20px; } .mg-spend-chart { display: grid; gap: 13px; margin-top: 17px; } .mg-spend-row { grid-template-columns: 110px 1fr 80px; } .mg-spend-history { margin-top: 15px; overflow: hidden; border: 1px solid var(--gridline); border-radius: var(--radius-md); } .mg-empty, .mg-loading { padding: 28px 16px; color: var(--text-muted); text-align: center; font-size: 12px; } .mg-detail-modal { width: min(1040px, 96vw); max-height: 90vh; } .mg-detail-modal .modal-body { padding: 16px 18px 20px; } .mg-detail-summary { display: flex; gap: 10px; flex-wrap: wrap; } .mg-detail-summary > div { display: grid; gap: 3px; min-width: 150px; padding: 9px 12px; border: 1px solid var(--gridline); border-radius: var(--radius-sm); background: var(--page); } .mg-detail-summary span { color: var(--text-muted); font-size: 10px; } .mg-detail-summary strong { font-size: 13px; } .mg-detail-table { margin-top: 14px; max-height: 55vh; overflow: auto; } .mg-detail-table table { min-width: 920px; } .mg-detail-table td { vertical-align: top; white-space: normal; font-size: 11px; } .mg-phone { font-variant-numeric: tabular-nums; white-space: nowrap !important; } .mg-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; } .mg-pagination button { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface-2); color: var(--text-primary); cursor: pointer; } .mg-pagination button:disabled { opacity: .35; cursor: default; } .mg-pagination span { color: var(--text-muted); font-size: 11px; } .marketing-collect-shell { display: grid; grid-template-columns: minmax(0,1fr) 176px; gap: 8px 16px; align-items: center; } .marketing-collect-copy { display: grid; gap: 4px; } .marketing-collect-copy strong { font-size: 12px; } .marketing-collect-copy span, .marketing-collect-status { color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } .marketing-collect-control { position: relative; width: 176px; height: 54px; perspective: 480px; } .marketing-collect-button { position: absolute; inset: 6px 8px; border: 1px solid #77aeea; border-radius: 12px; background: linear-gradient(180deg,#2d75be,#1d4f86); color: #f2f8ff; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.2),0 6px 14px rgba(22,72,124,.32); } .marketing-collect-button:disabled { cursor: default; } .marketing-collect-cap { position: absolute; z-index: 2; inset: 0; overflow: hidden; transform-origin: 50% 0; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.045)); color: rgba(255,255,255,.85); font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1),0 7px 16px rgba(0,0,0,.24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform .48s cubic-bezier(.2,.8,.2,1),opacity .35s ease; } .marketing-collect-cap.open { transform: rotateX(118deg) translateY(-4px); opacity: .38; pointer-events: none; } .marketing-collect-status { grid-column: 1 / -1; min-height: 15px; margin: 0; } .marketing-new-data-notice { position: fixed; z-index: 1600; left: 50%; bottom: 22px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; padding: 11px 16px; border: 1px solid rgba(119,174,234,.6); border-radius: 999px; background: #173a60; color: #eef7ff; font: inherit; font-size: 11px; font-weight: 720; box-shadow: 0 10px 28px rgba(0,0,0,.38); transition: opacity .2s,transform .2s; } .marketing-new-data-notice.visible { opacity: 1; transform: translate(-50%,0); pointer-events: auto; } .marketing-new-data-notice.error { border-color:rgba(217,122,95,.7); background:#693829; color:#fff3ee; } .system-new-data-notice { position:fixed; z-index:1600; left:50%; bottom:22px; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(92vw,720px); padding:11px 16px; border:1px solid rgba(202,164,89,.5); border-radius:999px; background:#30291e; color:#fff7e6; font:inherit; font-size:11px; font-weight:720; box-shadow:0 10px 28px rgba(0,0,0,.38); transition:opacity .2s,transform .2s; } .system-new-data-notice.visible { opacity:1; transform:translate(-50%,0); pointer-events:auto; } .system-new-data-notice.error { border-color:rgba(217,122,95,.7); background:#693829; color:#fff3ee; } @media (max-width: 820px) { .mg-hero { align-items: flex-start; } .mg-control-panel { grid-template-columns: 1fr; } .mg-period-fields, .mg-filter-grid { grid-column: 1; } .mg-filter-grid { grid-template-columns: 1fr; } .mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-section-grid { grid-template-columns: 1fr; } .mg-explain-grid { grid-template-columns: repeat(2, 1fr); } .mg-inline-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mg-hero { display: grid; gap: 12px; } .mg-period-chip { width: fit-content; } .mg-control-panel { padding: 14px; } .traffic-toggle { width: 100%; } .traffic-toggle button { flex: 1; padding-inline: 7px; } .mg-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .mg-kpi-card { min-height: 139px; padding: 14px; } .mg-kpi-value, .mg-kpi-value-static { overflow: visible; font-size: clamp(19px,6.2vw,24px); overflow-wrap: anywhere; } .mg-kpis-paid .mg-kpi-value, .mg-kpis-paid .mg-kpi-value-static { white-space: normal; } .mg-panel { padding: 16px; } .mg-panel-head { display: grid; gap: 10px; } .mg-explain-grid { grid-template-columns: 1fr; } .mg-inline-metrics, .mg-inline-metrics.compact { grid-template-columns: 1fr 1fr; } .marketing-collect-shell { grid-template-columns: 1fr; } .marketing-collect-control { width: 100%; max-width: 240px; } .mg-trend-row { grid-template-columns: 75px 1fr 32px; } .mg-spend-row { grid-template-columns: 85px 1fr 65px; } .mg-detail-modal .modal-body { padding: 12px; } } @media (max-width: 360px) { .mg-kpis-paid { grid-template-columns: 1fr; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page); color: var(--text-primary); -webkit-font-smoothing: antialiased; accent-color: var(--gold); } a { color: inherit; } /* --- Topbar (desktop nav) --- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 24px; padding-top: calc(14px + env(safe-area-inset-top)); background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); /* position: sticky + backdrop-filter на одном элементе — известный баг компоновки в WebKit/Safari: без своего composite-слоя строка на инерционной прокрутке отслаивается от макета и "плывёт" отдельно от контента. transform заставляет браузер завести отдельный GPU-слой для topbar и держать его закреплённым корректно. */ transform: translateZ(0); -webkit-transform: translateZ(0); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; } .brand-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); box-shadow: 0 0 8px rgba(204,156,79,0.5); flex: none; } .nav-desktop { display: flex; gap: 2px; background: var(--page); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .nav-desktop a { text-decoration: none; color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 999px; transition: color .15s ease, background-color .15s ease; } .nav-desktop a.active { color: #1b1611; background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-weight: 650; } .nav-desktop a:not(.active):hover { color: var(--text-primary); } .logout-form { margin: 0; flex: none; } .logout-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .logout-btn:hover { color: var(--critical); border-color: var(--critical); } .logout-btn .icon { width: 18px; height: 18px; } .auth-actions { display: flex; align-items: center; gap: 7px; flex: none; } .cabinet-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; } .cabinet-btn:hover, .cabinet-btn.active { color: var(--gold-light); border-color: var(--gold-dark); } .cabinet-btn .icon { width: 18px; height: 18px; stroke: currentColor; } .btn-primary { font: inherit; font-weight: 650; padding: 10px 16px; border-radius: var(--radius-sm); border: 0; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #1b1611; cursor: pointer; box-shadow: var(--shadow-sm); } .session-warning { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(4,4,4,.72); backdrop-filter: blur(8px); } .session-warning[hidden] { display: none; } .session-warning-card { width: min(430px, 100%); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow-md); } .session-warning-card strong { display: block; font-size: 18px; margin-bottom: 8px; } .session-warning-card p { color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; } .session-warning-card > div { display: flex; gap: 10px; flex-wrap: wrap; } .session-warning-card form { margin: 0; } .cabinet-shell { display: grid; gap: 18px; } .cabinet-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 85% 10%, rgba(204,156,79,.15), transparent 40%), var(--surface-1); box-shadow: var(--shadow-sm); } .cabinet-hero h1 { margin: 5px 0 7px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.035em; } .cabinet-hero p { margin: 0; color: var(--text-secondary); max-width: 700px; line-height: 1.55; } .eyebrow { color: var(--gold-light); font-size: 10px; font-weight: 780; letter-spacing: .15em; } .cabinet-identity { min-width: 145px; text-align: right; } .cabinet-identity span { display: block; font-size: 18px; font-weight: 680; } .cabinet-identity small { color: var(--text-muted); } .notice { padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); line-height: 1.5; } .notice.warning { border-color: rgba(204,156,79,.38); background: rgba(204,156,79,.08); } .notice.success { border-color: rgba(143,191,116,.34); background: rgba(143,191,116,.08); color: #c9e6b8; } .notice.critical { border-color: rgba(217,122,95,.36); background: rgba(217,122,95,.08); color: #efb4a3; } .cabinet-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.8fr); gap: 18px; align-items: start; } .cabinet-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm); } .cabinet-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .cabinet-card h2 { margin: 5px 0 10px; font-size: 19px; } .cabinet-card > p { margin: 0 0 18px; color: var(--text-secondary); line-height: 1.55; } .status-pill { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; white-space: nowrap; } .status-pill.ok { border-color: rgba(143,191,116,.3); color: #c9e6b8; background: rgba(143,191,116,.06); } .status-pill.warning { border-color: rgba(204,156,79,.38); color: var(--gold-light); background: rgba(204,156,79,.08); } .status-pill.critical { border-color: rgba(217,122,95,.36); color: #efb4a3; background: rgba(217,122,95,.08); } .cabinet-form { display: grid; gap: 14px; } .cabinet-form label { display: grid; gap: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 600; } .cabinet-form label small { color: var(--text-muted); font-weight: 450; line-height: 1.45; } .cabinet-form input, .cabinet-form select { width: 100%; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--page); color: var(--text-primary); font: inherit; box-shadow: var(--shadow-sm); } .cabinet-form select { min-height: 43px; } .cabinet-form input:focus, .cabinet-form select:focus { outline: 2px solid var(--series-1); outline-offset: -1px; } .cabinet-form input:disabled, .cabinet-form select:disabled { opacity: .62; cursor: not-allowed; } .cabinet-form-actions { display: flex; justify-content: flex-start; margin-top: 2px; } .cabinet-inline-form { margin-top: 10px; } .cabinet-facts { display: grid; gap: 0; margin: 10px 0 16px; } .cabinet-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gridline); } .cabinet-facts dt { color: var(--text-muted); } .cabinet-facts dd { margin: 0; font-weight: 650; } .cabinet-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .cabinet-summary article { display: grid; gap: 7px; min-height: 86px; align-content: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(145deg,rgba(34,31,27,.97),rgba(25,23,21,.97)); box-shadow: var(--shadow-sm); } .cabinet-summary span { color: var(--text-muted); font-size: 10.5px; line-height: 1.35; } .cabinet-summary strong { color: var(--gold-light); font-size: 24px; font-variant-numeric: tabular-nums; } .cabinet-tabs { display: flex; gap: 5px; padding: 4px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--page); scrollbar-width: thin; } .cabinet-tabs a { flex: 1 0 auto; min-width: 150px; padding: 9px 12px; border-radius: 9px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; text-align: center; text-decoration: none; } .cabinet-tabs a:hover { color: var(--text-primary); background: rgba(255,255,255,.03); } .cabinet-tabs a.active { color: #1b1611; background: linear-gradient(135deg,var(--gold-light),var(--gold)); } .cabinet-admin-grid { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); gap: 18px; align-items: start; } .cabinet-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 2px 0 8px; } .cabinet-section-heading h2 { margin: 5px 0 0; font-size: 19px; } .cabinet-section-heading > span { min-width: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--gold-light); text-align: center; font-size: 11px; font-weight: 700; } .cabinet-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: end; } .permission-fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); } .permission-fieldset legend { padding: 0 6px; color: var(--text-secondary); font-size: 11px; font-weight: 650; } .permission-fieldset > small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 10.5px; line-height: 1.4; } .permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .permission-grid label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: 9px; background: rgba(255,255,255,.025); color: var(--text-secondary); font-size: 10.5px; font-weight: 550; cursor: pointer; } .permission-grid input { width: 16px; height: 16px; margin: 0; box-shadow: none; accent-color: var(--gold); } .cabinet-switch { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; min-height: 43px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page); } .cabinet-switch input { width: 17px; height: 17px; margin: 0; box-shadow: none; accent-color: var(--gold); } .cabinet-user-list { min-width: 0; } .cabinet-user-list > .muted { margin: 0 0 11px; } .cabinet-user-card { display: grid; gap: 12px; margin-bottom: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-sm); } .cabinet-user-card.inactive { opacity: .76; } .cabinet-user-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .cabinet-user-card h3 { margin: 0 0 4px; font-size: 15px; } .cabinet-user-card h3 small { margin-left: 7px; color: var(--gold-light); font-size: 9px; text-transform: uppercase; } .cabinet-user-card header p { margin: 0; color: var(--text-muted); font-size: 10.5px; } .cabinet-user-status { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .cabinet-user-facts { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 10px 0; border-block: 1px solid var(--gridline); color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } .cabinet-user-facts strong { color: var(--text-secondary); font-weight: 650; } .cabinet-disclosure { border: 1px solid var(--gridline); border-radius: var(--radius-sm); overflow: hidden; } .cabinet-disclosure + .cabinet-disclosure { margin-top: -5px; } .cabinet-disclosure summary { padding: 10px 12px; color: var(--text-secondary); font-size: 11px; font-weight: 650; cursor: pointer; list-style-position: inside; } .cabinet-disclosure[open] summary { border-bottom: 1px solid var(--gridline); color: var(--gold-light); background: rgba(204,156,79,.04); } .cabinet-disclosure .cabinet-form { padding: 13px; } .cabinet-disclosure.critical-zone { border-color: rgba(217,122,95,.24); } .cabinet-disclosure.critical-zone[open] summary { color: #efb4a3; background: rgba(217,122,95,.05); } .btn-danger-soft { min-height: 39px; padding: 9px 12px; border: 1px solid rgba(217,122,95,.34); border-radius: var(--radius-sm); background: rgba(217,122,95,.07); color: #efb4a3; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; } .btn-danger-soft:hover { border-color: var(--critical); background: rgba(217,122,95,.12); } .cabinet-table-scroll { margin-top: 12px; } .cabinet-table { width: 100%; } .cabinet-table th, .cabinet-table td { font-size: 11px; } .cabinet-table th { color: var(--text-muted); } .session-revoke-form { display: flex; align-items: center; justify-content: flex-end; gap: 7px; } .session-revoke-form input { width: min(180px,100%); min-height: 39px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page); color: var(--text-primary); font: inherit; font-size: 11px; } .cabinet-empty { padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 12px; text-align: center; } .integration-board { display: grid; gap: 14px; min-width: 0; } .integration-heading { margin-bottom: 0; } .integration-boundary { font-size: 12px; color: var(--text-secondary); } .integration-boundary strong { color: var(--gold-light); } .integration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; } .integration-card { display: grid; gap: 14px; min-width: 0; } .integration-card.site-webhook-card { grid-column: 1 / -1; border-color: rgba(204,156,79,.3); background: radial-gradient(circle at 94% 5%,rgba(204,156,79,.08),transparent 34%),var(--surface-1); } .integration-facts { display: grid; gap: 0; margin: 0; border-block: 1px solid var(--gridline); } .integration-facts > div { display: grid; grid-template-columns: minmax(130px,.85fr) minmax(0,1.15fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--gridline); } .integration-facts > div:last-child { border-bottom: 0; } .integration-facts dt { color: var(--text-muted); font-size: 10.5px; } .integration-facts dd { min-width: 0; margin: 0; color: var(--text-secondary); font-size: 10.5px; font-weight: 650; overflow-wrap: anywhere; text-align: right; } .integration-check-form { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .integration-check-form small { flex: 1 1 180px; color: var(--text-muted); font-size: 10px; line-height: 1.45; } .integration-check-form button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .48; } .integration-guide { border: 1px solid var(--gridline); border-radius: var(--radius-md); overflow: hidden; } .integration-guide summary { padding: 11px 13px; color: var(--text-secondary); font-size: 11px; font-weight: 680; cursor: pointer; } .integration-guide[open] summary { border-bottom: 1px solid var(--gridline); color: var(--gold-light); background: rgba(204,156,79,.045); } .integration-guide > div { display: grid; gap: 9px; padding: 14px; } .integration-guide h3 { margin: 3px 0 0; color: var(--text-primary); font-size: 12px; } .integration-guide p { margin: 0; color: var(--text-secondary); font-size: 10.8px; line-height: 1.55; } .integration-guide ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 10.8px; line-height: 1.5; } .integration-guide li::marker { color: var(--gold-light); font-weight: 700; } .integration-note { padding: 10px 11px; border-left: 2px solid var(--gold-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(204,156,79,.045); } .integration-switch-stage { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(204,156,79,.42); border-radius: var(--radius-md); background: linear-gradient(135deg,rgba(204,156,79,.09),rgba(204,156,79,.025)); } .integration-switch-stage h3 { margin: 4px 0; color: var(--text-primary); font-size: 13px; } .integration-switch-stage p,.integration-reconnect p,.integration-rollback p { margin: 0; color: var(--text-secondary); font-size: 10.8px; line-height: 1.55; } .integration-secret-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: end; } .integration-secret-form label { display: grid; gap: 6px; min-width: 0; color: var(--text-muted); font-size: 10px; } .integration-secret-form input { width: 100%; min-width: 0; } .integration-secret-form button { min-height: 39px; } .integration-reconnect { border-color: rgba(204,156,79,.28); } .integration-rollback { border-color: rgba(181,112,112,.28); } .integration-rollback summary { color: #d4aeae; } .integration-cancel-form { padding-top: 10px; border-top: 1px solid var(--gridline); } .cabinet-next-stage { display: grid; gap: 6px; padding: 15px 17px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: rgba(204,156,79,.025); } .cabinet-next-stage strong { font-size: 13px; } .cabinet-next-stage p { margin: 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.5; } .muted { color: var(--text-muted) !important; font-size: 12px; } /* Содержимое поп-апа «Свой период» — переиспользует .modal-overlay/.modal-box, с обычными полями-отступами формы вместо списка .phone-row. Месяц/Год (и Неделя на звонках) в поп-ап НЕ выносятся — они всегда на самой странице, в .filter-panel, и применяются сразу по выбору. Поп-ап — только для двух полей даты своего периода + кнопка «Показать» как явное подтверждение. */ .period-modal-body { padding: 18px 20px 20px; } .period-modal-body .filters { margin: 0; } /* --- Bottom tab bar (mobile nav) --- */ .bottom-nav { display: none; } .content { padding: var(--space-5); max-width: 1080px; margin: 0 auto; } /* Один период для всей системы: блок остаётся доступным при прокрутке и занимает одно и то же место на всех пяти отчётных страницах. */ .global-report-bar { position: sticky; top: 63px; z-index: 19; display: grid; grid-template-columns: minmax(150px, .8fr) auto minmax(180px, .9fr); align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 10px 24px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: color-mix(in srgb, var(--surface-1) 95%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 7px 20px rgba(0,0,0,.22); transform: translateZ(0); -webkit-transform: translateZ(0); } .global-period-summary { display: grid; gap: 2px; min-width: 0; } .global-period-summary strong { overflow: hidden; color: var(--gold-light); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .global-period-kicker { color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .global-period-toggle { justify-self: center; } .global-period-toggle button { font-size: 11.5px; padding: 6px 11px; } .global-period-fields { justify-self: end; min-width: 176px; } .global-period-fields label { display: none; align-items: center; gap: 8px; color: var(--text-muted); font-size: 10px; } .global-period-fields select { min-height: 34px; max-width: 145px; padding: 7px 27px 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page); color: var(--text-primary); font: inherit; font-size: 11px; } .global-period-fields[data-mode="week"] .pf-week, .global-period-fields[data-mode="month"] .pf-month, .global-period-fields[data-mode="year"] .pf-year { display: flex; } .global-period-fields[data-mode="custom"] .pf-custom-note { display: block; font-size: 11px; } .report-semantic-note { margin: -8px 0 18px; padding: 9px 12px; border-left: 2px solid var(--gold-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(204,156,79,.06); color: var(--text-muted); font-size: 11px; line-height: 1.45; } .report-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; padding: 10px 12px; color: var(--text-muted); font-size: 11px; text-align: center; } .report-pagination a, .report-pagination .disabled { flex: none; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); text-decoration: none; } .report-pagination a:hover { border-color: var(--gold-dark); color: var(--gold-light); } .report-pagination .disabled { opacity: .35; } /* --- Панель фильтров: сегментированный переключатель периода + сами поля живут в ОДНОЙ карточке — так все элементы управления читаются как единый, аккуратно выровненный блок, а не разрозненные плавающие поля. --- */ .filter-panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .filter-panel .period-toggle { margin-bottom: 14px; } .filter-panel .filters { margin: 0; } /* Переключатель «Звонки / Заявки / Весь трафик» на странице «Воронка» — отдельная плашка внутри .filter-panel, под выбором периода, над плашками с цифрами — свой отступ снизу того же размера, что и у period-toggle. */ #traffic-toggle { margin-bottom: 14px; } .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-5); } .filters label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 500; } /* Единая высота у всех полей ввода И у кнопок — иначе нативный /