:root {
    color-scheme:light;
    /* Контури Lucide для ::before/::after, де <svg> не вставити (див. resources/icons). */
    --i-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --brand-50:#fbf3f3; --brand-100:#f6e1e2; --brand-200:#edc1c3; --brand-300:#de8f93;
    --brand-400:#c95a60; --brand-600:#8a0c17; --brand-700:#6c0008;
    --brand-800:#520006; --brand-950:#2d090b;
    --n-0:#fff; --n-50:#faf8f7; --n-100:#f3f0ee; --n-200:#e7e2df;
    --n-300:#d3ccc8; --n-400:#a89f9b; --n-500:#7d746f;
    --n-600:#5a524e; --n-700:#3f3835; --n-800:#2a2523; --n-900:#1b1716;
    --success:#1f7a4d; --success-bg:#e3f3ea; --warning:#8a6410;
    --warning-bg:#fbf0d5; --danger:#b3261e; --danger-bg:#fbe4e2;
    --info:#2f5d8a; --info-bg:#e3ecf5;
    /* Фокус — темний нейтральний: бордовий кільцевий контур читався як помилка. */
    --focus:var(--n-900);
    /* Акценти поза основною палітрою — тепер токенами, а не hex у правилах.
       Помаранчевий затемнено до #9a4708: var(--orange) на своєму фоні давав 4.5:1
       впритул, для 11px цього мало. */
    --accent:#5c3d8a; --accent-bg:#eee9f8;
    --orange:#9a4708; --orange-bg:#fff1e6;
    --success-line:#b9dec9; --danger-line:#efbbb7;
    /* Рамка поля й прапорця: #a89f9b давав 2.6:1, а елементу керування
       треба 3:1 (WCAG 1.4.11). */
    --control-border:#8c827d;
    --bg:var(--n-50); --panel:var(--n-0); --ink:var(--n-700);
    --muted:#6f6661; --line:var(--n-200); --brand:var(--brand-700);
    --brand2:var(--brand-800); --ok:var(--success); --warn:var(--warning);
    --font-display:'Manrope',system-ui,'Segoe UI',sans-serif;
    --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    /* Радіуси й тіні стримані: інтерфейс для роботи, а не вітрина. Тінь
       лишається лише в того, що справді висить над сторінкою (меню, діалог). */
    --r-sm:2px; --r-md:4px; --r-lg:4px; --r-xl:6px;
    --sh-sm:none;
    --sh-md:0 4px 12px rgba(27,23,22,.08);
    --sh-lg:0 12px 32px rgba(45,9,11,.12);
}
*{box-sizing:border-box}
/* Атрибут hidden сильніший за наш display. Правило браузера [hidden]{display:none}
   має найнижчу вагу, тож будь-який наш .клас{display:flex|grid|block} його переб'є —
   і елемент, який JS «ховає» через element.hidden, лишається на екрані. Так модальне
   вікно PDF висіло поверх кожної заявки й перехоплювало всі кліки. Одне правило
   з !important закриває цей клас помилок для всіх елементів одразу. */
[hidden]{display:none!important}
html{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:93.75%;line-height:1.6;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh}
a{color:var(--brand-600);text-decoration:none}a:hover{color:var(--brand-700);text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Іконки Lucide: штрих 2 px, колір тексту. Спрайт у кожній сторінці, нульового розміру. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-play{fill:currentColor}
h1,h2,h3{font-family:var(--font-display);color:var(--n-900);letter-spacing:-.01em}
h1{font-size:1.8667rem;line-height:36px;font-weight:700}h2{font-size:1.3333rem;line-height:28px;font-weight:700}h3{font-size:1.1333rem;line-height:24px;font-weight:600}
.container{width:min(1600px,calc(100% - 32px));margin-inline:auto}.public-container{width:min(920px,calc(100% - 32px));margin:32px auto 56px}
.topbar{background:var(--n-0);color:var(--ink);border-bottom:1px solid var(--n-200);box-shadow:var(--sh-sm)}.topbar .container{display:flex;align-items:center;gap:24px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--n-900);font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:.08em;white-space:nowrap}.brand:hover{text-decoration:none;color:var(--n-900)}.brand img{display:block;width:40px;height:30px;object-fit:contain}.brand>.brand-copy{color:var(--n-900)}.brand-copy b{font:inherit}.brand-copy b>span{color:var(--brand-700)}.brand small{display:block;color:var(--muted);font-family:var(--font-body);font-size:0.8rem;font-weight:600;letter-spacing:.08em;line-height:1.1;text-transform:uppercase}.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.nav{display:flex;gap:4px;align-items:center;flex:1}.nav a{color:var(--n-600);font-weight:500;padding:18px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}.nav a:hover{color:var(--n-900);text-decoration:none}.nav a.active{color:var(--n-900);border-bottom-color:var(--brand-700);text-decoration:none}.userbox{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:0.9333rem}.main{padding:28px 0 56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}.card-pad{padding:18px 20px}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.span-2{grid-column:span 2}.span-all{grid-column:1/-1}
.wrap-any{overflow-wrap:anywhere}
.textarea-compact{min-height:0}
.device-brand{display:inline-block;margin-right:6px;padding:0 5px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:0.75rem;line-height:1.5;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n-800);background:var(--n-50);vertical-align:1px}.device-model{font-weight:600}.device-name-stacked .device-brand{display:table;margin:0 0 3px}
.device-brand-link{display:table;margin:0 0 3px;text-decoration:none}a.device-brand-link:hover,a.device-brand-link:focus-visible{border-color:var(--n-800);text-decoration:underline}
.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:16px}.page-head h1,h1,h2,h3{margin:0}.page-head p,.lead{margin:6px 0 0;color:var(--muted)}.section-title{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.stack{display:grid;gap:14px}.field{display:grid;gap:6px;align-content:start}.field>label,.field>.field-label{font-size:0.8667rem;font-weight:600;color:var(--n-800);line-height:20px;min-height:20px}.hint{font-size:0.8rem;color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;min-height:40px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);padding:8px 12px;color:var(--ink);font:inherit}textarea{resize:vertical;min-height:92px}input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-100);border-color:var(--brand-700)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border:1px solid var(--n-300);border-radius:var(--r-md);padding:0 14px;font-family:var(--font-body);font-weight:600;font-size:0.9333rem;cursor:pointer;background:var(--n-0);color:var(--n-900)}.btn:hover{text-decoration:none;background:var(--n-100);border-color:var(--n-400)}.btn-primary{background:var(--brand-700);border-color:var(--brand-700);color:#fff}.btn-primary:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff}.btn-danger{background:var(--danger-bg);border-color:var(--danger-bg);color:var(--danger)}.btn-small{min-height:32px;padding:0 12px;font-size:0.8667rem;border-radius:var(--r-sm)}.actions{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center}
/* Ряд, у якому поруч із кнопкою стоять поля з підписами: кнопка має стояти
   на лінії самих полів, а не посередині підпису й поля. */
.actions:has(>.field){align-items:flex-end}
.alert{padding:12px 14px;border-radius:var(--r-md);margin-bottom:16px;border:1px solid}.alert-success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.errors{margin:0;padding-left:20px}.alert-error .error-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Перелік усередині повідомлення: заявки, до яких може належати лист. */
.plain{list-style:none;margin:6px 0;padding:0}.plain li{margin:2px 0}
/* Лічильники — один ряд із роздільниками, а не п'ять однакових карток:
   gap в 1px на тлі лінії дає межі між клітинками за будь-якої кількості колонок. */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-bottom:20px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}.kpi{padding:14px 18px;background:var(--panel)}.kpis>.card{border:0;border-radius:0;box-shadow:none}.kpi:hover{background:var(--n-50);text-decoration:none}.kpi .value{font-family:var(--font-display);color:var(--n-900);font-size:1.7333rem;line-height:32px;font-weight:700;font-variant-numeric:tabular-nums}.kpi .label{color:var(--muted);font-size:0.8667rem}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:0.9333rem}.table th{font-size:0.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.table td{padding:10px 12px;border-bottom:1px solid var(--n-100);vertical-align:top}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:var(--n-50)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:0.8rem}
/* Позначки стану — звичайними словами, не капслоком: їх читають десятками на
   сторінці, і крик дрібними літерами стомлює швидше, ніж допомагає. */
.badge{display:inline-flex;align-items:center;min-height:22px;padding:1px 7px;border-radius:var(--r-sm);background:var(--n-100);color:var(--n-700);font-size:0.8rem;font-weight:600;white-space:nowrap}.badge-submitted{background:var(--brand-50);color:var(--brand-700)}.badge-received,.badge-diagnosis{background:var(--info-bg);color:var(--info)}.badge-awaiting_approval,.badge-waiting_parts,.badge-at_manufacturer{background:var(--warning-bg);color:var(--warning)}.badge-repair{background:var(--accent-bg);color:var(--accent)}.badge-ready{background:var(--success-bg);color:var(--success)}.badge-issued,.badge-closed{background:var(--n-100);color:var(--n-600)}.badge-rejected{background:var(--danger-bg);color:var(--danger)}.badge-danger{background:var(--danger);color:var(--n-0)}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px;align-items:start}.detail-list{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;font-size:0.9333rem}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;white-space:pre-wrap}.timeline{display:grid;gap:0}.event{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--n-100);font-size:0.8667rem}.tabs{display:flex;gap:12px 18px;flex-wrap:wrap}.tab{padding:8px 2px;border-bottom:2px solid transparent;color:var(--n-600);font-weight:500;background:transparent}.tab:hover{color:var(--n-900);text-decoration:none}.tab.active{color:var(--n-900);border-bottom-color:var(--brand-700);text-decoration:none}.row-warning td{background:var(--warning-bg)}.nowrap{white-space:nowrap}.col-when{width:130px}.searchbar-5{grid-template-columns:200px 220px 150px 150px auto}.link-code{font-size:1.8667rem;letter-spacing:.18em;font-weight:700}.table-list td{padding:10px 12px}.table-list{table-layout:fixed;width:100%;min-width:880px}.col-number{width:196px;white-space:nowrap}.col-number .tags{white-space:normal}.col-state{width:174px}.col-engineer{width:124px}.col-date{width:132px;white-space:nowrap}
.table-list thead .col-date{white-space:normal}.table-list td{overflow-wrap:anywhere}.tags{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}.tags .badge-review{margin-left:0}.tag{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);background:var(--n-100);color:var(--n-600);font-size:0.8rem}.tag-allegro{background:var(--orange-bg);color:var(--orange)}.row-link{color:inherit}.row-new .col-number .row-link{font-weight:700}.days{margin-top:4px;font-size:0.8rem;color:var(--muted)}.days-warn{color:var(--warning);font-weight:600}.days-bad{color:var(--danger,#b3261e);font-weight:600}.searchbar.searchbar-list{grid-template-columns:150px 140px 160px 160px auto auto 1fr auto}.btn-ghost{border-color:transparent;background:transparent}.kpis-4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}.kpi-bad .value{color:var(--danger)}.danger{color:var(--danger)}.actionbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-lg)}.actionbar-state{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:0.8667rem;color:var(--n-700)}.actionbar-state .days{margin:0}.actionbar-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}.actionbar-actions form{margin:0}.menu{position:relative}.menu summary{list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}.menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md,0 8px 24px rgba(0,0,0,.12));padding:6px;z-index:30}.menu-list a{padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}.menu-list a:hover{background:var(--n-50)}.menu-list form{margin:0}.menu-item{display:block;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.menu-item:hover{background:var(--n-50)}.card-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.card-head-row h2{margin:0}.error-page{padding-top:40px}.error-card{max-width:640px;margin:0 auto;text-align:center}.error-code{font-size:3.7333rem;font-weight:800;color:var(--brand-600);letter-spacing:.04em}.error-card .actions{justify-content:center}.checks{display:flex;gap:14px;flex-wrap:wrap}@media print{.topbar,.actionbar,.actionbar-actions,form,.btn,.pagination,.searchbar,.event-raw,.menu,.alert{display:none!important}.main{padding:0}.container{width:100%}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}.split{grid-template-columns:1fr}body{background:#fff}}.status-track-compact{width:100%;gap:6px}.status-track-compact .status-step{font-size:0.8rem;padding:4px 8px}.actionbar-hint{width:100%;margin:8px 0 0}.sign{max-width:960px;margin:0 auto}.sign-doc{height:46vh;min-height:280px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--n-100);margin-bottom:14px}.sign-doc iframe{width:100%;height:100%;border:0}.sign-pad{position:relative;border:2px dashed var(--n-300);border-radius:var(--r-lg);background:#fff;touch-action:none}.sign-pad canvas{display:block;width:100%;touch-action:none;cursor:crosshair}.sign-baseline{position:absolute;left:24px;right:24px;bottom:34px;border-top:1px solid var(--n-300);pointer-events:none}.doc-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--n-100)}.doc-row:last-child{border-bottom:0}.doc-actions{display:flex;gap:12px 24px;flex-wrap:wrap}.passport-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.customer-lookup{position:relative}.lookup-results{position:absolute;left:0;right:0;top:100%;z-index:25;display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md,0 8px 24px rgba(0,0,0,.12));padding:6px;max-height:320px;overflow:auto}.lookup-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:0;border-radius:var(--r-md);background:transparent;text-align:left;cursor:pointer;font:inherit}.lookup-item:hover{background:var(--n-50)}.lookup-none{padding:8px 10px}.capture{max-width:640px;margin:0 auto}.stage-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.stage-tile{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 10px;border:2px solid var(--n-300);border-radius:var(--r-lg);background:var(--n-0);font-weight:600;text-align:center;cursor:pointer}.stage-tile input{position:absolute;opacity:0;width:0;height:0}.stage-tile:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-700)}/* Плитки-спостереження на прийманні й стан коробки: як етапи знімання, але
   компактніші й багато в ряд — їх понад десять, і кожна має вміститись на телефоні. */
.pick-tiles{display:flex;flex-wrap:wrap;gap:6px}
.pick-tile{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border:1.5px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);font-size:0.8667rem;font-weight:600;color:var(--n-700);cursor:pointer;user-select:none}
.pick-tile input{position:absolute;opacity:0;width:0;height:0}
.pick-tile:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);color:var(--brand-700)}
.pick-tile:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pick-note-label{margin-top:8px}
/* Спадний вибір: тринадцять спостережень або два десятки ознак плитками —
   це стіна злиплих кнопок на пів екрана, де око не бачить, де закінчується
   один пункт і починається інший. Згорнуте поле виглядає як звичайний список
   вибору — те саме, що поруч, — і само підписує, що обрано; розкрите показує
   позначки одна під одною з відступом 38px на рядок. Без сценарію теж
   працює: details відкриває браузер сам. */
