/* ============================================================
   MEVA EXPRESS — invoice desk
   ============================================================ */

:root{
  --bg:#F4F3EF;
  --surface:#FFFFFF;
  --surface-2:#FAF9F6;
  --sunken:#EFEDE7;
  --ink:#141C18;
  --ink-2:#48544E;
  --muted:#5E6B65;
  --line:#E3E0D8;
  --line-2:#D3CFC4;

  --brand:#1B7A4B;
  --brand-ink:#0E4A2C;
  --brand-soft:#E6F2EA;
  --brand-ring:rgba(27,122,75,.28);

  --warn:#B45309;
  --warn-soft:#FDF3E3;
  --danger:#B4322A;
  --danger-soft:#FBECEA;
  --info:#2A5FA8;
  --info-soft:#EAF1FB;

  --radius:14px;
  --radius-sm:9px;
  --shadow-1:0 1px 2px rgba(20,28,24,.05), 0 1px 3px rgba(20,28,24,.04);
  --shadow-2:0 2px 4px rgba(20,28,24,.05), 0 8px 24px -6px rgba(20,28,24,.12);
  --shadow-3:0 12px 40px -8px rgba(20,28,24,.22);
  --scrim:rgba(20,28,24,.42);

  color-scheme:light;
  /* только системные шрифты: ничего не тянем со сторонних доменов,
     сайт работает офлайн и CSP остаётся жёстким */
  --font:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans', Arial, sans-serif;
  --mono:'SF Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  --sidebar-w:246px;
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D1411;
  --surface:#141D19;
  --surface-2:#18231E;
  --sunken:#101915;
  --ink:#E9EFEB;
  --ink-2:#AFBCB5;
  --muted:#7E8D86;
  --line:#243129;
  --line-2:#2F3E35;

  --brand:#3FCB80;
  --brand-ink:#8DEBB6;
  --brand-soft:#122C1F;
  --brand-ring:rgba(63,203,128,.3);

  --warn:#E0A45A;
  --warn-soft:#2A2015;
  --danger:#E58179;
  --danger-soft:#2C1815;
  --info:#7FAEEE;
  --info-soft:#141F2E;

  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 10px 28px -8px rgba(0,0,0,.55);
  --shadow-3:0 16px 48px -10px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.62);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.015em}
p{margin:0}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
[hidden]{display:none !important}
::selection{background:var(--brand-ring)}

