/* ===================================================================
Delta CRM — общая дизайн-система
Используется и в delta-admin-design.html (28 экранов),
и в delta-settings-detailed.html (детальный экран настроек).
=================================================================== */
/* ---------- TOKENS ---------- */
:root{
--bg: #F2F1EC;
--bg-soft: #E9E7E0;
--surface: #FFFFFF;
--surface-2: #FAFAF6;
--border: #E1DED7;
--border-soft: #ECEAE3;
--ink: #0E0E0C;
--ink-2: #2C2B27;
--muted: #74726D;
--muted-2: #A29F98;
--accent: #0E0E0C;
--accent-soft: #DAD6CC;
--positive: #406B49;
--positive-soft:#E1E8DD;
--danger: #8C3325;
--danger-soft: #EBD6CE;
--info: #3A597B;
--info-soft: #DDE3EA;
--warn: #7B5E10;
--warn-soft: #F1E7C3;
--radius-s: 10px;
--radius: 14px;
--radius-l: 20px;
--radius-xl:28px;
}
/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
background:var(--bg);color:var(--ink);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
font-size:14px;line-height:1.45;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{
font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
font-variant-numeric:tabular-nums;
}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--border-soft);margin:8px 0}
/* ===================================================================
SCREEN WRAPPER (для обзорного концепта с 28 экранами)
=================================================================== */
.screen{
width:1440px; margin:32px auto; padding:24px;
background:var(--bg);
border-radius:var(--radius-xl);
border:1px solid var(--border);
box-shadow:0 30px 60px -30px rgba(14,14,12,.16);
position:relative;
}
.screen-label{
position:absolute; top:-14px; left:24px;
background:var(--ink); color:#fff;
font-size:12px; padding:6px 12px; border-radius:999px;
letter-spacing:.02em; font-weight:500;
}
.screen-sub{
position:absolute; top:-14px; right:24px;
background:var(--surface); color:var(--muted);
font-size:11px; padding:6px 12px; border-radius:999px;
border:1px solid var(--border);
}
.app{
display:grid;
grid-template-columns:248px 1fr;
gap:16px;
height:880px;
}
/* ===================================================================
APP (для отдельных страниц без screen-обёртки)
=================================================================== */
.app-page{
display:grid;
grid-template-columns:248px 1fr;
gap:16px;
max-width:1440px;
margin:0 auto;
padding:16px;
min-height:100vh;
}
/* ===================================================================
SIDEBAR
=================================================================== */
.sidebar{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-l);
padding:18px 14px;
display:flex;flex-direction:column;
}
.sidebar.sticky{
position:sticky;top:16px;
height:calc(100vh - 32px);
overflow:auto;
}
.brand{
display:flex;align-items:center;gap:10px;
padding:6px 8px 14px;
border-bottom:1px solid var(--border-soft);
margin-bottom:14px;
}
.brand-mark{
width:32px;height:32px;border-radius:9px;
background:var(--ink);
display:grid;place-items:center;
color:#fff;font-weight:700;position:relative;
}
.brand-mark::after{
content:"";position:absolute;inset:6px;
border:1.5px solid #fff;border-radius:4px;
clip-path:polygon(50% 0,100% 100%,0 100%);
opacity:.5;
}
.brand-name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-name span{color:var(--muted);font-weight:400}
.org-switch{
display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface-2);
margin-bottom:14px;
}
.org-switch .left{display:flex;align-items:center;gap:10px}
.org-badge{
width:28px;height:28px;border-radius:8px;
background:var(--ink);
display:grid;place-items:center;
font-size:11px;font-weight:700;color:#fff;
}
.org-switch .name{font-weight:600;font-size:13px}
.org-switch .sub{font-size:11px;color:var(--muted);margin-top:1px}
.chev{color:var(--muted-2)}
.nav-group{margin-top:6px}
.nav-title{
font-size:11px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;
padding:10px 10px 6px;
}
.nav a{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:10px;
color:var(--ink-2);font-size:13.5px;position:relative;
}
.nav a:hover{background:var(--bg-soft)}
.nav a.active{background:var(--ink);color:#fff}
.nav a.active .badge{background:rgba(255,255,255,.16);color:#fff}
.nav a .ico{width:18px;height:18px;flex:none;color:currentColor}
.nav a .badge{
margin-left:auto;font-size:11px;padding:1px 8px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);
}
.nav-sub{
margin:2px 0 4px 14px;
display:flex;flex-direction:column;gap:2px;
padding-left:12px;border-left:1px solid var(--border-soft);
}
.nav-sub a{font-size:12.5px;padding:5px 10px;color:var(--muted)}
.nav-sub a.active{background:var(--accent-soft);color:var(--ink);font-weight:500}
.nav-sub a:hover{color:var(--ink-2)}
.sidebar-footer{
margin-top:auto;padding:10px 8px 4px;
border-top:1px solid var(--border-soft);
display:flex;align-items:center;gap:10px;
}
.avatar{
width:32px;height:32px;border-radius:50%;
background:#3A3833;color:#fff;
display:grid;place-items:center;font-weight:600;font-size:12px;
}
.foot-name{font-size:13px;font-weight:500}
.foot-sub{font-size:11px;color:var(--muted)}
/* ===================================================================
TOPBAR
=================================================================== */
.main{display:flex;flex-direction:column;gap:14px;min-width:0}
.topbar{
display:flex;align-items:center;gap:12px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:10px 14px;
}
.topbar.sticky{
position:sticky;top:16px;z-index:5;
box-shadow:0 8px 24px -16px rgba(14,14,12,.12);
}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.crumbs .sep{color:var(--muted-2)}
.crumbs .now{color:var(--ink);font-weight:500}
.crumbs a{color:inherit}
.crumbs a:hover{color:var(--ink)}
.search{
margin-left:8px;flex:1;max-width:420px;
display:flex;align-items:center;gap:8px;
background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;padding:8px 12px;
}
.search input{border:0;background:transparent;outline:0;width:100%;font-size:13px}
.kbd{
font-size:10.5px;padding:2px 6px;
border:1px solid var(--border);border-radius:6px;
color:var(--muted);background:#fff;
}
.icon-btn{
width:36px;height:36px;
border:1px solid var(--border);border-radius:10px;
background:var(--surface);
display:grid;place-items:center;color:var(--ink-2);
position:relative;
}
.icon-btn:hover{background:var(--bg-soft)}
.icon-btn .dot{
position:absolute;top:7px;right:7px;
width:7px;height:7px;background:var(--ink);
border-radius:50%;border:2px solid var(--surface);
}
/* ===================================================================
BUTTONS
=================================================================== */
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:9px 14px;border-radius:10px;
font-weight:500;font-size:13px;
border:1px solid transparent;
transition:transform .06s,background .1s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-soft{background:var(--bg-soft);color:var(--ink);border-color:transparent}
.btn-soft:hover{background:var(--accent-soft)}
.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn-danger:hover{background:#E5C5BC}
.btn-link{padding:9px 4px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* ===================================================================
TAGS, CHIPS, RADIOS
=================================================================== */
.tag{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:999px;
font-size:11.5px;font-weight:500;
background:var(--bg-soft);color:var(--ink-2);
border:1px solid var(--border-soft);
}
.tag.green{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.tag.red{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.tag.blue{background:var(--info-soft);color:var(--info);border-color:transparent}
.tag.dark{background:var(--ink);color:#fff;border-color:transparent}
.tag-pill{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
background:var(--accent-soft);
font-size:12.5px;font-weight:500;
}
.tag-pill .x{cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.tag-pill .x:hover{color:var(--ink)}
.tag-pill.dark{background:var(--ink);color:#fff}
.tag-pill.dark .x{color:#A29F98}
.chip{
padding:6px 11px;border-radius:999px;
background:var(--surface);border:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);
display:inline-flex;align-items:center;gap:6px;
}
.chip.active{background:var(--ink);color:#fff;border-color:transparent}
.radio{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
border:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);
cursor:pointer;background:var(--surface-2);
}
.radio:hover{background:var(--bg-soft)}
.radio.on{background:var(--ink);color:#fff;border-color:transparent}
.radio-group{display:flex;gap:6px;flex-wrap:wrap}
/* ===================================================================
PAGE / CARD / SECTION
=================================================================== */
.page{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:24px;
min-height:0;flex:1;overflow:hidden;
display:flex;flex-direction:column;gap:18px;
}
.page-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
}
.page-title{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.page-sub{color:var(--muted);font-size:13px;margin-top:4px}
.page-actions{display:flex;gap:8px;align-items:center}
.card{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:18px 20px;
}
.card-head{
display:flex;align-items:flex-start;justify-content:space-between;
gap:16px;margin-bottom:12px;
}
.card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.card-desc{font-size:12.5px;color:var(--muted);margin-top:4px}
.section-title{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 10px}
/* Section card (используется в детальной странице настроек) */
.section{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;scroll-margin-top:88px;
}
.section-head{
padding:20px 24px 16px;
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
border-bottom:1px solid var(--border-soft);
background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
}
.section-head .ix{
font-family:'JetBrains Mono',monospace;
font-size:11px;color:var(--muted-2);
letter-spacing:.08em;text-transform:uppercase;
margin-bottom:6px;
}
.section-head h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}
.section-head .desc{color:var(--muted);font-size:13px;margin-top:6px;max-width:640px}
.section-head .ctl{display:flex;align-items:center;gap:8px;flex:none}
.section-body{padding:22px 24px}
.section-foot{
display:flex;align-items:center;gap:10px;
padding:14px 24px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
font-size:12.5px;color:var(--muted);
}
/* ===================================================================
KPI cards
=================================================================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:14px 16px;
position:relative;overflow:hidden;
}
.kpi.dark{background:var(--ink);color:#fff;border-color:transparent}
.kpi.dark .label{color:#A29F98}
.kpi .label{font-size:12px;color:var(--muted);letter-spacing:.01em}
.kpi .value{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.kpi .delta{display:inline-flex;gap:4px;align-items:center;margin-top:8px;font-size:11.5px;color:var(--positive)}
.kpi.dark .delta{color:#C2C0BA}
.kpi .delta.red{color:var(--danger)}
.kpi .spark{position:absolute;right:10px;bottom:8px;opacity:.55}
/* ===================================================================
TABLE
=================================================================== */
.table-wrap{
border:1px solid var(--border-soft);
border-radius:var(--radius);background:var(--surface);overflow:hidden;
}
.table-tools{
display:flex;align-items:center;gap:8px;
padding:12px 14px;border-bottom:1px solid var(--border-soft);
background:var(--surface-2);
}
table{width:100%;border-collapse:collapse}
thead th{
text-align:left;font-weight:500;
font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);padding:11px 14px;
background:var(--surface-2);border-bottom:1px solid var(--border-soft);
}
tbody td{
padding:12px 14px;border-bottom:1px solid var(--border-soft);
font-size:13px;vertical-align:middle;
}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.row-link{font-weight:500;color:var(--ink)}
.row-link:hover{text-decoration:underline}
/* alternate compact .tbl used in settings */
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{
text-align:left;font-weight:500;font-size:11px;
text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);padding:10px 14px;
background:var(--surface-2);border-bottom:1px solid var(--border-soft);
}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--border-soft);font-size:13px;vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.dot-status{
display:inline-block;width:6px;height:6px;border-radius:50%;
margin-right:6px;background:var(--muted-2);
}
.dot-status.green{background:var(--positive)}
.dot-status.red{background:var(--danger)}
.dot-status.yellow{background:#9B8420}
.dot-status.blue{background:var(--info)}
/* ===================================================================
FORM ELEMENTS
=================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.field label{
display:flex;align-items:center;gap:6px;
font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500;
}
.field label .req{color:var(--danger)}
.field label .hint{margin-left:auto;font-weight:400;font-size:11px;color:var(--muted-2)}
.field .help{font-size:11.5px;color:var(--muted);margin-top:6px}
.field .err{
font-size:11.5px;color:var(--danger);
margin-top:6px;display:flex;gap:4px;align-items:center;
}
.input,.select,.textarea{
width:100%;
background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;padding:11px 12px;
font-size:13px;color:var(--ink);outline:0;
font-family:inherit;
transition:border-color .1s,background .1s;
}
.input:hover,.select:hover{border-color:#C8C5BE}
.input:focus,.select:focus,.textarea:focus{
border-color:var(--ink);background:#fff;
box-shadow:0 0 0 3px rgba(14,14,12,.07);
}
.input.error,.select.error{border-color:var(--danger);background:#FBF3F1}
.input.success{border-color:var(--positive);background:#F5FAF4}
.input[disabled]{background:#F5F4F0;color:var(--muted-2);cursor:not-allowed}
.textarea{resize:none;min-height:84px}
.select{
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;
padding-right:32px;cursor:pointer;
}
.input-group{
display:flex;align-items:center;
background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;overflow:hidden;
}
.input-group .prefix,.input-group .suffix{
padding:11px 12px;font-size:13px;color:var(--muted);
background:#fff;border-right:1px solid var(--border);
}
.input-group .suffix{border-right:0;border-left:1px solid var(--border)}
.input-group .input{border:0;background:transparent;border-radius:0}
.input-group:focus-within{border-color:var(--ink);background:#fff}
/* Open combobox */
.combo{position:relative}
.combo-list{
position:absolute;top:calc(100% + 6px);left:0;right:0;
background:#fff;border:1px solid var(--border);
border-radius:12px;padding:6px;
box-shadow:0 24px 48px -16px rgba(14,14,12,.18),0 4px 8px rgba(14,14,12,.04);
z-index:2;
}
.combo-search{
display:flex;align-items:center;gap:8px;
padding:6px 8px;border-bottom:1px solid var(--border-soft);
margin-bottom:4px;
}
.combo-search input{border:0;outline:0;font-size:13px;flex:1}
.combo-item{
display:flex;align-items:center;justify-content:space-between;
padding:8px 10px;border-radius:8px;
font-size:13px;cursor:pointer;
}
.combo-item:hover{background:var(--bg-soft)}
.combo-item.selected{background:var(--ink);color:#fff}
.combo-item .meta{font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.combo-item.selected .meta{color:#A29F98}
/* Tag input */
.tag-input{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px;border:1px solid var(--border);
border-radius:10px;background:var(--surface-2);
min-height:46px;align-items:center;
}
.tag-input:focus-within{border-color:var(--ink);background:#fff}
.tag-input input{
flex:1;min-width:120px;border:0;background:transparent;
outline:0;font-size:13px;padding:4px;
}
/* Switch */
.switch{
position:relative;width:36px;height:20px;
background:#D6D2C8;border-radius:999px;
display:inline-block;flex:none;cursor:pointer;
border:1px solid var(--border);
transition:background .15s;
}
.switch::after{
content:"";position:absolute;top:2px;left:2px;
width:14px;height:14px;background:#fff;border-radius:50%;
box-shadow:0 1px 2px rgba(0,0,0,.15);
transition:left .15s;
}
.switch.on{background:var(--ink);border-color:transparent}
.switch.on::after{left:18px}
.toggle-row{
display:flex;align-items:flex-start;gap:14px;
padding:14px 0;border-top:1px solid var(--border-soft);
}
.toggle-row:first-child{border-top:0;padding-top:0}
.toggle-row .info{flex:1}
.toggle-row .info .title{font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px}
.toggle-row .info .desc{color:var(--muted);font-size:12.5px;margin-top:2px;max-width:600px}
/* ===================================================================
BANNERS
=================================================================== */
.banner{
display:flex;gap:12px;padding:12px 14px;
border-radius:12px;background:var(--warn-soft);color:var(--warn);
font-size:12.5px;align-items:flex-start;
}
.banner.info{background:var(--info-soft);color:var(--info)}
.banner.danger{background:var(--danger-soft);color:var(--danger)}
.banner .ico{flex:none;margin-top:1px}
.unsaved-banner{
display:flex;align-items:center;gap:14px;
padding:12px 16px;background:var(--ink);color:#fff;
border-radius:14px;font-size:13px;
}
.unsaved-banner .dot{
width:8px;height:8px;border-radius:50%;background:#F4D544;flex:none;
}
.unsaved-banner .actions{margin-left:auto;display:flex;gap:8px}
.unsaved-banner .btn-primary{background:#fff;color:var(--ink)}
.unsaved-banner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
.save-bar{
position:sticky;bottom:16px;
display:flex;align-items:center;gap:10px;
padding:14px 18px;background:var(--ink);color:#fff;
border-radius:16px;z-index:5;
box-shadow:0 14px 30px -10px rgba(14,14,12,.5);
}
.save-bar .pulse{width:8px;height:8px;border-radius:50%;background:#F4D544}
.save-bar .info{flex:1}
.save-bar .info .t{font-weight:500;font-size:13.5px}
.save-bar .info .s{color:#A29F98;font-size:11.5px;margin-top:2px}
.save-bar .actions{display:flex;gap:8px}
.save-bar .btn-primary{background:#fff;color:var(--ink)}
.save-bar .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
/* ===================================================================
SPECIALIZED COMPONENTS
=================================================================== */
/* Hero */
.hero{
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:24px 28px;
display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.hero h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.hero .sub{color:var(--muted);font-size:13.5px;max-width:680px}
.hero .meta{display:flex;gap:14px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.hero .meta b{color:var(--ink);font-weight:500}
/* Page grid with TOC */
.page-grid{display:grid;grid-template-columns:228px 1fr;gap:20px}
.toc{
position:sticky;top:96px;align-self:start;
background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:14px;
max-height:calc(100vh - 110px);overflow:auto;
}
.toc-title{
font-size:11px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;
padding:4px 8px 8px;
}
.toc a{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 10px;border-radius:8px;
font-size:13px;color:var(--ink-2);
}
.toc a:hover{background:var(--bg-soft)}
.toc a.active{background:var(--ink);color:#fff}
.toc a .n{font-size:11px;color:var(--muted-2);font-family:'JetBrains Mono',monospace}
.toc a.active .n{color:#A29F98}
.toc .sec-label{
font-size:11px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;
padding:10px 8px 4px;
}
.sections{display:flex;flex-direction:column;gap:16px;min-width:0}
/* Logo upload */
.logo-zone{
display:grid;grid-template-columns:160px 1fr;gap:18px;
padding:14px;border:1px dashed var(--border);
border-radius:14px;background:var(--surface-2);
}
.logo-preview{
width:160px;height:160px;border-radius:14px;
background:var(--ink);display:grid;place-items:center;
color:#fff;font-size:64px;font-weight:700;
position:relative;overflow:hidden;
}
.logo-preview::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 60%);
}
.logo-controls{display:flex;flex-direction:column;justify-content:center;gap:10px}
.logo-controls .title{font-weight:600}
.logo-controls .meta{font-size:12px;color:var(--muted)}
.logo-actions{display:flex;gap:8px;margin-top:6px}
/* Public page preview */
.preview-card{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.url-row{display:flex;align-items:center;gap:8px}
.url-pill{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--border);
font-family:'JetBrains Mono',monospace;font-size:13px;
}
.url-pill .scheme{color:var(--muted)}
.url-pill .slug{font-weight:500}
.browser-mock{
background:var(--surface-2);border:1px solid var(--border);
border-radius:14px;overflow:hidden;
}
.browser-bar{
display:flex;align-items:center;gap:6px;
padding:10px 12px;border-bottom:1px solid var(--border);
}
.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#D6D2C8}
.browser-url{
flex:1;margin-left:10px;padding:5px 10px;
background:#fff;border:1px solid var(--border);border-radius:6px;
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
}
.browser-body{padding:14px 16px;background:#fff;min-height:120px;font-size:12px}
.browser-body .biz{
display:flex;align-items:center;gap:10px;
padding-bottom:10px;border-bottom:1px solid var(--border-soft);
}
.browser-body .biz-logo{
width:28px;height:28px;border-radius:7px;
background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:13px;
}
.browser-body .biz-name{font-weight:600;font-size:13px}
.browser-body .biz-sub{color:var(--muted);font-size:11px}
.browser-body .biz-products{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px;
}
.browser-body .biz-products div{aspect-ratio:1.2/1;background:var(--bg-soft);border-radius:6px}
/* Payments (sellers + accounts) */
.payments{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.payment-card{
display:flex;flex-direction:column;gap:10px;
padding:18px;border-radius:14px;
border:1px solid var(--border-soft);background:var(--surface);
}
.payment-card.featured{background:var(--ink);color:#fff;border-color:transparent}
.payment-card.featured .muted-2{color:#A29F98}
.payment-card .head{display:flex;justify-content:space-between;align-items:flex-start}
.payment-card .name{font-weight:600;font-size:15px}
.payment-card .sub{font-size:12px;color:var(--muted)}
.payment-card.featured .sub{color:#A29F98}
.payment-card .num{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--muted)}
.payment-card.featured .num{color:#A29F98}
.payment-card .seller{font-size:12.5px;color:var(--muted)}
.payment-card.featured .seller{color:#A29F98}
.payment-card .seller b{color:var(--ink);font-weight:500}
.payment-card.featured .seller b{color:#fff}
/* NDS tiles */
.nds-grid{display:flex;gap:8px;flex-wrap:wrap}
.nds-tile{
position:relative;
padding:14px 18px;border:1px solid var(--border);
border-radius:12px;background:var(--surface-2);
min-width:80px;text-align:center;cursor:pointer;
transition:all .1s;
}
.nds-tile:hover{border-color:#C8C5BE}
.nds-tile.on{background:var(--ink);color:#fff;border-color:transparent}
.nds-tile .v{font-size:18px;font-weight:600;letter-spacing:-.01em}
.nds-tile .l{font-size:11px;color:var(--muted);margin-top:2px}
.nds-tile.on .l{color:#A29F98}
.nds-tile .star{position:absolute;top:6px;right:8px;font-size:10px;color:var(--warn)}
/* Invoice template preview */
.tpl-row{display:grid;grid-template-columns:80px 1fr;gap:14px}
.tpl-preview{
height:104px;border-radius:10px;
border:1px solid var(--border);background:#fff;
padding:10px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
}
.tpl-preview .ln{height:3px;background:#E5E3DE;border-radius:1px}
.tpl-preview .ln.short{width:40%}
.tpl-preview .ln.dark{background:var(--ink);width:30%}
/* Activity feed */
.activity-feed{display:flex;flex-direction:column}
.act-item{
display:grid;grid-template-columns:24px 1fr auto;
gap:12px;padding:10px 0;
border-bottom:1px solid var(--border-soft);
}
.act-item:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:8px;margin-left:8px}
.act-item .title{font-size:13px;font-weight:500}
.act-item .who{color:var(--muted);font-size:11.5px;margin-top:2px}
.act-item .when{color:var(--muted-2);font-size:11.5px;font-variant-numeric:tabular-nums;margin-top:8px}
/* Timeline */
.timeline{display:flex;flex-direction:column;gap:14px}
.tl-item{display:grid;grid-template-columns:24px 1fr;gap:10px}
.tl-dot{
width:10px;height:10px;border-radius:50%;
background:var(--ink);margin-top:6px;margin-left:7px;position:relative;
}
.tl-dot::before{
content:"";position:absolute;top:14px;left:4px;
width:1px;height:28px;background:var(--border);
}
.tl-text .title{font-size:13px;font-weight:500}
.tl-text .when{font-size:11.5px;color:var(--muted)}
/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:1;min-height:0}
.col{
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:10px;
display:flex;flex-direction:column;min-height:0;
}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.col-head .name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}
.col-head .name .pill{
font-size:11px;color:var(--muted);
background:var(--surface);border:1px solid var(--border);
border-radius:999px;padding:1px 8px;
}
.col-body{display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1}
.deal{
background:var(--surface);border:1px solid var(--border);
border-radius:12px;padding:11px 12px;
}
.deal .who{font-weight:600;font-size:13px}
.deal .sum{font-size:13px;color:var(--ink);font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.deal .meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--muted)}
.deal .meta .av{width:20px;height:20px;border-radius:50%;background:#3A3833}
.col.accent{background:var(--accent-soft);border-color:#C9C4B8}
/* Detail layout (карточка документа) */
.detail{display:grid;grid-template-columns:1fr 320px;gap:16px;flex:1;min-height:0}
.detail-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.detail-side{display:flex;flex-direction:column;gap:12px}
/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:14px;
display:flex;flex-direction:column;gap:10px;
}
.product .thumb{
aspect-ratio:1.6/1;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
border-radius:10px;position:relative;overflow:hidden;
}
.product .thumb::after{
content:"";position:absolute;
inset:auto -20% -30% auto;width:120%;height:160%;
background:radial-gradient(circle at 30% 30%,#FFF8 0,transparent 60%);
}
.product .name{font-weight:500;font-size:13.5px}
.product .price{font-weight:600;font-size:14px}
.product .row{display:flex;align-items:center;justify-content:space-between}
/* Map preview (locations) */
.map{
background:repeating-linear-gradient(45deg,#ECEAE3,#ECEAE3 8px,#F4F2EC 8px,#F4F2EC 16px);
border-radius:12px;border:1px solid var(--border-soft);
position:relative;overflow:hidden;
}
.pin{
position:absolute;width:22px;height:22px;
border-radius:50%;background:var(--ink);color:#fff;
font-size:11px;font-weight:600;
display:grid;place-items:center;
transform:translate(-50%,-50%);
box-shadow:0 6px 12px -4px rgba(0,0,0,.3);
}
.pin::after{
content:"";position:absolute;
width:6px;height:6px;background:var(--ink);
bottom:-3px;left:50%;
transform:translateX(-50%) rotate(45deg);
}
/* Warehouse cells grid */
.cells{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.cell{
aspect-ratio:1;border:1px solid var(--border);border-radius:8px;
display:grid;place-items:center;
font-size:11px;color:var(--muted);
background:var(--surface);
font-family:'JetBrains Mono',monospace;
}
.cell.full{background:var(--ink);color:#fff;border-color:transparent}
.cell.part{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.cell.empty{background:var(--surface);color:var(--muted-2)}
/* Proto-nav (наверху обзорного концепта) */
.proto-nav{
width:1440px;margin:24px auto 0;padding:14px 20px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
position:sticky;top:16px;z-index:10;
box-shadow:0 10px 30px -14px rgba(14,14,12,.18);
}
.proto-nav .lbl{font-weight:600;font-size:13px;margin-right:8px}
.proto-nav .grp{
font-size:10px;text-transform:uppercase;letter-spacing:.08em;
color:var(--muted-2);margin:0 8px 0 4px;
}
.proto-nav a{
padding:6px 10px;border-radius:999px;font-size:12px;
border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);
}
.proto-nav a:hover{background:var(--bg-soft)}
/* Design-system swatches */
.ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.swatch{
border-radius:var(--radius);padding:14px 16px;height:96px;
display:flex;flex-direction:column;justify-content:space-between;
border:1px solid var(--border-soft);
}
.sw-name{font-weight:600}
.sw-hex{font-size:12px;opacity:.75;font-family:'JetBrains Mono',monospace}
.type-row{
display:flex;align-items:baseline;gap:18px;
padding:10px 0;border-bottom:1px solid var(--border-soft);
}
.type-row:last-child{border-bottom:0}
.type-row .label{width:120px;color:var(--muted);font-size:12px}
.type-row .spec{margin-left:auto;color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace}
.chart-card{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--radius);padding:18px 20px;
display:flex;flex-direction:column;gap:10px;
}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between}
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.activity{display:flex;flex-direction:column;gap:10px}
.i{width:18px;height:18px;display:inline-block}
/* ===================================================================
PUBLIC CART — корзина публичного каталога delta.online/
=================================================================== */
/* Site header публичной части (отличается от админ-топбара) */
.site-header{
background:var(--surface);border-bottom:1px solid var(--border);
position:sticky;top:0;z-index:10;
}
.site-header .inner{
max-width:1280px;margin:0 auto;padding:14px 24px;
display:flex;align-items:center;gap:20px;
}
.site-brand{display:flex;align-items:center;gap:10px}
.site-brand .mark{
width:36px;height:36px;border-radius:10px;background:var(--ink);
display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;
}
.site-brand .name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.site-brand .sub{font-size:11px;color:var(--muted)}
.site-nav{display:flex;gap:2px;flex:1;margin-left:14px}
.site-nav a{
padding:8px 12px;border-radius:999px;font-size:13px;color:var(--ink-2);
}
.site-nav a:hover{background:var(--bg-soft)}
.site-nav a.active{background:var(--ink);color:#fff}
.site-search{
flex:1;max-width:340px;
display:flex;align-items:center;gap:8px;
background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;padding:8px 12px;
}
.site-search input{border:0;background:transparent;outline:0;width:100%;font-size:13px}
.cart-btn{
position:relative;
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px 8px 12px;
background:var(--ink);color:#fff;border-radius:12px;font-size:13px;font-weight:500;
}
.cart-btn:hover{background:#000}
.cart-btn .qty{
display:inline-grid;place-items:center;
min-width:20px;height:20px;padding:0 6px;
background:#fff;color:var(--ink);
border-radius:999px;font-size:11px;font-weight:600;
font-variant-numeric:tabular-nums;
}
.cart-btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.cart-btn.ghost .qty{background:var(--ink);color:#fff}
/* Page wrap для публичных страниц */
.public-wrap{max-width:1280px;margin:0 auto;padding:24px}
.public-bcr{
display:flex;align-items:center;gap:8px;
color:var(--muted);font-size:12.5px;margin-bottom:14px;
}
.public-bcr a{color:inherit}
.public-bcr a:hover{color:var(--ink)}
.public-bcr .sep{color:var(--muted-2)}
.public-bcr .now{color:var(--ink);font-weight:500}
.public-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:20px;margin-bottom:20px;
}
.public-head h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0}
.public-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
/* Cart grid */
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:flex-start}
/* Cart row */
.cart-list{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.cart-row{
display:grid;grid-template-columns:88px 1fr auto auto 36px;
gap:18px;align-items:center;
padding:18px 22px;border-bottom:1px solid var(--border-soft);
}
.cart-row:last-child{border-bottom:0}
.cart-row .thumb{
width:88px;height:88px;border-radius:12px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
position:relative;overflow:hidden;
}
.cart-row .thumb.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.cart-row .thumb::after{
content:"";position:absolute;
inset:auto -20% -30% auto;width:120%;height:160%;
background:radial-gradient(circle at 30% 30%,#FFF8 0,transparent 60%);
}
.cart-row .name{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.cart-row .meta{display:flex;gap:10px;margin-top:4px;font-size:12px;color:var(--muted);align-items:center}
.cart-row .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.cart-row .price-row{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.cart-row .price-row .old{text-decoration:line-through}
.cart-row .price-row .save{color:var(--positive);font-weight:500}
.cart-row .sum{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;text-align:right;min-width:108px}
.cart-row .sum .unit{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:2px}
.cart-row .rm{
width:32px;height:32px;border-radius:8px;
display:grid;place-items:center;color:var(--muted-2);
}
.cart-row .rm:hover{background:var(--danger-soft);color:var(--danger)}
/* Quantity stepper */
.qty-step{
display:inline-flex;align-items:center;gap:0;
background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;overflow:hidden;
}
.qty-step button{
width:32px;height:36px;display:grid;place-items:center;
color:var(--ink-2);font-size:16px;line-height:1;
}
.qty-step button:hover{background:var(--bg-soft)}
.qty-step button:disabled{color:var(--muted-2);cursor:not-allowed}
.qty-step .val{
min-width:36px;text-align:center;font-weight:600;font-size:13px;
font-variant-numeric:tabular-nums;
}
/* Section header inside cart pages */
.cart-section{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:22px 24px;margin-top:14px;
}
.cart-section h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.cart-section .sub{color:var(--muted);font-size:12.5px;margin-bottom:16px}
/* Mode-cards: physical / legal */
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{
position:relative;
padding:16px 18px;border-radius:14px;
border:1px solid var(--border);background:var(--surface-2);
cursor:pointer;transition:border-color .1s,background .1s;
}
.mode-card:hover{border-color:#C8C5BE}
.mode-card.on{
background:var(--surface);border-color:var(--ink);
box-shadow:0 0 0 3px rgba(14,14,12,.07);
}
.mode-card .check{
position:absolute;top:14px;right:14px;
width:18px;height:18px;border-radius:50%;
border:1.5px solid var(--border);background:#fff;
}
.mode-card.on .check{border-color:var(--ink);background:var(--ink)}
.mode-card.on .check::after{
content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;
}
.mode-card .ttl{font-weight:600;font-size:14.5px;margin-bottom:4px;padding-right:24px}
.mode-card .desc{color:var(--muted);font-size:12px;line-height:1.45;padding-right:24px}
.mode-card .badges{display:flex;gap:6px;margin-top:10px}
/* Delivery options (radio rows) */
.delivery-list{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--border-soft)}
.delivery-row{
display:grid;grid-template-columns:20px 1fr auto;gap:14px;align-items:center;
padding:14px 16px;border-bottom:1px solid var(--border-soft);
background:var(--surface-2);cursor:pointer;
}
.delivery-row:last-child{border-bottom:0}
.delivery-row:hover{background:var(--bg-soft)}
.delivery-row.on{background:var(--surface)}
.delivery-row .dot{
width:16px;height:16px;border-radius:50%;
border:1.5px solid var(--border);background:#fff;position:relative;flex:none;
}
.delivery-row.on .dot{border-color:var(--ink)}
.delivery-row.on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.delivery-row .info .title{font-weight:500;font-size:13.5px}
.delivery-row .info .meta{color:var(--muted);font-size:12px;margin-top:2px}
.delivery-row .price{font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.delivery-row .price.free{color:var(--positive)}
/* Promo */
.promo{display:flex;gap:8px}
.promo .input{flex:1}
.promo-applied{
display:flex;align-items:center;gap:10px;
padding:10px 14px;background:var(--positive-soft);color:var(--positive);
border-radius:12px;font-size:13px;margin-top:10px;
}
.promo-applied .x{margin-left:auto;cursor:pointer;color:var(--positive);opacity:.5}
.promo-applied .x:hover{opacity:1}
/* SUMMARY (sticky aside) */
.summary{
position:sticky;top:88px;
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:24px;
display:flex;flex-direction:column;gap:14px;
}
.summary h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}
.summary .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.summary .row .v{font-variant-numeric:tabular-nums}
.summary .row.muted{color:var(--muted);font-size:12.5px}
.summary .row.discount .v{color:var(--positive)}
.summary .total{
display:flex;justify-content:space-between;align-items:baseline;
padding-top:14px;border-top:1px solid var(--border-soft);
font-size:14px;
}
.summary .total .v{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.summary .vat-note{font-size:11.5px;color:var(--muted);margin-top:-4px}
.summary .pay-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px 20px;background:var(--ink);color:#fff;
border-radius:12px;font-weight:500;font-size:14.5px;width:100%;
}
.summary .pay-btn:hover{background:#000}
.summary .pay-btn.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.summary .pay-btn.secondary:hover{background:var(--bg-soft)}
.summary .pay-methods{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:11.5px}
.summary .pay-methods .badge{
display:inline-flex;align-items:center;justify-content:center;
padding:4px 8px;border:1px solid var(--border);border-radius:6px;
font-size:10.5px;font-weight:600;letter-spacing:.04em;
}
.summary .secure{
display:flex;align-items:center;gap:8px;
padding:10px 12px;background:var(--surface-2);
border-radius:10px;color:var(--muted);font-size:11.5px;
}
/* Mini-cart dropdown (showcase) */
.minicart{
width:380px;background:var(--surface);
border:1px solid var(--border);border-radius:18px;
box-shadow:0 30px 60px -20px rgba(14,14,12,.25);
overflow:hidden;
}
.minicart .head{
padding:14px 18px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.minicart .head .ttl{font-weight:600}
.minicart .head .cnt{font-size:12px;color:var(--muted)}
.minicart .body{max-height:280px;overflow:auto;padding:6px 0}
.minicart .mc-row{
display:grid;grid-template-columns:48px 1fr auto;gap:12px;
padding:10px 18px;align-items:center;
}
.minicart .mc-row:hover{background:var(--surface-2)}
.minicart .mc-row .thumb{
width:48px;height:48px;border-radius:8px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
}
.minicart .mc-row .name{font-size:13px;font-weight:500}
.minicart .mc-row .meta{font-size:11.5px;color:var(--muted)}
.minicart .mc-row .sum{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.minicart .foot{
padding:14px 18px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
}
.minicart .foot .total{display:flex;justify-content:space-between;margin-bottom:10px;font-weight:600}
.minicart .foot .total .v{font-variant-numeric:tabular-nums}
.minicart .foot .btn{width:100%;justify-content:center}
/* Empty state */
.cart-empty{
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:60px 40px;text-align:center;
}
.cart-empty .ico{
width:88px;height:88px;border-radius:50%;
background:var(--bg-soft);display:inline-grid;place-items:center;
color:var(--muted-2);margin-bottom:20px;
}
.cart-empty h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.cart-empty p{color:var(--muted);font-size:13.5px;margin:0 auto 22px;max-width:380px}
/* Success state */
.cart-success{
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:48px 40px;text-align:center;
}
.cart-success .ico{
width:88px;height:88px;border-radius:50%;
background:var(--positive-soft);color:var(--positive);
display:inline-grid;place-items:center;margin-bottom:20px;
}
.cart-success h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.cart-success p{color:var(--muted);font-size:13.5px;margin:0 auto 22px;max-width:440px}
.cart-success .num{
display:inline-block;padding:8px 14px;
background:var(--bg-soft);border-radius:10px;
font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;
}
/* Recommended row */
.reco{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.reco .product{padding:12px}
.reco .product .thumb{aspect-ratio:1.6/1}
/* Site footer */
.site-foot{
background:var(--surface);border-top:1px solid var(--border);
margin-top:40px;padding:32px 0;
}
.site-foot .inner{
max-width:1280px;margin:0 auto;padding:0 24px;
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
color:var(--muted);font-size:12.5px;
}
.site-foot .col h4{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 10px}
.site-foot .col a{display:block;padding:3px 0}
.site-foot .col a:hover{color:var(--ink)}
/* ===================================================================
PRODUCT PAGE — карточка товара с предложениями + карта
=================================================================== */
.product-hero{
display:grid;grid-template-columns:520px 1fr;gap:32px;
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:28px;
}
/* Gallery */
.gallery{display:flex;flex-direction:column;gap:10px}
.gallery .main{
aspect-ratio:1.1/1;border-radius:16px;
background:linear-gradient(135deg,#0E0E0C 0%,#3A3833 100%);
position:relative;overflow:hidden;
}
.gallery .main::after{
content:"";position:absolute;
inset:auto -10% -30% auto;width:120%;height:160%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18) 0,transparent 60%);
}
.gallery .main .tag{position:absolute;top:14px;left:14px}
.gallery .main .zoom{
position:absolute;bottom:14px;right:14px;
width:36px;height:36px;border-radius:10px;
background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
display:grid;place-items:center;color:#fff;cursor:pointer;
}
.gallery .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gallery .thumbs .t{
aspect-ratio:1;border-radius:10px;cursor:pointer;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
border:1px solid var(--border);
}
.gallery .thumbs .t.on{outline:2px solid var(--ink);outline-offset:1px}
/* Product info */
.product-info{display:flex;flex-direction:column;gap:18px}
.product-info .top{display:flex;flex-direction:column;gap:8px}
.product-info .crumbs-mini{display:flex;gap:8px;font-size:12px;color:var(--muted)}
.product-info h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.15}
.product-info .sku-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.product-info .sku-row .pill{
padding:3px 8px;border-radius:999px;background:var(--bg-soft);
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-2);
}
.product-info .lead{color:var(--ink-2);font-size:13.5px;line-height:1.55}
/* Price block */
.price-block{
background:var(--bg-soft);border-radius:14px;padding:18px 20px;
display:flex;flex-direction:column;gap:12px;
}
.price-block .from{font-size:12px;color:var(--muted)}
.price-block .price{
display:flex;align-items:baseline;gap:10px;
}
.price-block .price .v{font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-block .price .currency{font-size:18px;color:var(--muted);font-weight:500}
.price-block .price .max{color:var(--muted);font-size:13px;text-decoration:line-through}
.price-block .stats{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted)}
.price-block .stats b{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace}
.price-block .cta-row{display:flex;gap:8px;margin-top:2px}
.price-block .cta-row .btn{flex:1;justify-content:center;padding:14px}
/* Quick stats under hero */
.product-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;
}
.stat-card{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;padding:14px 16px;
}
.stat-card.dark{background:var(--ink);color:#fff;border-color:transparent}
.stat-card .l{font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.stat-card.dark .l{color:#A29F98}
.stat-card .v{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.stat-card .s{font-size:11.5px;color:var(--muted);margin-top:4px}
.stat-card.dark .s{color:#A29F98}
/* Tabs */
.tabs-bar{
display:flex;align-items:center;gap:4px;
padding:6px;background:var(--surface);
border:1px solid var(--border);border-radius:14px;
margin:20px 0 14px;
}
.tabs-bar a{
padding:9px 16px;border-radius:10px;font-size:13.5px;color:var(--ink-2);
display:flex;align-items:center;gap:8px;
}
.tabs-bar a:hover{background:var(--bg-soft)}
.tabs-bar a.on{background:var(--ink);color:#fff;font-weight:500}
.tabs-bar a .cnt{
font-size:11px;padding:1px 7px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-variant-numeric:tabular-nums;
}
.tabs-bar a.on .cnt{background:rgba(255,255,255,.18);color:#fff}
.tabs-bar .right{margin-left:auto;display:flex;gap:8px;padding-right:4px}
/* Offer cards (table-like rows) */
.offers{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
.offers-toolbar{
display:flex;align-items:center;gap:10px;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
background:var(--surface-2);
}
.offers-toolbar .label{font-size:12px;color:var(--muted)}
.sort-btn{
display:inline-flex;align-items:center;gap:6px;
padding:6px 11px;border-radius:999px;
background:var(--surface);border:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);cursor:pointer;
}
.sort-btn.on{background:var(--ink);color:#fff;border-color:transparent}
.sort-btn .arr{font-size:10px;opacity:.7}
.offer-row{
display:grid;
grid-template-columns:54px 1.4fr 1fr 1.1fr 160px 160px;
align-items:center;gap:20px;
padding:18px 22px;border-bottom:1px solid var(--border-soft);
}
.offer-row:last-child{border-bottom:0}
.offer-row:hover{background:var(--surface-2)}
.offer-row.best{background:linear-gradient(180deg,#FAFAF6,#fff 60%);border-left:3px solid var(--ink)}
.seller-logo{
width:54px;height:54px;border-radius:12px;
background:var(--bg-soft);display:grid;place-items:center;
font-weight:700;font-size:16px;color:var(--ink);border:1px solid var(--border-soft);
}
.seller-logo.dark{background:var(--ink);color:#fff;border-color:transparent}
.seller-info .name{font-weight:600;font-size:14.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.seller-info .name .verified{
width:16px;height:16px;border-radius:50%;background:var(--ink);
display:inline-grid;place-items:center;color:#fff;font-size:10px;flex:none;
}
.seller-info .meta{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:12px;color:var(--muted)}
.seller-info .meta .rating{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.seller-info .meta .rating b{font-weight:600}
.seller-info .meta .since{font-family:'JetBrains Mono',monospace}
.offer-stock{font-size:13px}
.offer-stock .v{font-weight:500;color:var(--ink)}
.offer-stock .v.green{color:var(--positive)}
.offer-stock .v.warn{color:var(--warn)}
.offer-stock .v.red{color:var(--danger)}
.offer-stock .s{color:var(--muted);font-size:11.5px;margin-top:2px}
.offer-delivery{font-size:12.5px;color:var(--ink-2)}
.offer-delivery .city{font-weight:500}
.offer-delivery .opts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.offer-delivery .opts span{
padding:2px 7px;border-radius:6px;
background:var(--bg-soft);font-size:11px;color:var(--muted);
}
.offer-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.offer-price .v{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.offer-price .delta{font-size:11.5px}
.offer-price .delta.up{color:var(--danger)}
.offer-price .delta.down{color:var(--positive)}
.offer-price .delta.flat{color:var(--muted)}
.offer-price .upd{font-size:11px;color:var(--muted-2)}
.offer-actions{display:flex;flex-direction:column;gap:6px}
.offer-actions .btn{justify-content:center}
.offer-actions .btn-mini{padding:7px 10px;font-size:12px;font-weight:500;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--ink-2)}
.offer-actions .btn-mini:hover{background:var(--bg-soft)}
.offers-foot{
display:flex;align-items:center;justify-content:space-between;
padding:14px 22px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
font-size:12.5px;color:var(--muted);
}
/* MAP block */
.map-block{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
display:grid;grid-template-columns:1fr 380px;
}
.map-canvas{
position:relative;min-height:540px;overflow:hidden;
background:#EFEDE6;
}
.map-canvas svg.bg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{
position:absolute;display:flex;align-items:center;gap:6px;
padding:6px 10px 6px 8px;background:var(--ink);color:#fff;
border-radius:999px;font-size:12px;font-weight:500;
transform:translate(-50%,-100%);cursor:pointer;
box-shadow:0 8px 20px -6px rgba(0,0,0,.4);font-variant-numeric:tabular-nums;
}
.map-pin::after{
content:"";position:absolute;bottom:-6px;left:50%;
transform:translateX(-50%) rotate(45deg);
width:10px;height:10px;background:var(--ink);
}
.map-pin .n{
display:inline-grid;place-items:center;
width:18px;height:18px;border-radius:50%;
background:#fff;color:var(--ink);font-size:10.5px;font-weight:700;
}
.map-pin.best{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.map-pin.best::after{background:#fff;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.map-pin.best .n{background:var(--ink);color:#fff}
.map-pin.muted{background:var(--muted-2);color:#fff}
.map-pin.muted::after{background:var(--muted-2)}
.map-popup{
position:absolute;background:#fff;border-radius:14px;
padding:14px 16px;width:240px;
box-shadow:0 24px 48px -16px rgba(14,14,12,.32),0 4px 8px rgba(14,14,12,.04);
border:1px solid var(--border);transform:translate(-50%,calc(-100% - 18px));
}
.map-popup::after{
content:"";position:absolute;bottom:-7px;left:50%;
transform:translateX(-50%) rotate(45deg);
width:12px;height:12px;background:#fff;
border-right:1px solid var(--border);border-bottom:1px solid var(--border);
}
.map-popup .name{font-weight:600;font-size:13.5px}
.map-popup .meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.map-popup .price{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:10px 0 8px;font-variant-numeric:tabular-nums}
.map-popup .actions{display:flex;gap:6px}
.map-popup .actions .btn{flex:1;padding:7px 10px;font-size:12px;justify-content:center}
.map-side{
border-left:1px solid var(--border-soft);
display:flex;flex-direction:column;min-height:0;
}
.map-side-head{
padding:14px 18px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.map-side-head h4{font-size:14px;font-weight:600;margin:0}
.map-side-list{overflow:auto;flex:1}
.map-side-item{
display:grid;grid-template-columns:24px 1fr auto;gap:10px;
padding:12px 18px;border-bottom:1px solid var(--border-soft);cursor:pointer;
align-items:center;
}
.map-side-item:hover{background:var(--surface-2)}
.map-side-item.on{background:var(--bg-soft)}
.map-side-item .n{
width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:10.5px;font-weight:700;
}
.map-side-item .n.best{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.map-side-item .n.muted{background:var(--muted-2)}
.map-side-item .name{font-size:13px;font-weight:500}
.map-side-item .meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.map-side-item .price{font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
/* Specs accordion (свернутые характеристики) */
.specs{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.specs details{border-bottom:1px solid var(--border-soft)}
.specs details:last-child{border-bottom:0}
.specs summary{
list-style:none;cursor:pointer;
padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
}
.specs summary::-webkit-details-marker{display:none}
.specs summary .ttl{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:10px}
.specs summary .ttl .n{
font-family:'JetBrains Mono',monospace;font-size:11px;
color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;
}
.specs summary .right{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12.5px}
.specs summary .chev{transition:transform .2s}
.specs details[open] summary .chev{transform:rotate(180deg)}
.specs .body{padding:0 22px 22px}
.spec-row{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:9px 0;border-top:1px solid var(--border-soft);font-size:13px}
.spec-row:first-child{border-top:0}
.spec-row .k{color:var(--muted)}
.spec-row .v{color:var(--ink)}
/* Compare bar (compare drawer collapsed at bottom) */
.compare-bar{
position:sticky;bottom:0;margin-top:18px;
background:var(--ink);color:#fff;border-radius:16px;
padding:12px 20px;display:flex;align-items:center;gap:16px;
}
.compare-bar .ico{
width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.12);
display:grid;place-items:center;flex:none;
}
.compare-bar .t{flex:1;font-size:13.5px}
.compare-bar .t b{font-weight:600}
.compare-bar .actions{display:flex;gap:8px}
/* Modal (offer-price) */
.modal-overlay{
position:fixed;inset:0;background:rgba(14,14,12,.45);
display:grid;place-items:center;padding:20px;z-index:50;
}
.modal-card{
width:440px;background:#fff;border-radius:18px;
padding:24px 26px;box-shadow:0 40px 80px -20px rgba(14,14,12,.5);
}
.modal-card h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.modal-card .desc{color:var(--muted);font-size:13px;margin-bottom:18px}
.modal-card .actions{display:flex;gap:8px;margin-top:18px}
.modal-card .actions .btn{flex:1;justify-content:center}
/* Reviews mini */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;padding:16px 18px;
}
.review .who{display:flex;align-items:center;gap:10px}
.review .who .av{width:32px;height:32px;border-radius:50%;background:#3A3833;color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px}
.review .who .nm{font-weight:500;font-size:13px}
.review .who .when{font-size:11px;color:var(--muted)}
.review .stars{margin:8px 0;display:flex;gap:2px;color:var(--ink);font-size:13px}
.review .text{font-size:13px;line-height:1.5;color:var(--ink-2)}
/* ===================================================================
INVOICES DETAILED — детальная страница счетов
=================================================================== */
/* Bulk-actions bar (когда выделены строки) */
.bulk-bar{
display:flex;align-items:center;gap:14px;
padding:10px 16px;background:var(--ink);color:#fff;
border-radius:12px;
}
.bulk-bar .count{font-weight:600;font-size:13.5px}
.bulk-bar .total{color:#A29F98;font-size:12.5px}
.bulk-bar .acts{margin-left:auto;display:flex;gap:8px}
.bulk-bar .acts .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
.bulk-bar .acts .btn-primary{background:#fff;color:var(--ink)}
/* Expanded row (раскрытая строка таблицы со счётом) */
.row-expanded{background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.row-expanded td{padding:0!important;border-bottom:0!important}
.row-expanded .inner{
padding:18px 22px 22px;display:grid;
grid-template-columns:1fr 320px;gap:18px;
}
.row-expanded .quick-table{
background:#fff;border:1px solid var(--border-soft);
border-radius:12px;overflow:hidden;
}
.row-expanded .quick-table td,
.row-expanded .quick-table th{font-size:12.5px;padding:9px 12px}
.row-expanded .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.row-expanded .side{
display:flex;flex-direction:column;gap:10px;
}
.row-expanded .side .block{
background:#fff;border:1px solid var(--border-soft);
border-radius:12px;padding:12px 14px;
}
.row-expanded .side .block .ttl{font-size:11.5px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.row-expanded .side .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.row-expanded .side .row .k{color:var(--muted)}
/* Drawer (выезжающая боковая панель — для нового счёта) */
.drawer-demo{position:relative;margin-top:20px}
.drawer-demo .scrim{
position:absolute;inset:0;background:rgba(14,14,12,.42);
border-radius:18px;z-index:1;
}
.drawer-demo .drawer{
position:relative;z-index:2;
margin-left:auto;width:720px;
background:#fff;border:1px solid var(--border);border-radius:18px;
box-shadow:-40px 0 80px -20px rgba(14,14,12,.4);
display:flex;flex-direction:column;max-height:880px;
}
.drawer-demo .demo-bg{
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:18px;padding:24px;min-height:880px;
}
.drawer-head{
padding:18px 24px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.drawer-head .ttl{font-size:18px;font-weight:600;letter-spacing:-.01em}
.drawer-head .ix{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.drawer-body{flex:1;overflow:auto;padding:20px 24px}
.drawer-foot{
padding:14px 24px;border-top:1px solid var(--border-soft);
background:var(--surface-2);display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.drawer-foot .left{font-size:12.5px;color:var(--muted)}
.drawer-foot .total{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.drawer-foot .total-row{display:flex;align-items:baseline;gap:14px}
/* Positions mini-table в форме счёта */
.pos-mini{border:1px solid var(--border-soft);border-radius:12px;overflow:hidden}
.pos-mini table{width:100%;border-collapse:collapse}
.pos-mini th{
font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);font-weight:500;
padding:9px 12px;background:var(--surface-2);
border-bottom:1px solid var(--border-soft);text-align:left;
}
.pos-mini td{padding:8px 12px;border-bottom:1px solid var(--border-soft);font-size:13px}
.pos-mini tr:last-child td{border-bottom:0}
.pos-mini .num-input{
width:100%;border:0;background:transparent;outline:0;
font-family:'JetBrains Mono',monospace;font-size:13px;text-align:right;
}
/* Status badge большой (для статус-радио в drawer) */
.status-radio{display:flex;flex-wrap:wrap;gap:6px}
.status-radio .item{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
border:1px solid var(--border);font-size:12.5px;
background:var(--surface-2);color:var(--ink-2);cursor:pointer;
}
.status-radio .item:hover{background:var(--bg-soft)}
.status-radio .item.on{background:var(--ink);color:#fff;border-color:transparent}
.status-radio .item .dot{width:6px;height:6px;border-radius:50%}
/* Mini chart sparkline strip */
.month-strip{
display:flex;gap:3px;align-items:flex-end;height:48px;padding:6px 0;
}
.month-strip .bar{
flex:1;background:var(--bg-soft);border-radius:3px;min-height:6px;
}
.month-strip .bar.on{background:var(--ink)}
.month-strip .bar.warn{background:var(--warn);opacity:.7}
/* Quick-modal showcase (compact модалка как карточка) */
.qmodal{
background:#fff;border:1px solid var(--border);
border-radius:18px;padding:0;
box-shadow:0 30px 60px -20px rgba(14,14,12,.25);
width:480px;overflow:hidden;
}
.qmodal-head{
padding:18px 22px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.qmodal-head h3{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}
.qmodal-head .x{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);
}
.qmodal-head .x:hover{background:var(--bg-soft);color:var(--ink)}
.qmodal-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.qmodal-foot{padding:14px 22px;background:var(--surface-2);border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Money distribute (разнесение платежа) */
.distribute-row{
display:grid;grid-template-columns:1fr 140px 32px;gap:10px;align-items:center;
padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
}
.distribute-row + .distribute-row{margin-top:6px}
.distribute-row .name{font-size:13px;font-weight:500}
.distribute-row .meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.distribute-row .input-group{background:#fff}
.distribute-row .rm{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
color:var(--muted-2);
}
.distribute-row .rm:hover{background:var(--danger-soft);color:var(--danger)}
/* Distribute summary block */
.distribute-summary{
background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;
display:flex;align-items:center;gap:24px;
}
.distribute-summary .item .l{font-size:11px;color:#A29F98;text-transform:uppercase;letter-spacing:.04em}
.distribute-summary .item .v{font-size:18px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
.distribute-summary .item.warn .v{color:#F4D544}
/* Assignee chip */
.assignee{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px 4px 4px;border-radius:999px;
background:var(--bg-soft);font-size:12.5px;font-weight:500;
}
.assignee .av{
width:22px;height:22px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:10px;font-weight:600;
}
.assignee .x{margin-left:4px;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.assignee .x:hover{color:var(--ink)}
/* ===================================================================
INVOICE BUILDER — страница создания счёта с каталогом справа
=================================================================== */
.builder{
display:grid;grid-template-columns:1fr 380px;gap:18px;
align-items:flex-start;
}
/* Левая часть — счёт-документ */
.invoice-doc{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
.doc-head{
padding:22px 26px;border-bottom:1px solid var(--border-soft);
background:linear-gradient(180deg,var(--surface),var(--surface-2));
}
.doc-head .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.doc-head .ix{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.doc-head h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:10px}
.doc-head h2 .num{font-family:'JetBrains Mono',monospace;color:var(--muted);font-weight:500;font-size:18px}
.doc-head .desc{font-size:13px;color:var(--muted);margin-top:4px}
.doc-head .quick{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.doc-head .quick .item{display:flex;align-items:center;gap:8px;font-size:12.5px}
.doc-head .quick .item .k{color:var(--muted)}
.doc-head .quick .item .v{font-weight:500}
.doc-body{padding:0}
.party-grid{
display:grid;grid-template-columns:1fr 1fr;gap:0;
border-bottom:1px solid var(--border-soft);
}
.party{
padding:20px 26px;
}
.party + .party{border-left:1px solid var(--border-soft)}
.party .role{
font-size:11px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
display:flex;align-items:center;gap:8px;
}
.party .role .ico{
width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
background:var(--bg-soft);color:var(--ink);
}
.party .name-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.party .name{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.party .inn{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:2px}
.party .change{margin-left:auto;font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.party .change:hover{color:var(--ink-2)}
.party .meta-rows{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.party .meta-rows .r{display:flex;justify-content:space-between}
.party .meta-rows .r .k{color:var(--muted)}
/* Meta strip — статус/дата/контейнер */
.doc-meta{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-bottom:1px solid var(--border-soft);background:var(--surface-2);
}
.doc-meta .cell{
padding:14px 22px;border-left:1px solid var(--border-soft);
}
.doc-meta .cell:first-child{border-left:0}
.doc-meta .cell .l{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.doc-meta .cell .v{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}
.doc-meta .cell .v .pen{color:var(--muted-2);font-size:11px;cursor:pointer}
.doc-meta .cell .v .pen:hover{color:var(--ink)}
/* Positions */
.positions{padding:20px 26px}
.positions-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.positions-head h3{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em}
.positions-head .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.positions-head .acts{display:flex;gap:6px}
/* Empty state in positions */
.pos-empty{
border:2px dashed var(--border);border-radius:14px;
padding:32px 24px;text-align:center;background:var(--surface-2);
}
.pos-empty .ico{
width:48px;height:48px;border-radius:12px;background:var(--bg-soft);
display:inline-grid;place-items:center;color:var(--muted-2);margin-bottom:12px;
}
.pos-empty h4{font-size:14.5px;font-weight:600;margin:0 0 4px}
.pos-empty p{color:var(--muted);font-size:12.5px;margin:0 auto 14px;max-width:320px}
/* Position row */
.pos-table{border:1px solid var(--border-soft);border-radius:14px;overflow:hidden}
.pos-table table{width:100%;border-collapse:collapse}
.pos-table thead th{
font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);font-weight:500;
padding:11px 14px;background:var(--surface-2);
border-bottom:1px solid var(--border-soft);text-align:left;
}
.pos-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border-soft);font-size:13px;vertical-align:middle}
.pos-table tbody tr:last-child td{border-bottom:0}
.pos-table tbody tr:hover{background:var(--surface-2)}
.pos-cell-product{display:flex;align-items:center;gap:10px;min-width:0}
.pos-cell-product .pic{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#E9E7E0,#D2CEC4);flex:none}
.pos-cell-product .pic.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.pos-cell-product .info{min-width:0}
.pos-cell-product .nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-cell-product .sk{font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.pos-qty{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.pos-qty button{width:24px;height:30px;display:grid;place-items:center;font-size:14px;color:var(--ink-2)}
.pos-qty button:hover{background:var(--bg-soft)}
.pos-qty input{width:34px;border:0;background:transparent;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;outline:0;font-weight:500}
.pos-price-cell{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pos-price-cell input{
width:96px;border:1px solid transparent;background:transparent;
text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;padding:6px 8px;border-radius:6px;outline:0;
}
.pos-price-cell input:hover{background:var(--surface-2);border-color:var(--border)}
.pos-price-cell input:focus{background:#fff;border-color:var(--ink)}
.pos-price-cell .ccy{color:var(--muted);font-size:12px}
.pos-vat{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:6px;background:var(--bg-soft);font-size:11.5px;font-family:'JetBrains Mono',monospace;
}
.pos-rm{
width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
color:var(--muted-2);
}
.pos-rm:hover{background:var(--danger-soft);color:var(--danger)}
/* Totals */
.totals{
margin-top:14px;display:flex;justify-content:flex-end;
}
.totals-box{
width:340px;background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:14px;padding:14px 18px;
}
.totals-box .r{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.totals-box .r .k{color:var(--muted)}
.totals-box .r .v{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.totals-box .grand{
display:flex;justify-content:space-between;align-items:baseline;
padding-top:10px;margin-top:8px;border-top:1px solid var(--border-soft);
}
.totals-box .grand .k{font-weight:600;font-size:14.5px}
.totals-box .grand .v{font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Note + assignees */
.note-block{padding:20px 26px;border-top:1px solid var(--border-soft);background:var(--surface-2)}
.note-block .grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
/* Doc actions footer */
.doc-foot{
padding:16px 22px;border-top:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
background:var(--surface);position:sticky;bottom:0;
}
.doc-foot .left{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px}
.doc-foot .right{display:flex;gap:8px}
/* ===================================================================
CATALOG SIDE (правая колонка)
=================================================================== */
.catalog-side{
position:sticky;top:16px;align-self:flex-start;
background:var(--surface);border:1px solid var(--border);
border-radius:18px;display:flex;flex-direction:column;
max-height:calc(100vh - 32px);overflow:hidden;
}
.cs-head{padding:14px 16px;border-bottom:1px solid var(--border-soft)}
.cs-head .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cs-head h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:8px}
.cs-head h3 .cnt{font-size:11px;color:var(--muted);background:var(--bg-soft);border-radius:999px;padding:1px 8px;font-weight:500}
.cs-head .view{display:flex;gap:2px;padding:3px;background:var(--bg-soft);border-radius:8px}
.cs-head .view button{padding:5px 8px;border-radius:6px;color:var(--muted);font-size:11px}
.cs-head .view button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cs-search{
display:flex;align-items:center;gap:8px;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
padding:8px 10px;margin-top:10px;
}
.cs-search input{border:0;background:transparent;outline:0;width:100%;font-size:13px}
.cs-search .clear{color:var(--muted-2);cursor:pointer}
.cs-cats{
display:flex;gap:4px;padding:8px 12px 12px;overflow-x:auto;border-bottom:1px solid var(--border-soft);
}
.cs-cats::-webkit-scrollbar{display:none}
.cs-cat{
padding:5px 10px;border-radius:999px;
border:1px solid var(--border);background:var(--surface);
font-size:12px;color:var(--ink-2);white-space:nowrap;cursor:pointer;flex:none;
}
.cs-cat:hover{background:var(--bg-soft)}
.cs-cat.on{background:var(--ink);color:#fff;border-color:transparent}
.cs-cat .n{margin-left:4px;font-size:10.5px;opacity:.7;font-family:'JetBrains Mono',monospace}
/* Filter chips strip */
.cs-filters{
display:flex;align-items:center;gap:6px;
padding:8px 12px;border-bottom:1px solid var(--border-soft);font-size:11.5px;
}
.cs-filters .lab{color:var(--muted);margin-right:2px}
.cs-mini-chip{
padding:3px 8px;border-radius:999px;background:var(--bg-soft);font-size:11px;color:var(--ink-2);
display:inline-flex;align-items:center;gap:4px;cursor:pointer;
}
.cs-mini-chip.on{background:var(--ink);color:#fff}
/* Catalog list */
.cs-list{flex:1;overflow:auto;padding:6px 8px}
.cs-item{
display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;
padding:10px;border-radius:12px;cursor:grab;
border:1px solid transparent;
}
.cs-item:hover{background:var(--surface-2);border-color:var(--border-soft)}
.cs-item.added{background:var(--accent-soft);border-color:#C9C4B8}
.cs-item .pic{
width:44px;height:44px;border-radius:10px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);position:relative;
}
.cs-item .pic.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.cs-item .pic.warn::after{
content:"";position:absolute;top:-3px;right:-3px;
width:8px;height:8px;border-radius:50%;background:var(--warn);
border:2px solid #fff;
}
.cs-item .pic.red::after{
content:"";position:absolute;top:-3px;right:-3px;
width:8px;height:8px;border-radius:50%;background:var(--danger);
border:2px solid #fff;
}
.cs-item .info{min-width:0}
.cs-item .nm{font-weight:500;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-item .meta{display:flex;gap:8px;font-size:11px;color:var(--muted);margin-top:3px;align-items:center}
.cs-item .meta .sk{font-family:'JetBrains Mono',monospace}
.cs-item .meta .stk{display:inline-flex;align-items:center;gap:4px}
.cs-item .meta .stk.green{color:var(--positive)}
.cs-item .meta .stk.warn{color:var(--warn)}
.cs-item .meta .stk.red{color:var(--danger)}
.cs-item .meta .stk b{font-weight:600}
.cs-item .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.cs-item .price{font-weight:600;font-size:13.5px;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.cs-item .add{
width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:14px;font-weight:600;cursor:pointer;
}
.cs-item .add:hover{background:#000}
.cs-item.added .add{background:var(--positive)}
.cs-item .qty-mini{
display:inline-flex;align-items:center;gap:0;background:var(--ink);border-radius:8px;overflow:hidden;
}
.cs-item .qty-mini button{width:24px;height:30px;color:#fff;font-size:13px}
.cs-item .qty-mini button:hover{background:#000}
.cs-item .qty-mini .v{color:#fff;font-weight:600;font-size:12px;min-width:24px;text-align:center;font-family:'JetBrains Mono',monospace}
/* Catalog foot */
.cs-foot{
padding:10px 14px;border-top:1px solid var(--border-soft);
background:var(--surface-2);
display:flex;align-items:center;justify-content:space-between;
font-size:12px;color:var(--muted);
}
.cs-foot a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}
/* Drag hint over invoice while dragging */
.drag-hint{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-size:11.5px;
border:1px dashed var(--border);
}
/* ===================================================================
WELCOME PAGE
=================================================================== */
.welcome-wrap{max-width:1200px;margin:0 auto;padding:24px}
/* Welcome top — лого, аватарка, переключатель организации */
.w-top{
display:flex;align-items:center;gap:14px;
padding:14px 18px;background:var(--surface);
border:1px solid var(--border);border-radius:18px;
margin-bottom:24px;
}
.w-top .site-brand{flex:none}
.w-top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Hero */
.w-hero{
position:relative;overflow:hidden;
background:var(--ink);color:#fff;border-radius:24px;
padding:48px 56px;
display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;
}
.w-hero::before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.06),transparent 50%),
radial-gradient(circle at 20% 90%,rgba(218,214,204,.08),transparent 50%);
pointer-events:none;
}
.w-hero .left{position:relative;z-index:1}
.w-hero .greet{
display:inline-flex;align-items:center;gap:8px;
padding:5px 12px;border-radius:999px;
background:rgba(255,255,255,.1);font-size:12px;
margin-bottom:14px;letter-spacing:.02em;
}
.w-hero h1{
font-size:48px;letter-spacing:-.03em;font-weight:600;line-height:1.05;
margin:0 0 14px;color:#fff;
}
.w-hero h1 span{color:#A29F98;font-weight:400}
.w-hero .lead{
font-size:15px;color:#C2C0BA;max-width:520px;line-height:1.55;margin-bottom:24px;
}
.w-hero .ctas{display:flex;gap:10px}
.w-hero .ctas .btn-primary{background:#fff;color:var(--ink)}
.w-hero .ctas .btn-primary:hover{background:#FAFAF6}
.w-hero .ctas .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
.w-hero .ctas .btn-ghost:hover{background:rgba(255,255,255,.08)}
/* Hero stats (right side) */
.w-hero .right{position:relative;z-index:1}
.w-hero-card{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
border-radius:18px;padding:20px 22px;backdrop-filter:blur(8px);
}
.w-hero-card .ttl{font-size:11px;color:#A29F98;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.w-hero-card .org-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.w-hero-card .org-logo{
width:42px;height:42px;border-radius:11px;background:var(--accent-soft);
display:grid;place-items:center;color:var(--ink);font-weight:700;font-size:14px;
}
.w-hero-card .org-name{font-weight:600;font-size:16px}
.w-hero-card .org-sub{color:#A29F98;font-size:12px;margin-top:2px}
.w-hero-card .mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.w-hero-card .mini-stats .it .l{font-size:11px;color:#A29F98}
.w-hero-card .mini-stats .it .v{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:2px;font-variant-numeric:tabular-nums}
.w-hero-card .mini-stats .it .d{font-size:11px;color:#C2C0BA;margin-top:2px}
/* Section title */
.w-section-h{display:flex;align-items:flex-end;justify-content:space-between;margin:32px 0 14px}
.w-section-h .lab{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}
.w-section-h h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.w-section-h .sub{color:var(--muted);font-size:13px;margin-top:4px;max-width:560px}
/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tool-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:22px;cursor:pointer;
transition:transform .15s ease,border-color .15s,box-shadow .15s;
display:flex;flex-direction:column;gap:14px;min-height:200px;position:relative;
}
.tool-card:hover{
border-color:var(--ink);
transform:translateY(-2px);
box-shadow:0 20px 40px -20px rgba(14,14,12,.18);
}
.tool-card.featured{background:var(--ink);color:#fff;border-color:transparent}
.tool-card.featured:hover{box-shadow:0 24px 50px -16px rgba(14,14,12,.4)}
.tool-card .ico-wrap{
width:44px;height:44px;border-radius:12px;
background:var(--bg-soft);display:grid;place-items:center;color:var(--ink);
}
.tool-card.featured .ico-wrap{background:rgba(255,255,255,.1);color:#fff}
.tool-card .nm{font-size:18px;font-weight:600;letter-spacing:-.01em}
.tool-card .desc{font-size:13px;color:var(--muted);line-height:1.5;flex:1}
.tool-card.featured .desc{color:#C2C0BA}
.tool-card .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.tool-card.featured .meta{color:#A29F98}
.tool-card .meta .b{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace}
.tool-card.featured .meta .b{color:#fff}
.tool-card .arr{
position:absolute;top:22px;right:22px;
width:32px;height:32px;border-radius:10px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink);
transition:transform .15s,background .15s;
}
.tool-card:hover .arr{transform:translate(2px,-2px);background:var(--ink);color:#fff}
.tool-card.featured .arr{background:rgba(255,255,255,.1);color:#fff}
.tool-card.featured:hover .arr{background:#fff;color:var(--ink)}
.tool-card .new-pill{
display:inline-flex;padding:3px 8px;border-radius:999px;
background:var(--accent-soft);color:var(--ink);
font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
align-self:flex-start;
}
.tool-card.featured .new-pill{background:#fff;color:var(--ink)}
/* Quick-start checklist */
.quickstart{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:24px 26px;
display:grid;grid-template-columns:1fr 1.4fr;gap:28px;
}
.quickstart .left h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.quickstart .left p{color:var(--muted);font-size:13px;margin:0 0 16px;line-height:1.55}
.quickstart .progress{
position:relative;height:6px;background:var(--bg-soft);border-radius:999px;overflow:hidden;
}
.quickstart .progress .fill{height:100%;background:var(--ink);width:60%}
.quickstart .progress-text{font-size:12px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}
.quickstart .progress-text b{color:var(--ink);font-weight:600}
.qs-list{display:flex;flex-direction:column;gap:8px}
.qs-step{
display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;
padding:12px 14px;border-radius:12px;
background:var(--surface-2);border:1px solid var(--border-soft);
}
.qs-step.done .check{background:var(--ink);color:#fff;border-color:transparent}
.qs-step.next{background:#fff;border-color:var(--ink)}
.qs-step.next .check{border-color:var(--ink)}
.qs-step .check{
width:24px;height:24px;border-radius:50%;
border:1.5px solid var(--border);background:#fff;
display:grid;place-items:center;color:transparent;font-size:12px;
}
.qs-step.done .check{color:#fff}
.qs-step .nm{font-weight:500;font-size:13.5px}
.qs-step .sub{color:var(--muted);font-size:11.5px;margin-top:2px}
.qs-step .act{font-size:12px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.qs-step.done .act{color:var(--muted);text-decoration:none}
/* BIG cta block — переход в каталог */
.catalog-cta{
position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--accent-soft) 0%,#C9C4B8 100%);
border-radius:24px;padding:48px 56px;
display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;
margin-top:24px;
}
.catalog-cta::before{
content:"";position:absolute;
width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.45) 0%,transparent 70%);
right:-180px;top:-220px;pointer-events:none;
}
.catalog-cta .left{position:relative;z-index:1}
.catalog-cta .lab{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-2);
text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;
}
.catalog-cta h2{font-size:40px;font-weight:600;letter-spacing:-.03em;margin:0 0 14px;line-height:1.05}
.catalog-cta p{font-size:14.5px;color:var(--ink-2);max-width:480px;line-height:1.55;margin-bottom:24px}
.catalog-cta .ctas{display:flex;gap:10px}
.catalog-cta .ctas .btn-primary{background:var(--ink);color:#fff}
.catalog-cta .ctas .btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:rgba(14,14,12,.1)}
.catalog-cta .ctas .btn-ghost:hover{background:#fff}
.catalog-cta .right{position:relative;z-index:1;display:flex;justify-content:center}
.cat-stack{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;
}
.cat-stack .item{
background:#fff;border-radius:12px;padding:14px 12px;
border:1px solid rgba(14,14,12,.06);
box-shadow:0 8px 24px -16px rgba(14,14,12,.18);
}
.cat-stack .item .pic{
width:100%;aspect-ratio:1.2/1;border-radius:8px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);margin-bottom:10px;
}
.cat-stack .item .pic.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.cat-stack .item .pic.warm{background:linear-gradient(135deg,#5A5750,#A29F98)}
.cat-stack .item .nm{font-size:11.5px;font-weight:500;line-height:1.3}
.cat-stack .item .pr{font-size:12.5px;font-weight:600;margin-top:4px;font-family:'JetBrains Mono',monospace}
.cat-stack .item .stk{font-size:10px;color:var(--positive);margin-top:2px;display:flex;align-items:center;gap:3px}
/* Stats strip */
.stats-strip{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:22px 26px;
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.stats-strip .st{padding:0 12px;border-left:1px solid var(--border-soft)}
.stats-strip .st:first-child{border-left:0;padding-left:0}
.stats-strip .st .v{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.stats-strip .st .l{font-size:12px;color:var(--muted);margin-top:6px}
/* Resources */
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.res{
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;
display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .1s;
}
.res:hover{border-color:var(--ink)}
.res .ico{
width:36px;height:36px;border-radius:9px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink);flex:none;
}
.res .nm{font-weight:500;font-size:13.5px}
.res .sub{color:var(--muted);font-size:11.5px;margin-top:2px}
.res .arr{margin-left:auto;color:var(--muted-2)}
/* ===================================================================
RESEARCH REPORT — визуальный отчёт по UX-паттернам
=================================================================== */
.rr-wrap{max-width:1280px;margin:0 auto;padding:24px}
/* Hero */
.rr-hero{
background:var(--surface);border:1px solid var(--border);
border-radius:24px;padding:36px 40px;margin-bottom:24px;
display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
}
.rr-hero h1{font-size:36px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;line-height:1.1}
.rr-hero .lead{color:var(--muted);font-size:14px;line-height:1.6;max-width:560px}
.rr-hero .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rr-hero .stats .it{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px}
.rr-hero .stats .v{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rr-hero .stats .l{font-size:12px;color:var(--muted);margin-top:4px}
/* Section header */
.rr-sec-h{display:flex;align-items:flex-end;justify-content:space-between;margin:32px 0 14px}
.rr-sec-h .lab{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.rr-sec-h h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
.rr-sec-h .sub{color:var(--muted);font-size:13px;margin-top:4px;max-width:600px}
/* Competitor mockups gallery */
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.comp{
background:var(--surface);border:1px solid var(--border);
border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;
}
.comp-head{
padding:12px 16px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;gap:10px;
}
.comp-head .logo{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
font-weight:700;font-size:13px;color:#fff;flex:none;
}
.comp-head .nm{font-weight:600;font-size:14px;letter-spacing:-.01em}
.comp-head .src{font-size:11px;color:var(--muted)}
.comp-head .badge{margin-left:auto;font-size:10.5px;color:var(--muted);background:var(--bg-soft);padding:2px 7px;border-radius:999px;font-weight:500}
/* Mock browser inside competitor card */
.mock{
background:var(--surface-2);
display:flex;flex-direction:column;
font-family:'Inter',sans-serif;
height:360px;overflow:hidden;
}
.mock-bar{
display:flex;align-items:center;gap:6px;
padding:8px 12px;background:#fff;border-bottom:1px solid var(--border-soft);
}
.mock-bar .d{width:8px;height:8px;border-radius:50%;background:#D6D2C8}
.mock-bar .url{flex:1;margin-left:6px;height:18px;border-radius:5px;background:var(--surface-2);font-size:10.5px;color:var(--muted);padding:2px 8px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center}
.mock-body{flex:1;padding:14px 16px;overflow:hidden;position:relative}
.mock-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mock-h .ttl{font-weight:600;font-size:13px}
.mock-h .actions{display:flex;gap:4px}
.mock-h .actions span{font-size:10.5px;padding:3px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-2)}
.mock-h .actions span.primary{background:var(--ink);color:#fff}
.mock-h .actions span.brand-c{background:#635BFF;color:#fff}
.mock-h .actions span.brand-x{background:#13B5EA;color:#fff}
.mock-h .actions span.brand-q{background:#2CA01C;color:#fff}
.mock-h .actions span.brand-h{background:#F9C5C0;color:#5A2B27}
.mock-h .actions span.brand-z{background:#F58C46;color:#fff}
.mock-h .actions span.brand-f{background:#00B4B4;color:#fff}
.mock-h .actions span.brand-k{background:#005FF0;color:#fff}
.mock-h .actions span.brand-1c{background:#FFD24D;color:#000}
.mock-h .actions span.brand-ms{background:#005EB8;color:#fff}
.mock-row{
display:grid;align-items:center;gap:8px;
padding:7px 0;border-bottom:1px solid var(--border-soft);font-size:11px;
}
.mock-row.party-row{grid-template-columns:1fr 1fr}
.mock-row .lbl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.mock-row .val{font-weight:500;font-size:11.5px;color:var(--ink)}
.mock-row .sub{font-size:10px;color:var(--muted);margin-top:2px}
.mock-line{display:grid;grid-template-columns:18px 1fr 50px 60px 60px 12px;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid var(--border-soft);font-size:10.5px}
.mock-line .pic{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,#E9E7E0,#D2CEC4)}
.mock-line .nm{font-weight:500;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-line .sk{color:var(--muted);font-size:9.5px;margin-top:1px}
.mock-line .num{text-align:right;font-family:'JetBrains Mono',monospace;font-size:10.5px}
.mock-line .num.b{font-weight:600}
.mock-line .x{color:var(--muted-2);text-align:center}
.mock-total{display:flex;justify-content:flex-end;margin-top:8px;font-size:11px;gap:8px;align-items:baseline}
.mock-total .lbl{color:var(--muted)}
.mock-total .v{font-weight:600;font-size:15px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mock-side{
position:absolute;top:36px;right:14px;bottom:14px;width:130px;
background:#fff;border:1px solid var(--border-soft);border-radius:8px;padding:8px;
}
.mock-side .s-ttl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.mock-side .s-item{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;border-bottom:1px dashed var(--border-soft)}
.mock-side .s-item:last-child{border-bottom:0}
.comp-notes{
padding:12px 16px;background:var(--surface-2);border-top:1px solid var(--border-soft);
font-size:11.5px;color:var(--ink-2);line-height:1.5;
}
.comp-notes b{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;font-weight:500}
.comp-notes ul{margin:0;padding-left:14px}
.comp-notes li{padding:1px 0}
/* Pattern cards */
.pat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pat{
background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:18px 20px;
display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;
}
.pat .demo{
width:140px;height:88px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--border-soft);
display:grid;place-items:center;overflow:hidden;position:relative;
}
.pat .body .head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pat .body .ix{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);letter-spacing:.07em}
.pat .body .pri{padding:1px 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:500}
.pat .body .pri.warm{background:var(--accent-soft);color:var(--ink)}
.pat .body h4{font-size:14px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.pat .body p{font-size:12px;color:var(--muted);margin:0 0 6px;line-height:1.5}
.pat .body .src{font-size:11px;color:var(--muted-2)}
.pat .body .src b{color:var(--ink-2);font-weight:500}
/* Pattern demos — мини-демо для иллюстрации */
.demo-calc{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 8px;border:1px solid var(--ink);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px}
.demo-calc .cur{color:var(--muted)}
.demo-calc .blink{display:inline-block;width:1px;height:11px;background:var(--ink);margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.demo-status{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface-2);font-size:11px;border:1px solid var(--border)}
.demo-status .pulse{width:6px;height:6px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 3px rgba(64,107,73,.15)}
.demo-inn{display:flex;align-items:center;gap:6px;background:#fff;padding:6px 8px;border:1px solid var(--ink);border-radius:6px;font-size:11px;width:100%}
.demo-inn .num{font-family:'JetBrains Mono',monospace;flex:1}
.demo-inn .bolt{color:var(--positive);font-size:12px}
.demo-inn .ok{color:var(--positive);font-weight:500;font-size:10.5px}
.demo-drag{display:flex;flex-direction:column;gap:3px;width:100%;padding:6px}
.demo-drag .ln{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#fff;border-radius:4px;font-size:10px}
.demo-drag .ln.up{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 4px 8px -2px rgba(14,14,12,.18)}
.demo-drag .handle{display:flex;flex-direction:column;gap:1px;flex:none}
.demo-drag .handle span{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.demo-drag .handle.up span{background:var(--ink)}
.demo-drag .nm{flex:1;color:var(--ink-2)}
.demo-drag .num{font-family:'JetBrains Mono',monospace;color:var(--muted)}
.demo-bulk{display:flex;flex-direction:column;gap:3px;width:100%;padding:6px}
.demo-bulk .top{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--ink);border-radius:4px;color:#fff;font-size:10px;font-weight:500}
.demo-bulk .ln{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#fff;border-radius:4px;font-size:10px}
.demo-bulk .ln.sel{background:var(--accent-soft)}
.demo-bulk .cb{width:10px;height:10px;border:1.5px solid var(--border);border-radius:2px;flex:none}
.demo-bulk .ln.sel .cb{background:var(--ink);border-color:transparent;position:relative}
.demo-bulk .ln.sel .cb::after{content:"";position:absolute;left:1.5px;top:0.5px;width:4px;height:6px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
.demo-groups{display:flex;flex-direction:column;gap:3px;width:100%;padding:6px}
.demo-groups .hdr{display:flex;align-items:center;gap:4px;padding:3px 6px;background:var(--bg-soft);border-radius:4px;font-size:10px;font-weight:600}
.demo-groups .chev{font-size:8px;color:var(--muted)}
.demo-groups .ln{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 3px 14px;background:#fff;border-radius:4px;font-size:9.5px;color:var(--ink-2)}
.demo-dup{display:flex;flex-direction:column;gap:4px;width:100%;padding:6px}
.demo-dup .m{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#fff;border-radius:4px;font-size:10px;border:1px solid var(--border)}
.demo-dup .m.hi{border-color:var(--ink);background:var(--bg-soft)}
.demo-dup .ico{font-size:10px}
.demo-chips{display:flex;flex-wrap:wrap;gap:3px;padding:8px;align-items:center}
.demo-chips .c{padding:2px 8px;background:var(--bg-soft);border-radius:999px;font-size:9.5px;font-weight:500}
.demo-chips .c.on{background:var(--ink);color:#fff}
.demo-tab{display:flex;align-items:center;gap:4px;font-size:10.5px;padding:4px;width:100%;justify-content:center}
.demo-tab .key{padding:2px 6px;border:1px solid var(--ink);border-radius:4px;background:#fff;font-family:'JetBrains Mono',monospace;font-size:9.5px}
.demo-tab .arr{color:var(--muted);font-size:11px}
.demo-tab .field{padding:2px 8px;background:var(--bg-soft);border-radius:4px;font-size:9.5px;font-family:'JetBrains Mono',monospace}
.demo-tab .field.on{background:var(--ink);color:#fff}
.demo-ai{display:flex;flex-direction:column;gap:4px;padding:8px;width:100%}
.demo-ai .ai-line{display:flex;align-items:center;gap:4px;padding:3px 6px;background:#fff;border:1px solid var(--ink);border-radius:5px;font-size:10px}
.demo-ai .ai-line .star{color:var(--ink)}
.demo-ai .ai-line .tx{flex:1;color:var(--ink-2)}
.demo-ai .resp{font-size:9.5px;color:var(--muted);padding:0 6px;font-style:italic}
/* Compare table */
.comparison{
background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;
}
.cmp-row{display:grid;grid-template-columns:1.5fr repeat(7,1fr) 60px;gap:0;align-items:center;border-bottom:1px solid var(--border-soft)}
.cmp-row:last-child{border-bottom:0}
.cmp-row.head{background:var(--surface-2);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.cmp-row .cell{padding:12px 14px;text-align:center;border-left:1px solid var(--border-soft)}
.cmp-row .cell:first-child{border-left:0;text-align:left}
.cmp-row .feature{font-weight:500;font-size:13px}
.cmp-row .desc-mini{font-size:11.5px;color:var(--muted);margin-top:2px}
.cmp-row .mark{font-size:14px;font-weight:600}
.cmp-row .mark.yes{color:var(--positive)}
.cmp-row .mark.no{color:var(--muted-2)}
.cmp-row .mark.partial{color:var(--warn)}
.cmp-row .delta-cell{background:var(--bg-soft);font-weight:600}
/* Checklist */
.checklist{
background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px 28px;
}
.checklist-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.checklist h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}
.checklist .sub{color:var(--muted);font-size:13px;margin-top:4px}
.checklist .progress-mini{display:flex;align-items:center;gap:14px}
.cl-item{
display:grid;grid-template-columns:28px 70px 1fr auto auto;gap:14px;align-items:center;
padding:14px 16px;border:1px solid var(--border-soft);border-radius:14px;
margin-bottom:8px;cursor:pointer;
}
.cl-item:hover{background:var(--surface-2)}
.cl-item.checked{background:var(--bg-soft);border-color:var(--ink)}
.cl-item.checked .cb{background:var(--ink);border-color:transparent}
.cl-item .cb{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border);background:#fff;display:grid;place-items:center;color:transparent}
.cl-item.checked .cb{color:#fff}
.cl-item .pri{
font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:3px 8px;border-radius:6px;background:var(--bg-soft);color:var(--ink-2);text-align:center;
}
.cl-item .pri.high{background:var(--ink);color:#fff}
.cl-item .pri.mid{background:var(--accent-soft);color:var(--ink)}
.cl-item .pri.low{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.cl-item .ttl{font-weight:500;font-size:14px;letter-spacing:-.01em}
.cl-item .desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.cl-item .effort{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-align:right}
.cl-item .effort b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.cl-item .src{font-size:11px;color:var(--muted-2)}
/* Source links */
.src-list{
background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 24px;
}
.src-list h4{font-size:14px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.src-list ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.src-list li{font-size:12px;color:var(--muted);padding:5px 0;display:flex;align-items:center;gap:8px}
.src-list li::before{content:"→";color:var(--muted-2)}
.src-list li a{color:var(--ink-2)}
.src-list li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* ===================================================================
CATALOG PAGE — публичный каталог с фасетным поиском
=================================================================== */
.cat-wrap{max-width:1320px;margin:0 auto;padding:24px}
/* Hero */
.cat-hero{
display:grid;grid-template-columns:1fr auto;gap:20px;align-items:flex-end;
margin-bottom:18px;
}
.cat-hero h1{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.cat-hero .sub{color:var(--muted);font-size:13.5px;max-width:560px}
/* Top sort & active filters strip */
.cat-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;background:var(--surface);border:1px solid var(--border);
border-radius:14px;margin-bottom:16px;
}
.cat-toolbar .label{font-size:11.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;font-weight:500;margin-right:4px}
.sort-pill{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
background:var(--surface-2);border:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);cursor:pointer;font-weight:500;
}
.sort-pill:hover{background:var(--bg-soft)}
.sort-pill.on{background:var(--ink);color:#fff;border-color:transparent}
.sort-pill .arr{font-size:10px;opacity:.7}
.active-chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px 5px 12px;border-radius:999px;
background:var(--accent-soft);font-size:12px;font-weight:500;
}
.active-chip .v{color:var(--ink)}
.active-chip .x{cursor:pointer;color:var(--muted);font-size:13px;line-height:1}
.active-chip .x:hover{color:var(--ink)}
.active-clear{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-left:auto}
.active-clear:hover{color:var(--ink)}
/* Main grid: filters + results */
.cat-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:flex-start}
/* Filter panel */
.filters{
position:sticky;top:16px;
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
max-height:calc(100vh - 32px);display:flex;flex-direction:column;
}
.filters-head{
padding:14px 18px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.filters-head h3{font-size:14.5px;font-weight:600;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.filters-head h3 .cnt{font-size:11px;color:var(--muted);font-weight:500}
.filters-head .reset{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.filters-body{overflow:auto;flex:1}
.fgroup{border-bottom:1px solid var(--border-soft)}
.fgroup:last-child{border-bottom:0}
.fgroup summary{
list-style:none;cursor:pointer;
padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary .ttl{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}
.fgroup summary .ttl .n{
font-size:10px;color:var(--muted);background:var(--bg-soft);
padding:1px 7px;border-radius:999px;font-weight:500;font-family:'JetBrains Mono',monospace;
}
.fgroup summary .chev{color:var(--muted-2);font-size:12px;transition:transform .2s}
.fgroup[open] summary .chev{transform:rotate(180deg)}
.fgroup .body{padding:0 18px 16px;display:flex;flex-direction:column;gap:8px}
/* Filter row — generic */
.f-row{
display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;cursor:pointer;
}
.f-row:hover .nm{color:var(--ink)}
.f-row .cb{
width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);
background:#fff;display:grid;place-items:center;flex:none;color:transparent;
}
.f-row.on .cb{background:var(--ink);border-color:transparent;color:#fff}
.f-row .cb svg{width:10px;height:10px}
.f-row .nm{flex:1;color:var(--ink-2)}
.f-row.on .nm{font-weight:500;color:var(--ink)}
.f-row .cnt{font-size:11.5px;color:var(--muted-2);font-family:'JetBrains Mono',monospace}
/* Radio row */
.f-radio{
display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;cursor:pointer;
}
.f-radio .dot{
width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);
background:#fff;position:relative;flex:none;
}
.f-radio.on .dot{border-color:var(--ink)}
.f-radio.on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
/* Range slider */
.range{
position:relative;height:38px;margin:6px 4px;
}
.range .track{
position:absolute;left:0;right:0;top:50%;height:4px;
background:var(--bg-soft);border-radius:999px;transform:translateY(-50%);
}
.range .fill{
position:absolute;top:50%;height:4px;
background:var(--ink);border-radius:999px;transform:translateY(-50%);
}
.range .thumb{
position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
background:#fff;border:2px solid var(--ink);transform:translate(-50%,-50%);
box-shadow:0 2px 4px rgba(0,0,0,.12);
}
.range .lbl{position:absolute;top:0;font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;transform:translateX(-50%)}
.range-inputs{
display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;
}
.range-inputs .ri{
background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
padding:6px 8px;font-size:12px;font-family:'JetBrains Mono',monospace;text-align:center;
}
.range-bars{
display:flex;align-items:flex-end;gap:2px;height:30px;margin-bottom:6px;
}
.range-bars .b{flex:1;background:var(--bg-soft);border-radius:2px;min-height:3px}
.range-bars .b.on{background:var(--ink)}
/* Chip group — multi-select pills */
.chip-grp{display:flex;flex-wrap:wrap;gap:4px}
.chip-grp .c{
padding:4px 10px;border-radius:999px;background:var(--surface-2);
border:1px solid var(--border);font-size:12px;cursor:pointer;
}
.chip-grp .c:hover{background:var(--bg-soft)}
.chip-grp .c.on{background:var(--ink);color:#fff;border-color:transparent}
.chip-grp .c .n{margin-left:4px;font-size:10.5px;opacity:.7;font-family:'JetBrains Mono',monospace}
/* Swatches (визуальный выбор) */
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatches .sw{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:8px 10px;border-radius:10px;border:1px solid var(--border);
background:var(--surface-2);cursor:pointer;min-width:64px;
}
.swatches .sw:hover{background:var(--bg-soft)}
.swatches .sw.on{background:var(--surface);border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,14,12,.06)}
.swatches .sw .ico{
width:32px;height:24px;border-radius:6px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink);font-size:14px;font-weight:600;
}
.swatches .sw.on .ico{background:var(--ink);color:#fff}
.swatches .sw .lbl{font-size:11px;font-weight:500}
/* Smart presets */
.presets{display:flex;flex-direction:column;gap:6px}
.preset{
display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;
padding:10px 12px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--border);cursor:pointer;
}
.preset:hover{background:var(--bg-soft)}
.preset.on{background:var(--ink);color:#fff;border-color:transparent}
.preset .em{font-size:18px}
.preset .nm{font-weight:500;font-size:12.5px;letter-spacing:-.01em}
.preset .sb{font-size:11px;color:var(--muted);margin-top:1px}
.preset.on .sb{color:#A29F98}
.preset .cnt{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.preset.on .cnt{color:#A29F98}
/* Filters footer (sticky bottom) */
.filters-foot{
padding:12px 16px;border-top:1px solid var(--border-soft);
background:var(--surface-2);display:flex;align-items:center;gap:8px;
}
.filters-foot .stat{font-size:12px;color:var(--muted);flex:1}
.filters-foot .btn{padding:8px 14px;font-size:12.5px}
/* Results area */
.results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.results-head .total{font-size:13px;color:var(--muted)}
.results-head .total b{color:var(--ink);font-weight:600}
.results-head .view{display:flex;gap:2px;padding:3px;background:var(--bg-soft);border-radius:8px}
.results-head .view button{padding:6px 10px;border-radius:6px;color:var(--muted)}
.results-head .view button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Product card */
.pcard{
background:var(--surface);border:1px solid var(--border);
border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
position:relative;transition:transform .15s,border-color .15s,box-shadow .15s;cursor:pointer;
}
.pcard:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(14,14,12,.16)}
.pcard .pic{
aspect-ratio:1.4/1;background:linear-gradient(135deg,#E9E7E0,#D2CEC4);position:relative;
}
.pcard .pic.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.pcard .pic.warm{background:linear-gradient(135deg,#5A5750,#A29F98)}
.pcard .pic::after{
content:"";position:absolute;inset:auto -20% -30% auto;width:120%;height:160%;
background:radial-gradient(circle at 30% 30%,#FFF8 0,transparent 60%);
}
.pcard .pic .tags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px}
.pcard .pic .tags .t{padding:3px 8px;border-radius:6px;background:#fff;color:var(--ink);font-size:10.5px;font-weight:500;letter-spacing:.02em}
.pcard .pic .tags .t.dark{background:var(--ink);color:#fff}
.pcard .pic .fav{
position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;
background:rgba(255,255,255,.85);backdrop-filter:blur(4px);
display:grid;place-items:center;color:var(--ink);
}
.pcard .body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .nm{font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.3}
.pcard .meta{display:flex;gap:6px;font-size:11.5px;color:var(--muted);align-items:center}
.pcard .meta .sk{font-family:'JetBrains Mono',monospace}
.pcard .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.spec-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.spec-row .pill{
padding:2px 7px;border-radius:5px;background:var(--bg-soft);
font-size:10.5px;color:var(--ink-2);font-weight:500;
display:inline-flex;align-items:center;gap:3px;
}
.spec-row .pill.match{background:var(--ink);color:#fff}
.spec-row .pill .k{color:var(--muted-2);font-weight:400}
.spec-row .pill.match .k{color:#A29F98}
.pcard .foot{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;border-top:1px solid var(--border-soft);background:var(--surface-2);
}
.pcard .foot .pr{display:flex;flex-direction:column}
.pcard .foot .pr .from{font-size:11px;color:var(--muted)}
.pcard .foot .pr .v{font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.pcard .foot .pr .v .ccy{color:var(--muted);font-weight:500;font-size:13px}
.pcard .foot .pr .offers{font-size:11px;color:var(--muted);margin-top:2px}
.pcard .foot .add{
width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:18px;
}
.pcard .foot .add:hover{background:#000}
.pcard .stk-bar{
display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
}
.pcard .stk-bar .pulse{width:6px;height:6px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 3px rgba(64,107,73,.15)}
.pcard .stk-bar .pulse.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(123,94,16,.15)}
.pcard .stk-bar .pulse.red{background:var(--danger);box-shadow:0 0 0 3px rgba(140,51,37,.15)}
/* Compare drawer (bottom sticky) */
.cmp-drawer{
position:sticky;bottom:14px;margin-top:18px;
background:var(--ink);color:#fff;border-radius:16px;
padding:12px 18px;display:flex;align-items:center;gap:14px;
}
.cmp-drawer .thumbs{display:flex;gap:6px}
.cmp-drawer .thumbs .t{
width:36px;height:36px;border-radius:8px;
background:rgba(255,255,255,.1);position:relative;
}
.cmp-drawer .thumbs .t .x{
position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#fff;color:var(--ink);
display:grid;place-items:center;font-size:10px;line-height:1;font-weight:700;
}
.cmp-drawer .t-info{flex:1;font-size:13px}
.cmp-drawer .t-info b{font-weight:600}
.cmp-drawer .acts{display:flex;gap:8px}
.cmp-drawer .acts .btn-primary{background:#fff;color:var(--ink)}
.cmp-drawer .acts .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
/* SHOWCASE — варианты сортировки */
.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sc-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
.sc-head{padding:18px 22px;border-bottom:1px solid var(--border-soft);background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.sc-head .ix{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.sc-head h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.sc-head .desc{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.sc-body{padding:18px 22px;background:var(--surface-2);min-height:260px}
.sc-foot{padding:14px 22px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);background:var(--surface);border-top:1px solid var(--border-soft)}
.sc-foot .when{font-weight:500;color:var(--ink-2)}
/* ===================================================================
CATALOG (реальный функционал) — overrides для delta-catalog-current
=================================================================== */
/* Header с лого без подписи — упрощённая шапка */
.cat-site-header .site-brand .name{font-weight:700}
.cat-site-header .site-brand .name span{display:none}
.cat-site-header .cat-pick{
flex:0 0 240px;display:flex;align-items:center;gap:8px;
padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
color:var(--muted);font-size:13px;cursor:pointer;
}
.cat-site-header .cat-pick .chev{margin-left:auto;color:var(--muted-2)}
.user-pill{
display:inline-flex;align-items:center;gap:8px;
padding:4px 12px 4px 4px;border:1px solid var(--border);
border-radius:999px;font-size:13px;font-weight:500;
}
.user-pill .av{
width:26px;height:26px;border-radius:50%;
background:#3A3833;color:#fff;display:grid;place-items:center;
font-size:11px;font-weight:600;
}
/* Category pills — большие пилюли категорий */
.cat-tabs{
display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.cat-tabs .cp{
padding:9px 18px;border-radius:999px;
background:var(--surface);border:1px solid var(--border);
font-size:13px;color:var(--ink-2);font-weight:500;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
}
.cat-tabs .cp:hover{background:var(--bg-soft)}
.cat-tabs .cp.on{background:var(--ink);color:#fff;border-color:transparent}
.cat-tabs .cp .n{
font-size:11px;font-weight:500;color:var(--muted-2);
font-family:'JetBrains Mono',monospace;
}
.cat-tabs .cp.on .n{color:#A29F98}
/* Layout: 240px filters + grid */
.cur-grid{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:flex-start}
/* Filters card */
.filters-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:20px;position:sticky;top:16px;
display:flex;flex-direction:column;gap:18px;
}
.fc-head{display:flex;align-items:baseline;justify-content:space-between}
.fc-head .total{display:flex;align-items:baseline;gap:6px}
.fc-head .total .v{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1}
.fc-head .total .l{font-size:11px;color:var(--muted);text-transform:lowercase}
.fc-title{display:flex;align-items:baseline;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-soft)}
.fc-title .t{font-weight:600;font-size:14px}
.fc-title .r{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fc-block{display:flex;flex-direction:column;gap:8px}
.fc-block .lbl{
font-size:10.5px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.08em;font-weight:500;
}
.fc-select{
position:relative;
display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;font-size:13px;cursor:pointer;
}
.fc-select .chev{color:var(--muted-2);font-size:11px}
.fc-price{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fc-price .inp{
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
padding:10px 12px;font-size:13px;color:var(--ink);outline:0;font-family:inherit;width:100%;
}
.fc-price .inp::placeholder{color:var(--muted-2)}
.fc-price .inp.mono{font-family:'JetBrains Mono',monospace}
.fc-price .inp:focus{border-color:var(--ink);background:#fff}
.fc-radius{display:flex;align-items:center;gap:10px}
.fc-radius .inp{
width:70px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
padding:10px 12px;font-size:13px;color:var(--ink);outline:0;font-family:'JetBrains Mono',monospace;
}
.fc-radius .hint{font-size:11.5px;color:var(--muted)}
.fc-mapbtn{
display:flex;align-items:center;gap:10px;justify-content:center;
padding:12px 16px;background:var(--ink);color:#fff;
border-radius:12px;font-size:13.5px;font-weight:500;
}
.fc-mapbtn:hover{background:#000}
.fc-mapbtn .arr{margin-left:auto}
.fc-check{
display:flex;align-items:center;gap:10px;padding:4px 0;cursor:pointer;font-size:13px;
}
.fc-check .cb{
width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);
background:#fff;flex:none;display:grid;place-items:center;color:transparent;
}
.fc-check.on .cb{background:var(--ink);border-color:transparent;color:#fff}
.fc-check.on .cb svg{width:10px;height:10px}
/* Product card — соответствие реальной странице */
.curcard{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.curcard:hover{
border-color:var(--ink);
transform:translateY(-2px);
box-shadow:0 20px 40px -20px rgba(14,14,12,.16);
}
/* кликабельные зоны — только картинка и название */
.curcard .media,
.curcard .nm-link{cursor:pointer}
.curcard .nm-link:hover .nm{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.curcard .media{
aspect-ratio:1.3/1;background:var(--surface-2);
position:relative;display:grid;place-items:center;overflow:hidden;
}
.curcard .media img,
.curcard .media .placeholder{
width:78%;height:78%;object-fit:contain;
}
.curcard .media .placeholder{
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);border-radius:10px;
}
.curcard .media .placeholder.dark{background:linear-gradient(135deg,#0E0E0C,#3A3833)}
.curcard .badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:4px;z-index:1}
.curcard .badges .b{
padding:3px 9px;border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;font-family:'Inter';
}
.curcard .badges .b.hit{background:var(--ink);color:#fff}
.curcard .badges .b.discount{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.curcard .badges .b.top{background:var(--accent-soft);color:var(--ink)}
.curcard .media-acts{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:1}
.curcard .ma-btn{
width:30px;height:30px;border-radius:8px;
background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
display:grid;place-items:center;color:var(--ink);
}
.curcard .ma-btn:hover{background:#fff}
.curcard .ma-btn.fav.on{color:var(--danger);background:#fff}
.curcard .pager{
position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
display:flex;gap:5px;
}
.curcard .pager .d{width:6px;height:6px;border-radius:50%;background:rgba(14,14,12,.18)}
.curcard .pager .d.on{background:rgba(14,14,12,.7);width:18px;border-radius:999px}
.curcard .body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.curcard .brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.curcard .brand{
font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:600;
}
.curcard .brand .art{
color:var(--muted);font-weight:400;margin-left:6px;font-family:'JetBrains Mono',monospace;
text-transform:none;letter-spacing:0;
}
.curcard .rate{
display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
}
.curcard .rate .star{color:#D9A407;font-size:12px}
.curcard .nm{font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.3;margin:2px 0}
.curcard .stk{
display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
}
.curcard .stk .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.curcard .stk.green .dot{background:var(--positive)}
.curcard .stk.warn .dot{background:#D9A407}
.curcard .stk.red .dot{background:var(--danger)}
.curcard .stk.green{color:var(--positive)}
.curcard .stk.warn{color:#7B5E10}
.curcard .stk.red{color:var(--danger)}
.curcard .price-row{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px;
}
.curcard .price-row .pr{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.curcard .price-row .pr .ccy{color:var(--muted);font-weight:500;font-size:14px}
.curcard .price-row .offer{font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Card icon row (Характеристики / Инфо / геолокация) */
.curcard .icon-row{
display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid var(--border-soft);
}
.curcard .icon-row .ib{
display:inline-flex;align-items:center;gap:6px;
padding:6px 10px;border-radius:8px;background:var(--surface-2);
border:1px solid var(--border-soft);font-size:11.5px;color:var(--ink-2);cursor:pointer;
}
.curcard .icon-row .ib:hover{background:var(--bg-soft)}
.curcard .icon-row .ib.icon-only{padding:6px;justify-content:center}
/* Cart action row */
.curcard .cart-row{
display:grid;grid-template-columns:1fr 40px;gap:6px;padding:0 14px 14px;
}
.curcard .cart-btn-full{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:11px 14px;background:var(--ink);color:#fff;
border-radius:10px;font-weight:500;font-size:13px;
}
.curcard .cart-btn-full:hover{background:#000}
.curcard .cart-btn-full.added{background:var(--positive)}
.curcard .cart-btn-full.added:hover{background:#345B3D}
.curcard .cart-arr{
display:grid;place-items:center;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
font-size:14px;color:var(--ink);
}
.curcard .cart-arr:hover{background:var(--bg-soft)}
/* Grid */
.cur-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* ===================================================================
PRINT MODAL — превью листа печати (идентификаторы / SKU)
=================================================================== */
.print-modal{
position:fixed;inset:0;background:rgba(14,14,12,.5);
display:none;align-items:center;justify-content:center;
padding:24px;z-index:60;
}
.print-modal.open{display:flex}
.print-card{
width:920px;max-height:90vh;background:#fff;
border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;
box-shadow:0 40px 80px -20px rgba(14,14,12,.5);
}
.print-card .ph{
padding:18px 22px;border-bottom:1px solid var(--border-soft);
background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.print-card .ph .ttl{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0}
.print-card .ph .sub{font-size:12px;color:var(--muted);margin-top:2px}
.print-card .ph .actions{display:flex;gap:8px}
.print-card .ph .x{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
color:var(--muted);border:1px solid var(--border);background:var(--surface);
}
.print-card .ph .x:hover{background:var(--bg-soft);color:var(--ink)}
.print-card .opts{
padding:14px 22px;background:var(--surface-2);border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;gap:14px;font-size:12.5px;flex-wrap:wrap;
}
.print-card .opts .lbl{color:var(--muted);font-weight:500}
.print-card .opts .chip{cursor:pointer}
.print-card .preview{
flex:1;overflow:auto;background:#E9E7E0;padding:24px;
display:flex;flex-direction:column;align-items:center;gap:20px;
}
.print-card .sheet{
width:760px;min-height:1075px;background:#fff;
box-shadow:0 8px 24px -10px rgba(14,14,12,.18);
padding:36px 28px;
}
.print-card .sheet .sh-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--border-soft);
font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;
letter-spacing:.04em;text-transform:uppercase;
}
.print-card .sheet .sh-head .brand{
display:flex;align-items:center;gap:8px;color:var(--ink);
}
.print-card .sheet .sh-head .brand .m{
width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:11px;font-family:'Inter';
}
.print-card .sheet .sh-foot{
padding-top:14px;margin-top:18px;border-top:1px solid var(--border-soft);
font-size:10.5px;color:var(--muted-2);
display:flex;justify-content:space-between;
}
/* Identifier labels — 4 в ряд */
.ident-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ident-lbl{
border:1px dashed #D9D5C9;border-radius:12px;
padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;
background:#fff;
}
.ident-lbl .qr{
width:88px;height:88px;background:#fff;border:1px solid var(--border);
display:grid;place-items:center;padding:6px;
}
.ident-lbl .qr svg{width:100%;height:100%}
.ident-lbl .delta{
font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);
letter-spacing:.04em;text-align:center;line-height:1.3;word-break:break-all;
}
.ident-lbl .sku{
font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
letter-spacing:.04em;color:var(--ink);
}
.ident-lbl .nm{
font-size:11px;color:var(--ink-2);text-align:center;line-height:1.3;font-weight:500;
}
.ident-lbl .seq{
font-size:9.5px;color:var(--muted-2);font-family:'JetBrains Mono',monospace;
margin-top:auto;align-self:flex-end;
}
/* SKU labels (barcode) — 2 в ряд */
.sku-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sku-lbl{
border:1px dashed #D9D5C9;border-radius:12px;
padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sku-lbl .nm{
font-size:12px;font-weight:500;color:var(--ink);text-align:center;line-height:1.3;
}
.sku-lbl .bar{
width:100%;height:48px;background-image:repeating-linear-gradient(
90deg,
#0E0E0C 0, #0E0E0C 1px, transparent 1px, transparent 3px,
#0E0E0C 3px, #0E0E0C 5px, transparent 5px, transparent 6px,
#0E0E0C 6px, #0E0E0C 9px, transparent 9px, transparent 10px,
#0E0E0C 10px, #0E0E0C 11px, transparent 11px, transparent 13px,
#0E0E0C 13px, #0E0E0C 16px, transparent 16px, transparent 17px,
#0E0E0C 17px, #0E0E0C 18px, transparent 18px, transparent 20px
);
}
.sku-lbl .code{
font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;font-weight:600;
}
/* Stat strip in modal */
.print-stats{
display:flex;align-items:center;gap:24px;
padding:12px 22px;background:var(--surface);
border-top:1px solid var(--border-soft);
}
.print-stats .it .l{font-size:11px;color:var(--muted)}
.print-stats .it .v{font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
/* ===================================================================
ACCESS CONTROL (СКУД) — контроллеры, точки прохода,
пользователи, доступы. Используется в delta-access-control.html
=================================================================== */
/* KPI plate */
.acc-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.acc-kpi{
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:14px;padding:14px 16px;position:relative;
}
.acc-kpi .l{font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.acc-kpi .v{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.1}
.acc-kpi .s{font-size:11px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px}
.acc-kpi.dark{background:var(--ink);color:#fff;border-color:transparent}
.acc-kpi.dark .l,.acc-kpi.dark .s{color:#A29F98}
.acc-kpi .pulse{
position:absolute;top:14px;right:14px;
width:8px;height:8px;border-radius:50%;background:var(--positive);
box-shadow:0 0 0 4px rgba(64,107,73,.18);
}
.acc-kpi.red .pulse{background:var(--danger);box-shadow:0 0 0 4px rgba(140,51,37,.18)}
.acc-kpi.warn .pulse{background:#D9A407;box-shadow:0 0 0 4px rgba(217,164,7,.18)}
/* Two-column main layout: matrix + side panel */
.acc-split{
display:grid;grid-template-columns:1.6fr 1fr;gap:16px;
align-items:start;
}
/* Matrix card */
.matrix{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
}
.matrix-head{
display:flex;align-items:center;gap:10px;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
background:var(--surface-2);
}
.matrix-head .h{font-size:14px;font-weight:600}
.matrix-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.matrix-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 18px;border-bottom:1px solid var(--border-soft);
}
.matrix-toolbar .label{font-size:11.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
/* The grid itself */
.matrix-grid{overflow:auto}
.matrix-grid table{width:100%;border-collapse:separate;border-spacing:0;min-width:880px}
.matrix-grid thead th{
position:sticky;top:0;z-index:2;background:var(--surface-2);
border-bottom:1px solid var(--border-soft);
font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);font-weight:500;padding:10px 8px;text-align:center;
white-space:nowrap;
}
.matrix-grid thead th.who{
text-align:left;padding-left:18px;min-width:240px;
position:sticky;left:0;z-index:3;border-right:1px solid var(--border-soft);
}
.matrix-grid thead th .gate{
display:flex;flex-direction:column;align-items:center;gap:3px;
}
.matrix-grid thead th .gate .nm{color:var(--ink-2);font-weight:600;font-size:11.5px;letter-spacing:.04em}
.matrix-grid thead th .gate .pl{color:var(--muted-2);font-size:10.5px;text-transform:none;letter-spacing:0}
.matrix-grid tbody td{
padding:0;border-bottom:1px solid var(--border-soft);
border-right:1px solid var(--border-soft);text-align:center;
background:var(--surface);
}
.matrix-grid tbody td:last-child{border-right:0}
.matrix-grid tbody tr:hover td{background:#FBFAF6}
.matrix-grid tbody td.who{
text-align:left;padding:12px 18px;
position:sticky;left:0;z-index:1;background:var(--surface);
border-right:1px solid var(--border-soft);min-width:240px;
}
.matrix-grid tbody tr:hover td.who{background:#FBFAF6}
.matrix-grid tbody td.who .name{font-weight:500;font-size:13px;display:flex;align-items:center;gap:10px}
.matrix-grid tbody td.who .name .av{
width:26px;height:26px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:600;flex:none;
}
.matrix-grid tbody td.who .name .av.grp{background:var(--accent-soft);color:var(--ink);border-radius:8px}
.matrix-grid tbody td.who .sub{font-size:11px;color:var(--muted);margin-top:3px;margin-left:36px}
.matrix-grid tbody td.who.group{background:var(--surface-2)}
.matrix-grid tbody tr.group-row:hover td.who{background:#F1EFE9}
/* Cell states */
.mcell{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:36px;margin:6px auto;border-radius:8px;
font-size:12px;font-weight:600;
border:1px solid transparent;cursor:pointer;
transition:transform .06s, background .1s;
}
.mcell:hover{transform:translateY(-1px)}
.mcell.allow{background:var(--ink);color:#fff}
.mcell.deny{background:var(--danger-soft);color:var(--danger)}
.mcell.deny::before{content:"×";font-size:18px;line-height:1;font-weight:500}
.mcell.allow::before{content:"";display:inline-block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-3px}
.mcell.sched{background:var(--info-soft);color:var(--info);border-color:transparent}
.mcell.sched::before{content:"⏱";font-size:13px;line-height:1}
.mcell.temp{background:var(--warn-soft);color:var(--warn)}
.mcell.temp::before{content:"⏳";font-size:12px}
.mcell.empty{background:var(--bg-soft);color:var(--muted-2);border:1px dashed var(--border)}
.mcell.empty::before{content:"+";font-size:14px}
.mcell.inherit{background:transparent;color:var(--muted-2);border:1px dashed var(--border)}
.mcell.inherit::before{content:"↑";font-size:13px}
.mcell.allow.partial{background:linear-gradient(135deg,var(--ink) 0%,var(--ink) 50%,var(--info-soft) 50%,var(--info-soft) 100%)}
/* Matrix footer (legend + bulk) */
.matrix-foot{
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:12px 18px;border-top:1px solid var(--border-soft);
background:var(--surface-2);
}
.legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.legend .it{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend .it .sw{width:18px;height:14px;border-radius:5px;display:inline-block}
.legend .sw.allow{background:var(--ink)}
.legend .sw.deny{background:var(--danger-soft)}
.legend .sw.sched{background:var(--info-soft)}
.legend .sw.temp{background:var(--warn-soft)}
.legend .sw.empty{background:var(--bg-soft);border:1px dashed var(--border)}
/* Side panel (selected user/group) */
.acc-side{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;
position:sticky;top:80px;
}
.acc-side .who-card{
display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;
border-bottom:1px solid var(--border-soft);
}
.acc-side .who-card .av{
width:48px;height:48px;border-radius:14px;background:#3A3833;color:#fff;
display:grid;place-items:center;font-weight:600;font-size:16px;
}
.acc-side .who-card .nm{font-size:16px;font-weight:600;letter-spacing:-.01em}
.acc-side .who-card .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.acc-side .who-card .meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.acc-side h4{font-size:11.5px;color:var(--muted);text-transform:uppercase;
letter-spacing:.08em;margin:0 0 8px;font-weight:500}
.sched-list{display:flex;flex-direction:column;gap:6px}
.sched-list .it{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border:1px solid var(--border-soft);
border-radius:10px;background:var(--surface-2);
}
.sched-list .it .ico{
width:28px;height:28px;border-radius:8px;background:var(--surface);
border:1px solid var(--border);display:grid;place-items:center;flex:none;
}
.sched-list .it .nm{font-size:13px;font-weight:500}
.sched-list .it .tm{font-size:11.5px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono',monospace}
.sched-list .it .act{margin-left:auto;color:var(--muted-2);font-size:14px;cursor:pointer}
.sched-list .it .act:hover{color:var(--ink)}
.acc-card-list{display:flex;flex-direction:column;gap:6px}
.acc-card-list .it{
display:flex;align-items:center;gap:10px;
padding:9px 12px;border:1px solid var(--border-soft);
border-radius:10px;background:var(--surface-2);
}
.acc-card-list .it .badge{
font-family:'JetBrains Mono',monospace;font-size:12px;
padding:2px 8px;border-radius:6px;background:var(--ink);color:#fff;
letter-spacing:.05em;
}
.acc-card-list .it .badge.mobile{background:var(--info);color:#fff}
.acc-card-list .it .badge.face{background:var(--accent-soft);color:var(--ink)}
.acc-card-list .it .nm{font-size:13px}
.acc-card-list .it .sub{font-size:11px;color:var(--muted);margin-top:2px}
.acc-card-list .it .st{margin-left:auto;font-size:11.5px;color:var(--positive);display:flex;align-items:center;gap:5px}
.acc-card-list .it .st.red{color:var(--danger)}
.acc-card-list .it .st .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
/* ---------- Floor plan ---------- */
.floor-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
}
.floor-head{
display:flex;align-items:center;gap:10px;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.floor-head .h{font-size:14px;font-weight:600}
.floor-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.floor-stage{
position:relative;background:linear-gradient(180deg,#F5F4EE 0%,#EEEBE2 100%);
height:360px;overflow:hidden;
}
.floor-stage svg{display:block;width:100%;height:100%}
.gate-pin{
position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;
transform:translate(-50%,-50%);cursor:pointer;
}
.gate-pin .dot{
width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:700;
box-shadow:0 6px 14px -4px rgba(14,14,12,.4),0 0 0 4px rgba(255,255,255,.7);
position:relative;
}
.gate-pin.online .dot::after{
content:"";position:absolute;right:-1px;bottom:-1px;
width:8px;height:8px;border-radius:50%;background:var(--positive);
border:2px solid #fff;
}
.gate-pin.offline .dot{background:var(--muted)}
.gate-pin.offline .dot::after{
content:"";position:absolute;right:-1px;bottom:-1px;
width:8px;height:8px;border-radius:50%;background:var(--danger);
border:2px solid #fff;
}
.gate-pin.alarm .dot{background:var(--danger);animation:gate-pulse 1.6s infinite}
.gate-pin .label{
font-size:11px;font-weight:500;color:var(--ink);
background:rgba(255,255,255,.92);padding:2px 8px;border-radius:6px;
white-space:nowrap;border:1px solid var(--border-soft);
}
@keyframes gate-pulse{
0%,100%{box-shadow:0 6px 14px -4px rgba(14,14,12,.4),0 0 0 4px rgba(255,255,255,.7),0 0 0 0 rgba(140,51,37,.5)}
50%{box-shadow:0 6px 14px -4px rgba(14,14,12,.4),0 0 0 4px rgba(255,255,255,.7),0 0 0 12px rgba(140,51,37,0)}
}
/* ---------- Event log ---------- */
.events-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
.events-head{
display:flex;align-items:center;gap:10px;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.events-head .h{font-size:14px;font-weight:600}
.events-head .live{
display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--positive);
}
.events-head .live .dot{
width:7px;height:7px;border-radius:50%;background:var(--positive);
animation:gate-pulse 1.6s infinite;
}
.events-head .right{margin-left:auto;display:flex;gap:8px}
.events-list{max-height:360px;overflow:auto}
.events-list .ev{
display:grid;grid-template-columns:80px 32px 1fr auto;gap:12px;
padding:11px 18px;border-bottom:1px solid var(--border-soft);
align-items:center;
}
.events-list .ev:hover{background:var(--surface-2)}
.events-list .ev:last-child{border-bottom:0}
.events-list .ev .tm{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.events-list .ev .ico{
width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
background:var(--positive-soft);color:var(--positive);
}
.events-list .ev .ico.deny{background:var(--danger-soft);color:var(--danger)}
.events-list .ev .ico.warn{background:var(--warn-soft);color:var(--warn)}
.events-list .ev .ico.info{background:var(--info-soft);color:var(--info)}
.events-list .ev .ico.sys{background:var(--bg-soft);color:var(--muted)}
.events-list .ev .body .nm{font-size:13px}
.events-list .ev .body .nm b{font-weight:600}
.events-list .ev .body .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.events-list .ev .gate{font-size:11.5px;color:var(--muted);text-align:right}
.events-list .ev .gate b{display:block;color:var(--ink-2);font-weight:500;font-size:12px}
/* ---------- Controllers card list (tab 1) ---------- */
.ctl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ctl-card{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
position:relative;transition:transform .06s,border-color .1s,box-shadow .1s;
}
.ctl-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(14,14,12,.16)}
.ctl-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ctl-card .top .ttl{font-size:14px;font-weight:600;letter-spacing:-.01em}
.ctl-card .top .sku{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:2px}
.ctl-card .visual{
height:78px;border-radius:10px;
background:linear-gradient(180deg,#1A1916 0%,#0E0E0C 100%);
position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.ctl-card .visual .leds{display:flex;gap:8px}
.ctl-card .visual .led{width:8px;height:8px;border-radius:50%;background:#3A3833;box-shadow:inset 0 0 4px rgba(0,0,0,.5)}
.ctl-card .visual .led.on{background:#5BB66A;box-shadow:0 0 8px rgba(91,182,106,.7),inset 0 0 2px rgba(255,255,255,.4)}
.ctl-card .visual .led.amber{background:#D9A407;box-shadow:0 0 8px rgba(217,164,7,.7)}
.ctl-card .visual .led.red{background:#E54B3C;box-shadow:0 0 8px rgba(229,75,60,.7)}
.ctl-card .visual .ports{
position:absolute;bottom:8px;left:14px;right:14px;display:flex;justify-content:space-between;
}
.ctl-card .visual .port{
width:18px;height:6px;border-radius:1.5px;background:#3A3833;
}
.ctl-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.ctl-card .grid .l{font-size:11px;color:var(--muted)}
.ctl-card .grid .v{font-size:12.5px;font-family:'JetBrains Mono',monospace}
.ctl-card .ports-row{
display:flex;gap:4px;margin-top:4px;
}
.ctl-card .ports-row .pp{
flex:1;height:6px;border-radius:3px;background:var(--bg-soft);
}
.ctl-card .ports-row .pp.on{background:var(--positive)}
.ctl-card .ports-row .pp.warn{background:#D9A407}
.ctl-card .ports-row .pp.off{background:var(--muted-2)}
.ctl-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.ctl-card .foot .lk{font-size:12px;text-decoration:underline;text-underline-offset:3px}
/* ---------- Gates list (tab 2) ---------- */
.gates-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)}
.gate-row{
display:grid;grid-template-columns:38px 1.4fr 1fr 1fr 1fr auto;gap:14px;align-items:center;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.gate-row:last-child{border-bottom:0}
.gate-row:hover{background:var(--surface-2)}
.gate-row .num{
width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:600;font-size:13px;
}
.gate-row .nm{font-weight:500;font-size:13.5px}
.gate-row .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.gate-row .col .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.gate-row .col .v{font-size:13px;margin-top:2px;font-family:'JetBrains Mono',monospace}
.gate-row .actions{display:flex;gap:6px}
/* ---------- Users list (tab 3) ---------- */
.users-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
margin-bottom:12px;
}
.users-toolbar .label{font-size:11.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.users-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.user-card{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
transition:transform .06s,border-color .1s,box-shadow .1s;
}
.user-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(14,14,12,.16)}
.user-card .hd{display:flex;align-items:flex-start;gap:10px}
.user-card .av{
width:40px;height:40px;border-radius:12px;background:#3A3833;color:#fff;
display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;
}
.user-card .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.user-card .ro{font-size:11.5px;color:var(--muted);margin-top:2px}
.user-card .creds{display:flex;gap:5px;flex-wrap:wrap}
.user-card .creds .c{
font-size:11px;padding:3px 8px;border-radius:6px;background:var(--bg-soft);color:var(--ink-2);
display:inline-flex;align-items:center;gap:5px;
}
.user-card .creds .c.on{background:var(--ink);color:#fff}
.user-card .creds .c.warn{background:var(--warn-soft);color:var(--warn)}
.user-card .meta{display:flex;gap:10px;font-size:11px;color:var(--muted);margin-top:auto}
.user-card .meta b{font-weight:500;color:var(--ink-2)}
/* ---------- Schedule editor (mini) ---------- */
.weeks{
display:grid;grid-template-columns:48px repeat(24,1fr);gap:0;
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;
}
.weeks .lbl{
padding:6px 8px;font-size:11px;color:var(--muted);
border-right:1px solid var(--border-soft);background:var(--surface);
}
.weeks .h{font-size:9.5px;color:var(--muted-2);text-align:center;padding:4px 0;border-right:1px solid var(--border-soft);font-family:'JetBrains Mono',monospace}
.weeks .h:last-child{border-right:0}
.weeks .row{display:contents}
.weeks .c{height:14px;border-right:1px solid #ECEAE3;background:var(--bg-soft)}
.weeks .c.on{background:var(--ink)}
.weeks .c.half{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 50%,var(--bg-soft) 50%)}
.weeks .c.deny{background:var(--danger-soft)}
.weeks .c:last-child{border-right:0}
/* ===================================================================
PROJECTS — управление проектами.
Используется в delta-projects-list.html и delta-project-detail.html
=================================================================== */
/* ---------- list variant ---------- */
.proj-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.proj-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:12px 16px;background:var(--surface);
border:1px solid var(--border);border-radius:14px;margin-bottom:12px;
}
.proj-toolbar .label{font-size:11.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.view-switch{
display:flex;align-items:center;gap:2px;padding:3px;background:var(--bg-soft);
border-radius:10px;border:1px solid var(--border-soft);
}
.view-switch a{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);
}
.view-switch a:hover{background:var(--surface)}
.view-switch a.on{background:var(--ink);color:#fff}
.proj-list{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
.proj-list .head{
display:grid;
grid-template-columns:36px 2.4fr 1.2fr 1.4fr 1fr 1.2fr 36px;
gap:14px;align-items:center;
padding:11px 16px 11px 18px;background:var(--surface-2);
border-bottom:1px solid var(--border-soft);
font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);font-weight:500;
}
.proj-row{
display:grid;
grid-template-columns:36px 2.4fr 1.2fr 1.4fr 1fr 1.2fr 36px;
gap:14px;align-items:center;
padding:14px 16px 14px 18px;border-bottom:1px solid var(--border-soft);
transition:background .1s;
}
.proj-row:last-child{border-bottom:0}
.proj-row:hover{background:var(--surface-2)}
.proj-row .ix{
width:32px;height:32px;border-radius:8px;background:var(--accent-soft);
display:grid;place-items:center;font-family:'JetBrains Mono',monospace;
font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.04em;
}
.proj-row .ix.client{background:var(--ink);color:#fff}
.proj-row .ix.tender{background:var(--info-soft);color:var(--info)}
.proj-row .ix.internal{background:var(--bg-soft);color:var(--ink-2)}
.proj-row .who .nm{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.proj-row .who .nm a{color:inherit}
.proj-row .who .nm a:hover{text-decoration:underline}
.proj-row .who .sub{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.proj-row .who .sub .dot-sep{color:var(--muted-2)}
.stage{
display:flex;flex-direction:column;gap:5px;
}
.stage .pill{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:999px;
font-size:11.5px;font-weight:500;align-self:flex-start;
background:var(--bg-soft);color:var(--ink-2);
}
.stage .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.stage .pill.warn{background:var(--warn-soft);color:var(--warn)}
.stage .pill.warn .dot{background:#D9A407}
.stage .pill.info{background:var(--info-soft);color:var(--info)}
.stage .pill.info .dot{background:var(--info)}
.stage .pill.ok{background:var(--positive-soft);color:var(--positive)}
.stage .pill.ok .dot{background:var(--positive)}
.stage .pill.red{background:var(--danger-soft);color:var(--danger)}
.stage .pill.red .dot{background:var(--danger)}
.stage .pill.dark{background:var(--ink);color:#fff}
.stage .pill.dark .dot{background:#fff}
.progress{height:5px;border-radius:999px;background:var(--bg-soft);overflow:hidden;position:relative;width:140px;max-width:100%}
.progress .bar{height:100%;background:var(--ink);border-radius:999px}
.progress.warn .bar{background:#D9A407}
.progress.red .bar{background:var(--danger)}
.progress.ok .bar{background:var(--positive)}
.stage .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.team-stack{display:flex;align-items:center}
.team-stack .av{
width:28px;height:28px;border-radius:50%;
background:#3A3833;color:#fff;display:grid;place-items:center;
font-size:11px;font-weight:600;
border:2px solid var(--surface);margin-left:-8px;
}
.team-stack .av:first-child{margin-left:0}
.team-stack .av.more{background:var(--surface-2);color:var(--ink-2);border-color:var(--surface);font-weight:500}
.team-stack .role{font-size:11px;color:var(--muted);margin-left:10px}
.due{font-size:12.5px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:2px}
.due .d{font-weight:500}
.due .r{font-size:11px;color:var(--muted)}
.due.red .d{color:var(--danger)}
.due.warn .d{color:var(--warn)}
.budget{font-size:13px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:2px}
.budget .v{font-weight:600;letter-spacing:-.01em}
.budget .v .ccy{color:var(--muted);font-weight:500;font-size:11px;margin-left:3px}
.budget .m{font-size:11px;color:var(--positive)}
.budget .m.red{color:var(--danger)}
.row-act{
width:30px;height:30px;border-radius:8px;
display:grid;place-items:center;color:var(--muted-2);
}
.row-act:hover{background:var(--bg-soft);color:var(--ink)}
/* ---------- detail variant ---------- */
.proj-hero{
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:24px 28px;display:flex;gap:24px;align-items:flex-start;
margin-bottom:14px;
}
.proj-hero .left{flex:1;min-width:0}
.proj-hero .crumb{
display:flex;gap:8px;align-items:center;
font-size:11.5px;color:var(--muted);
letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;
}
.proj-hero .crumb .mono{letter-spacing:.06em;text-transform:none}
.proj-hero h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.proj-hero .sub{font-size:13.5px;color:var(--muted);max-width:640px}
.proj-hero .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.proj-hero .right{
width:280px;flex:none;
border-left:1px solid var(--border-soft);padding-left:24px;
display:flex;flex-direction:column;gap:10px;
}
.proj-hero .right .it{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.proj-hero .right .it .l{color:var(--muted)}
.proj-hero .right .it .v{font-weight:500;text-align:right;letter-spacing:-.01em}
.proj-hero .right .actions{display:flex;gap:6px;margin-top:6px}
.proj-progress{
margin-top:18px;padding-top:18px;border-top:1px solid var(--border-soft);
display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px;
}
.proj-progress .pc .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.proj-progress .pc .v{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.proj-progress .pc .v .ccy{color:var(--muted);font-weight:500;font-size:13px;margin-left:3px}
.proj-progress .pc .bar{margin-top:8px}
.proj-progress .pc .s{font-size:11px;color:var(--muted);margin-top:4px}
.proj-progress .pc .s.ok{color:var(--positive)}
.proj-progress .pc .s.warn{color:var(--warn)}
.proj-split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
/* milestone timeline */
.milestones{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:20px 22px;
}
.milestones h3{font-size:15px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.ms-bar{
position:relative;height:6px;background:var(--bg-soft);border-radius:999px;margin:20px 0 26px;
}
.ms-bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:999px}
.ms-bar .mk{position:absolute;top:50%;transform:translate(-50%,-50%)}
.ms-bar .mk .dot{
width:14px;height:14px;border-radius:50%;background:#fff;
border:2px solid var(--ink);box-shadow:0 0 0 4px rgba(255,255,255,1);position:relative;z-index:1;
}
.ms-bar .mk.done .dot{background:var(--ink)}
.ms-bar .mk.now .dot{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,12,.12)}
.ms-bar .mk.future .dot{background:var(--bg-soft);border-color:var(--muted-2)}
.ms-bar .mk.risk .dot{background:var(--danger);border-color:var(--danger)}
.ms-bar .mk .lbl{
position:absolute;top:18px;left:50%;transform:translateX(-50%);
white-space:nowrap;font-size:11px;color:var(--ink-2);
}
.ms-bar .mk .lbl b{display:block;font-size:11.5px;font-weight:600;margin-bottom:2px}
.ms-bar .mk .lbl .d{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:10.5px}
.ms-bar .mk.below .lbl{top:auto;bottom:18px}
.ms-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ms-list .it{
display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;
padding:12px 14px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-2);
}
.ms-list .it .num{
width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:600;font-size:12.5px;
}
.ms-list .it.done .num{background:var(--positive)}
.ms-list .it.future .num{background:var(--bg-soft);color:var(--ink-2)}
.ms-list .it.risk .num{background:var(--danger);color:#fff}
.ms-list .it .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.ms-list .it .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.ms-list .it .date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2);text-align:right}
.ms-list .it .date .r{font-size:10.5px;color:var(--muted);margin-top:2px}
/* side blocks */
.side-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;
margin-bottom:14px;
}
.side-card h4{font-size:13px;font-weight:600;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.side-card h4 .cnt{
font-size:11px;padding:1px 8px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;
}
.side-card h4 .cnt.red{background:var(--danger-soft);color:var(--danger)}
.side-card h4 .more{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-weight:400}
.risk-list .it{
display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:flex-start;
padding:10px 0;border-top:1px solid var(--border-soft);
}
.risk-list .it:first-child{border-top:0;padding-top:0}
.risk-list .it .ic{
width:28px;height:28px;border-radius:8px;background:var(--danger-soft);color:var(--danger);
display:grid;place-items:center;flex:none;
}
.risk-list .it.warn .ic{background:var(--warn-soft);color:var(--warn)}
.risk-list .it.info .ic{background:var(--info-soft);color:var(--info)}
.risk-list .it .nm{font-size:13px;font-weight:500;line-height:1.3}
.risk-list .it .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.risk-list .it .sev{
font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--danger-soft);
color:var(--danger);font-weight:500;align-self:flex-start;letter-spacing:.04em;text-transform:uppercase;
}
.risk-list .it.warn .sev{background:var(--warn-soft);color:var(--warn)}
.risk-list .it.info .sev{background:var(--info-soft);color:var(--info)}
.next-list .it{
display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;
padding:9px 0;border-top:1px solid var(--border-soft);
}
.next-list .it:first-child{border-top:0;padding-top:0}
.next-list .it .chk{
width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);
display:grid;place-items:center;cursor:pointer;flex:none;background:var(--surface);
}
.next-list .it.done .chk{background:var(--ink);border-color:var(--ink)}
.next-list .it.done .chk::after{
content:"";display:inline-block;width:8px;height:5px;
border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
transform:rotate(-45deg) translate(1px,-1px);
}
.next-list .it.done .nm{color:var(--muted);text-decoration:line-through}
.next-list .it .nm{font-size:13px;line-height:1.3}
.next-list .it .who{
width:22px;height:22px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:10px;font-weight:600;
}
.next-list .it .date{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.team-list{display:flex;flex-direction:column;gap:6px}
.team-list .it{display:flex;align-items:center;gap:10px}
.team-list .it .av{
width:30px;height:30px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:600;
}
.team-list .it .nm{font-size:13px;font-weight:500}
.team-list .it .ro{font-size:11px;color:var(--muted)}
.team-list .it .h{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-2)}
.fin-mini{display:flex;flex-direction:column;gap:8px}
.fin-mini .it{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px}
.fin-mini .it .l{color:var(--muted-2);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;align-self:center}
.fin-mini .it .v{font-family:'JetBrains Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.fin-mini .it.total{padding-top:8px;border-top:1px dashed var(--border)}
.fin-mini .it.total .l{color:var(--ink);font-weight:500;font-size:12.5px;text-transform:none;letter-spacing:0}
.fin-mini .it.total .v{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fin-mini .it.margin .v{color:var(--positive)}
.fin-mini .it.margin .v.red{color:var(--danger)}
.activity{display:flex;flex-direction:column;gap:0}
.activity .it{
display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:flex-start;
padding:10px 0;border-top:1px solid var(--border-soft);
}
.activity .it:first-child{border-top:0;padding-top:0}
.activity .it .ic{
width:24px;height:24px;border-radius:50%;background:var(--bg-soft);color:var(--muted);
display:grid;place-items:center;font-size:11px;
}
.activity .it .nm{font-size:12.5px;line-height:1.4}
.activity .it .nm b{font-weight:600}
.activity .it .tm{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;align-self:flex-start;padding-top:4px}
/* ===================================================================
ACCESS CONTROL — глубокая проработка: настройка контроллера,
точки прохода, доступы конкретному пользователю.
=================================================================== */
/* Toggle switch */
.toggle{
display:inline-flex;align-items:center;gap:10px;cursor:pointer;
font-size:13px;color:var(--ink-2);
}
.toggle input{display:none}
.toggle .sw{
width:36px;height:20px;border-radius:999px;background:var(--bg-soft);
border:1px solid var(--border);position:relative;transition:background .15s;
flex:none;
}
.toggle .sw::after{
content:"";position:absolute;left:2px;top:1px;width:16px;height:16px;
border-radius:50%;background:#fff;
box-shadow:0 2px 4px rgba(14,14,12,.18);
transition:left .15s;
}
.toggle input:checked + .sw{background:var(--ink);border-color:var(--ink)}
.toggle input:checked + .sw::after{left:18px}
.toggle .sub{font-size:11.5px;color:var(--muted);margin-left:auto}
/* Setting row: label + control + helper */
.setting{
display:grid;grid-template-columns:1.2fr 1fr;gap:24px;
padding:14px 0;border-top:1px solid var(--border-soft);align-items:start;
}
.setting:first-child{border-top:0;padding-top:0}
.setting .l .h{font-size:13.5px;font-weight:500;color:var(--ink)}
.setting .l .d{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.setting .l .h .req{color:var(--danger);margin-left:3px}
.setting .ctl{display:flex;flex-direction:column;gap:6px}
.setting .ctl .help{font-size:11.5px;color:var(--muted)}
.setting .ctl .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Compact section card with internal header */
.cfg-section{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;margin-bottom:14px;
}
.cfg-section > .hd{
display:flex;align-items:center;gap:10px;
padding:16px 20px;border-bottom:1px solid var(--border-soft);
background:var(--surface-2);
}
.cfg-section > .hd .ix{
font-family:'JetBrains Mono',monospace;font-size:11px;
color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;
}
.cfg-section > .hd .h{font-size:15px;font-weight:600;letter-spacing:-.01em}
.cfg-section > .hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.cfg-section > .bd{padding:18px 22px}
.cfg-section > .ft{
display:flex;align-items:center;gap:10px;
padding:12px 20px;background:var(--surface-2);
border-top:1px solid var(--border-soft);font-size:12px;color:var(--muted);
}
/* Port diagram */
.port-diag{
background:linear-gradient(180deg,#1A1916 0%,#0E0E0C 100%);
border-radius:14px;padding:24px;color:#fff;
display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.port-diag .label{
font-family:'JetBrains Mono',monospace;font-size:10.5px;
color:#A29F98;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
}
.port-diag .strip{
background:#0A0908;border:1px solid #2A2823;border-radius:10px;
padding:14px 16px;display:flex;flex-direction:column;gap:8px;
}
.port-diag .pt{
display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;
padding:8px 10px;border-radius:8px;background:#161412;border:1px solid #2A2823;
transition:background .1s;
}
.port-diag .pt:hover{background:#1F1D1A}
.port-diag .pt .pin{
font-family:'JetBrains Mono',monospace;font-size:11px;
color:#5BB66A;letter-spacing:.06em;
}
.port-diag .pt.idle .pin{color:#74726D}
.port-diag .pt.warn .pin{color:#D9A407}
.port-diag .pt.err .pin{color:#E54B3C}
.port-diag .pt .nm{font-size:12.5px;color:#fff;font-weight:500}
.port-diag .pt .sub{font-size:11px;color:#A29F98;margin-top:2px}
.port-diag .pt .led{
width:8px;height:8px;border-radius:50%;background:#5BB66A;
box-shadow:0 0 8px rgba(91,182,106,.7);
}
.port-diag .pt.idle .led{background:#3A3833;box-shadow:none}
.port-diag .pt.warn .led{background:#D9A407;box-shadow:0 0 8px rgba(217,164,7,.7)}
.port-diag .pt.err .led{background:#E54B3C;box-shadow:0 0 8px rgba(229,75,60,.7)}
/* Wiring schematic (gate config) */
.wiring{
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:14px;padding:24px 28px;position:relative;
}
.wiring .col{display:flex;flex-direction:column;gap:8px}
.wiring .device{
border:1px solid var(--border);background:#fff;
border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;
position:relative;z-index:1;
}
.wiring .device.dim{background:var(--bg-soft);color:var(--muted);border-style:dashed}
.wiring .device .ic{
width:36px;height:36px;border-radius:8px;background:var(--accent-soft);
display:grid;place-items:center;flex:none;color:var(--ink);
}
.wiring .device.dim .ic{background:var(--bg-soft);color:var(--muted)}
.wiring .device .nm{font-size:12.5px;font-weight:500}
.wiring .device .sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.wiring .device .pin{
margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;
color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:5px;
}
.wiring .layout{
display:grid;grid-template-columns:1fr 220px 1fr;gap:32px;align-items:center;
}
.wiring .controller{
background:linear-gradient(180deg,#1F1D1A 0%,#0E0E0C 100%);
color:#fff;border-radius:14px;padding:16px;
display:flex;flex-direction:column;gap:8px;text-align:center;
position:relative;
}
.wiring .controller .h{font-size:11px;color:#A29F98;letter-spacing:.08em;text-transform:uppercase}
.wiring .controller .nm{font-size:15px;font-weight:600;letter-spacing:-.01em}
.wiring .controller .led-strip{display:flex;justify-content:center;gap:6px;margin:4px 0}
.wiring .controller .led-strip .led{width:7px;height:7px;border-radius:50%;background:#5BB66A;box-shadow:0 0 6px rgba(91,182,106,.7)}
.wiring .controller .led-strip .led.amber{background:#D9A407;box-shadow:0 0 6px rgba(217,164,7,.7)}
.wiring .controller .pin-list{font-family:'JetBrains Mono',monospace;font-size:10px;color:#A29F98}
/* SVG wires drawn over the layout */
.wiring svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* Credential card grid */
.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cred-card{
background:var(--surface);border:1px solid var(--border);
border-radius:14px;padding:14px 16px;
display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
}
.cred-card .hd{display:flex;align-items:flex-start;gap:10px}
.cred-card .badge{
font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
padding:4px 10px;border-radius:8px;background:var(--ink);color:#fff;
letter-spacing:.06em;flex:none;
}
.cred-card.mobile .badge{background:var(--info);color:#fff}
.cred-card.face .badge{background:var(--accent-soft);color:var(--ink)}
.cred-card.pin .badge{background:var(--warn-soft);color:var(--warn)}
.cred-card .ty{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.cred-card .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.cred-card .meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:11.5px;color:var(--muted)}
.cred-card .meta b{color:var(--ink);font-weight:500;font-family:'JetBrains Mono',monospace}
.cred-card .actions{display:flex;gap:6px;margin-top:6px}
.cred-card .actions a{font-size:11.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cred-card .actions a.red{color:var(--danger)}
.cred-card .st{
position:absolute;top:14px;right:14px;
font-size:10.5px;padding:2px 8px;border-radius:999px;
background:var(--positive-soft);color:var(--positive);font-weight:500;
}
.cred-card .st.red{background:var(--danger-soft);color:var(--danger)}
.cred-card .st.warn{background:var(--warn-soft);color:var(--warn)}
/* Access-rule cards (per-gate for a user) */
.gate-rules{display:flex;flex-direction:column;gap:8px}
.gate-rule{
background:var(--surface);border:1px solid var(--border);
border-radius:14px;overflow:hidden;
}
.gate-rule .hd{
display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;
padding:13px 16px;border-bottom:1px solid var(--border-soft);background:var(--surface-2);
}
.gate-rule .hd .num{
width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:600;font-size:12.5px;
}
.gate-rule .hd .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.gate-rule .hd .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.gate-rule .hd .state{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:500;
}
.gate-rule .hd .state.allow{background:var(--ink);color:#fff}
.gate-rule .hd .state.sched{background:var(--info-soft);color:var(--info)}
.gate-rule .hd .state.deny{background:var(--danger-soft);color:var(--danger)}
.gate-rule .hd .state.temp{background:var(--warn-soft);color:var(--warn)}
.gate-rule .hd .state.inherit{background:var(--bg-soft);color:var(--muted);border:1px dashed var(--border)}
.gate-rule .bd{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gate-rule .bd .col h5{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;font-weight:500}
.gate-rule .bd .col .v{font-size:12.5px;color:var(--ink-2)}
.gate-rule .bd .col .v.mono{font-family:'JetBrains Mono',monospace;font-size:11.5px}
.gate-rule .ft{
display:flex;align-items:center;gap:8px;
padding:10px 16px;border-top:1px solid var(--border-soft);background:var(--surface-2);
}
.gate-rule .ft .lk{font-size:12px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gate-rule .ft .lk.red{color:var(--danger)}
/* Inheritance badge */
.badge-inh{
display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;padding:2px 7px;border-radius:6px;
background:var(--bg-soft);color:var(--muted);
font-weight:500;letter-spacing:.04em;
}
.badge-inh::before{content:"↑";font-size:11px}
.badge-inh.override{background:var(--warn-soft);color:var(--warn)}
.badge-inh.override::before{content:"⊘"}
/* Inline schedule editor with day rows */
.sched-day{
display:grid;grid-template-columns:38px 1fr 110px;gap:12px;align-items:center;
padding:8px 10px;border-radius:8px;background:var(--surface-2);
border:1px solid var(--border-soft);margin-bottom:4px;
}
.sched-day .day{font-size:12px;font-weight:500;color:var(--ink-2)}
.sched-day .range{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);text-align:right}
.sched-day .range.off{color:var(--muted-2)}
.sched-day .vis{
height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden;position:relative;
}
.sched-day .vis .seg{
position:absolute;top:0;bottom:0;background:var(--ink);border-radius:999px;
}
.sched-day .vis .seg.deny{background:var(--danger-soft)}
/* Schedule preset cards */
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preset{
border:1px solid var(--border);border-radius:12px;background:var(--surface);
padding:12px 14px;cursor:pointer;transition:all .1s;
}
.preset:hover{background:var(--surface-2);border-color:var(--ink)}
.preset.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.preset .h{font-size:13px;font-weight:600;letter-spacing:-.01em}
.preset .d{font-size:11.5px;margin-top:2px;color:var(--muted)}
.preset.on .d{color:#A29F98}
/* Profile photo */
.photo-block{
width:96px;height:96px;border-radius:16px;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:32px;font-weight:600;letter-spacing:-.02em;
flex:none;position:relative;overflow:hidden;
}
.photo-block::after{
content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.2) 100%);
}
.photo-block .change{
position:absolute;bottom:6px;right:6px;
width:24px;height:24px;border-radius:8px;background:#fff;color:var(--ink);
display:grid;place-items:center;font-size:12px;box-shadow:0 4px 10px rgba(14,14,12,.25);
z-index:1;
}
/* Read-only field appearance */
.ro-field{
background:#FAFAF6;border:1px solid var(--border-soft);
border-radius:10px;padding:10px 12px;font-size:13px;
font-family:'JetBrains Mono',monospace;color:var(--ink-2);
}
/* Audit log mini */
.audit-mini .it{
display:grid;grid-template-columns:78px 24px 1fr;gap:10px;
padding:9px 0;border-top:1px solid var(--border-soft);align-items:flex-start;
}
.audit-mini .it:first-child{border-top:0;padding-top:0}
.audit-mini .tm{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.audit-mini .ic{
width:20px;height:20px;border-radius:50%;background:var(--bg-soft);color:var(--muted);
display:grid;place-items:center;font-size:10px;flex:none;
}
.audit-mini .ic.add{background:var(--positive-soft);color:var(--positive)}
.audit-mini .ic.del{background:var(--danger-soft);color:var(--danger)}
.audit-mini .ic.edit{background:var(--info-soft);color:var(--info)}
.audit-mini .nm{font-size:12.5px;line-height:1.4}
.audit-mini .nm b{font-weight:600}
.audit-mini .nm .who{color:var(--muted)}
/* ===================================================================
KNOWLEDGE BASE — База знаний / Хелп-центр delta.online
Используется в:
· delta-kb.html (публичная главная)
· delta-kb-category.html (раздел / категория)
· delta-kb-article.html (страница статьи)
· delta-kb-search.html (результаты поиска)
· delta-kb-app.html (встроенная в CRM главная)
· delta-kb-app-article.html (встроенная статья)
Все цвета — из общих токенов :root.
=================================================================== */
/* ---------- общий контейнер хелп-центра ---------- */
.kb-wrap{max-width:1180px;margin:0 auto;padding:24px}
.kb-wrap.narrow{max-width:1040px}
/* breadcrumbs в хелп-центре — переиспользуем .public-bcr,
добавляем лёгкий вариант на бумажном фоне */
.kb-bcr{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
color:var(--muted);font-size:12.5px;margin-bottom:16px;
}
.kb-bcr a{color:inherit}
.kb-bcr a:hover{color:var(--ink)}
.kb-bcr .sep{color:var(--muted-2)}
.kb-bcr .now{color:var(--ink);font-weight:500}
/* ===================================================================
HERO с поиском (главная)
=================================================================== */
.kb-hero{
position:relative;overflow:hidden;
background:var(--ink);color:#fff;
border-radius:var(--radius-xl);
padding:54px 40px 46px;
text-align:center;
}
.kb-hero::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(620px 280px at 50% -40%,rgba(255,255,255,.10),transparent 70%),
radial-gradient(420px 220px at 12% 120%,rgba(255,255,255,.05),transparent 70%);
pointer-events:none;
}
.kb-hero > *{position:relative;z-index:1}
.kb-hero .eyebrow{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;color:#C2C0BA;letter-spacing:.04em;
padding:5px 12px;border-radius:999px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
margin-bottom:18px;
}
.kb-hero .eyebrow .dlt{font-weight:700}
.kb-hero h1{
font-size:36px;font-weight:600;letter-spacing:-.025em;
margin:0 0 10px;line-height:1.1;
}
.kb-hero .lead{
color:#C2C0BA;font-size:15px;max-width:620px;margin:0 auto 26px;line-height:1.5;
}
.kb-searchbox{
max-width:640px;margin:0 auto;
display:flex;align-items:center;gap:10px;
background:#fff;border-radius:14px;
padding:8px 8px 8px 16px;
box-shadow:0 24px 48px -20px rgba(0,0,0,.45);
}
.kb-searchbox .mag{color:var(--muted);flex:none}
.kb-searchbox input{
flex:1;border:0;outline:0;background:transparent;
font-size:15px;color:var(--ink);font-family:inherit;
}
.kb-searchbox input::placeholder{color:var(--muted-2)}
.kb-searchbox .go{
display:inline-flex;align-items:center;gap:7px;
background:var(--ink);color:#fff;
padding:11px 18px;border-radius:10px;
font-size:13.5px;font-weight:500;flex:none;
}
.kb-searchbox .go:hover{background:#000}
.kb-pop{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
margin-top:18px;font-size:12.5px;color:#A29F98;
}
.kb-pop a{
color:#E7E5DF;padding:4px 11px;border-radius:999px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.kb-pop a:hover{background:rgba(255,255,255,.14)}
/* ===================================================================
Заголовок секции в хелп-центре
=================================================================== */
.kb-sec-h{
display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
margin:38px 0 16px;
}
.kb-sec-h .lab{
font-family:'JetBrains Mono',monospace;
font-size:11px;color:var(--muted-2);
letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;
}
.kb-sec-h h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0}
.kb-sec-h .sub{color:var(--muted);font-size:13px;margin-top:4px}
.kb-sec-h .more{font-size:13px;color:var(--ink);white-space:nowrap}
.kb-sec-h .more:hover{text-decoration:underline;text-underline-offset:3px}
/* ===================================================================
Плитки категорий
=================================================================== */
.kb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kb-cat{
display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:20px;
transition:transform .08s,box-shadow .12s,border-color .12s;
}
.kb-cat:hover{
transform:translateY(-2px);border-color:#D3CFC6;
box-shadow:0 18px 36px -22px rgba(14,14,12,.28);
}
.kb-cat .top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.kb-cat .ic{
width:42px;height:42px;border-radius:12px;flex:none;
background:var(--bg-soft);color:var(--ink);
display:grid;place-items:center;
}
.kb-cat.dark .ic{background:var(--ink);color:#fff}
.kb-cat .nm{font-size:15px;font-weight:600;letter-spacing:-.01em}
.kb-cat .cnt{font-size:12px;color:var(--muted);margin-top:1px}
.kb-cat .links{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.kb-cat .links a{
display:flex;align-items:center;gap:8px;
padding:6px 8px;border-radius:8px;
font-size:13px;color:var(--ink-2);
}
.kb-cat .links a::before{
content:"";width:5px;height:5px;border-radius:50%;
background:var(--muted-2);flex:none;
}
.kb-cat .links a:hover{background:var(--bg-soft);color:var(--ink)}
.kb-cat .foot{
margin-top:auto;padding-top:12px;
font-size:12.5px;color:var(--muted);
display:flex;align-items:center;gap:6px;
}
.kb-cat .foot .arr{color:var(--ink);font-weight:500}
.kb-cat:hover .foot .arr{transform:translateX(2px)}
/* ===================================================================
Список статей (строки) — популярное / новое / в разделе
=================================================================== */
.kb-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kb-list{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);overflow:hidden;
}
.kb-art{
display:grid;grid-template-columns:auto 1fr auto;
gap:14px;align-items:center;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.kb-art:last-child{border-bottom:0}
.kb-art:hover{background:var(--surface-2)}
.kb-art .rank{
font-family:'JetBrains Mono',monospace;
font-size:12px;color:var(--muted-2);width:20px;text-align:center;
}
.kb-art .ai{
width:34px;height:34px;border-radius:9px;flex:none;
background:var(--bg-soft);color:var(--ink-2);
display:grid;place-items:center;
}
.kb-art .ttl{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.kb-art:hover .ttl{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.kb-art .meta{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:4px;font-size:11.5px;color:var(--muted);
}
.kb-art .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.kb-art .views{
font-size:11.5px;color:var(--muted);white-space:nowrap;
display:flex;align-items:center;gap:5px;
}
.kb-art .chev{color:var(--muted-2);flex:none}
/* карточный вариант статьи (для подборок) */
.kb-card{
display:flex;flex-direction:column;gap:8px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:18px;
transition:border-color .12s,box-shadow .12s,transform .08s;
}
.kb-card:hover{border-color:#D3CFC6;box-shadow:0 14px 30px -22px rgba(14,14,12,.26);transform:translateY(-1px)}
.kb-card .cat-tag{
align-self:flex-start;font-size:11px;font-weight:500;
color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
.kb-card h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.3}
.kb-card p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.kb-card .foot{
display:flex;align-items:center;gap:8px;margin-top:4px;
font-size:11.5px;color:var(--muted);
}
.kb-card .foot .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
/* ===================================================================
Лента «нужна помощь» / CTA-полоса
=================================================================== */
.kb-help-strip{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;
}
.kb-help-card{
display:flex;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:18px 20px;
}
.kb-help-card .ic{
width:44px;height:44px;border-radius:12px;flex:none;
background:var(--bg-soft);display:grid;place-items:center;color:var(--ink);
}
.kb-help-card .nm{font-size:14px;font-weight:600}
.kb-help-card .sub{font-size:12px;color:var(--muted);margin-top:2px}
.kb-help-card .arr{margin-left:auto;color:var(--muted-2)}
.kb-help-card:hover{border-color:#D3CFC6}
.kb-help-card:hover .arr{color:var(--ink)}
/* ===================================================================
РАЗДЕЛ / КАТЕГОРИЯ — grid с боковым деревом
=================================================================== */
.kb-layout{display:grid;grid-template-columns:248px 1fr;gap:24px;align-items:flex-start}
.kb-side{
position:sticky;top:24px;align-self:start;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:14px;
max-height:calc(100vh - 48px);overflow:auto;
}
.kb-side .s-title{
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.08em;padding:4px 10px 8px;
}
.kb-tree a{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:9px;
font-size:13px;color:var(--ink-2);
}
.kb-tree a .ic{width:16px;height:16px;color:var(--muted);flex:none}
.kb-tree a .n{
margin-left:auto;font-size:11px;color:var(--muted);
background:var(--bg-soft);border-radius:999px;padding:1px 8px;
}
.kb-tree a:hover{background:var(--bg-soft)}
.kb-tree a.active{background:var(--ink);color:#fff}
.kb-tree a.active .ic{color:#fff}
.kb-tree a.active .n{background:rgba(255,255,255,.16);color:#fff}
.kb-tree .sub{
margin:2px 0 6px 13px;padding-left:12px;
border-left:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:1px;
}
.kb-tree .sub a{font-size:12.5px;padding:5px 10px;color:var(--muted)}
.kb-tree .sub a.active{background:var(--accent-soft);color:var(--ink);font-weight:500}
.kb-tree .sub a:hover{color:var(--ink-2)}
/* шапка раздела */
.kb-cat-head{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:24px 26px;margin-bottom:16px;
display:flex;align-items:flex-start;gap:18px;
}
.kb-cat-head .ic{
width:54px;height:54px;border-radius:14px;flex:none;
background:var(--ink);color:#fff;display:grid;place-items:center;
}
.kb-cat-head h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0}
.kb-cat-head .sub{color:var(--muted);font-size:13.5px;margin-top:6px;max-width:620px}
.kb-cat-head .meta{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.kb-cat-head .meta b{color:var(--ink);font-weight:500}
/* строка подразделов-чипов + сортировка */
.kb-toolbar{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.kb-toolbar .grow{flex:1}
/* ===================================================================
СТРАНИЦА СТАТЬИ — контент + правый блок (TOC + мета)
=================================================================== */
.kb-doc-grid{display:grid;grid-template-columns:1fr 264px;gap:32px;align-items:flex-start}
.kb-doc{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:36px 44px 40px;min-width:0;
}
.kb-doc .doc-head{border-bottom:1px solid var(--border-soft);padding-bottom:22px;margin-bottom:26px}
.kb-doc .doc-cat{
font-size:11.5px;font-weight:500;color:var(--muted);
text-transform:uppercase;letter-spacing:.06em;
}
.kb-doc h1{font-size:30px;font-weight:600;letter-spacing:-.025em;margin:8px 0 0;line-height:1.18}
.kb-doc .doc-lead{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.55}
.kb-doc .doc-byline{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:18px;font-size:12.5px;color:var(--muted);
}
.kb-doc .doc-byline .av{
width:26px;height:26px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:10px;font-weight:600;
}
.kb-doc .doc-byline .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.kb-doc .doc-byline b{color:var(--ink);font-weight:500}
/* ---------- ТИПОГРАФИКА ТЕЛА СТАТЬИ ---------- */
.kb-prose{font-size:15px;line-height:1.7;color:var(--ink-2)}
.kb-prose > * + *{margin-top:18px}
.kb-prose h2{
font-size:20px;font-weight:600;letter-spacing:-.015em;
color:var(--ink);margin-top:34px;scroll-margin-top:88px;
padding-top:4px;
}
.kb-prose h3{
font-size:16px;font-weight:600;color:var(--ink);
margin-top:26px;scroll-margin-top:88px;
}
.kb-prose p{margin:0}
.kb-prose a.in{color:var(--info);text-decoration:underline;text-underline-offset:2px}
.kb-prose a.in:hover{color:var(--ink)}
.kb-prose strong{font-weight:600;color:var(--ink)}
.kb-prose ul,.kb-prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.kb-prose li{padding-left:4px}
.kb-prose li::marker{color:var(--muted-2)}
.kb-prose code{
font-family:'JetBrains Mono',monospace;font-size:13px;
background:var(--bg-soft);border:1px solid var(--border-soft);
border-radius:6px;padding:1px 6px;color:var(--ink);
}
.kb-prose pre{
background:var(--ink);color:#E7E5DF;
border-radius:12px;padding:16px 18px;overflow:auto;
font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6;
}
.kb-prose pre code{background:none;border:0;padding:0;color:inherit}
.kb-prose hr{border:0;border-top:1px solid var(--border-soft);margin:28px 0}
.kb-prose blockquote{
margin:0;padding:4px 18px;border-left:3px solid var(--accent-soft);
color:var(--muted);font-style:italic;
}
/* таблица внутри статьи */
.kb-prose table{width:100%;border-collapse:collapse;font-size:13.5px}
.kb-prose thead th{
text-align:left;font-weight:500;font-size:11px;text-transform:uppercase;
letter-spacing:.06em;color:var(--muted);padding:10px 12px;
background:var(--surface-2);border-bottom:1px solid var(--border-soft);
}
.kb-prose tbody td{padding:10px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.kb-prose tbody tr:last-child td{border-bottom:0}
.kb-prose .table-box{border:1px solid var(--border-soft);border-radius:12px;overflow:hidden}
/* callout / выноски */
.kb-note{
display:flex;gap:12px;padding:14px 16px;border-radius:12px;
background:var(--info-soft);color:var(--info);font-size:13.5px;line-height:1.55;
}
.kb-note .ic{flex:none;margin-top:1px}
.kb-note .t{font-weight:600;display:block;margin-bottom:2px}
.kb-note.tip{background:var(--positive-soft);color:var(--positive)}
.kb-note.warn{background:var(--warn-soft);color:var(--warn)}
.kb-note.danger{background:var(--danger-soft);color:var(--danger)}
/* нумерованные шаги */
.kb-steps{display:flex;flex-direction:column;gap:0;counter-reset:step}
.kb-step{
display:grid;grid-template-columns:34px 1fr;gap:16px;
padding:16px 0;border-top:1px solid var(--border-soft);
}
.kb-step:first-child{border-top:0;padding-top:0}
.kb-step .num{
counter-increment:step;
width:30px;height:30px;border-radius:9px;flex:none;
background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:600;font-size:13px;
}
.kb-step .num::before{content:counter(step)}
.kb-step .st-t{font-weight:600;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.kb-step .st-b{font-size:13.5px;color:var(--muted);line-height:1.6}
/* картинка-плейсхолдер с подписью */
.kb-figure{margin:0}
.kb-figure .img{
border-radius:12px;border:1px solid var(--border);
background:repeating-linear-gradient(45deg,#ECEAE3,#ECEAE3 10px,#F4F2EC 10px,#F4F2EC 20px);
aspect-ratio:16/8;display:grid;place-items:center;color:var(--muted-2);
position:relative;overflow:hidden;
}
.kb-figure .img .badge{
position:absolute;top:12px;left:12px;font-size:11px;color:var(--muted);
background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px;
}
.kb-figure figcaption{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
/* ---------- правый блок: оглавление + мета ---------- */
.kb-aside{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:14px}
.kb-toc{
background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:16px;
}
.kb-toc .h{
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.08em;padding:0 8px 10px;
}
.kb-toc a{
display:block;padding:7px 10px;border-radius:8px;
font-size:13px;color:var(--muted);line-height:1.35;
border-left:2px solid transparent;
}
.kb-toc a.sub{padding-left:22px;font-size:12.5px}
.kb-toc a:hover{color:var(--ink);background:var(--bg-soft)}
.kb-toc a.active{color:var(--ink);font-weight:500;border-left-color:var(--ink);background:var(--surface-2)}
.kb-meta{
background:var(--surface);border:1px solid var(--border);
border-radius:16px;padding:16px;font-size:12.5px;
}
.kb-meta .row{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
.kb-meta .row + .row{border-top:1px solid var(--border-soft)}
.kb-meta .row .k{color:var(--muted)}
.kb-meta .row .v{color:var(--ink);font-weight:500;text-align:right}
.kb-meta .row .v.mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.kb-share{
display:flex;gap:8px;
}
.kb-share .sb{
flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:9px 10px;border-radius:10px;border:1px solid var(--border);
background:var(--surface);font-size:12.5px;color:var(--ink-2);
}
.kb-share .sb:hover{background:var(--bg-soft)}
/* ---------- виджет «была ли статья полезной» ---------- */
.kb-helpful{
margin-top:34px;padding:22px 24px;
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:16px;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.kb-helpful .q{font-size:14.5px;font-weight:600;color:var(--ink)}
.kb-helpful .q .s{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
.kb-helpful .acts{margin-left:auto;display:flex;gap:8px}
.kb-vote{
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:10px;
border:1px solid var(--border);background:var(--surface);
font-size:13px;font-weight:500;color:var(--ink-2);
}
.kb-vote:hover{background:var(--bg-soft);border-color:#C8C5BE}
.kb-vote.yes.on{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.kb-vote.no.on{background:var(--danger-soft);color:var(--danger);border-color:transparent}
/* ---------- связанные статьи / следующее ---------- */
.kb-related{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.kb-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.kb-pn{
display:flex;flex-direction:column;gap:4px;
background:var(--surface);border:1px solid var(--border);
border-radius:14px;padding:16px 18px;
}
.kb-pn:hover{border-color:#D3CFC6}
.kb-pn .dir{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kb-pn.next{text-align:right}
.kb-pn.next .dir{justify-content:flex-end}
.kb-pn .t{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
/* ===================================================================
РЕЗУЛЬТАТЫ ПОИСКА
=================================================================== */
.kb-search-head{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:20px 24px;margin-bottom:16px;
}
.kb-search-head .field{
display:flex;align-items:center;gap:10px;
background:var(--surface-2);border:1px solid var(--border);
border-radius:12px;padding:11px 14px;
}
.kb-search-head .field:focus-within{border-color:var(--ink);background:#fff}
.kb-search-head .field input{flex:1;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink);font-family:inherit}
.kb-search-head .field .mag{color:var(--muted)}
.kb-search-head .field .clear{color:var(--muted-2);cursor:pointer;font-size:16px}
.kb-search-head .stat{margin-top:12px;font-size:13px;color:var(--muted)}
.kb-search-head .stat b{color:var(--ink);font-weight:600}
.kb-facets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.kb-facets .lbl{font-size:12px;color:var(--muted-2);margin-right:2px}
.kb-results{display:flex;flex-direction:column;gap:10px}
.kb-result{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:18px 20px;
}
.kb-result:hover{border-color:#D3CFC6}
.kb-result .path{
display:flex;align-items:center;gap:7px;
font-size:11.5px;color:var(--muted);margin-bottom:7px;
}
.kb-result .path .sep{color:var(--muted-2)}
.kb-result h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.kb-result h3:hover{text-decoration:underline;text-underline-offset:3px}
.kb-result .snippet{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.kb-result .foot{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:12px;font-size:11.5px;color:var(--muted);
}
.kb-result .foot .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.kb-hl{background:#F4E7B8;color:var(--ink);border-radius:3px;padding:0 2px;font-weight:500}
.kb-empty{
text-align:center;padding:46px 20px;color:var(--muted);
}
.kb-empty .ic{
width:56px;height:56px;border-radius:50%;background:var(--bg-soft);
display:grid;place-items:center;margin:0 auto 14px;color:var(--muted-2);
}
/* ===================================================================
ВСТРОЕННАЯ В CRM версия (sidebar + topbar)
— переиспользуем .app-page/.sidebar/.topbar/.page и т.д.
Точечные вспомогательные классы:
=================================================================== */
.kb-app-hero{
background:var(--ink);color:#fff;border:1px solid transparent;
border-radius:var(--radius-l);padding:28px 30px;
position:relative;overflow:hidden;
}
.kb-app-hero::after{
content:"";position:absolute;inset:0;
background:radial-gradient(420px 200px at 88% -30%,rgba(255,255,255,.10),transparent 70%);
}
.kb-app-hero > *{position:relative;z-index:1}
.kb-app-hero h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.kb-app-hero .sub{color:#C2C0BA;font-size:13.5px;max-width:560px}
.kb-app-hero .field{
margin-top:18px;max-width:520px;
display:flex;align-items:center;gap:10px;
background:#fff;border-radius:12px;padding:8px 8px 8px 14px;
}
.kb-app-hero .field input{flex:1;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink);font-family:inherit}
.kb-app-hero .field .mag{color:var(--muted)}
.kb-app-hero .field .go{background:var(--ink);color:#fff;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:500}
/* компактные плитки категорий в приложении */
.kb-app-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* ===================================================================
BIZ-CARD — публичная карточка компании (адаптивная)
Используется в:
· delta-biz-restaurant.html (ресторан «Соль»)
· delta-biz-hotel.html (загородный отель «Олений Ручей»)
3 колонки на десктопе, 1 колонка ≤ 920px.
=================================================================== */
.biz-page{
max-width:1280px;margin:0 auto;padding:24px;
}
.biz-bcr{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
color:var(--muted);font-size:12.5px;margin-bottom:14px;
}
.biz-bcr a{color:inherit}
.biz-bcr .sep{color:var(--muted-2)}
.biz-bcr .now{color:var(--ink);font-weight:500}
/* ---------- HERO ---------- */
.biz-hero{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-xl);overflow:hidden;
margin-bottom:18px;
}
.biz-cover{
position:relative;height:240px;overflow:hidden;
background:linear-gradient(135deg,#3A3833 0%,#0E0E0C 100%);
}
.biz-cover.warm{
background:
radial-gradient(800px 280px at 20% 20%,rgba(255,196,140,.16),transparent 60%),
linear-gradient(135deg,#5C3A24 0%,#2A1C12 100%);
}
.biz-cover.forest{
background:
radial-gradient(700px 260px at 80% 30%,rgba(170,205,170,.14),transparent 60%),
linear-gradient(135deg,#2A3A2E 0%,#0F1812 100%);
}
.biz-cover::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),transparent 50%),
radial-gradient(circle at 75% 75%,rgba(255,255,255,.06),transparent 55%);
pointer-events:none;
}
.biz-cover .badges{
position:absolute;top:18px;left:22px;
display:flex;gap:8px;flex-wrap:wrap;z-index:1;
}
.biz-cover .badges .b{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.16);color:#fff;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.biz-cover .badges .b.dark{background:rgba(0,0,0,.32)}
.biz-cover .gal-btn{
position:absolute;bottom:18px;right:22px;
display:inline-flex;align-items:center;gap:7px;
font-size:12.5px;color:#fff;padding:7px 13px;
background:rgba(0,0,0,.4);border-radius:999px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;
}
.biz-headcard{
display:grid;grid-template-columns:1fr auto;gap:24px;
align-items:flex-start;padding:22px 28px 26px;
}
.biz-head-l{display:flex;gap:18px;align-items:flex-start}
.biz-logo{
width:80px;height:80px;border-radius:18px;flex:none;
background:var(--ink);color:#fff;
display:grid;place-items:center;
font-size:32px;font-weight:700;letter-spacing:-.02em;
position:relative;overflow:hidden;
box-shadow:0 12px 30px -14px rgba(14,14,12,.45);
margin-top:-46px;border:4px solid var(--surface);
}
.biz-logo::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.22),transparent 55%);
}
.biz-head-l .info{display:flex;flex-direction:column;gap:6px;min-width:0}
.biz-head-l .info .kicker{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;font-weight:500;
}
.biz-head-l .info h1{
font-size:30px;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.1;
}
.biz-head-l .info .sub{
color:var(--muted);font-size:13.5px;max-width:560px;margin-top:2px;
}
.biz-head-l .info .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.biz-rating{
display:inline-flex;align-items:center;gap:7px;
background:var(--bg-soft);border:1px solid var(--border-soft);
border-radius:999px;padding:4px 10px;font-size:12.5px;
}
.biz-rating .stars{color:#D9A407;font-size:14px;letter-spacing:-1px}
.biz-rating .v{font-weight:600;color:var(--ink)}
.biz-rating .n{color:var(--muted)}
.biz-head-r{display:flex;flex-direction:column;gap:10px;align-items:flex-end;flex:none}
.biz-head-r .cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.biz-head-r .open-now{
display:inline-flex;align-items:center;gap:7px;
background:var(--positive-soft);color:var(--positive);
padding:5px 11px;border-radius:999px;font-size:12px;font-weight:500;
}
.biz-head-r .open-now.closed{background:var(--danger-soft);color:var(--danger)}
.biz-head-r .open-now .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:bzpulse 1.6s infinite}
@keyframes bzpulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ---------- GRID ---------- */
.biz-grid{
display:grid;grid-template-columns:1fr 1.35fr 1fr;
gap:18px;align-items:flex-start;
}
.biz-col{display:flex;flex-direction:column;gap:14px;min-width:0}
/* ---------- общие карточки внутри колонок ---------- */
.biz-block{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:18px 20px;
}
.biz-block-h{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:14px;
}
.biz-block-h h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:8px}
.biz-block-h h3 .ic{color:var(--muted);flex:none}
.biz-block-h .more{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.biz-block-h .more:hover{color:var(--ink)}
.biz-block.dark{background:var(--ink);color:#fff;border-color:transparent}
.biz-block.dark .biz-block-h h3{color:#fff}
.biz-block.dark .muted{color:#A29F98}
/* ---------- BLOCK: О компании ---------- */
.biz-about p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.biz-about p:last-child{margin-bottom:0}
.biz-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* ---------- BLOCK: График работы ---------- */
.biz-hours{display:flex;flex-direction:column;font-size:13px}
.biz-hours .row{
display:flex;justify-content:space-between;align-items:center;
padding:8px 10px;border-radius:8px;
}
.biz-hours .row.today{background:var(--bg-soft)}
.biz-hours .row .d{color:var(--ink-2)}
.biz-hours .row.today .d{font-weight:600;color:var(--ink)}
.biz-hours .row .t{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-2)}
.biz-hours .row.today .t{font-weight:600;color:var(--ink)}
.biz-hours .row.closed .t{color:var(--muted-2)}
.biz-hours .note{font-size:11.5px;color:var(--muted);margin-top:8px;padding:0 10px}
/* ---------- BLOCK: Контакты ---------- */
.biz-contacts{display:flex;flex-direction:column;gap:0}
.biz-contacts .row{
display:flex;align-items:center;gap:12px;
padding:10px 0;border-bottom:1px solid var(--border-soft);
font-size:13px;color:var(--ink-2);
}
.biz-contacts .row:last-child{border-bottom:0}
.biz-contacts .row .ic{
width:32px;height:32px;border-radius:9px;flex:none;
background:var(--bg-soft);display:grid;place-items:center;color:var(--ink-2);
}
.biz-contacts .row .v{flex:1;min-width:0;word-break:break-word}
.biz-contacts .row .v b{display:block;font-weight:500}
.biz-contacts .row .v .sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.biz-contacts .row .copy{color:var(--muted-2);cursor:pointer;font-size:12px}
.biz-contacts .row .copy:hover{color:var(--ink)}
/* ---------- BLOCK: Карта ---------- */
.biz-map-block{padding:14px 14px 14px}
.biz-map-block .biz-block-h{padding:0 6px;margin-bottom:10px}
.biz-mapwrap{
height:200px;border-radius:12px;overflow:hidden;
border:1px solid var(--border-soft);position:relative;
background:repeating-linear-gradient(45deg,#ECEAE3,#ECEAE3 8px,#F4F2EC 8px,#F4F2EC 16px);
}
.biz-mappin{
position:absolute;left:50%;top:50%;
width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:12px;
transform:translate(-50%,-100%);
box-shadow:0 8px 16px -4px rgba(0,0,0,.3);
}
.biz-mappin::after{
content:"";position:absolute;
width:8px;height:8px;background:var(--ink);
bottom:-4px;left:50%;transform:translateX(-50%) rotate(45deg);
}
.biz-mapwrap .roads{
position:absolute;inset:0;
background:
linear-gradient(90deg,transparent 0,transparent 40%,#D7D3C8 40%,#D7D3C8 42%,transparent 42%),
linear-gradient(0deg,transparent 0,transparent 60%,#D7D3C8 60%,#D7D3C8 62%,transparent 62%);
opacity:.6;
}
.biz-map-actions{display:flex;gap:8px;margin-top:10px;padding:0 6px}
.biz-map-actions a{flex:1;text-align:center;padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.biz-map-actions a:hover{background:var(--bg-soft)}
/* ===================================================================
ГЛАВНОЕ ПРЕДЛОЖЕНИЕ — меню / номера
=================================================================== */
/* категории-чипы внутри меню */
.biz-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.biz-cats .chip{font-size:12.5px}
/* — блюдо ресторана — */
.biz-dishes{display:flex;flex-direction:column;gap:0}
.biz-cat-h{
font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:var(--muted);font-weight:500;padding:14px 0 8px;
}
.biz-cat-h:first-child{padding-top:0}
.biz-dish{
display:grid;grid-template-columns:84px 1fr auto;
gap:14px;align-items:center;
padding:12px 0;border-top:1px solid var(--border-soft);
}
.biz-dish:first-of-type{border-top:0}
.biz-dish .thumb{
width:84px;height:64px;border-radius:10px;flex:none;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
position:relative;overflow:hidden;
}
.biz-dish .thumb.warm{background:linear-gradient(135deg,#E9C9A1,#B7884E)}
.biz-dish .thumb.green{background:linear-gradient(135deg,#CDD6BD,#7E8A6A)}
.biz-dish .thumb.dark{background:linear-gradient(135deg,#3A3833,#0E0E0C)}
.biz-dish .thumb.berry{background:linear-gradient(135deg,#D7A0A8,#874C4C)}
.biz-dish .thumb::after{
content:"";position:absolute;
inset:auto -10% -20% auto;width:120%;height:140%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.32) 0,transparent 60%);
}
.biz-dish .body{display:flex;flex-direction:column;gap:4px;min-width:0}
.biz-dish .nm{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.biz-dish .desc{font-size:12px;color:var(--muted);line-height:1.45}
.biz-dish .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.biz-tag{
display:inline-flex;align-items:center;gap:4px;
font-size:10.5px;padding:2px 7px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-weight:500;
}
.biz-tag.veg{background:#E1E8DD;color:var(--positive)}
.biz-tag.hit{background:var(--ink);color:#fff}
.biz-tag.spicy{background:var(--danger-soft);color:var(--danger)}
.biz-dish .price{
font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;
white-space:nowrap;align-self:center;
}
.biz-dish .price .c{color:var(--muted);font-weight:500;margin-left:2px}
/* — номер отеля — */
.biz-rooms{display:flex;flex-direction:column;gap:14px}
.biz-room{
display:grid;grid-template-columns:140px 1fr;
gap:16px;align-items:stretch;
border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;
background:var(--surface);
}
.biz-room:hover{border-color:#D3CFC6}
.biz-room .thumb{
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);position:relative;
min-height:140px;
}
.biz-room .thumb.dark{background:linear-gradient(135deg,#3A3833,#0E0E0C)}
.biz-room .thumb.forest{background:linear-gradient(135deg,#9DAD8E,#3F5740)}
.biz-room .thumb.warm{background:linear-gradient(135deg,#E2C194,#A3753E)}
.biz-room .thumb::after{
content:"";position:absolute;
inset:auto -10% -20% auto;width:120%;height:140%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),transparent 60%);
}
.biz-room .body{padding:14px 16px 14px 4px;display:flex;flex-direction:column;gap:6px;min-width:0}
.biz-room .nm-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.biz-room .nm{font-size:15px;font-weight:600;letter-spacing:-.01em}
.biz-room .price{text-align:right;font-variant-numeric:tabular-nums}
.biz-room .price .v{font-size:16px;font-weight:600}
.biz-room .price .u{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.biz-room .specs{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--muted)}
.biz-room .specs .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.biz-room .am{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.biz-room .actions{display:flex;gap:8px;margin-top:6px}
/* — чипы удобств (для отеля) — */
.biz-amen{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.biz-amen .it{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:9px;
background:var(--surface-2);border:1px solid var(--border-soft);
font-size:12.5px;color:var(--ink-2);
}
.biz-amen .it .ic{color:var(--muted);flex:none}
.biz-amen .it.off{opacity:.5}
.biz-amen .it.off .ic{color:var(--muted-2)}
/* ---------- ФОТОГАЛЕРЕЯ ---------- */
.biz-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.biz-gallery .ph{
aspect-ratio:1.2/1;border-radius:10px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
position:relative;overflow:hidden;cursor:pointer;
}
.biz-gallery .ph.warm{background:linear-gradient(135deg,#E2BE93,#A77B49)}
.biz-gallery .ph.dark{background:linear-gradient(135deg,#3A3833,#0E0E0C)}
.biz-gallery .ph.berry{background:linear-gradient(135deg,#D7A0A8,#874C4C)}
.biz-gallery .ph.forest{background:linear-gradient(135deg,#9DAD8E,#3F5740)}
.biz-gallery .ph.olive{background:linear-gradient(135deg,#C2BB8A,#6E6A3D)}
.biz-gallery .ph.smoke{background:linear-gradient(135deg,#CFC9BC,#7D7869)}
.biz-gallery .ph::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%);
}
.biz-gallery .ph .more-ov{
position:absolute;inset:0;background:rgba(14,14,12,.55);color:#fff;
display:grid;place-items:center;font-weight:600;font-size:14px;backdrop-filter:blur(2px);
}
/* ---------- ОТЗЫВЫ ---------- */
.biz-rev-sum{
display:flex;align-items:center;gap:14px;
padding:14px 0 12px;border-bottom:1px solid var(--border-soft);margin-bottom:12px;
}
.biz-rev-sum .big{font-size:34px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.biz-rev-sum .stars{color:#D9A407;font-size:14px;letter-spacing:-1px;margin-top:4px}
.biz-rev-sum .cnt{font-size:11.5px;color:var(--muted);margin-top:3px}
.biz-rev-sum .sources{margin-left:auto;display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.biz-rev-sum .sources .src{display:flex;justify-content:space-between;gap:14px}
.biz-rev-sum .sources .src b{color:var(--ink);font-weight:600}
.biz-reviews{display:flex;flex-direction:column;gap:14px}
.biz-review{
padding:14px 0;border-top:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:6px;
}
.biz-review:first-child{border-top:0;padding-top:0}
.biz-review .top{display:flex;align-items:center;gap:10px}
.biz-review .av{
width:34px;height:34px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:12px;font-weight:600;
}
.biz-review .nm{font-weight:600;font-size:13px}
.biz-review .meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.biz-review .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.biz-review .stars{color:#D9A407;font-size:12.5px;letter-spacing:-1px;margin-left:auto}
.biz-review .txt{font-size:13px;color:var(--ink-2);line-height:1.55}
/* ---------- ИТОГОВАЯ CTA ---------- */
.biz-cta{
background:var(--ink);color:#fff;border-radius:var(--radius-l);
padding:20px 22px;position:relative;overflow:hidden;
}
.biz-cta::after{
content:"";position:absolute;inset:0;
background:radial-gradient(360px 200px at 90% 0%,rgba(255,255,255,.12),transparent 70%);
pointer-events:none;
}
.biz-cta > *{position:relative;z-index:1}
.biz-cta h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.biz-cta .sub{color:#C2C0BA;font-size:12.5px;margin-bottom:14px}
.biz-cta .pick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.biz-cta .pick a{
font-size:12px;padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);
}
.biz-cta .pick a.on{background:#fff;color:var(--ink);border-color:transparent}
.biz-cta .fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.biz-cta .fld{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:8px;color:#fff;
}
.biz-cta .fld .lbl{font-size:10.5px;color:#A29F98;text-transform:uppercase;letter-spacing:.06em;display:block}
.biz-cta .fld .v{font-size:13px;font-weight:500}
.biz-cta .btn-primary{background:#fff;color:var(--ink);width:100%;justify-content:center;padding:11px 14px}
.biz-cta .btn-primary:hover{background:#F2F1EC}
.biz-cta .note{font-size:11.5px;color:#A29F98;margin-top:10px;text-align:center}
/* ===================================================================
АДАПТИВНОСТЬ
=================================================================== */
@media (max-width: 1080px){
.biz-grid{grid-template-columns:1fr 1.2fr;}
.biz-col.right{grid-column:1 / -1}
}
@media (max-width: 920px){
.biz-page{padding:18px}
.biz-grid{grid-template-columns:1fr;gap:14px}
.biz-col.right{grid-column:auto}
.biz-cover{height:200px}
.biz-headcard{grid-template-columns:1fr;padding:18px 22px 22px}
.biz-head-r{align-items:flex-start;width:100%}
.biz-head-r .cta{justify-content:flex-start}
.biz-logo{width:64px;height:64px;font-size:26px;margin-top:-36px;border-radius:14px;border-width:3px}
}
@media (max-width: 640px){
.biz-page{padding:12px}
.biz-hero{border-radius:18px}
.biz-cover{height:160px}
.biz-headcard{padding:16px}
.biz-head-l{flex-direction:column;gap:12px}
.biz-head-l .info h1{font-size:24px}
.biz-logo{margin-top:-44px}
.biz-block{padding:16px}
.biz-dish{grid-template-columns:64px 1fr;row-gap:8px}
.biz-dish .thumb{width:64px;height:52px}
.biz-dish .price{grid-column:2 / 3;text-align:left;align-self:start;margin-top:-4px}
.biz-room{grid-template-columns:1fr}
.biz-room .thumb{min-height:140px;aspect-ratio:1.8/1}
.biz-room .body{padding:14px 16px 16px 16px}
.biz-gallery{grid-template-columns:repeat(2,1fr)}
.biz-amen{grid-template-columns:1fr}
.biz-cta .fields{grid-template-columns:1fr}
.biz-head-l .info h1{font-size:22px}
}
@media (max-width: 380px){
.biz-head-l .info h1{font-size:20px}
.biz-rev-sum .big{font-size:28px}
}
/* ===================================================================
BIZ-CARD · FIT — компактная карточка компании на один экран
100vh без скролла, секции спрятаны под табами
=================================================================== */
.biz-fit{
height:100vh;max-height:100vh;
max-width:1320px;margin:0 auto;
padding:14px;
display:flex;flex-direction:column;gap:12px;
overflow:hidden;
}
/* ---------- компактный hero-bar ---------- */
.biz-hero-bar{
flex:none;position:relative;overflow:hidden;
background:var(--surface);border:1px solid var(--border);
border-radius:18px;
display:grid;grid-template-columns:auto 1fr auto;
gap:18px;align-items:center;
padding:12px 18px 12px 14px;
}
.biz-hero-bar::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
background:linear-gradient(180deg,#5C3A24 0%,#0E0E0C 100%);
}
.biz-hero-bar.forest::before{
background:linear-gradient(180deg,#3F5740 0%,#0E0E0C 100%);
}
.biz-hero-bar > *{position:relative;z-index:1}
.biz-hero-bar .logo{
width:48px;height:48px;border-radius:13px;
background:var(--ink);color:#fff;
display:grid;place-items:center;
font-size:22px;font-weight:700;letter-spacing:-.02em;
position:relative;overflow:hidden;flex:none;
margin-left:6px;
}
.biz-hero-bar .logo::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.22),transparent 55%);
}
.biz-hero-bar .info{display:flex;flex-direction:column;gap:3px;min-width:0}
.biz-hero-bar .info .top-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.biz-hero-bar .info h1{
font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.biz-hero-bar .info .sub{
font-size:12.5px;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.biz-hero-bar .info .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.biz-hero-bar .actions{display:flex;align-items:center;gap:10px;flex:none}
.biz-hero-bar .actions .open-now{
display:inline-flex;align-items:center;gap:7px;
background:var(--positive-soft);color:var(--positive);
padding:5px 11px;border-radius:999px;font-size:12px;font-weight:500;
}
.biz-hero-bar .actions .open-now .dot{
width:7px;height:7px;border-radius:50%;background:currentColor;animation:bzpulse 1.6s infinite;
}
/* ---------- 3-колоночная сетка ---------- */
.biz-grid-fit{
flex:1;min-height:0;
display:grid;grid-template-columns:280px 1fr 320px;gap:12px;
}
.biz-col-fit{
display:flex;flex-direction:column;gap:10px;min-height:0;
}
.biz-col-fit.center-card{
background:var(--surface);border:1px solid var(--border);
border-radius:18px;overflow:hidden;
}
/* ---------- табы ---------- */
.biz-tabs{
flex:none;display:flex;gap:0;
border-bottom:1px solid var(--border);
padding:0 12px;
overflow-x:auto;scrollbar-width:none;
}
.biz-tabs::-webkit-scrollbar{display:none}
.biz-tab{
padding:13px 14px 14px;
font-size:13.5px;color:var(--muted);
border-bottom:2px solid transparent;margin-bottom:-1px;
cursor:pointer;display:flex;align-items:center;gap:7px;
white-space:nowrap;font-weight:500;
}
.biz-tab .n{
font-size:11px;color:var(--muted-2);
background:var(--bg-soft);border-radius:999px;padding:1px 7px;
font-weight:500;
}
.biz-tab:hover{color:var(--ink-2)}
.biz-tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.biz-tab.on .n{background:var(--accent-soft);color:var(--ink)}
.biz-panel{
display:none;flex:1;min-height:0;
overflow-y:auto;padding:14px 18px 18px;
}
.biz-panel.on{display:flex;flex-direction:column;gap:14px}
/* ---------- компактные блоки слева ---------- */
.biz-block-c{
background:var(--surface);border:1px solid var(--border);
border-radius:14px;padding:12px 14px;
}
.biz-block-c .ttl{
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.07em;font-weight:500;margin-bottom:8px;
display:flex;align-items:center;gap:6px;
}
.biz-block-c .ttl .ic{color:var(--muted)}
.biz-block-c .ttl .pill{
margin-left:auto;font-size:10.5px;padding:2px 8px;border-radius:999px;
background:var(--positive-soft);color:var(--positive);font-weight:500;letter-spacing:0;text-transform:none;
}
.biz-block-c .ttl .pill.closed{background:var(--danger-soft);color:var(--danger)}
/* график · мини */
.biz-hours-mini .today-row{
display:flex;justify-content:space-between;align-items:baseline;
font-size:13.5px;
}
.biz-hours-mini .today-row b{
font-family:'JetBrains Mono',monospace;font-weight:600;
color:var(--ink);
}
.biz-hours-mini .day{color:var(--ink-2);font-weight:500}
.biz-hours-mini .more-tog{
display:flex;align-items:center;justify-content:space-between;
margin-top:8px;padding-top:8px;
border-top:1px solid var(--border-soft);
font-size:11.5px;color:var(--muted);cursor:pointer;
}
.biz-hours-mini .more-tog:hover{color:var(--ink)}
.biz-hours-mini .all{
display:none;flex-direction:column;gap:4px;
margin-top:8px;font-size:12.5px;
}
.biz-hours-mini.exp .all{display:flex}
.biz-hours-mini .all .r{display:flex;justify-content:space-between;color:var(--ink-2)}
.biz-hours-mini .all .r .t{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
/* контакты · мини */
.biz-contacts-mini{display:flex;flex-direction:column}
.biz-contacts-mini .row{
display:flex;align-items:center;gap:10px;
padding:8px 0;border-bottom:1px solid var(--border-soft);
font-size:12.5px;color:var(--ink-2);
}
.biz-contacts-mini .row:last-child{border-bottom:0}
.biz-contacts-mini .row:first-child{padding-top:0}
.biz-contacts-mini .ic{
width:26px;height:26px;border-radius:7px;
background:var(--bg-soft);display:grid;place-items:center;
color:var(--ink-2);flex:none;
}
.biz-contacts-mini .v{flex:1;min-width:0;line-height:1.3}
.biz-contacts-mini .v b{display:block;font-weight:500;color:var(--ink)}
.biz-contacts-mini .v .sub{font-size:10.5px;color:var(--muted);margin-top:1px}
/* карта · мини */
.biz-map-c{
height:120px;border-radius:10px;
background:repeating-linear-gradient(45deg,#ECEAE3,#ECEAE3 7px,#F4F2EC 7px,#F4F2EC 14px);
position:relative;overflow:hidden;
border:1px solid var(--border-soft);
}
.biz-map-c .roads{
position:absolute;inset:0;
background:
linear-gradient(90deg,transparent 38%,#D7D3C8 38%,#D7D3C8 40%,transparent 40%),
linear-gradient(0deg,transparent 58%,#D7D3C8 58%,#D7D3C8 60%,transparent 60%);
opacity:.6;
}
.biz-map-c .pin{
position:absolute;left:50%;top:50%;
width:22px;height:22px;border-radius:50%;
background:var(--ink);color:#fff;display:grid;place-items:center;
transform:translate(-50%,-100%);
box-shadow:0 6px 12px -4px rgba(0,0,0,.3);
}
.biz-map-c .pin::after{
content:"";position:absolute;width:6px;height:6px;background:var(--ink);
bottom:-3px;left:50%;transform:translateX(-50%) rotate(45deg);
}
.biz-map-c-actions{display:flex;gap:6px;margin-top:8px}
.biz-map-c-actions a{
flex:1;text-align:center;padding:7px 8px;border-radius:8px;
border:1px solid var(--border);background:var(--surface);
font-size:11.5px;color:var(--ink-2);
}
.biz-map-c-actions a:hover{background:var(--bg-soft)}
/* отзывы · превью справа */
.biz-rev-head{
display:flex;align-items:flex-end;gap:14px;
padding-bottom:10px;border-bottom:1px solid var(--border-soft);margin-bottom:10px;
}
.biz-rev-head .big{font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.biz-rev-head .stars-l{color:#D9A407;font-size:13px;letter-spacing:-1px;margin-top:3px}
.biz-rev-head .cnt-l{font-size:11px;color:var(--muted);margin-top:2px}
.biz-rev-head .src{margin-left:auto;display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--muted);text-align:right}
.biz-rev-head .src b{color:var(--ink);font-weight:600}
.biz-rev-mini{
padding:10px 0;border-top:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:4px;
}
.biz-rev-mini:first-of-type{border-top:0;padding-top:0}
.biz-rev-mini .top{display:flex;align-items:center;gap:8px}
.biz-rev-mini .av{
width:24px;height:24px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:10px;font-weight:600;
}
.biz-rev-mini .nm{font-weight:600;font-size:12px}
.biz-rev-mini .meta{font-size:10.5px;color:var(--muted)}
.biz-rev-mini .stars{color:#D9A407;font-size:11px;letter-spacing:-1px;margin-left:auto}
.biz-rev-mini .txt{
font-size:12px;color:var(--ink-2);line-height:1.45;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.biz-rev-mini .more-l{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* компактная CTA-карточка справа */
.biz-cta-c{
background:var(--ink);color:#fff;border-radius:14px;
padding:14px 16px;position:relative;overflow:hidden;
}
.biz-cta-c::after{
content:"";position:absolute;inset:0;
background:radial-gradient(280px 160px at 88% 0%,rgba(255,255,255,.12),transparent 70%);
pointer-events:none;
}
.biz-cta-c > *{position:relative;z-index:1}
.biz-cta-c h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.biz-cta-c .sub{color:#C2C0BA;font-size:11.5px;margin-bottom:10px}
.biz-cta-c .pick{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.biz-cta-c .pick a{
font-size:11px;padding:4px 9px;border-radius:999px;
background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);
}
.biz-cta-c .pick a.on{background:#fff;color:var(--ink);border-color:transparent}
.biz-cta-c .fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.biz-cta-c .fld{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
border-radius:9px;padding:7px 10px;
}
.biz-cta-c .fld .lbl{font-size:9.5px;color:#A29F98;text-transform:uppercase;letter-spacing:.05em;display:block}
.biz-cta-c .fld .v{font-size:12px;font-weight:500}
.biz-cta-c .btn-primary{background:#fff;color:var(--ink);width:100%;justify-content:center;padding:9px 12px;font-size:12.5px}
.biz-cta-c .btn-primary:hover{background:#F2F1EC}
.biz-cta-c .note{font-size:10.5px;color:#A29F98;margin-top:8px;text-align:center}
/* ---------- внутри панели меню — плотный список ---------- */
.biz-panel .biz-cat-h{padding:10px 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.biz-panel .biz-cat-h:first-child{padding-top:0}
.biz-panel .biz-dish{padding:10px 0}
/* ---------- АДАПТИВНОСТЬ ---------- */
@media (max-width: 1180px){
.biz-grid-fit{grid-template-columns:260px 1fr 300px}
.biz-hero-bar .info h1{font-size:20px}
}
@media (max-width: 1000px){
.biz-fit{height:auto;overflow:visible}
.biz-grid-fit{grid-template-columns:1fr 1fr;gap:12px}
.biz-col-fit.left{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.biz-col-fit.center-card{grid-column:1 / -1}
.biz-col-fit.right{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.biz-panel{max-height:560px}
}
@media (max-width: 720px){
.biz-fit{padding:10px;gap:10px}
.biz-hero-bar{grid-template-columns:auto 1fr;gap:12px;padding:12px}
.biz-hero-bar .actions{grid-column:1 / -1;justify-content:space-between;flex-wrap:wrap;gap:8px}
.biz-hero-bar .info h1{font-size:18px;white-space:normal}
.biz-hero-bar .info .sub{white-space:normal}
.biz-grid-fit{grid-template-columns:1fr;gap:10px}
.biz-col-fit.left{grid-template-columns:1fr}
.biz-col-fit.right{grid-template-columns:1fr}
.biz-panel{padding:12px;max-height:none}
.biz-tabs{padding:0 8px}
.biz-tab{padding:11px 10px 12px;font-size:12.5px}
}
/* ===================================================================
BIZ-CARD · варианты + состояние «закрыто»
=================================================================== */
/* акцентные полосы hero-bar для разных типов бизнеса */
.biz-hero-bar.steel::before{background:linear-gradient(180deg,#3A597B 0%,#0E0E0C 100%)}
.biz-hero-bar.amber::before{background:linear-gradient(180deg,#7B5E10 0%,#0E0E0C 100%)}
.biz-hero-bar.slate::before{background:linear-gradient(180deg,#4A4845 0%,#0E0E0C 100%)}
.biz-hero-bar.terra::before{background:linear-gradient(180deg,#5C3A24 0%,#0E0E0C 100%)}
/* ---------- состояние «закрыто сейчас» ---------- */
.biz-hero-bar .actions .open-now.closed{
background:var(--danger-soft);color:var(--danger);
}
.biz-hours-mini.closed .ttl .pill{background:var(--danger-soft);color:var(--danger)}
.biz-hours-mini.closed .today-row .day{color:var(--muted)}
.biz-hours-mini.closed .today-row b{
color:var(--muted-2);text-decoration:line-through;
text-decoration-color:var(--muted-2);text-decoration-thickness:1.5px;
}
.biz-hours-mini .next-open{
margin-top:8px;padding:8px 10px;border-radius:8px;
background:var(--danger-soft);color:var(--danger);
font-size:11.5px;font-weight:500;
display:flex;align-items:center;gap:7px;
}
.biz-hours-mini .next-open .ic{
width:14px;height:14px;border-radius:50%;flex:none;
background:var(--danger);color:#fff;
display:grid;place-items:center;font-size:9px;font-weight:700;
}
.biz-hours-mini.closed .all .r.today b,
.biz-hours-mini.closed .all .r.today span:not(.t){color:var(--danger);font-weight:600}
.biz-hours-mini.closed .all .r.today .t{color:var(--danger);font-weight:600}
/* ---------- категории каталога (плитки) — для торговой ---------- */
.biz-cat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.biz-cat-tile{
display:flex;flex-direction:column;gap:4px;
padding:14px 16px;border:1px solid var(--border);
border-radius:12px;background:var(--surface);
transition:border-color .12s,transform .08s;
}
.biz-cat-tile:hover{border-color:#D3CFC6;transform:translateY(-1px)}
.biz-cat-tile .ic{
width:36px;height:36px;border-radius:10px;
background:var(--bg-soft);display:grid;place-items:center;
color:var(--ink);margin-bottom:6px;
}
.biz-cat-tile .nm{font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.biz-cat-tile .cnt{font-size:11.5px;color:var(--muted)}
.biz-cat-tile .pr{
font-size:12px;color:var(--ink-2);margin-top:8px;
padding-top:8px;border-top:1px solid var(--border-soft);
display:flex;justify-content:space-between;align-items:center;
}
.biz-cat-tile .pr b{font-weight:600;color:var(--ink)}
.biz-cat-tile .pr .arr{color:var(--muted-2)}
.biz-cat-tile:hover .pr .arr{color:var(--ink)}
/* ---------- карточки-действия для УК ---------- */
.biz-act-cards{display:flex;flex-direction:column;gap:8px}
.biz-act-card{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
padding:13px 16px;border-radius:12px;
border:1px solid var(--border);background:var(--surface);
}
.biz-act-card.danger{border-color:var(--danger-soft);background:var(--danger-soft)}
.biz-act-card .ic{
width:40px;height:40px;border-radius:10px;flex:none;
background:var(--bg-soft);display:grid;place-items:center;color:var(--ink);
}
.biz-act-card.danger .ic{background:var(--danger);color:#fff}
.biz-act-card .body{min-width:0}
.biz-act-card .nm{font-weight:600;font-size:14px;letter-spacing:-.01em}
.biz-act-card .sub{font-size:12px;color:var(--muted);margin-top:2px}
.biz-act-card.danger .sub{color:var(--danger)}
.biz-act-card .btn{flex:none;white-space:nowrap}
/* ---------- единая строка-услуга (для производства / стройки / питомника)
фактически это .biz-dish, но без thumb-картинки можно — добавим вариант */
.biz-dish.no-thumb{grid-template-columns:1fr auto}
.biz-dish.no-thumb .thumb{display:none}
/* мелкий стат-блок для производства/стройки (например, в About) */
.biz-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.biz-stat-grid .it{
padding:10px 12px;background:var(--surface-2);border-radius:10px;
border:1px solid var(--border-soft);
}
.biz-stat-grid .it .l{font-size:11px;color:var(--muted)}
.biz-stat-grid .it .v{font-weight:600;font-size:14px;margin-top:2px}
/* акцент для агентства недвижимости */
.biz-hero-bar.indigo::before{background:linear-gradient(180deg,#1F3A5B 0%,#0E0E0C 100%)}
/* ===================================================================
BIZ-CARD · Вакансии
=================================================================== */
.biz-vacs-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:4px 0 12px;border-bottom:1px solid var(--border-soft);margin-bottom:12px;
}
.biz-vacs-head .lab{font-size:13px;color:var(--muted-2);line-height:1.4}
.biz-vacs-head .lab b{display:block;color:var(--ink);font-weight:600;font-size:15px;letter-spacing:-.01em}
.biz-vacs-head .src{
font-size:11px;color:var(--muted);
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:999px;padding:5px 11px;
}
.biz-vacs-head .src b{color:var(--ink);font-weight:600}
.biz-vacs{display:flex;flex-direction:column;gap:8px}
.biz-vac{
display:grid;grid-template-columns:1fr auto;
gap:14px;align-items:flex-start;
padding:14px 16px;border-radius:12px;
border:1px solid var(--border);background:var(--surface);
transition:border-color .12s,transform .08s;
}
.biz-vac:hover{border-color:#D3CFC6;transform:translateY(-1px)}
.biz-vac .body{min-width:0;display:flex;flex-direction:column;gap:5px}
.biz-vac .nm{font-weight:600;font-size:14.5px;letter-spacing:-.01em;line-height:1.3}
.biz-vac .desc{font-size:12.5px;color:var(--muted);line-height:1.5}
.biz-vac .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.biz-vac .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.biz-vac .meta .when{
margin-left:auto;font-size:10.5px;color:var(--muted-2);
font-variant-numeric:tabular-nums;
}
.biz-vac .right{
text-align:right;flex:none;
display:flex;flex-direction:column;align-items:flex-end;gap:8px;justify-self:end;
}
.biz-vac .salary{
font-weight:600;font-size:14px;
font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;
}
.biz-vac .salary .c{color:var(--muted);font-weight:500}
.biz-vac .salary .from{color:var(--muted);font-weight:400;font-size:11.5px;margin-right:2px}
.biz-vac .apply{padding:7px 13px;font-size:12.5px;font-weight:500}
.biz-vac.hot{border-color:#D3CFC6;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.biz-vacs-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:14px;padding:12px 14px;
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;
font-size:12.5px;color:var(--muted);
}
.biz-vacs-foot b{color:var(--ink);font-weight:600}
.biz-vacs-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
/* ===================================================================
MTK — Маршрутно-технологические карты
Используется в:
· delta-mtk-list.html (реестр карт)
· delta-mtk-edit.html (редактор)
· delta-mtk-print.html (печатная форма)
=================================================================== */
/* ---------- общие статусы карты ---------- */
.mtk-st{
display:inline-flex;align-items:center;gap:7px;
padding:5px 11px;border-radius:999px;
font-size:12px;font-weight:500;
background:var(--bg-soft);color:var(--ink-2);
border:1px solid var(--border-soft);
}
.mtk-st .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.mtk-st.draft{background:var(--surface);color:var(--muted)}
.mtk-st.review{background:var(--info-soft);color:var(--info);border-color:transparent}
.mtk-st.review .dot{background:var(--info)}
.mtk-st.active{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.mtk-st.active .dot{background:var(--positive)}
.mtk-st.archive{background:var(--bg-soft);color:var(--muted-2);border-color:transparent}
/* ---------- хлебная компактная цепочка цехов в строке списка ---------- */
.mtk-flow{
display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);
}
.mtk-flow .s{
padding:2px 7px;border-radius:5px;
background:var(--bg-soft);color:var(--ink-2);font-weight:500;
}
.mtk-flow .sep{color:var(--muted-2)}
/* ===================================================================
МАРШРУТ ОПЕРАЦИЙ — таблица + раскрываемые строки
=================================================================== */
.mtk-route{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;overflow:hidden;
}
.mtk-route .head,
.mtk-op .op-row{
display:grid;
grid-template-columns:24px 50px 1fr 150px 86px 86px 56px 32px;
gap:10px;align-items:center;
padding:11px 14px;font-size:13px;
}
.mtk-route .head{
background:var(--surface-2);border-bottom:1px solid var(--border-soft);
font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
color:var(--muted);font-weight:500;
}
.mtk-route .head .num-h{text-align:center}
.mtk-route .head .time-h{text-align:right}
.mtk-route .head .grade-h{text-align:center}
.mtk-op{border-bottom:1px solid var(--border-soft);position:relative;background:var(--surface)}
.mtk-op:last-child{border-bottom:0}
.mtk-op .op-row{cursor:pointer;transition:background .1s}
.mtk-op .op-row:hover{background:var(--surface-2)}
.mtk-op .drag{
color:var(--muted-2);cursor:grab;display:grid;place-items:center;
font-family:'JetBrains Mono',monospace;font-size:13px;
}
.mtk-op .num{
font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink);
font-size:13px;text-align:center;letter-spacing:-.02em;
}
.mtk-op .nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtk-op .nm .t{font-weight:500;color:var(--ink);letter-spacing:-.01em;font-size:13.5px}
.mtk-op .nm .sub{
font-size:11.5px;color:var(--muted);
display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.mtk-op .nm .sub .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.mtk-op .equip{
display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-2);min-width:0;
}
.mtk-op .equip .e{font-weight:500;line-height:1.2;letter-spacing:-.01em}
.mtk-op .equip .o{
font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mtk-op .time{
font-family:'JetBrains Mono',monospace;font-size:13px;
color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;font-weight:500;
}
.mtk-op .time .l{
display:block;font-size:9.5px;color:var(--muted-2);
text-transform:uppercase;letter-spacing:.07em;font-weight:500;
font-family:'Inter',sans-serif;margin-bottom:1px;
}
.mtk-op .grade{
width:30px;height:30px;border-radius:8px;background:var(--bg-soft);
display:grid;place-items:center;justify-self:center;
font-weight:700;font-size:13px;color:var(--ink);
font-family:'JetBrains Mono',monospace;
}
.mtk-op .menu{
color:var(--muted-2);display:grid;place-items:center;cursor:pointer;
width:24px;height:24px;border-radius:6px;
}
.mtk-op .menu:hover{color:var(--ink);background:var(--bg-soft)}
/* — чип типа операции — */
.mtk-stage{
display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;font-weight:600;
padding:2px 8px;border-radius:6px;
background:var(--bg-soft);color:var(--ink-2);
text-transform:uppercase;letter-spacing:.04em;flex:none;
}
.mtk-stage.zag{background:#E2E5DD;color:#3F5A2E} /* заготовительная */
.mtk-stage.gib{background:#DDE3EA;color:#3A597B} /* гибочная */
.mtk-stage.svar{background:#F1E7C3;color:#7B5E10} /* сварочная */
.mtk-stage.term{background:#EBD6CE;color:#8C3325} /* термическая */
.mtk-stage.sles{background:#E1DED7;color:#5B5851} /* слесарная / зачистка */
.mtk-stage.okra{background:#DAD6CC;color:#0E0E0C} /* окрасочная */
.mtk-stage.kont{background:#0E0E0C;color:#fff} /* контрольная (ОТК) */
.mtk-stage.upak{background:#E1E8DD;color:#406B49} /* упаковочная */
.mtk-stage.tok{background:#DDE3EA;color:#3A597B} /* токарная */
.mtk-stage.fres{background:#DDE3EA;color:#3A597B} /* фрезерная */
/* — расширенная inline-форма редактирования операции — */
.mtk-op.exp{background:var(--surface-2)}
.mtk-op.exp .op-row{background:var(--accent-soft)}
.mtk-op .op-edit{
display:none;
padding:18px 22px 18px 88px;
background:var(--surface);border-top:1px dashed var(--border);
}
.mtk-op.exp .op-edit{display:block}
.mtk-op .op-edit .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 18px}
.mtk-op .op-edit .grid.cols-2{grid-template-columns:1fr 1fr}
.mtk-op .op-edit .field label{
font-size:11px;color:var(--muted);font-weight:500;
display:flex;align-items:center;gap:5px;margin-bottom:5px;
}
.mtk-op .op-edit .field label .req{color:var(--danger)}
.mtk-op .op-edit .input,
.mtk-op .op-edit .textarea,
.mtk-op .op-edit .select{
width:100%;background:var(--surface-2);border:1px solid var(--border);
border-radius:9px;padding:9px 11px;font-size:13px;
color:var(--ink);outline:0;font-family:inherit;
}
.mtk-op .op-edit .input:focus,
.mtk-op .op-edit .select:focus{border-color:var(--ink);background:#fff}
.mtk-op .op-edit .textarea{min-height:64px;resize:vertical}
.mtk-op .op-edit .row-grid{display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:10px}
.mtk-op .op-edit .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mtk-op .op-edit .helper{font-size:11px;color:var(--muted);margin-top:5px}
.mtk-op .op-edit .tool-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mtk-op .op-edit .tool-chips .tc{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;background:var(--bg-soft);border-radius:999px;font-size:11.5px;
}
.mtk-op .op-edit .tool-chips .tc .x{color:var(--muted-2);cursor:pointer}
.mtk-op .op-edit .tool-chips .add{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border:1px dashed var(--border);border-radius:999px;
font-size:11.5px;color:var(--muted);cursor:pointer;
}
.mtk-op .op-edit .actions{
display:flex;align-items:center;gap:8px;margin-top:16px;
padding-top:14px;border-top:1px solid var(--border-soft);
}
.mtk-op .op-edit .actions .btn-link{color:var(--danger);text-decoration:none;padding:9px 8px}
.mtk-op .op-edit .actions .grow{flex:1}
/* — кнопка добавить операцию — */
.mtk-add-op{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:13px 14px;margin-top:10px;
background:var(--surface);border:1px dashed var(--border);
border-radius:12px;font-size:13px;color:var(--muted);cursor:pointer;
font-weight:500;
}
.mtk-add-op:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
/* — итоговая полоса по маршруту — */
.mtk-route-foot{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:14px 16px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
font-size:12.5px;color:var(--muted);
}
.mtk-route-foot .stat b{
color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
font-family:'JetBrains Mono',monospace;font-size:13.5px;
}
.mtk-route-foot .stat{display:flex;align-items:baseline;gap:6px}
/* ===================================================================
МАТЕРИАЛЫ И НОРМЫ
=================================================================== */
.mtk-mat{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;overflow:hidden;
}
.mtk-mat .h,
.mtk-mat .r{
display:grid;grid-template-columns:1fr 96px 110px 110px 32px;
gap:12px;align-items:center;
padding:11px 14px;font-size:13px;
}
.mtk-mat .h{
background:var(--surface-2);border-bottom:1px solid var(--border-soft);
font-size:10.5px;color:var(--muted);text-transform:uppercase;
letter-spacing:.07em;font-weight:500;
}
.mtk-mat .r{border-bottom:1px solid var(--border-soft)}
.mtk-mat .r:last-child{border-bottom:0}
.mtk-mat .r:hover{background:var(--surface-2)}
.mtk-mat .nm{font-weight:500;color:var(--ink);letter-spacing:-.01em}
.mtk-mat .nm .sku{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.mtk-mat .num{
font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
text-align:right;font-weight:500;
}
.mtk-mat .num .u{color:var(--muted);font-weight:400;font-size:11px;margin-left:2px}
/* ===================================================================
ФАЙЛЫ И ЭСКИЗЫ
=================================================================== */
.mtk-files{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mtk-file{
display:flex;flex-direction:column;gap:8px;
padding:12px;border:1px solid var(--border-soft);border-radius:12px;
background:var(--surface);
}
.mtk-file:hover{border-color:#D3CFC6}
.mtk-file .pic{
aspect-ratio:1.5/1;border-radius:8px;
background:repeating-linear-gradient(45deg,#ECEAE3,#ECEAE3 6px,#F4F2EC 6px,#F4F2EC 12px);
position:relative;overflow:hidden;
}
.mtk-file .pic .badge{
position:absolute;top:7px;left:7px;
font-size:10px;font-weight:500;color:var(--muted);
background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 7px;
}
.mtk-file .pic .ico{
position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-2);
}
.mtk-file .nm{font-weight:500;font-size:13px;letter-spacing:-.01em;line-height:1.3}
.mtk-file .meta{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.mtk-file .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.mtk-file.up{
border-style:dashed;align-items:center;justify-content:center;
text-align:center;cursor:pointer;min-height:160px;color:var(--muted);
}
.mtk-file.up:hover{color:var(--ink);border-color:var(--ink);background:var(--surface-2)}
.mtk-file.up .ico-big{
width:38px;height:38px;border-radius:50%;background:var(--bg-soft);
display:grid;place-items:center;margin-bottom:6px;
}
/* ===================================================================
СОГЛАСОВАНИЯ (ленточка подписей)
=================================================================== */
.mtk-approvals{
display:flex;flex-direction:column;gap:0;
}
.mtk-appr{
display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;
padding:12px 0;border-bottom:1px solid var(--border-soft);
}
.mtk-appr:last-child{border-bottom:0}
.mtk-appr .ico{
width:30px;height:30px;border-radius:50%;flex:none;
background:var(--bg-soft);display:grid;place-items:center;
color:var(--muted-2);
}
.mtk-appr.done .ico{background:var(--positive);color:#fff}
.mtk-appr.wait .ico{background:var(--info-soft);color:var(--info)}
.mtk-appr.pending .ico{background:var(--bg-soft);color:var(--muted-2)}
.mtk-appr .role{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500;margin-bottom:2px}
.mtk-appr .nm{font-size:13px;font-weight:500;color:var(--ink)}
.mtk-appr .when{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.mtk-appr.done .when{color:var(--positive);font-weight:500}
.mtk-appr.wait .when{color:var(--info);font-weight:500}
/* ===================================================================
ПЕЧАТНАЯ ВЕРСИЯ
=================================================================== */
.mtk-print-bar{
background:var(--surface);border-bottom:1px solid var(--border);
padding:12px 24px;display:flex;align-items:center;gap:14px;
position:sticky;top:0;z-index:10;
}
.mtk-print-bar .info{flex:1;font-size:12.5px;color:var(--muted)}
.mtk-print-bar .info b{color:var(--ink);font-weight:600}
.mtk-print-bar .actions{display:flex;gap:8px;flex:none}
.mtk-print-page{
max-width:1080px;margin:24px auto;padding:32px 40px;
background:#fff;border:1px solid var(--border);border-radius:6px;
box-shadow:0 30px 60px -30px rgba(14,14,12,.18);
color:var(--ink);
}
.mtk-print-title{
text-align:center;margin-bottom:18px;
}
.mtk-print-title h1{
font-size:14px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;margin:0 0 4px;
}
.mtk-print-title .sub{font-size:11.5px;color:var(--muted)}
.mtk-print-head{
border:2px solid var(--ink);display:flex;flex-direction:column;
}
.mtk-print-head .row{display:grid;border-bottom:1px solid var(--ink-2)}
.mtk-print-head .row:last-child{border-bottom:0}
.mtk-print-head .row.r4{grid-template-columns:1fr 1fr 1fr 1fr}
.mtk-print-head .row.r2{grid-template-columns:1fr 1fr}
.mtk-print-head .row.r1{grid-template-columns:1fr}
.mtk-print-head .c{
padding:8px 12px;border-right:1px solid var(--ink-2);
font-size:12px;line-height:1.35;
}
.mtk-print-head .c:last-child{border-right:0}
.mtk-print-head .c .l{
display:block;font-size:9.5px;color:var(--muted);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;
}
.mtk-print-head .c .v{font-weight:600;color:var(--ink);font-size:12.5px}
.mtk-print-head .c .v.mono{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11.5px}
.mtk-print-route{border:2px solid var(--ink);border-top:0}
.mtk-print-route table{width:100%;border-collapse:collapse}
.mtk-print-route thead th{
background:var(--bg-soft);font-size:10px;text-transform:uppercase;
letter-spacing:.05em;font-weight:700;color:var(--ink);
padding:7px 8px;text-align:left;border-bottom:1px solid var(--ink-2);
border-right:1px solid var(--ink-2);
}
.mtk-print-route thead th:last-child{border-right:0}
.mtk-print-route tbody td{
padding:8px 8px;font-size:11.5px;border-bottom:1px solid var(--border);
border-right:1px solid var(--ink-2);vertical-align:top;line-height:1.4;
}
.mtk-print-route tbody td:last-child{border-right:0}
.mtk-print-route tbody tr:last-child td{border-bottom:0}
.mtk-print-route .opnum{
font-family:'JetBrains Mono',monospace;font-weight:600;
text-align:center;width:46px;
}
.mtk-print-route .grade{
text-align:center;font-family:'JetBrains Mono',monospace;
width:54px;font-weight:600;
}
.mtk-print-route .time{
text-align:right;font-family:'JetBrains Mono',monospace;
width:70px;font-variant-numeric:tabular-nums;
}
.mtk-print-route .opname{font-weight:600}
.mtk-print-route .opname .sub{display:block;font-weight:400;color:var(--muted);font-size:10.5px;margin-top:2px}
.mtk-print-route tfoot td{
background:var(--bg-soft);font-weight:600;
padding:8px;border-top:1px solid var(--ink-2);
font-size:11px;text-transform:uppercase;letter-spacing:.04em;
}
.mtk-print-foot{
display:grid;grid-template-columns:repeat(4,1fr);
border:2px solid var(--ink);border-top:0;
}
.mtk-print-foot .sig{
padding:14px 12px;border-right:1px solid var(--ink-2);font-size:11px;
}
.mtk-print-foot .sig:last-child{border-right:0}
.mtk-print-foot .sig .role{
font-weight:600;color:var(--ink);font-size:10.5px;text-transform:uppercase;
letter-spacing:.05em;margin-bottom:22px;
}
.mtk-print-foot .sig .nm{font-size:11.5px;color:var(--ink);font-weight:500}
.mtk-print-foot .sig .date{
font-family:'JetBrains Mono',monospace;font-size:10.5px;
color:var(--muted);margin-top:2px;
}
.mtk-print-foot .sig .stamp{
font-size:10px;color:var(--positive);font-weight:600;
margin-top:4px;display:inline-flex;align-items:center;gap:4px;
}
.mtk-print-meta{
display:flex;align-items:center;justify-content:space-between;
margin-top:14px;font-size:10.5px;color:var(--muted);
font-family:'JetBrains Mono',monospace;
}
@media print{
body{background:#fff !important}
.mtk-print-bar,.sidebar,.topbar,.save-bar{display:none !important}
.mtk-print-page{
margin:0;padding:0;max-width:none;
border:0;box-shadow:none;
}
.app-page{display:block !important}
}
/* ===================================================================
PROPERTY — Имущество (ОС, инвентаризация, операции)
=================================================================== */
/* состояния единицы имущества */
.prop-st{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:500;
background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--border-soft);
}
.prop-st .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2)}
.prop-st.active{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.prop-st.active .dot{background:var(--positive)}
.prop-st.repair{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.prop-st.repair .dot{background:#D9A407}
.prop-st.cons{background:var(--info-soft);color:var(--info);border-color:transparent}
.prop-st.cons .dot{background:var(--info)}
.prop-st.writeoff{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.prop-st.writeoff .dot{background:var(--danger)}
.prop-st.archive{background:var(--bg-soft);color:var(--muted-2)}
/* категории-«тип имущества» как chip с иконкой */
.prop-cat{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;font-weight:500;
padding:3px 9px;border-radius:6px;
background:var(--bg-soft);color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;
}
.prop-cat.build{background:#DAD6CC;color:#0E0E0C}
.prop-cat.equip{background:#DDE3EA;color:#3A597B}
.prop-cat.auto{background:#F1E7C3;color:#7B5E10}
.prop-cat.it{background:#E2E5DD;color:#3F5A2E}
.prop-cat.inv{background:#E1DED7;color:#5B5851}
.prop-cat.tool{background:#EBD6CE;color:#8C3325}
/* инв.№ */
.prop-inv{
display:inline-flex;align-items:center;gap:5px;
font-family:'JetBrains Mono',monospace;font-weight:600;
background:var(--bg-soft);border:1px solid var(--border-soft);
border-radius:7px;padding:3px 8px;font-size:12px;color:var(--ink);
}
/* амортизация — мини-бар */
.prop-amort{display:flex;align-items:center;gap:10px;min-width:160px}
.prop-amort .track{
flex:1;height:6px;border-radius:999px;
background:var(--bg-soft);overflow:hidden;position:relative;
}
.prop-amort .bar{display:block;height:100%;background:var(--ink);border-radius:999px}
.prop-amort .bar.ok{background:var(--positive)}
.prop-amort .bar.warn{background:#D9A407}
.prop-amort .bar.red{background:var(--danger)}
.prop-amort .pct{
font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
width:38px;text-align:right;
}
/* большая визуализация амортизации */
.prop-amort-big{
display:flex;flex-direction:column;gap:8px;
padding:14px 16px;background:var(--surface-2);
border:1px solid var(--border-soft);border-radius:12px;
}
.prop-amort-big .h{display:flex;justify-content:space-between;align-items:baseline}
.prop-amort-big .h .nm{font-size:13px;font-weight:500;color:var(--ink)}
.prop-amort-big .h .pct{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600}
.prop-amort-big .track{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden;position:relative}
.prop-amort-big .bar{display:block;height:100%;background:var(--ink);border-radius:999px}
.prop-amort-big .legend{
display:flex;justify-content:space-between;font-size:11px;color:var(--muted);
font-variant-numeric:tabular-nums;
}
.prop-amort-big .legend b{color:var(--ink);font-weight:600}
/* фото-плитка имущества */
.prop-photo{
aspect-ratio:1.5/1;border-radius:12px;
background:linear-gradient(135deg,#3A3833,#0E0E0C);
position:relative;overflow:hidden;
}
.prop-photo.warm{background:linear-gradient(135deg,#A77B49,#5C3A24)}
.prop-photo.steel{background:linear-gradient(135deg,#5A7395,#1F3A5B)}
.prop-photo.olive{background:linear-gradient(135deg,#9BA67E,#3F5A2E)}
.prop-photo::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 60%);
}
/* мини-таблица истории / характеристик */
.prop-kv{
display:grid;grid-template-columns:auto 1fr;gap:8px 14px;
font-size:13px;
}
.prop-kv .k{color:var(--muted);font-size:12px}
.prop-kv .v{color:var(--ink);font-weight:500;text-align:right}
.prop-kv .v.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
/* инвентаризация — карточка цикла */
.prop-inv-cycle{
display:grid;grid-template-columns:auto 1fr auto auto;
gap:14px;align-items:center;
padding:14px 16px;background:var(--surface);
border:1px solid var(--border-soft);border-radius:12px;
}
.prop-inv-cycle .ic{
width:42px;height:42px;border-radius:11px;
background:var(--bg-soft);display:grid;place-items:center;color:var(--ink);
}
.prop-inv-cycle.active .ic{background:var(--info-soft);color:var(--info)}
.prop-inv-cycle.done .ic{background:var(--positive-soft);color:var(--positive)}
.prop-inv-cycle .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.prop-inv-cycle .sub{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
.prop-inv-cycle .sub .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.prop-inv-cycle .progr{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:130px}
.prop-inv-cycle .progr .lbl{font-size:11px;color:var(--muted)}
.prop-inv-cycle .progr .num{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.prop-inv-cycle .progr .track{width:130px;height:5px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.prop-inv-cycle .progr .bar{display:block;height:100%;background:var(--ink);border-radius:999px}
.prop-inv-cycle .progr .bar.ok{background:var(--positive)}
/* ===================================================================
RESOURCES — Ресурсы (загрузка, гантт занятости)
=================================================================== */
/* типы ресурсов — цветной маркер */
.res-type{
display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
padding:2px 8px;border-radius:5px;
background:var(--bg-soft);color:var(--ink-2);
}
.res-type.equip{background:#DDE3EA;color:#3A597B}
.res-type.human{background:#E2E5DD;color:#3F5A2E}
.res-type.auto{background:#F1E7C3;color:#7B5E10}
.res-type.it{background:#0E0E0C;color:#fff}
.res-type.space{background:#DAD6CC;color:#0E0E0C}
/* большая полоса утилизации (для дашборда / карточки) */
.res-util{
display:flex;flex-direction:column;gap:8px;
padding:14px 16px;background:var(--surface);
border:1px solid var(--border-soft);border-radius:12px;
}
.res-util .h{display:flex;justify-content:space-between;align-items:baseline}
.res-util .h .nm{font-size:13px;font-weight:600;color:var(--ink)}
.res-util .h .pct{
font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.res-util .h .pct.warn{color:#D9A407}
.res-util .h .pct.red{color:var(--danger)}
.res-util .h .pct.ok{color:var(--positive)}
.res-util .track{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden;position:relative}
.res-util .bar{display:block;height:100%;background:var(--ink);border-radius:999px}
.res-util .bar.ok{background:var(--positive)}
.res-util .bar.warn{background:#D9A407}
.res-util .bar.red{background:var(--danger)}
.res-util .meta{font-size:11px;color:var(--muted);display:flex;gap:10px}
.res-util .meta b{color:var(--ink);font-weight:600}
/* строка ресурса в реестре с инлайн-загрузкой */
.res-row-load{display:flex;align-items:center;gap:10px;min-width:180px}
.res-row-load .track{flex:1;height:6px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.res-row-load .bar{display:block;height:100%;background:var(--ink);border-radius:999px}
.res-row-load .bar.warn{background:#D9A407}
.res-row-load .bar.red{background:var(--danger)}
.res-row-load .bar.ok{background:var(--positive)}
.res-row-load .pct{
font-size:11.5px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
font-family:'JetBrains Mono',monospace;width:36px;text-align:right;
}
/* статус доступности ресурса */
.res-av{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:500;
}
.res-av.free{background:var(--positive-soft);color:var(--positive)}
.res-av.busy{background:var(--warn-soft);color:var(--warn)}
.res-av.full{background:var(--danger-soft);color:var(--danger)}
.res-av.off{background:var(--bg-soft);color:var(--muted-2)}
.res-av .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* GANTT-ВИД РАСПИСАНИЯ
layout: левая колонка с ресурсом + 7-дневная сетка задач */
.res-gantt{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.res-gantt-head,
.res-gantt-row{
display:grid;
grid-template-columns:220px repeat(7,1fr);
}
.res-gantt-head{
background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500;
}
.res-gantt-head .lbl{padding:12px 14px}
.res-gantt-head .day{
padding:12px 8px;text-align:center;border-left:1px solid var(--border-soft);
}
.res-gantt-head .day b{display:block;color:var(--ink);font-weight:600;font-size:12px;text-transform:none;letter-spacing:0;margin-top:2px;font-family:'JetBrains Mono',monospace}
.res-gantt-head .day.today{background:var(--bg-soft);color:var(--ink)}
.res-gantt-head .day.weekend{color:var(--muted-2)}
.res-gantt-row{
border-top:1px solid var(--border-soft);
min-height:60px;align-items:stretch;
}
.res-gantt-row:hover{background:var(--surface-2)}
.res-gantt-row .row-lbl{
padding:12px 14px;display:flex;flex-direction:column;gap:3px;
border-right:1px solid var(--border-soft);
}
.res-gantt-row .row-lbl .nm{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.res-gantt-row .row-lbl .sub{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.res-gantt-row .row-lbl .sub .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.res-gantt-row .cells{
grid-column:2 / -1;position:relative;
display:grid;grid-template-columns:repeat(7,1fr);
}
.res-gantt-row .cell{
border-left:1px solid var(--border-soft);
position:relative;
}
.res-gantt-row .cell.today{background:rgba(218,214,204,.18)}
.res-gantt-row .cell.weekend{background:var(--surface-2)}
.res-task{
position:absolute;top:8px;bottom:8px;
background:var(--ink);color:#fff;
border-radius:7px;padding:5px 9px;font-size:11.5px;font-weight:500;
display:flex;flex-direction:column;justify-content:center;gap:1px;
overflow:hidden;cursor:pointer;
}
.res-task .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-task .s{font-size:10px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-task.ok{background:var(--positive);color:#fff}
.res-task.warn{background:#D9A407;color:#fff}
.res-task.red{background:var(--danger);color:#fff}
.res-task.soft{background:var(--accent-soft);color:var(--ink)}
.res-task.dashed{background:transparent;color:var(--muted);border:1.5px dashed var(--border)}
.res-gantt-foot{
display:flex;align-items:center;gap:16px;
padding:12px 14px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
font-size:11.5px;color:var(--muted);flex-wrap:wrap;
}
.res-gantt-foot .lg{display:flex;align-items:center;gap:6px}
.res-gantt-foot .lg .sw{width:12px;height:12px;border-radius:3px}
.res-gantt-foot .lg .sw.ok{background:var(--positive)}
.res-gantt-foot .lg .sw.warn{background:#D9A407}
.res-gantt-foot .lg .sw.red{background:var(--danger)}
.res-gantt-foot .lg .sw.soft{background:var(--accent-soft)}
.res-gantt-foot .lg .sw.dashed{background:transparent;border:1.5px dashed var(--border)}
/* мини-расписание в карточке ресурса (7-дневный таймлайн без вертикального grid) */
.res-week{
display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.res-week .d{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:8px;padding:10px 8px;text-align:center;
display:flex;flex-direction:column;gap:6px;
}
.res-week .d.today{background:var(--bg-soft);border-color:var(--ink)}
.res-week .d .day{font-size:10px;color:var(--muted);text-transform:uppercase}
.res-week .d .date{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px}
.res-week .d .load{font-size:10.5px;color:var(--muted-2)}
.res-week .d.busy .load{color:var(--warn)}
.res-week .d.full .load{color:var(--danger)}
.res-week .d.free .load{color:var(--positive)}
.res-week .d .mini{
height:4px;border-radius:999px;background:var(--bg-soft);overflow:hidden;
}
.res-week .d .mini i{display:block;height:100%;background:var(--ink);border-radius:999px}
.res-week .d .mini i.ok{background:var(--positive)}
.res-week .d .mini i.warn{background:#D9A407}
.res-week .d .mini i.red{background:var(--danger)}
/* ===================================================================
TOPNAV — Альтернативная навигация (без левого сайдбара)
=================================================================== */
.topnav{
background:var(--surface);border-bottom:1px solid var(--border);
position:sticky;top:0;z-index:20;
}
.topnav .inner{
max-width:1440px;margin:0 auto;padding:11px 24px;
display:flex;align-items:center;gap:14px;
}
.topnav .brand{display:flex;align-items:center;gap:10px;flex:none}
.topnav .brand .mark{
width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:14px;
}
.topnav .brand .nm{font-weight:600;font-size:14px;letter-spacing:-.01em}
.topnav .brand .nm span{color:var(--muted);font-weight:400}
.topnav .org{
display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
font-size:12.5px;flex:none;
}
.topnav .org .badge{
width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:10.5px;font-weight:600;
}
.topnav .org .chev{color:var(--muted-2)}
.topnav-tabs{
display:flex;align-items:center;gap:3px;flex:1;justify-content:center;
flex-wrap:wrap;
}
.topnav-tab{
position:relative;
display:inline-flex;align-items:center;gap:7px;
padding:8px 13px;border-radius:999px;
font-size:13px;font-weight:500;color:var(--ink-2);
cursor:pointer;white-space:nowrap;
}
.topnav-tab:hover{background:var(--bg-soft)}
.topnav-tab.on{background:var(--ink);color:#fff}
.topnav-tab .ico{width:14px;height:14px;color:currentColor;flex:none}
.topnav-tab .caret{margin-left:1px;opacity:.55}
.topnav-tab .badge{
font-size:10.5px;padding:1px 7px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-weight:500;
}
.topnav-tab.on .badge{background:rgba(255,255,255,.16);color:#fff}
.topnav-actions{display:flex;align-items:center;gap:8px;flex:none}
.topnav-actions .search{
display:flex;align-items:center;gap:7px;padding:7px 11px;
background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
font-size:12.5px;color:var(--muted);width:230px;
}
.topnav-actions .search input{border:0;background:transparent;outline:0;font-size:12.5px;flex:1;font-family:inherit}
.topnav-actions .user{
display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
border:1px solid var(--border);border-radius:999px;font-size:12.5px;
}
.topnav-actions .user .av{
width:26px;height:26px;border-radius:50%;background:#3A3833;color:#fff;
display:grid;place-items:center;font-size:10.5px;font-weight:600;
}
/* выпадающее меню под табом */
.topnav-drop{
position:absolute;top:calc(100% + 8px);left:50%;
min-width:240px;background:var(--surface);
border:1px solid var(--border);border-radius:12px;
box-shadow:0 24px 48px -16px rgba(14,14,12,.18),0 4px 8px rgba(14,14,12,.04);
padding:6px;
opacity:0;visibility:hidden;
transform:translateX(-50%) translateY(-4px);
transition:opacity .14s,transform .14s,visibility .14s;
z-index:30;
}
.topnav-tab:hover .topnav-drop,
.topnav-tab.open .topnav-drop{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.topnav-drop a{
display:flex;align-items:center;gap:10px;
padding:9px 11px;border-radius:8px;
font-size:13px;color:var(--ink-2);font-weight:500;
}
.topnav-drop a:hover{background:var(--bg-soft)}
.topnav-drop a.active{background:var(--accent-soft);color:var(--ink)}
.topnav-drop a .ic{width:14px;height:14px;color:var(--muted);flex:none}
.topnav-drop a.active .ic{color:var(--ink)}
.topnav-drop a .badge{
margin-left:auto;font-size:11px;color:var(--muted);
background:var(--bg-soft);padding:1px 7px;border-radius:999px;
}
.topnav-drop .sep{height:1px;background:var(--border-soft);margin:6px 0}
.topnav-drop .lbl{
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.06em;padding:9px 11px 4px;font-weight:500;
}
/* вторая строка под топбаром: подразделы (если есть) */
.topnav-sub{
background:var(--surface);border-bottom:1px solid var(--border);
}
.topnav-sub .inner{
max-width:1440px;margin:0 auto;padding:0 24px;
display:flex;align-items:center;gap:0;
}
.topnav-sub a{
padding:12px 14px 13px;font-size:13px;color:var(--muted);
border-bottom:2px solid transparent;margin-bottom:-1px;
display:inline-flex;align-items:center;gap:6px;font-weight:500;
}
.topnav-sub a:hover{color:var(--ink-2)}
.topnav-sub a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.topnav-sub a .badge{
font-size:10.5px;padding:1px 7px;border-radius:999px;
background:var(--bg-soft);color:var(--muted);font-weight:500;
}
.topnav-sub a.on .badge{background:var(--accent-soft);color:var(--ink)}
.topnav-sub .right{margin-left:auto;display:flex;gap:6px;align-items:center;padding:8px 0}
/* контейнер на полную ширину */
.page-fullwidth{
max-width:1440px;margin:0 auto;padding:18px 24px 32px;
}
/* ===================================================================
Превью альтернативных стилей навигации
=================================================================== */
.nav-variants{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.nav-variant{
border:1px solid var(--border);border-radius:14px;
background:var(--surface);overflow:hidden;
display:flex;flex-direction:column;
}
.nav-variant .v-h{
padding:12px 14px;display:flex;align-items:center;gap:10px;
border-bottom:1px solid var(--border-soft);
}
.nav-variant .v-h .nm{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.nav-variant .v-h .tag{
font-size:10.5px;padding:2px 8px;border-radius:5px;
background:var(--bg-soft);color:var(--muted);font-weight:500;
}
.nav-variant .v-h .tag.live{background:var(--positive-soft);color:var(--positive)}
.nav-variant .v-prev{
padding:18px;background:var(--bg);
flex:1;display:flex;flex-direction:column;gap:8px;
border-bottom:1px solid var(--border-soft);
}
.nav-variant .v-desc{
padding:11px 14px 13px;font-size:11.5px;color:var(--muted);line-height:1.55;
}
.nav-variant .v-desc b{color:var(--ink);font-weight:600}
.nav-variant .v-desc ul{margin:6px 0 0 0;padding-left:14px;display:flex;flex-direction:column;gap:3px}
.nav-variant .v-desc li{padding-left:2px}
/* мини-элементы в превью */
.mp-bar{
display:flex;align-items:center;gap:6px;padding:7px 9px;
background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;
font-size:10px;
}
.mp-bar .mark{
width:16px;height:16px;border-radius:5px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:9px;font-weight:700;
}
.mp-bar .tabs{display:flex;gap:3px;flex:1}
.mp-bar .av{width:14px;height:14px;border-radius:50%;background:#3A3833;flex:none}
.mp-pill{
font-size:9.5px;padding:2px 7px;border-radius:999px;
background:transparent;color:var(--muted);font-weight:500;
}
.mp-pill.on{background:var(--ink);color:#fff}
.mp-pill.hover{background:var(--bg-soft);color:var(--ink-2)}
.mp-under{
font-size:9.5px;padding:3px 4px 4px;font-weight:500;
color:var(--muted);border-bottom:2px solid transparent;
}
.mp-under.on{color:var(--ink);border-bottom-color:var(--ink)}
.mp-seg{
display:inline-flex;background:var(--surface-2);
border:1px solid var(--border);border-radius:8px;padding:2px;gap:1px;
}
.mp-seg .s{
font-size:9.5px;padding:3px 8px;border-radius:6px;color:var(--ink-2);
}
.mp-seg .s.on{background:var(--ink);color:#fff}
.mp-side{display:grid;grid-template-columns:36px 1fr;gap:6px}
.mp-side .col{
background:var(--surface);border:1px solid var(--border-soft);border-radius:6px;
display:flex;flex-direction:column;gap:3px;padding:5px 3px;
}
.mp-side .col i{
display:block;height:5px;border-radius:2px;
background:var(--bg-soft);
}
.mp-side .col i.on{background:var(--ink)}
.mp-body{
background:var(--surface);border:1px solid var(--border-soft);border-radius:6px;
padding:6px;display:flex;flex-direction:column;gap:4px;min-height:40px;
}
.mp-body i{height:5px;border-radius:2px;background:var(--bg-soft)}
.mp-body i:nth-child(1){width:60%}
.mp-body i:nth-child(2){width:40%}
.mp-row2{display:flex;gap:6px}
.mp-tabsline{
background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;
padding:5px 9px;display:flex;gap:8px;align-items:center;
}
.mp-tabsline.compact{padding:4px 8px;gap:6px}
/* ===================================================================
CFG — Модалка комплектации товара + отображение в корзине
=================================================================== */
/* модальный фон */
.modal-bg{
position:fixed;inset:0;z-index:100;
background:rgba(14,14,12,.55);
display:flex;align-items:center;justify-content:center;
padding:24px;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.modal-bg.demo{position:absolute;align-items:flex-start;padding:80px 24px 24px}
.modal{
background:var(--surface);border-radius:var(--radius-xl);
width:720px;max-width:100%;max-height:calc(100vh - 48px);
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 40px 80px -20px rgba(14,14,12,.5),0 8px 16px rgba(14,14,12,.1);
}
.modal-head{
display:grid;grid-template-columns:88px 1fr auto;
gap:18px;align-items:center;
padding:18px 22px;border-bottom:1px solid var(--border-soft);
}
.modal-head .thumb{
width:88px;height:88px;border-radius:14px;
background:linear-gradient(135deg,#3A3833,#0E0E0C);
position:relative;overflow:hidden;
}
.modal-head .thumb::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.22),transparent 60%);
}
.modal-head .info{display:flex;flex-direction:column;gap:3px;min-width:0}
.modal-head .info .brand{
font-size:11px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;font-weight:500;
}
.modal-head .info h2{
font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.2;
}
.modal-head .info .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.modal-head .info .pr{
font-size:14px;font-weight:600;color:var(--ink);margin-top:6px;
font-variant-numeric:tabular-nums;
}
.modal-head .info .pr .lbl{color:var(--muted);font-weight:500;font-size:11.5px;margin-right:4px}
.modal-head .close{
width:34px;height:34px;border-radius:50%;
background:var(--bg-soft);display:grid;place-items:center;
cursor:pointer;color:var(--ink-2);
}
.modal-head .close:hover{background:var(--accent-soft);color:var(--ink)}
.modal-body{
padding:20px 22px;overflow-y:auto;flex:1;
display:flex;flex-direction:column;gap:22px;
}
.modal-foot{
padding:16px 22px;
border-top:1px solid var(--border-soft);
background:var(--surface-2);
display:flex;align-items:center;gap:14px;
}
.modal-foot .total{flex:1;display:flex;flex-direction:column;gap:2px}
.modal-foot .total .l{
font-size:10.5px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;font-weight:500;
}
.modal-foot .total .v{
font-size:22px;font-weight:700;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1;
}
.modal-foot .total .delta{font-size:11.5px;color:var(--muted);margin-top:3px}
.modal-foot .total .delta b{color:var(--ink);font-weight:600}
.modal-foot .actions{display:flex;gap:8px;flex:none}
/* секции конфигурации */
.cfg-sec{display:flex;flex-direction:column;gap:10px}
.cfg-sec-h{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.cfg-sec-h h3{
font-size:13.5px;font-weight:600;margin:0;letter-spacing:-.01em;color:var(--ink);
}
.cfg-sec-h .req,
.cfg-sec-h .opt{
font-size:10px;font-weight:600;padding:1px 7px;border-radius:5px;
text-transform:uppercase;letter-spacing:.04em;
}
.cfg-sec-h .req{background:var(--danger-soft);color:var(--danger)}
.cfg-sec-h .opt{background:var(--bg-soft);color:var(--muted)}
.cfg-sec-h .hint{font-size:11.5px;color:var(--muted);margin-left:auto}
/* радио-выбор (обязательные параметры) */
.cfg-radio{display:flex;flex-direction:column;gap:6px}
.cfg-radio .it{
display:grid;grid-template-columns:18px 1fr auto;
gap:12px;align-items:center;
padding:10px 14px;border:1px solid var(--border);border-radius:11px;
cursor:pointer;background:var(--surface);
transition:background .1s,border-color .1s;
}
.cfg-radio .it:hover{background:var(--surface-2)}
.cfg-radio .it.on{border-color:var(--ink);background:var(--accent-soft)}
.cfg-radio .it .r{
width:18px;height:18px;border-radius:50%;
border:1.6px solid var(--border-soft);background:#fff;position:relative;flex:none;
}
.cfg-radio .it.on .r{border-color:var(--ink)}
.cfg-radio .it.on .r::after{
content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink);
}
.cfg-radio .it .nm{font-size:13.5px;font-weight:500;color:var(--ink-2);min-width:0}
.cfg-radio .it.on .nm{color:var(--ink)}
.cfg-radio .it .nm .desc{
display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px;
}
.cfg-radio .it .pr{
font-size:13px;font-weight:600;color:var(--ink);
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cfg-radio .it .pr.zero{color:var(--muted);font-weight:500}
/* чекбоксы с опц. количеством (дополнения) */
.cfg-check{display:flex;flex-direction:column;gap:6px}
.cfg-check .it{
display:grid;grid-template-columns:18px 1fr auto auto;
gap:12px;align-items:center;
padding:10px 14px;border:1px solid var(--border-soft);border-radius:11px;
background:var(--surface);cursor:pointer;transition:background .1s;
}
.cfg-check .it:hover{background:var(--surface-2)}
.cfg-check .it.on{background:var(--surface-2);border-color:#D3CFC6}
.cfg-check .it .c{
width:18px;height:18px;border-radius:5px;
border:1.6px solid var(--border);background:#fff;
display:grid;place-items:center;color:transparent;flex:none;
}
.cfg-check .it.on .c{background:var(--ink);border-color:transparent;color:#fff}
.cfg-check .it .nm{font-size:13.5px;font-weight:500;color:var(--ink-2);min-width:0}
.cfg-check .it.on .nm{color:var(--ink)}
.cfg-check .it .nm .desc{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px}
.cfg-check .it .pr{
font-size:13px;font-weight:600;
font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);
}
.cfg-check .it.on .pr{color:var(--positive)}
.cfg-qty{
display:inline-flex;align-items:center;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
overflow:hidden;
}
.cfg-qty button{
width:26px;height:28px;display:grid;place-items:center;
background:transparent;border:0;cursor:pointer;color:var(--ink-2);font-size:14px;line-height:1;
}
.cfg-qty button:hover{background:var(--bg-soft)}
.cfg-qty button:disabled{color:var(--muted-2);cursor:not-allowed}
.cfg-qty .v{
min-width:26px;text-align:center;font-weight:600;font-size:12.5px;
font-variant-numeric:tabular-nums;
}
/* исключения «без чего» (для общепита) */
.cfg-exclude{display:flex;flex-wrap:wrap;gap:6px}
.cfg-exclude .it{
padding:6px 12px;border:1px solid var(--border);border-radius:999px;
font-size:12.5px;color:var(--ink-2);cursor:pointer;
display:inline-flex;align-items:center;gap:6px;
background:var(--surface);
}
.cfg-exclude .it:hover{background:var(--bg-soft)}
.cfg-exclude .it.on{
background:var(--danger-soft);color:var(--danger);
border-color:transparent;text-decoration:line-through;
text-decoration-color:var(--danger);
}
/* комментарий */
.cfg-comment textarea{
width:100%;background:var(--surface-2);border:1px solid var(--border);
border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;
resize:vertical;min-height:62px;outline:0;color:var(--ink);
}
.cfg-comment textarea:focus{border-color:var(--ink);background:#fff}
/* preview-карточка (для сравнения общепита) */
.cfg-compare{
margin-top:18px;background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:18px 22px;
}
.cfg-compare h3{font-size:14px;font-weight:600;margin:0 0 4px}
.cfg-compare .sub{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cfg-compare .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.cfg-compare .col{display:flex;flex-direction:column;gap:10px}
.cfg-compare .col .lbl{
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.06em;font-weight:500;
}
.cfg-compare .col .row{
display:flex;align-items:center;justify-content:space-between;
font-size:12.5px;padding:4px 0;
}
.cfg-compare .col .row b{font-weight:500;color:var(--ink)}
.cfg-compare .col .row .pr{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;color:var(--muted)}
/* ===================================================================
КОРЗИНА: отображение комплектации в строке товара
=================================================================== */
.cart-cfg{
margin-top:10px;padding-left:14px;
border-left:2px solid var(--border-soft);
display:flex;flex-direction:column;gap:5px;
}
.cart-cfg .row{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
font-size:12.5px;color:var(--ink-2);
}
.cart-cfg .row .nm{display:flex;align-items:center;gap:6px}
.cart-cfg .row .nm .qty{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
}
.cart-cfg .row .pr{
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cart-cfg .row .pr.pos{color:var(--positive);font-weight:500}
.cart-cfg .row .pr.zero{color:var(--muted-2)}
.cart-cfg .row.exclude{color:var(--danger);text-decoration:line-through;text-decoration-color:var(--muted-2)}
.cart-cfg .row.exclude .nm::before{content:"⊘ ";text-decoration:none;color:var(--danger)}
.cart-cfg .comment{
margin-top:4px;padding:8px 11px;background:var(--bg-soft);
border-radius:8px;font-size:12px;color:var(--ink-2);
line-height:1.5;font-style:italic;
}
.cart-cfg .comment::before{content:"„ "}
.cart-cfg .comment::after{content:" "}
.cart-cfg-edit{
margin-top:6px;font-size:11.5px;color:var(--muted);
text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.cart-cfg-edit:hover{color:var(--ink)}
/* подытог строки с учётом доп. */
.cart-row-sub{
display:flex;align-items:baseline;justify-content:space-between;
gap:10px;margin-top:8px;padding-top:8px;
border-top:1px dashed var(--border-soft);
font-size:12px;color:var(--muted);
}
.cart-row-sub .sum-line{display:flex;gap:14px;flex-wrap:wrap}
.cart-row-sub .sum-line span b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* ===================================================================
DRAWER — выезжающая боковая панель (для редактора товара и пр.)
=================================================================== */
.drawer-bg{
position:fixed;inset:0;z-index:100;
background:rgba(14,14,12,.45);
display:flex;justify-content:flex-end;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.drawer-bg.demo{position:absolute;background:transparent}
.drawer{
background:var(--surface);width:540px;max-width:100%;height:100%;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:-24px 0 40px -10px rgba(0,0,0,.28);
}
.drawer.demo{
position:relative;border:1px solid var(--border);border-radius:var(--radius-xl);
box-shadow:0 30px 60px -20px rgba(14,14,12,.32);height:auto;
}
.drawer-head{
padding:18px 22px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.drawer-head h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0}
.drawer-head .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.drawer-head .close{
width:34px;height:34px;border-radius:50%;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink-2);cursor:pointer;flex:none;
}
.drawer-head .close:hover{background:var(--accent-soft);color:var(--ink)}
.drawer-body{padding:18px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:18px}
.drawer-foot{
padding:14px 22px;border-top:1px solid var(--border-soft);background:var(--surface-2);
display:flex;align-items:center;gap:8px;
}
.drawer-foot .grow{flex:1}
/* фото-загрузчик товара */
.prod-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.prod-photo-box{
aspect-ratio:1;border-radius:10px;
background:linear-gradient(135deg,#E9E7E0,#D2CEC4);
position:relative;overflow:hidden;border:1px solid var(--border-soft);
}
.prod-photo-box.upload{
background:var(--surface-2);border:1.5px dashed var(--border);
display:grid;place-items:center;color:var(--muted);font-size:11px;cursor:pointer;
}
.prod-photo-box .pr-rm{
position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:12px;cursor:pointer;
}
.prod-photo-box .main-tag{
position:absolute;bottom:5px;left:5px;font-size:9.5px;font-weight:600;
padding:2px 7px;border-radius:5px;background:var(--ink);color:#fff;
text-transform:uppercase;letter-spacing:.04em;
}
/* свич публикации */
.prod-pub{
display:inline-flex;align-items:center;gap:7px;font-size:12px;
}
.prod-pub .sw{
position:relative;width:32px;height:18px;background:#D6D2C8;border-radius:999px;
border:1px solid var(--border);cursor:pointer;flex:none;transition:background .15s;
}
.prod-pub .sw::after{
content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;
background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15);
transition:left .15s;
}
.prod-pub.on .sw{background:var(--positive);border-color:transparent}
.prod-pub.on .sw::after{left:15px}
.prod-pub.on{color:var(--positive)}
/* состояния остатка */
.qty-st{
display:inline-flex;align-items:center;gap:5px;
font-size:12px;font-variant-numeric:tabular-nums;font-weight:500;
}
.qty-st .dot{width:5px;height:5px;border-radius:50%}
.qty-st.ok .dot{background:var(--positive)}
.qty-st.low .dot{background:#D9A407}
.qty-st.out .dot{background:var(--danger)}
.qty-st.ok{color:var(--ink)}
.qty-st.low{color:var(--warn)}
.qty-st.out{color:var(--danger)}
/* ВЫНОСНОЙ комментарий «что переделать» */
.redesign-note{
background:#FFF9E1;border:1px solid #F1E7C3;border-radius:14px;
padding:14px 18px;display:flex;gap:12px;
font-size:13px;line-height:1.55;color:#7B5E10;
}
.redesign-note .ic{
width:28px;height:28px;border-radius:50%;background:#F4D544;
display:grid;place-items:center;flex:none;color:#7B5E10;font-weight:700;font-family:'JetBrains Mono',monospace;
}
.redesign-note b{color:var(--ink);font-weight:600}
/* ===================================================================
PROD-GROUPS — Дерево групп товаров + чипы участников
=================================================================== */
.pg-side{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);padding:14px;
position:sticky;top:88px;align-self:start;
max-height:calc(100vh - 110px);overflow:auto;
}
.pg-side .h{
display:flex;align-items:center;justify-content:space-between;
font-size:11px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.07em;font-weight:500;padding:0 8px 8px;
}
.pg-side .h a{color:var(--ink);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500}
.pg-tree{display:flex;flex-direction:column;gap:1px}
.pg-tree a{
display:flex;align-items:center;gap:8px;
padding:7px 10px;border-radius:8px;font-size:13px;color:var(--ink-2);
}
.pg-tree a:hover{background:var(--bg-soft)}
.pg-tree a.active{background:var(--ink);color:#fff}
.pg-tree a .ic{width:14px;height:14px;color:var(--muted);flex:none}
.pg-tree a.active .ic{color:#fff}
.pg-tree a .n{
margin-left:auto;font-size:11px;color:var(--muted);
background:var(--bg-soft);padding:1px 7px;border-radius:999px;
}
.pg-tree a.active .n{background:rgba(255,255,255,.16);color:#fff}
.pg-tree .sub{
margin:0 0 4px 12px;padding-left:12px;
border-left:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:1px;
}
.pg-tree .sub a{font-size:12.5px;padding:5px 10px;color:var(--muted)}
.pg-tree .sub a.active{background:var(--accent-soft);color:var(--ink);font-weight:500}
.pg-tree .sec{
font-size:10.5px;color:var(--muted-2);text-transform:uppercase;
letter-spacing:.06em;font-weight:500;padding:12px 10px 6px;
}
/* группа-чип (категория / тег / кампания / набор) */
.pg-chip{
display:inline-flex;align-items:center;gap:5px;
padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500;
background:var(--bg-soft);color:var(--ink-2);
}
.pg-chip.cat{background:#DDE3EA;color:#3A597B}
.pg-chip.tag{background:#0E0E0C;color:#fff}
.pg-chip.campaign{background:#F1E7C3;color:#7B5E10}
.pg-chip.set{background:#E2E5DD;color:#3F5A2E}
.pg-chip .x{color:currentColor;opacity:.5;cursor:pointer;font-size:13px;line-height:.5;margin-left:2px}
.pg-chip .x:hover{opacity:1}
/* bulk-bar — появляется при выборе строк */
.bulk-bar{
display:flex;align-items:center;gap:14px;
padding:10px 14px;border-radius:12px;
background:var(--ink);color:#fff;
position:sticky;top:78px;z-index:10;margin-bottom:12px;
}
.bulk-bar .cnt{
font-size:13px;font-weight:600;
background:rgba(255,255,255,.14);padding:3px 9px;border-radius:999px;
}
.bulk-bar .actions{margin-left:auto;display:flex;gap:6px}
.bulk-bar .actions .btn{padding:6px 12px;font-size:12.5px}
.bulk-bar .actions .btn-primary{background:#fff;color:var(--ink)}
.bulk-bar .actions .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.bulk-bar .x{color:#fff;opacity:.7;cursor:pointer}
/* чекбокс в строке таблицы */
.sel-cell{
width:18px;height:18px;border-radius:5px;
border:1.6px solid var(--border);background:#fff;
display:inline-grid;place-items:center;color:transparent;cursor:pointer;
}
.sel-cell.on{background:var(--ink);border-color:transparent;color:#fff}
/* ===================================================================
STATS — мини-графики для таба «Статистика»
=================================================================== */
.mini-chart{
background:var(--surface);border:1px solid var(--border-soft);
border-radius:14px;padding:18px;
}
.mini-chart .h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mini-chart .h h3{font-size:13px;font-weight:600;margin:0;letter-spacing:-.01em}
.mini-chart .h .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.mini-chart .h .big{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
.mini-chart .h .delta{font-size:11.5px;color:var(--positive);font-weight:500;margin-top:2px}
.mini-chart .h .delta.down{color:var(--danger)}
.mc-bars{display:flex;align-items:flex-end;gap:4px;height:90px}
.mc-bars .bar{
flex:1;background:var(--bg-soft);border-radius:4px 4px 0 0;
position:relative;min-height:6px;
}
.mc-bars .bar.on{background:var(--ink)}
.mc-bars .bar.alt{background:var(--accent-soft)}
.mc-bars .bar.pos{background:var(--positive)}
.mc-labels{display:flex;gap:4px;margin-top:6px;font-size:9.5px;color:var(--muted-2);font-family:'JetBrains Mono',monospace}
.mc-labels span{flex:1;text-align:center}
/* линейный мини-график (SVG-эмуляция через clip-path) */
.mc-line{
height:120px;position:relative;
background:linear-gradient(180deg,var(--accent-soft) 0,transparent 80%);
border-bottom:1px solid var(--border-soft);
clip-path:polygon(
0% 80%,8% 65%,16% 70%,24% 55%,32% 60%,40% 50%,48% 35%,
56% 40%,64% 30%,72% 38%,80% 25%,88% 15%,96% 10%,100% 12%,
100% 100%,0% 100%
);
}
.mc-line-wrap{position:relative;height:120px;border-radius:8px;overflow:hidden}
.mc-line-wrap .grid{position:absolute;inset:0;background:
linear-gradient(0deg,var(--border-soft) 1px,transparent 1px) 0 0/100% 25%}
/* конверсионная воронка */
.mc-funnel{display:flex;flex-direction:column;gap:6px}
.mc-funnel .it{
display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;
font-size:12.5px;
}
.mc-funnel .it .nm{color:var(--ink-2);font-weight:500}
.mc-funnel .it .bar{height:22px;background:var(--accent-soft);border-radius:6px;display:flex;align-items:center;padding:0 8px;font-size:11px;color:var(--ink);font-weight:600}
.mc-funnel .it .bar.dark{background:var(--ink);color:#fff}
.mc-funnel .it .v{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;text-align:right;min-width:60px}
/* источник переходов — pie-замена через progress-bars */
.mc-sources{display:flex;flex-direction:column;gap:8px}
.mc-sources .it{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.mc-sources .nm{color:var(--ink-2)}
.mc-sources .bar{height:6px;border-radius:999px;background:var(--bg-soft);overflow:hidden}
.mc-sources .bar i{display:block;height:100%;background:var(--ink);border-radius:999px}
.mc-sources .bar i.alt{background:var(--info)}
.mc-sources .bar i.warn{background:#D9A407}
.mc-sources .bar i.ok{background:var(--positive)}
.mc-sources .pct{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:12px;width:42px;text-align:right}
/* история — компактные карточки изменений с diff */
.audit-row{
display:grid;grid-template-columns:80px 1fr;gap:14px;
padding:12px 0;border-bottom:1px solid var(--border-soft);
}
.audit-row:last-child{border-bottom:0}
.audit-row .when{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}
.audit-row .when b{display:block;color:var(--ink);font-weight:600;font-size:12.5px}
.audit-row .body .top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.audit-row .body .av{width:22px;height:22px;border-radius:50%;background:#3A3833;color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:600}
.audit-row .body .who{font-size:12.5px;font-weight:600}
.audit-row .body .what{font-size:12.5px;color:var(--ink-2)}
.audit-row .body .what b{color:var(--ink);font-weight:500}
.audit-row .body .diff{
margin-top:6px;display:inline-flex;align-items:baseline;gap:8px;
background:var(--surface-2);border:1px solid var(--border-soft);
border-radius:8px;padding:6px 10px;font-size:11.5px;
font-family:'JetBrains Mono',monospace;
}
.audit-row .body .diff .old{color:var(--danger);text-decoration:line-through}
.audit-row .body .diff .new{color:var(--positive);font-weight:600}
.audit-row .body .diff .arr{color:var(--muted-2)}
.audit-row .badge{font-size:10px;padding:1px 7px;border-radius:5px;background:var(--bg-soft);color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.audit-row .badge.price{background:#F1E7C3;color:#7B5E10}
.audit-row .badge.stock{background:#DDE3EA;color:#3A597B}
.audit-row .badge.pub{background:#E1E8DD;color:#406B49}
.audit-row .badge.photo{background:#DAD6CC;color:#0E0E0C}
.audit-row .badge.group{background:#0E0E0C;color:#fff}
/* ===================================================================
SALES ORDER — создание заказ-наряда (каталог + позиции)
=================================================================== */
.so-grid{display:grid;grid-template-columns:1fr 400px;gap:14px;align-items:start}
/* строки позиций в заказе */
.so-line{
display:grid;grid-template-columns:56px 1fr 130px 130px 36px;
gap:14px;align-items:flex-start;
padding:14px 16px;border-bottom:1px solid var(--border-soft);
}
.so-line:last-child{border-bottom:0}
.so-line:hover{background:var(--surface-2)}
.so-line .thumb{
width:56px;height:56px;border-radius:10px;flex:none;position:relative;overflow:hidden;
}
.so-line .thumb::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.2),transparent 60%);
}
.so-line .body{min-width:0}
.so-line .body .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.so-line .body .nm{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.so-line .body .sku{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
background:var(--bg-soft);padding:1px 7px;border-radius:5px;
}
.so-line .body .brand-row{font-size:11.5px;color:var(--muted);margin-top:2px}
.so-line .body .stock{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--positive);font-weight:500}
.so-line .body .stock.warn{color:var(--warn)}
.so-line .body .stock .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.so-line .price{
text-align:right;font-variant-numeric:tabular-nums;
display:flex;flex-direction:column;gap:2px;font-size:13px;
}
.so-line .price .v{font-weight:500;color:var(--ink)}
.so-line .price .u{font-size:11px;color:var(--muted)}
.so-line .sum{
text-align:right;font-variant-numeric:tabular-nums;
font-size:15px;font-weight:600;color:var(--ink);
display:flex;flex-direction:column;gap:2px;
}
.so-line .sum .u{font-size:11px;color:var(--muted);font-weight:400}
.so-line .sum .plus{font-size:11px;color:var(--positive);font-weight:500;margin-top:2px}
.so-line .rm{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
color:var(--muted-2);cursor:pointer;flex:none;
}
.so-line .rm:hover{background:var(--danger-soft);color:var(--danger)}
/* пустая строка-плейсхолдер */
.so-empty{
padding:40px 20px;text-align:center;color:var(--muted);
border:1.5px dashed var(--border);border-radius:14px;background:var(--surface-2);
}
.so-empty .ic{
width:48px;height:48px;border-radius:50%;background:var(--bg-soft);
display:grid;place-items:center;margin:0 auto 12px;color:var(--muted-2);
}
/* строка-итого внутри секции */
.so-line-foot{
display:flex;align-items:center;gap:14px;
padding:14px 16px;background:var(--surface-2);
border-top:1px solid var(--border-soft);
font-size:13px;color:var(--ink-2);
}
.so-line-foot .b{font-weight:600;color:var(--ink)}
.so-line-foot .grow{flex:1}
/* ============ КАТАЛОГ-САЙДБАР ============ */
.so-cat{
position:sticky;top:78px;align-self:start;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-l);
max-height:calc(100vh - 100px);overflow:hidden;
display:flex;flex-direction:column;
}
.so-cat .head{
padding:14px 16px;border-bottom:1px solid var(--border-soft);
}
.so-cat .head h3{
font-size:14px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;
display:flex;align-items:center;gap:8px;
}
.so-cat .head h3 .n{
font-size:11px;color:var(--muted);background:var(--bg-soft);padding:1px 8px;border-radius:999px;font-weight:500;
}
.so-cat .head .search{
margin:0;max-width:none;background:var(--surface-2);
}
.so-cat .chips-row{
display:flex;gap:4px;flex-wrap:wrap;
padding:10px 16px;border-bottom:1px solid var(--border-soft);
}
.so-cat .chips-row .chip{padding:3px 9px;font-size:11px}
.so-cat .body{padding:10px 12px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px}
/* карточка товара в каталоге */
.so-prod{
display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;
padding:8px 10px;border:1px solid var(--border-soft);border-radius:10px;
background:var(--surface);transition:background .1s,border-color .1s;
}
.so-prod:hover{border-color:#D3CFC6;background:var(--surface-2)}
.so-prod .thumb{
width:42px;height:42px;border-radius:8px;flex:none;position:relative;overflow:hidden;
}
.so-prod .thumb::after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.2),transparent 60%);
}
.so-prod .info{min-width:0}
.so-prod .info .b{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.so-prod .info .nm{
font-size:12.5px;font-weight:500;line-height:1.25;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);
}
.so-prod .info .meta{
font-size:11px;color:var(--muted);display:flex;gap:7px;align-items:center;margin-top:2px;
}
.so-prod .info .meta .pr{
font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:600;font-size:11.5px;
}
.so-prod .info .meta .stk{color:var(--positive)}
.so-prod .info .meta .stk.warn{color:var(--warn)}
.so-prod .info .meta .stk.out{color:var(--danger)}
.so-prod .add{
width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;
display:grid;place-items:center;cursor:pointer;flex:none;font-size:16px;line-height:1;
}
.so-prod .add:hover{background:#000}
.so-prod .add.cfg{
background:var(--accent-soft);color:var(--ink);
width:auto;padding:0 10px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
height:32px;display:inline-flex;align-items:center;gap:4px;
}
.so-prod .add.cfg:hover{background:var(--ink);color:#fff}
.so-prod .add.added{background:var(--positive);color:#fff}
/* ===================================================================
POS — полноэкранные кассовые интерфейсы (shop + horeca)
=================================================================== */
.pos-shell{
position:fixed;inset:0;display:grid;grid-template-rows:54px 1fr;
background:#F2F1EC;
}
.pos-bar{
display:flex;align-items:center;gap:14px;padding:0 16px;
background:#0E0E0C;color:#fff;border-bottom:1px solid #1A1A1A;
}
.pos-bar .brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:-.01em}
.pos-bar .brand .m{width:24px;height:24px;background:#fff;color:#0E0E0C;border-radius:6px;display:grid;place-items:center;font-weight:700;font-family:'JetBrains Mono',monospace}
.pos-bar .shift{
display:flex;align-items:center;gap:8px;padding:5px 11px;
background:rgba(255,255,255,.08);border-radius:7px;font-size:12px;font-variant-numeric:tabular-nums;
}
.pos-bar .shift .d{width:6px;height:6px;border-radius:50%;background:#5FA06E}
.pos-bar .clock{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.pos-bar .user{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px}
.pos-bar .user .av{width:26px;height:26px;border-radius:50%;background:#fff;color:#0E0E0C;display:grid;place-items:center;font-size:10px;font-weight:600}
.pos-bar .ic-btn{
width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
color:#fff;background:rgba(255,255,255,.06);cursor:pointer;border:1px solid rgba(255,255,255,.08);
}
.pos-bar .ic-btn:hover{background:rgba(255,255,255,.14)}
.pos-bar .ic-btn.warn{background:#7A2A1F;border-color:#9B3A2A}
/* ----- ЧЕК / СПИСОК ПОЗИЦИЙ ----- */
.pos-receipt{
background:#fff;border-radius:0;
display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);
}
.pos-receipt-h{
padding:14px 16px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:center;justify-content:space-between;
}
.pos-receipt-h .ttl{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.pos-receipt-h .num{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);background:var(--bg-soft);padding:3px 8px;border-radius:5px}
.pos-receipt-list{flex:1;overflow-y:auto;padding:4px 0}
.pos-row{
display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
padding:10px 16px;border-bottom:1px solid var(--border-soft);
}
.pos-row:hover{background:var(--surface-2)}
.pos-row.sel{background:#F8F0E0;border-left:3px solid var(--accent);padding-left:13px}
.pos-row .info .nm{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.pos-row .info .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px}
.pos-row .info .mod{font-size:11px;color:var(--muted);margin-top:3px;display:flex;flex-direction:column;gap:1px;padding-left:8px;border-left:1.5px solid var(--border-soft)}
.pos-row .qty{
display:inline-flex;align-items:center;gap:0;
background:var(--bg-soft);border-radius:6px;
}
.pos-row .qty button{
border:0;width:24px;height:26px;background:transparent;cursor:pointer;color:var(--ink);font-size:14px;
}
.pos-row .qty .v{
font-size:12.5px;font-weight:600;min-width:24px;text-align:center;font-variant-numeric:tabular-nums;
}
.pos-row .sum{
text-align:right;min-width:80px;font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;
}
.pos-row .sum .u{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
/* нижняя сводка чека */
.pos-receipt-sum{
padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);
display:flex;flex-direction:column;gap:4px;
}
.pos-receipt-sum .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pos-receipt-sum .row.b{font-size:14px;color:var(--ink);font-weight:600;margin-top:4px;padding-top:8px;border-top:1px dashed var(--border)}
.pos-receipt-sum .total{
display:flex;justify-content:space-between;align-items:baseline;
padding:14px 16px;margin:0 -16px -12px;border-radius:0;
background:#0E0E0C;color:#fff;
}
.pos-receipt-sum .total .l{font-size:13px;font-weight:500;letter-spacing:.01em}
.pos-receipt-sum .total .v{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;letter-spacing:-.02em}
/* ----- БОЛЬШИЕ ПЛИТКИ ТОВАРОВ/БЛЮД ----- */
.pos-tile{
border-radius:12px;background:var(--surface);border:1px solid var(--border);
padding:10px;display:flex;flex-direction:column;gap:6px;cursor:pointer;
transition:transform .08s,border-color .08s;position:relative;
}
.pos-tile:hover{border-color:#C8C5BE;transform:translateY(-1px)}
.pos-tile:active{transform:translateY(0)}
.pos-tile .ph{
aspect-ratio:1/1;border-radius:8px;background:var(--bg-soft);
display:flex;align-items:flex-end;padding:6px;position:relative;overflow:hidden;
}
.pos-tile .ph::after{
content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 65%);
}
.pos-tile .ph .b{
font-size:9.5px;text-transform:uppercase;font-weight:600;letter-spacing:.04em;color:#fff;
background:rgba(0,0,0,.45);padding:2px 6px;border-radius:4px;position:relative;z-index:1;
}
.pos-tile .nm{font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);min-height:32px}
.pos-tile .pr{
display:flex;align-items:center;justify-content:space-between;font-size:12px;
}
.pos-tile .pr .p{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink)}
.pos-tile .pr .u{color:var(--muted);font-size:10.5px}
.pos-tile.tag-cfg::after{
content:"опции";position:absolute;top:8px;right:8px;
font-size:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;
background:var(--ink);color:#fff;padding:2px 6px;border-radius:4px;z-index:2;
}
/* ----- BIG NUM-PAD ----- */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.numpad .k{
height:48px;border-radius:10px;background:var(--surface);border:1px solid var(--border);
font-size:18px;font-weight:600;cursor:pointer;font-family:'JetBrains Mono',monospace;
display:grid;place-items:center;color:var(--ink);
}
.numpad .k:hover{background:var(--bg-soft)}
.numpad .k:active{background:var(--ink);color:#fff}
.numpad .k.acc{background:var(--accent-soft);color:var(--ink)}
.numpad .k.del{background:#FBF3F1;color:var(--danger);border-color:#F0CFC8}
/* ----- БОЛЬШАЯ ОПЛАТА КНОПКА ----- */
.pay-btn{
display:flex;align-items:center;justify-content:space-between;gap:14px;
background:#0E0E0C;color:#fff;
padding:18px 22px;border-radius:14px;cursor:pointer;
border:0;width:100%;text-align:left;
transition:background .1s;
}
.pay-btn:hover{background:#000}
.pay-btn .l{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pay-btn .l .s{display:block;font-size:11px;color:rgba(255,255,255,.6);font-weight:400;margin-top:2px}
.pay-btn .v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;letter-spacing:-.02em}
.pay-btn .ic{margin-right:6px;display:grid;place-items:center}
/* ----- HORECA: ПЛАН ЗАЛА ----- */
.hall{
position:relative;background:#F0EDE3;border:1px solid var(--border);border-radius:14px;
aspect-ratio:1/1;overflow:hidden;
}
.hall .wall{position:absolute;background:#D7D2C4;border-radius:3px}
.hall .table{
position:absolute;border-radius:50%;
background:var(--surface);border:2px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:600;cursor:pointer;
font-family:'JetBrains Mono',monospace;
transition:border-color .1s, background .1s;
}
.hall .table.rect{border-radius:8px}
.hall .table:hover{border-color:var(--ink)}
.hall .table.busy{background:#E8EEF7;border-color:#2B4F87;color:#2B4F87}
.hall .table.long{background:#FAF1DA;border-color:#9B6F1A;color:#9B6F1A}
.hall .table.paid{background:#E4F0E1;border-color:#2F6B3A;color:#2F6B3A}
.hall .table.sel{background:#0E0E0C;color:#fff;border-color:#0E0E0C;box-shadow:0 0 0 4px rgba(14,14,12,.12)}
.hall .label{
position:absolute;font-size:9px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
/* ----- HORECA: меню сетки ----- */
.menu-cat-tabs{
display:flex;gap:6px;overflow-x:auto;padding:0 4px;margin-bottom:12px;flex-wrap:wrap;
}
.menu-cat-tabs .t{
padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
font-size:12.5px;font-weight:500;cursor:pointer;color:var(--ink-2);white-space:nowrap;
display:flex;align-items:center;gap:6px;
}
.menu-cat-tabs .t:hover{border-color:#C8C5BE}
.menu-cat-tabs .t.on{background:#0E0E0C;color:#fff;border-color:#0E0E0C}
.menu-cat-tabs .t .n{
font-size:10.5px;background:rgba(0,0,0,.06);padding:1px 6px;border-radius:99px;color:var(--muted);
}
.menu-cat-tabs .t.on .n{background:rgba(255,255,255,.18);color:#fff}
/* ----- модификаторы в строке заказа HoReCa ----- */
.pos-row .mods{font-size:11px;color:var(--muted);padding-left:8px;border-left:1.5px solid var(--border-soft);margin-top:4px;display:flex;flex-direction:column;gap:1px}
.pos-row .mods .m.add{color:var(--ink-2)}
.pos-row .mods .m.rem{color:var(--danger);text-decoration:line-through}
/* ----- ВЫБОР СТОЛА верхний баннер ----- */
.table-pill{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:#0E0E0C;color:#fff;border-radius:99px;font-size:12px;font-weight:500;
}
.table-pill .n{font-family:'JetBrains Mono',monospace;font-weight:600}
/* ===================================================================
KB-EDITOR — редактор статьи базы знаний
=================================================================== */
.kbe-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
/* обложка — превью + пикер градиентов */
.kbe-cover{
border-radius:18px;overflow:hidden;border:1px solid var(--border);
background:#0E0E0C;color:#fff;position:relative;min-height:200px;
display:flex;flex-direction:column;justify-content:flex-end;padding:24px 28px;
}
.kbe-cover.no-bg{background:var(--surface-2);color:var(--ink);border-style:dashed}
.kbe-cover .eyebrow{
font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:rgba(255,255,255,.7);margin-bottom:8px;
}
.kbe-cover.no-bg .eyebrow{color:var(--muted)}
.kbe-cover h1{
font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.15;
}
.kbe-cover input.tt{
width:100%;background:transparent;border:0;outline:0;color:inherit;
font-family:inherit;font-size:30px;font-weight:600;letter-spacing:-.02em;
padding:0;margin:0;line-height:1.15;
}
.kbe-cover input.tt::placeholder{color:rgba(255,255,255,.4)}
.kbe-cover.no-bg input.tt::placeholder{color:var(--muted-2)}
.kbe-cover .lead{
margin-top:8px;color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.5;max-width:680px;
}
.kbe-cover.no-bg .lead{color:var(--muted)}
.kbe-cover textarea.lead-in{
width:100%;background:transparent;border:0;outline:0;color:inherit;
font-family:inherit;font-size:14.5px;line-height:1.5;resize:none;padding:0;margin-top:8px;
max-width:680px;
}
.kbe-cover textarea.lead-in::placeholder{color:rgba(255,255,255,.45)}
.kbe-cover.no-bg textarea.lead-in::placeholder{color:var(--muted-2)}
.kbe-cover .cover-ctl{
position:absolute;top:14px;right:14px;display:flex;gap:6px;
}
.kbe-cover .cover-ctl button{
background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:8px;
padding:6px 11px;font-size:11.5px;font-weight:500;cursor:pointer;
display:inline-flex;align-items:center;gap:5px;
}
.kbe-cover.no-bg .cover-ctl button{
background:#fff;color:var(--ink);border-color:var(--border);
}
.kbe-cover .cover-ctl button:hover{background:rgba(255,255,255,.22)}
.kbe-cover.no-bg .cover-ctl button:hover{background:var(--bg-soft)}
/* пикер градиентов */
.bg-picker{
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;
margin-top:14px;
}
.bg-picker .h{
display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.bg-picker .h .ttl{font-size:13px;font-weight:600;letter-spacing:-.01em}
.bg-picker .h .meta{font-size:11.5px;color:var(--muted)}
.bg-picker .cats{
display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;
}
.bg-picker .cats .ct{
padding:5px 11px;font-size:11.5px;background:var(--bg-soft);border:1px solid var(--border-soft);
border-radius:99px;color:var(--ink-2);cursor:pointer;font-weight:500;
}
.bg-picker .cats .ct.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bg-picker .grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
}
.bg-picker .sw{
aspect-ratio:3/2;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;
border:1.5px solid transparent;
}
.bg-picker .sw img{display:block;width:100%;height:100%;border-radius:7px}
.bg-picker .sw:hover{border-color:#C8C5BE;box-shadow:0 4px 12px -6px rgba(14,14,12,.18)}
.bg-picker .sw.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,14,12,.1)}
.bg-picker .sw.on::after{
content:"✓";position:absolute;top:5px;right:5px;
width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:700;
}
.bg-picker .sw .nm{
position:absolute;left:5px;bottom:4px;font-size:9.5px;font-weight:500;color:#fff;
background:rgba(0,0,0,.4);padding:1px 5px;border-radius:4px;backdrop-filter:blur(4px);
}
.bg-picker .sw.light .nm{background:rgba(255,255,255,.7);color:var(--ink)}
.bg-picker .opt-row{
display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:12px;
}
.bg-picker .opt-row label{display:flex;align-items:center;gap:6px;color:var(--ink-2);cursor:pointer}
/* секции редактора */
.kbe-sec{
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;
margin-top:14px;
}
.kbe-sec-h{
display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px;
}
.kbe-sec-h .ttl{font-size:13px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.kbe-sec-h .ttl .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);background:var(--bg-soft);padding:2px 7px;border-radius:5px}
.kbe-sec-h .meta{font-size:11.5px;color:var(--muted)}
/* тулбар markdown */
.md-toolbar{
display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px 10px 0 0;border-bottom:0;
}
.md-toolbar .b{
width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
color:var(--ink-2);cursor:pointer;background:transparent;border:0;font-weight:600;font-size:13px;
}
.md-toolbar .b:hover{background:var(--bg-soft);color:var(--ink)}
.md-toolbar .b.on{background:var(--ink);color:#fff}
.md-toolbar .sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.md-toolbar .grow{flex:1}
.md-toolbar .v{font-size:11.5px;color:var(--muted);padding-right:8px}
.md-body{
border:1px solid var(--border);border-top:0;border-radius:0 0 10px 10px;
background:var(--surface);padding:18px 22px;min-height:420px;
font-size:14.5px;line-height:1.65;color:var(--ink-2);
}
.md-body[contenteditable]:focus{outline:0}
.md-body h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:24px 0 10px;color:var(--ink)}
.md-body h2:first-child{margin-top:0}
.md-body h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:18px 0 8px;color:var(--ink)}
.md-body p{margin:0 0 12px}
.md-body ul,.md-body ol{margin:0 0 14px;padding-left:22px}
.md-body li{margin-bottom:4px}
.md-body code{
background:var(--bg-soft);padding:1px 6px;border-radius:5px;
font-family:'JetBrains Mono',monospace;font-size:.88em;color:var(--ink);
}
.md-body pre{
background:#0E0E0C;color:#E5E2DA;padding:14px 18px;border-radius:10px;overflow:auto;
font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6;
}
.md-body blockquote{
border-left:3px solid var(--ink);margin:0 0 14px;padding:4px 0 4px 14px;color:var(--ink-2);
}
.md-body .callout{
background:var(--accent-soft);border-radius:10px;padding:14px 18px;margin:14px 0;
display:flex;gap:12px;font-size:13.5px;line-height:1.55;
}
.md-body .callout .ic{color:var(--ink);flex:none;margin-top:2px}
.md-body figure{margin:18px 0}
.md-body figure img,.md-body figure .ph{
width:100%;border-radius:10px;display:block;
}
.md-body figure .ph{
aspect-ratio:16/9;background:linear-gradient(135deg,#E8E5DD,#C9C4B5);
display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;
}
.md-body figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:6px}
/* загрузка вложений */
.attach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.attach-row{
display:flex;align-items:center;gap:10px;padding:9px 11px;
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:9px;
}
.attach-row .ico{
width:32px;height:32px;border-radius:6px;background:var(--surface);
display:grid;place-items:center;flex:none;color:var(--muted);
}
.attach-row .info{flex:1;min-width:0}
.attach-row .info .nm{font-size:12.5px;font-weight:500;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-row .info .meta{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px}
.attach-row .x{color:var(--muted-2);cursor:pointer;padding:4px}
.attach-row .x:hover{color:var(--danger)}
.attach-dz{
border:1.5px dashed var(--border);border-radius:9px;padding:18px;text-align:center;
color:var(--muted);font-size:12.5px;background:var(--surface-2);cursor:pointer;
}
.attach-dz:hover{border-color:var(--ink);color:var(--ink)}
/* правая панель публикации */
.kbe-aside{position:sticky;top:78px;display:flex;flex-direction:column;gap:12px;align-self:start}
.kbe-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
}
.kbe-card h4{
font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;
margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
/* пилюли статусов публикации */
.pub-row{display:flex;flex-direction:column;gap:6px}
.pub-row label{
display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface-2);
border:1.5px solid var(--border-soft);border-radius:9px;cursor:pointer;font-size:13px;
}
.pub-row label.on{border-color:var(--ink);background:var(--surface);box-shadow:0 0 0 3px rgba(14,14,12,.05)}
.pub-row label .d{
width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex:none;position:relative;
}
.pub-row label.on .d{border-color:var(--ink)}
.pub-row label.on .d::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--ink)}
.pub-row label .info{flex:1;min-width:0}
.pub-row label .info .nm{font-weight:500;color:var(--ink);font-size:12.5px;line-height:1.3}
.pub-row label .info .desc{font-size:11px;color:var(--muted);margin-top:1px}
.pub-row label .tag{
font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;flex:none;
}
/* мини-тэги */
.tag-chip{
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;background:var(--bg-soft);border-radius:99px;
font-size:11.5px;font-weight:500;color:var(--ink-2);margin:0 4px 4px 0;
}
.tag-chip .x{color:var(--muted-2);cursor:pointer;font-size:13px;line-height:1}
.tag-chip .x:hover{color:var(--danger)}
.tag-input{
display:flex;flex-wrap:wrap;align-items:center;gap:0;
padding:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;min-height:38px;
}
.tag-input input{
border:0;background:transparent;outline:0;font-size:12.5px;padding:4px 6px;flex:1;min-width:80px;
}
/* связанные статьи мини-список */
.related-li{
display:flex;align-items:center;gap:8px;padding:7px 10px;margin:0 -10px;border-radius:8px;cursor:pointer;
}
.related-li:hover{background:var(--bg-soft)}
.related-li .ico{
width:24px;height:24px;border-radius:5px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted);flex:none;
}
.related-li .nm{font-size:12.5px;line-height:1.3;letter-spacing:-.01em;flex:1;min-width:0}
.related-li .x{color:var(--muted-2);cursor:pointer;font-size:14px}
/* ===================================================================
MOBILE — проекты и задачи (мокапы iPhone)
=================================================================== */
.mp-page{
max-width:1480px;margin:0 auto;padding:40px 24px 60px;
font-family:'Inter',system-ui,sans-serif;
}
.mp-page .head{
display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px;
}
.mp-page .head h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.mp-page .head .sub{color:var(--muted);font-size:14px;max-width:680px;line-height:1.55}
/* галерея */
.mp-stage{
display:flex;gap:32px;overflow-x:auto;padding:30px 8px 40px;
scroll-snap-type:x mandatory;
}
.mp-stage::-webkit-scrollbar{height:10px}
.mp-stage::-webkit-scrollbar-track{background:#EDEAE2;border-radius:99px}
.mp-stage::-webkit-scrollbar-thumb{background:#A29F98;border-radius:99px}
.mp-frame{flex:none;width:380px;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.mp-frame .title{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:0 8px;display:flex;align-items:center;gap:8px}
.mp-frame .title .num{font-family:'JetBrains Mono',monospace;color:var(--ink);background:var(--surface);border:1px solid var(--border);padding:2px 7px;border-radius:5px}
.mp-frame .desc{font-size:12.5px;color:var(--muted);padding:0 8px;line-height:1.5}
/* phone-рамка */
.mp-phone{
width:380px;height:820px;border-radius:46px;
background:#0a0a0c;padding:8px;position:relative;
box-shadow:0 40px 80px -30px rgba(14,14,12,.45),0 12px 24px -10px rgba(14,14,12,.22);
}
.mp-screen{
width:100%;height:100%;border-radius:38px;overflow:hidden;
background:#FAF9F4;position:relative;display:flex;flex-direction:column;
}
.mp-screen .statusbar{
height:42px;display:flex;align-items:center;justify-content:space-between;
padding:14px 26px 0;font-size:13px;font-weight:600;color:var(--ink);
font-variant-numeric:tabular-nums;flex:none;z-index:4;
}
.mp-screen .statusbar.dark{color:#fff}
.mp-screen .statusbar .right{display:flex;align-items:center;gap:5px;font-size:11px}
.mp-screen .notch{
position:absolute;top:10px;left:50%;transform:translateX(-50%);
width:118px;height:30px;background:#0a0a0c;border-radius:18px;z-index:5;
}
.mp-screen .scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0 14px}
.mp-screen .pageh{
padding:6px 18px 16px;display:flex;align-items:center;gap:10px;
}
.mp-screen .pageh .icbtn{
width:34px;height:34px;border-radius:50%;background:var(--surface);
display:grid;place-items:center;color:var(--ink);border:1px solid var(--border);
}
.mp-screen .pageh h1{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0;flex:1}
.mp-screen .pageh.dark .icbtn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.mp-screen .pageh.dark h1{color:#fff}
/* нижний tab-бар */
.mp-tabbar{
position:absolute;bottom:10px;left:8px;right:8px;height:58px;
background:rgba(255,255,255,.85);backdrop-filter:blur(20px);
border-radius:22px;border:1px solid rgba(0,0,0,.06);
display:grid;grid-template-columns:repeat(4,1fr);padding:6px;
box-shadow:0 12px 24px -16px rgba(14,14,12,.2);
}
.mp-tabbar a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
font-size:10px;font-weight:500;color:var(--muted-2);border-radius:16px;
}
.mp-tabbar a.on{background:var(--ink);color:#fff}
/* FAB */
.mp-fab{
position:absolute;bottom:84px;right:20px;
width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(14,14,12,.5);
z-index:4;border:0;cursor:pointer;
}
/* ============ ОБЩИЕ ПРИМИТИВЫ для мобильных экранов ============ */
.m-chips{display:flex;gap:6px;overflow-x:auto;padding:0 18px 14px;flex:none}
.m-chips::-webkit-scrollbar{display:none}
.m-chips .chip{
padding:6px 13px;background:var(--surface);border:1px solid var(--border);border-radius:99px;
font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink-2);
}
.m-chips .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.m-card{
background:var(--surface);border:1px solid var(--border);border-radius:16px;
margin:0 18px 12px;padding:14px;
}
.m-card.compact{padding:12px 14px}
.m-card .row{display:flex;align-items:center;gap:10px}
.m-card .nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.m-card .meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.m-card .pr-bar{
height:5px;background:var(--bg-soft);border-radius:99px;overflow:hidden;margin-top:10px;
}
.m-card .pr-bar .fill{height:100%;background:var(--ink);border-radius:99px}
.m-cover{
height:74px;border-radius:12px;display:flex;align-items:flex-end;padding:10px 12px;color:#fff;
margin:-14px -14px 12px;
position:relative;overflow:hidden;
}
.m-cover .num{
font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;font-weight:600;
text-transform:uppercase;background:rgba(255,255,255,.18);padding:2px 8px;border-radius:99px;
backdrop-filter:blur(8px);
}
.m-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.m-st .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.m-st.run{background:#E8EEF7;color:#2B4F87}
.m-st.late{background:#F7E0DC;color:#A33524}
.m-st.pause{background:#FAF1DA;color:#9B6F1A}
.m-st.done{background:#E4F0E1;color:#2F6B3A}
/* мобильные поля */
.m-field{padding:0 18px 14px}
.m-field label{
display:block;font-size:11px;color:var(--muted);font-weight:500;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.m-field .ipt{
width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:13px 14px;font-size:14.5px;color:var(--ink);outline:0;font-family:inherit;
}
.m-field .ipt:focus{border-color:var(--ink)}
.m-field .ipt.big{font-size:18px;font-weight:600;letter-spacing:-.01em;padding:14px}
.m-field .ipt.area{min-height:88px;resize:none;line-height:1.5}
.m-field .ipt.sel{
display:flex;align-items:center;gap:10px;
}
.m-field .help{font-size:11.5px;color:var(--muted-2);margin-top:6px}
.m-field-row{display:flex;gap:8px;align-items:flex-end;padding:0 18px 14px}
.m-field-row > .m-field{flex:1;padding:0}
/* большая нижняя кнопка */
.m-cta{
position:absolute;bottom:14px;left:18px;right:18px;
background:var(--ink);color:#fff;border-radius:16px;padding:16px 18px;
display:flex;align-items:center;justify-content:space-between;
font-size:15px;font-weight:600;letter-spacing:-.01em;
border:0;cursor:pointer;z-index:3;box-shadow:0 12px 30px -10px rgba(14,14,12,.45);
}
/* шаги прогресса */
.m-steps{display:flex;align-items:center;gap:4px;padding:0 18px 14px}
.m-steps .s{flex:1;height:4px;background:var(--bg-soft);border-radius:99px}
.m-steps .s.on{background:var(--ink)}
.m-steps .s.cur{background:var(--ink)}
/* табы внутри экрана */
.m-tabs{
display:flex;gap:18px;padding:0 18px;border-bottom:1px solid var(--border);
margin-bottom:14px;
}
.m-tabs a{
font-size:13.5px;font-weight:500;color:var(--muted);padding:11px 0;
border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:-.01em;
}
.m-tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
/* блок «Аватарка» */
.m-avatar{
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-size:12px;font-weight:600;color:#fff;flex:none;
}
.m-avatar.lg{width:46px;height:46px;font-size:15px;border-radius:14px}
.m-avatar.sm{width:24px;height:24px;font-size:9.5px}
/* список задач */
.m-task{
display:flex;align-items:flex-start;gap:11px;padding:14px 18px;
border-bottom:1px solid var(--border-soft);
}
.m-task .ck{
width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);flex:none;margin-top:1px;
display:grid;place-items:center;background:var(--surface);
}
.m-task .ck.on{background:var(--ink);border-color:var(--ink);color:#fff}
.m-task .body{flex:1;min-width:0}
.m-task .body .t{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.m-task.done .body .t{text-decoration:line-through;color:var(--muted)}
.m-task .body .row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.m-task .body .due{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}
.m-task .body .due.late{color:var(--danger)}
/* участник */
.m-person{
display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--border-soft);
}
.m-person .info{flex:1;min-width:0}
.m-person .info .nm{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.m-person .info .role{font-size:11.5px;color:var(--muted);margin-top:1px}
.m-person .x{color:var(--muted-2);padding:6px;cursor:pointer;font-size:18px}
/* добавленные приглашения (чипы) */
.m-invites{display:flex;flex-direction:column;gap:8px;padding:0 18px 14px}
.m-invite{
display:flex;align-items:center;gap:10px;background:var(--surface);
border:1px solid var(--border);border-radius:12px;padding:10px 12px;
}
.m-invite .info{flex:1;min-width:0}
.m-invite .info .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.m-invite .info .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.m-invite .role-pill{
font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
padding:3px 8px;background:var(--bg-soft);border-radius:99px;color:var(--ink-2);
}
/* способ приглашения (segmented) */
.m-segment{
display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg-soft);border-radius:11px;padding:3px;
margin:0 18px 14px;
}
.m-segment a{padding:9px 6px;font-size:12.5px;font-weight:500;text-align:center;color:var(--ink-2);border-radius:8px}
.m-segment a.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px -2px rgba(14,14,12,.15)}
/* — описание-документ — */
.m-doc{padding:0 18px}
.m-doc h2{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:16px 0 8px;color:var(--ink)}
.m-doc h2:first-child{margin-top:0}
.m-doc p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
.m-doc .doc-photo{
margin:14px 0;border-radius:14px;overflow:hidden;height:160px;position:relative;
display:flex;align-items:flex-end;padding:12px;color:#fff;
}
.m-doc .doc-photo .cap{
font-size:11px;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:6px;backdrop-filter:blur(6px);
}
.m-doc .doc-file{
display:flex;align-items:center;gap:11px;background:var(--surface);
border:1px solid var(--border);border-radius:12px;padding:11px;margin-bottom:8px;
}
.m-doc .doc-file .fi-ic{
width:38px;height:38px;border-radius:8px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted);flex:none;
}
.m-doc .doc-file .nm{font-size:13px;font-weight:500;letter-spacing:-.01em}
.m-doc .doc-file .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.m-doc .doc-list{padding-left:18px;margin:0 0 12px}
.m-doc .doc-list li{font-size:14px;line-height:1.55;color:var(--ink-2);margin-bottom:4px}
.m-doc .doc-callout{
background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin:12px 0;
font-size:13px;line-height:1.55;color:var(--ink-2);display:flex;gap:10px;
}
/* — добавить блок (всплывающий) — */
.m-add-bar{
position:absolute;bottom:84px;left:18px;right:18px;
background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:6px;
display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
box-shadow:0 12px 30px -10px rgba(14,14,12,.2);z-index:3;
}
.m-add-bar a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:9px 0;border-radius:11px;font-size:11px;font-weight:500;color:var(--ink-2);
}
.m-add-bar a:hover{background:var(--bg-soft)}
/* — типы работ выбор — */
.m-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 18px 14px}
.m-work-grid .wt{
background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
padding:11px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.m-work-grid .wt.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.m-work-grid .wt .ico{
width:32px;height:32px;border-radius:9px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink);
}
.m-work-grid .wt.on .ico{background:rgba(255,255,255,.16);color:#fff}
.m-work-grid .wt .l{font-size:11px;font-weight:500;line-height:1.2}
/* отчёт — фото-сетка */
.m-photos{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 18px 14px;
}
.m-photos .ph,.m-photos .add{
aspect-ratio:1/1;border-radius:10px;
}
.m-photos .ph{position:relative;overflow:hidden}
.m-photos .ph .x{
position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;
background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:grid;place-items:center;backdrop-filter:blur(4px);
}
.m-photos .add{
background:var(--surface);border:1.5px dashed var(--border);
display:grid;place-items:center;color:var(--muted);font-size:18px;
}
/* материалы — мини-строка */
.m-mat{
display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
padding:11px 18px;border-bottom:1px solid var(--border-soft);
}
.m-mat .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.m-mat .qty{font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.m-mat .sum{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
/* ===================================================================
BOARD — настраиваемая канбан-доска
=================================================================== */
.bd-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:10px 14px;margin-bottom:14px;
}
.bd-views{
display:flex;background:var(--bg-soft);border-radius:9px;padding:3px;
}
.bd-views a{
padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink-2);border-radius:7px;
display:inline-flex;align-items:center;gap:6px;
}
.bd-views a.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px -2px rgba(14,14,12,.18)}
.bd-fltr{
display:inline-flex;align-items:center;gap:6px;padding:7px 11px;
background:var(--bg-soft);border-radius:8px;font-size:12px;color:var(--ink-2);font-weight:500;
cursor:pointer;border:1px solid transparent;
}
.bd-fltr:hover{background:var(--surface);border-color:var(--border)}
.bd-fltr.act{background:var(--ink);color:#fff;border-color:var(--ink)}
.bd-fltr .n{
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:99px;font-size:11px;
}
.bd-fltr.act .n{background:rgba(255,255,255,.16);color:#fff}
/* доска */
.bd-cols{
display:flex;gap:14px;overflow-x:auto;padding:0 4px 18px;
scroll-snap-type:x proximity;
}
.bd-cols::-webkit-scrollbar{height:10px}
.bd-cols::-webkit-scrollbar-track{background:transparent}
.bd-cols::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.bd-col{
flex:none;width:310px;background:#EFEDE6;border-radius:14px;
display:flex;flex-direction:column;max-height:calc(100vh - 240px);
scroll-snap-align:start;
}
.bd-col.over{outline:2px dashed var(--ink);outline-offset:-4px}
.bd-col-h{
padding:12px 14px;display:flex;align-items:center;gap:8px;
border-bottom:1px solid rgba(0,0,0,.05);
}
.bd-col-h .dot{
width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex:none;
border:1.5px solid rgba(0,0,0,.04);
}
.bd-col-h .ttl{
font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.bd-col-h .n{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
background:rgba(0,0,0,.05);padding:2px 7px;border-radius:99px;font-weight:500;
}
.bd-col-h .wip{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
margin-left:4px;font-weight:500;
}
.bd-col-h .wip.warn{color:#9B6F1A}
.bd-col-h .wip.over{color:var(--danger);background:#FBF3F1;padding:2px 7px;border-radius:5px}
.bd-col-h .grow{flex:1}
.bd-col-h .ic{
width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted);cursor:pointer;
}
.bd-col-h .ic:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.bd-col-cards{
flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;
}
.bd-col-cards::-webkit-scrollbar{width:6px}
.bd-col-cards::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:99px}
.bd-col-add{
padding:6px 8px 10px;
}
.bd-col-add button{
width:100%;padding:9px;background:transparent;border:1px dashed rgba(0,0,0,.16);
border-radius:9px;font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit;
}
.bd-col-add button:hover{border-color:var(--ink);color:var(--ink);background:rgba(255,255,255,.4)}
/* swimlane под-группа внутри колонки */
.bd-sub-h{
font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;
padding:4px 4px 2px;display:flex;align-items:center;gap:6px;margin-top:2px;
}
.bd-sub-h .ln{flex:1;height:1px;background:rgba(0,0,0,.06)}
/* ============ КАРТОЧКА ============ */
.bd-card{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
padding:11px 12px;cursor:grab;position:relative;
transition:border-color .1s,transform .08s;
}
.bd-card:hover{border-color:#C8C5BE;transform:translateY(-1px)}
.bd-card:active{cursor:grabbing}
.bd-card .cover{
height:5px;margin:-11px -12px 10px;border-radius:11px 11px 0 0;
}
.bd-card .top{
display:flex;align-items:center;gap:6px;margin-bottom:6px;
}
.bd-card .top .id{
font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);font-weight:500;
}
.bd-card .pr{
display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;
font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
.bd-card .pr.urg{background:var(--danger);color:#fff}
.bd-card .pr.hi{background:#FAF1DA;color:#9B6F1A}
.bd-card .pr.med{background:#E8EEF7;color:#2B4F87}
.bd-card .pr.low{background:var(--bg-soft);color:var(--muted)}
.bd-card .pr.bug{background:#F7E0DC;color:#A33524}
.bd-card .pr.idea{background:#E4F0E1;color:#2F6B3A}
.bd-card .pr .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.bd-card .ttl{
font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.4;color:var(--ink);
margin-bottom:8px;
}
.bd-card .proj{
font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.bd-card .proj .sw{width:10px;height:10px;border-radius:3px;flex:none}
.bd-card .proj .nm{font-weight:500;color:var(--ink-2)}
.bd-card .proj .id{
margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);
}
.bd-card .labels{
display:flex;gap:3px;margin-bottom:8px;flex-wrap:wrap;
}
.bd-card .labels .l{
height:4px;width:32px;border-radius:99px;
}
.bd-card .progress{
display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:8px;
}
.bd-card .progress .bar{
flex:1;height:4px;background:var(--bg-soft);border-radius:99px;overflow:hidden;
}
.bd-card .progress .bar .f{height:100%;background:var(--ink);border-radius:99px}
.bd-card .progress .n{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bd-card .foot{
display:flex;align-items:center;gap:6px;
}
.bd-card .foot .avs{display:inline-flex}
.bd-card .foot .avs .av{
width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:9.5px;font-weight:600;margin-right:-5px;
border:1.5px solid var(--surface);
}
.bd-card .foot .grow{flex:1}
.bd-card .foot .m{
display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);font-weight:500;
}
.bd-card .foot .m.late{color:var(--danger)}
.bd-card .foot .m.due{color:#9B6F1A}
/* состояния */
.bd-card.blocked{
background:#FBF3F1;border-color:#F0CFC8;
}
.bd-card.blocked .cover{background:linear-gradient(90deg,#A33524,#7A1F12)}
.bd-card.draft{opacity:.7;border-style:dashed}
/* колонка-плюс (добавление) */
.bd-add-col{
flex:none;width:310px;border-radius:14px;
border:1.5px dashed rgba(0,0,0,.18);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
padding:30px 18px;color:var(--muted);cursor:pointer;min-height:240px;
background:rgba(255,255,255,.3);
}
.bd-add-col:hover{border-color:var(--ink);color:var(--ink);background:rgba(255,255,255,.6)}
.bd-add-col .ic{
width:42px;height:42px;border-radius:12px;background:var(--surface);
display:grid;place-items:center;color:inherit;
}
.bd-add-col .l{font-size:13.5px;font-weight:500}
.bd-add-col .h{font-size:11px;color:var(--muted);text-align:center;line-height:1.5;max-width:200px}
/* мини-форма добавления колонки в открытом состоянии (показываем пример) */
.bd-add-col.open{
align-items:stretch;justify-content:flex-start;padding:14px;background:var(--surface);
border-style:solid;border-color:var(--ink);color:var(--ink);
}
.bd-add-col.open .h{text-align:left;max-width:none;margin-bottom:8px}
.bd-add-col.open input{
width:100%;border:1px solid var(--border);border-radius:9px;padding:9px 11px;
font-family:inherit;font-size:13px;color:var(--ink);background:var(--surface-2);outline:0;
}
.bd-add-col.open .colors{
display:flex;gap:5px;margin-top:8px;
}
.bd-add-col.open .colors .c{
width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;
}
.bd-add-col.open .colors .c.on{border-color:var(--ink)}
.bd-add-col.open .acts{display:flex;gap:6px;margin-top:10px}
.bd-add-col.open .acts button{
flex:1;padding:8px;border-radius:8px;border:0;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.bd-add-col.open .acts .ok{background:var(--ink);color:#fff}
.bd-add-col.open .acts .ca{background:var(--bg-soft);color:var(--ink-2)}
/* ===================================================================
SERVICE CENTER — сервисный центр оборудования
=================================================================== */
/* статус-чипы ремонта (8 этапов) */
.sv-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;line-height:1.4}
.sv-st .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.sv-st.intake{background:#EFEDE6;color:#777268}
.sv-st.diag{background:#E8EEF7;color:#2B4F87}
.sv-st.approve{background:#FAF1DA;color:#9B6F1A}
.sv-st.parts{background:#F0E8DD;color:#7E5832}
.sv-st.repair{background:#E8E8F2;color:#4F4587}
.sv-st.test{background:#E8F2EC;color:#3F7A4E}
.sv-st.ready{background:#0E0E0C;color:#fff}
.sv-st.done{background:#E4F0E1;color:#2F6B3A}
.sv-st.decline{background:#F7E0DC;color:#A33524}
/* линейка прогресса этапов */
.sv-flow{display:flex;align-items:center;gap:2px;font-size:10px;color:var(--muted);margin-top:6px;font-family:'JetBrains Mono',monospace}
.sv-flow .stp{padding:2px 7px;border-radius:4px;background:var(--bg-soft);font-weight:500;white-space:nowrap}
.sv-flow .stp.on{background:var(--ink);color:#fff}
.sv-flow .stp.late{background:var(--danger);color:#fff}
.sv-flow .ar{color:var(--muted-2)}
/* мини-фото устройства в таблице */
.sv-dev{display:flex;align-items:center;gap:10px}
.sv-dev .pic{
width:42px;height:42px;border-radius:8px;flex:none;
position:relative;overflow:hidden;
}
.sv-dev .pic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 65%)}
.sv-dev .nm{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.sv-dev .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.sv-cl{display:flex;align-items:center;gap:8px}
.sv-cl .av{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:9.5px;font-weight:600;flex:none}
.sv-cl .nm{font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.sv-cl .meta{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.sv-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);background:var(--bg-soft);padding:3px 8px;border-radius:6px}
.sv-num.late{background:#F7E0DC;color:#A33524}
.sv-num.ready{background:var(--ink);color:#fff}
/* фото-галерея в карточке */
.sv-gallery{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.sv-gallery .big{
grid-column:span 2;grid-row:span 2;
aspect-ratio:auto;border-radius:14px;overflow:hidden;position:relative;
background:linear-gradient(135deg,#1E3A5F,#4A6FA5);
}
.sv-gallery .big::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.16),transparent 60%)}
.sv-gallery .big .lbl{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.5);color:#fff;font-size:10.5px;padding:3px 8px;border-radius:5px;backdrop-filter:blur(6px);font-family:'JetBrains Mono',monospace}
.sv-gallery .small{aspect-ratio:1/1;border-radius:10px;position:relative;overflow:hidden}
.sv-gallery .small::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.16),transparent 60%)}
.sv-gallery .small .lbl{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.5);color:#fff;font-size:9.5px;padding:1px 5px;border-radius:4px;backdrop-filter:blur(6px);font-family:'JetBrains Mono',monospace}
.sv-gallery .add{
aspect-ratio:1/1;border-radius:10px;background:var(--surface-2);border:1.5px dashed var(--border);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:10.5px;font-weight:500;cursor:pointer;
}
/* диагностика — чек-лист */
.sv-check{
padding:11px 14px;border-bottom:1px solid var(--border-soft);
display:flex;align-items:flex-start;gap:11px;
}
.sv-check .ck{
width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border);
background:var(--surface);display:grid;place-items:center;flex:none;margin-top:1px;color:transparent;
}
.sv-check.ok .ck{background:var(--positive);border-color:var(--positive);color:#fff}
.sv-check.fail .ck{background:var(--danger);border-color:var(--danger);color:#fff}
.sv-check.skip .ck{background:var(--bg-soft);border-color:var(--border)}
.sv-check .body{flex:1;min-width:0}
.sv-check .body .t{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.sv-check .body .note{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.sv-check.fail .body .note{color:var(--danger)}
.sv-check .res{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
background:var(--bg-soft);padding:2px 7px;border-radius:5px;flex:none;font-weight:500;
}
.sv-check.fail .res{background:#FBF3F1;color:var(--danger)}
.sv-check.ok .res{background:#E4F0E1;color:var(--positive)}
/* запчасти/работы */
.sv-line{
display:grid;grid-template-columns:38px 1fr 100px 100px 32px;gap:14px;align-items:center;
padding:11px 16px;border-bottom:1px solid var(--border-soft);
}
.sv-line .ic{
width:38px;height:38px;border-radius:8px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted);flex:none;
}
.sv-line .body .nm{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.sv-line .body .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sv-line .body .meta .st{
padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}
.sv-line .body .meta .st.ord{background:#FAF1DA;color:#9B6F1A}
.sv-line .body .meta .st.go{background:#E4F0E1;color:#2F6B3A}
.sv-line .body .meta .st.hold{background:#F7E0DC;color:#A33524}
.sv-line .qty{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted-2);text-align:right;font-family:'JetBrains Mono',monospace}
.sv-line .qty .n{color:var(--ink);font-weight:600;font-size:13.5px;display:block}
.sv-line .sum{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px}
.sv-line .x{color:var(--muted-2);cursor:pointer;text-align:center}
.sv-line .x:hover{color:var(--danger)}
/* таймлайн ремонта */
.sv-timeline{padding:4px 0}
.sv-event{
display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:flex-start;
padding:9px 0;position:relative;
}
.sv-event::before{
content:"";position:absolute;left:11px;top:30px;bottom:-9px;width:1.5px;background:var(--border-soft);
}
.sv-event:last-child::before{display:none}
.sv-event .dot{
width:24px;height:24px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);
display:grid;place-items:center;color:var(--muted);font-size:11px;
}
.sv-event.cur .dot{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,12,.08)}
.sv-event.done .dot{background:var(--positive);border-color:var(--positive);color:#fff}
.sv-event.future .dot{opacity:.5}
.sv-event.future .body{opacity:.5}
.sv-event .body .t{font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.sv-event .body .who{font-size:10.5px;color:var(--muted);margin-top:1px}
.sv-event .when{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);text-align:right;line-height:1.4;font-weight:500}
/* sms-сообщение клиенту */
.sv-sms{
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;
padding:11px 13px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
position:relative;
}
.sv-sms::before{
content:"SMS";position:absolute;top:-8px;left:13px;background:var(--ink);color:#fff;
font-size:8.5px;font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:99px;font-family:'JetBrains Mono',monospace;
}
/* ===================================================================
HR — сотрудники, подразделения, отчёты, отпуска
=================================================================== */
/* строка сотрудника с фото */
.hr-emp{display:flex;align-items:center;gap:11px}
.hr-emp .ph{
width:36px;height:36px;border-radius:10px;flex:none;
display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.02em;
}
.hr-emp .ph.lg{width:64px;height:64px;border-radius:14px;font-size:18px}
.hr-emp .ph.xl{width:96px;height:96px;border-radius:20px;font-size:24px}
.hr-emp .info .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.hr-emp .info .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
/* статусы сотрудника */
.hr-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em}
.hr-st .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.hr-st.work{background:#E4F0E1;color:#2F6B3A}
.hr-st.trial{background:#FAF1DA;color:#9B6F1A}
.hr-st.vac{background:#E8EEF7;color:#2B4F87}
.hr-st.sick{background:#F0E8DD;color:#7E5832}
.hr-st.leave{background:#F7E0DC;color:#A33524}
.hr-st.remote{background:#EFEDFB;color:#5B3F84}
.hr-st.fired{background:var(--bg-soft);color:var(--muted-2);text-decoration:line-through}
/* должность с грейдом */
.hr-pos .gr{
display:inline-flex;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
padding:1px 6px;border-radius:4px;background:var(--bg-soft);color:var(--ink);margin-left:5px;
}
/* остаток отпуска (бар) */
.hr-vac-bar{
display:flex;align-items:center;gap:8px;font-size:11.5px;min-width:130px;
}
.hr-vac-bar .bar{
flex:1;height:5px;background:var(--bg-soft);border-radius:99px;overflow:hidden;
}
.hr-vac-bar .bar .f{height:100%;background:var(--ink);border-radius:99px}
.hr-vac-bar .bar .f.warn{background:#9B6F1A}
.hr-vac-bar .bar .f.over{background:var(--danger)}
.hr-vac-bar .n{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
/* мини-табель — сетка месяца 5×7 */
.hr-ts{
display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
font-family:'JetBrains Mono',monospace;font-size:10px;text-align:center;
}
.hr-ts .day{
aspect-ratio:1/1;border-radius:5px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted-2);font-weight:500;
}
.hr-ts .day.work{background:#D6E0F0;color:#2B4F87;font-weight:600}
.hr-ts .day.vac{background:#F0E2B0;color:#9B6F1A;font-weight:600}
.hr-ts .day.sick{background:#F2C2B5;color:#A33524;font-weight:600}
.hr-ts .day.off{background:var(--border-soft);color:var(--muted-2)}
.hr-ts .day.tod{box-shadow:0 0 0 2px var(--ink);position:relative;z-index:1}
/* документ с истечением */
.hr-doc{
display:flex;align-items:center;gap:11px;padding:11px 14px;
border-bottom:1px solid var(--border-soft);
}
.hr-doc:last-child{border-bottom:0}
.hr-doc .ic{
width:32px;height:32px;border-radius:7px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted);flex:none;
}
.hr-doc.warn .ic{background:#FAF1DA;color:#9B6F1A}
.hr-doc.expire .ic{background:#F7E0DC;color:#A33524}
.hr-doc.ok .ic{background:#E4F0E1;color:#2F6B3A}
.hr-doc .body{flex:1;min-width:0}
.hr-doc .body .nm{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.hr-doc .body .meta{font-size:11px;color:var(--muted);margin-top:1px;font-family:'JetBrains Mono',monospace}
.hr-doc .due{
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);text-align:right;font-weight:500;
}
.hr-doc.warn .due{color:#9B6F1A}
.hr-doc.expire .due{color:var(--danger)}
/* подразделение / дерево */
.hr-tree{display:flex;flex-direction:column;gap:6px}
.hr-tree .node{
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 14px;
display:flex;align-items:center;gap:11px;
}
.hr-tree .node .ic{
width:30px;height:30px;border-radius:8px;flex:none;
display:grid;place-items:center;font-size:11px;font-weight:600;
}
.hr-tree .node .info{flex:1;min-width:0}
.hr-tree .node .info .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.hr-tree .node .info .meta{font-size:11px;color:var(--muted);margin-top:2px}
.hr-tree .node .stats{display:flex;gap:14px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hr-tree .node .stats b{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace}
.hr-tree .children{padding-left:30px;display:flex;flex-direction:column;gap:6px;position:relative}
.hr-tree .children::before{
content:"";position:absolute;left:14px;top:-3px;bottom:14px;width:1.5px;background:var(--border);
}
.hr-tree .children .node{position:relative}
.hr-tree .children .node::before{
content:"";position:absolute;left:-16px;top:50%;width:14px;height:1.5px;background:var(--border);
}
/* воронка найма */
.hr-funnel{display:flex;flex-direction:column;gap:4px}
.hr-funnel .step{
display:grid;grid-template-columns:120px 1fr 80px;gap:10px;align-items:center;font-size:12px;
}
.hr-funnel .step .label{color:var(--ink-2)}
.hr-funnel .step .bar{
height:24px;background:var(--ink);border-radius:5px;display:flex;align-items:center;padding:0 10px;color:#fff;
font-family:'JetBrains Mono',monospace;font-weight:600;font-size:11px;
}
.hr-funnel .step .conv{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500;text-align:right}
/* ленточный календарь — 31 день */
.hr-tape{
display:grid;grid-template-columns:repeat(31,1fr);gap:2px;
}
.hr-tape .cell{
height:14px;border-radius:2px;background:var(--bg-soft);
}
.hr-tape .cell.w{background:#9CB7DB}
.hr-tape .cell.v{background:#E8C76B}
.hr-tape .cell.s{background:#D9A18E}
.hr-tape .cell.off{background:var(--border-soft)}
.hr-tape .cell.tod{outline:2px solid var(--ink);outline-offset:-1px;z-index:1}
.hr-tape .cell.hol{background:#E8C5CF}
/* пилюли для оборудования у сотрудника */
.hr-asset{
display:flex;align-items:center;gap:9px;padding:9px 11px;
background:var(--surface-2);border:1px solid var(--border-soft);border-radius:9px;
}
.hr-asset .ic{
width:28px;height:28px;border-radius:7px;background:var(--surface);border:1px solid var(--border);
display:grid;place-items:center;color:var(--muted);flex:none;
}
.hr-asset .body{flex:1;min-width:0}
.hr-asset .body .nm{font-size:12.5px;font-weight:500;letter-spacing:-.01em}
.hr-asset .body .meta{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
/* мини-чарт с заливкой */
.hr-chart{
background:var(--surface-2);border-radius:10px;padding:12px;
}
/* ===================================================================
MOBILE KB — мобильная база знаний (доп. примитивы)
=================================================================== */
.mp-kb-hero{
margin:0 18px 14px;border-radius:18px;color:#fff;
padding:18px 18px 16px;position:relative;overflow:hidden;
}
.mp-kb-hero .eyebrow{
font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
color:rgba(255,255,255,.65);margin-bottom:6px;
}
.mp-kb-hero h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px;line-height:1.2}
.mp-kb-hero .sub{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.45}
.mp-kb-hero .search{
margin-top:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22);border-radius:12px;
padding:11px 13px;display:flex;align-items:center;gap:10px;color:#fff;
}
.mp-kb-hero .search input{
border:0;background:transparent;outline:0;flex:1;color:#fff;font-size:13.5px;font-family:inherit;
}
.mp-kb-hero .search input::placeholder{color:rgba(255,255,255,.55)}
.mp-kb-hero .pop{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.mp-kb-hero .pop a{
font-size:11px;padding:4px 10px;border-radius:99px;
background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.16);
}
/* плитки категорий */
.mp-kb-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px 14px}
.mp-kb-cat{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:13px 13px 11px;display:flex;flex-direction:column;gap:6px;min-height:96px;
}
.mp-kb-cat .ic{
width:34px;height:34px;border-radius:9px;
display:grid;place-items:center;color:#fff;
}
.mp-kb-cat .nm{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin-top:auto}
.mp-kb-cat .meta{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
/* строка статьи (одна в списке) */
.mp-art{
display:flex;align-items:center;gap:11px;padding:13px 18px;
border-bottom:1px solid var(--border-soft);
}
.mp-art .ph{
width:48px;height:48px;border-radius:10px;flex:none;overflow:hidden;position:relative;
}
.mp-art .body{flex:1;min-width:0}
.mp-art .body .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.mp-art .body .nm mark{background:#FFE9B0;color:var(--ink);padding:0 2px;border-radius:3px}
.mp-art .body .meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mp-art .body .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.mp-art .body .snip{font-size:12px;color:var(--muted);line-height:1.5;margin-top:5px}
.mp-art .body .snip mark{background:#FFE9B0;color:var(--ink);padding:0 2px;border-radius:3px}
.mp-art .star{color:var(--muted-2);padding:4px}
.mp-art .star.on{color:#9B6F1A}
/* TOC drawer overlay */
.mp-toc{
position:absolute;left:0;right:0;top:0;bottom:0;
background:rgba(14,14,12,.4);backdrop-filter:blur(4px);
display:flex;flex-direction:column;justify-content:flex-end;z-index:10;
}
.mp-toc .panel{
background:var(--surface);border-radius:24px 24px 0 0;padding:8px 0 14px;
max-height:80%;display:flex;flex-direction:column;
}
.mp-toc .panel .grip{
width:42px;height:4px;background:var(--border);border-radius:99px;margin:6px auto 4px;
}
.mp-toc .panel .h{
display:flex;align-items:center;justify-content:space-between;padding:6px 20px 10px;
}
.mp-toc .panel .h .ttl{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mp-toc .progress{
display:flex;align-items:center;gap:10px;padding:0 20px 12px;font-size:11px;color:var(--muted);
}
.mp-toc .progress .bar{flex:1;height:5px;background:var(--bg-soft);border-radius:99px;overflow:hidden}
.mp-toc .progress .bar .f{height:100%;background:var(--ink);border-radius:99px}
.mp-toc .progress .n{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-toc .items{padding:6px 14px 8px;overflow-y:auto}
.mp-toc .item{
display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:flex-start;
padding:10px 6px;border-radius:10px;
}
.mp-toc .item:hover{background:var(--surface-2)}
.mp-toc .item .n{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);font-weight:600;margin-top:1px;text-align:right;
}
.mp-toc .item .t{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink-2)}
.mp-toc .item.h3 .t{font-size:12.5px;color:var(--muted);padding-left:14px}
.mp-toc .item.read .t{color:var(--muted-2)}
.mp-toc .item.cur{background:var(--bg-soft)}
.mp-toc .item.cur .t{color:var(--ink);font-weight:600}
.mp-toc .item.cur .n{color:var(--ink)}
.mp-toc .item .rt{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500}
/* ИЗОБРАЖЕНИЯ И КОНТЕНТ в статье */
.mp-doc h1.t{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;line-height:1.2}
.mp-doc .lead{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.mp-doc .crumbs{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:10px}
.mp-doc h2{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:20px 0 10px;color:var(--ink)}
.mp-doc h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin:16px 0 8px;color:var(--ink)}
.mp-doc p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.mp-doc ul,.mp-doc ol{padding-left:22px;margin:0 0 14px}
.mp-doc li{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:6px}
.mp-doc code{
background:var(--bg-soft);padding:1px 6px;border-radius:5px;
font-family:'JetBrains Mono',monospace;font-size:.86em;color:var(--ink);
}
.mp-doc pre{
background:#0E0E0C;color:#E5E2DA;padding:14px;border-radius:11px;overflow:auto;
font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.55;
margin:0 -2px 14px;
}
.mp-doc .callout{
background:var(--accent-soft);border-radius:12px;padding:13px 15px;margin:14px 0;
font-size:13.5px;line-height:1.55;color:var(--ink-2);display:flex;gap:10px;
}
.mp-doc .callout .ic{flex:none;color:var(--ink);margin-top:1px}
.mp-doc .fig{margin:16px 0}
.mp-doc .fig .ph{
height:180px;border-radius:12px;color:#fff;
display:flex;align-items:flex-end;padding:12px;
}
.mp-doc .fig .ph .cap{
font-size:11px;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:6px;backdrop-filter:blur(6px);
}
.mp-doc .fig .figcap{font-size:11.5px;color:var(--muted);text-align:center;margin-top:7px}
/* нижняя плашка «была ли полезна?» */
.mp-helpful{
margin:24px 0 90px;padding:18px;background:var(--surface-2);border:1px solid var(--border);
border-radius:14px;text-align:center;
}
.mp-helpful h4{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px}
.mp-helpful .row{display:flex;gap:10px;justify-content:center}
.mp-helpful .row button{
background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
padding:10px 18px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;
display:inline-flex;align-items:center;gap:6px;font-family:inherit;
}
.mp-helpful .row button.up{border-color:#B8D5BB;background:#F4FAF1;color:#2F6B3A}
.mp-helpful .row button.down{border-color:#F0CFC8;background:#FBF3F1;color:var(--danger)}
/* плавающие действия внутри статьи */
.mp-art-fab{
position:absolute;bottom:84px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:3;
}
.mp-art-fab button{
width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
display:grid;place-items:center;color:var(--ink);cursor:pointer;
box-shadow:0 10px 24px -10px rgba(14,14,12,.25);
}
.mp-art-fab button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* поиск-плашка */
.mp-search-bar{
margin:0 18px 12px;background:var(--surface);border:1.5px solid var(--ink);
border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:10px;
}
.mp-search-bar input{border:0;background:transparent;outline:0;flex:1;font-size:14px;font-family:inherit;color:var(--ink)}
.mp-search-bar .x{color:var(--muted);font-size:18px;cursor:pointer}
/* недавние / подсказки в поиске */
.mp-srec{
display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border-soft);
}
.mp-srec .ic{width:30px;height:30px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--muted);flex:none}
.mp-srec .nm{flex:1;font-size:13.5px;color:var(--ink-2)}
.mp-srec .arr{color:var(--muted-2)}
/* фильтры поиска */
.mp-search-fltr{display:flex;gap:6px;overflow-x:auto;padding:0 18px 12px}
.mp-search-fltr::-webkit-scrollbar{display:none}
/* ===================================================================
KB-ADMIN — «темы / статьи раздела»
=================================================================== */
.kba-grid{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
/* ───── ЛЕВАЯ ПАНЕЛЬ: карточки тем ───── */
.kba-cats{display:flex;flex-direction:column;gap:10px}
.kba-cat{
display:flex;align-items:center;gap:14px;
padding:14px 16px;background:var(--surface);
border-radius:16px;border:1px solid var(--border);
cursor:pointer;transition:border-color .1s,transform .08s;
}
.kba-cat:hover{border-color:#C8C5BE}
.kba-cat .ic{
width:44px;height:44px;border-radius:12px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink-2);flex:none;font-size:18px;
}
.kba-cat .info{flex:1;min-width:0}
.kba-cat .info .nm{
font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kba-cat .info .sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:500}
.kba-cat .acts{display:flex;align-items:center;gap:4px}
.kba-cat .acts .a{
width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
color:var(--muted-2);cursor:pointer;
}
.kba-cat .acts .a:hover{background:var(--bg-soft);color:var(--ink)}
.kba-cat .acts .a.edit{color:#2B4F87}
.kba-cat .acts .a.users{color:#2B4F87}
/* активная (чёрная) */
.kba-cat.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.kba-cat.active .ic{background:rgba(255,255,255,.1);color:#fff}
.kba-cat.active .info .nm{color:#fff}
.kba-cat.active .info .sub{color:rgba(255,255,255,.55)}
.kba-cat.active .acts .a{color:rgba(255,255,255,.55)}
.kba-cat.active .acts .a:hover{background:rgba(255,255,255,.1);color:#fff}
.kba-cat.active .acts .a.edit,.kba-cat.active .acts .a.users{color:#9CB7DB}
/* ───── ПРАВАЯ ПАНЕЛЬ: статьи ───── */
.kba-articles{
background:var(--surface);border:1px solid var(--border);border-radius:18px;
overflow:hidden;
}
.kba-articles-h{
display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
padding:20px 24px 18px;border-bottom:1px solid var(--border-soft);
}
.kba-articles-h .eyebrow{
font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);
letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-weight:600;
}
.kba-articles-h h2{
font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:10px;
}
.kba-articles-h .cnt{font-size:13.5px;color:var(--muted);margin-top:6px}
.kba-art{
display:grid;grid-template-columns:44px 56px 1fr auto;gap:18px;align-items:center;
padding:18px 24px;border-bottom:1px solid var(--border-soft);
}
.kba-art:last-child{border-bottom:0}
.kba-art:hover{background:var(--surface-2)}
.kba-art .n{
font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted-2);font-weight:500;text-align:center;
}
.kba-art .ph{
width:56px;height:56px;border-radius:12px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--muted);flex:none;
position:relative;overflow:hidden;
}
.kba-art .ph.photo::after{
content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.16),transparent 60%);
}
.kba-art .info .nm{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.kba-art .info .sub{font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:500}
.kba-art .acts{display:flex;gap:6px;align-items:center}
.kba-art .acts .a{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
color:var(--muted-2);cursor:pointer;
}
.kba-art .acts .a:hover{background:var(--bg-soft);color:var(--ink)}
.kba-art .acts .a.edit{color:#2B4F87}
.kba-art .acts .a.users{color:#2B4F87}
/* кнопка «+ Новая статья» внутри панели */
.kba-art-new{
position:absolute;top:24px;right:24px;
background:var(--ink);color:#fff;border:0;border-radius:99px;
padding:9px 16px;font-size:13px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;font-family:inherit;
}
.kba-art-new:hover{background:#000}
/* кнопка «+» в подвале списка */
.kba-art-more{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px 24px;color:var(--muted);font-size:12.5px;font-weight:500;
background:var(--surface-2);
}
/* ===================================================================
MOBILE KB-APP — поиск/темы/статьи/чтение (стиль admin)
=================================================================== */
/* большое поле поиска на главной KB */
.mkb-search{
margin:0 18px 18px;background:var(--surface);border:1.5px solid var(--border);
border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:10px;
}
.mkb-search input{border:0;background:transparent;outline:0;flex:1;font-size:14.5px;color:var(--ink);font-family:inherit}
.mkb-search input::placeholder{color:var(--muted-2)}
.mkb-search .kbd{
background:var(--bg-soft);color:var(--muted);font-family:'JetBrains Mono',monospace;
font-size:10px;padding:2px 6px;border-radius:4px;
}
/* строка темы (карточка в списке) */
.mkb-cat{
display:flex;align-items:center;gap:13px;
padding:14px 16px;margin:0 18px 8px;
background:var(--surface);border:1px solid var(--border);border-radius:14px;
}
.mkb-cat .ic{
width:42px;height:42px;border-radius:11px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink-2);font-size:18px;flex:none;
}
.mkb-cat .info{flex:1;min-width:0}
.mkb-cat .nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkb-cat .sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:500}
.mkb-cat .arr{color:var(--muted-2);flex:none}
.mkb-cat.act{background:var(--ink)}
.mkb-cat.act .ic{background:rgba(255,255,255,.1);color:#fff}
.mkb-cat.act .nm{color:#fff}
.mkb-cat.act .sub{color:rgba(255,255,255,.55)}
.mkb-cat.act .arr{color:#fff}
/* строка статьи в категории (admin-стиль) */
.mkb-art{
display:grid;grid-template-columns:24px 44px 1fr auto;gap:12px;align-items:center;
padding:13px 18px;border-bottom:1px solid var(--border-soft);
}
.mkb-art .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);font-weight:600;text-align:center}
.mkb-art .ph{
width:44px;height:44px;border-radius:10px;flex:none;
display:grid;place-items:center;color:var(--muted);background:var(--bg-soft);
position:relative;overflow:hidden;
}
.mkb-art .ph.photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 60%)}
.mkb-art .body .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.mkb-art .body .sub{font-size:11px;color:var(--muted);margin-top:3px;font-weight:500}
.mkb-art .arr{color:var(--muted-2)}
/* hero статьи (наверху третьего экрана) */
.mkb-hero{
color:#fff;padding:18px 22px 18px;position:relative;
}
.mkb-hero .crumb{
font-size:11px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.mkb-hero h1{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.2;color:#fff}
.mkb-hero .meta{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.78)}
.mkb-hero .meta .av{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:9.5px;font-weight:600}
/* плашки выхода/КБЖУ под hero */
.mkb-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
margin:14px 18px 18px;
}
.mkb-stat{
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 10px;text-align:center;
}
.mkb-stat .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.mkb-stat .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;margin-top:2px;letter-spacing:-.01em}
/* состав блюда — табличка */
.mkb-ing{
border-top:1px solid var(--border-soft);
}
.mkb-ing .row{
display:grid;grid-template-columns:1fr 70px 64px;gap:8px;align-items:center;
padding:9px 18px;border-bottom:1px solid var(--border-soft);font-size:13px;
}
.mkb-ing .row.h{
background:var(--surface-2);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:7px 18px;
}
.mkb-ing .row .nm{color:var(--ink-2)}
.mkb-ing .row .qty{font-family:'JetBrains Mono',monospace;color:var(--ink);text-align:right;font-weight:500}
.mkb-ing .row .sum{font-family:'JetBrains Mono',monospace;color:var(--muted);text-align:right}
.mkb-ing .total{
display:grid;grid-template-columns:1fr 70px 64px;gap:8px;align-items:center;
padding:11px 18px;background:#0E0E0C;color:#fff;font-size:13px;
}
.mkb-ing .total .l{font-weight:600}
.mkb-ing .total .v{font-family:'JetBrains Mono',monospace;text-align:right;font-weight:600}
/* шаги приготовления */
.mkb-step{
display:grid;grid-template-columns:32px 1fr;gap:14px;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.mkb-step .n{
width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace;
}
.mkb-step .body{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.mkb-step .body b{color:var(--ink)}
.mkb-step .body .time{
display:inline-flex;align-items:center;gap:4px;margin-top:6px;
font-size:11px;color:var(--muted);background:var(--bg-soft);padding:2px 8px;border-radius:99px;font-family:'JetBrains Mono',monospace;font-weight:600;
}
/* фото готового блюда */
.mkb-photo{
margin:14px 18px 0;border-radius:14px;height:200px;
position:relative;overflow:hidden;
}
.mkb-photo .cap{
position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.5);color:#fff;
font-size:10.5px;padding:3px 9px;border-radius:6px;backdrop-filter:blur(6px);font-family:'JetBrains Mono',monospace;font-weight:500;
}
/* ===================================================================
MOBILE BIZ — карточки компаний (мобильные)
=================================================================== */
/* hero компании на градиенте/фото */
.mb-hero{
position:relative;color:#fff;padding:14px 18px 20px;overflow:hidden;
}
.mb-hero .top-row{
display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
}
.mb-hero .biz-st{
display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
background:rgba(255,255,255,.16);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);
font-size:11px;font-weight:600;color:#fff;
}
.mb-hero .biz-st.open .d{background:#7CD491}
.mb-hero .biz-st.closed .d{background:#E08A78}
.mb-hero .biz-st .d{width:6px;height:6px;border-radius:50%}
.mb-hero .logo{
width:60px;height:60px;border-radius:14px;
background:rgba(255,255,255,.95);color:var(--ink);
display:grid;place-items:center;font-weight:700;font-size:18px;letter-spacing:-.02em;
border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 20px -8px rgba(0,0,0,.3);
margin-bottom:14px;
}
.mb-hero .biz-type{
font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
color:rgba(255,255,255,.7);margin-bottom:5px;
}
.mb-hero h1{
font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.2;color:#fff;
}
.mb-hero .desc{font-size:13px;color:rgba(255,255,255,.78);margin-top:8px;line-height:1.5}
.mb-hero .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,255,255,.7);margin-top:12px;flex-wrap:wrap}
.mb-hero .meta .dot{width:3px;height:3px;background:rgba(255,255,255,.4);border-radius:50%}
/* мини-KPI ряд под hero */
.mb-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
padding:14px 18px 0;
}
.mb-stat{
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 11px;
}
.mb-stat .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.mb-stat .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;margin-top:2px;letter-spacing:-.01em}
.mb-stat .v .u{font-size:10px;color:var(--muted);font-weight:500;font-family:inherit}
/* горизонтальные табы внутри карточки */
.mb-biz-tabs{
display:flex;gap:18px;overflow-x:auto;
padding:6px 18px 0;border-bottom:1px solid var(--border);margin:14px 0 0;
}
.mb-biz-tabs::-webkit-scrollbar{display:none}
.mb-biz-tabs a{
font-size:13.5px;font-weight:500;color:var(--muted);padding:11px 0;white-space:nowrap;
border-bottom:2px solid transparent;margin-bottom:-1px;
}
.mb-biz-tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
/* меню-плитки в ресторане */
.mb-menu-tile{
background:var(--surface);border:1px solid var(--border-soft);border-radius:13px;padding:10px;
display:flex;flex-direction:column;gap:6px;
}
.mb-menu-tile .ph{
aspect-ratio:1/1;border-radius:9px;position:relative;overflow:hidden;
}
.mb-menu-tile .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 60%)}
.mb-menu-tile .nm{font-size:12px;font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--ink);min-height:30px}
.mb-menu-tile .pr{
display:flex;align-items:baseline;justify-content:space-between;
}
.mb-menu-tile .pr .p{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px}
.mb-menu-tile .pr .w{font-size:10.5px;color:var(--muted)}
/* номер отеля — карточка */
.mb-room{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
margin:0 18px 10px;
}
.mb-room .ph{
height:140px;position:relative;overflow:hidden;
}
.mb-room .ph .tag{
position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;
font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:5px;backdrop-filter:blur(6px);
}
.mb-room .ph .price{
position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;
padding:5px 10px;border-radius:7px;backdrop-filter:blur(6px);
}
.mb-room .ph .price .v{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13.5px}
.mb-room .ph .price .l{font-size:10px;color:rgba(255,255,255,.8)}
.mb-room .info{padding:11px 14px}
.mb-room .info .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mb-room .info .meta{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
/* услуга/возможность списком */
.mb-srv{
display:flex;align-items:flex-start;gap:11px;padding:12px 18px;border-bottom:1px solid var(--border-soft);
}
.mb-srv .ic{
width:32px;height:32px;border-radius:8px;background:var(--bg-soft);
display:grid;place-items:center;color:var(--ink-2);flex:none;
}
.mb-srv .body{flex:1;min-width:0}
.mb-srv .body .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.mb-srv .body .desc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.mb-srv .pr{
font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);flex:none;text-align:right;
}
/* вакансия */
.mb-vac{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:13px 14px;margin:0 18px 8px;
}
.mb-vac .top{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.mb-vac .nm{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.mb-vac .sal{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--ink);flex:none}
.mb-vac .sal .u{font-size:10px;color:var(--muted);font-weight:500;display:block;font-family:inherit}
.mb-vac .meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mb-vac .meta .tag{
font-size:10.5px;padding:3px 8px;border-radius:99px;background:var(--bg-soft);color:var(--ink-2);font-weight:500;
}
.mb-vac .meta .tag.new{background:#E4F0E1;color:#2F6B3A}
/* объект недвижимости */
.mb-prop{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:0 18px 10px;
}
.mb-prop .ph{height:130px;position:relative;overflow:hidden}
.mb-prop .ph .type{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.9);color:var(--ink);font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px}
.mb-prop .ph .photos{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace}
.mb-prop .body{padding:11px 14px}
.mb-prop .body .pr{display:flex;align-items:baseline;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:17px;letter-spacing:-.01em}
.mb-prop .body .pr .v{color:var(--ink)}
.mb-prop .body .pr .ppm{font-size:11px;color:var(--muted);font-weight:500}
.mb-prop .body .ad{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.4;font-weight:500}
.mb-prop .body .meta{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:11px;color:var(--muted)}
.mb-prop .body .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
/* ===================================================================
MOBILE CATALOG — каталог товаров на мобильном
=================================================================== */
/* верхняя приветственная плашка с поиском (на главной) */
.mcat-hero{
margin:0 18px 16px;border-radius:18px;
background:#0E0E0C;color:#fff;padding:16px 18px;
}
.mcat-hero .eyebrow{
font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
color:rgba(255,255,255,.55);font-weight:600;margin-bottom:6px;
}
.mcat-hero h2{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px;line-height:1.2}
.mcat-hero .sub{font-size:12px;color:rgba(255,255,255,.7);line-height:1.45}
.mcat-hero .search{
margin-top:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
border-radius:11px;padding:10px 12px;display:flex;align-items:center;gap:9px;color:#fff;
}
.mcat-hero .search input{border:0;background:transparent;outline:0;flex:1;color:#fff;font-size:13.5px;font-family:inherit}
.mcat-hero .search input::placeholder{color:rgba(255,255,255,.5)}
/* плитки категорий 2 в ряд */
.mcat-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 14px}
.mcat-cat{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:14px;display:flex;flex-direction:column;gap:8px;min-height:110px;
}
.mcat-cat .ic{
width:38px;height:38px;border-radius:10px;
display:grid;place-items:center;color:#fff;
}
.mcat-cat .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-top:auto}
.mcat-cat .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500}
/* строка товара в каталоге (полноширинная) */
.mcat-prod{
display:grid;grid-template-columns:64px 1fr auto;gap:13px;align-items:flex-start;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.mcat-prod .ph{
width:64px;height:64px;border-radius:11px;flex:none;position:relative;overflow:hidden;
}
.mcat-prod .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.16),transparent 60%)}
.mcat-prod .ph .pat{
position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0,transparent 6px,rgba(255,255,255,.16) 6px,rgba(255,255,255,.16) 7px);
}
.mcat-prod .body{min-width:0}
.mcat-prod .body .brand{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.mcat-prod .body .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink);margin-top:2px}
.mcat-prod .body .meta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;font-family:'JetBrains Mono',monospace}
.mcat-prod .body .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mcat-prod .body .tags .t{
font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg-soft);color:var(--ink-2);font-weight:500;
}
.mcat-prod .body .tags .t.stock{background:#E4F0E1;color:#2F6B3A}
.mcat-prod .body .tags .t.low{background:#FAF1DA;color:#9B6F1A}
.mcat-prod .pricing{text-align:right;flex:none;font-variant-numeric:tabular-nums}
.mcat-prod .pricing .pr{
font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--ink);
}
.mcat-prod .pricing .pkg{font-size:10.5px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono',monospace}
.mcat-prod .pricing .add{
width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:16px;margin-top:8px;margin-left:auto;cursor:pointer;
}
.mcat-prod .pricing .add.in{background:var(--positive)}
/* сортировка/фильтр-бар */
.mcat-toolbar{
display:flex;align-items:center;gap:8px;padding:10px 18px 10px;
border-bottom:1px solid var(--border-soft);background:var(--surface);
position:sticky;top:0;z-index:2;
}
.mcat-toolbar .b{
display:inline-flex;align-items:center;gap:5px;padding:7px 11px;
background:var(--bg-soft);border-radius:8px;font-size:12px;font-weight:500;color:var(--ink-2);
}
.mcat-toolbar .b.act .n{background:var(--ink);color:#fff;font-size:10px;padding:0 5px;border-radius:99px;font-weight:600;margin-left:2px;font-family:'JetBrains Mono',monospace}
.mcat-toolbar .res{flex:1;font-size:12px;color:var(--muted)}
/* галерея фото в карточке товара */
.mcat-gallery{
position:relative;height:280px;
}
.mcat-gallery .dots{
position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
display:flex;gap:5px;
}
.mcat-gallery .dots .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.mcat-gallery .dots .d.on{background:#fff;width:18px;border-radius:99px}
.mcat-gallery .badge{
position:absolute;top:14px;left:14px;background:rgba(0,0,0,.5);color:#fff;
font-size:11px;padding:4px 10px;border-radius:6px;backdrop-filter:blur(8px);font-family:'JetBrains Mono',monospace;font-weight:600;
}
.mcat-gallery .heart{
position:absolute;top:14px;right:14px;
width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);
display:grid;place-items:center;backdrop-filter:blur(8px);
}
/* характеристики (specs) */
.mcat-specs{
display:grid;grid-template-columns:1fr 1fr;gap:0;
border-top:1px solid var(--border);
}
.mcat-specs .it{
padding:11px 14px;border-bottom:1px solid var(--border-soft);
display:flex;flex-direction:column;gap:2px;
}
.mcat-specs .it:nth-child(odd){border-right:1px solid var(--border-soft)}
.mcat-specs .it .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.mcat-specs .it .v{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink);font-family:'JetBrains Mono',monospace}
/* корзина: строка */
.mcat-cart-row{
display:grid;grid-template-columns:56px 1fr;gap:13px;align-items:flex-start;
padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.mcat-cart-row .ph{
width:56px;height:56px;border-radius:11px;flex:none;position:relative;overflow:hidden;
}
.mcat-cart-row .body .brand{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.mcat-cart-row .body .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink);margin-top:2px}
.mcat-cart-row .body .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px}
.mcat-cart-row .bottom{
display:flex;align-items:center;justify-content:space-between;margin-top:10px;
}
.mcat-cart-row .qty{display:inline-flex;align-items:center;gap:0;background:var(--bg-soft);border-radius:7px}
.mcat-cart-row .qty button{
width:28px;height:30px;background:transparent;border:0;color:var(--ink);cursor:pointer;font-size:14px;
}
.mcat-cart-row .qty .v{
font-size:13px;font-weight:600;min-width:32px;text-align:center;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;
}
.mcat-cart-row .sum{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--ink)}
.mcat-cart-row .x{
color:var(--muted-2);padding:4px;cursor:pointer;font-size:16px;margin-top:-4px;margin-right:-4px;
}
/* ===================================================================
MOBILE CATALOG v2 — реальный контент (еда/недвиж/бытовое), без тёмной шапки
=================================================================== */
/* лёгкий хедер маркетплейса */
.mcv-header{
display:flex;align-items:center;gap:10px;padding:6px 14px 12px;background:transparent;
}
.mcv-header .brand{
display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px;letter-spacing:-.01em;
}
.mcv-header .brand .m{
width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-weight:700;
}
.mcv-header .brand .nm{color:var(--ink)}
.mcv-header .brand .nm span{color:var(--muted)}
.mcv-header .grow{flex:1}
.mcv-header .ic{
width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
display:grid;place-items:center;color:var(--ink);position:relative;
}
.mcv-header .ic .badge{
position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:9px;
font-weight:700;border-radius:99px;min-width:16px;height:16px;display:grid;place-items:center;
border:1.5px solid var(--bg);font-family:'JetBrains Mono',monospace;padding:0 4px;
}
/* поисковая полоса */
.mcv-search-bar{
margin:0 14px 12px;display:flex;align-items:center;gap:8px;
padding:10px 13px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.mcv-search-bar input{border:0;background:transparent;outline:0;flex:1;font-size:13.5px;font-family:inherit;color:var(--ink)}
.mcv-search-bar input::placeholder{color:var(--muted-2)}
/* кнопки-фильтры на главной (категория · фильтры · карта) */
.mcv-quick{
display:flex;gap:6px;padding:0 14px 14px;overflow-x:auto;
}
.mcv-quick::-webkit-scrollbar{display:none}
.mcv-quick .q{
display:inline-flex;align-items:center;gap:5px;padding:7px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:99px;
font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
}
.mcv-quick .q.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.mcv-quick .q .n{font-size:10.5px;background:var(--bg-soft);color:var(--muted);padding:1px 6px;border-radius:99px;font-weight:600;font-family:'JetBrains Mono',monospace}
.mcv-quick .q.dark .n{background:rgba(255,255,255,.18);color:#fff}
/* плитки категорий с фото */
.mcv-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 16px}
.mcv-tile{
border-radius:14px;overflow:hidden;position:relative;height:130px;
display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff;
}
.mcv-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6))}
.mcv-tile > *{position:relative;z-index:1}
.mcv-tile.lg{grid-column:span 2;height:160px}
.mcv-tile .nm{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.mcv-tile .meta{font-size:11px;color:rgba(255,255,255,.78);margin-top:3px}
/* секционные заголовки на главной */
.mcv-sec-h{
display:flex;align-items:baseline;justify-content:space-between;padding:6px 14px 10px;
}
.mcv-sec-h h3{font-size:15px;font-weight:600;letter-spacing:-.015em;margin:0}
.mcv-sec-h a{font-size:12px;color:var(--muted);text-decoration:none}
/* подборка-карусель */
.mcv-hscroll{
display:flex;gap:10px;overflow-x:auto;padding:0 14px 14px;
}
.mcv-hscroll::-webkit-scrollbar{display:none}
/* карточка товара (vertical) — основная во всех списках */
.mcv-prod{
flex:none;width:170px;background:var(--surface);border:1px solid var(--border);
border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
}
.mcv-prod .ph{
height:120px;position:relative;overflow:hidden;
}
.mcv-prod .ph .heart{
position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
.mcv-prod .ph .heart.on{color:var(--danger)}
.mcv-prod .ph .badge{
position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;font-size:10px;font-weight:600;
padding:3px 8px;border-radius:99px;
}
.mcv-prod .ph .badge.warn{background:#9B6F1A}
.mcv-prod .ph .badge.new{background:var(--positive)}
.mcv-prod .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.mcv-prod .pr{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.mcv-prod .pr .old{font-size:11px;color:var(--muted-2);text-decoration:line-through;margin-left:6px;font-weight:500}
.mcv-prod .nm{font-size:12px;line-height:1.3;color:var(--ink);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcv-prod .meta{
margin-top:auto;font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px;line-height:1.3;
}
.mcv-prod .meta .dist{color:var(--ink-2);font-weight:500;font-family:'JetBrains Mono',monospace}
/* строка карточки товара (full-width) — для категории */
.mcv-row{
display:grid;grid-template-columns:104px 1fr;gap:12px;
padding:12px 14px;border-bottom:1px solid var(--border-soft);
}
.mcv-row .ph{
width:104px;height:104px;border-radius:12px;position:relative;overflow:hidden;
}
.mcv-row .ph .heart{
position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
.mcv-row .ph .heart.on{color:var(--danger)}
.mcv-row .ph .photos{
position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;font-size:9.5px;
padding:1px 6px;border-radius:5px;font-family:'JetBrains Mono',monospace;
}
.mcv-row .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mcv-row .pr{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.mcv-row .pr .u{font-size:11.5px;color:var(--muted);font-weight:500;margin-left:4px}
.mcv-row .nm{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.mcv-row .desc{font-size:11.5px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcv-row .meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:auto;flex-wrap:wrap}
.mcv-row .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.mcv-row .meta .seller{color:var(--ink-2);font-weight:500}
.mcv-row .meta .dist{color:var(--ink-2);font-family:'JetBrains Mono',monospace;font-weight:500}
/* секция «карта/локация» баннер */
.mcv-mapbar{
margin:0 14px 12px;background:var(--ink);color:#fff;
border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:10px;
}
.mcv-mapbar .ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.mcv-mapbar .body{flex:1;min-width:0}
.mcv-mapbar .body .nm{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.mcv-mapbar .body .sub{font-size:10.5px;color:rgba(255,255,255,.65);margin-top:2px}
/* sticky тулбар сортировки и фильтра в категории */
.mcv-bar{
display:flex;align-items:center;gap:8px;padding:8px 14px 8px;
background:var(--bg);border-bottom:1px solid var(--border-soft);
position:sticky;top:0;z-index:2;
}
.mcv-bar .b{
display:inline-flex;align-items:center;gap:5px;padding:7px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
font-size:12px;font-weight:500;color:var(--ink-2);
}
.mcv-bar .b.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.mcv-bar .b.dark .n{background:rgba(255,255,255,.18);color:#fff;padding:0 5px;border-radius:99px;font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace}
.mcv-bar .res{margin-left:auto;font-size:11.5px;color:var(--muted)}
/* галерея в карточке товара (для экрана 3) */
.mcv-gallery{
position:relative;height:300px;
}
.mcv-gallery .dots{
position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px;
}
.mcv-gallery .dots .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.mcv-gallery .dots .d.on{background:#fff;width:18px;border-radius:99px}
.mcv-gallery .heart{
position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
.mcv-gallery .share{
position:absolute;top:12px;right:58px;width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
.mcv-gallery .back{
position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
/* блок продавца внутри карточки товара */
.mcv-seller{
display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.mcv-seller .av{
width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;
display:grid;place-items:center;font-size:13px;font-weight:600;flex:none;
}
.mcv-seller .body{flex:1;min-width:0}
.mcv-seller .body .nm{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.mcv-seller .body .meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.mcv-seller .body .meta .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%}
.mcv-seller .chat{
background:var(--bg-soft);border:0;width:36px;height:36px;border-radius:9px;color:var(--ink);
display:grid;place-items:center;cursor:pointer;
}
/* карта-мини в карточке */
.mcv-minimap{
margin:0 14px;border-radius:14px;overflow:hidden;position:relative;height:130px;
background:linear-gradient(135deg,#D8DCDF,#9298A0);
display:flex;align-items:center;justify-content:center;
}
.mcv-minimap::before{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(0deg,transparent 0,transparent 20px,rgba(255,255,255,.18) 20px,rgba(255,255,255,.18) 21px),
repeating-linear-gradient(90deg,transparent 0,transparent 24px,rgba(255,255,255,.16) 24px,rgba(255,255,255,.16) 25px);
}
.mcv-minimap .pin{
position:relative;width:28px;height:36px;color:var(--ink);
}
.mcv-minimap .pin::before{
content:"";position:absolute;left:50%;transform:translateX(-50%);
width:24px;height:24px;border-radius:50%;background:var(--ink);
display:grid;place-items:center;
}
.mcv-minimap .pin::after{
content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
border:7px solid transparent;border-top:9px solid var(--ink);
}
.mcv-minimap .open{
position:absolute;bottom:8px;right:8px;background:#fff;color:var(--ink);font-size:11px;
padding:5px 10px;border-radius:8px;font-weight:500;display:inline-flex;align-items:center;gap:5px;
}
/* bottom-sheet фильтров (для экрана 2) */
.mcv-sheet{
position:absolute;left:0;right:0;bottom:0;top:0;
background:rgba(14,14,12,.4);backdrop-filter:blur(4px);
display:flex;flex-direction:column;justify-content:flex-end;z-index:10;
}
.mcv-sheet .panel{
background:var(--surface);border-radius:22px 22px 0 0;padding:8px 0 12px;
max-height:78%;display:flex;flex-direction:column;
}
.mcv-sheet .panel .grip{width:42px;height:4px;background:var(--border);border-radius:99px;margin:6px auto 0}
.mcv-sheet .panel .h{
display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--border-soft);
}
.mcv-sheet .panel .h .ttl{font-size:16px;font-weight:600;letter-spacing:-.015em}
.mcv-sheet .panel .h .rst{font-size:12px;color:var(--muted);text-decoration:underline}
.mcv-sheet .panel .body{padding:6px 0 12px;overflow-y:auto;flex:1}
.mcv-sheet .panel .sec{padding:12px 18px;border-bottom:1px solid var(--border-soft)}
.mcv-sheet .panel .sec .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:8px}
.mcv-sheet .panel .range{display:flex;gap:8px}
.mcv-sheet .panel .range input{
flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--surface-2);outline:0;font-weight:500;
}
.mcv-sheet .apply{
padding:14px 14px 6px;
}
/* ===================================================================
MOBILE CATALOG v2 · сетка карточек товара (2 в ряд)
=================================================================== */
.mcv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px 16px}
.mcv-grid .mcv-prod{width:auto}
.mcv-grid .mcv-prod .ph{height:150px}
.mcv-grid .mcv-prod .body{padding:10px 12px 12px;gap:5px}
/* переключатель список/сетка в тулбаре */
.mcv-view{
display:inline-flex;background:var(--bg-soft);border-radius:8px;padding:3px;margin-left:6px;
}
.mcv-view a{
width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted);
}
.mcv-view a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px -2px rgba(14,14,12,.15)}
/* ===================================================================
BOOKING — модуль бронирования (авто + номера)
=================================================================== */
/* верхние табы тип объекта */
.bk-type-tabs{
display:flex;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:5px;gap:4px;
}
.bk-type-tabs a{
flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px 18px;border-radius:11px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;
}
.bk-type-tabs a.on{background:var(--ink);color:#fff;font-weight:600}
.bk-type-tabs a .n{
font-size:11px;background:rgba(0,0,0,.06);padding:1px 7px;border-radius:99px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:600;
}
.bk-type-tabs a.on .n{background:rgba(255,255,255,.16);color:#fff}
/* поиск-бар верхний */
.bk-search{
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:0;align-items:stretch;
}
.bk-search .seg{
padding:10px 14px;border-right:1px solid var(--border-soft);display:flex;flex-direction:column;gap:2px;cursor:pointer;
}
.bk-search .seg:last-of-type{border-right:0}
.bk-search .seg .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.bk-search .seg .value{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.bk-search .seg .sub{font-size:11px;color:var(--muted);margin-top:1px}
.bk-search .find{
background:var(--ink);color:#fff;border:0;border-radius:11px;
margin:0;padding:0 22px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;font-family:inherit;
}
/* карточка авто (большая, на сетке 3) */
.bk-car{
background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;cursor:pointer;transition:border-color .1s,transform .08s;
}
.bk-car:hover{border-color:#C8C5BE;transform:translateY(-1px)}
.bk-car.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,14,12,.08)}
.bk-car .ph{
height:160px;position:relative;overflow:hidden;
}
.bk-car .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.18),transparent 60%)}
.bk-car .ph .cls{
position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;
padding:3px 9px;border-radius:6px;backdrop-filter:blur(8px);font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.bk-car .ph .left{
position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:3px 9px;border-radius:6px;backdrop-filter:blur(8px);
}
.bk-car .ph .left .n{font-family:'JetBrains Mono',monospace;font-weight:600}
.bk-car .body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.bk-car .body .brand{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.bk-car .body .nm{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.bk-car .body .specs{
display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--muted);
}
.bk-car .body .specs .it{display:inline-flex;align-items:center;gap:4px}
.bk-car .body .pr{
margin-top:auto;padding-top:11px;border-top:1px solid var(--border-soft);
display:flex;align-items:baseline;justify-content:space-between;
}
.bk-car .body .pr .v{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;letter-spacing:-.01em}
.bk-car .body .pr .u{font-size:11.5px;color:var(--muted);margin-left:4px;font-weight:500}
.bk-car .body .pr .tot{font-size:11px;color:var(--muted)}
/* sticky панель оформления справа */
.bk-summary{
background:var(--surface);border:1px solid var(--border);border-radius:16px;
display:flex;flex-direction:column;overflow:hidden;position:sticky;top:78px;
}
.bk-summary .head{padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.bk-summary .head .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.bk-summary .head h3{font-size:16px;font-weight:600;letter-spacing:-.015em;margin:4px 0 0}
.bk-summary .ph{
height:110px;position:relative;overflow:hidden;
}
.bk-summary .body{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.bk-summary .row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2)}
.bk-summary .row .l{color:var(--muted)}
.bk-summary .row .v{font-weight:500;font-family:'JetBrains Mono',monospace}
.bk-summary .opt{
display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;
}
.bk-summary .opt.on{border-color:var(--ink);background:var(--surface-2)}
.bk-summary .opt input{width:16px;height:16px;flex:none}
.bk-summary .opt .pr{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:12.5px}
.bk-summary .total{
margin-top:6px;padding:14px 18px;background:#0E0E0C;color:#fff;
display:flex;align-items:baseline;justify-content:space-between;
}
.bk-summary .total .l{font-size:13px}
.bk-summary .total .v{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;letter-spacing:-.02em}
/* статусы бронирования */
.bk-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.bk-st .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.bk-st.req{background:#FAF1DA;color:#9B6F1A}
.bk-st.conf{background:#E8EEF7;color:#2B4F87}
.bk-st.live{background:var(--ink);color:#fff}
.bk-st.done{background:#E4F0E1;color:#2F6B3A}
.bk-st.cancel{background:#F7E0DC;color:#A33524;text-decoration:line-through}
.bk-st.maint{background:#F0E8DD;color:#7E5832}
/* ============ МОНИТОР: gantt-таймлайн ============ */
.bk-mon{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.bk-mon-head{
display:grid;grid-template-columns:240px 1fr;border-bottom:1px solid var(--border);
}
.bk-mon-head .res-h{
padding:13px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;
border-right:1px solid var(--border);
}
.bk-mon-head .days{
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.bk-mon-head .days .day{
padding:8px 4px;text-align:center;font-size:11px;color:var(--ink-2);border-right:1px solid var(--border-soft);
position:relative;
}
.bk-mon-head .days .day.wknd{background:var(--surface-2)}
.bk-mon-head .days .day.today{background:var(--ink);color:#fff;font-weight:600}
.bk-mon-head .days .day .d{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;display:block;letter-spacing:-.01em}
.bk-mon-head .days .day .w{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);margin-top:1px;font-weight:600}
.bk-mon-head .days .day.today .w{color:rgba(255,255,255,.6)}
.bk-mon-row{
display:grid;grid-template-columns:240px 1fr;border-bottom:1px solid var(--border-soft);min-height:64px;
}
.bk-mon-row:last-child{border-bottom:0}
.bk-mon-row .res{
padding:10px 16px;border-right:1px solid var(--border);display:flex;align-items:center;gap:11px;
}
.bk-mon-row .res .ph{
width:38px;height:38px;border-radius:8px;flex:none;position:relative;overflow:hidden;
}
.bk-mon-row .res .info{min-width:0}
.bk-mon-row .res .info .nm{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.bk-mon-row .res .info .meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.bk-mon-row .grid{
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;align-items:center;
}
.bk-mon-row .grid .cell{
border-right:1px solid var(--border-soft);height:100%;min-height:64px;
}
.bk-mon-row .grid .cell.wknd{background:var(--surface-2)}
.bk-mon-row .grid .cell.today{background:rgba(14,14,12,.04)}
/* блок брони — абсолютно над сеткой */
.bk-block{
position:absolute;top:8px;bottom:8px;
border-radius:8px;padding:5px 9px;display:flex;flex-direction:column;justify-content:center;gap:1px;
font-size:11px;font-weight:500;cursor:pointer;overflow:hidden;
}
.bk-block.conf{background:#D6E0F0;color:#1F3D6E;border:1px solid #9DBCEA}
.bk-block.live{background:#0E0E0C;color:#fff}
.bk-block.req{background:#F0E2B0;color:#7E5832;border:1px solid #D4BA6B}
.bk-block.done{background:#D2E5C9;color:#2F6B3A;border:1px solid #9CC78E}
.bk-block.maint{background:#E5D4C0;color:#6B4A2A;border:1px solid #C9A776;background-image:repeating-linear-gradient(45deg,transparent 0,transparent 6px,rgba(0,0,0,.06) 6px,rgba(0,0,0,.06) 8px)}
.bk-block .nm{font-size:11.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-block .sub{font-size:10px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace}
/* линия СЕГОДНЯ поверх таймлайна */
.bk-today-line{
position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:5;pointer-events:none;
}
.bk-today-line::before{
content:"СЕГОДНЯ";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;white-space:nowrap;
}
/* ============ МОБИЛЬНЫЕ ============ */
.mbk-tabs{
display:flex;gap:6px;padding:0 14px 12px;
}
.mbk-tabs a{
flex:1;padding:11px;text-align:center;background:var(--surface);border:1px solid var(--border);
border-radius:11px;font-size:13px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:6px;
}
.mbk-tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.mbk-search-block{
margin:0 14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.mbk-search-block .seg{
padding:12px 14px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;
}
.mbk-search-block .seg:last-of-type{border-bottom:0}
.mbk-search-block .seg .l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;display:block}
.mbk-search-block .seg .v{font-size:14px;font-weight:500;color:var(--ink);margin-top:2px;display:block}
.mbk-search-block .seg .chev{color:var(--muted-2)}
/* мобильная карточка авто/номера */
.mbk-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:0 14px 10px;
}
.mbk-card .ph{height:150px;position:relative;overflow:hidden}
.mbk-card .ph .cls{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:3px 8px;border-radius:5px;backdrop-filter:blur(8px);font-family:'JetBrains Mono',monospace;font-weight:600;text-transform:uppercase}
.mbk-card .ph .heart{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px)}
.mbk-card .body{padding:12px 14px}
.mbk-card .body .brand{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:600}
.mbk-card .body .nm{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:2px}
.mbk-card .body .specs{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--muted)}
.mbk-card .body .pr{
display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft);
}
.mbk-card .body .pr .v{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:600}
.mbk-card .body .pr .u{font-size:11px;color:var(--muted);margin-left:3px;font-weight:500}
.mbk-card .body .pr .free{font-size:11px;color:var(--positive);font-weight:600}
/* мини-таймлайн для мобильного монитора */
.mbk-tline{
background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:0 14px 10px;
}
.mbk-tline-h{
display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--border-soft);background:var(--surface-2);
}
.mbk-tline-h .lab{padding:9px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;border-right:1px solid var(--border-soft)}
.mbk-tline-h .hours{display:grid;grid-template-columns:repeat(8,1fr);font-size:9px;text-align:center;font-family:'JetBrains Mono',monospace;color:var(--muted-2);font-weight:600}
.mbk-tline-h .hours .h{padding:9px 2px;border-right:1px solid var(--border-soft)}
.mbk-tline-row{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--border-soft);min-height:42px}
.mbk-tline-row:last-child{border-bottom:0}
.mbk-tline-row .res{padding:6px 12px;border-right:1px solid var(--border-soft);font-size:12px;font-weight:600;display:flex;flex-direction:column;justify-content:center}
.mbk-tline-row .res .meta{font-size:9.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:500;margin-top:1px}
.mbk-tline-row .grid{display:grid;grid-template-columns:repeat(8,1fr);position:relative;align-items:center}
.mbk-tline-row .grid .cell{border-right:1px solid var(--border-soft);min-height:42px}
.mbk-tline-row .grid .cell.today{background:rgba(14,14,12,.04)}
/* ===================================================================
MAP POI — иконки турбаз/достопримечательностей/магазинов/заправок
=================================================================== */
.poi-showcase{max-width:1400px;margin:0 auto;padding:40px 32px 80px;background:var(--bg);color:var(--ink)}
.poi-showcase .head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:28px}
.poi-showcase .head h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.poi-showcase .head .sub{color:var(--muted);font-size:14px;max-width:640px;line-height:1.55}
.poi-showcase .sec{margin-bottom:36px}
.poi-showcase .sec-h{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:12px}
.poi-showcase .sec h2{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0 0 14px}
.poi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.poi-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.poi-card .icons{display:flex;align-items:flex-end;gap:14px;padding:22px 6px;background:linear-gradient(135deg,#EEF3EC,#D8E4D2);border-radius:10px;width:100%;justify-content:center}
.poi-card .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.poi-card .meta{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}
/* макет-карта для демонстрации */
.poi-map{
position:relative;height:440px;border-radius:16px;overflow:hidden;
background:
radial-gradient(circle at 20% 30%,#D8E4D2 0%,transparent 45%),
radial-gradient(circle at 80% 70%,#CBD9DC 0%,transparent 40%),
linear-gradient(180deg,#E8ECDA 0%,#DCE3D1 100%);
border:1px solid var(--border);
}
.poi-map::before{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(255,255,255,.35) 39px,rgba(255,255,255,.35) 40px),
repeating-linear-gradient(90deg,transparent 0,transparent 47px,rgba(255,255,255,.28) 47px,rgba(255,255,255,.28) 48px);
pointer-events:none;
}
.poi-map .road{position:absolute;background:#fff;border:1px solid rgba(0,0,0,.06)}
.poi-map .river{position:absolute;background:#9DC3D8;border-radius:4px;box-shadow:0 0 0 1px #82B5CE inset}
.poi-map .forest{position:absolute;background:radial-gradient(circle at 35% 30%,#7C9A6E,#4E7040);border-radius:50%;opacity:.6}
.poi-map .label{position:absolute;font-size:10.5px;color:#3C4A2E;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.poi-map .pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:transform .1s}
.poi-map .pin:hover{transform:translate(-50%,-100%) scale(1.1)}
.poi-map .pin.selected{transform:translate(-50%,-100%) scale(1.2);z-index:5}
.poi-map .cluster{
position:absolute;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:#0E0E0C;color:#fff;
display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25);
}
/* легенда */
.poi-legend{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:14px;font-size:12px;color:var(--ink-2)}
.poi-legend .it{display:inline-flex;align-items:center;gap:6px}
/* ===================================================================
PROJECT FEED — лента активности проекта
=================================================================== */
.pf-shell{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
/* ─── КОМПОЗЕР ─── */
.pf-composer{
background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
margin-bottom:16px;
}
.pf-composer .top{
display:flex;gap:12px;padding:14px 16px 10px;
}
.pf-composer .top .av{
width:36px;height:36px;border-radius:11px;background:#0E4D6A;color:#fff;
display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;
}
.pf-composer .top textarea{
flex:1;border:0;background:transparent;outline:0;resize:none;
font-family:inherit;font-size:14px;color:var(--ink);
line-height:1.55;padding:8px 0;min-height:24px;
}
.pf-composer .top textarea::placeholder{color:var(--muted-2)}
.pf-composer .tool{
display:flex;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid var(--border-soft);background:var(--surface-2);
}
.pf-composer .tool .b{
display:inline-flex;align-items:center;gap:6px;padding:7px 11px;background:var(--surface);
border:1px solid var(--border);border-radius:9px;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;
}
.pf-composer .tool .b:hover{border-color:#C8C5BE;background:var(--surface-2)}
.pf-composer .tool .b .em{font-size:14px}
.pf-composer .tool .grow{flex:1}
.pf-composer .tool .pub{
padding:7px 16px;background:var(--ink);color:#fff;border:0;border-radius:9px;
font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
/* ─── БАЗОВАЯ КАРТОЧКА ПОСТА ─── */
.pf-item{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:14px 16px 12px;margin-bottom:12px;
}
.pf-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pf-hdr .av{
width:34px;height:34px;border-radius:10px;color:#fff;
display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none;
}
.pf-hdr .who{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pf-hdr .role{font-size:11px;color:var(--muted)}
.pf-hdr .dot{width:3px;height:3px;background:var(--muted-2);border-radius:50%;margin:0 3px}
.pf-hdr .when{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.pf-hdr .grow{flex:1}
.pf-hdr .type-badge{
display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:inherit;
}
.pf-hdr .type-badge.milestone{background:#FAF1DA;color:#9B6F1A}
.pf-hdr .type-badge.decision{background:#E4F0E1;color:#2F6B3A}
.pf-hdr .type-badge.meeting{background:#EEF2FF;color:#3730A3}
.pf-hdr .type-badge.file{background:var(--bg-soft);color:var(--ink-2)}
.pf-hdr .type-badge.poll{background:#F0E8DD;color:#7E5832}
.pf-hdr .type-badge.task{background:#E8EEF7;color:#2B4F87}
.pf-hdr .type-badge.voice{background:#F5E5DC;color:#8C4A2E}
.pf-hdr .more{color:var(--muted-2);cursor:pointer;padding:2px 6px}
.pf-body{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.pf-body p{margin:0 0 8px}
.pf-body p:last-child{margin-bottom:0}
.pf-body b{color:var(--ink)}
.pf-body a.ment{
background:#EEF2FF;color:#3730A3;padding:0 5px;border-radius:4px;text-decoration:none;font-weight:600;
}
/* Реакции и thread */
.pf-foot{
display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:10px;
border-top:1px solid var(--border-soft);
}
.pf-foot .rxn{
display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
background:var(--bg-soft);border-radius:99px;cursor:pointer;font-size:11.5px;
}
.pf-foot .rxn.me{background:#EEF2FF;border:1px solid #C7D2FE;color:#3730A3}
.pf-foot .rxn .em{font-size:14px}
.pf-foot .rxn .n{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink-2)}
.pf-foot .rxn.me .n{color:#3730A3}
.pf-foot .reply{
padding:3px 10px;background:transparent;border:0;font-size:11.5px;color:var(--muted);cursor:pointer;
display:inline-flex;align-items:center;gap:5px;
}
.pf-foot .reply:hover{color:var(--ink)}
.pf-foot .grow{flex:1}
.pf-foot .view{font-size:11px;color:var(--muted-2);display:inline-flex;align-items:center;gap:5px}
/* ─── ФОТО-СЕТКА ─── */
.pf-photos{display:grid;gap:4px;margin-top:10px;border-radius:12px;overflow:hidden}
.pf-photos.g1{grid-template-columns:1fr}
.pf-photos.g2{grid-template-columns:1fr 1fr}
.pf-photos.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.pf-photos.g3 > :first-child{grid-row:span 2}
.pf-photos.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.pf-photos.g5{grid-template-columns:1fr 1fr 1fr;grid-template-rows:180px 100px}
.pf-photos.g5 > :nth-child(1){grid-column:span 2}
.pf-photos > .ph{
position:relative;background:linear-gradient(135deg,#7C9A6E,#3F5740);min-height:120px;
}
.pf-photos > .ph.ph1{background:linear-gradient(135deg,#8A6748,#4A3524)}
.pf-photos > .ph.ph2{background:linear-gradient(135deg,#5C7A8F,#1E3A5F)}
.pf-photos > .ph.ph3{background:linear-gradient(135deg,#C9A776,#7E5828)}
.pf-photos > .ph.ph4{background:linear-gradient(135deg,#3A3F47,#1A1D22)}
.pf-photos > .ph.ph5{background:linear-gradient(135deg,#9B3729,#4A1A12)}
.pf-photos > .ph .plus{
position:absolute;inset:0;background:rgba(0,0,0,.4);color:#fff;
display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;
}
/* ─── ФАЙЛ ─── */
.pf-file{
display:flex;align-items:center;gap:12px;padding:11px 13px;margin-top:10px;
background:var(--surface-2);border:1px solid var(--border);border-radius:11px;
}
.pf-file .ic{
width:40px;height:40px;border-radius:9px;background:#0E0E0C;color:#fff;
display:grid;place-items:center;flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
}
.pf-file .ic.pdf{background:#B44242}
.pf-file .ic.docx{background:#2B4F87}
.pf-file .ic.xlsx{background:#2F6B3A}
.pf-file .ic.pptx{background:#B84B15}
.pf-file .body{flex:1;min-width:0}
.pf-file .body .nm{font-size:13px;font-weight:600;letter-spacing:-.01em}
.pf-file .body .meta{font-size:11px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono',monospace}
.pf-file .dl{color:var(--muted);cursor:pointer;padding:6px 10px;font-size:11.5px;font-weight:500;background:var(--surface);border:1px solid var(--border);border-radius:8px}
/* ─── РЕШЕНИЕ ─── */
.pf-decision{
background:#F4FAF1;border:1.5px solid #B8D5BB;border-radius:12px;padding:12px 14px;
margin-top:10px;display:flex;gap:10px;
}
.pf-decision .em{font-size:20px;line-height:1;flex:none;margin-top:1px;color:#2F6B3A}
.pf-decision .txt{font-size:14px;color:#22532B;line-height:1.5;font-weight:500}
.pf-decision .txt b{color:#22532B}
.pf-decision .who-agreed{font-size:11px;color:#3F7A4E;margin-top:6px;font-weight:500}
/* ─── ВСТРЕЧА ─── */
.pf-meeting{
border:1px solid var(--border);border-radius:12px;background:var(--surface-2);
padding:12px 14px;margin-top:10px;
}
.pf-meeting .mtop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pf-meeting .mtop .em{font-size:22px;line-height:1}
.pf-meeting .mtop .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pf-meeting .mtop .when{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.pf-meeting .attendees{display:flex;gap:-4px;margin-bottom:10px}
.pf-meeting .attendees .av{width:22px;height:22px;border-radius:50%;background:#0E4D6A;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:600;margin-right:-4px;border:1.5px solid var(--surface-2)}
.pf-meeting .section{margin-top:8px}
.pf-meeting .section .h{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:4px}
.pf-meeting .section ul{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2);line-height:1.55}
.pf-meeting .section ul li{margin-bottom:2px}
.pf-meeting .section ul li b{color:var(--ink)}
/* ─── ОПРОС ─── */
.pf-poll{margin-top:10px}
.pf-poll .opt{
display:flex;align-items:center;gap:10px;padding:9px 12px;
background:var(--surface-2);border:1px solid var(--border);border-radius:10px;margin-bottom:6px;
position:relative;overflow:hidden;cursor:pointer;
}
.pf-poll .opt.on{border-color:var(--ink);background:var(--surface)}
.pf-poll .opt .bar{position:absolute;left:0;top:0;bottom:0;background:#EEF2FF;z-index:0}
.pf-poll .opt.on .bar{background:#DBE1FF}
.pf-poll .opt .nm{position:relative;z-index:1;flex:1;font-size:13px;font-weight:500;color:var(--ink)}
.pf-poll .opt .pct{position:relative;z-index:1;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px}
.pf-poll .opt .who{position:relative;z-index:1;display:flex;margin-right:6px}
.pf-poll .opt .who .av{width:18px;height:18px;border-radius:50%;background:#0E4D6A;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:600;border:1.5px solid var(--surface-2);margin-right:-4px}
.pf-poll .foot{font-size:11px;color:var(--muted);margin-top:6px}
/* ─── ТИХАЯ КАРТОЧКА (task completed / created / small event) ─── */
.pf-quiet{
display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:8px;
background:transparent;border:0;border-radius:0;font-size:12.5px;color:var(--muted);
}
.pf-quiet .em{font-size:16px}
.pf-quiet b{color:var(--ink);font-weight:500}
.pf-quiet .ln{flex:1;height:1px;background:var(--border-soft)}
.pf-quiet .when{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2)}
/* ─── ГОЛОСОВОЕ ─── */
.pf-voice{
display:flex;align-items:center;gap:12px;padding:10px 12px;margin-top:10px;
background:#F5E5DC;border-radius:12px;
}
.pf-voice .play{
width:36px;height:36px;border-radius:50%;background:#8C4A2E;color:#fff;
display:grid;place-items:center;cursor:pointer;flex:none;
}
.pf-voice .wave{
flex:1;display:flex;align-items:center;gap:2px;height:24px;
}
.pf-voice .wave span{
width:2px;background:#8C4A2E;border-radius:2px;opacity:.45;
}
.pf-voice .wave span.done{opacity:1}
.pf-voice .dur{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;color:#5A2D18}
/* ─── ДАТА-РАЗДЕЛИТЕЛЬ ─── */
.pf-sep{
display:flex;align-items:center;gap:12px;margin:20px 0 12px;
}
.pf-sep .ln{flex:1;height:1px;background:var(--border)}
.pf-sep .dt{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
text-transform:uppercase;letter-spacing:.08em;font-weight:600;
background:var(--bg);padding:0 10px;
}
/* ─── ФИЛЬТРЫ ─── */
.pf-filters{
display:flex;gap:6px;padding:0;margin-bottom:16px;flex-wrap:wrap;
}
.pf-filters .chip{
padding:6px 12px;background:var(--surface);border:1px solid var(--border);
border-radius:99px;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;
}
.pf-filters .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-filters .chip .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;margin-left:4px;opacity:.7}
/* ─── ПРАВАЯ КОЛОНКА ─── */
.pf-side{
position:sticky;top:78px;display:flex;flex-direction:column;gap:12px;
}
.pf-side .card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;
}
.pf-side .card h4{
font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;
margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.pinned-item{
display:flex;gap:10px;padding:8px;margin:0 -8px;border-radius:9px;cursor:pointer;
}
.pinned-item:hover{background:var(--surface-2)}
.pinned-item .em{font-size:14px;flex:none;margin-top:2px}
.pinned-item .txt{font-size:12px;color:var(--ink-2);line-height:1.45}
.pinned-item .txt b{color:var(--ink);font-weight:600}
.pinned-item .when{font-size:10.5px;color:var(--muted-2);margin-top:2px;font-family:'JetBrains Mono',monospace}
.team-online{display:flex;flex-direction:column;gap:6px}
.team-online .row{display:flex;align-items:center;gap:10px}
.team-online .av{width:28px;height:28px;border-radius:9px;background:#0E4D6A;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;flex:none;position:relative}
.team-online .av .st{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--muted-2);border:1.5px solid var(--surface)}
.team-online .av .st.on{background:#3F7A4E}
.team-online .av .st.busy{background:#B58323}
.team-online .row .nm{font-size:12.5px;font-weight:500}
.team-online .row .role{font-size:11px;color:var(--muted)}
.team-online .row .grow{flex:1}
.team-online .row .last{font-size:10.5px;color:var(--muted-2);font-family:'JetBrains Mono',monospace}