:root{
    --bg:#EDF1F4;
    --surface:#FFFFFF;
    --surface-2:#F6F8FA;
    --border:#DCE3E9;
    --border-strong:#C1CCD4;
    --text:#1A222B;
    --text-muted:#5B6773;
    --text-faint:#8B96A2;
    --accent:#235D8B;
    --accent-hover:#1B4B71;
    --accent-soft:#E1EDF6;
    --accent-contrast:#FFFFFF;
    --success:#28916F;
    --success-soft:#E2F2EC;
    --warning:#BE6512;
    --warning-soft:#FAEAD7;
    --danger:#BC4038;
    --danger-soft:#FAE7E5;
    --shadow-sm:0 1px 2px rgba(20,30,40,.06);
    --shadow-md:0 8px 24px rgba(20,30,40,.10);
    --radius:10px;
    color-scheme:light;
  }

  /* Страница намеренно всегда светлая — не подстраивается под тёмную тему устройства */
  html{ color-scheme:light; }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:"Archivo", "Segoe UI", system-ui, sans-serif;
    text-wrap:balance;
    margin:0;
  }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
  a{ color:var(--accent); }
  ::selection{ background:var(--accent-soft); }

  /* ---------- shared field styles ---------- */
  label.field-label{
    display:block;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:6px;
  }
  input.field-input, select.field-input{
    width:100%;
    padding:9px 11px;
    border:1px solid var(--border-strong);
    border-radius:7px;
    background:var(--surface);
    color:var(--text);
    font:500 .92rem "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric:tabular-nums;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  input.field-input::placeholder{ color:var(--text-faint); font-family:"IBM Plex Sans", sans-serif; }
  input.field-input:hover, select.field-input:hover{ border-color:var(--text-faint); }
  input.field-input:focus, select.field-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  select.field-input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6773' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:32px; }
  .field-input.warn{ border-color:var(--warning); background:var(--warning-soft); }
  .field-hint{ font-size:.76rem; color:var(--text-faint); margin-top:5px; }
  .field-warn-note{ display:flex; gap:6px; align-items:flex-start; font-size:.78rem; color:var(--warning); margin-top:6px; line-height:1.35; }
  .field-warn-note svg{ flex:none; margin-top:1px; }

  /* ================= LOGIN SCREEN ================= */
  .login-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 24px;
    background:
      repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 34px),
      var(--bg);
  }
  .login-card{
    width:100%;
    max-width:392px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    padding:40px 36px 32px;
  }
  .login-logo{ display:block; height:34px; margin:0 auto 28px; }
  .login-card h1{ font-size:1.28rem; font-weight:700; text-align:center; }
  .login-sub{ text-align:center; color:var(--text-muted); font-size:.88rem; margin-top:6px; }
  .login-form{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
  .login-form input.field-input{ font-family:"IBM Plex Sans", sans-serif; font-weight:400; padding:11px 13px; }
  .login-actions{ margin-top:8px; }
  .btn-primary-full{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background:var(--accent);
    color:var(--accent-contrast);
    font:600 .94rem "IBM Plex Sans", sans-serif;
    cursor:pointer;
    transition:background .12s ease;
  }
  .btn-primary-full:hover{ background:var(--accent-hover); }
  .login-footnote{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--border);
    font-size:.78rem;
    color:var(--text-faint);
    text-align:center;
    line-height:1.5;
  }
  .login-brand-footer{ text-align:center; margin-top:22px; font-size:.74rem; color:var(--text-faint); letter-spacing:.03em; }


  /* ================= APP SHELL ================= */
  .app-shell{ background:var(--bg); min-height:100vh; padding-bottom:110px; }
  .topbar{
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:14px 28px;
  }
  .topbar-inner{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:20px;
  }
  .topbar-logo{ height:26px; flex:none; }
  .topbar-right{ display:flex; align-items:center; gap:14px; flex:none; }
  .user-chip{ display:flex; align-items:center; gap:10px; }
  .user-avatar{
    width:32px; height:32px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font:600 .78rem "Archivo", sans-serif;
  }
  .user-meta{ line-height:1.25; }
  .user-name{ font-size:.86rem; font-weight:600; }
  .user-role{ font-size:.74rem; color:var(--text-muted); }
  .logout-link{
    font-size:.82rem; font-weight:500; color:var(--text-muted);
    text-decoration:none; border-left:1px solid var(--border); padding-left:14px;
  }
  .logout-link:hover{ color:var(--danger); }

  /* ---- главная навигация по кабинету (в одной линии с шапкой) ---- */
  .main-nav-inline{ display:flex; align-items:stretch; gap:4px; flex:1; overflow-x:auto; }
  .nav-tab{
    display:flex; align-items:center;
    padding:0 14px;
    border:none; border-bottom:2px solid transparent;
    background:transparent;
    font:600 .86rem "IBM Plex Sans", sans-serif;
    color:var(--text-muted);
    cursor:pointer;
    white-space:nowrap;
  }
  .nav-tab:hover{ color:var(--text); }
  .nav-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }

  /* ---- под-вкладки внутри раздела ---- */
  .sub-tabs{ display:flex; gap:8px; margin-bottom:22px; }
  .sub-tab{
    padding:8px 16px;
    border:1px solid var(--border-strong);
    border-radius:999px;
    background:var(--surface);
    font:600 .82rem "IBM Plex Sans", sans-serif;
    color:var(--text-muted);
    cursor:pointer;
  }
  .sub-tab:hover{ border-color:var(--accent); color:var(--accent); }
  .sub-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }

  /* ---- заглушки разделов в разработке ---- */
  .stub-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:56px 32px; text-align:center; color:var(--text-muted);
  }
  .stub-card .stub-icon{ font-size:2rem; margin-bottom:12px; }
  .stub-card h2{ font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:6px; }
  .stub-card p{ font-size:.88rem; }

  .content{ max-width:1180px; margin:0 auto; padding:28px 28px 0; }

  /* stepper */
  .stepper{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
  .step{ display:flex; align-items:center; gap:9px; }
  .step-dot{
    width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font:600 .72rem "IBM Plex Mono", monospace;
    flex:none;
  }
  .step.done .step-dot{ background:var(--success); color:#fff; }
  .step.current .step-dot{ background:var(--accent); color:var(--accent-contrast); }
  .step.upcoming .step-dot{ background:var(--surface-2); color:var(--text-faint); border:1px solid var(--border-strong); }
  .step-label{ font-size:.85rem; font-weight:600; color:var(--text-muted); }
  .step.current .step-label{ color:var(--text); }
  .step.upcoming .step-label{ color:var(--text-faint); }
  .step-line{ width:36px; height:1px; background:var(--border-strong); }

  h2.section-title{ font-size:1.05rem; font-weight:700; }
  .section-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .section-num{ color:var(--text-faint); font:600 .78rem "IBM Plex Mono", monospace; }

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:22px 24px;
  }
  .stack{ display:flex; flex-direction:column; gap:20px; margin-bottom:20px; }

  /* source card */
  .std-mode-toggle{
    display:flex; align-items:center; gap:8px;
    font-size:.84rem; font-weight:500; color:var(--text-muted);
    cursor:pointer; margin:-6px 0 16px;
  }
  .std-mode-toggle input{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
  .std-mode-toggle:hover{ color:var(--text); }
  .source-grid{ display:grid; grid-template-columns:230px 1fr; gap:24px; }
  .file-thumb{
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-2);
    padding:14px;
    display:flex; flex-direction:column; gap:10px;
  }
  .file-thumb-preview{
    aspect-ratio:3/4;
    border-radius:6px;
    background:linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    border:1px dashed var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-faint);
  }
  .file-name{ font-size:.78rem; font-weight:600; word-break:break-all; }
  .file-meta{ font-size:.72rem; color:var(--text-faint); display:flex; justify-content:space-between; }
  .file-view-link{ font-size:.76rem; font-weight:600; text-decoration:none; }
  .caption-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }
  .caption-grid .span-2{ grid-column:1 / -1; }

  .field-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
  .field-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }

  .table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:8px; }

  /* ---- список техпаспортов ---- */
  .tp-list-table{ width:100%; border-collapse:collapse; }
  .tp-list-table th{
    text-align:left; padding:10px 14px; background:var(--surface-2);
    font:600 .7rem "IBM Plex Mono", monospace; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap;
  }
  .tp-list-table td{ padding:11px 14px; border-bottom:1px solid var(--border); font-size:.86rem; vertical-align:middle; }
  .tp-list-table tr:last-child td{ border-bottom:none; }
  .tp-list-table tr:hover td{ background:var(--surface-2); }
  .tp-list-date{ font-family:"IBM Plex Mono", monospace; color:var(--text-muted); white-space:nowrap; }
  .tp-list-num{ font-family:"IBM Plex Mono", monospace; font-weight:600; white-space:nowrap; }
  .tp-list-actions{ display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }
  .tp-list-btn{
    padding:6px 12px; border-radius:6px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--text); font:600 .78rem "IBM Plex Sans", sans-serif; cursor:pointer;
  }
  .tp-list-btn:hover{ background:var(--surface-2); }
  .tp-list-btn:disabled{ opacity:.4; cursor:not-allowed; }
  .tp-list-btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .tp-list-btn.primary:hover{ background:var(--accent-hover); }
  .tp-list-empty{ text-align:center; padding:40px; color:var(--text-faint); font-size:.88rem; }
  .tp-pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
  .tp-page-info{ font-size:.82rem; color:var(--text-muted); font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; }
  table.data-table{ width:100%; border-collapse:collapse; min-width:560px; }
  table.data-table th{
    background:var(--surface-2);
    text-align:left;
    font:600 .7rem "IBM Plex Mono", monospace;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  table.data-table td{
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
  }
  table.data-table tr:last-child td{ border-bottom:none; }
  table.data-table td input.field-input{ padding:7px 9px; font-size:.86rem; }
  table.data-table td.label-cell{ font-size:.84rem; font-weight:500; color:var(--text-muted); white-space:nowrap; }
  table.data-table td.unit-cell{ font-size:.78rem; color:var(--text-faint); white-space:nowrap; }

  .chem-table th, .chem-table td{ text-align:center; min-width:58px; }
  .chem-table td.label-cell{ text-align:left; }
  .chem-table input.field-input{ text-align:center; min-width:50px; padding:7px 4px; font-size:.82rem; }
  .chem-group-label{ font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); margin:16px 0 6px; }
  .chem-group-label:first-of-type{ margin-top:0; }

  .btn-add-cell{
    width:26px; height:26px;
    border-radius:6px;
    border:1px dashed var(--border-strong);
    background:var(--surface);
    color:var(--text-muted);
    font:600 1rem "IBM Plex Sans", sans-serif;
    line-height:1;
    cursor:pointer;
  }
  .btn-add-cell:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .btn-add-row{
    margin-top:12px;
    padding:8px 14px;
    border-radius:7px;
    border:1px dashed var(--border-strong);
    background:transparent;
    color:var(--text-muted);
    font:600 .82rem "IBM Plex Sans", sans-serif;
    cursor:pointer;
  }
  .btn-add-row:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

  .btn-remove-col{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; margin-left:4px; padding:0;
    border:none; background:none;
    color:var(--text-faint);
    font-size:.78em; line-height:1;
    cursor:pointer; vertical-align:middle;
  }
  .btn-remove-col:hover{ color:var(--danger); }

  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 11px; border-radius:999px;
    font-size:.78rem; font-weight:600;
  }
  .badge.success{ background:var(--success-soft); color:var(--success); }
  .badge.warning{ background:var(--warning-soft); color:var(--warning); }
  .badge.danger{ background:var(--danger-soft); color:var(--danger); }
  .badge svg{ flex:none; }

  /* bottom action bar */
  .action-bar{
    position:sticky; bottom:0; left:0; right:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -6px 20px rgba(20,30,40,.06);
  }
  .action-bar-inner{
    max-width:1180px; margin:0 auto;
    padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .action-status{ display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--text-muted); }
  .action-buttons{ display:flex; align-items:center; gap:10px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:8px;
    font:600 .88rem "IBM Plex Sans", sans-serif;
    cursor:pointer;
    border:1px solid transparent;
    transition:background .12s ease, border-color .12s ease;
  }
  .btn-secondary{ background:var(--surface); border-color:var(--border-strong); color:var(--text); }
  .btn-secondary:hover{ background:var(--surface-2); }
  .btn-primary{ background:var(--accent); color:var(--accent-contrast); }
  .btn-primary:hover{ background:var(--accent-hover); }
  .btn:disabled{ opacity:.55; cursor:not-allowed; }
  .btn-spinner{
    display:inline-block; width:14px; height:14px; flex:none;
    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-spinner{ animation:none; opacity:.6; }
  }

  /* ================= LIVE PREVIEW (printable document) ================= */
  .preview-section{ background:transparent; border:none; box-shadow:none; padding:0; }
  .preview-frame{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
  }
  .preview-live-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.74rem; font-weight:600; color:var(--success);
  }
  .preview-live-dot{
    width:7px; height:7px; border-radius:50%; background:var(--success);
    box-shadow:0 0 0 3px var(--success-soft);
  }
  .btn-print{
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 13px; border-radius:7px;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text);
    font:600 .8rem "IBM Plex Sans", sans-serif;
    cursor:pointer;
  }
  .btn-print:hover{ background:var(--surface-2); }

  .doc-sheet{
    max-width:960px;
    margin:0 auto;
    background:#FFFFFF;
    color:#1A222B;
    border-radius:4px;
    box-shadow:var(--shadow-md);
    padding:28px 32px 34px;
    font-size:11.5px;
  }
  .doc-table-wrap{ overflow-x:auto; }
  .doc-header-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
  .doc-header-table td{ border:1px solid #1A222B; vertical-align:middle; padding:8px 12px; }
  .doc-logo-cell{ width:19%; text-align:center; }
  .doc-logo-cell img{ height:34px; }
  .doc-logo-sub{ font-size:8.5px; letter-spacing:.08em; color:#5B6773; margin-top:3px; }
  .doc-req-cell{ width:51%; line-height:1.55; }
  .doc-req-name{ font-weight:700; margin-bottom:2px; }
  .doc-title-cell{ width:30%; text-align:center; }
  .doc-title-main{ font-family:"Archivo","Segoe UI",sans-serif; font-weight:700; font-size:13px; }
  .doc-title-num{ font-family:"Archivo","Segoe UI",sans-serif; font-weight:700; font-size:15px; margin-top:4px; }
  .doc-title-date{ margin-top:4px; }
  .doc-info-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px 20px; margin-bottom:16px; }
  .doc-info-grid div{ display:flex; gap:5px; }
  .doc-info-grid span{ color:#5B6773; flex:none; }
  .doc-info-grid b{ font-weight:600; }
  .doc-h2{ font-family:"Archivo","Segoe UI",sans-serif; font-size:12px; margin:16px 0 6px; text-align:center; letter-spacing:.02em; color:#1A222B; }
  table.doc-table{ width:100%; border-collapse:collapse; font-size:10px; }
  table.doc-table th, table.doc-table td{ border:1px solid #1A222B; padding:4px 5px; text-align:center; font-family:"IBM Plex Mono",monospace; }
  table.doc-table td.doc-label-cell{ text-align:left; font-family:"IBM Plex Sans",sans-serif; white-space:nowrap; }
  table.doc-table .doc-req-row td{ font-style:italic; font-family:"IBM Plex Sans",sans-serif; background:#F6F8FA; }
  .doc-caption{ text-align:center; font-style:italic; font-size:11px; margin:8px 0 4px; }
  .doc-conclusion{ text-align:center; font-style:italic; font-weight:700; font-size:11.5px; margin:18px 0; }
  .doc-sign{ margin-top:30px; font-size:11.5px; }

  @media print{
    body *{ visibility:hidden; }
    .doc-sheet, .doc-sheet *{ visibility:visible; }
    .doc-sheet{ position:absolute; top:0; left:0; box-shadow:none; margin:0; width:100%; }
  }

  @media (max-width:760px){
    .source-grid{ grid-template-columns:1fr; }
    .field-grid, .field-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
    .caption-grid{ grid-template-columns:1fr; }
    .action-bar-inner{ flex-direction:column; align-items:stretch; }
    .action-buttons{ justify-content:stretch; flex-wrap:wrap; }
    .btn{ flex:1; justify-content:center; }
    .doc-sheet{ padding:20px 14px; }
    .doc-info-grid{ grid-template-columns:1fr; }
    .doc-header-table, .doc-header-table tbody, .doc-header-table tr{ display:block; }
    .doc-header-table td{ display:block; width:auto !important; }
  }