.picker{border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0)}
.picker>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;list-style:none;cursor:pointer;font-size:0.9333rem;color:var(--n-900)}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-left:4px;border-right:2px solid var(--n-600);border-bottom:2px solid var(--n-600);transform:rotate(45deg) translateY(-2px)}
.picker[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.picker[open]>summary{border-bottom:1px solid var(--n-200)}
.picker:hover{border-color:var(--n-400)}
.picker:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
/* contain:inline-size — інакше довгий підпис обраного (nowrap) рахується в
   min-content і розтягує картку за край екрана телефона замість обрізатись
   трикрапкою; самого min-width:0 тут замало, бо вгору йде ланцюжок сіток. */
.picker-state{flex:1 1 auto;min-width:0;contain:inline-size;color:var(--muted);font-size:0.8667rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker>summary>span:first-child{flex:0 0 auto}
.picker:has(input:checked) .picker-state{color:var(--brand-700);font-weight:600}
.picker-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px;padding:8px;max-height:320px;overflow:auto}
.picker-option{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 10px;border-radius:var(--r-sm);font-size:0.8667rem;color:var(--n-700);cursor:pointer}
.picker-option:hover{background:var(--n-50)}
.picker-option input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand-700)}
.picker-option:has(input:checked){background:var(--brand-50);color:var(--brand-700);font-weight:600}
.picker-option-alone{grid-column:1/-1;margin-top:6px;padding-top:10px;border-top:1px solid var(--n-200)}
.picker-foot{display:flex;justify-content:flex-end;padding:0 8px 8px}
.capture-buttons{display:grid;gap:10px}.capture-note{margin:-2px 0 2px;line-height:1.35}.capture-btn{min-height:64px;font-size:1.0667rem;cursor:pointer}.capture-btn:focus-within{outline:2px solid var(--focus);outline-offset:2px}.capture-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}.capture-item{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--n-0)}.capture-item .progress{grid-column:1/-1}.capture-item.is-done{border-color:var(--success-line)}.capture-item.is-failed{border-color:var(--danger);background:var(--danger-bg)}.capture-item.is-short{border-color:var(--warning);background:var(--warning-bg)}.capture-warn{grid-column:1/-1;color:var(--n-800);line-height:1.35}.capture-warn:empty{display:none}.capture-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.9333rem}.media-stage{margin:18px 0 8px;display:flex;align-items:center;gap:8px}.media-stage h3{margin:0;font-size:0.8667rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.media-edit{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 8px 10px}.media-edit select{min-height:32px;font-size:0.8rem;padding:0 8px}.media-edit .checkline{font-size:0.8rem}.media-delete{margin:0 8px 10px}.share-url{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.share-url input{flex:1;min-width:240px;font-family:var(--font-mono);font-size:0.8667rem}.doc-list{margin:0;padding-left:18px}.menu-form{min-width:320px;padding:12px}.menu-sub{margin-top:4px;padding-top:4px;border-top:1px solid var(--n-100)}.menu-sub>summary{list-style:none}.menu-sub>summary::-webkit-details-marker{display:none}.menu-sub>.menu-form{padding:8px 10px 10px}.menu-form .field{margin:0 0 8px}.disclosure summary{list-style:none;display:inline-flex;cursor:pointer}.disclosure summary::-webkit-details-marker{display:none}.disclosure[open] summary{margin-bottom:6px}.actionbar-warn{color:var(--danger);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Доки доріжка станів на екрані, стан у панелі не повторюється — він за 40px
   вище. Панель липка: щойно доріжка поїхала вгору, позначка зʼявляється
   (клас ставить сценарій; без сценарію позначка є завжди). */
.actionbar.is-under-track .actionbar-state>.badge{display:none}.actionbar-warn:hover{color:var(--danger)}.field-due label{color:var(--danger);font-weight:700}.field-due select{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}.event-raw{margin-top:4px}.event-raw summary{cursor:pointer;list-style:none}.event-raw summary::-webkit-details-marker{display:none}.event-raw summary::before{content:'';display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i-chevron-right) center/contain no-repeat;mask:var(--i-chevron-right) center/contain no-repeat;vertical-align:-.15em;margin-right:4px;transition:transform .15s}.event-raw[open] summary::before{transform:rotate(90deg)}.event-raw code{display:block;margin-top:4px;white-space:pre-wrap;word-break:break-all;color:var(--muted)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.media{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--n-50)}.media img,.media video{display:block;width:100%;height:150px;object-fit:contain;background:var(--brand-950)}.media .meta{padding:8px;font-size:0.8rem}
.form-section{padding:20px;border-bottom:1px solid var(--line)}.form-section:last-child{border-bottom:0}/* Ряд фільтрів над списком. Був жорсткою сіткою з порахованими стовпцями —
   і щойно підпис виростав або проміжок ставав більшим, полю пошуку лишалось
   кілька пікселів, а курсор нікуди було поставити. Тепер це ряд, який
   переноситься: у кожного фільтра своя найменша ширина, пошук забирає решту
   й ніколи не стає вужчим за 200px, кнопки тримаються праворуч. */
.searchbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.searchbar>.sel,.searchbar>select{flex:1 1 160px;min-width:150px;max-width:220px}
.searchbar>input[type=search],.searchbar>input[type=text],.searchbar>.combo{flex:4 1 220px;min-width:200px}
.searchbar>.datefield{flex:1 1 210px;min-width:190px}
.searchbar>.checks{flex:0 1 auto}
.searchbar>.actions{flex:0 0 auto;margin-left:auto}.pagination{padding:18px}
/* Шапка публічної сторінки — заголовок і абзац, без темного банера: клієнт
   прийшов заповнити форму, а не на лендінг. */
.public-hero{padding:4px 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.public-hero h1{color:var(--n-900)}.public-hero p{color:var(--muted);max-width:720px}.public-hero .muted{color:var(--muted)}.public-card{overflow:hidden}.status-track{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}.status-step{font-size:0.8rem;padding:7px 9px;border-radius:var(--r-md);background:var(--n-100);color:var(--muted)}.status-step.active{background:var(--brand-700);color:#fff}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.divider{height:1px;background:var(--line);margin:18px 0}.login{width:min(430px,calc(100% - 32px));margin:10vh auto}.login .card{padding:28px}.public-nav{display:flex;align-items:center;margin-bottom:18px}.empty{padding:36px;text-align:center;color:var(--muted)}
@media(max-width:900px){.grid-4,.grid-3,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.topbar .container{flex-wrap:wrap;padding:12px 0}.nav{order:3;flex:0 0 100%;width:100%}.detail-list{grid-template-columns:1fr}.detail-list dd{margin-bottom:6px}}
@media(max-width:620px){.container,.public-container{width:min(100% - 32px,1600px)}.flow-tiles.stage-tiles.path-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-3,.grid-4,.kpis{grid-template-columns:1fr}.span-2{grid-column:auto}.searchbar,.searchbar.searchbar-list,.searchbar-5{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.event{grid-template-columns:1fr}.userbox span{display:none}.brand small{display:none}.public-foot{flex-direction:column;align-items:flex-start;gap:8px}}
.badge-review{background:var(--warning-bg);color:var(--warning);margin-left:6px}
.checkline{display:inline-flex;align-items:center;gap:6px;font-size:0.8667rem;color:var(--n-600);white-space:nowrap}
.checkline input{width:auto;margin:0}
.ocr-panel{background:var(--n-50);border:1px dashed var(--n-300);border-radius:var(--r-lg);padding:16px}
.ocr-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.ocr-controls>.field{flex:1 1 280px}
.ocr-result{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.ocr-result .small.muted{flex:1 1 100%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);cursor:pointer;font:inherit}
.chip:hover{border-color:var(--brand-400);background:var(--brand-50)}
/* Обрана: після .chip і з тією самою вагою — раніше .chip стояв нижче й
   перекривав фон, і активний «Мої в роботі» був білим полем без напису. */
.chip.chip-primary{background:var(--brand-700);color:#fff;border-color:var(--brand-700)}
.chip.chip-primary:hover{background:var(--brand-800);border-color:var(--brand-800)}
.field-filled{border-color:var(--success)!important;background:var(--success-bg)}
.ocr-block{margin-top:6px;padding-top:6px;border-top:1px solid var(--n-200)}
.ocr-line{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:0.8rem;margin-top:3px}
/* Картка файла (partials/media-card), лише вкладка «Файли» (#media): ті самі
   класи .media/.media-grid має сторінка клієнта, кабінет партнера й посилання. Превʼю, назва одним рядком, ряд дій
   унизу на тій самій висоті в усіх картках ряду, OCR згорнуто. */
#media .media{display:flex;flex-direction:column}.media-thumb{position:relative}
.media-flag{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:var(--r-sm);background:var(--success);color:#fff;font-size:0.7333rem;font-weight:600;pointer-events:none}
.media-body{display:flex;flex-direction:column;gap:4px;flex:1;padding:8px 10px 10px;font-size:0.8rem;min-width:0}
.media-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-sub{color:var(--muted);font-size:0.7333rem}.media-caption{overflow-wrap:anywhere}
.media-actions{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.media-mute{margin:0;flex:none}.media-mute .btn{min-height:32px;min-width:32px;padding:0;justify-content:center}.media-mute .btn:hover{color:var(--danger)}.gallery-grid .media>.media-mute{margin:0 8px 10px}.media-muted{white-space:nowrap}.media-muted .icon{width:13px;height:13px;vertical-align:-2px}
.media-actions .media-edit{display:flex;align-items:center;gap:8px;flex:1;min-width:0;margin:0}.media-actions .media-edit .sel{flex:1;min-width:0}
.media-actions .media-edit .sel-button,.media-actions .media-edit select{min-height:32px;padding:0 8px;font-size:0.8rem}.media-actions .checkline{font-size:0.8rem;white-space:nowrap}
.media-thumb .media-delete{position:absolute;top:6px;right:6px;margin:0}.media-thumb .media-delete .btn{min-height:30px;min-width:30px;padding:0;justify-content:center;background:rgba(255,255,255,.92);border:1px solid var(--line)}.media-thumb .media-delete .btn:hover{color:var(--danger);border-color:var(--danger)}
.media-actions .media-edit .sel-button{padding-right:28px}
.media-note{font-size:0.8rem}
.media-body .ocr-block{margin:4px 0 0;padding-top:6px}.ocr-block>summary{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ocr-block[open]>summary{margin-bottom:4px}
.ocr-tag{font-size:0.7rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}.ocr-score{color:var(--muted)}.ocr-score.is-low{color:var(--warning);font-weight:600}
/* Завантаження: файли, під ними — етап, підпис, «клієнту» й кнопка одним рядом. */
.media-upload{margin-top:12px}.media-upload-row{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto auto;gap:10px 14px;align-items:end;margin-top:10px}.media-upload-row .field{margin:0}.media-upload-row .checkline{padding-bottom:10px}
@media(max-width:620px){.media-upload-row{grid-template-columns:1fr}.media-upload-row .checkline{padding-bottom:0}
/* На телефоні — дві картки в ряд: по одній вони були завдовжки з екран. */
#media .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.media-body{padding:6px 8px 8px}.media-actions .media-edit{flex-wrap:wrap}.media-actions .media-edit .sel{flex-basis:100%}}
.doc-tile{display:flex;align-items:center;justify-content:center;min-height:120px;background:var(--n-100);color:var(--n-600);font-weight:700;letter-spacing:.08em;border-radius:var(--r-md);text-decoration:none}
/* Графіки «Огляду» (DashboardCharts, components/chart). Правила — diagram-design:
   вісь від нуля, один акцент (бренд), числа шрифтом Mono, жодних тіней і
   градієнтів. На телефоні SVG не стискається до нечитабельного дрібного
   тексту: тримає ширину viewBox і прокручується у своїй рамці. */
.chart-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.chart-card{min-width:0}
.chart-title{font-size:1.3333rem;line-height:28px}
.chart-lead{margin:2px 0 10px}
.chart-scroll{overflow-x:auto}
.chart{display:block;width:100%;min-width:480px;height:auto}
.chart .chart-grid{stroke:var(--line);stroke-width:1}
.chart .chart-axis{stroke:var(--n-400);stroke-width:1}
.chart-tick{fill:var(--muted);font:0.8rem var(--font-mono)}
.chart-category{fill:var(--ink);font:600 0.8rem var(--font-body)}
.chart-value{fill:var(--n-600);font:500 0.8rem var(--font-mono)}
.chart-value-focal{fill:var(--brand-700);font-weight:700}
.chart-line{fill:none;stroke:var(--n-500);stroke-width:1.5;stroke-linejoin:round}
.chart-line-focal{stroke:var(--brand-700);stroke-width:2.4}
.chart-dot-focal{fill:var(--brand-700);stroke:var(--panel);stroke-width:1}
.chart-bar{fill:var(--n-100);stroke:var(--n-500);stroke-width:1}
.chart-bar-focal{fill:var(--brand-100);stroke:var(--brand-700)}
.chart a:hover .chart-bar-focal,.chart a:focus .chart-bar-focal{fill:var(--brand-200)}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:0.8667rem;color:var(--ink)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-key{display:inline-block;width:18px;height:0;border-top:1.5px solid var(--n-500)}
.chart-key-focal{border-top:3px solid var(--brand-700)}
.health-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.health-item{min-width:110px;padding:10px 14px;border-radius:var(--r-md);background:var(--n-50)}
.health-item .value{font-size:1.4667rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--n-900)}
.health-item .label{font-size:0.8rem;color:var(--muted)}
.health-item.is-warn{border-color:var(--warning);background:var(--warning-bg)}
.health-item.is-down{border-color:var(--danger);background:var(--danger-bg)}
.alert-warning{background:var(--warning-bg);color:var(--n-800);border:1px solid var(--warning)}
.badge-warranty-active{background:var(--success-bg);color:var(--success)}
.badge-warranty-expiring{background:var(--warning-bg);color:var(--warning)}
.badge-warranty-expired{background:var(--danger-bg);color:var(--danger)}
.badge-warranty-unknown{background:var(--n-100);color:var(--n-600)}
.warranty-expired{border-color:var(--danger)}
.warranty-expiring{border-color:var(--warning)}
.box-text{white-space:pre-wrap;padding:10px 12px;border:1px solid var(--n-200);border-radius:var(--r-md);background:var(--n-50);font-size:0.9333rem;min-height:96px}
.recovery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.recovery code{display:block;padding:8px 10px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-0);font-size:1rem;text-align:center}
.userbox a{color:inherit;text-decoration:none}
.kpi-inline{text-align:right;white-space:nowrap}

/* ─────────────────────────────────────────────────────────────────────────────
   Дизайн-система: керуючі елементи, які раніше лишались системними,
   і класи замість інлайнових стилів у шаблонах.
   ───────────────────────────────────────────────────────────────────────── */

/* Вибір файлів. Системна кнопка «Choose files» виглядає по-різному в кожному
   браузері й не слухається шрифта форми. Оригінальний input лишається на
   місці (він і відкриває діалог, бо всередині <label>), але не показується. */
.filepick{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 6px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-0);cursor:pointer}
.filepick:hover{border-color:var(--brand-400);background:var(--brand-50)}
.filepick:focus-within{outline:3px solid var(--brand-100);border-color:var(--brand-700);border-style:solid}
.filepick-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;opacity:0;cursor:pointer}
.filepick-button{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-100);color:var(--n-900);font-size:0.8667rem;font-weight:600;white-space:nowrap}
.filepick-name{color:var(--muted);font-size:0.8667rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick.has-files{border-style:solid;border-color:var(--success);background:var(--success-bg)}
.filepick.has-files .filepick-name{color:var(--success);font-weight:600}

/* Прапорці й перемикачі: розмір під палець, підпис не з’їжджає від базової лінії.
   Саму галочку малюємо нижче, у блоці дизайн-системи керуючих елементів. */
.checkline{display:inline-flex;align-items:center;gap:8px;font-size:0.8667rem;color:var(--n-700);white-space:nowrap;cursor:pointer;min-height:36px}
.checkline>span{white-space:normal}
.checkline-block{display:flex;white-space:normal;align-items:flex-start;padding:2px 0}
.checkline-block input[type=checkbox]{margin-top:3px}

/* Списки: власна стрілка, щоб висота й відступи збігалися з полями вводу.
   Це вигляд поля БЕЗ скрипта — сам розкритий перелік малює операційна
   система, і вплинути на нього звідси не можна. Зі скриптом список
   підмінюється власним (.sel нижче). */
select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d746f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center}

/* Поля дати й часу в Safari виростають вище за решту — вирівнюємо явно */
input[type=date],input[type=datetime-local],input[type=time]{min-height:44px;line-height:22px}

/* Лічильники в числових полях малює браузер, і в кожному вони свої.
   Прибираємо: стрілками вгору/вниз і колесом крок працює далі. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Хрестик «очистити» в полі пошуку WebKit малює сам, і він не в дизайні */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button{-webkit-appearance:none;display:none}

/* Прапорці й перемикачі малюємо самі: accent-color задає лише колір,
   а форму галочки й товщину рамки кожна система вирішує по-своєму. */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;
    width:18px;height:18px;min-height:0;flex:0 0 auto;margin:0;padding:0;
    border:1.5px solid var(--control-border);background:var(--n-0);cursor:pointer;
    background-repeat:no-repeat;background-position:center}
input[type=checkbox]{border-radius:var(--r-sm)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--brand-400)}
input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--brand-700);border-color:var(--brand-700)}
input[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.3 8.5 11 1.5'/%3E%3C/svg%3E")}
input[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23fff'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:default}

/* ─────────────────────────────────────────────────────────────────────────────
   Власний спадний список і власний календар.

   Нативний елемент лишається в розмітці: він зберігає значення, надсилається
   з формою й далі бере участь у перевірці required — просто стає прозорим.
   Саме тому він не display:none: прихований елемент браузер не вміє показати
   біля нього підказку «заповніть це поле» і мовчки блокує надсилання.
   ───────────────────────────────────────────────────────────────────────── */
.sel{position:relative;display:block;min-width:0}
.sel-native{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;
    opacity:0;pointer-events:none;border:0;padding:0;margin:0;background:none}
.sel-button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
    border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);
    padding:10px 36px 10px 13px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d746f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center}
.sel-button:hover{border-color:var(--n-400)}
.sel-button.is-open{outline:3px solid var(--brand-100);border-color:var(--brand-700)}
.sel-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-value.is-placeholder{color:var(--muted)}

/* Поле з підказками: те саме поле вводу, стрілка як у списку, вікно — .ui-pop */
.combo{position:relative;display:block;min-width:0}
.combo>input{padding-right:36px}
.combo-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:34px;border:0;border-radius:0 var(--r-md) var(--r-md) 0;background:transparent no-repeat center url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237d746f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");cursor:pointer}
.combo.is-open>input{outline:3px solid var(--brand-100);border-color:var(--brand-700)}

.ui-pop{position:fixed;z-index:80;display:flex;flex-direction:column;overflow:hidden;
    background:var(--panel);border:1px solid var(--n-300);border-radius:var(--r-md);
    box-shadow:var(--sh-lg);font-size:0.9333rem}
.sel-search{margin:8px;min-height:38px;flex:0 0 auto}
/* Загальне правило для полів вводу (width:100%) специфічніше за клас, тому
   поле пошуку у вікні списку виходило за його межі: сто відсотків ширини
   плюс власні поля з обох боків. Тут та сама специфічність, і поле займає
   рівно те, що лишилось. */
.ui-pop>input[type=text].sel-search{width:auto;align-self:stretch}
.ui-list{list-style:none;margin:0;padding:4px;overflow:auto;scrollbar-width:thin}
.ui-list::-webkit-scrollbar{width:10px}
.ui-list::-webkit-scrollbar-thumb{background:var(--n-300);border:3px solid var(--panel);border-radius:var(--r-sm)}
.ui-opt{padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;line-height:1.35}
.ui-opt.is-placeholder{color:var(--muted)}
/* Активний рядок — рамкою, а не лише фоном: --brand-50 на білому давав 1.09:1,
   і користувач клавіатури не бачив, де він. */
.ui-opt.is-active{background:var(--brand-50);outline:2px solid var(--brand-700);outline-offset:-2px}
.ui-list:focus{outline:none}
.ui-opt.is-selected{background:var(--brand-700);color:#fff;font-weight:600}
.ui-opt.is-selected.is-placeholder{color:#fff}
.ui-opt.is-disabled{opacity:.5;cursor:default}
.ui-empty{padding:14px;color:var(--muted);text-align:center}

.datefield{position:relative;display:flex;gap:12px;align-items:stretch;min-width:0}
.date-native{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;
    opacity:0;pointer-events:none;border:0;padding:0;margin:0;background:none}
.date-text{flex:1 1 auto;min-width:0}
.date-time{flex:0 0 86px;width:86px;text-align:center}
.date-text.is-bad{border-color:var(--danger);background:var(--danger-bg)}
.date-open{flex:0 0 44px;width:44px;min-height:44px;border:1px solid var(--n-300);
    border-radius:var(--r-md);background:var(--n-0);cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Crect x='1.75' y='3.25' width='14.5' height='13' rx='2.5' fill='none' stroke='%235a524e' stroke-width='1.5'/%3E%3Cpath d='M1.75 7.25h14.5M5.75 1.75v3M12.25 1.75v3' fill='none' stroke='%235a524e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center}
.date-open:hover{border-color:var(--brand-400);background-color:var(--brand-50)}
.date-open.is-open{outline:3px solid var(--brand-100);border-color:var(--brand-700)}

.cal{padding:12px;min-width:288px}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cal-title{flex:1;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--n-900)}
.cal-nav{width:34px;height:34px;border:1px solid var(--n-300);border-radius:var(--r-sm);
    background:var(--n-0);color:var(--n-700);font-size:1.2rem;line-height:1;cursor:pointer}
.cal-nav:hover{background:var(--brand-50);border-color:var(--brand-400)}
.cal-grid{display:grid;grid-template-columns:repeat(7,36px);gap:2px;justify-content:center}
.cal-dow{height:26px;display:flex;align-items:center;justify-content:center;
    font-size:0.8rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.cal-day{height:34px;border:1px solid transparent;border-radius:var(--r-sm);background:none;
    color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.cal-day:hover{background:var(--brand-50);color:var(--brand-700)}
.cal-day.is-today{border-color:var(--brand-300);font-weight:700}
.cal-day.is-selected{background:var(--brand-700);border-color:var(--brand-700);color:#fff;font-weight:700}
.cal-foot{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cal-foot .btn{flex:1}

/* Підстановка з OCR підсвічує поле — і підмінене теж */
.sel.field-filled .sel-button,.datefield.field-filled .date-text{border-color:var(--success);background:var(--success-bg)}

/* Гортання сторінок */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.pager-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
    padding:0 12px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);
    color:var(--n-800);font-size:0.9333rem;font-weight:600;font-variant-numeric:tabular-nums}
a.pager-link:hover{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700);text-decoration:none}
.pager-link.is-current{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.pager-link.is-off{color:var(--n-400);border-color:var(--line);background:var(--n-50)}
.pager-gap{display:inline-flex;align-items:center;padding:0 4px;color:var(--muted)}
.pager-count{margin-top:10px;text-align:center;color:var(--muted);font-size:0.8rem}

/* Перемикач мови. У публічній частині — рядок у підвалі, без кнопки в шапці:
   мова визначається автоматично, а вибір лишається для тих, кому не вгадали. */
.lang-switch{display:inline-flex;gap:10px;align-items:center;font-size:0.8667rem}
.lang-switch a{color:var(--muted);text-decoration:none;padding:2px 4px;border-radius:var(--r-sm)}
.lang-switch a:hover{color:var(--brand-700);background:var(--brand-50);text-decoration:none}
.lang-switch a.is-current{color:var(--n-900);font-weight:700}
.lang-switch-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);justify-content:center;width:100%}
.public-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:0.8667rem}.public-foot>span:empty{display:none}

/* Відступи, які раніше жили в інлайнових style= */
.section-top{margin-top:18px}
.section-top-small{margin-top:12px}
.section-bottom{margin-bottom:18px}.section-bottom-small{margin-bottom:10px}
.form-top{margin-top:16px}
.alert-top{margin-top:16px}
.field-top{margin-top:12px}
.actions-top{margin-top:18px}
.actions-tight{margin-top:6px}
.actions-end{align-items:flex-end}
.actions-forms{gap:16px;flex-wrap:wrap;align-items:flex-end}
.grid-inset{margin:12px 0}
.grid-tight{gap:6px}
.alert-inset{margin:0 0 12px}
.login-brand{text-align:center;margin-bottom:18px}
.card-warning{border-color:var(--warning)}
.card-accent{border-color:var(--brand-300)}
.detail-list-narrow{grid-template-columns:110px 1fr}
.box-key{min-height:auto;font-size:1.2rem;letter-spacing:.06em}
.box-link{min-height:auto;word-break:break-all}
.total-value{font-size:1.3333rem;font-weight:700}
.doc-row{margin-bottom:8px}
.searchbar-simple{grid-template-columns:1fr auto}
.searchbar-filter{grid-template-columns:1fr auto auto}

/* Нотатки: раніше кольори були зашиті просто в атрибут style */
.notes{margin:16px 0}
/* Примітка тепер може бути цілим листом клієнта: переноси рядків значущі
   (під «Numer seryjny» стоїть перелік вузлів), а посилання й довгі коди
   без пробілів інакше розсовували картку на телефоні. */
.note{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50);white-space:pre-wrap;overflow-wrap:anywhere}.note .small{white-space:normal}
.note-public{border-color:var(--success-line);background:var(--success-bg)}

@media(max-width:620px){
    .public-foot{flex-direction:column;align-items:flex-start}
    .filepick{flex-wrap:wrap}
}

/* QR для двофакторного входу.
   width:auto — свідомо: SVG малюється з цілим розміром модуля, і будь-яке
   стиснення робить модулі різної ширини. Саме через це камера не читала
   код: 61 модуль у 218 пікселях — 3,5 пікселя на модуль. */
/* ─────────────────────────────────────────────────────────────────────────────
   Правка рядка таблиці. Форма розкривається окремим рядком на всю ширину:
   у вузькій колонці «Правка» поля обрізались і половину форми не було видно.
   ───────────────────────────────────────────────────────────────────────── */
.card-summary{font-family:var(--font-display);font-size:1.3333rem;font-weight:700;color:var(--n-900);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.card-summary::-webkit-details-marker{display:none}
.card-summary::before{content:'';width:8px;height:8px;border-right:2px solid var(--n-500);border-bottom:2px solid var(--n-500);transform:rotate(-45deg);transition:transform .15s ease}
details[open]>.card-summary::before{transform:rotate(45deg)}
.table-editable td{vertical-align:middle}
.table-editable .col-action{width:1%;white-space:nowrap;text-align:right;vertical-align:top}
.row-edit>td{background:var(--n-50);border-bottom:2px solid var(--line);padding:18px}
.table-editable tr.row-edit:hover>td{background:var(--n-50)}
.edit-form{align-items:start}

/* Підписи «нетто» / «брутто». Найдорожча плутанина в сервісі — 23% різниці
   між тим, що в прайсі, і тим, що клієнт платить. Жодна сума не показується
   без підпису, тому підпис зроблено дрібним, але постійним. */
.tag-net,.tag-gross{display:inline-block;padding:1px 6px;border-radius:var(--r-sm);font-size:0.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.tag-net{background:var(--n-100);color:var(--n-600)}
.tag-gross{background:var(--info-bg);color:var(--info)}
.totals{text-align:right;min-width:230px}
.totals-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:2px 0}
.totals-gross{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-weight:700;color:var(--n-900)}
.totals-note{margin-top:4px}

/* Історія пристрою: той самий серійник уже бував у сервісі. */
.history{border-color:var(--info)}
.history-return{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.history .row-return>td{background:var(--danger-bg)}
.badge-repeat{background:var(--info-bg);color:var(--info)}
.badge-return{background:var(--danger);color:#fff}
a.badge-repeat:hover,a.badge-return:hover{text-decoration:none;filter:brightness(1.08)}
.alert-danger{background:var(--danger-bg);color:var(--n-800);border:1px solid var(--danger)}
.serial-hint{font-size:0.8rem;padding:6px 10px;border-radius:var(--r-md);line-height:1.4}
.serial-hint.is-new{background:var(--n-100);color:var(--n-600)}
.serial-hint.is-known{background:var(--warning-bg);color:var(--warning);font-weight:600}
.serial-hint a{color:inherit;text-decoration:underline}

@media(max-width:900px){
    .totals{min-width:0;width:100%}
    .row-edit>td{padding:12px}
}

.qr{margin:14px 0 0;display:grid;gap:8px;justify-items:start}
.qr svg{display:block;width:auto;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}

/* ─────────────────────────────────────────────────────────────────────────────
   Помилки біля полів, підтвердження, перемикач мови, тип заявки
   ───────────────────────────────────────────────────────────────────────── */
.field-error{font-size:0.8rem;color:var(--danger);font-weight:600;line-height:1.35}
[aria-invalid=true]:not([type=checkbox]):not([type=radio]),.field:has(.field-error:not([hidden]))>input:not([type=checkbox]):not([type=radio]),.field:has(.field-error:not([hidden]))>textarea,.field:has(.field-error:not([hidden]))>.sel>.sel-button,.field:has(.field-error:not([hidden]))>.datefield>.date-text{border-color:var(--danger);background:var(--danger-bg)}

.confirm{border:1px solid var(--n-300);border-radius:var(--r-lg);padding:22px;max-width:min(440px,calc(100% - 32px));box-shadow:var(--sh-lg);color:var(--ink);font-family:var(--font-body)}
.confirm::backdrop{background:rgba(27,23,22,.45)}
.confirm-title{margin:0 0 8px}
.confirm-text{margin:0 0 18px;line-height:1.5}
.btn.is-busy{opacity:.6;cursor:progress}
.btn-block{width:100%}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* Перемикач з кількох варіантів — для мови клієнта на прийманні */
.segmented{display:inline-flex;border:1px solid var(--n-300);border-radius:var(--r-md);overflow:hidden;background:var(--n-0)}
.segmented-item{position:relative;display:flex;align-items:center;min-height:44px;padding:0 18px;cursor:pointer;font-weight:600;color:var(--n-700);border-right:1px solid var(--n-300)}
.segmented-item:last-child{border-right:0}
.segmented-item input{position:absolute;opacity:0;width:0;height:0;margin:0}
.segmented-item:has(input:checked){background:var(--brand-700);color:#fff}
.segmented-item:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}

.badge-case-warranty{background:var(--success-bg);color:var(--success)}
.badge-case-paid{background:var(--warning-bg);color:var(--warning)}
.badge-case-partner_rma{background:var(--info-bg);color:var(--info)}
.badge-case-goodwill{background:var(--accent-bg);color:var(--accent)}
/* Шлях повернення: свої стани й свій колір поруч із номером. Помаранчевий — як
   Allegro-тег: повернення найчастіше звідти, і око вже знає цей колір. */
.badge-inspection{background:var(--info-bg);color:var(--info)}
.badge-decision{background:var(--warning-bg);color:var(--warning)}
.badge-flow-return{background:var(--orange-bg);color:var(--orange)}
.tag-return{background:var(--orange-bg);color:var(--orange)}
.badge-flow-remote,.tag-remote{background:var(--info-bg);color:var(--info)}
.badge-flow-field{background:var(--success-bg);color:var(--success)}
.flow-tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));max-width:760px}
.flow-tiles .stage-tile{min-height:48px}
.return-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
/* Розділи картки заявки. Той, чий час зараз, підсвічений смужкою; той, чий
   час минув або ще не настав, згорнутий, але доступний: виправити можна
   будь-коли. «Прострочений» (без цього поля заявка не піде далі) — окремий,
   сильніший стан, інакше «зараз саме час» на пʼяти розділах поспіль
   перестає щось означати. */
/* Складники заявки — рядки з розділювачем, а не картки в картці. */
.ticket-part{border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0;margin:0;background:none}.ticket-part:first-of-type{border-top:0;padding-top:4px}
.ticket-part.is-active>.ticket-part-head .ticket-part-title{color:var(--n-900)}
.ticket-part.is-due>.ticket-part-head .ticket-part-title{color:var(--warning)}
.ticket-part-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;cursor:pointer;list-style:none}
.ticket-part-head::-webkit-details-marker{display:none}
.ticket-part-head::before{content:'';display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i-chevron-right) center/contain no-repeat;mask:var(--i-chevron-right) center/contain no-repeat;color:var(--muted);transition:transform .15s}
.ticket-part[open]>.ticket-part-head::before{transform:rotate(90deg)}
.ticket-part-title{font-size:0.8667rem;font-weight:700;color:var(--n-800)}
.ticket-part-lead{margin:8px 0 0}
.ticket-part-body{margin-top:12px}
.badge-now{background:var(--info-bg);color:var(--info)}
.badge-due{background:var(--warning-bg);color:var(--warning)}
.warn-text{color:var(--warning)}
/* Картка не в свій час: приглушена, але жива — наводиш і працюєш. */
.is-offstage{opacity:.72}
.is-offstage:hover,.is-offstage:focus-within{opacity:1}
/* Підсумок закритої заявки — на місці «Що далі». */
.closed-summary{background:var(--n-50)}
.closed-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.closed-list{display:grid;grid-template-columns:210px 1fr;gap:6px 18px;margin:14px 0 0;font-size:0.9333rem}
.closed-list dt{color:var(--muted)}
/* dd — flex: з pre-wrap переноси й відступи шаблону ставали окремими елементами й розсували рядок. Переноси зберігає лише текст у .pre. */
.closed-list dd{margin:0;white-space:normal;overflow-wrap:anywhere}.closed-list .pre{white-space:pre-wrap}
/* Сума, позначка оплати й номер документа — три різні речі в одному рядку:
   без проміжку вони читаються як одна. */