.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ---------- icons ---------- */
i[data-ic]{
  width:17px; height:17px; flex:0 0 17px; display:inline-block;
  background:currentColor; vertical-align:-3px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
i[data-ic="grid"]{-webkit-mask-image:var(--ic-grid); mask-image:var(--ic-grid)}
i[data-ic="doc"]{-webkit-mask-image:var(--ic-doc); mask-image:var(--ic-doc)}
i[data-ic="tag"]{-webkit-mask-image:var(--ic-tag); mask-image:var(--ic-tag)}
i[data-ic="user"]{-webkit-mask-image:var(--ic-user); mask-image:var(--ic-user)}
i[data-ic="cog"]{-webkit-mask-image:var(--ic-cog); mask-image:var(--ic-cog)}
i[data-ic="plus"]{-webkit-mask-image:var(--ic-plus); mask-image:var(--ic-plus)}
i[data-ic="search"]{-webkit-mask-image:var(--ic-search); mask-image:var(--ic-search)}
i[data-ic="moon"]{-webkit-mask-image:var(--ic-moon); mask-image:var(--ic-moon)}
i[data-ic="print"]{-webkit-mask-image:var(--ic-print); mask-image:var(--ic-print)}
i[data-ic="down"]{-webkit-mask-image:var(--ic-down); mask-image:var(--ic-down)}
i[data-ic="copy"]{-webkit-mask-image:var(--ic-copy); mask-image:var(--ic-copy)}
i[data-ic="trash"]{-webkit-mask-image:var(--ic-trash); mask-image:var(--ic-trash)}
i[data-ic="back"]{-webkit-mask-image:var(--ic-back); mask-image:var(--ic-back)}
i[data-ic="check"]{-webkit-mask-image:var(--ic-check); mask-image:var(--ic-check)}
i[data-ic="dup"]{-webkit-mask-image:var(--ic-dup); mask-image:var(--ic-dup)}
i[data-ic="up"]{-webkit-mask-image:var(--ic-up); mask-image:var(--ic-up)}
i[data-ic="shield"]{-webkit-mask-image:var(--ic-shield); mask-image:var(--ic-shield)}
i[data-ic="exit"]{-webkit-mask-image:var(--ic-exit); mask-image:var(--ic-exit)}
i[data-ic="chart"]{-webkit-mask-image:var(--ic-chart); mask-image:var(--ic-chart)}
i[data-ic="fwd"]{-webkit-mask-image:var(--ic-fwd); mask-image:var(--ic-fwd)}
:root{
  --ic-grid: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
  --ic-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.9' 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");
  --ic-tag: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22 2 12V4a2 2 0 0 1 2-2h8l8.6 8.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E");
  --ic-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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --ic-cog: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 7 19.4a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 3 15a1.7 1.7 0 0 0-1.6-1H1a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 3 8.6a1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 3V3a2 2 0 1 1 4 0v.1A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.7 1.7 0 0 0 21 9h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
  --ic-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");
  --ic-search: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='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --ic-moon: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
  --ic-print: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1.4'/%3E%3C/svg%3E");
  --ic-down: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
  --ic-shield: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ic-exit: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  --ic-up: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
  --ic-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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --ic-trash: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
  --ic-back: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='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  --ic-fwd: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='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-chart: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5M13 17V8M18 17v-9'/%3E%3C/svg%3E");
  --ic-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='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  --ic-dup: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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M4 16a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2'/%3E%3Cpath d='M14.5 11.5v6M11.5 14.5h6'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}

.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px;
  padding:20px 14px; background:var(--surface); border-right:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px; padding:2px 6px 0}
.brand-mark svg{width:34px; height:34px; display:block}
.brand-mark rect{fill:var(--brand)}
.brand-mark path{stroke:var(--surface)}
.brand-text{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.brand-text strong{font-size:14.5px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text span{font-size:11.5px; color:var(--muted)}

.nav{display:flex; flex-direction:column; gap:2px}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:500; color:var(--ink-2); transition:background .13s, color .13s;
}
.nav a i{color:var(--muted); transition:color .13s}
.nav a:hover{background:var(--sunken); color:var(--ink)}
.nav a:hover i{color:var(--ink-2)}
.nav a.active{background:var(--brand-soft); color:var(--brand-ink); font-weight:600}
.nav a.active i{color:var(--brand)}
.nav-count{
  margin-left:auto; font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.nav a.active .nav-count{color:var(--brand)}

.new-invoice{margin-top:auto}
.sidebar-foot{display:flex; align-items:center; gap:6px; padding-top:12px; border-top:1px solid var(--line)}
.saved{margin-left:auto; font-size:11px; color:var(--muted); opacity:0; transition:opacity .3s}
.saved.show{opacity:1}

/* переключатель языка интерфейса */
.lang-switch{display:inline-flex; background:var(--sunken); border-radius:8px; padding:2px; gap:2px}
.lang-switch button{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:0 8px; height:26px;
  border-radius:6px; transition:background .13s, color .13s;
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.on{background:var(--surface); color:var(--brand); box-shadow:var(--shadow-1)}
.lang-switch button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--brand-ring)}

.main{min-width:0; padding:26px 30px 60px; max-width:1500px}

/* ---------- header ---------- */
.page-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.page-head .titles{min-width:0}
.page-head h1{font-size:24px; letter-spacing:-.03em}
.page-head .sub{color:var(--muted); font-size:13px; margin-top:3px}
.page-head .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500;
  cursor:pointer; white-space:nowrap; transition:border-color .13s, box-shadow .13s, transform .06s;
}
.btn:hover{background:var(--surface-2); border-color:var(--muted)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--brand-ring)}
.btn i{opacity:.75}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.btn-primary:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
[data-theme="dark"] .btn-primary{color:#07130D}
.btn-primary i{opacity:.9}
.btn-ghost{background:transparent; border-color:transparent}
.btn-ghost:hover{background:var(--sunken); border-color:transparent}
.btn-danger{color:var(--danger); border-color:var(--line-2)}
.btn-danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.btn-sm{height:30px; padding:0 10px; font-size:12.5px; border-radius:7px}
.btn-sm i{width:14px; height:14px; flex-basis:14px}
.btn-block{width:100%}
.icon-btn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer;
  transition:background .13s, color .13s;
}
.icon-btn:hover{background:var(--sunken); color:var(--ink)}
.icon-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--brand-ring)}

