/* UI_V2 — «Счета 1С», октябрь 2026.
   Один слой вместо прежних AMO_NATIVE_UI_V18 … COMPACT_INVOICE_TILES_V119 и STAFF_UI_V1.
   Палитра — фирменный navy #283C86; шрифты Golos Text (интерфейс) и Unbounded (только суммы).
   Брейкпоинты считаются от ширины iframe: узкая вкладка < 760px, две колонки ≥ 760px. */

/* ---------- Шрифты (web/fonts/, лицензия SIL OFL 1.1). Если файлов нет на сервере — сработают системные. ---------- */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-text-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-text-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/golos-text-rub.woff2) format('woff2');unicode-range:U+20BD}
@font-face{font-family:'Unbounded Money';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/unbounded-digits.woff2) format('woff2');unicode-range:U+0020,U+002B-002E,U+0030-0039,U+00A0,U+2012-2014,U+2212}
@font-face{font-family:'Unbounded Money';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/unbounded-rub.woff2) format('woff2');unicode-range:U+20BD}

/* ---------- Токены ---------- */
:root{
 --brand:#283C86;--brand-hover:#22347A;--brand-press:#1B2A63;--brand-soft:#EDF0FA;--brand-line:#C9D2E6;--brand-ring:rgba(40,60,134,.22);
 --gold:#C19A3F;
 --ink:#1D2433;--slate:#55607A;--muted:#636B81;
 --line:#E2E6EE;--line-strong:#CDD3E0;
 --bg:#F2F4F8;--paper:#FFFFFF;--fill:#F6F7FB;
 --paid:#12744A;--paid-soft:#E4F4EB;--paid-dot:#1E9E61;
 --wait:#8A5B00;--wait-soft:#FFF2D2;--wait-line:#EBCB7A;--wait-dot:#E0A100;
 --part:#2F55C8;--part-soft:#E8EEFF;
 --neutral:#5E6781;--neutral-soft:#EEF0F5;
 --danger:#B93A2E;--danger-soft:#FCEBE8;--danger-line:#F0C8C2;
 --radius-lg:12px;--radius:8px;
 --shadow-sm:0 1px 2px rgba(23,32,61,.06);
 --shadow-lg:0 12px 32px rgba(23,32,61,.16),0 2px 6px rgba(23,32,61,.08);
 --font:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 --font-money:'Unbounded Money','Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 /* прежние имена из README оставлены как псевдонимы */
 --blue:var(--brand);
 /* иконки: рисуются через mask и берут цвет текста */
 --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
 --i-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
 --i-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
 --i-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5'/%3E%3Cpath d='M21 3 14.5 21l-4-7.5L3 9.5z'/%3E%3C/svg%3E");
 --i-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
 --i-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3'/%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='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
 --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
 --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
 --i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
 --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
 --i-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
 --i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-width:0;width:100%}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:220px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{width:100%;max-width:none;margin:0;padding:12px}