.closed-list dd{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.closed-list dd:has(.badge){align-items:center}
/* ── Повідомити про проблему ──────────────────────────────────────────────
   Кнопка стоїть у кутку кожної сторінки панелі, тому вона навмисно мала й
   тиха: помітна, коли її шукають, і не заважає, коли працюють. На вузькому
   екрані від неї лишається сам значок — підпис там зʼїдає половину ширини.
   Знизу вона піднята над панеллю дій заявки, яка на телефоні прибита до
   низу екрана. */
main>.container{padding-bottom:64px}.report-fab{position:fixed;right:16px;bottom:calc(16px + var(--actionbar-h,0px));z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--n-300);border-radius:var(--r-md);background:var(--n-0);color:var(--n-800);font-size:0.8667rem;font-weight:600;box-shadow:var(--sh-md)}
/* Картки вхідних дзвінків: угорі праворуч, над вмістом, але під діалогами. */
.call-cards{position:fixed;top:76px;right:12px;z-index:60;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 24px))}.call-cards:empty{display:none}
.call-card{padding:12px 14px;background:var(--n-0);border:1px solid var(--line);border-left:4px solid var(--brand-700);border-radius:var(--r-md);box-shadow:var(--sh-md,0 8px 24px rgba(0,0,0,.12))}
.call-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.call-who{font-weight:600;margin-top:4px}.call-tickets{margin:6px 0 0;padding-left:18px}.call-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.report-fab.is-compact{padding:0;width:44px;justify-content:center}.report-fab.is-compact .report-fab-text{display:none}
.report-fab:hover{background:var(--n-100);border-color:var(--n-400);color:var(--n-900);text-decoration:none}
.issue-dialog{width:min(620px,calc(100% - 32px));max-height:calc(100vh - 48px);border:1px solid var(--n-300);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-lg);color:var(--ink);font-family:var(--font-body);overflow:auto}
.issue-dialog::backdrop{background:rgba(27,23,22,.45)}
.issue-dialog-title{margin:0 0 4px;font-size:1.1333rem;line-height:24px}
.issue-dialog .issue-form{margin-top:14px}
/* Те, що форма додає сама. Рамка ліворуч, а не картка: це примітка до
   форми, а не окремий її розділ. */
