/* unit-econ.css — вкладка «Юнит-экономика». Чистый дизайн (карточки, шаги, grid-таблица, раскрытие в 3 карточки). Обе темы через CSS-переменные (светлая = дизайн-макет, тёмная адаптирована). Шрифты по правилам проекта: панель наследует Inter (цифры), метки — Inter. */ /* ── Переменные: значения по умолчанию = ТЁМНАЯ тема ── */ /* .ue-reg-modal включён в селектор, т.к. модалка живёт на уровне , вне #panel-unit — иначе var(--ue-*) не резолвятся и фон прозрачный. */ #panel-unit, #panel-compare, .ue-reg-modal { font-family: "Inter", sans-serif; --ue-accent: #8b7bf0; --ue-accent-2: #6d5ae6; --ue-pos: #46c78a; --ue-pos-bg: rgba(70,199,138,.14); --ue-neg: #ff6b81; --ue-panel: #0f1420; --ue-card: #171d2b; --ue-card-2: #131826; --ue-soft: #1b2130; --ue-bd: #2a3145; --ue-bd-2: #232a3a; --ue-txt: #e6eaf3; --ue-txt-2: #a7aec2; --ue-txt-3: #767e93; --ue-accent-soft: rgba(139,123,240,.16); } :root.light #panel-unit, :root.light #panel-compare, :root.light .ue-reg-modal { --ue-accent: #6d5ae6; --ue-accent-2: #5c49d8; --ue-pos: #16a34a; --ue-pos-bg: #eafaf1; --ue-neg: #e05260; --ue-panel: #f6f7fb; --ue-card: #ffffff; --ue-card-2: #fafbfd; --ue-soft: #fbfbfd; --ue-bd: #e8eaf0; --ue-bd-2: #eef0f5; --ue-txt: #1e2230; --ue-txt-2: #6b7180; --ue-txt-3: #9aa0b0; --ue-accent-soft: #ece9fd; } .u-hidden { display: none !important; } /* ── Карточки ── */ .ue-card { background: var(--ue-card); border: 1px solid var(--ue-bd); border-radius: 16px; overflow: hidden; margin-bottom: 16px; } :root.light #panel-unit .ue-card { box-shadow: 0 1px 2px rgba(20,24,40,.04); } /* ── Setup ── */ .ue-setup-grid { display: grid; grid-template-columns: 340px 1px 1fr; } .ue-vdiv { background: var(--ue-bd-2); } .ue-step { padding: 20px; } .ue-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .ue-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--ue-accent-soft); color: var(--ue-accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ue-step-title { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; color: var(--ue-txt-2); text-transform: uppercase; letter-spacing: .04em; } /* Dropzone */ .ue-drop { border: 1.5px dashed var(--ue-bd); border-radius: 12px; padding: 16px; background: var(--ue-card-2); cursor: pointer; transition: border-color .15s, background .15s; } .ue-drop:hover, .ue-drop.drag { border-color: var(--ue-accent); background: var(--ue-accent-soft); } .ue-drop-row { display: flex; align-items: center; gap: 12px; } .ue-drop-ico { width: 40px; height: 40px; border-radius: 10px; background: #21a366; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; font-family: "Inter", sans-serif; } .ue-drop-txt { min-width: 0; } .ue-drop-title { font-size: 13.5px; font-weight: 600; color: var(--ue-txt); line-height: 1.35; word-break: break-word; } .ue-drop-info { font-size: 12px; color: var(--ue-txt-3); margin-top: 3px; line-height: 1.45; } .ue-drop.loaded .ue-drop-info { color: var(--ue-pos); font-weight: 500; } .ue-link-btn { background: transparent; color: var(--ue-txt-3); border: none; padding: 0; font-size: 12px; font-weight: 500; cursor: pointer; font-family: "Inter", sans-serif; } .ue-link-btn:hover { color: var(--ue-neg); } /* Dropdown «Себестоимость» */ .ue-dropdown { position: relative; } .ue-caret-sm { font-size: 10px; opacity: .7; } .ue-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 180px; z-index: 20; background: var(--ue-card); border: 1px solid var(--ue-bd); border-radius: 10px; padding: 5px; box-shadow: 0 8px 24px rgba(20,24,40,.14); } .ue-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ue-txt); cursor: pointer; font-family: "Inter", sans-serif; } .ue-menu-item:hover { background: var(--ue-accent-soft); color: var(--ue-accent); } /* Параметры */ .ue-params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; } .ue-param-wide { grid-column: span 1; } .ue-param-lbl { display: flex; align-items: center; gap: 4px; font-family: "Inter", sans-serif; font-size: 11.5px; color: var(--ue-txt-2); margin-bottom: 5px; font-weight: 500; } .ue-hint { color: var(--ue-txt-3); cursor: help; font-size: 11px; } .ue-inp { display: flex; align-items: center; border: 1px solid var(--ue-bd); border-radius: 8px; background: var(--ue-soft); padding: 0 10px; height: 36px; transition: border-color .15s; } .ue-inp:focus-within { border-color: var(--ue-accent); } .ue-inp input, .ue-inp select { border: none; background: transparent; width: 100%; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ue-txt); padding: 0; outline: none; } .ue-inp select { cursor: pointer; } .ue-inp option { background: var(--ue-card); color: var(--ue-txt); } .ue-unit { font-size: 12px; color: var(--ue-txt-3); font-weight: 500; margin-left: 4px; } .ue-inp-sel { cursor: pointer; } /* Actionbar */ .ue-actionbar { border-top: 1px solid var(--ue-bd-2); background: var(--ue-card-2); padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ue-spacer { flex: 1; } .ue-btn { background: var(--ue-card); color: var(--ue-txt-2); border: 1px solid var(--ue-bd); border-radius: 9px; padding: 0 14px; height: 40px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: "Inter", sans-serif; } .ue-btn:hover { border-color: var(--ue-accent); color: var(--ue-txt); } .ue-btn-primary { background: var(--ue-accent); color: #fff; border: none; padding: 0 22px; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(109,90,230,.28); } .ue-btn-primary:hover { background: var(--ue-accent-2); color: #fff; } /* Статус + спиннер */ .ue-status { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ue-txt-2); } .ue-status.ok { color: var(--ue-pos); } .ue-status.err { color: var(--ue-neg); } .ue-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ue-spin { display: inline-block; width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid var(--ue-accent-soft); border-top-color: var(--ue-accent); border-radius: 50%; animation: ue-spin-kf .7s linear infinite; } @keyframes ue-spin-kf { to { transform: rotate(360deg); } } /* ── Toolbar таблицы ── */ .ue-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ue-bd-2); flex-wrap: wrap; } .ue-search { display: flex; align-items: center; border: 1px solid var(--ue-bd); border-radius: 9px; padding: 0 10px; height: 34px; width: 240px; background: var(--ue-soft); } .ue-search-ico { color: var(--ue-txt-3); font-size: 13px; margin-right: 6px; } .ue-search input { border: none; background: transparent; font-size: 13px; width: 100%; font-family: inherit; color: var(--ue-txt); outline: none; } .ue-groups { display: flex; align-items: center; gap: 8px; } .ue-groups-lbl { font-family: "Inter", sans-serif; font-size: 12px; color: var(--ue-txt-3); font-weight: 500; } .ue-chip { background: var(--ue-card); color: var(--ue-txt-2); border: 1px solid var(--ue-bd); border-radius: 999px; padding: 0 13px; height: 30px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: "Inter", sans-serif; transition: all .12s; white-space: nowrap; } .ue-chip:hover { border-color: var(--ue-accent); } .ue-chip.on { background: var(--ue-accent); border-color: var(--ue-accent); color: #fff; } .ue-count { font-size: 12px; color: var(--ue-txt-3); } /* ── Grid-таблица ── */ .ue-tablewrap { overflow: auto; max-height: 74vh; } .ue-grid { min-width: 720px; } .ue-thead, .ue-row { display: grid; align-items: center; grid-template-columns: var(--ue-cols, minmax(200px,2fr) repeat(2, minmax(90px,1fr)) minmax(80px,1fr) minmax(110px,1.1fr) minmax(90px,1fr)); } .ue-thead { position: sticky; top: 0; z-index: 2; padding: 11px 20px; background: var(--ue-accent-soft); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; color: var(--ue-accent); text-transform: uppercase; letter-spacing: .04em; } .ue-th { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; justify-content: flex-end; white-space: nowrap; } .ue-th.name { justify-content: flex-start; } .ue-th:hover { color: var(--ue-accent); } .ue-th.sorted { color: var(--ue-accent); } .ue-th .arr { font-size: 9px; } .ue-rowwrap { border-bottom: 1px solid var(--ue-bd-2); } .ue-row { padding: 13px 20px; cursor: pointer; transition: background .1s; } .ue-row:hover { background: var(--ue-accent-soft); } .ue-row.err { opacity: .8; } .ue-cell { text-align: right; font-size: 13px; font-weight: 500; color: var(--ue-txt-2); white-space: nowrap; } .ue-cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; } .ue-caret { color: var(--ue-txt-3); font-size: 11px; width: 12px; display: inline-block; transition: transform .15s; } .ue-caret.open { transform: rotate(90deg); } .ue-name-txt { min-width: 0; } .ue-name { font-size: 13.5px; font-weight: 600; color: var(--ue-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ue-sku { font-size: 11.5px; color: var(--ue-txt-3); margin-top: 1px; } .ue-price { font-size: 13.5px; font-weight: 500; color: var(--ue-txt); } .ue-vat { color: var(--ue-txt-2); } .ue-vat-zero { opacity: .4; } .ue-inp-cell { text-align: right; } .ue-mini { width: 66px; border: 1px solid var(--ue-bd); border-radius: 7px; padding: 5px 8px; font-size: 13px; font-weight: 600; color: var(--ue-txt); background: var(--ue-soft); font-family: inherit; text-align: right; outline: none; } .ue-mini:focus { border-color: var(--ue-accent); } .ue-mini.cost { border-style: dashed; } /* Цена и Цена без СПП — под разрядные числа */ .ue-mini.price, .ue-mini.spp { width: 92px; } .ue-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ue-subrow .psub { margin-bottom: 0; } .ue-export-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-left: 8px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ue-bd); background: transparent; color: var(--ue-txt-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; } .ue-export-btn:hover { color: var(--ue-txt); border-color: var(--ue-txt-3); } .ue-export-btn svg { width: 14px; height: 14px; } .ue-profit { font-size: 14.5px; font-weight: 700; } .ue-profit.pos { color: var(--ue-pos); } .ue-profit.neg { color: var(--ue-neg); } .ue-margin { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .ue-err-msg { color: var(--ue-neg); font-size: 12.5px; text-align: right; grid-column: 2 / -1; } /* Раскрытие строки */ .ue-detail { padding: 4px 20px 22px 42px; background: var(--ue-card-2); } .ue-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 820px) { .ue-detail-grid { grid-template-columns: 1fr; } } .ue-dcard { background: var(--ue-card); border: 1px solid var(--ue-bd-2); border-radius: 12px; padding: 15px; } .ue-dcard.result { background: var(--ue-pos-bg); border-color: transparent; display: flex; flex-direction: column; } .ue-dhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .ue-dtitle { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; color: var(--ue-txt-3); text-transform: uppercase; letter-spacing: .04em; } .ue-dtitle.pos { color: var(--ue-pos); } .ue-dtotal { font-size: 12px; font-weight: 700; color: var(--ue-neg); } .ue-drow { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; } .ue-drow .k { color: var(--ue-txt-2); } .ue-drow .k .dim { color: var(--ue-txt-3); } .ue-drow .v { font-weight: 600; color: var(--ue-txt); } .ue-result-big { font-size: 22px; font-weight: 800; color: var(--ue-pos); margin-top: auto; } .ue-result-lbl { font-size: 12px; color: var(--ue-txt-2); } .ue-warn { margin-top: 8px; font-size: 11px; color: #e0a24a; } /* Пагинация */ .ue-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--ue-bd-2); font-family: "Inter", sans-serif; font-size: 12px; } .ue-pg-info { color: var(--ue-txt-3); } .ue-pg-nav { display: flex; align-items: center; gap: 4px; } .ue-pg-cur { min-width: 62px; text-align: center; color: var(--ue-txt-2); } .ue-pg-btn { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--ue-bd); background: var(--ue-card); color: var(--ue-txt-2); cursor: pointer; font-size: 13px; } .ue-pg-btn:hover:not(:disabled) { border-color: var(--ue-accent); } .ue-pg-btn:disabled { opacity: .35; cursor: default; } .ue-pg-per { display: flex; align-items: center; gap: 6px; color: var(--ue-txt-3); margin-left: auto; } .ue-pg-sel { padding: 4px 6px; border-radius: 7px; border: 1px solid var(--ue-bd); background: var(--ue-card); color: var(--ue-txt); font-family: inherit; font-size: 12px; } /* Busy overlay */ #uTable.busy { position: relative; cursor: progress; min-height: 120px; } #uTable.busy .ue-tablewrap { opacity: .45; pointer-events: none; } .ue-busy-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--ue-accent); z-index: 5; pointer-events: none; } .ue-busy-overlay .ue-spin { width: 18px; height: 18px; } .ue-empty { padding: 40px 20px; text-align: center; color: var(--ue-txt-3); font-size: 13px; } /* Адаптив */ @media (max-width: 900px) { .ue-setup-grid { grid-template-columns: 1fr; } .ue-vdiv { display: none; } .ue-params { grid-template-columns: repeat(2, 1fr); } } /* ── Gate (незарегистрированный юзер: 3 строки + CTA) ─────────────────────── */ .ue-gate { margin-top: 2px; padding: 24px 20px 26px; text-align: center; border: 1px dashed var(--ue-bd); border-top: none; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, transparent, var(--ue-accent-soft)); } .ue-gate-lock { font-size: 22px; margin-bottom: 6px; } .ue-gate-title { font-weight: 700; color: var(--ue-txt); font-size: 15px; } .ue-gate-text { color: var(--ue-txt-2); font-size: 13px; margin: 6px auto 14px; max-width: 420px; } .ue-gate-btn { padding: 10px 20px; font-size: 14px; } /* ── Модалка регистрации ─────────────────────────────────────────────────── */ .ue-reg-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 9, 16, .62); backdrop-filter: blur(3px); } .ue-reg-modal[hidden] { display: none; } .ue-reg-card { position: relative; width: 100%; max-width: 400px; background: var(--ue-card); border: 1px solid var(--ue-bd); border-radius: 16px; padding: 26px 24px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .ue-reg-x { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ue-txt-3); } .ue-reg-x:hover { color: var(--ue-txt); } .ue-reg-title { font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--ue-txt); letter-spacing: -.2px; } .ue-reg-sub { color: var(--ue-txt-2); font-size: 13px; line-height: 1.4; margin: 8px 0 18px; } .ue-reg-form { display: flex; flex-direction: column; gap: 13px; } .ue-reg-field { display: flex; flex-direction: column; gap: 6px; } .ue-reg-lbl { font-family: "Inter", sans-serif; font-weight: 600; font-size: 12.5px; color: var(--ue-txt); } .ue-reg-inp { width: 100%; padding: 11px 13px; background: var(--ue-soft); border: 1px solid var(--ue-bd); border-radius: 10px; color: var(--ue-txt); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .ue-reg-inp::placeholder { color: var(--ue-txt-3); } .ue-reg-inp:focus { border-color: var(--ue-accent); box-shadow: 0 0 0 3px var(--ue-accent-soft); } .ue-reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .ue-reg-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.4; color: var(--ue-txt-2); cursor: pointer; } .ue-reg-check input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--ue-accent); width: 15px; height: 15px; cursor: pointer; } .ue-reg-check a { color: var(--ue-accent); text-decoration: underline; } .ue-reg-err { color: var(--ue-neg); font-size: 12.5px; } .ue-reg-submit { margin-top: 4px; padding: 12px; font-size: 14px; width: 100%; border-radius: 10px; } body.ue-modal-open { overflow: hidden; }