/* Стили портала партнёра.
* Вынесены из index.html 27.07.2026: раньше вся вёрстка, стили и логика
* лежали в одном файле на 4700 строк, и двое в нём одновременно работать
* не могли — каждый мердж превращался в конфликт. */
/* Палитра и календарь вынесены в свои файлы: их подключают и вынесенные
страницы, которые этот лист не грузят. Через @import, а не в
index.html — тот занят соседом, да и правило @import всё равно обязано
стоять раньше любых стилевых правил. */
@import url('tokens.css');
@import url('datepicker.css');
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background:
radial-gradient(1100px 620px at 8% -12%, rgba(var(--blue-rgb),.20), transparent 60%),
radial-gradient(900px 520px at 104% -6%, rgba(214,168,61,.16), transparent 56%),
radial-gradient(820px 720px at 52% 118%, rgba(123,63,228,.14), transparent 60%),
var(--bg);
background-attachment:fixed;
color:var(--text);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
button{font-family:inherit;}
input{font-family:inherit;}
a{color:inherit;}
.hidden{display:none !important;}
::selection{background:var(--blue-light);color:var(--graphite);}
/* ---------- Login ---------- */
/* #boot-screen делит фон с логином: пока проверяется сессия, человек
видит ту же заставку, а не белый лист и не мигнувшую форму входа. */
#login-screen,#register-screen,#boot-screen{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:32px 20px;
background:
radial-gradient(900px 500px at 85% 15%, rgba(255,255,255,.18), transparent 60%),
radial-gradient(700px 500px at 10% 90%, rgba(255,255,255,.12), transparent 55%),
linear-gradient(135deg,#1655c9 0%, rgb(var(--blue-rgb)) 45%, #4a92f5 100%);
position:relative;
}
.boot-spinner{
position:relative;width:34px;height:34px;border-radius:50%;
border:3px solid rgba(255,255,255,.3);border-top-color:#fff;
animation:boot-spin .8s linear infinite;
}
@keyframes boot-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .boot-spinner{ animation-duration:2.4s; } }
#login-screen::before,#register-screen::before,#boot-screen::before{
content:"";
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size:42px 42px;
pointer-events:none;
}
.login-brand{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
margin-bottom:36px;
}
.login-wordmark{
height:64px;
width:auto;
display:block;
}
.login-store-pill{
background:var(--graphite);
color:#fff;
font-size:14px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
padding:5px 22px;
border-radius:4px;
transform:skewX(-6deg);
}
.login-card{
position:relative;
width:100%;
max-width:380px;
background:var(--surface);
border-radius:var(--radius-lg);
box-shadow:0 24px 60px -20px rgba(4,20,60,.45);
padding:32px 30px 28px;
}
.login-card h1{
font-size:19px;
margin:0 0 22px;
text-align:center;
font-weight:700;
}
.field{margin-bottom:16px;}
.field label{
display:block;
font-size:12.5px;
font-weight:600;
color:var(--text-muted);
margin-bottom:6px;
text-transform:uppercase;
letter-spacing:.4px;
}
.field input, .field select, .field textarea{
width:100%;
padding:11px 13px;
border-radius:var(--radius-sm);
border:1.5px solid var(--border);
background:var(--surface-2);
color:var(--text);
font-size:14.5px;
outline:none;
transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
border-color:var(--blue);
}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:40px;}
.pw-toggle{
position:absolute; right:8px; top:50%; transform:translateY(-50%);
background:none;border:none;cursor:pointer;color:var(--text-muted);
padding:4px;
display:flex;
}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:none;cursor:pointer;border-radius:var(--radius-sm);
/* Кнопки-ссылки () иначе приезжают с браузерным
подчёркиванием и выглядят как текст, а не как кнопка. */
text-decoration:none;
font-size:14.5px;font-weight:700;padding:11px 18px;
transition:transform .08s ease, background .15s, box-shadow .15s, opacity .15s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-block{width:100%;}
.btn-ghost{background:transparent;color:var(--blue);padding:8px 4px;font-weight:600;}
.btn-ghost:hover{color:var(--blue-dark);text-decoration:underline;}
.btn-secondary{background:var(--glass-bg);color:var(--text);border:1.5px solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);}
.btn-dark{background:var(--graphite);color:#fff;}
.btn-dark:hover{background:var(--graphite-2);}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn svg{width:16px;height:16px;flex:none;}
.login-links{display:flex;justify-content:center;margin-top:6px;}
.login-recover{
margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
background:var(--surface-2); border:1px dashed var(--border);
font-size:13px; color:var(--text-muted); text-align:center;
}
.login-hint{
position:relative;margin-top:20px;color:rgba(255,255,255,.85);
font-size:12.5px;text-align:center;max-width:340px;line-height:1.5;
}
.login-hint b{color:#fff;}
/* ---------- App shell ---------- */
#app-screen{display:flex;min-height:100vh;}
.sidebar{
width:var(--sidebar-w);
flex:none;
background:var(--glass-sidebar);
backdrop-filter:blur(18px) saturate(1.4);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
border-right:1px solid var(--glass-border);
display:flex;
flex-direction:column;
align-items:center;
padding:14px 0 18px;
position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
transition:width .2s ease;
}
.sidebar.expanded{width:212px;}
.sidebar-brand{display:flex;align-items:center;width:100%;padding:0 16px;margin-bottom:10px;}
.sidebar-logo{
width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,var(--blue),var(--blue-dark));
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:800;font-size:16px;font-style:italic;letter-spacing:.5px;
cursor:pointer;flex:none;
border:none;overflow:hidden;white-space:nowrap;
transition:width .22s ease, border-radius .22s ease, font-size .22s ease;
}
.sidebar.expanded .sidebar-logo{
width:180px;border-radius:12px;font-size:18px;text-transform:uppercase;
}
.sidebar-logo img{height:22px;width:auto;display:block;}
.sidebar-logo .logo-letter{display:block;}
.sidebar-toggle-btn{
width:26px;height:26px;border-radius:8px;border:none;flex:none;
background:rgba(255,255,255,.08);color:#9BA3AF;
display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:14px;
}
.sidebar-toggle-btn:hover{background:rgba(255,255,255,.16);color:#fff;}
.sidebar-toggle-btn svg{width:13px;height:13px;transition:transform .2s;}
.sidebar.expanded .sidebar-toggle-btn svg{transform:rotate(180deg);}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center;flex:1;}
.nav-item{
position:relative;
width:46px;height:46px;
border-radius:var(--radius-sm);
display:flex;align-items:center;justify-content:center;
color:#9BA3AF; background:transparent;border:none;cursor:pointer;
transition:background .15s, color .15s;
flex:none;
}
.sidebar.expanded .nav-item{width:184px;justify-content:flex-start;padding:0 12px;gap:12px;}
.nav-item svg{width:21px;height:21px;flex:none;}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{background:var(--blue);color:#fff;}
.nav-item .nav-label{display:none;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar.expanded .nav-item .nav-label{display:inline-block;}
.nav-item .tooltip{
position:absolute; left:58px; top:50%; transform:translateY(-50%);
background:#111214; color:#fff; padding:6px 10px; border-radius:7px;
font-size:12.5px; font-weight:600; white-space:nowrap;
opacity:0; pointer-events:none; transition:opacity .12s; z-index:50;
box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.nav-item:hover .tooltip{opacity:1;}
.sidebar.expanded .nav-item .tooltip{display:none;}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px;}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
height:var(--topbar-h);flex:none;
background:var(--glass-topbar);
backdrop-filter:blur(18px) saturate(1.6);
-webkit-backdrop-filter:blur(18px) saturate(1.6);
border-bottom:1px solid var(--glass-border);
display:flex;align-items:center;gap:14px;
padding:0 22px;
position:sticky; top:0; z-index:30;
}
.topbar-title{font-size:17px;font-weight:800;margin-right:auto;}
.topbar-title span{display:block;font-size:12px;font-weight:500;color:var(--text-muted);margin-top:1px;}
.role-switcher{
display:flex;align-items:center;gap:8px;
background:var(--surface-2); border:1px solid var(--border);
padding:6px 10px 6px 12px;border-radius:999px;
}
.role-switcher label{font-size:12px;color:var(--text-muted);font-weight:600;white-space:nowrap;}
.role-switcher select{
border:none;background:transparent;font-size:13px;font-weight:700;color:var(--blue-dark);
outline:none;cursor:pointer;
}
.icon-btn{
width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
color:var(--text-muted);cursor:pointer;position:relative;flex:none;
}
.icon-btn svg{width:18px;height:18px;}
.icon-btn:hover{color:var(--blue);border-color:var(--blue-light);}
.icon-btn .dot{
position:absolute; top:6px; right:7px; width:7px;height:7px;border-radius:50%;
background:var(--danger); border:1.5px solid var(--surface);
}
.user-menu-wrap{position:relative;}
.user-chip{
display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;
border:1px solid var(--border); background:var(--surface-2); cursor:pointer;
}
.user-avatar{
width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--blue-dark));
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none;
}
.user-chip .name{font-size:13px;font-weight:700;line-height:1.2;}
.user-chip .role{font-size:11px;color:var(--text-muted);}
.dropdown{
position:absolute; right:0; top:calc(100% + 8px);
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
box-shadow:var(--shadow-card); min-width:200px; padding:6px; z-index:60;
}
.dropdown button{
width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
background:none;border:none;text-align:left;font-size:13.5px;cursor:pointer;color:var(--text);
}
.dropdown button:hover{background:var(--surface-2);}
.dropdown button svg{width:16px;height:16px;color:var(--text-muted);flex:none;}
.dropdown hr{border:none;border-top:1px solid var(--border);margin:5px 2px;}
.content{flex:1;padding:26px 30px 60px;max-width:1180px;width:100%;margin:0 auto;}
.view{display:none;}
.view.active{display:block;}
/* Вкладки раздела. На узком экране линейка прокручивается вбок, а не
переносится: так видно, что вкладок больше, и высота шапки не скачет. */
.section-tabs{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.section-tabs::-webkit-scrollbar{display:none;}
.section-tabs .btn{white-space:nowrap;flex-shrink:0;}
/* ---------- reusable bits ---------- */
.kicker{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:var(--blue-dark); background:var(--blue-light,#dbeaff); background:rgba(var(--blue-rgb),.1);
padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.view-head h2{font-size:23px;margin:0 0 4px;font-weight:800;}
.view-head p{margin:0;color:var(--text-muted);font-size:14px;max-width:60ch;}
.card{
background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);
box-shadow:var(--glass-shadow);
backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
}
.pad{padding:20px;}
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
.kpi-card{padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
.kpi-card .lbl{font-size:12.5px;color:var(--text-muted);font-weight:600;}
.kpi-card .val{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;}
.kpi-card .delta{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:2px 8px;border-radius:999px;}
.delta.up{color:var(--success);background:var(--success-bg);}
.delta.down{color:var(--danger);background:var(--danger-bg);}
.service-card{
display:flex;align-items:center;gap:18px;padding:22px;
}
.service-icon{
width:54px;height:54px;border-radius:14px;flex:none;
display:flex;align-items:center;justify-content:center;color:#fff;
}
.service-card h3{margin:0 0 4px;font-size:16.5px;}
.service-card p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.5;}
.service-card .go{margin-left:auto;flex:none;}
table{width:100%;border-collapse:collapse;font-size:13.8px;}
th{
text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
color:var(--text-muted);font-weight:700;padding:0 14px 10px;border-bottom:1px solid var(--border);
}
td{padding:13px 14px;border-bottom:1px solid var(--border);}
tbody tr{cursor:pointer;transition:background .12s;}
tbody tr:hover{background:var(--surface-2);}
tbody tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}
/* ---------- Заявка товароведу ---------- */
/* Форма заявки — узкая и по центру, как была встроенная форма Bitrix.
Растянутая во всю ширину она читается плохо: поля по полтора метра, а
заполнять в них нужно одно значение. */
.tovaroved-form-card{max-width:600px;margin-left:auto;margin-right:auto;}
.tovaroved-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
/* Своя форма заявки: те же поля, что были в форме Bitrix, но нарисованные
нами — оттого и стилей меньше, ничего перекрашивать не нужно. */
.tv-form{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.tv-row{display:flex;gap:14px;}
.tv-row-2 > .tv-field{flex:1;min-width:0;}
.tv-field{display:flex;flex-direction:column;gap:6px;}
.tv-label{font-size:12.5px;font-weight:700;color:var(--text-muted);}
.tv-req{color:var(--danger);font-weight:700;}
.tv-hint{font-size:11.5px;color:var(--text-muted);}
.tv-form input[type=text],
.tv-form select,
.tv-form textarea{
width:100%;padding:9px 11px;font:inherit;font-size:13.5px;
background:var(--surface-2);color:var(--text);
border:1.5px solid var(--border);border-radius:var(--radius-sm);}
.tv-form textarea{resize:vertical;min-height:64px;}
.tv-form input:focus,.tv-form select:focus,.tv-form textarea:focus{
outline:none;border-color:var(--blue);}
/* ФИО и ИП портал подставляет сам — они выглядят как данные, а не как поля,
которые ждут ввода. */
.tv-form input[readonly]{color:var(--text-muted);border-style:dashed;}
.tv-form input[type=file]{font-size:12.5px;color:var(--text-muted);}
.tv-submit-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#tv-form-note{font-size:12.5px;color:var(--text-muted);}
@media(max-width:640px){.tv-row{flex-direction:column;gap:14px;}}
.tovaroved-table td{vertical-align:middle;}
.tovaroved-file{color:var(--blue);text-decoration:none;font-weight:600;}
.tovaroved-file:hover{text-decoration:underline;}
/* Цвет статуса берётся из смысла стадии в Bitrix (успешная/провальная/в
работе), а не из её названия — переименуют стадию, ничего не сломается. */
.status-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;
padding:4px 10px;border-radius:999px;border:1px solid var(--border);
background:var(--surface-2);color:var(--text-muted);white-space:nowrap;}
.status-chip.status-success{background:var(--success-bg);color:var(--success);border-color:transparent;}
.status-chip.status-danger{background:var(--danger-bg);color:var(--danger);border-color:transparent;}
.status-chip.status-progress{background:rgba(var(--blue-rgb),.1);color:var(--blue-dark);border-color:rgba(var(--blue-rgb),.25);}
.badge{
display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);
}
.badge.role-admin{color:#7B3FE4;background:#F1EAFE;border-color:#E4D6FC;}
.badge.role-partner{color:var(--blue-dark);background:rgba(var(--blue-rgb),.1);border-color:rgba(var(--blue-rgb),.25);}
.badge.role-manager{color:#0E7C66;background:#E4F7F2;border-color:#CDEEE5;}
.badge.role-seller{color:#B4720F;background:var(--warning-bg);border-color:#f0dcae;}
.badge.role-merch{color:#B4720F;background:var(--warning-bg);border-color:#f0dcae;}
.badge.role-smm{color:#C0417B;background:#FCE9F1;border-color:#f6d2e3;}
.chip{
display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
color:var(--text);cursor:pointer;transition:all .12s;
}
.chip:hover{border-color:var(--blue);}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.chip-static{cursor:default;}
.chip-static:hover{border-color:var(--border);}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.back-btn{display:inline-flex;align-items:center;gap:7px;color:var(--blue-dark);font-weight:700;font-size:13.5px;background:none;border:none;cursor:pointer;margin-bottom:16px;padding:4px 0;}
.back-btn svg{width:16px;height:16px;}
.back-btn:hover{text-decoration:underline;}
.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr;}}
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;font-size:13.8px;}
.kv .k{color:var(--text-muted);font-weight:600;}
/* ---------- Партнёрские склады ---------- */
/* Раньше склады лежали плиткой в две колонки, и карточки прыгали по высоте
из-за разной длины условий. Теперь каждый склад — отдельная строка во всю
ширину: сравнивать их глазами сверху вниз проще. */
.suppliers-list{display:flex;flex-direction:column;gap:14px;}
.supplier-row{display:flex;gap:18px;align-items:flex-start;}
.supplier-logo{width:72px;height:72px;border-radius:16px;object-fit:cover;flex:none;background:var(--surface-2);}
.supplier-logo-fallback{display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#D6A83D,#8a6a1f);color:#fff;font-weight:800;font-size:18px;}
.supplier-main{flex:1;min-width:0;}
/* Процент уходит вправо вверх и не даёт названию наехать на себя. */
.supplier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.supplier-kv{grid-template-columns:96px 1fr;font-size:13px;margin-top:12px;}
/* Колонка кнопок справа от карточки: одинаковой ширины, друг под другом,
не зависит от длины описания склада. */
/* Кнопки прижаты к низу карточки: сверху у склада название и условия, и
читают их сверху вниз — действие логично оказывается в конце. */
.supplier-actions{display:flex;flex-direction:column;gap:8px;flex:none;width:212px;
align-self:flex-end;}
.supplier-actions .btn{width:100%;}
/* В столбце с кнопками плашка тянется на ту же ширину и стоит по центру —
иначе она болтается слева и столбец выглядит рваным. */
.supplier-actions .matrix-badge{text-align:center;margin-bottom:2px;}
.matrix-badge{flex:none;font-size:12.5px;font-weight:600;white-space:nowrap;
padding:5px 11px;border-radius:999px;border:1px solid var(--border);
background:var(--surface-2);color:var(--text-muted);}
.matrix-badge b{font-weight:800;color:var(--text);}
.matrix-badge-good{background:var(--success-bg);border-color:transparent;color:var(--success);}
.matrix-badge-good b{color:var(--success);}
.matrix-badge-empty{font-style:italic;}
@media (max-width:720px){
.supplier-row{flex-direction:column;gap:12px;}
.supplier-head{flex-direction:column;gap:8px;}
.supplier-actions{width:100%;}
}
.section-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;color:var(--text-muted);margin:0 0 12px;}
.file-chip{
display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border);
border-radius:var(--radius-sm);font-size:13px;font-weight:600;background:var(--surface-2);margin-bottom:8px;
}
.file-chip svg{width:16px;height:16px;color:var(--blue);flex:none;}
.file-chip .dl{margin-left:auto;color:var(--text-muted);cursor:pointer;}
.file-chip .dl:hover{color:var(--blue);}
/* Кнопка удаления в строке материала: приглушена, пока на неё не навели —
чтобы не спорила по яркости с самим названием документа. */
.chip-danger{margin-left:auto;flex:none;color:var(--text-muted);}
.chip-danger:hover{color:var(--danger);border-color:var(--danger);}
.file-chip .chip-danger svg{color:inherit;}
.news-card{padding:0;overflow:hidden;margin-bottom:16px;display:flex;align-items:stretch;}
.news-thumb{width:130px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.news-card.thumb-square .news-thumb{width:190px;}
.news-card.thumb-landscape .news-thumb{width:260px;}
.news-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.news-thumb-icon{opacity:.32;position:relative;z-index:1;}
.news-thumb .date{position:absolute;bottom:8px;left:8px;right:8px;color:#fff;font-size:11px;font-weight:700;background:rgba(0,0,0,.34);padding:3px 8px;border-radius:999px;z-index:2;text-align:center;}
.news-body{padding:16px 18px 18px;flex:1;min-width:0;}
.news-body h3{margin:2px 0 8px;font-size:16px;}
.news-body p{margin:0 0 12px;color:var(--text-muted);font-size:13.6px;line-height:1.55;}
.news-admin-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
/* Сердечко отделено от тегов линией: это действие, а не свойство новости,
и не должно читаться как ещё один тег. */
.news-read-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.news-read-count{margin-left:2px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:700;}
/* Своё сердечко — красное и залитое: видно с одного взгляда, отметил ты
эту новость или ещё нет. */
.news-liked{color:var(--danger);border-color:var(--danger);}
.news-liked .news-read-count{background:var(--danger);color:#fff;}
.nw-photo-preview{width:100%;max-width:220px;border-radius:8px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-top:8px;position:relative;}
.nw-photo-preview img{width:100%;display:block;}
.nw-photo-preview .placeholder{padding:24px 12px;font-size:12px;color:var(--text-muted);text-align:center;}
@media(max-width:640px){.news-card, .news-card.thumb-square, .news-card.thumb-landscape{flex-direction:column;} .news-thumb, .news-card.thumb-square .news-thumb, .news-card.thumb-landscape .news-thumb{width:100%;height:180px;}}
.folder{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;}
.folder-head{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;background:var(--surface);font-weight:700;font-size:14px;}
.folder-head svg.chev{width:16px;height:16px;color:var(--text-muted);transition:transform .15s;margin-left:auto;}
.folder.open .chev{transform:rotate(90deg);}
.folder-body{display:none;padding:0 15px 14px 41px;}
.folder.open .folder-body{display:block;}
.subtopic{margin-bottom:12px;}
.subtopic-name{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:7px;}
/* Подраздел — такая же папка, но потише: мельче шрифт, фон подложки,
меньший отступ содержимого. Иначе вложенность не читается. */
.folder.subfolder{border-color:transparent;background:var(--surface-2);margin-bottom:8px;}
.folder.subfolder > .folder-head{padding:9px 12px;font-size:13px;background:transparent;}
.folder.subfolder > .folder-body{padding:0 12px 12px 34px;}
.folder.subfolder .sub-count{font-size:11.5px;font-weight:700;color:var(--text-muted);
background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 7px;}
.rating-row.you{
background:linear-gradient(90deg, rgba(214,168,61,.14), transparent);
box-shadow:inset 3px 0 0 var(--gold);
}
.medal{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;}
.medal.g{background:#D6A83D;}
.medal.s{background:#A9AFBA;}
.medal.b{background:#C08A56;}
.percent-bar{width:120px;height:7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;}
.percent-bar>div{height:100%;background:linear-gradient(90deg,var(--blue-light),var(--blue));}
.media-filter{margin-bottom:18px;}
.media-tile{
border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface);
}
.media-tile{position:relative;}
.media-thumb{height:110px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;position:relative;}
.media-thumb svg{width:30px;height:30px;opacity:.85;}
.media-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.media-delete{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1;z-index:2;}
.media-delete:hover{background:var(--danger);}
.media-meta{padding:10px 12px;}
.media-meta .fname{font-size:12.8px;font-weight:700;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.media-meta .fsub{font-size:11.5px;color:var(--text-muted);}
.onboarding-mod{display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;}
.onboarding-mod .num{
width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--text-muted);flex:none;
}
.onboarding-mod.done .num{background:var(--success);border-color:var(--success);color:#fff;}
.onboarding-mod .info{flex:1;min-width:0;}
.onboarding-mod h4{margin:0 0 3px;font-size:15px;}
.onboarding-mod p{margin:0;font-size:12.8px;color:var(--text-muted);}
.progress-track{height:6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;width:100%;margin-top:20px;}
.progress-track>div{height:100%;background:linear-gradient(90deg,var(--blue-light),var(--blue));transition:width .3s;}
.quiz-q{margin-bottom:18px;}
.quiz-q p.q-text{font-weight:700;font-size:14.5px;margin:0 0 10px;}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:7px;cursor:pointer;font-size:13.8px;}
.quiz-opt:hover{border-color:var(--blue-light);}
.quiz-opt input{accent-color:var(--blue);}
.quiz-result{padding:14px 16px;border-radius:var(--radius-sm);font-size:13.8px;font-weight:600;margin-top:6px;}
.quiz-result.pass{background:var(--success-bg);color:var(--success);}
.quiz-result.fail{background:var(--danger-bg);color:var(--danger);}
.toast{
position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--graphite);color:#fff;padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:600;
box-shadow:0 14px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:all .25s;z-index:200;
display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:16px;height:16px;color:var(--blue-light);}
.empty-note{color:var(--text-muted);font-size:13.5px;padding:20px;text-align:center;}
.lock-note{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border-style:dashed;margin-bottom:16px;}
.lock-note svg{color:var(--text-muted);flex:none;margin-top:2px;}
.lock-note b{font-size:13.5px;}
.lock-note p{margin:4px 0 10px;font-size:13px;color:var(--text-muted);line-height:1.5;max-width:52ch;}
textarea{resize:vertical;min-height:80px;}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){.two-col{grid-template-columns:1fr;}}
.stack{display:flex;flex-direction:column;gap:16px;}
.muted-link{font-size:12.5px;color:var(--blue-dark);font-weight:600;cursor:pointer;}
.muted-link:hover{text-decoration:underline;}
/* ---------- royalty badge ---------- */
.royalty-badge{
display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:999px;
font-size:13px;font-weight:700;cursor:default;border:1px solid transparent;margin-bottom:18px;user-select:none;
}
.royalty-badge .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.royalty-badge.paid{color:var(--success);background:var(--success-bg);}
.royalty-badge.paid .dot{background:var(--success);box-shadow:0 0 0 4px rgba(30,158,90,.18);}
.royalty-badge.unpaid{color:var(--danger);background:var(--danger-bg);}
.royalty-badge.unpaid .dot{background:var(--danger);box-shadow:0 0 0 4px rgba(214,69,69,.18);}
.royalty-hint{font-size:11.5px;color:var(--text-muted);margin:-12px 0 18px;}
/* ---------- shelves ---------- */
.shelf-head{
display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:15.5px;
padding:16px 20px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.shelf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.shelf-stats .lbl{font-size:11.5px;color:var(--text-muted);font-weight:600;margin-bottom:3px;}
.shelf-stats .val{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;}
.shelf-empty-toggle{background:none;border:none;padding:0;text-align:left;cursor:pointer;font-family:inherit;}
.shelf-revenue{font-size:13.5px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);}
.shelf-empty-list{margin-top:12px;border-top:1px dashed var(--border);padding-top:12px;}
.shelf-empty-row{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;font-size:13.3px;}
.shelf-empty-row+.shelf-empty-row{border-top:1px solid var(--border);}
/* ---------- modal ---------- */
.modal-backdrop{
position:fixed; inset:0; background:rgba(10,14,25,.5); z-index:300;
display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.modal{
background:var(--glass-bg-strong); border-radius:var(--radius-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
border:1px solid var(--glass-border);
backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8);
width:100%; max-width:460px; padding:22px;
}
.modal.modal-wide{max-width:720px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-head h3{margin:0;font-size:17px;font-weight:800;}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:22px;line-height:1;padding:2px 6px;}
.modal-close:hover{color:var(--text);}
.modal-body .field{margin-bottom:14px;}
/* ---------- shelf map ---------- */
.shelf-map{
position:relative; height:360px; border-radius:var(--radius-md); overflow:hidden;
border:1px solid var(--border); background-color:var(--surface-2);
background-image:
linear-gradient(rgba(var(--blue-rgb),.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--blue-rgb),.09) 1px, transparent 1px);
background-size:26px 26px;
}
.shelf-map-dot{
position:absolute; transform:translate(-50%,-50%);
border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
box-shadow:0 8px 18px -6px rgba(var(--blue-rgb),.6); cursor:default; border:2px solid var(--surface);
}
/* ---------- support fab ---------- */
.support-fab{
position:fixed;right:24px;bottom:24px;z-index:120;
width:56px;height:56px;border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--blue-dark));
color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:0 16px 32px -10px rgba(var(--blue-rgb),.55);
text-decoration:none;border:3px solid var(--surface);
}
.support-fab:hover{filter:brightness(1.08);}
.support-fab svg{width:25px;height:25px;}
.support-fab .ping{
position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;
background:var(--gold);border:2px solid var(--surface);
}
/* Полоса небоевого контура (тест / локальный стенд). На проде не появляется:
скрипт добавляет её только по адресу, см. app.js. */
.env-bar{
position:fixed;left:0;right:0;bottom:0;z-index:9999;
padding:6px 14px;text-align:center;font-size:12.5px;color:#fff;
font-weight:500;letter-spacing:.02em;pointer-events:none;
box-shadow:0 -2px 10px rgba(0,0,0,.25);
}
.env-bar b{font-weight:800;letter-spacing:.06em;}
/* Раздел «Учёт зарплат» — страница ФОТ целиком подключена файлом votfot-settings.html.
Iframe тянется на всю высоту рабочей области: у вложенной страницы своя
прокрутка, поэтому фиксируем высоту по вьюпорту, а не по содержимому.
Подложка портальная: страница внутри перешла на токены портала и берёт тему
от родителя, а прежний тёмный #0B0B0D мигал тёмным прямоугольником в светлой
теме, пока вложенная страница не отрисовалась. */
#votfot-frame{
display:block;width:100%;height:calc(100vh - 120px);min-height:560px;
border:0;border-radius:14px;background:var(--bg);
}
/* Раздел «Out of stock» — страница outofstock.html целиком, тем же приёмом.
Фон здесь портальный, а не тёмный как у ФОТа: страница берёт токены портала
и синхронизирует тему с родителем, поэтому подложка не должна спорить с ней
в момент загрузки. */
#msmapping-frame{
display:block;width:100%;height:calc(100vh - 120px);min-height:560px;
border:0;border-radius:14px;background:var(--bg);
}
#oos-frame{
display:block;width:100%;height:calc(100vh - 120px);min-height:560px;
border:0;border-radius:14px;background:var(--bg);
}
/* ---- Курсы ---- */
.course-card{cursor:pointer;transition:border-color .15s;}
.course-card:hover{border-color:var(--blue);}
.course-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.course-desc{font-size:13.4px;color:var(--text-muted);line-height:1.55;margin:0 0 12px;}
/* Полоса прогресса заодно отвечает на вопрос «сколько осталось» — без неё
цифры «3 из 12» приходится читать и считать. */
.course-progress{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.course-progress-bar{height:100%;background:var(--blue);border-radius:999px;transition:width .2s;}
.course-progress-note{font-size:12.5px;color:var(--text-muted);margin:8px 0 0;}
.course-chip-done{background:var(--success-bg,var(--surface-2));color:var(--success);}
.course-chip-rework{background:var(--warning-bg,var(--surface-2));color:var(--warning);}
.course-video{width:100%;border-radius:8px;background:#000;display:block;margin-bottom:14px;max-height:60vh;}
.course-lesson-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}
.course-task{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.course-task textarea,.course-task input[type=text]{width:100%;padding:9px 11px;font:inherit;font-size:13.5px;background:var(--surface-2);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius-sm);resize:vertical;}
.course-task input[type=file]{font-size:12.5px;color:var(--text-muted);margin-top:8px;}
.course-hw-status{padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);margin-bottom:12px;font-size:13px;}
.course-hw-accepted{color:var(--success);}
.course-hw-rework{color:var(--warning);}
#hw-note{font-size:12.5px;color:var(--text-muted);}
/* Очередь проверки: каждая работа — отдельная карточка, чтобы кнопки
«принять» и «на доработку» нельзя было нажать у соседней. */
.review-item{padding:14px 0;border-top:1px solid var(--border);}
.review-head{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;}
.review-sub{font-size:12.5px;color:var(--text-muted);}
.review-task{font-size:12.5px;color:var(--text-muted);margin:8px 0 4px;}
.review-answer{font-size:13.4px;margin:4px 0 8px;white-space:pre-wrap;}
.review-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.review-comment{flex:1;min-width:200px;padding:8px 10px;font:inherit;font-size:13px;background:var(--surface-2);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius-sm);}
.course-chip-locked{background:var(--surface-2);color:var(--text-muted);}
.course-day-meta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
/* Недели курса плитками, по три в ряд — как в исходном курсе на GetCourse,
только в стиле портала. Обложка тёмная, номер недели крупно: плитки
смотрят в ряд, и человек находит нужную неделю по числу, а не вчитываясь
в названия. */
.week-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.week-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;
transition:transform .12s ease, border-color .15s;}
.week-tile:hover{transform:translateY(-2px);border-color:var(--blue);}
.week-tile-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--graphite-3),var(--graphite-2));}
.week-tile-num{display:flex;flex-direction:column;align-items:center;line-height:1;
color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:13px;}
.week-tile-num b{font-size:44px;letter-spacing:0;margin-top:6px;color:var(--blue-light);}
.week-tile-lock,.week-tile-check{position:absolute;top:10px;right:10px;display:inline-flex;
width:30px;height:30px;align-items:center;justify-content:center;border-radius:999px;color:#fff;}
.week-tile-lock{background:rgba(0,0,0,.42);}
.week-tile-check{background:var(--success);}
.week-tile-foot{padding:13px 15px 15px;}
.week-tile-title{margin:0 0 10px;font-size:14.5px;font-weight:700;color:var(--text);line-height:1.35;}
.week-tile-note{font-size:12.5px;color:var(--text-muted);margin:8px 0 0;}
/* Закрытая неделя остаётся на месте и видна: так понятно, сколько ещё
впереди, — но кликом не открывается. */
.week-tile-locked{cursor:not-allowed;}
.week-tile-locked:hover{transform:none;border-color:var(--border);}
.week-tile-locked .week-tile-cover{background:linear-gradient(135deg,#6a6f78,#4a4e56);}
.week-tile-locked .week-tile-title{color:var(--text-muted);}
.week-tile-done .week-tile-cover{background:linear-gradient(135deg,#1f6f45,#14512f);}
/* Строка над плитками уроков: возврат к неделям и счёт пройденного. */
.week-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-bottom:14px;}
/* Уроки внутри недели — теми же плитками, что и недели. Обложка ниже:
уроков в неделе до четырнадцати, и высокие обложки растянули бы неделю
на три экрана. */
.lesson-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;display:flex;flex-direction:column;
transition:transform .12s ease, border-color .15s;}
.lesson-tile:hover{transform:translateY(-2px);border-color:var(--blue);}
.lesson-tile-cover{position:relative;aspect-ratio:2.6/1;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--graphite-3),var(--graphite-2));}
.lesson-tile-ico{display:inline-flex;color:var(--blue-light);}
.lesson-tile-foot{padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px;
align-items:flex-start;flex:1;}
.lesson-tile-foot .week-tile-title{margin:0;}
.lesson-tile-done .lesson-tile-cover{background:linear-gradient(135deg,#1f6f45,#14512f);}
.lesson-tile-done .lesson-tile-ico{color:#fff;}
@media (max-width:1100px){ .week-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .week-grid{grid-template-columns:1fr;} }
/* Зона переноса файла: заказ выгружают из учёта и тянут из папки мышкой. */
.tv-drop{border:1.5px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2);
padding:22px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.tv-drop:hover,.tv-drop:focus{border-color:var(--blue);outline:none;}
.tv-drop-over{border-color:var(--blue);background:var(--surface);}
.tv-drop-text{font-size:13px;color:var(--text-muted);word-break:break-word;}
.course-external{padding:14px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2);margin-bottom:14px;}
/* Переключатель из двух кнопок вместо выпадающего списка: выбор бинарный,
и отмечают его одним касанием. Класс общий, а не «чей-то»: он родился в
разделе Out of stock, уехавшем в outofstock.html, потом его переиспользовал
раздел бонусов — и имя .oos-* стало враньём про принадлежность. Держим
нейтральное .seg (segmented control), чтобы следующий, кто соберётся
чистить «мёртвые стили раздела», не унёс с ними чужой рабочий контрол. */
.seg{display:flex;gap:0;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.seg-btn{flex:1;padding:11px 12px;border:none;background:transparent;color:var(--text);
font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;}
.seg-btn:hover{color:var(--blue);}
.seg-on{background:var(--surface);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue);border-radius:var(--radius-sm);}
/* ============ ЗАДАЧНИК: доска канбан ============ */
/* Доска — один инструмент, а не четыре отдельных столбца: общая светлая
подложка с контуром, колонки внутри разделены тонкими линиями. */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));
align-items:start;overflow-x:auto;
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);padding:14px 6px;}
.kb-col{display:flex;flex-direction:column;min-width:190px;padding:0 8px;
border-right:1px solid var(--border);}
.kb-col:last-child{border-right:none;}
/* Заголовок-стрелка: колонки читаются как этапы одного пути, а не как
независимые списки. Цвет усиливается слева направо — от серого бэклога
к зелёному «Готово». */
.kb-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 18px 9px 24px;margin-bottom:12px;
font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fff;
background:#8B93A1;
clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);}
.kb-col[data-stage="backlog"] .kb-col-head{background:#8B93A1;}
.kb-col[data-stage="todo"] .kb-col-head{background:#6FA8F5;}
.kb-col[data-stage="inprogress"] .kb-col-head{background:var(--blue);}
.kb-col[data-stage="review"] .kb-col-head{background:#7B5BD6;}
.kb-col[data-stage="done"] .kb-col-head{background:var(--success);}
.kb-count{display:inline-flex;min-width:22px;height:20px;align-items:center;justify-content:center;
padding:0 7px;border-radius:999px;background:rgba(255,255,255,.28);color:#fff;font-size:12px;}
.kb-col-body{padding:2px 0 8px;display:flex;flex-direction:column;gap:10px;min-height:110px;
border-radius:var(--radius-md);transition:background .15s, box-shadow .15s;}
/* Колонка подсвечивается, пока над ней держат карточку. */
.kb-col-over{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--blue);}
.kb-empty{font-size:12.5px;color:var(--text-muted);text-align:center;padding:14px 0;}
.kb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
box-shadow:var(--shadow-card);padding:12px 13px;cursor:grab;
display:flex;flex-direction:column;gap:8px;align-items:flex-start;
transition:border-color .15s, transform .08s;}
.kb-card:hover{border-color:var(--blue);}
.kb-card:active{cursor:grabbing;}
.kb-card-dragging{opacity:.5;transform:scale(.98);}
/* Срочную видно по красной кромке слева, не вчитываясь в карточку. */
.kb-card-urgent{border-left:3px solid var(--danger);}
.kb-card-title{margin:0;font-size:14px;font-weight:700;line-height:1.35;}
.kb-chip-urgent{background:var(--danger-bg);color:var(--danger);}
.kb-chip-file{background:var(--surface-2);color:var(--text-muted);max-width:100%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;display:inline-block;}
.kb-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12.5px;width:100%;}
.kb-k{color:var(--text-muted);}
.kb-overdue{color:var(--danger);font-weight:700;}
/* Описание обрезаем тремя строками: карточка должна оставаться карточкой. */
.kb-card-desc{margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.kb-cancelled-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border);}
.kb-cancelled-row:first-child{border-top:none;padding-top:0;}
/* ============ АНАЛИЗ СОБСТВЕННЫХ ТОЧЕК ============ */
/* Таблица широкая: четыре блока по шесть-восемь колонок. Прокручиваем её
внутри карточки, а не страницу, и держим колонку с категорией
закреплённой — иначе, уехав вправо, не понять, какая это строка. */
.sa-wrap{overflow:hidden;}
.sa-scroll{overflow-x:auto;}
/* Колонок больше двадцати, поэтому ширину раздаёт таблица, а не содержимое:
фиксированная раскладка укладывает их в ширину страницы. Прокрутка
остаётся только на совсем узких экранах — отсюда min-width. */
.sa-table{border-collapse:separate;border-spacing:0;table-layout:fixed;
width:100%;min-width:860px;font-size:11.5px;}
.sa-modal .sa-table{min-width:1290px;}
/* Числа не обрезаем многоточием: «14,2%» вместо «14…» — это не экономия
места, а потеря смысла. Ширины хватает при min-width выше, а на узком
экране появится прокрутка. */
.sa-table th,.sa-table td{padding:7px 4px;text-align:right;white-space:nowrap;
border-bottom:1px solid var(--border);}
/* Подписи колонок переносятся: «GMROI» и «Выручка» иначе задают ширину
всему столбцу и растягивают таблицу. */
.sa-table thead tr:last-child th{white-space:normal;line-height:1.25;}
.sa-table thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);
font-weight:700;color:var(--text-muted);text-transform:none;}
/* Шапка блока: разделяет четыре магазина, чтобы колонки не слились в ленту. */
.sa-group{text-align:center !important;font-size:12.5px;font-weight:800;color:var(--text) !important;}
.sa-group-own{background:var(--blue);color:#fff !important;border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
/* Граница блока: линия слева у первой колонки каждой точки — иначе двадцать
с лишним колонок читаются как одна сплошная лента и непонятно, где чей
магазин. У «Вашего магазина» линия толще: это другой по смыслу блок. */
.sa-table th.sa-edge, .sa-table td.sa-edge{border-left:2px solid var(--border);}
.sa-table th.sa-group-own, .sa-table th.sa-own-edge,
.sa-table td.sa-own-edge{border-left:3px solid var(--blue);}
/* Свой магазин подсвечен целиком: это рабочая часть таблицы, остальное —
справочная. */
.sa-own-col{background:var(--surface-2);}
.sa-nodata{font-weight:500;color:var(--text-muted);font-size:11.5px;}
.sa-table th.sa-cat, .sa-table td.sa-cat{text-align:left;font-weight:600;color:var(--text);
width:150px;white-space:normal;line-height:1.3;overflow:hidden;}
/* Закреплённая колонка категорий. */
.sa-sticky{position:sticky;left:0;z-index:3;background:var(--surface);}
.sa-table thead .sa-sticky{z-index:4;background:var(--surface-2);}
.sa-table tbody tr:hover td{background:var(--surface-2);}
.sa-table tbody tr:hover .sa-sticky{background:var(--surface-2);}
.sa-total td{font-weight:800;border-top:2px solid var(--border);border-bottom:none;}
.sa-input-cell{padding:3px 3px;}
.sa-input{width:100%;padding:5px 6px;font:inherit;font-size:11.5px;text-align:right;
background:var(--surface-2);color:var(--text);border:1.5px solid var(--border);
border-radius:var(--radius-sm);outline:none;transition:border-color .15s;}
.sa-input:focus{border-color:var(--blue);}
.sa-calc{font-weight:800;}
/* Три состояния расчётной ячейки — по ним и читается, куда смотреть. */
.sa-good{background:var(--success-bg);color:var(--success);}
.sa-warn{background:var(--warning-bg);color:var(--warning);}
.sa-bad{background:var(--danger-bg);color:var(--danger);}
.sa-legend-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.sa-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-muted);}
/* Точки легенды красим сплошным цветом, а не фоном ячейки: в тёмной теме
фоновые варианты почти сливаются с карточкой и легенда не читается. */
.sa-dot{width:12px;height:12px;border-radius:4px;display:inline-block;flex:none;}
.sa-dot.sa-good{background:var(--success);}
.sa-dot.sa-warn{background:var(--warning);}
.sa-dot.sa-bad{background:var(--danger);}
.sa-toggle{margin-top:12px;}
.sa-legend-note{font-size:12.5px;color:var(--text-muted);margin:10px 0 0;max-width:95ch;line-height:1.5;}
/* Подсказка при наведении на заголовок: подписи в шапке короткие, полное
название читается курсором. */
.sa-table th[title]{cursor:help;}
/* Выданный доступ, если буфер обмена недоступен: показываем текстом, чтобы
пароль можно было переписать — второй раз его уже не узнать. */
.access-box{margin:0 0 14px;padding:12px 14px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--radius-sm);
font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;
white-space:pre-wrap;word-break:break-all;user-select:all;}
/* Полная таблица поверх портала. Отдельной страницей делать не стали:
человек сравнивает цифры и не должен терять из виду, где находится. */
.sa-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
padding:24px;background:rgba(10,12,16,.62);backdrop-filter:blur(3px);}
.sa-modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
box-shadow:0 30px 80px -30px rgba(0,0,0,.6);width:100%;max-width:1400px;max-height:100%;
display:flex;flex-direction:column;overflow:hidden;}
.sa-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 20px;border-bottom:1px solid var(--border);flex:none;}
.sa-modal-head h3{margin:0;font-size:16.5px;}
.sa-modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--text-muted);}
.sa-modal-scroll{overflow:auto;flex:1;padding:0 4px 4px;}
/* Маленькая таблица на странице — превью: по клику разворачивается. */
#sa-table{cursor:zoom-in;}
@media(max-width:720px){ .sa-modal{padding:0;} .sa-modal-box{border-radius:0;} }
/* ============ БОНУС ПЛЮС: заявка на баллы ============ */
/* Форма в две строки: полей немного, и в столбик они растянули бы карточку
на пол-экрана ради четырёх значений. */
.bonus-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:14px;}
.bonus-hint{margin:4px 0 0;font-size:12.5px;color:var(--text-muted);max-width:70ch;}
.bonus-form{display:flex;flex-direction:column;gap:12px;}
.bonus-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.bonus-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:170px;}
.bonus-field-wide{flex:3;min-width:240px;}
.bonus-field input,.bonus-field select{width:100%;padding:10px 12px;font:inherit;font-size:13.5px;
background:var(--surface-2);color:var(--text);border:1.5px solid var(--border);
border-radius:var(--radius-sm);outline:none;transition:border-color .15s;}
.bonus-field input:focus,.bonus-field select:focus{border-color:var(--blue);}
.bonus-row-2 .btn{flex:none;}
#bonus-note{font-size:12.5px;color:var(--text-muted);}
/* Точка на колокольчике: у УК горит, пока есть неразобранные заявки. */
#bell-btn .dot{background:var(--danger);}
/* Повтор по одному номеру — не запрет, а метка: у постоянного покупателя
это норма, у «друга продавца» повод присмотреться. */
.bonus-repeat{background:var(--warning-bg);color:var(--warning);}
/* Период в «Финансах сети»: строка с датами и под ней быстрые кнопки.
Раньше тут был список пресетов рядом с датами - два способа задать одно и
то же, и по виду было не понять, какой сейчас главный. */
.msf-period{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.msf-period-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.msf-period-lbl{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.msf-quick{display:flex;gap:6px;}
.msf-chip{
border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-muted);
border-radius:999px;padding:5px 14px;font:inherit;font-size:12.5px;font-weight:700;
cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.msf-chip:hover{border-color:var(--blue);color:var(--blue);}
.msf-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff;}
@media(max-width:720px){.msf-period{align-items:flex-start;}}
/* ============ ПЛАНИРОВАНИЕ РАСХОДОВ ============ */
/* Таблица широкая по определению: пятнадцать статей × пять колонок на каждый
магазин. Поэтому «Статья» и группа «Итого» прилипшие, а магазины уезжают
горизонтальным скроллом — иначе одиннадцать точек не помещаются никуда. */
.exp-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.exp-month{display:flex;align-items:center;gap:6px;font-weight:700;}
.exp-month #exp-month-label{min-width:132px;text-align:center;}
.exp-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);cursor:pointer;}
.exp-wrap{max-height:74vh;overflow:auto;}
.exp-table{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%;}
.exp-table th,.exp-table td{padding:4px 6px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface);}
.exp-table thead th{position:sticky;z-index:3;background:var(--surface-2);font-weight:700;font-size:11px;
text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);text-align:center;}
.exp-table thead tr:first-child th{top:0;height:28px;}
.exp-table thead tr:nth-child(2) th{top:28px;}
/* Ширины прилипших колонок заданы жёстко и совпадают с шагом смещения: иначе
ячейка «Итого» шире своего шага и наезжает на соседнюю прилипшую. */
.exp-table thead tr:first-child th:nth-child(1),
.exp-table tbody td:nth-child(1){left:0;width:160px;min-width:160px;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.exp-table thead tr:first-child th:nth-child(2){left:160px;width:336px;min-width:336px;max-width:336px;}
.exp-table thead tr:nth-child(2) th:nth-child(-n+4),
.exp-table tbody td:nth-child(n+2):nth-child(-n+5){width:84px;min-width:84px;max-width:84px;}
.exp-table thead tr:nth-child(2) th:nth-child(1),
.exp-table tbody td:nth-child(2){left:160px;}
.exp-table thead tr:nth-child(2) th:nth-child(2),
.exp-table tbody td:nth-child(3){left:244px;}
.exp-table thead tr:nth-child(2) th:nth-child(3),
.exp-table tbody td:nth-child(4){left:328px;}
.exp-table thead tr:nth-child(2) th:nth-child(4),
.exp-table tbody td:nth-child(5){left:412px;}
.exp-table thead tr:first-child th:nth-child(-n+2),
.exp-table thead tr:nth-child(2) th:nth-child(-n+4){z-index:5;}
.exp-table tbody td:nth-child(-n+5){position:sticky;z-index:2;}
.exp-table tbody td:nth-child(5),
.exp-table thead tr:first-child th:nth-child(2),
.exp-table thead tr:nth-child(2) th:nth-child(4){border-right:2px solid var(--border);}
.exp-table th:not(:nth-child(-n+2)){border-left:1px solid var(--border);}
.exp-table td.exp-name{text-align:left;font-weight:600;}
.exp-table td.exp-num{text-align:right;}
.exp-table td.exp-total{background:var(--surface-2);}
.exp-mut{color:var(--text-muted);font-weight:400;}
/* Только цвет, без opacity: прозрачная ячейка «—» пропускала сквозь себя
уезжающие под прилипшую колонку цифры магазинов. */
.exp-dash{color:var(--text-muted);}
.exp-table td.exp-dash{font-weight:400;}
.exp-calc{color:var(--text-muted);}
.exp-pct{font-weight:700;}
.exp-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:11px;}
.exp-badge{display:inline-block;padding:0 6px;border-radius:999px;background:var(--warning-bg);color:var(--warning);
font-size:10.5px;font-weight:700;vertical-align:middle;}
.exp-table tr.exp-section td{background:var(--bg);font-weight:800;font-size:11px;
text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
/* Растянутая ячейка с пояснением не прилипает — прилипает только название
блока в первой колонке. */
.exp-table tr.exp-section td:nth-child(2){position:static;width:auto;max-width:none;}
/* Шапка блока: она же его итог и она же кнопка. Цифры набраны как в подвале
(жирные, на подложке «Итого»), а название с пояснением уходят в прилипшую
первую колонку - блок видно и когда таблица прокручена к дальним магазинам. */
.exp-table tr.exp-head td{background:var(--surface-2);font-weight:800;
border-top:2px solid var(--border);cursor:pointer;}
/* Название переносится по строкам, а не обрезается многоточием, как у статей:
в узкую колонку «Общехозяйственные расходы» с пояснением иначе не влезают.
Капители, как у заголовков-разделителей, тут намеренно нет - строка несёт
ещё и цифры, и вразрядку набранное название спорит с ними за место. */
.exp-table tr.exp-head td.exp-name{white-space:normal;overflow:visible;line-height:1.35;}
.exp-table tr.exp-head td.exp-mut{font-weight:400;}
.exp-table tr.exp-head:hover td{background:var(--bg);}
.exp-table tr.exp-head td.exp-name:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.exp-table tr.exp-head .exp-hint{display:block;}
/* Треугольник направления: вниз у развёрнутого блока, вправо у свёрнутого.
Идёт за названием в общей строке, а не в углу ячейки: колонка узкая, длинное
«Общехозяйственные» переносится, и вынесенный треугольник на него наезжал. */
.exp-caret{margin-left:5px;color:var(--text-muted);}
.exp-caret::before{content:'\25BC';}
.exp-head.exp-shut .exp-caret::before{content:'\25BA';}
.exp-table tr[hidden]{display:none;}
.exp-table tr.exp-grand td{font-weight:900;border-top:2px solid var(--border);}
.exp-table tr.exp-gross td{background:var(--success-bg);}
.exp-table tr.exp-gross td.exp-total{background:var(--success-bg);}
.exp-table tr.exp-unassigned td{font-style:italic;}
/* Ячейка, в которую можно писать, должна на это намекать. Раньше поле было
полностью прозрачным и проявлялось только под курсором: таблица выглядела
отчётом, и люди не догадывались, что суммы вводятся прямо в неё. Мягкая
подложка вместо рамки — чтобы сотня полей не зарябила пунктиром. */
.exp-in{width:100%;max-width:84px;padding:2px 4px;border:1px solid transparent;border-radius:var(--radius-sm);
background:var(--surface-2);color:var(--text);font:inherit;text-align:right;}
.exp-in:hover{border-color:var(--blue-light);}
.exp-in:focus{border-color:var(--blue);background:var(--surface);outline:none;}
.exp-in.exp-err{border-color:var(--danger);background:var(--danger-bg);}
.exp-auto{color:var(--text-muted);}
/* «Текущий месяц» в планировщике — та же плашка, что быстрые периоды в
«Финансах сети»: два раздела с выбором периода должны выглядеть одинаково. */
.exp-chip{
border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-muted);
border-radius:999px;padding:5px 14px;font:inherit;font-size:12.5px;font-weight:700;
cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.exp-chip:hover{border-color:var(--blue);color:var(--blue);}
/* Тост окрашен по смыслу. Цвета взяты ярче токенов: подложка тоста тёмная
всегда, и приглушённый var(--warning) на ней почти не читается. */
.toast-success svg{color:#4ADE80;}
.toast-warn svg{color:#FBBF24;}
.toast-error svg{color:#FB7185;}
.toast-info svg{color:var(--blue-light);}
.toast-error{box-shadow:0 14px 30px rgba(0,0,0,.3), inset 3px 0 0 #FB7185;}
.toast-warn{box-shadow:0 14px 30px rgba(0,0,0,.3), inset 3px 0 0 #FBBF24;}
/* Свежая задача заметно отличается от остальных: на доске в полсотни
карточек своя, только что заведённая, иначе теряется. */
.kb-card-new{background:linear-gradient(180deg,rgba(var(--blue-rgb),.14),transparent 60%),var(--surface);
border-color:var(--blue);}
/* Крестик удаления — на самой карточке: открывать её ради этого не нужно.
Приглушён, пока на карточку не навели, чтобы не пестрил на доске. */
.kb-card{position:relative;}
.kb-card-del{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:1;
border:none;border-radius:50%;background:transparent;color:var(--text-muted);
font-size:17px;cursor:pointer;opacity:0;transition:opacity .15s, color .15s, background .15s;}
.kb-card:hover .kb-card-del{opacity:1;}
.kb-card-del:hover{background:var(--danger-bg);color:var(--danger);}
.kb-card-title{padding-right:20px;}