.issue-collected{border-left:2px solid var(--line);padding-left:12px}
.issue-collected ul{margin:4px 0 0;padding-left:16px}
.issue-collected li{overflow-wrap:anywhere}
/* Пул звернень. «Стоїть робота» видно з червоного бейджа й рамки картки. */
.issue-card.is-blocking{border-color:var(--danger-line)}
.issue-card.is-highlight{border-left-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-100)}
.issue-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.issue-id{font-weight:700;color:var(--n-900)}
.issue-body{margin:12px 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.issue-where{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.issue-shots{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.issue-shots img{display:block;width:180px;height:112px;object-fit:cover;object-position:top left;border:1px solid var(--line);border-radius:var(--r-md)}
.issue-details{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.issue-details summary{cursor:pointer;font-size:0.8667rem;font-weight:600;color:var(--n-800)}
.issue-errors{margin:8px 0 0;padding-left:18px}
.issue-errors li{margin:3px 0;overflow-wrap:anywhere}
.issue-context{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0}
.issue-context dd{margin:0;overflow-wrap:anywhere}
/* Три відповіді поряд: «вирішено», «відхилити», «те саме, що №». У стовпчик
   вони перетворюють картку на анкету, тому стоять в один ряд, поки місце є. */
.issue-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 24px;align-items:start;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.issue-answer-text{margin:6px 0 0;white-space:pre-wrap}
.nav-count{display:inline-block;min-width:16px;margin-left:6px;padding:1px 5px;border-radius:var(--r-sm);background:var(--n-900);color:var(--n-0);font-size:0.8rem;font-weight:700;line-height:14px;text-align:center}
.nav-count-danger,.nav a.active .nav-count-danger{background:var(--danger)}
/* Галерея: плитки трохи більші за ті, що в картці заявки — тут на знімок
   дивляться, а не звіряються з ним, і рядок фільтрів над ними один. */
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery-grid .media img,.gallery-grid .media video,.gallery-grid .media .video-tile{height:170px}
.gallery-grid .media .meta{display:flex;flex-direction:column;gap:4px}
.gallery-grid .media .meta .tag{align-self:flex-start}
/* Перегляд на весь екран: справді на весь — на знімок дивляться, щоб
   розгледіти наліпку чи подряпину, і кожен піксель вікна йде під нього.
   Темне тло однакове в обох темах: світле поле довкола фото сліпить. */
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#151110;color:#f4efec;font-family:var(--font-body);overflow:hidden}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox::backdrop{background:rgba(21,17,16,.92)}
.lightbox-head{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid rgba(244,239,236,.12)}
.lightbox-status{flex:1 1 220px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.lightbox-caption{min-width:0;font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.lightbox-counter{padding:1px 8px;border:1px solid rgba(244,239,236,.3);border-radius:var(--r-sm);color:rgba(244,239,236,.85);font-size:0.8667rem;font-variant-numeric:tabular-nums}
.lightbox-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.lightbox-tools .btn-small{min-height:36px;min-width:36px}
.lightbox-level{min-width:68px;font-variant-numeric:tabular-nums}
.lightbox-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;user-select:none;cursor:zoom-in}
.lightbox-stage.is-zoomed{cursor:grab}
.lightbox-stage.is-panning{cursor:grabbing}
.lightbox-frame{position:absolute;inset:0;transform-origin:0 0}.lightbox-stage img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;transition:transform .18s ease;-webkit-user-drag:none}.lightbox-note{position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));margin:0;padding:10px 14px;border-radius:var(--r-md);background:rgba(21,17,16,.88);color:#f4efec;font-size:0.9333rem;text-align:center}.lightbox-sep{width:1px;height:24px;margin:0 4px;background:rgba(244,239,236,.25)}.lightbox-save{font-weight:700}
.lightbox-stage.is-loading img{opacity:.7}
.lightbox-arrow{position:absolute;top:0;bottom:0;z-index:1;margin:auto 0;min-width:48px;height:72px;padding:0 10px;font-size:1.7333rem;line-height:1;opacity:.85}
.lightbox-arrow:hover,.lightbox-arrow:focus-visible{opacity:1}
.lightbox-arrow[data-shot=prev]{left:12px}
.lightbox-arrow[data-shot=next]{right:12px}
.lightbox-stage.is-zoomed .lightbox-arrow{opacity:.45}
.lightbox.is-single .lightbox-arrow,.lightbox.is-single .lightbox-counter{display:none}

/* Контраст: фокус-рамка полів і рамка самого поля */
input:focus,select:focus,textarea:focus,.sel-button:focus-visible,.date-text:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--n-700)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.sel-button,.date-open{border-color:var(--control-border)}

/* Сторінка статусу: кроки з датами, що далі, повідомлення клієнта */
.status-step{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}
.status-step small{font-size:0.8rem}
.status-step.done{background:var(--success-bg);color:var(--success)}
.steps{margin:0;padding-left:22px;display:grid;gap:6px}
.note-client{border-color:var(--info);background:var(--info-bg)}
.badge-pay-unpaid{background:var(--danger-bg);color:var(--danger)}
.badge-pay-paid,.badge-pay-not_required{background:var(--success-bg);color:var(--success)}
.badge-pay-invoiced{background:var(--info-bg);color:var(--info)}

/* Експорт: смуга поступу */
.export-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.progress{height:12px;border-radius:var(--r-sm);background:var(--n-100);overflow:hidden;border:1px solid var(--n-200)}
.progress-fill{height:100%;width:0;background:var(--brand-700);border-radius:var(--r-sm);transition:width .4s ease}
.export-progress.is-busy .progress-fill{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:24px 24px;animation:progress-stripes 1s linear infinite}
@keyframes progress-stripes{from{background-position:0 0}to{background-position:24px 0}}

/* Кошторис на сторінці статусу */
.estimate{margin:12px 0;padding:14px;border:1px solid var(--warning);border-radius:var(--r-md);background:var(--warning-bg)}
.table-compact td{padding:6px 8px;background:transparent!important}
.table-compact tr.total td{border-top:1px solid var(--warning);border-bottom:0}
.right{text-align:right}

/* ─────────────────────────────────────────────────────────────────────────────
   Телефон (≤620px). Одним блоком наприкінці файла, щоб перекривати все вище.
   Правила гри:
   - сторінка ніколи не прокручується вбік; таблиця стає стосом карток, а підпис
     стовпчика показується над значенням із data-label (app.js переносить його
     з thead — initTableLabels);
   - дії заявки — окремою панеллю внизу екрана, під великим пальцем; стан
     і попередження лишаються згори, біля номера;
   - поля вводу 16px: iOS Safari збільшує сторінку на фокусі, якщо менше;
   - меню розділів — стрічка з прокручуванням, активний розділ підʼїжджає
     в кадр (initNav).
   ───────────────────────────────────────────────────────────────────────── */
/* Прапорець поруч із полями: підпис зверху займає 20px + 6px відступу, тож
   без цієї подушки галочка стояла вище за сусідні поля. Раніше це було
   число в style= прямо в шаблоні — його ніхто не оновить, коли зміниться
   висота підпису, і воно розʼїдеться тихо. */
.field-check{padding-top:38px}
.field-end{align-self:end}

/* Сторінка заявки: один ритм. Заголовки карток — одного розміру (дрібні
   капітелі, як «Клієнт і пристрій»), а не 28px поруч із 12px; між блоками
   однакові 18px; номер заявки не ламається на два рядки — доріжка станів
   переходить під нього, коли не вміщається. */
.page-head{flex-wrap:wrap}.page-head>div:first-child{flex:1 1 320px;min-width:0}.page-head h1.mono{white-space:nowrap}
.card .page-head{margin-bottom:12px;align-items:flex-start;gap:10px 16px}.card .page-head h2{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:20px}.card .page-head p{margin:4px 0 0;font-size:0.8667rem}
.card>h2.section-title,.card>.card-pad>h2.section-title{margin-bottom:12px}
.split>.stack{gap:18px}
.steps-head{display:grid;gap:4px}.steps-head p{max-width:72ch}

/* Текст і кнопка в одному ряду — не сусіди. Довгий підпис прапорця («також
   надіслати листом на …») упирався прямо в кнопку «Надіслати», і кнопка
   читалась як продовження фрази. Кнопки після тексту йдуть до правого краю;
   на вузькому екрані ряд переноситься, і auto нічого не робить. */
.actions>label+.btn,.actions>span+.btn,.actions>p+.btn,.actions>label+button,.actions>span+button,.actions>p+button{margin-left:auto}
/* Панель дій: кроки процесу окремо від інструментів (камера, документи) —
   між групами риска, інакше пʼять різних кнопок читаються одним рядком. */
.actionbar-tools{display:flex;align-items:center;gap:14px 24px;margin-left:4px;padding-left:28px;border-left:1px solid var(--n-300)}
.tool-desk{display:contents}.actionbar-phone-tools{display:none}
/* Хто ще в заявці — помітно, але не тривогою: це не помилка, а «зачекай, не дзвони вдвох». */
.actionbar-presence{color:var(--brand-700);font-weight:600}
/* Нагадування в правій колонці: текст ліворуч, «Зроблено» праворуч; прострочене — червоною рискою. */
.reminder-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--n-100)}.reminder-row form{margin:0;flex:none}.reminder-text{min-width:0;overflow-wrap:anywhere}.reminder-row.is-overdue{box-shadow:inset 3px 0 0 var(--danger);padding-left:10px}
/* Значок поруч із текстом у списку означень: 4px виглядали як одне слово. */
.detail-list dd>.badge+span,.detail-list dd>.badge+.small{margin-left:6px}