main>*,#workspace>*{min-width:0}
h1,h2,p{margin-top:0}
h2{margin-bottom:12px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
p{color:var(--slate)}
small{display:block;font-size:12px;line-height:1.4;color:var(--muted)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Кнопки ---------- */
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;margin:0;padding:9px 16px;border:1px solid transparent;border-radius:var(--radius);background:var(--brand);color:#fff;font:600 14px/1.25 var(--font);text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
button:hover{background:var(--brand-hover)}
button:active{background:var(--brand-press)}
button:disabled,button:disabled:hover{background:#E7EAF1;border-color:transparent;color:#7A8296;cursor:default}
button::before{flex:0 0 auto}

/* второстепенные (контур) */
#submit-sbp,#submit-offer,#customer-add,.empty-action,.blocker-action,.recover-sbp{background:var(--paper);color:var(--brand);border-color:var(--brand-line)}
#submit-sbp:hover,#submit-offer:hover,#customer-add:hover,.empty-action:hover,.blocker-action:hover{background:var(--brand-soft);border-color:#B4C0DC}
#submit-sbp:disabled,#submit-offer:disabled,#customer-add:disabled,.empty-action:disabled,.blocker-action:disabled{background:var(--fill);border-color:var(--line);color:#7A8296}

/* текстовые */
#refresh,#customer-cancel,.staff-identity[data-state=ready] #staff-connect,.staff-identity[data-state=loading] #staff-connect{min-height:32px;padding:5px 10px;background:transparent;color:var(--brand);border-color:transparent;font-size:13px;font-weight:600}
#refresh:hover,#customer-cancel:hover,.staff-identity[data-state=ready] #staff-connect:hover{background:var(--brand-soft)}
#refresh:disabled,#customer-cancel:disabled,.staff-identity #staff-connect:disabled{background:transparent;color:#9AA2B5}

/* иконки на кнопках */
#refresh::before,#customer-add::before,.pdf-button::before,.edo-button::before,.sbp-copy::before,.recover-sbp::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:var(--i,var(--i-plus)) center/contain no-repeat;mask:var(--i,var(--i-plus)) center/contain no-repeat}
#refresh{--i:var(--i-refresh)}
#customer-add{--i:var(--i-plus)}
#customer-add[data-action=reconcile]{--i:var(--i-refresh)}
.pdf-button{--i:var(--i-download)}
.edo-button{--i:var(--i-send)}
.edo-button[data-mode=open]{--i:var(--i-external)}
.edo-button[data-mode=check],.recover-sbp{--i:var(--i-refresh)}
.sbp-copy{--i:var(--i-copy)}
.sbp-copy.is-done{--i:var(--i-check)}
body.is-busy #refresh::before{animation:spin .9s linear infinite}

/* ---------- Поля ---------- */
label{display:block;margin:0 0 14px;font-size:13px;font-weight:500;line-height:1.35;color:var(--slate)}
input:not([type=checkbox]),textarea,select{display:block;width:100%;min-width:0;margin:6px 0 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 14px/1.4 var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]),select{min-height:42px}
textarea{min-height:92px;resize:vertical}
select{-webkit-appearance:none;appearance:none;padding-right:36px;background:var(--paper) var(--i-chevron) no-repeat right 12px center/14px 14px;cursor:pointer}
input::placeholder,textarea::placeholder{color:#9AA2B5;opacity:1}
input:not([type=checkbox]):hover,textarea:hover,select:hover{border-color:#B7C0D2}
input:not([type=checkbox]):focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input:disabled,textarea:disabled,select:disabled,input[readonly]{background:var(--fill);color:var(--slate)}
.field-note{margin:6px 0 0;text-align:right;font-size:12px;font-weight:400}
.field-note:empty{display:none}
.field-note.is-warn{color:var(--wait);font-weight:500}

/* сумма: крупные цифры Unbounded и знак рубля внутри поля */
.money-input{display:flex;align-items:center;margin-top:6px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);transition:border-color .15s,box-shadow .15s}
.money-input:hover{border-color:#B7C0D2}
.money-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.money-input input[name=amount]{flex:1;min-height:50px;margin:0;padding:8px 4px 8px 14px;border:0;border-radius:var(--radius) 0 0 var(--radius);background:transparent;box-shadow:none;font:500 21px/1.2 var(--font-money);letter-spacing:-.01em;-moz-appearance:textfield;appearance:textfield}
.money-input input[name=amount]:focus{box-shadow:none}
.money-input input[name=amount]::-webkit-outer-spin-button,.money-input input[name=amount]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money-suffix{padding:0 16px 0 6px;font:500 18px/1 var(--font-money);color:var(--muted)}

/* переключатели */
.vat-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fill);cursor:pointer}
.vat-switch>span{min-width:0}
.vat-switch strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.vat-switch small{margin-top:2px;font-size:12px;font-weight:400}
.vat-switch input{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 40px;width:40px;height:24px;margin:0;border:0;border-radius:999px;background:#C3CAD8;cursor:pointer;transition:background-color .15s}
.vat-switch input::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(23,32,61,.3);transition:transform .15s}
.vat-switch input:checked{background:var(--brand)}
.vat-switch input:checked::before{transform:translateX(16px)}
.vat-switch input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- Шапка: плательщик и сводка оплат ---------- */
.create-header{margin:0 0 14px}
.header-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.create-header h1{margin:0;font-size:12px;font-weight:500;color:var(--muted)}
#deal-label{margin:0;font-size:12px;color:var(--muted);white-space:nowrap}
#contact-choice{margin:6px 0 12px}
.customer-heading{display:block}
.party-name{display:block;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.create-header[data-state=loading] .party-name{color:var(--muted);font-weight:500}
#company-inn{margin:4px 0 0;font-size:12.5px;color:var(--slate);overflow-wrap:anywhere}
#company-status{display:flex;align-items:baseline;gap:7px;margin:6px 0 0;font-size:12.5px;color:var(--slate)}
#company-status::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--status-dot,#C3CAD8);transform:translateY(-1px)}
#company-inn:empty,#company-status:empty{display:none}
.create-header[data-state=ready]{--status-dot:var(--paid-dot)}
.create-header[data-state=action]{--status-dot:var(--wait-dot)}
.create-header[data-state=error]{--status-dot:var(--danger)}
#customer-add{min-height:34px;margin-top:10px;padding:6px 12px 6px 10px;font-size:13px}

/* сводка: в узкой вкладке — строки как в ведомости, шире — три колонки */
.deal-summary{display:grid;margin-top:14px;padding:6px 14px 0;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;padding:5px 0}
.stat span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--slate);white-space:nowrap}
.stat span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot)}
.stat strong{font:500 14px/1.3 var(--font-money);letter-spacing:-.01em;color:var(--ink);text-align:right;white-space:nowrap}
.stat.issued{--dot:var(--brand)}
.stat.paid{--dot:var(--paid-dot)}
.stat.due{--dot:var(--wait-dot)}
.paid-bar{grid-column:1/-1;height:4px;margin:6px -14px 0;background:var(--wait-soft)}
.paid-bar i{display:block;height:100%;background:var(--paid-dot);transition:width .4s ease}