/* ---------- form controls ---------- */
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; text-transform:uppercase}
.input, .select, textarea.input{
  height:36px; padding:0 11px; width:100%;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-size:13.5px;
  transition:border-color .13s, box-shadow .13s, background .13s;
}
textarea.input{height:auto; padding:9px 11px; resize:vertical; line-height:1.5}
.input::placeholder{color:var(--muted); opacity:.75}
.input:hover,.select:hover{border-color:var(--muted)}
.input:focus,.select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring)}
.select{appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A857F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.input-wrap{position:relative}
.input-wrap .clear{position:absolute; right:6px; top:50%; transform:translateY(-50%)}

/* ---------- cards / panels ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1)}
.card-head{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line)}
.card-head h3{font-size:14.5px}
.card-head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.card-body{padding:18px}
.card-body.flush{padding:0}

.grid{display:grid; gap:16px}
.kpis{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-1)}
.kpi .k-label{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.kpi .k-value{font-size:26px; font-weight:700; letter-spacing:-.035em; margin-top:7px; line-height:1.1}
.kpi .k-value small{font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:3px}
.kpi .k-note{font-size:12px; color:var(--muted); margin-top:5px}
.kpi.accent .k-value{color:var(--brand)}
.kpi.warn .k-value{color:var(--warn)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
.card > .table-wrap:last-child{border-radius:0 0 var(--radius) var(--radius)}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl th{
  text-align:left; padding:10px 14px; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface); position:sticky; top:0; z-index:2;
}
table.tbl td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr.clickable:hover{background:var(--surface-2)}
.t-r{text-align:right}
.t-c{text-align:center}
.t-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.t-strong{font-weight:600}
.t-dim{color:var(--muted)}
.t-mini{font-size:12px; color:var(--muted)}
.t-warn{color:var(--warn)}
table.tbl tfoot td{padding:11px 14px; border-top:2px solid var(--line); font-weight:700}
table.tbl tbody tr.is-draft td{color:var(--muted)}

/* подсказка над таблицей: жёлтая — данные неполные, синяя — к сведению */
.notice{padding:10px 14px; margin-bottom:16px; border-radius:var(--radius); font-size:13px; line-height:1.45}
.notice.warn{background:var(--warn-soft); color:var(--warn)}
.notice.info{background:var(--info-soft); color:var(--info)}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.paid{background:var(--brand-soft); color:var(--brand-ink)}
.badge.partial{background:var(--warn-soft); color:var(--warn)}
.badge.unpaid{background:var(--sunken); color:var(--ink-2)}
.badge.draft{background:var(--info-soft); color:var(--info)}
.badge.plain{background:var(--sunken); color:var(--ink-2)}
.badge.plain::before{display:none}
[data-theme="dark"] .badge.paid{color:var(--brand)}

/* ---------- filters bar ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.filters .field{min-width:150px}
.filters .grow{flex:1 1 240px}
.chipbar{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  height:30px; padding:0 12px; border-radius:99px; border:1px solid var(--line-2); background:var(--surface);
  font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .13s, border-color .13s, color .13s;
}
.chip:hover{background:var(--surface-2)}
.chip.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
[data-theme="dark"] .chip.on{color:#07130D}

/* ---------- empty ---------- */
.empty{padding:56px 20px; text-align:center; color:var(--muted)}
.empty h4{font-size:15px; color:var(--ink); margin-bottom:6px}
.empty p{font-size:13px; max-width:380px; margin:0 auto 16px}

/* ============================================================
   Invoice editor
   ============================================================ */
.editor{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start}
@media (max-width:1180px){ .editor{grid-template-columns:minmax(0,1fr)} }

.meta-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:13px}