/* Заготовки: список стоїть у рядку з підписом поля, а не над ним — інакше
   форма з шести полів виростає вдвічі. Список вужчий за поле й візуально
   тихіший: він спосіб набрати текст, а не саме значення. */
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;min-height:20px}
.field-head>label,.field-head>.field-label{font-size:0.8667rem;font-weight:600;color:var(--n-800);line-height:20px}
.preset-pick{flex:0 1 auto;max-width:min(320px,60%);min-height:32px;padding:4px 10px;font-size:0.8rem;color:var(--n-600);background:var(--n-50)}
.preset-pick+textarea,.preset-pick+input{margin-top:2px}
/* Плитки приймання: скільки обрано й кнопка зняти — у тому самому рядку. */

/* Вкладка «Клієнт»: листування одним стовпцем. Від нас — праворуч, темніше;
   від клієнта — ліворуч, світліше: як у будь-якому листуванні, без підписів
   «хто». Рамка зі сторінкою статусу — та сама сторінка, що в клієнта. */
.thread{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.msg{max-width:min(720px,92%);padding:10px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--n-50)}
.msg-out{margin-left:auto;background:var(--brand-50);border-color:var(--brand-200)}
.msg-mail{border-style:dashed}
.msg-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:0.8667rem}
.msg-dir{font-weight:700;color:var(--brand-700)}.msg-in .msg-dir{color:var(--info)}
.msg-title{font-weight:600}
.msg-when{margin-left:auto;white-space:nowrap}
.msg-body{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.9333rem}
.msg-link,.msg-document{border-style:dotted}
.msg-failed{border-color:var(--danger);background:var(--danger-bg)}.msg-failed .msg-title{color:var(--danger)}
.msg-pending{border-color:var(--warning);background:var(--warning-bg)}.msg-pending .msg-title{font-style:italic}
/* Тестове SMS: клієнт його не отримав — пунктиром і приглушено. */
.msg-test{border-style:dashed;opacity:.75}
/* Внутрішня примітка в чаті з клієнтом: клієнт її не бачив — жовтим пунктиром. */
.msg-note{border-style:dashed;border-color:var(--warning);background:var(--warning-bg)}
/* Кнопка, що виглядає як посилання: «повернути оригінал» поруч із підказкою. */
.link-button{padding:0;border:0;background:none;color:var(--brand-700);font:inherit;text-decoration:underline;cursor:pointer}
.comm-summary{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:0.8667rem}.comm-summary .danger{font-weight:700;color:var(--danger)}.comm-summary .warning{font-weight:600;color:var(--warning)}
.msg.is-new{border-color:var(--info);box-shadow:0 0 0 3px var(--info-bg)}
.client-preview{width:100%;height:820px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-top:8px}

/* «Що далі»: кроки для поточного стану. Зроблене — зелена галочка й
   закреслене; те, без чого перехід не спрацює, — червоний знак оклику.
   Кнопка переходу стоїть тут же, коли обовʼязкове зроблено. */