/* экран входа: показываем только номер сделки */
main:has(#login:not([hidden])) .create-header h1,
main:has(#login:not([hidden])) #contact-choice,
main:has(#login:not([hidden])) .customer-heading,
main:has(#login:not([hidden])) .deal-summary{display:none}

/* ---------- Вход ---------- */
#login{max-width:400px;margin:24px auto 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.login-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;background:var(--brand-soft);color:var(--brand)}
.login-icon::before{content:'';width:22px;height:22px;background:currentColor;-webkit-mask:var(--i-lock) center/contain no-repeat;mask:var(--i-lock) center/contain no-repeat}
#login h1{margin:0 0 6px;font-size:18px;font-weight:600;line-height:1.3}
#login p{margin:0 0 18px;font-size:13px}
#login>button{width:100%}

/* ---------- Уведомления: поверх контента, без сдвига макета ---------- */
#message{position:fixed;z-index:50;top:10px;left:50%;width:max-content;max-width:min(440px,calc(100% - 20px));margin:0;padding:10px 38px 10px 40px;border:1px solid var(--danger-line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow-lg);cursor:pointer;transform:translateX(-50%);animation:toast-in .18s ease-out}
#message:empty{display:none}
#message::before{content:'';position:absolute;left:13px;top:11px;width:18px;height:18px;background:var(--danger);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
#message::after{content:'';position:absolute;right:12px;top:12px;width:14px;height:14px;background:var(--muted);-webkit-mask:var(--i-close) center/contain no-repeat;mask:var(--i-close) center/contain no-repeat}
#message[data-kind=success]{border-color:var(--ink);background:var(--ink);color:#fff}
#message[data-kind=success]::before{background:#5FD39A;-webkit-mask-image:var(--i-check);mask-image:var(--i-check)}
#message[data-kind=success]::after{background:#AEB5C6}
#message[data-kind=loading]{padding:7px 14px 7px 34px;border-color:var(--line);color:var(--slate);cursor:default;animation:toast-in .18s ease-out .35s both}
#message[data-kind=loading]::before{left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;background:none;-webkit-mask:none;mask:none;animation:spin .8s linear infinite}
#message[data-kind=loading]::after{display:none}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Вкладки узкой панели ---------- */
.view-tabs{position:sticky;top:8px;z-index:6;display:flex;gap:3px;margin:0 0 12px;padding:3px;border-radius:10px;background:#E3E7EF;box-shadow:0 0 0 8px var(--bg)}
.view-tabs [role=tab]{flex:1 1 0;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--slate);font-size:13.5px;font-weight:600}
.view-tabs [role=tab]:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.view-tabs [role=tab][aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(23,32,61,.12),0 0 0 1px rgba(23,32,61,.04)}
.tab-count{min-width:20px;padding:1px 6px;border-radius:999px;background:rgba(40,60,134,.1);color:var(--brand);font-size:12px;font-weight:600;line-height:18px}

/* ---------- Новый контрагент ---------- */
#customer-editor{margin:0 0 14px;padding:16px;background:var(--paper);border:1px solid var(--brand-line);border-radius:var(--radius-lg);box-shadow:0 0 0 4px var(--brand-soft)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#customer-editor h2{margin:0;font-size:16px}
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 14px;padding:0;list-style:none;counter-reset:step;font-size:12px;color:var(--muted)}
.steps li{display:flex;align-items:center;gap:6px;counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--neutral-soft);color:var(--neutral);font-size:11px;font-weight:600}
.steps li:first-child::after{content:'';width:18px;height:1px;margin-left:2px;background:var(--line-strong)}
.steps li:first-child{color:var(--ink);font-weight:500}
.steps li:first-child::before{background:var(--brand);color:#fff}
#customer-editor:has(#customer-review:not([hidden])) .steps li:first-child{color:var(--muted);font-weight:400}
#customer-editor:has(#customer-review:not([hidden])) .steps li:first-child::before{content:'✓';background:var(--paid-soft);color:var(--paid)}
#customer-editor:has(#customer-review:not([hidden])) .steps li:last-child{color:var(--ink);font-weight:500}
#customer-editor:has(#customer-review:not([hidden])) .steps li:last-child::before{background:var(--brand);color:#fff}
#customer-identity{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius);background:var(--fill);color:var(--ink);font-size:13px;font-weight:500;overflow-wrap:anywhere}
#customer-identity:empty{display:none}
#customer-review-text{margin:0 0 14px;padding:12px;border-radius:var(--radius);background:var(--fill);color:var(--ink);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.form-hint{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted)}
#customer-form button[type=submit],#customer-confirm{width:100%}

/* ---------- Форма нового счёта ---------- */
.new-invoice{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.section-title{display:none}

/* автор счёта (блок создаётся в app.js) */
.staff-identity{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--fill)}
.staff-head{display:flex;align-items:center;gap:10px}
.staff-avatar{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:600;letter-spacing:.02em}
.staff-avatar-photo{display:block;width:34px;height:34px;border-radius:inherit;object-fit:cover}
.staff-avatar:empty::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-user) center/contain no-repeat;mask:var(--i-user) center/contain no-repeat}
.staff-who{display:grid;flex:1;min-width:0}
.staff-who small{font-size:11.5px}
.staff-who strong{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
#staff-connect{flex:0 0 auto;min-height:34px;padding:6px 14px;font-size:13px}
.staff-note{display:none;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--slate)}
.staff-identity[data-state=empty],.staff-identity[data-state=error]{border-style:dashed;border-color:var(--brand-line);background:var(--brand-soft)}
.staff-identity[data-state=empty] .staff-avatar,.staff-identity[data-state=error] .staff-avatar{background:var(--paper)}
.staff-identity[data-state=empty],.staff-identity[data-state=error]{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-items:center}
.staff-identity[data-state=empty] .staff-head,.staff-identity[data-state=error] .staff-head{display:contents}
.staff-identity[data-state=empty] .staff-note,.staff-identity[data-state=error] .staff-note{display:block;grid-column:1/-1;order:1}
.staff-identity[data-state=empty] #staff-connect,.staff-identity[data-state=error] #staff-connect{grid-column:1/-1;order:2;width:100%;margin-top:12px}
#staff-options{display:grid;gap:0 10px;margin-top:12px}
#staff-options label{margin-bottom:10px}
#staff-percent{justify-self:start;margin:0}
#staff-percent:not(:empty){padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--slate);font-size:12px;font-weight:500}

/* итог и действия: липнут к низу видимой области */
.invoice-footer{position:sticky;bottom:0;z-index:4;margin:16px -16px -16px;padding:12px 16px 14px;border-top:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--paper);transition:box-shadow .2s}
.invoice-footer.is-floating{box-shadow:0 -10px 24px -14px rgba(23,32,61,.28)}
.footer-sentinel{height:1px;margin-top:-1px}
.tax-breakdown{display:grid;gap:2px}
.total-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.total-row span{font-size:13px;font-weight:500;color:var(--slate)}
#net-value{font:500 21px/1.25 var(--font-money);letter-spacing:-.01em;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.tax-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
#tax-value{font-weight:500;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.form-blocker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:10px 0 0;padding:8px 10px;border-radius:var(--radius);background:var(--wait-soft);color:var(--wait);font-size:12.5px;line-height:1.4}
.form-blocker span{flex:1 1 180px}
.blocker-action{min-height:30px;padding:4px 10px;font-size:12.5px}
.invoice-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.invoice-actions>button{flex:1 1 0;min-width:0;white-space:normal}
#submit-invoice{flex:1 1 100%}
#submit-offer,#submit-sbp{padding:8px 6px;font-size:13px}
.recover-sbp{flex-basis:100%!important;background:var(--wait-soft);border-color:var(--wait-line);color:var(--wait);font-size:13px}
.recover-sbp:hover{background:#FFE9B5;border-color:var(--wait-line)}

/* ---------- Выставленные счета ---------- */
.history-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin-bottom:4px}
.history-title h2{margin:0}
#refresh{margin-right:-8px;white-space:nowrap}
.history-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;min-height:28px;margin-bottom:10px}
#checked-label{margin:0}
#checked-label:empty{display:none}
.stamp-switch{gap:10px;padding:0;border:0;background:none}
.stamp-switch strong{font-size:12.5px;font-weight:500;color:var(--slate)}
.stamp-switch input{flex-basis:34px;width:34px;height:20px}
.stamp-switch input::before{width:14px;height:14px}
.stamp-switch input:checked::before{transform:translateX(14px)}
.edo-note{margin:-2px 0 10px}

