/* ============================================================ Data Extractor — компоненты Подключать после tokens.css. Классы без префикса — как в pb-extractor, чтобы существующая разметка работала как есть. Всё описано на токенах: перекрашивается через --dx-*. ============================================================ */ /* ---------- шрифт ---------- */ @font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url('fonts/Montserrat-Regular.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url('fonts/Montserrat-Medium.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url('fonts/Montserrat-SemiBold.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-weight:700;font-display:swap;src:url('fonts/Montserrat-Bold.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-weight:800;font-display:swap;src:url('fonts/Montserrat-ExtraBold.woff2') format('woff2')} /* Golos Text (SIL OFL 1.1, с 2.2) — по подмножествам: браузер грузит только нужные */ @font-face{font-family:'Golos Text';font-weight:400 900;font-display:swap;src:url('fonts/GolosText-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Golos Text';font-weight:400 900;font-display:swap;src:url('fonts/GolosText-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-weight:400 900;font-display:swap;src:url('fonts/GolosText-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Golos Text';font-weight:400 900;font-display:swap;src:url('fonts/GolosText-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- база ---------- */ .dx-reset *{box-sizing:border-box;margin:0;padding:0} .dx-app{background:var(--dx-surface-base);color:var(--dx-text-strong);font-family:var(--dx-font); font-size:var(--dx-fs-body);line-height:var(--dx-lh-body);-webkit-font-smoothing:antialiased; background-image:var(--dx-page-glow);background-repeat:no-repeat} .dx-app img,.dx-app svg{max-width:100%;display:block} .dx-app a{color:var(--dx-text-link)} .dx-app a:hover{color:var(--dx-text-strong)} .dx-app ::selection{background:var(--dx-selection)} .dx-app button,.dx-app input,.dx-app select{font:inherit} .dx-app input,.dx-app select{color:inherit} /* button не получает color:inherit — иначе сброс перебивает цвет самих кнопок. Кнопки, которые должны наследовать цвет текста, заявляют это явно. */ .dx-app .linkish,.dx-app .switch button,.dx-app summary button{color:inherit} .wrap{max-width:var(--dx-wrap);margin:0 auto;padding:0 var(--dx-gutter)} [hidden]{display:none!important} /* ---------- шапка ---------- */ .hdr{position:sticky;top:0;z-index:var(--dx-z-header);min-height:var(--dx-header-h);display:flex; align-items:center;padding:10px 0;background:var(--dx-surface-header); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--dx-border)} .hdr .wrap{display:flex;align-items:center;gap:18px;width:100%;min-width:0} .hdr .logo{flex:0 0 auto;width:150px} .hdr-sep{width:1px;height:24px;background:var(--dx-border-strong);flex:0 0 auto} .product{font-weight:var(--dx-fw-semibold);font-size:var(--dx-fs-ui);color:var(--dx-text-muted);white-space:nowrap} .hdr-status{display:inline-flex;align-items:center;gap:var(--dx-space-2);font-size:13.5px; font-weight:var(--dx-fw-medium);color:var(--dx-text-muted);border:1px solid var(--dx-border-strong); border-radius:var(--dx-radius-pill);padding:6px 12px;white-space:nowrap} /* ---------- табы ---------- */ /* По умолчанию переносятся на вторую строку — шапка растёт (min-height), ничего не обрезается. Нужна строго одна строка — .tabs-scroll: лишнее уезжает в горизонтальную прокрутку, край гаснет — видно, что дальше есть ещё. */ .tabs{display:flex;gap:6px;flex-wrap:wrap;min-width:0} .tabs-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .tabs-scroll::-webkit-scrollbar{display:none} .tab{flex:0 0 auto;border:1px solid transparent;background:transparent;border-radius:var(--dx-radius-pill); padding:9px 18px;font-weight:var(--dx-fw-medium);font-size:var(--dx-fs-ui); color:var(--dx-text-muted);cursor:pointer;text-decoration:none; transition:color var(--dx-dur-fast) ease,background var(--dx-dur-fast) ease,border-color var(--dx-dur-fast) ease} .tab:hover{color:var(--dx-text-strong)} .tab.is-here{color:var(--dx-text-strong);background:var(--dx-accent-tint);border-color:var(--dx-accent-line)} /* ---------- типографика ---------- */ .dx-app h1,.dx-app h2,.dx-app h3{letter-spacing:var(--dx-ls-heading);line-height:var(--dx-lh-tight)} .dx-app h1{font-weight:var(--dx-fw-black);font-size:var(--dx-fs-h1);letter-spacing:var(--dx-ls-display)} .dx-app h2{font-weight:var(--dx-fw-bold);font-size:var(--dx-fs-h2)} .dx-app h3{font-weight:var(--dx-fw-bold);font-size:var(--dx-fs-h3);line-height:1.3} .sub{font-size:var(--dx-fs-lead);line-height:1.55;color:var(--dx-text-muted);max-width:760px} .quiet{font-size:var(--dx-fs-sm);line-height:1.55;color:var(--dx-text-faint)} .mono{font-family:var(--dx-font-mono);font-size:13.5px;color:var(--dx-accent-soft)} .eyebrow{font-weight:var(--dx-fw-semibold);font-size:12.5px;letter-spacing:var(--dx-ls-eyebrow); text-transform:uppercase;color:var(--dx-accent-soft);display:flex;align-items:center;gap:14px; margin-bottom:var(--dx-space-4)} .eyebrow:before{content:"";width:34px;height:1px;background:var(--dx-accent);flex:0 0 auto} .eyebrow.green{color:var(--dx-ok-soft)} .eyebrow.green:before{background:var(--dx-ok)} .eyebrow.red{color:var(--dx-danger-soft)} .eyebrow.red:before{background:var(--dx-danger)} .block{margin-top:var(--dx-block-gap)} .block-tight{margin-top:22px} .block-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dx-space-4); flex-wrap:wrap;margin-bottom:var(--dx-space-5)} /* ---------- кнопки ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:var(--dx-fw-semibold);font-size:15.5px;line-height:1;padding:15px 26px; border-radius:var(--dx-radius-pill);border:1px solid transparent;text-decoration:none; cursor:pointer;white-space:nowrap; transition:background var(--dx-dur) ease,border-color var(--dx-dur) ease,color var(--dx-dur) ease, transform var(--dx-dur) ease,box-shadow var(--dx-dur) ease,opacity var(--dx-dur-fast) ease} .btn-main{background:var(--dx-accent);color:var(--dx-text-on-accent);box-shadow:var(--dx-shadow-accent)} .btn-main:hover{background:var(--dx-accent-hover);transform:translateY(-2px)} .btn-ghost{border-color:var(--dx-border-strong);color:var(--dx-text-muted);background:transparent} .btn-ghost:hover{border-color:var(--dx-accent-edge);color:var(--dx-text-strong);background:var(--dx-accent-wash)} .btn-danger{background:var(--dx-danger-btn-bg);color:var(--dx-danger-btn-ink); border-color:var(--dx-danger-btn-line)} .btn-danger:hover{background:var(--dx-danger-btn-bg-hover);color:var(--dx-danger-btn-ink)} /* 1.5.1: кнопка на ссылке — цвет кнопки, а не ссылки (.dx-app a сильнее .btn-main) */ .dx-app a.btn-main,.dx-app a.btn-main:visited,.dx-app a.btn-main:hover{color:var(--dx-text-on-accent)} .dx-app a.btn-danger,.dx-app a.btn-danger:visited,.dx-app a.btn-danger:hover{color:var(--dx-danger-btn-ink)} .dx-app a.btn-ghost,.dx-app a.btn-ghost:visited{color:var(--dx-text-muted)} .dx-app a.btn-ghost:hover{color:var(--dx-text-strong)} .btn-sm{font-size:var(--dx-fs-sm);padding:11px 18px} .btn[disabled],.btn[disabled]:hover{background:var(--dx-surface-disabled);border-color:var(--dx-border-strong); color:var(--dx-text-faint);cursor:not-allowed;transform:none;box-shadow:none} .btn.is-busy{opacity:.7;cursor:progress} .actions{display:flex;flex-wrap:wrap;gap:var(--dx-space-3);margin-top:var(--dx-space-6)} .copy{border:1px solid var(--dx-border-strong);background:transparent;border-radius:var(--dx-radius-chip); padding:5px 10px;font-size:12.5px;font-weight:var(--dx-fw-semibold);color:var(--dx-text-muted); cursor:pointer;transition:all var(--dx-dur-fast) ease} .copy:hover{border-color:var(--dx-accent-edge);color:var(--dx-text-strong)} .copy.done{border-color:var(--dx-ok-line);color:var(--dx-ok-soft)} .chip-toggle{border:1px solid var(--dx-border-strong);background:transparent;border-radius:var(--dx-radius-pill); padding:6px 14px;font-size:13.5px;font-weight:var(--dx-fw-semibold);color:var(--dx-text-muted);cursor:pointer} .chip-toggle:hover{color:var(--dx-text-strong)} .chip-toggle.is-on{border-color:var(--dx-danger-edge);color:var(--dx-danger-soft);background:var(--dx-danger-tint)} .linkish{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer} .linkish:hover{color:var(--dx-text-strong)} .dx-app a:focus-visible,.dx-app button:focus-visible,.dx-app input:focus-visible, .dx-app select:focus-visible,.dx-app summary:focus-visible{outline:var(--dx-focus);outline-offset:var(--dx-focus-offset)} /* ---------- статусы ---------- */ .dot{width:9px;height:9px;border-radius:50%;background:var(--dx-text-faint);flex:0 0 auto; box-shadow:0 0 0 4px var(--dx-ring-neutral)} .dot.ok{background:var(--dx-ok);box-shadow:0 0 0 4px var(--dx-ring-ok)} .dot.error{background:var(--dx-danger);box-shadow:0 0 0 4px var(--dx-ring-danger)} .dot.run{background:var(--dx-accent);box-shadow:0 0 0 4px var(--dx-accent-ring)} .dot.warn{background:var(--dx-warn);box-shadow:0 0 0 4px var(--dx-ring-warn)} .pill{display:inline-flex;align-items:center;gap:var(--dx-space-2);font-weight:var(--dx-fw-semibold); font-size:var(--dx-fs-xs);border-radius:var(--dx-radius-pill);padding:5px 12px; border:1px solid var(--dx-border-strong);color:var(--dx-text-muted);white-space:nowrap} .pill.ok{border-color:var(--dx-ok-line);color:var(--dx-ok-soft);background:var(--dx-ok-tint)} .pill.error{border-color:var(--dx-danger-line);color:var(--dx-danger-soft);background:var(--dx-danger-tint)} .chip{display:inline-flex;align-items:center;gap:var(--dx-space-2);font-weight:var(--dx-fw-semibold); font-size:11.5px;letter-spacing:var(--dx-ls-caps);text-transform:uppercase; border-radius:6px;padding:6px 11px;border:1px solid var(--dx-ok-line);color:var(--dx-ok-soft);white-space:nowrap} .result{display:flex;gap:10px;align-items:flex-start;margin-top:var(--dx-space-4); font-size:14.5px;line-height:1.5} .result .dot{margin-top:6px} .result.ok{color:var(--dx-ok-soft)} .result.error{color:var(--dx-danger-soft)} .result.info{color:var(--dx-accent-soft)} /* ---------- баннеры ---------- */ .banner{display:flex;gap:14px;align-items:flex-start;border-radius:var(--dx-radius-banner); padding:var(--dx-space-4) var(--dx-space-5);margin-bottom:28px; border:1px solid var(--dx-danger-line); background:var(--dx-banner-danger); color:var(--dx-text-strong);font-size:var(--dx-fs-ui)} .banner .dot{margin-top:7px} .banner.info{border-color:var(--dx-accent-line); background:var(--dx-banner-info)} .banner.demo{border-color:var(--dx-warn-line); background:var(--dx-banner-warn)} .banner.demo .dot{background:var(--dx-warn);box-shadow:0 0 0 4px var(--dx-ring-warn)} .banner.demo a{color:var(--dx-text-strong)} /* ---------- показатели ---------- */ .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dx-space-4)} .kpi .k{background:var(--dx-kpi-gradient); border:1px solid var(--dx-kpi-line);border-radius:var(--dx-radius-card);padding:22px 24px} .kpi .k b{display:block;font-weight:var(--dx-fw-black);font-size:clamp(30px,3.4vw,42px); letter-spacing:-.035em;line-height:1;margin-bottom:var(--dx-space-3);font-variant-numeric:tabular-nums} .kpi .k span{font-size:14.5px;line-height:var(--dx-lh-snug);color:var(--dx-text-muted)} /* ---------- карточки ---------- */ .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px} .card{background:var(--dx-card-gradient);border:1px solid var(--dx-border); border-radius:var(--dx-radius-card);padding:var(--dx-card-pad)} .card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--dx-space-3); margin-bottom:var(--dx-space-4)} .card .err{margin-top:14px;font-size:var(--dx-fs-sm);color:var(--dx-danger-soft)} .facts{display:grid;grid-template-columns:auto 1fr;gap:var(--dx-space-2) 18px;font-size:var(--dx-fs-ui)} .facts dt{color:var(--dx-text-faint)} .facts dd{color:var(--dx-text-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .facts-line{margin-top:14px;font-size:var(--dx-fs-sm);color:var(--dx-text-muted);line-height:var(--dx-lh-body)} .facts-line b{color:var(--dx-text-strong);font-weight:var(--dx-fw-semibold)} /* ---------- таблицы ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--dx-border);border-radius:var(--dx-radius-card); background:var(--dx-surface-subtle)} .dx-app table{width:100%;border-collapse:collapse;font-size:var(--dx-fs-ui)} .dx-app th{text-align:left;font-weight:var(--dx-fw-semibold);font-size:var(--dx-fs-caps); letter-spacing:var(--dx-ls-caps);text-transform:uppercase;color:var(--dx-text-faint); padding:14px var(--dx-space-5);border-bottom:1px solid var(--dx-border);white-space:nowrap} .dx-app td{padding:13px var(--dx-space-5);border-bottom:1px solid var(--dx-border); color:var(--dx-text-muted);vertical-align:top} .dx-app th.num{text-align:right} .dx-app tr:last-child td{border-bottom:0} .dx-app td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--dx-text-strong);white-space:nowrap} .dx-app td code{font-family:var(--dx-font-mono);font-size:13.5px;color:var(--dx-accent-soft)} .dx-app td .when{color:var(--dx-text-strong);white-space:nowrap} .status-cell{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--dx-text-strong)} tr.is-empty td,tr.is-empty td code{color:var(--dx-text-faint)} tr.is-failed .status-cell{color:var(--dx-danger-soft)} .row-detail td{background:var(--dx-row-alt);color:var(--dx-text-muted);font-size:var(--dx-fs-sm)} /* ---------- формы ---------- */ .fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--dx-space-4)} .f{display:flex;flex-direction:column;gap:7px;grid-column:span 6} .f.w2{grid-column:span 2} .f.w3{grid-column:span 3} .f.w4{grid-column:span 4} .dx-app label{font-weight:var(--dx-fw-semibold);font-size:var(--dx-fs-label);color:var(--dx-text-muted)} .dx-app input,.dx-app select{width:100%;background:var(--dx-surface-field); border:1px solid var(--dx-border-strong);border-radius:var(--dx-radius-field);padding:13px 15px; font-size:15.5px;color:var(--dx-text-strong); transition:border-color var(--dx-dur-fast) ease,box-shadow var(--dx-dur-fast) ease} .dx-app input::placeholder{color:var(--dx-text-faint)} .dx-app input:hover,.dx-app select:hover{border-color:var(--dx-border-hover)} .dx-app input:focus,.dx-app select:focus{outline:none;border-color:var(--dx-accent-focus); box-shadow:0 0 0 3px var(--dx-accent-ring)} .dx-app input[aria-invalid="true"]{border-color:var(--dx-danger-focus)} .dx-app select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--dx-text-muted) 50%), linear-gradient(135deg,var(--dx-text-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px;background-repeat:no-repeat;padding-right:40px} .hint{font-size:var(--dx-fs-xs);color:var(--dx-text-faint);line-height:1.5} .field-error{font-size:var(--dx-fs-xs);color:var(--dx-danger-soft);line-height:var(--dx-lh-snug)} .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dx-space-3);margin-top:22px} /* переключатель */ .switch{display:inline-flex;align-items:center;gap:var(--dx-space-3);cursor:pointer; font-weight:var(--dx-fw-semibold);font-size:var(--dx-fs-ui);color:var(--dx-text-strong)} .switch input{position:absolute;opacity:0;width:1px;height:1px} .switch .track{width:46px;height:26px;border-radius:var(--dx-radius-pill);background:var(--dx-border-strong); position:relative;transition:background var(--dx-dur-fast) ease;flex:0 0 auto} .switch .track:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px; border-radius:50%;background:var(--dx-switch-knob);transition:transform var(--dx-dur-fast) ease} .switch input:checked + .track{background:var(--dx-accent)} .switch input:checked + .track:after{transform:translateX(20px)} .switch input:focus-visible + .track{outline:var(--dx-focus);outline-offset:var(--dx-focus-offset)} /* ---------- раскрывашки ---------- */ .dx-app details{border:1px solid var(--dx-border);border-radius:var(--dx-radius-field); padding:var(--dx-space-3) 14px;background:var(--dx-surface-subtle)} .dx-app summary{cursor:pointer;font-weight:var(--dx-fw-semibold);color:var(--dx-text-strong);font-size:var(--dx-fs-sm)} .dx-app pre{margin-top:var(--dx-space-3);white-space:pre-wrap;overflow-wrap:anywhere; font-family:var(--dx-font-mono);font-size:12.5px;line-height:var(--dx-lh-body); color:var(--dx-accent-soft);background:var(--dx-surface-inset);border-radius:var(--dx-radius-chip);padding:var(--dx-space-3)} details.fold{border:1px solid var(--dx-border);border-radius:var(--dx-radius-card);padding:0; background:var(--dx-surface-subtle)} details.fold > summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px var(--dx-space-4); padding:18px 22px;list-style:none} details.fold > summary::-webkit-details-marker{display:none} details.fold > summary:before{content:"▸";color:var(--dx-text-faint); transition:transform var(--dx-dur-fast) ease;display:inline-block} details.fold[open] > summary:before{transform:rotate(90deg)} .fold-title{font-size:clamp(19px,2.2vw,22px);font-weight:var(--dx-fw-bold);color:var(--dx-text-strong)} .fold-meta{font-weight:var(--dx-fw-medium);font-size:14.5px;color:var(--dx-text-muted)} .fold-lead{padding:0 22px 14px} details.fold .table-wrap{border:0;border-top:1px solid var(--dx-border); border-radius:0 0 var(--dx-radius-card) var(--dx-radius-card)} /* ---------- модальное окно ---------- */ .dialog{margin:auto;max-width:520px;width:calc(100% - 40px);border:1px solid var(--dx-border-strong); border-radius:var(--dx-radius-card);padding:28px 30px;background:var(--dx-card-gradient); color:var(--dx-text-strong);font-family:var(--dx-font)} .dialog::backdrop{background:var(--dx-surface-scrim);backdrop-filter:blur(3px)} .dialog h2{font-size:22px;margin-bottom:var(--dx-space-4)} .dialog p{font-size:var(--dx-fs-ui);color:var(--dx-text-muted);margin-top:var(--dx-space-3)} .dialog code{font-family:var(--dx-font-mono);color:var(--dx-accent-soft);font-size:var(--dx-fs-sm)} .dialog-wide{max-width:680px} .dialog-target{display:grid;grid-template-columns:auto 1fr;gap:6px var(--dx-space-4);padding:14px var(--dx-space-4); border-radius:var(--dx-radius-field);background:var(--dx-surface-inset);border:1px solid var(--dx-border)} .dialog-target dt{color:var(--dx-text-faint);font-size:var(--dx-fs-sm)} .dialog-target dd{font-weight:var(--dx-fw-bold);font-size:var(--dx-fs-body);overflow-wrap:anywhere} .dialog-list{margin:var(--dx-space-2) 0 0 var(--dx-space-5);font-size:var(--dx-fs-ui);color:var(--dx-text-muted)} .dialog-list li{margin-top:var(--dx-space-1)} .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap} /* ---------- нумерованные шаги ---------- */ .starter{list-style:none;counter-reset:s;display:flex;flex-direction:column;max-width:760px} .starter li{counter-increment:s;position:relative;padding:18px 0 18px 64px; border-top:1px solid var(--dx-border);color:var(--dx-text-muted);font-size:var(--dx-fs-body)} .starter li:last-child{border-bottom:1px solid var(--dx-border)} .starter li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:18px; font-weight:var(--dx-fw-bold);font-size:var(--dx-fs-ui);color:var(--dx-accent-soft);letter-spacing:.06em} .starter li b{color:var(--dx-text-strong);font-weight:var(--dx-fw-semibold);display:block} /* список «поле → значение» */ .plan{list-style:none;display:flex;flex-direction:column} .plan li{display:flex;justify-content:space-between;gap:var(--dx-space-4);padding:11px 0; border-top:1px solid var(--dx-border);font-size:var(--dx-fs-ui);color:var(--dx-text-muted)} .plan li:last-child{border-bottom:1px solid var(--dx-border)} .plan li b{color:var(--dx-text-strong);font-weight:var(--dx-fw-semibold); font-variant-numeric:tabular-nums;text-align:right} /* ---------- подвал ---------- */ .ftr{border-top:1px solid var(--dx-border);padding:28px 0 var(--dx-space-8); color:var(--dx-text-faint);font-size:13.5px} .ftr .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between} /* ---------- узкие экраны ---------- */ @media (max-width:640px){ .hdr .logo{width:118px} .hdr-sep,.product{display:none} .tab{padding:8px var(--dx-space-3);font-size:var(--dx-fs-sm)} .f.w2,.f.w3,.f.w4{grid-column:span 6} .facts{grid-template-columns:1fr;gap:2px} .facts dd{margin-bottom:var(--dx-space-2)} details.fold > summary{padding:var(--dx-space-4)} .fold-lead{padding:0 var(--dx-space-4) var(--dx-space-3)} /* таблица становится списком карточек */ table.cards-sm,table.cards-sm tbody,table.cards-sm tr,table.cards-sm td{display:block} table.cards-sm thead{display:none} table.cards-sm tr{padding:var(--dx-space-3) var(--dx-space-4);border-bottom:1px solid var(--dx-border)} table.cards-sm tr:last-child{border-bottom:0} table.cards-sm td{border:0;padding:3px 0;display:flex;justify-content:space-between; gap:var(--dx-space-4);text-align:right} table.cards-sm td:before{content:attr(data-label);color:var(--dx-text-faint);font-size:13.5px; text-align:left;flex:0 0 auto;font-weight:var(--dx-fw-regular)} table.cards-sm td:not([data-label]){display:block;text-align:left} } /* ---------- иконки ---------- */ /* Цвет наследуется от текста. Три размера, других не заводить. */ .ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;vertical-align:middle} .ico-sm{width:16px;height:16px;stroke-width:1.9} .ico-lg{width:24px;height:24px;stroke-width:1.6} .ico-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0; border:1px solid var(--dx-border-strong);border-radius:var(--dx-radius-pill); background:transparent;color:var(--dx-text-muted);cursor:pointer; transition:color var(--dx-dur-fast) ease,border-color var(--dx-dur-fast) ease} .ico-btn:hover{color:var(--dx-text-strong);border-color:var(--dx-accent-edge)} .ico-ok{color:var(--dx-ok)} .ico-error{color:var(--dx-danger)} .ico-warn{color:var(--dx-warn)} .ico-accent{color:var(--dx-accent)} .ico-faint{color:var(--dx-text-faint)} /* ---------- скелетоны загрузки ---------- */ @keyframes dx-skel{from{background-position:180% 0}to{background-position:-80% 0}} .skel{background-color:var(--dx-skel-base); background-image:linear-gradient(90deg,transparent,var(--dx-skel-shine),transparent); background-size:60% 100%;background-repeat:no-repeat;border-radius:6px; animation:dx-skel 1.5s ease-in-out infinite} .skel-stack{display:flex;flex-direction:column;gap:10px} .skel-line{height:14px} .skel-line.w40{width:40%} .skel-line.w60{width:60%} .skel-line.w80{width:80%} .skel-title{height:26px;width:45%;border-radius:8px} .skel-num{height:38px;width:130px;border-radius:8px} .skel-pill{height:26px;width:100px;border-radius:var(--dx-radius-pill)} .skel-cell{height:13px;width:70%} .skel-cell.num{width:48px;margin-left:auto} /* скелетон живёт ровно столько же, сколько будет занимать контент: строки той же высоты, число тех же колонок — страница не прыгает */ .is-loading{pointer-events:none} /* ---------- пагинация ---------- */ .pager{display:flex;align-items:center;gap:var(--dx-space-2);flex-wrap:wrap; padding:14px var(--dx-space-5);border-top:1px solid var(--dx-border)} .pager-info{margin-right:auto;font-size:var(--dx-fs-sm);color:var(--dx-text-faint); font-variant-numeric:tabular-nums} .pager-btn{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px; border:1px solid var(--dx-border-strong);border-radius:var(--dx-radius-pill); background:transparent;color:var(--dx-text-muted);font-weight:var(--dx-fw-semibold); font-size:var(--dx-fs-sm);font-variant-numeric:tabular-nums;cursor:pointer; transition:color var(--dx-dur-fast) ease,border-color var(--dx-dur-fast) ease,background var(--dx-dur-fast) ease} .pager-btn:hover{color:var(--dx-text-strong);border-color:var(--dx-accent-edge)} .pager-btn.is-here{color:var(--dx-text-strong);background:var(--dx-accent-tint); border-color:var(--dx-accent-line);cursor:default} .pager-btn[disabled],.pager-btn[disabled]:hover{color:var(--dx-text-faint); border-color:var(--dx-border);cursor:not-allowed} .pager-gap{padding:0 var(--dx-space-1);color:var(--dx-text-faint)} .pager-size{display:inline-flex;align-items:center;gap:10px;font-size:var(--dx-fs-sm); color:var(--dx-text-faint);white-space:nowrap} .pager-size select{width:auto;padding:9px 38px 9px 12px;font-size:var(--dx-fs-sm)} @media (max-width:640px){ .pager{padding:var(--dx-space-3) var(--dx-space-4)} .pager-btn{min-width:44px;height:44px} .pager-info{width:100%;margin-bottom:var(--dx-space-2)} } /* ---------- графики ---------- */ /* Язык графиков системы (1.3.0). Столбики, без сетки: только базовая линия. Цвет ряда — по смыслу, как у статусов: .s-accent (основное/продано), .s-ok (свободно/успех), .s-warn (бронь/ожидание), .s-faint (прочее). Нулевые значения столбиком не рисуются — элемент не выводится. Разметка:
июль
Продано Бронь
На тач-экранах подсказку показывает класс .is-tip — приложение ставит его по нажатию на .chart-group (наведение там не срабатывает). */ .s-accent{--series:var(--dx-accent)} .s-ok{--series:var(--dx-ok)} .s-warn{--series:var(--dx-warn)} .s-faint{--series:var(--dx-text-faint)} .chart{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0} .chart-plot{display:flex;align-items:flex-end;gap:var(--dx-space-4);height:var(--chart-h,92px); padding:0 var(--dx-space-1);border-bottom:1px solid var(--dx-border-strong)} .chart-group{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end; justify-content:center;gap:3px;border-radius:4px;outline:none} .chart-group:focus-visible{outline:var(--dx-focus);outline-offset:var(--dx-focus-offset)} .chart-bar{width:13px;min-height:2px;border-radius:3px 3px 0 0;background:var(--series,var(--dx-accent)); transition:height var(--dx-dur) ease} .chart-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5; padding:7px 10px;border-radius:var(--dx-radius-chip);border:1px solid var(--dx-border-strong); background:var(--dx-surface-card);color:var(--dx-text-muted);font-size:var(--dx-fs-xs);line-height:1.4; white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0; transition:opacity var(--dx-dur-fast) ease} .chart-tip b{color:var(--dx-text-strong);font-weight:var(--dx-fw-semibold)} @media (hover:hover){.chart-group:hover .chart-tip{opacity:1}} .chart-group:focus-visible .chart-tip,.chart-group.is-tip .chart-tip{opacity:1} .chart-labels{display:flex;gap:var(--dx-space-4);padding:0 var(--dx-space-1)} .chart-label{flex:1 1 0;min-width:0;text-align:center;font-size:var(--dx-fs-xs);color:var(--dx-text-muted); font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chart-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;border-top:1px solid var(--dx-border); font-size:var(--dx-fs-xs);color:var(--dx-text-muted)} .chart-key{display:inline-flex;align-items:center;gap:8px} .chart-key i{width:8px;height:8px;border-radius:2px;background:var(--series,var(--dx-accent));flex:0 0 auto} .chart-empty{height:var(--chart-h,92px);display:grid;place-items:center;text-align:center; font-size:var(--dx-fs-sm);color:var(--dx-text-faint);border-bottom:1px solid var(--dx-border)} .chart-plot.is-loading .chart-bar{background:var(--dx-skel-base)} @media (prefers-reduced-motion:reduce){ .dx-app *{animation:none!important;transition:none!important} } /* ---------- 2.2: пара шрифтов по ролям (data-dx-fonts="pair") ---------- */ html[data-dx-fonts="pair"]{--dx-font:var(--dx-font-text)} html[data-dx-fonts="pair"] :is(h1,h2,h3,.mc-num,.mc-kpi__value,.mc-header__product){font-family:var(--dx-font-head)} html[data-dx-fonts="pair"] :is(b,strong){font-weight:700} /* у Golos есть 800–900: «bolder» давал чёрное */