.steps-head .section-title{margin:0}.steps-head p{margin:0}
.steps-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.step{display:flex;align-items:center;gap:12px;font-size:0.9333rem;min-height:28px}
.step-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--n-300);font-size:0.8rem;font-weight:700;color:var(--n-500);flex:0 0 auto}
.step.is-done .step-mark{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.step.is-done .step-label{color:var(--muted);text-decoration:line-through}
.step.is-required .step-mark{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.step-note{color:var(--danger)}
.steps-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.steps-next form{margin:0}

/* Вкладки заявки. Бейдж має колір за змістом: червоний — блокер процесу,
   жовтий — незавершене, синій — нове з останнього візиту. Число без кольору
   змушувало б відкривати вкладку, щоб дізнатись, що там. */
.tabs-nav{margin-bottom:18px;border-bottom:1px solid var(--line)}
.tabs-nav .tab{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-bottom:-1px}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-sm);font-size:0.8rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tab-badge-block{background:var(--danger);color:#fff}
.tab-badge-pending{background:var(--warning-bg);color:var(--warning);border:1px solid #e6d3a3}
.tab-badge-fresh{background:var(--info);color:#fff}
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Кнопки-розкривачі в один ряд. Кожна details — блок, тому дві поспіль стояли
   одна під одною врізнобій; у ряду закриті стоять поруч, а відкрита займає
   всю ширину під ними. */
.disclosure-row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start}
.disclosure-row>.disclosure{flex:0 0 auto}
.disclosure-row>.disclosure[open]{flex:1 0 100%}
.disclosure-row>.disclosure[open]>summary{margin-bottom:0}
/* Закриті кнопки лишаються в ряду вгорі, розкрита форма — під ними. */
.disclosure-row-pinned>.disclosure-first{order:-1}.disclosure-row-pinned>.disclosure[open]{order:1}

/* Автозбереження форм: набране лежить на сервері, але в заявці його ще немає.
   Колір попередження, а не помилки: нічого не зламалось, але й не збережено.
   Найважливіше тут — щоб поле з чернеткою не виглядало як звичайне заповнене
   поле: інакше людина певна, що дані вже в базі. */
.draft-note{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 12px;border:1px solid #e6d3a3;border-radius:var(--r-md);background:var(--warning-bg);color:var(--n-800);font-size:0.8667rem;line-height:1.4}
.draft-message{font-weight:600}
.draft-status{margin-left:auto;white-space:nowrap}
.draft-error{flex-basis:100%;font-weight:600}
.field.is-draft>label,.field.is-draft>.field-label{color:var(--warning)}
input.is-draft,select.is-draft,textarea.is-draft,.sel.is-draft>.sel-button,.datefield.is-draft>.date-text{border-color:var(--warning);box-shadow:0 0 0 3px var(--warning-bg)}
input.is-conflict,select.is-conflict,textarea.is-conflict,.sel.is-conflict>.sel-button,.datefield.is-conflict>.date-text{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.draft-conflict{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--danger)}

/* Швидкі черги над списком заявок: готові посиланнями, свої — поруч із ними.
   Чіп із хрестиком — це посилання й форма видалення в одній рамці, тож рамку
   малює обгортка, а не сам чіп. */
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Без :not обрана плитка отримувала темний текст на бордовому фоні (контраст 1.1:1): це правило сильніше за .chip.chip-primary, бо стоїть нижче. */
.filter-chips .chip{text-decoration:none}
.filter-chips .chip:not(.chip-primary){color:var(--n-700)}
.chip-own{display:inline-flex;align-items:center;gap:2px}
.chip-own form{margin:0}
.chip-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;line-height:1;padding:6px 6px;border-radius:var(--r-sm)}
.chip-remove:hover{background:var(--n-100);color:var(--danger)}
.menu-list-pad{padding:12px}

/* Панель групових дій: зʼявляється лише коли щось обрано. */
.bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0 0 12px;padding:10px 14px;background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-lg)}
.bulk-bar select{min-width:180px}
.bulk-count{font-weight:600;color:var(--brand-700)}
.bulk-bar [data-bulk-clear]{margin-left:auto}
.col-pick{width:40px}
.col-pick input{width:18px;height:18px}.col-pick-hit{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;cursor:pointer}

/* Шапка: пунктів меню побільшало, і на звичайному ноутбуці вони почали
   тиснути кутовий блок — «Прайс робіт» ламався на два рядки, а «Вийти»
   виїжджало за край екрана. Підпис пункту не переноситься ніколи, меню
   гортається замість того, щоб стискати сусіда, а кутовий блок не
   стискається взагалі: у ньому вихід. */
.nav-main{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.nav-main::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap}
.userbox{flex:0 0 auto;white-space:nowrap}
.userbox a{white-space:nowrap}
.topbar .container{flex-wrap:wrap;gap:10px 16px;padding:10px 0;min-height:0}
.nav{order:3;flex:0 0 100%;width:100%;padding-bottom:2px}
.userbox{margin-left:auto}

/* «Адміністрування» — спадне меню в тому ж рядку. Прокрутка лише в
   .nav-main: overflow на самій .nav обрізав би список, що випадає вниз. */
.nav-more{flex:0 0 auto;align-self:flex-start}
.nav-more>summary{display:inline-flex;align-items:center;gap:8px;color:var(--n-600);font-weight:500;padding:18px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.nav-more>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav-more[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.nav-more>summary:hover,.nav-more[open]>summary{color:var(--n-900)}.nav-more>summary.active{color:var(--n-900);border-bottom-color:var(--brand-700)}
.nav-more>summary .nav-count{margin-left:0}
.nav-more .menu-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)}
.nav-more .menu-list a.active{background:var(--brand-50);color:var(--brand-700);font-weight:600}

/* Доріжка станів має читатись як шлях, а не як купка міток поруч.
   Горизонтальна з переносом ним і не читалась: шість кроків у вузькій картці
   лягали по три-два-один, рядки виходили рваними, а стрілка наприкінці рядка
   вказувала в порожнечу. Вертикальна читається згори вниз незалежно від
   ширини картки й кількості кроків — і має те, чого бракувало: суцільну
   лінію, по якій одразу видно, скільки шляху пройдено й скільки лишилось.
   Компактна доріжка в шапці заявки лишається горизонтальною: там вона над
   кнопками дії й має триматись одного рядка. */
.status-step{position:relative}
.status-track:not(.status-track-compact){display:grid;gap:0}
.status-track:not(.status-track-compact) .status-step{display:block;padding:0 0 18px 30px;background:none;border-radius:0;box-shadow:none;animation:none;font-size:0.8667rem;line-height:1.35;color:var(--muted)}
.status-track:not(.status-track-compact) .status-step:last-child{padding-bottom:0}
.status-track:not(.status-track-compact) .status-step small{display:block;margin-top:2px;font-size:0.8rem;opacity:1;color:var(--muted)}
/* Кружок кроку й лінія до наступного. Лінія тягнеться від краю кружка до
   самого низу кроку, тож сусідні відрізки сходяться без розривів. */
.status-track:not(.status-track-compact) .status-step::before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--n-300);border-radius:50%;background:var(--n-0)}
.status-track:not(.status-track-compact) .status-step:not(:last-child)::after{content:'';position:absolute;left:6px;top:18px;bottom:0;width:2px;background:var(--n-200)}
.status-track:not(.status-track-compact) .status-step.done{color:var(--n-600)}
.status-track:not(.status-track-compact) .status-step.done::before{border-color:var(--success);background:var(--success)}
.status-track:not(.status-track-compact) .status-step.done:not(:last-child)::after{background:var(--success)}
.status-track:not(.status-track-compact) .status-step.active{color:var(--ink);font-weight:600}
.status-track:not(.status-track-compact) .status-step.active::before{border-color:var(--brand-400);background:var(--brand-400);box-shadow:0 0 0 4px var(--brand-100)}
.status-track.status-track-compact{align-items:center;gap:14px 0}
.status-track-compact .status-step:not(:last-child){margin-right:42px}
.status-track-compact .status-step:not(:last-child)::after{content:'';position:absolute;left:calc(100% + 17px);top:50%;width:8px;height:8px;margin-top:-5px;border-right:2px solid var(--n-300);border-top:2px solid var(--n-300);transform:rotate(45deg)}
.status-track-compact .status-step.done:not(:last-child)::after{border-color:var(--success)}
.status-track-compact .status-step{flex-direction:row;align-items:center;gap:6px;font-weight:600}
.status-track-compact .status-step.done::before{content:'';display:inline-block;width:.95em;height:.95em;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

/* Один спокійний удар на відкриття сторінки: око знаходить поточний крок і
   далі не смикається. Тим, хто вимкнув анімації в системі, — нічого. */
@keyframes step-pulse{from{box-shadow:0 0 0 0 rgba(108,0,8,0)}50%{box-shadow:0 0 0 6px rgba(108,0,8,.12)}to{box-shadow:0 0 0 0 rgba(108,0,8,0)}}
.status-step.active{animation:step-pulse 2.2s ease-in-out 2}
@media(prefers-reduced-motion:reduce){.status-step.active{animation:none}}

/* «Що далі» згортається: підпис лишається рядком, у якому видно те, заради
   чого блок відкривали б, — скільки кроків лишилось і який найближчий. */
.steps-card>.steps-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;cursor:pointer;list-style:none;padding-left:0;margin:0 0 4px}
.steps-card>.steps-summary::-webkit-details-marker{display:none}
.steps-card>.steps-summary::before{content:'';flex:0 0 auto;width:8px;height:8px;margin-right:2px;border-right:2px solid var(--n-500);border-bottom:2px solid var(--n-500);transform:rotate(-45deg);transition:transform .15s ease}
.steps-card[open]>.steps-summary::before{transform:rotate(45deg)}
.steps-card>.steps-summary .section-title{margin:0}
.steps-summary-note{margin-left:auto;text-align:right}
.steps-card[open] .steps-summary-note{display:none}

/* Кабінет партнера: у кутовому блоці — хто і від чийого імені. */
.portal-who{font-size:0.8667rem;color:var(--n-600);white-space:nowrap}
.portal-who b{color:var(--n-800)}

/* Строк ремонту. Поки все гаразд — сірим: у списку з тридцяти заявок
   кольорова позначка на кожній перестає щось означати. Колір зʼявляється
   тоді, коли строк уже минає. */
.sla{display:inline-block;font-size:0.8rem;font-weight:600;white-space:nowrap}
.sla-ok{color:var(--muted);font-weight:500}
.sla-soon{color:var(--warning)}
.sla-overdue{color:var(--danger)}
.sla-row{margin-top:4px}
.badge-urgent{background:var(--danger);color:var(--n-0);margin-left:6px}
.sla-form{margin:10px 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.sla-line{display:inline-flex;align-items:center;gap:8px}
/* Відеоплитка: картинка з трикутником замість програвача. Програвач
   зʼявляється на місці плитки після натискання — до того сітка не важить
   нічого, крім превʼю. */
.video-tile{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:150px;background:var(--brand-950);text-decoration:none}
.video-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.video-play{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.0667rem;line-height:1}.video-play .icon{width:18px;height:18px;margin-left:2px}.step-mark .icon{width:14px;height:14px;stroke-width:2.5}.serial-copy .icon,.alert-close .icon,.chip-remove .icon{width:16px;height:16px}.btn .icon{width:16px;height:16px}
.video-time{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:var(--r-sm);background:rgba(0,0,0,.65);color:#fff;font-size:0.8rem;font-weight:600}
.video-open{display:block;width:100%;height:150px;object-fit:contain;background:var(--brand-950)}
/* Публічна форма: куди везти, що класти в коробку, і згруповані поля адреси. */
.ship-to{display:grid;gap:8px;margin:12px 0;padding:14px 16px;border:1px solid var(--brand-200);border-radius:var(--r-md);background:var(--brand-50)}
.ship-to-label{font-size:0.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-700)}
.ship-to-address{font-size:1.0667rem;font-weight:700;line-height:1.45;color:var(--ink);user-select:all;overflow-wrap:anywhere}
.ship-to-hours{font-size:0.8667rem;color:var(--n-700)}
.ship-to-rows{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 16px;margin:4px 0 0;font-size:0.8667rem}
.ship-to-rows dt{color:var(--muted)}
.ship-to-rows dd{margin:0}
.ship-to-strong{font-weight:700;letter-spacing:.03em;user-select:all}
.ship-to-note{padding-top:8px;border-top:1px solid var(--brand-200);font-size:0.8667rem;line-height:1.45}
.ship-to-number{font-family:var(--font-mono);font-size:1rem;white-space:nowrap;user-select:all}
/* «Лише пристрій» — відповідь замість переліку, тож стоїть окремим рядком. */
.field-group{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50)}
.field-group-label{display:block;margin-bottom:10px;font-size:0.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--n-600)}
/* Замок на дії сторінки стану: останні чотири цифри телефону. */
.verify{padding:12px 14px;border:1px dashed var(--n-300);border-radius:var(--r-md);background:var(--n-50)}
.verify-lead{margin:0 0 8px}
.verify-input{max-width:180px;letter-spacing:.12em}
/* Юридичні особи партнера в картці довідника. */
.entities{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.entity-form{padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50)}
/* Після останньої форми — повітря перед наступним блоком, а не впритул. */
.entity-form:last-of-type{margin-bottom:16px}
/* Політика обробки даних: суцільний текст, який справді читають. */
/* Клаузула RODO під згодою: дрібно, але читабельно — 12px і 1.5 інтервал,
   не ширше за 80 символів, щоб очі не губили рядок. */
/* Політика — на всю ширину сторінки, як і шапка над нею: картка вужча за
   шапку читалась як недоверстана. Інтервал більший, бо рядок довший. */
.legal-page p,.legal-page li{max-width:72ch}.legal-page p{margin:0 0 12px;line-height:1.6}.legal-page .mono{overflow-wrap:anywhere}
.legal-page .section-title{margin:18px 0 6px}
.legal-page .section-title:first-child{margin-top:0}
/* ── UX-аудит 24.09.2026 ─────────────────────────────────────────────────── */

/* Плитка етапу на зйомці: радіокнопка схована, тож рамку фокуса несе плитка —
   інакше з клавіатури не видно, який етап обрано. */