#invoices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:10px;align-content:start}
.invoice-tile{--edge:var(--line-strong);position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;padding:12px 14px 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:inset 3px 0 0 var(--edge);overflow:hidden;overflow-wrap:anywhere}
.invoice-tile[data-status=paid]{--edge:var(--paid-dot)}
.invoice-tile[data-status=unpaid]{--edge:var(--wait-dot)}
.invoice-tile[data-status=partial]{--edge:var(--part)}
.invoice-tile.is-new{animation:tile-new 2.6s ease-out}
@keyframes tile-new{0%,35%{box-shadow:inset 3px 0 0 var(--edge),0 0 0 3px rgba(193,154,63,.6)}100%{box-shadow:inset 3px 0 0 var(--edge),0 0 0 3px rgba(193,154,63,0)}}
.tile-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.tile-title{font-size:13px;font-weight:600;color:var(--slate)}
.invoice-total{margin:2px 0;font:500 20px/1.25 var(--font-money);letter-spacing:-.01em;color:var(--ink)}
.invoice-description{display:-webkit-box;margin:0;overflow:hidden;font-size:12.5px;line-height:1.45;color:var(--slate);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.invoice-balance{display:grid;gap:5px;margin-top:4px;font-size:12px;color:var(--slate)}
.progress{display:block;height:4px;border-radius:2px;background:var(--part-soft);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--part)}
.sbp-label{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:12px;font-weight:500;color:var(--slate)}
.sbp-label::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--neutral)}
.sbp-label.paid::before{background:var(--paid-dot)}
.sbp-label.unpaid::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--wait-dot)}
.invoice-warning{margin:4px 0 0;padding:6px 9px;border-radius:6px;background:var(--wait-soft);color:var(--wait);font-size:12px;line-height:1.4}
.edo-hint,.sbp-hint{margin:2px 0 0;font-size:12px}
.edo-hint:empty{display:none}
.invoice-tile a{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--brand)}
.invoice-tile a::before{content:'';width:14px;height:14px;background:currentColor;-webkit-mask:var(--link-i,var(--i-external)) center/contain no-repeat;mask:var(--link-i,var(--i-external)) center/contain no-repeat}
.invoice-tile a.pdf-link{--link-i:var(--i-download)}
.invoice-tile input{min-height:34px;margin:4px 0 0;padding:6px 9px;font-size:12px}
.tile-actions{display:flex;margin:10px -14px 0 -16px;margin-top:auto;padding-top:10px}
.tile-actions:empty{display:none}
.tile-actions>button{flex:1 1 0;min-width:0;min-height:40px;padding:8px 8px;gap:6px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--brand);font-size:12.5px;font-weight:500;line-height:1.25;white-space:normal}
.tile-actions>button+button{border-left:1px solid var(--line)}
.tile-actions>button:hover{background:var(--brand-soft)}
.tile-actions>button:disabled,.tile-actions>button:disabled:hover{background:transparent;color:#9AA2B5}
.tile-actions>button:focus-visible{outline-offset:-3px}
.sbp-copy.is-done{color:var(--paid)}

/* статусы */
.badge{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin:0;padding:3px 9px 3px 8px;border-radius:999px;background:var(--neutral-soft);color:var(--neutral);font-size:12px;font-weight:600;line-height:1.35;white-space:nowrap}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.paid{background:var(--paid-soft);color:var(--paid)}
.badge.paid::before{background:var(--paid-dot)}
.badge.unpaid{background:var(--wait-soft);color:var(--wait)}
.badge.unpaid::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--wait-dot)}
.badge.partial{background:var(--part-soft);color:var(--part)}
.badge.partial::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.badge.unknown,.badge.deleted{background:var(--neutral-soft);color:var(--neutral)}