.lines{width:100%; border-collapse:collapse; font-size:13.5px}
.lines th{
  padding:9px 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:1px solid var(--line); text-align:left; white-space:nowrap;
}
.lines th.r{text-align:right}
.lines td{padding:0; border-bottom:1px solid var(--line)}
.lines tbody tr:hover .rownum{color:var(--ink)}
.lines .rownum{
  width:38px; text-align:center; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
  user-select:none;
}
.lines .cell-input{
  width:100%; height:40px; padding:0 10px; border:1px solid transparent; border-radius:6px;
  background:transparent; font-size:13.5px; transition:border-color .12s, box-shadow .12s, background .12s;
}
.lines .cell-input:hover{background:var(--surface-2)}
.lines .cell-input:focus{outline:none; background:var(--surface); border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); position:relative; z-index:3}
.lines .cell-input.n{text-align:right; font-variant-numeric:tabular-nums}
.lines .cell-sum{
  padding:0 12px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;
}
.lines .cell-sum.edited{color:var(--warn)}
.lines td.act{width:38px; text-align:center}
.lines .row-del{opacity:0; transition:opacity .12s}
.lines tr:hover .row-del, .lines tr:focus-within .row-del{opacity:1}
.col-name{width:auto; min-width:190px}
.col-box{width:88px}
.col-price{width:118px}
.col-qty{width:110px}
.col-sum{width:140px}
.lines .unit{color:var(--muted); font-size:11.5px}

.add-row{display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--line)}