.stage-tile:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* Стани кнопки. Раніше вимкнена кнопка виглядала так само, як активна, а
   натискання не давало жодного відгуку. */
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(27,23,22,.15)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn[aria-disabled=true]:hover{background:var(--n-0);border-color:var(--n-300)}
.btn-primary:disabled:hover{background:var(--brand-700);border-color:var(--brand-700)}
/* Зайнята кнопка після надсилання форми: не лише прозорість, а й крутилка. */
.btn.is-busy{opacity:.75;cursor:progress}
.btn.is-busy::after{content:"";width:14px;height:14px;flex:0 0 14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::after{animation-duration:2s}}

/* Сенсорний екран: ціль для пальця — щонайменше 44px (WCAG 2.5.5). На
   настільному лишається щільна верстка, бо там курсор. */
@media (pointer:coarse){
.btn-small,.pick-tile,.picker-option,.pager-link,.report-fab{min-height:44px}
.cal-day,.cal-nav{min-width:44px;min-height:44px}
.lang-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.chip-remove{min-width:44px;min-height:44px;padding:0}
/* Планшет у майстерні ширший за 620px, але палець той самий. */
.tabs-nav a.tab,a.chip,.breadcrumbs a,summary.steps-summary,summary.ticket-part-head,summary.card-summary,.checkline{min-height:44px;display:inline-flex;align-items:center}
.public-foot a{display:inline-block;padding:12px 0}
.col-pick-hit{min-width:44px;min-height:44px}
.serial-copy,.table .serial-copy,.combo-toggle,.alert-close{min-width:44px;min-height:44px}
}

/* Банер після дії: закривається хрестиком, щоб не висів над роботою. */
.alert{position:relative}
.alert:has(.alert-close:not([hidden])){padding-right:48px}
.alert-close{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;font-size:1.4667rem;line-height:1;cursor:pointer}
.alert-close:hover{background:rgba(27,23,22,.06)}

/* Перейти до вмісту: перше, до чого доходить Tab, — повз меню з 7–13 пунктів. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--r-md);background:var(--brand-700);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.main:focus{outline:none}

/* Хлібні крихти: де я — «Заявки › SRV-… › Робота». */
.breadcrumbs{margin:0 0 10px;font-size:0.8667rem;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.breadcrumbs li{display:inline-flex;align-items:center}
.breadcrumbs li+li::before{content:'';display:inline-block;width:.9em;height:.9em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--i-chevron-right) center/contain no-repeat;mask:var(--i-chevron-right) center/contain no-repeat;vertical-align:-.1em;margin:0 6px;color:var(--n-400)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--brand-700)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}

/* Вкладка заявки вантажиться без перезавантаження сторінки: поточний вміст
   блідне, щоб було видно, що клік прийнято. */
.is-soft-loading .split{opacity:.55;transition:opacity .15s ease .1s;pointer-events:none}
.is-soft-loading .tabs-nav{cursor:progress}
@media (prefers-reduced-motion:reduce){.is-soft-loading .split{transition:none}}

/* Грошове поле: під числом — сума з роздільником тисяч і валютою. */
.money-preview{display:block;margin-top:2px;font-size:0.8rem;color:var(--muted)}
.money-preview:empty{display:none}

/* Помилка поля, знайдена ще до надсилання (на виході з поля). */
.field-error-live{display:block}

/* Друк: попередження й помилки лишаються на папері — ховаємо лише «успіх». */
@media print{
.alert-warning,.alert-error,.alert-danger{display:block!important;border:1px solid #999}
.alert-close,.skip-link,.breadcrumbs{display:none!important}
}

/* Діапазон дат у пошуку списку: два поля поруч, на телефоні — на всю ширину. */
.date-range{display:flex;gap:10px;align-items:center;min-width:0}
.date-range-item{display:flex;align-items:center;gap:6px;flex:1 1 170px;min-width:0}
.date-range-label{flex:0 0 auto;font-size:0.8667rem;color:var(--muted);white-space:nowrap}
.date-range-item>:last-child{flex:1 1 auto;min-width:0}

/* Серійник — завжди на виду (<x-serial>): у шапці заявки, у липкій панелі дій,
   у списках. Порожнє місце замість серійника читалось як «його нема й не треба». */
.serial-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 2px 2px 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50);font-size:0.8667rem;line-height:1.3;white-space:nowrap;vertical-align:middle}
.serial-label{font-size:0.8rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.serial-value{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--ink)}
.serial-copy{flex:0 0 auto;min-width:28px;min-height:28px;padding:0 6px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--n-600);font-size:0.9333rem;line-height:1;cursor:pointer}
.serial-copy:hover{background:var(--n-100)}
.serial-copy.is-copied{color:var(--success)}
.serial-missing{padding:2px 8px;border-color:var(--warning);background:var(--warning-bg);color:var(--n-800);font-weight:600;text-decoration:none}
a.serial-missing:hover{text-decoration:underline}
.serial-none{padding:2px 8px;color:var(--muted)}
.serial-strip{display:none}
/* Серійник у панелі дій — лише коли серійник у шапці вже поза екраном
   (initActionbar ставить .serial-off-screen). Без JS — лише в шапці. */
.actionbar-serial{display:none}
.serial-off-screen .actionbar-serial{display:inline-flex}
.section-serial{margin-top:4px}
/* Поле з кнопкою в один рядок (сторінка «Пошта»): на телефоні кнопка переходить нижче. */
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.inline-form input{flex:1 1 220px;min-width:0}
.label-like{display:block;font-weight:600;margin-bottom:6px}
.probe-output{margin:6px 0 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);font-family:var(--font-mono);font-size:0.8333rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.mail-frame{display:block;width:100%;height:900px;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);background:#f3f0ee}.row-selected td{background:var(--n-50)}.row-selected a{font-weight:700;color:var(--n-900)}
.head-rma{margin-left:10px;font-size:0.9333rem;color:var(--muted);white-space:nowrap}.head-add{color:var(--warning);font-weight:600;text-decoration:none}.head-add:hover{text-decoration:underline}.head-rma b{color:var(--ink)}
.head-partner-link{font-weight:600;text-decoration:underline;text-underline-offset:3px}.head-partner-link .icon{width:14px;height:14px}
/* Посилання на поле (напр. «+ Документ продажу» з шапки) — не під закріпленою панеллю заявки. */
.field>input[id],.field>select[id],.field>textarea[id]{scroll-margin-top:200px}
/* У таблицях серійник — рядок тексту, а не плашка: рамка в кожному рядку
   з вісімдесяти робила список строкатим і вищим. */
.table .serial-chip:not(.serial-missing){padding:0;border:0;background:none;font-size:0.8rem}
@media (pointer:fine){.table .serial-copy{min-width:24px;min-height:24px}}