/* пустой список */
.empty-state{display:grid;justify-items:center;gap:6px;grid-column:1/-1;margin:0;padding:28px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--paper);text-align:center}
.empty-state::before{content:'';width:44px;height:44px;margin-bottom:4px;border-radius:12px;background:var(--brand-soft) var(--i-doc) center/22px no-repeat}
.empty-state strong{font-size:15px;font-weight:600;color:var(--ink)}
.empty-state p{max-width:300px;margin:0;font-size:13px}
.empty-action{min-height:36px;margin-top:8px;padding:6px 14px;font-size:13px}

/* ---------- Адаптивность ---------- */
@media (max-width:339px){
 main{padding:10px}
 .new-invoice,#customer-editor{padding:12px}
 .invoice-footer{margin:14px -12px -12px;padding:12px}
 .party-name{font-size:17px}
 .invoice-actions{flex-direction:column}
 .invoice-actions>button{flex:0 0 auto;width:100%}
}
@media (max-width:759px){
 html{scroll-padding-top:60px}
 #workspace[data-view=create] .history,#workspace[data-view=list] .new-invoice{display:none}
}
@media (min-width:560px){
 .deal-summary{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
 .stat{display:block;padding:10px 12px 11px 14px}
 .stat+.stat{border-left:1px solid var(--line)}
 .stat strong{display:block;margin-top:3px;font-size:15px;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .paid-bar{margin:0}
}
@media (min-width:520px) and (max-width:759px){
 #staff-options{grid-template-columns:1fr 1fr}
 #staff-percent{grid-column:1/-1}
}
@media (min-width:540px){
 main{padding:16px}
 .party-name{font-size:21px}
 .new-invoice{padding:20px}
 .invoice-footer{margin:18px -20px -20px;padding:14px 20px 16px}
}
@media (min-width:760px){
 main{padding:20px}
 .create-header{margin-bottom:20px}
 #contact-choice{max-width:420px}
 .view-tabs,.empty-action{display:none}
 #workspace{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:20px;align-items:start}
 #customer-editor{grid-column:1/-1;margin:0}
 .new-invoice{grid-column:1}
 .history{grid-column:2}
 .section-title{display:block;margin-bottom:16px}
}
@media (min-width:1024px){
 .create-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top top" "contact summary" "party summary";column-gap:28px;align-items:center}
 .header-top{grid-area:top}
 #contact-choice{grid-area:contact}
 .customer-heading{grid-area:party;align-self:start}
 .deal-summary{grid-area:summary;width:min(560px,52vw);margin-top:0}
}
@media (min-width:1150px){
 main{padding:24px}
 #workspace{grid-template-columns:400px minmax(0,1fr);gap:24px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}