.totbar{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:15px 18px; border-top:1px solid var(--line); background:var(--surface-2);
  border-radius:0 0 var(--radius) var(--radius);
}
.totbar .stat{display:flex; flex-direction:column; gap:2px}
.totbar .stat span{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.totbar .stat strong{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.totbar .grand{margin-left:auto; text-align:right}
.totbar .grand span{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.totbar .grand strong{display:block; font-size:27px; font-weight:700; letter-spacing:-.035em; color:var(--brand); font-variant-numeric:tabular-nums}
.words{padding:10px 18px; font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); font-style:italic}

/* себес и маржа в строках счёта — внутренние цифры, в печатную форму не идут */
.col-cost{width:104px}
.col-margin{width:138px}
.lines .cell-input.cost{color:var(--info)}
.lines td.margin-cell{
  padding:0 12px; text-align:right; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lines td.margin-cell.neg, .totbar .stat strong.neg{color:var(--warn)}
.margin-note{padding:8px 18px 0; font-size:12px; color:var(--warn)}

/* autocomplete */
.ac{position:relative}
.ac-list{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 3px); max-height:270px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-3); padding:4px;
}
/* список живёт в body — иначе .table-wrap с overflow обрезал бы его по краю таблицы */
.ac-list.ac-float{position:fixed; right:auto; z-index:120; max-height:270px}
.ac-item{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13.5px;
}
.ac-item .ac-main{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ac-item .ac-side{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.ac-item mark{background:transparent; color:var(--brand); font-weight:700}
.ac-item.sel{background:var(--brand-soft)}
.ac-item.sel .ac-side{color:var(--brand-ink)}
.ac-item.new{color:var(--brand); font-weight:600}

/* side panel */
.side{display:flex; flex-direction:column; gap:14px; position:sticky; top:26px;
  max-height:calc(100vh - 52px); overflow-y:auto; overscroll-behavior:contain}
.side .card-body{padding:15px}
.pay-row{display:flex; gap:9px; align-items:flex-end}
.pay-row .field{flex:1}
.side-actions{display:grid; gap:7px}
.balance{
  display:flex; justify-content:space-between; align-items:baseline; padding:11px 13px;
  background:var(--sunken); border-radius:var(--radius-sm); margin-top:11px; font-size:13px;
}
.balance strong{font-size:16px; font-variant-numeric:tabular-nums}
.balance.debt strong{color:var(--warn)}
.balance.ok strong{color:var(--brand)}

/* ---------- charts ---------- */
.bars{display:flex; align-items:flex-end; gap:5px; height:150px; padding:0 2px}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.bar{
  width:100%; background:var(--brand); border-radius:5px 5px 2px 2px; min-height:3px;
  transition:opacity .13s; opacity:.85; position:relative;
}
.bar-col:hover .bar{opacity:1}
.bar-lab{font-size:10.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.spark{display:block; width:74px; height:22px; overflow:visible}
.spark path{fill:none; stroke:var(--brand); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.spark circle{fill:var(--brand)}

.rank{display:flex; flex-direction:column}
.rank-row{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line)}
.rank-row:last-child{border-bottom:none}
.rank-row .rk{width:19px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.rank-row .rn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px}
.rank-row .rv{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.rank-bar{height:4px; border-radius:2px; background:var(--brand); opacity:.22; margin-top:4px}

/* ---------- palette ---------- */
.palette{position:fixed; inset:0; z-index:200; background:var(--scrim); backdrop-filter:blur(2px); display:flex; justify-content:center; padding-top:14vh}
.palette-box{width:min(620px, 92vw); height:max-content; max-height:66vh; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-3); overflow:hidden}
.palette-input{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line)}
.palette-input i{color:var(--muted)}
.palette-input input{flex:1; border:none; background:transparent; font-size:16px; outline:none}
.palette-input kbd{font-size:10.5px; font-family:var(--font); color:var(--muted); border:1px solid var(--line-2); border-radius:5px; padding:2px 6px}
.palette-results{overflow-y:auto; padding:6px}
.p-item{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px; cursor:pointer; font-size:13.5px}
.p-item .p-kind{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); width:62px; flex:0 0 62px}
.p-item .p-main{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.p-item .p-side{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.p-item.sel{background:var(--brand-soft)}
.p-empty{padding:26px; text-align:center; color:var(--muted); font-size:13px}

/* ---------- toasts ---------- */
.toasts{position:fixed; right:18px; bottom:18px; z-index:300; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:var(--radius-sm);
  background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:500; box-shadow:var(--shadow-3);
  animation:tin .22s cubic-bezier(.2,.8,.3,1);
}
.toast.err{background:var(--danger); color:#fff}
[data-theme="dark"] .toast.err{background:#7E2620; color:#FFECEA}
@keyframes tin{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:250; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:20px}
.modal:focus{outline:none}
.modal-box{width:min(460px,100%); background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--shadow-3); overflow:hidden}
.modal-box h3{padding:18px 20px 0; font-size:16px}
.modal-box .m-body{padding:12px 20px 18px; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.modal-box .m-foot{display:flex; gap:8px; justify-content:flex-end; padding:14px 20px; background:var(--surface-2); border-top:1px solid var(--line)}

/* ============================================================
   Printed document
   ============================================================ */
.print-area{display:none}
.sheet{
  width:190mm; margin:0 auto; padding:12mm 10mm; background:#fff; color:#000;
  font-family:var(--font); font-size:12pt;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
/* разрыв ставим ПЕРЕД каждым следующим счётом — пустой первой страницы не будет */
.sheet + .sheet{page-break-before:always; break-before:page}
.sheet .s-date{font-size:12pt; border-bottom:.6pt solid #000; padding-bottom:2mm; margin-bottom:6mm}
.sheet .s-title{text-align:center; font-size:17pt; font-weight:700; letter-spacing:.04em; margin-bottom:2mm}
.sheet .s-numline{display:flex; justify-content:flex-end; border-bottom:.6pt solid #000; padding-bottom:2mm; margin-bottom:5mm; font-size:12pt}
.sheet .s-to{font-weight:700; font-size:12.5pt; margin-bottom:1.5mm}
.sheet .s-place{font-weight:700; font-size:12.5pt; margin-bottom:6mm}
.sheet table{width:100%; border-collapse:collapse; font-size:12pt}
.sheet th, .sheet td{border:.6pt solid #000; padding:1.6mm 2mm}
.sheet th{font-weight:700; text-align:center}
.sheet td.c{text-align:center}
.sheet td.l{text-align:left; overflow-wrap:anywhere}
.sheet td.n{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap}
/* многостраничный счёт: шапка повторяется, строка не рвётся пополам */
.sheet thead{display:table-header-group}
.sheet tbody tr{page-break-inside:avoid; break-inside:avoid}
.sheet .s-total{
  display:flex; justify-content:space-between; align-items:baseline; margin-top:0;
  border:.6pt solid #000; border-top:none; padding:2mm 2mm; font-weight:700; font-size:13pt;
  page-break-before:avoid; break-before:avoid; page-break-inside:avoid; break-inside:avoid;
}
.sheet .s-words{margin-top:3mm; font-size:10.5pt; font-style:italic; page-break-inside:avoid; break-inside:avoid}
.sheet .s-sign{display:flex; justify-content:space-between; margin-top:14mm; font-size:11pt;
  page-break-inside:avoid; break-inside:avoid}
.sheet .s-sign div{width:44%; border-top:.6pt solid #000; padding-top:1.5mm}
/* шапку счёта не отрываем от таблицы */
.sheet .s-to, .sheet .s-place, .sheet .s-title, .sheet .s-numline{page-break-after:avoid; break-after:avoid}

@media print{
  @page{size:A4; margin:8mm}
  body{background:#fff}
  .app, .toasts, .palette, .modal{display:none !important}
  .print-area{display:block !important}
  .sheet{width:auto; margin:0; padding:0}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px}
  .nav{flex-direction:row; flex-wrap:wrap; flex:1}
  .nav a{padding:9px 11px}
  .nav-count{display:none}
  .new-invoice{margin:0; width:auto}
  .sidebar-foot{border:none; padding:0}
  .saved{display:none}
  .main{padding:18px 16px 50px}
  /* пальцем по телефону — цели покрупнее */
  .icon-btn{width:38px; height:38px}
  .lang-switch button{height:34px; padding:0 12px; font-size:12px}
  .btn{height:40px}
  .btn-sm{height:34px}
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   Экран входа
   ============================================================ */
.login-screen{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
  /* мягкое пятно фирменного цвета, чтобы страница не выглядела формой из ниоткуда */
  background-image:radial-gradient(120% 80% at 50% -10%, var(--brand-soft) 0%, transparent 60%);
}
.login-box{
  width:min(380px, 100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2); padding:30px 28px 24px; text-align:left;
}
.login-mark{display:flex; justify-content:center; margin-bottom:14px}
.login-mark svg{width:46px; height:46px}
.login-mark rect{fill:var(--brand)}
.login-mark path{stroke:var(--surface)}
.login-box h1{font-size:21px; text-align:center; letter-spacing:-.02em}
.login-sub{text-align:center; color:var(--muted); font-size:13px; margin:5px 0 22px}
.login-error{
  margin-top:12px; padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--danger-soft); color:var(--danger); font-size:13px; font-weight:500;
}
.login-foot{margin-top:16px; text-align:center; color:var(--muted); font-size:12px; line-height:1.5}
.login-box .btn-primary{height:42px; font-size:15px}

/* кто вошёл */
.whoami{
  display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 10px;
  background:var(--sunken); border-radius:var(--radius-sm);
}
.who-name{
  flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:900px){
  .whoami{margin:0; background:transparent; padding:0}
  .who-name{display:none}
}