/* Рамка фокуса у вікні перегляду — світла: темна на темному фоні не видна. */
.lightbox{--focus:#f4efec}
/* Менше руху: смуги поступу й смуга серійника — без анімації. html — щоб перекрити й мобільний блок нижче. */
@media (prefers-reduced-motion:reduce){html .export-progress.is-busy .progress-fill{animation:none}html .serial-strip{transition:none}html .progress-fill{transition:none}}
/* Закріплена шапка списку заявок (requests/index): «Нова заявка» видно при
   будь-якій прокрутці. top:-1px — щоб IntersectionObserver помітив момент
   прилипання (app.js, initStickyHead) і додав тінь та компактний заголовок. */
.page-head-sticky{position:sticky;top:-1px;z-index:25;background:var(--bg);margin-inline:-16px;padding:13px 16px 12px;align-items:center;transition:box-shadow .15s}
.page-head-sticky.is-stuck{box-shadow:0 1px 0 var(--n-200),0 6px 12px -8px rgba(0,0,0,.18)}
.page-head-sticky.is-stuck h1{font-size:1.25rem;line-height:28px}
.page-head-sticky .menu-list form{display:block}
/* Заголовки таблиці заявок липнуть під шапкою (--sticky-head-h з app.js).
   Липнути вони можуть лише без прокрутки обгортки, тож вона «відкрита»
   там, де таблиця вміщається; вужче — звичайна горизонтальна прокрутка. */
@media(min-width:1000px){.table-wrap:has(>.table-list){overflow:visible}
.table-list thead th{position:sticky;top:var(--sticky-head-h,0px);z-index:5;background:var(--n-0);box-shadow:inset 0 -1px 0 var(--line)}
select.select-inline{min-height:32px;padding:4px 28px 4px 8px;font-size:0.8667rem}
.table-list .col-engineer{width:170px}.col-engineer .sel-button{min-height:34px;padding:4px 10px;font-size:0.8667rem}}
/* Інженер у рядку списку: компактний select; «не призначено» — сірим. */
select.select-inline,.col-engineer .sel{width:100%;max-width:190px}
select.select-inline.is-empty,.col-engineer select.is-empty~.sel-button{color:var(--muted)}
.table-list tr[id]{scroll-margin-top:calc(var(--sticky-head-h,0px) + 48px)}
@media(max-width:620px){
/* «Що нового» на телефоні: дії — рядком під смугою, без першої зміни. */
.release-notice .release-bar{padding-right:16px}.release-notice .release-first{display:none}
.release-notice .release-actions{position:static;padding:0 16px 12px;justify-content:space-between}
/* Швидкі фільтри — одним рядком із прокруткою: кожен окремим рядком
   займали пів екрана над списком. Меню «Зберегти фільтр» відкривається
   знизу екрана, бо в рядку з прокруткою його обрізало б. */
.filter-chips.form-section{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:12px}
.filter-chips.form-section::-webkit-scrollbar{display:none}
.filter-chips.form-section>*{flex:0 0 auto;white-space:nowrap}
.filter-chips.form-section .menu-list{position:fixed;top:auto;left:16px;right:16px;bottom:16px;min-width:0}

/* На телефоні кнопки — одним рядком із прокруткою, «Нова заявка» першою:
   три ряди кнопок у закріпленій шапці з'їли б пів екрана. */
.page-head.page-head-sticky{margin-inline:-16px;padding:8px 16px;gap:12px;align-items:stretch}
.page-head-sticky h1{font-size:1.25rem;line-height:28px}
.page-head-sticky .actions{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:12px;padding-bottom:2px;scrollbar-width:none}
.page-head-sticky .actions::-webkit-scrollbar{display:none}
.page-head.page-head-sticky>.actions>.btn,.page-head.page-head-sticky>.actions>.menu>summary{white-space:nowrap;flex:0 0 auto;width:auto}
.page-head.page-head-sticky,.page-head.page-head-sticky h1{text-align:left}
.page-head-sticky .actions>.btn-primary{order:-1}
.page-head-sticky .menu{position:static}
.page-head-sticky .menu-list{left:16px;right:16px;min-width:0}
.lightbox [data-shot=zoom-in],.lightbox [data-shot=zoom-out],.lightbox .lightbox-level,.lightbox .lightbox-sep{display:none}
/* Фокус Tab-ом не ховається під нижньою панеллю дій (WCAG 2.4.11). */
html{scroll-padding-bottom:calc(var(--actionbar-h,0px) + 16px)}
/* «Надійшла від … до …» в один рядок на 390 px стискало поле до 26 px. */
.date-range{flex-direction:column;align-items:stretch}.date-range-item{flex:0 0 auto}
body{overflow-x:hidden}
.main{padding:16px 0 40px}
h1{font-size:1.6rem;line-height:30px}h2{font-size:1.2667rem;line-height:26px}h3{font-size:1.0667rem;line-height:22px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{min-height:44px}
.card-pad{padding:16px 14px}
.page-head{gap:10px;margin-bottom:14px}
.page-head>.btn,.page-head>.actions>.btn{width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,.sel-button,.date-text{font-size:max(16px,1.0667rem)}
.btn{min-height:44px}
.btn-small{min-height:44px}
.actions>.btn,.actions>form{flex:1 1 auto}
.actions>form>.btn{width:100%}
.checkline{white-space:normal}

/* шапка: логотип і вихід у першому рядку, розділи — стрічкою під ними */
.topbar .container{gap:8px 12px;min-height:0;padding:10px 0}
.nav{order:3;display:flex;gap:4px;flex:0 0 calc(100% + 32px);width:calc(100% + 32px);margin:0 -16px;padding:0 16px 2px}
.nav-main{flex-wrap:nowrap;gap:4px;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.nav a,.nav-more>summary{white-space:nowrap;padding:10px 8px;margin-bottom:0;font-size:0.9333rem;flex:0 0 auto}
.userbox{margin-left:auto;gap:8px}

/* огляд: плитки по дві, компактніше */
.kpis,.kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-bottom:14px}
/* Непарна остання плитка — на всю ширину, інакше поруч сіра діра. */
.kpis>:last-child:nth-child(odd){grid-column:1/-1}
.kpis-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{padding:12px 14px}.kpi .value{font-size:1.7333rem}.kpi .label{font-size:0.8rem}
.health-item{flex:1 1 calc(50% - 10px);min-width:0}
.chart-grid-2{grid-template-columns:minmax(0,1fr)}

/* пошук у списку: рядок пошуку першим і на всю ширину, фільтри — по два */
.searchbar,.searchbar.searchbar-list,.searchbar-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.searchbar input[type=search],.searchbar>.checks,.searchbar>.actions{grid-column:1/-1}
.searchbar input[type=search]{order:-1}
.searchbar-simple,.searchbar-filter{grid-template-columns:1fr}

/* таблиці → картки */
.table-wrap{overflow:visible}
.table-list{min-width:0;table-layout:auto}
.table thead{display:none}
.table,.table tbody,.table tr,.table td{display:block;width:auto}
.table tr{padding:10px 0;border-bottom:1px solid var(--n-100)}
.table tbody tr:last-child{border-bottom:0}
.card>.table-wrap>.table tr{padding-left:14px;padding-right:14px}
.table tr:hover td{background:transparent}
.table td,.table-compact td,.table-list td{padding:3px 0;border:0;overflow-wrap:anywhere}
.table td:first-child{padding-top:0}
.table td:empty{display:none}
.table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:inline-block;margin:0 6px 0 0;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);vertical-align:baseline}
.table td[data-label]:not([data-label=""]):first-child::before{display:none}
.col-number,.col-state,.col-engineer,.col-date,.col-when{width:auto;white-space:normal}
.table .nowrap{white-space:normal}
.table-editable .col-action{width:auto;text-align:left;white-space:normal;padding-top:8px}
.row-edit>td{padding:12px 0}
.table td.empty{padding:6px 0}
.table td.right{text-align:left}
.table-compact tr.total{border-top:1px solid var(--warning)}
.table-compact tr.total td{border-top:0}
.totals{min-width:0;width:100%}

/* заявка: стан згори, кнопки — панеллю внизу екрана */
.actionbar{position:static;margin:0 0 14px;padding:10px 12px}
.actionbar-state{gap:6px 10px;font-size:0.8667rem}
.actionbar-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:var(--n-0);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(27,23,22,.10)}
.actionbar-actions form,.actionbar-actions .menu{width:100%;margin:0}
.actionbar-actions .btn{width:100%;min-height:44px;font-size:0.8667rem;padding:0 10px}
/* Меню відкривається на всю ширину панелі, а не своєї клітинки: у вузькій
   клітинці форма переходу з коментарем стискалась до половини екрана. */
.actionbar-actions .menu{position:static}.actionbar-actions .menu-list{top:auto;bottom:calc(100% + 8px);left:10px;right:10px;min-width:0;max-height:70vh;overflow:auto}
body:has(.actionbar-actions) .main{padding-bottom:calc(var(--actionbar-h,200px) + 16px + env(safe-area-inset-bottom))}
.menu-list{min-width:min(260px,calc(100vw - 20px))}
.menu-form{min-width:0}

/* решта */
.portal-who{display:none}
/* Мову кабінету партнер перемикає й з телефона: .userbox span ховає решту підписів. */
.userbox .portal-lang{display:inline-flex}
.steps-summary-note{margin-left:0;text-align:left;flex-basis:100%}
.status-track-compact{gap:8px}
.status-track-compact .status-step:not(:last-child){margin-right:0}
.status-track-compact .status-step:not(:last-child)::after{display:none}
.searchbar>*{flex:1 1 100%;max-width:none}
.searchbar>.actions{margin-left:0}
.bulk-bar{position:sticky;bottom:0;z-index:15}
.bulk-bar select,.bulk-bar .btn{width:100%}
.bulk-bar [data-bulk-clear]{margin-left:0}
.filter-chips{gap:12px}
.preset-pick{max-width:100%;flex:1 1 100%}
.field-head{gap:6px}
.actionbar-tools{display:contents}
/* Повторна заявка й документи на телефоні — у шапці картки, не в нижній панелі. */
/* Решта кнопок — одним рядом: їх лишилось дві-чотири, а другий ряд з'їдав ще 50 px екрана. */
.actionbar-actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.actionbar-actions .btn{white-space:normal;line-height:1.2}
.tool-desk{display:none}.actionbar-phone-tools{display:flex;flex-wrap:wrap;gap:8px;width:100%}.actionbar-phone-tools .btn{min-height:40px}.actionbar-phone-tools .menu-list{left:0;right:auto}
.actions>label+.btn,.actions>span+.btn,.actions>p+.btn,.actions>label+button,.actions>span+button,.actions>p+button{margin-left:0}
.msg{max-width:100%}.msg-when{margin-left:0;white-space:normal}.client-preview{height:560px}
.page-head h1.mono{white-space:normal;overflow-wrap:anywhere}
.field-check{padding-top:0}
.tabs-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.tabs-nav::-webkit-scrollbar{display:none}
.tabs-nav .tab{white-space:nowrap;flex:0 0 auto}
.disclosure-row>.disclosure{flex:1 1 auto}
.disclosure-row>.disclosure>summary{width:100%;justify-content:center}
.draft-status{margin-left:0;flex-basis:100%;white-space:normal}
.ui-pop{max-width:calc(100vw - 16px)}
.detail-list{grid-template-columns:1fr;gap:2px 0}
.detail-list dt{margin-top:8px;font-size:0.8rem}
.event{grid-template-columns:1fr;gap:2px;padding:8px 0}
.status-track-compact .status-step{font-size:0.8rem;padding:4px 7px}
.tabs .tab{padding:8px 2px;font-size:0.8667rem}
.doc-row{flex-direction:column}
.share-url input{min-width:0;width:100%}
.stage-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.capture-btn{min-height:56px}
.sign-doc{height:38vh}
.split,.grid{gap:12px}
.section-top{margin-top:14px}
.pagination{padding:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.link-code{font-size:1.4667rem;letter-spacing:.12em}
.error-code{font-size:2.9333rem}
.confirm{padding:16px}
.public-container{margin:16px auto 40px}
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.closed-list{grid-template-columns:1fr;gap:2px 0}
.closed-list dd{margin-bottom:8px}
.ticket-part{padding:10px 12px}
.report-fab{right:10px;padding:0 10px}
.report-fab-text{display:none}
.issue-dialog{padding:16px}
.issue-actions{grid-template-columns:1fr}
.issue-shots img{width:140px;height:88px}
.lightbox-head{padding:8px 10px}
.lightbox-status{flex-basis:100%}.lightbox-caption{font-size:0.9333rem}
.lightbox-arrow{min-width:40px;height:56px;font-size:1.4667rem}
.lightbox-arrow[data-shot=prev]{left:6px}
.lightbox-arrow[data-shot=next]{right:6px}
.ship-to-rows{grid-template-columns:1fr;gap:2px 0}
.ship-to-rows dd{margin-bottom:6px}
/* Шапка сторінки в стовпчик: без цього заголовок тримав 320px і кнопки
   під ним сповзали за край екрана телефона. */
.page-head>div:first-child{flex-basis:auto}
/* Примітка «без цього перехід не спрацює» — під назвою кроку, а не поруч у три слова на рядок. */
.step{flex-wrap:wrap}
.step-note{flex-basis:100%;padding-left:34px;margin-top:-6px}
/* Згорнуте меню на телефоні: підпис обраного переходить у другий рядок під
   назву, а не обрізається до «В оригін…» поруч із нею. */
.picker>summary{flex-wrap:wrap;padding:8px 14px}
.picker>summary>span:first-child{flex:1 1 auto}
.picker-state{order:1;flex-basis:100%;text-align:left}
.picker-state:empty{display:none}
.serial-strip{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:8px 16px;background:var(--n-0);border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);transform:translateY(-110%);transition:transform .15s ease}
.serial-off-screen .serial-strip{transform:none}
.serial-strip-number{font-weight:700;font-size:0.8667rem}
.serial-off-screen .actionbar-serial{display:none}
.serial-copy{min-width:36px;min-height:36px}
}
.capabilities{border:0;padding:0;margin:4px 0 0;min-width:0}.capability-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 18px;margin-top:8px}.checkline.capability{align-items:flex-start;white-space:normal;color:var(--n-800)}.checkline.capability input{margin-top:3px}.capability-hint{display:block;margin-top:2px;line-height:1.35}
.report-table th,.report-table td{white-space:nowrap}.report-table .num{text-align:right;font-variant-numeric:tabular-nums}.report-table .report-groups th{text-align:center;border-bottom:1px solid var(--line);color:var(--n-700)}.report-table .report-groups th:first-child{text-align:left;vertical-align:bottom}.report-table tfoot td{font-weight:700;border-top:2px solid var(--line)}.report-period{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}.report-period .field{margin:0}.report-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.catalog-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.catalog-source p{margin:4px 0}.catalog-source .section-title{margin-bottom:4px}
.model-sold{display:flex;gap:6px;align-items:center;margin:0}.model-sold input{width:96px;flex:0 0 96px;min-height:32px;height:32px;padding:0 8px;text-align:right}
.sel-button:disabled{background:var(--n-50);color:var(--muted);cursor:not-allowed}.sel-button:disabled .sel-value{color:var(--muted)}
.stage-tiles.path-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.claim-card.claim-urgent{border-color:var(--danger);box-shadow:inset 4px 0 0 var(--danger)}.claim-actions{align-items:flex-start;flex-wrap:wrap;gap:12px 18px}.claim-actions form{margin:0}.claim-box{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--n-50)}.claim-box .grid{margin-bottom:6px}
.feedback-form{gap:10px;flex-wrap:wrap}
.tracking-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.tracking-list .mono{margin-right:6px}
/* «Що нового»: картка після оновлення й сторінка з усіма оновленнями. */
.release-notice{border-left:4px solid var(--brand-700)}
/* «Що нового» згорнуто в рядок: шеврон, назва, скільки змін, перша з них;
   праворуч — «усі оновлення» й «Зрозуміло». */
.release-notice{position:relative;padding:0}
.release-bar{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 220px 10px 16px;cursor:pointer;list-style:none;min-width:0}
.release-bar::-webkit-details-marker{display:none}
.release-chevron{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--n-600);border-bottom:2px solid var(--n-600);transform:rotate(-45deg);transition:transform .15s}
.release-details[open] .release-chevron{transform:rotate(45deg)}
.release-count{flex:0 0 auto;font-size:0.8rem;font-weight:600;color:var(--brand-700);background:var(--brand-50);border-radius:var(--r-sm);padding:1px 7px}
.release-first{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:0.8667rem}
.release-details[open] .release-first{display:none}
.release-body{padding:0 16px 16px}.release-body>p{margin:0 0 12px}
.release-actions{position:absolute;top:10px;right:16px;display:flex;align-items:center;gap:14px}.release-actions form{margin:0}
.release-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}.release-head h2{font-size:1.0667rem}.release-head p{margin:4px 0 0}
.release-groups{display:grid;gap:12px 24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.release-list{margin:0;padding-left:18px;display:grid;gap:4px}.release-list li{line-height:1.4}
.release-scope{display:inline-block;font-size:0.8rem;font-weight:600;color:var(--brand-700);background:var(--brand-50);border-radius:var(--r-sm);padding:0 6px;margin-right:2px}
.whats-new{position:relative;padding-right:10px}.nav-dot{position:absolute;top:-2px;right:0;width:8px;height:8px;border-radius:50%;background:var(--danger)}
/* Розрахунок вартості Apaczka: обраний рядок виділено. */
.apaczka-quote tr.is-chosen td{background:var(--brand-50)}.apaczka-quote td.num,.apaczka-quote th:nth-child(2),.apaczka-quote th:nth-child(3){text-align:right;white-space:nowrap}
/* Розрізи звіту: назви робіт і моделей переносяться, числа — ні. */
.report-breakdowns{margin-bottom:16px}.report-table td.wrap{white-space:normal;min-width:180px}
/* Два розділювачі поспіль (форма призначення + «Повернути в роботу») і розділювач в кінці картки — зайві лінії. */
.divider+.divider,.card>.divider:last-child{display:none}
/* Претензії до виробника: чернетка сіра, подано — бренд, визнано — попередження (ще не гроші), розраховано — успіх, відхилено — небезпека. */
.badge-claim-draft{background:var(--n-100);color:var(--n-600)}.badge-claim-submitted{background:var(--brand-50);color:var(--brand-700)}.badge-claim-accepted{background:var(--warning-bg);color:var(--warning)}.badge-claim-settled{background:var(--success-bg);color:var(--success)}.badge-claim-rejected{background:var(--danger-bg);color:var(--danger)}
.badge-campaign-draft{background:var(--n-100);color:var(--n-600)}.badge-campaign-active{background:var(--warning-bg);color:var(--warning)}.badge-campaign-closed{background:var(--success-bg);color:var(--success)}
.badge-campaign-row-not_found,.badge-campaign-row-skipped{background:var(--n-100);color:var(--n-600)}.badge-campaign-row-matched{background:var(--brand-50);color:var(--brand-700)}.badge-campaign-row-notified,.badge-campaign-row-booked{background:var(--warning-bg);color:var(--warning)}.badge-campaign-row-done{background:var(--success-bg);color:var(--success)}
td .inline-form{display:inline-flex}
.subsection-title{font-size:.95rem;font-weight:600;margin:10px 0 0;color:var(--n-800)}