@font-face { font-family:Manrope; src:url('./fonts/manrope.woff2') format('woff2'); font-style:normal; font-weight:400 700; font-display:optional; }
:root {
  --accent:#f28b24; --accent-hover:#df791b; --accent-soft:#fff1e5; --accent-ink:#9a430e;
  --ink:#181818; --muted:#707070; --line:#e3e3e3; --paper:#fff; --bg:#f5f5f5;
  --warn:#a44834; --ok:var(--ink); --base:var(--accent-ink); --y:var(--accent-soft); --k:var(--ink);
  --motion:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; scrollbar-gutter:stable; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope,system-ui,sans-serif; font-size:14px; line-height:20px; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,[contenteditable] { -webkit-tap-highlight-color:transparent; }
a { color:var(--accent-ink); text-underline-offset:4px; }
button,a { transition:background-color 300ms var(--motion),color 300ms var(--motion),border-color 300ms var(--motion),transform 500ms var(--motion); }
button:enabled:active,.btn:active { transform:translateY(1px); }
button:disabled,.btn:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input:focus,select:focus,textarea:focus,[contenteditable]:focus { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:#ffe0bf; color:var(--ink); }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:30; background:var(--accent); color:var(--ink); padding:12px 24px; border-radius:8px; }
.skip-link:focus { top:16px; }

/* Navigation, data and available actions continue to come from the API. */
body > .app-header { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px 24px; min-height:84px; background:var(--ink); color:white; padding:24px max(32px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--ink); }
/* Match text rasterization on pages with the editor's composited toolbar. */
.app-header { filter:opacity(1); }
.brand { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; color:white; text-decoration:none; font-size:24px; line-height:32px; letter-spacing:-1px; font-weight:700; }
.brand svg { width:32px; height:32px; color:var(--accent); }
.brand svg path { fill:var(--ink); }
.brand-dot { color:var(--accent); }
.signature-preview { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:16px 0; }
.signature-preview img { max-width:240px; max-height:100px; object-fit:contain; background:white; border:1px solid var(--line); padding:8px; }
.section-details > summary { cursor:pointer; font-size:18px; line-height:24px; font-weight:600; }
.section-details[open] > summary { margin-bottom:24px; }
.markup-cell { text-align:center; min-width:144px; }
#tbl .markup-cell input[type=checkbox],.preview-table .markup-cell input[type=checkbox] { display:inline-block; width:18px; height:18px; min-width:18px; min-height:18px; padding:0; margin:0; vertical-align:middle; }
.unit-note { font-size:12px; line-height:16px; color:var(--accent-ink); min-width:144px; white-space:normal; }
.unit-confirmation { min-width:160px; font-size:12px; line-height:16px; white-space:normal; }
.review-comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:24px; }
.review-comparison table { width:100%; table-layout:fixed; }
.review-comparison td { overflow-wrap:anywhere; }
.review-image { display:block; max-width:100%; max-height:240px; margin-top:16px; object-fit:contain; }
.review-comparison del { background:#fee2e2; color:#991b1b; text-decoration:line-through; }
.review-comparison ins { background:#dcfce7; color:#166534; text-decoration:none; }
.review-image-removed { outline:3px solid #b91c1c; }
.review-image-added { outline:3px solid #15803d; }
.language-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; max-width:1440px; box-sizing:border-box; margin:auto; padding:8px 32px; font-size:12px; color:var(--muted); }
.language-toolbar select { width:auto; min-height:32px; padding:4px 8px; font-size:12px; }
.mail-notifications { margin:16px 32px 0; padding:12px 16px; border:1px solid var(--accent); border-radius:8px; background:var(--accent-soft); overflow-wrap:anywhere; }
.mail-notifications summary { cursor:pointer; font-weight:600; }
.mail-notifications ul { padding-left:20px; }
@media (max-width:700px) { .mail-notifications { margin:12px 16px 0; } }
@media (max-width:700px) { .language-toolbar { padding:8px 16px; } }
.workspace-label { font-size:18px; line-height:24px; font-weight:600; text-align:center; letter-spacing:-.3px; color:#f5f5f5; }
header .sub:empty { display:none; }
header .sub { grid-column:1 / -1; grid-row:2; color:#bdbdbd; font-size:12px; line-height:16px; }
#hUser { display:flex; justify-self:end; align-items:center; gap:16px; min-width:0; font-size:12px; line-height:16px; color:#e5e5e5; }
#hUser > span { display:block; min-width:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hUser .hbtn { flex-shrink:0; }
header .hbtn { font:inherit; font-size:12px; line-height:16px; font-weight:600; color:#e5e5e5; background:transparent; border:1px solid #555; border-radius:6px; padding:8px 12px; cursor:pointer; text-decoration:none; white-space:nowrap; }
header .hbtn:hover { color:white; background:#313131; border-color:#808080; }
.app-nav { display:flex; flex-wrap:wrap; align-items:stretch; gap:0 24px; padding:0 max(32px,calc((100vw - 1440px)/2)); background:var(--paper); border-bottom:1px solid var(--line); }
.app-nav a { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:56px; color:var(--muted); padding:16px 0; font-size:14px; line-height:20px; font-weight:500; text-decoration:none; white-space:nowrap; }
.app-nav a::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--accent); border-radius:2px 2px 0 0; transform:scaleX(0); transition:transform 500ms var(--motion); }
.app-nav a:hover { color:var(--ink); }
.app-nav a:hover .icon,.app-nav a[aria-current=page] .icon { color:var(--accent-ink); }
.app-nav a[aria-current=page] { color:var(--ink); }
.app-nav a[aria-current=page]::after { transform:scaleX(1); }
.app-nav .icon { width:18px; height:18px; }
.icon { display:inline-block; width:16px; height:16px; flex-shrink:0; fill:currentColor; vertical-align:middle; }
header .hbtn { display:inline-flex; align-items:center; gap:8px; }
.specs-toggle .icon { transition:transform 300ms var(--motion); }
.specs-toggle[aria-expanded=true] .icon { transform:rotate(90deg); }
main { max-width:1440px; padding:0 32px; margin:40px auto 80px; min-width:0; }
h1,h2,h3,h4 { text-wrap:balance; font-weight:600; }
h1 { font-size:36px; line-height:40px; letter-spacing:-1px; margin:0 0 12px; }
h2 { font-size:18px; line-height:28px; letter-spacing:-.25px; margin:0 0 16px; }
p { margin:0 0 16px; text-wrap:pretty; }
.eyebrow { font-size:12px; line-height:16px; font-weight:600; letter-spacing:1px; color:var(--muted); margin:0 0 12px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.page-heading p:not(.eyebrow) { color:var(--muted); margin:0; max-width:65ch; font-size:14px; line-height:24px; }
.page-heading .btn { flex-shrink:0; }
.document-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.document-heading h1 { margin:0; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.back-link:hover { color:var(--accent-ink); }
.muted,.note,.hint { color:var(--muted); }
.note,.hint { font-size:12px; line-height:20px; }
.note { margin-top:8px; }
section,.panel { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:24px 32px 32px; margin-bottom:24px; min-width:0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.section-heading h2 { margin:0; }
.section-heading p { margin:4px 0 0; font-size:12px; line-height:20px; }
.section-marker { font-size:12px; line-height:16px; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:4px; white-space:nowrap; }
.row,.form-actions,.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn,main button,.bar button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; min-height:40px; background:white; border:1px solid #d0d0d0; border-radius:6px; color:var(--ink); font:inherit; font-size:14px; line-height:24px; font-weight:600; text-decoration:none; cursor:pointer; }
.btn:hover,main button:hover,.bar button:hover { background:var(--bg); border-color:#ababab; }
.btn.primary,.btn-primary,main button.primary,.bar button.primary { color:var(--ink); background:var(--accent); border-color:var(--accent); }
.btn.primary:hover,.btn-primary:hover,main button.primary:hover,.bar button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.danger { color:var(--warn); border-color:#e5c6bb; }
.btn.ok { color:var(--accent-ink); border-color:#edcfb6; }
.btn.small { min-height:32px; padding:4px 8px; font-size:12px; line-height:20px; }
.form-actions { margin-top:24px; }
main input,main select,main textarea { border:1px solid #d0d0d0; color:var(--ink); background:white; border-radius:6px; padding:8px 12px; min-height:40px; font-size:14px; line-height:24px; max-width:100%; }
input::placeholder,textarea::placeholder { color:#808080; opacity:1; }
input[type=checkbox] { accent-color:var(--accent-ink); min-height:auto; }
.field,.fld label,#manualMessage label,#detail label { display:block; font-size:12px; line-height:20px; color:var(--muted); margin:0 0 8px; font-weight:500; }
.field input,.field select,.field textarea,#manualMessage input,#manualMessage textarea,#detail input { display:block; width:100%; margin:8px 0 0; }
.form-grid,.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.field textarea { min-height:120px; resize:vertical; }
.fld { min-width:0; }
.fld input,.fld textarea { width:100%; }
.fld div { font-size:14px; line-height:24px; }
.grid > .btn { align-self:end; }
#info .fld,#sourceFiles { overflow-wrap:anywhere; }
#info .fld { padding-bottom:16px; border-bottom:1px solid var(--line); }
#info .fld label { margin:0 0 4px; }
#info .fld div { font-weight:500; }

/* Registry: counts, client names and the next action. */
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0 0 32px; background:#ededed; border-radius:12px; padding:24px 8px; }
.cards .card { padding:0 24px; min-width:0; border:0; border-right:1px solid #d6d6d6; border-radius:0; background:transparent; }
.cards .card:last-child { border:0; }
.cards .card span { display:block; color:var(--muted); font-size:12px; line-height:20px; font-weight:500; }
.cards .card b { display:block; font-size:36px; line-height:40px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; margin:12px 0 8px; }
.cards .card.attn b { color:var(--accent-ink); }
.cards .card small { font-size:12px; line-height:16px; color:var(--muted); }
.registry-panel { padding-bottom:16px; }
.tabs { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--line); margin:0 0 24px; }
.tabs button { background:none; border:0; border-radius:0; padding:8px 0 16px; margin-bottom:-1px; color:var(--muted); }
.tabs button:hover { background:transparent; color:var(--accent-ink); }
.tabs button[aria-pressed=true], .tabs button[aria-selected=true] { color:var(--accent-ink); border-bottom:2px solid var(--accent); }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; }
.filters input { flex:1; min-width:240px; }
.filters select { background:var(--bg); font-size:12px; line-height:24px; }
.filters .note { margin:0; }
.table-scroll { overflow:auto; max-width:100%; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c2c2c2 transparent; }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px; }
th { background:#f4f4f4; color:var(--muted); padding:12px; text-align:left; font-size:12px; line-height:16px; font-weight:500; border:0; border-bottom:1px solid var(--line); white-space:nowrap; }
td { border:0; border-bottom:1px solid var(--line); padding:16px 12px; vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fafafa; }
td a { color:var(--accent-ink); text-decoration:none; }
td a:hover { text-decoration:underline; }
.quote-title { display:block; font-weight:600; }
.quote-subtitle { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:16px; }
.num,.mono,.kpno { font-variant-numeric:tabular-nums; white-space:nowrap; }
.num { text-align:right; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; color:#666666; background:#eeeeee; font-size:12px; line-height:16px; font-weight:600; white-space:nowrap; }
.badge::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.b-draft { background:#f5efdd; color:#8a6b2e; }
.b-approved { background:#eeeeee; color:#555555; }
.b-sent,.b-won { background:#fff1e5; color:#9a430e; }
.b-revision { background:#f7ebdc; color:#996837; }
.b-lost { background:#f7e9e4; color:#a44834; }
.b-cancelled,.b-reg { background:#efefef; color:#707070; }
.age { color:var(--warn); font-size:12px; line-height:16px; }
#tbStore td:nth-child(2) { min-width:192px; max-width:240px; }
#tbStore td:nth-child(3) { min-width:128px; max-width:176px; overflow-wrap:anywhere; font-size:12px; line-height:20px; color:var(--muted); }
#tbStore td:nth-child(4) { max-width:128px; font-size:12px; line-height:20px; }
#tbStore td:nth-child(5) { font-weight:600; }
#tbStore td:last-child .btn { border:0; color:var(--accent-ink); background:var(--accent-soft); }
.empty { padding:48px 24px 64px; text-align:center; color:var(--muted); }
.empty > .icon { display:block; width:40px; height:40px; color:var(--accent-ink); margin:0 auto 16px; }
.alert,.err { border:1px solid #e6dbc0; border-radius:8px; background:#faf5e8; color:#80612e; padding:16px 24px; margin-bottom:24px; font-size:12px; line-height:20px; overflow-wrap:anywhere; }
.alert.error,.err { border-color:#ebd2c8; background:#fbefea; color:var(--warn); }
.alert.info { border-color:#efd3bb; background:var(--accent-soft); color:var(--accent-ink); }
.alert:empty { display:none; }
.alert ul { padding-left:24px; margin:0; }

/* Import, inbox and profile. */
.steps { display:flex; list-style:none; gap:32px; padding:0; margin:0 0 32px; color:var(--muted); }
.steps li { display:flex; gap:8px; align-items:center; font-size:12px; line-height:20px; }
.steps li > span:first-child { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; font-variant-numeric:tabular-nums; }
.steps li[aria-current] { color:var(--accent-ink); font-weight:600; }
.steps li[aria-current] > span:first-child { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.upload-box { padding:40px 32px 48px; border:1px dashed #c1b3a7; border-radius:8px; background:#fafafa; text-align:center; transition:background-color 300ms var(--motion),border-color 300ms var(--motion); }
.upload-box.over { border-color:var(--accent-ink); background:var(--accent-soft); }
.upload-icon { display:block; width:48px; height:48px; padding:8px; margin:0 auto 24px; color:var(--accent-ink); background:var(--accent-soft); border-radius:8px; }
.upload-box strong { font-size:20px; line-height:28px; font-weight:600; }
.upload-box p { max-width:65ch; margin-left:auto; margin-right:auto; }
.upload-box .field { max-width:480px; margin:24px auto; text-align:left; }
.upload-box input[type=file] { width:100%; background:white; font-size:12px; }
input::file-selector-button { background:var(--accent-soft); border:0; border-radius:4px; color:var(--accent-ink); padding:4px 8px; margin-right:8px; font:inherit; cursor:pointer; }
.upload-box > .muted { margin-left:8px; font-size:12px; }
.preview-table { max-height:480px; }
.preview-table th { position:sticky; top:0; z-index:1; }
#manualMessage { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
#manualMessage label { margin:0; }
#manualMessage label:has(#mailText),#senderHint,#manualMessage .form-actions { grid-column:1/-1; }
#senderHint { grid-row:2; margin:-8px 0 0; max-width:90ch; }
#mailText { min-height:240px; resize:vertical; }
#manualMessage .form-actions { margin-top:0; }
#result { white-space:pre-wrap; margin:16px 0 0; color:var(--accent-ink); }
#detail pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; padding:24px; background:var(--bg); border-radius:8px; }
#messages:empty::after { content:'Входящих писем пока нет. Добавьте запрос через «Создать вручную».'; display:table-cell; padding:32px 12px; color:var(--muted); font-size:12px; }
.profile-page main { max-width:1120px; }
.profile-summary { display:flex; gap:16px; align-items:center; padding-bottom:24px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.profile-summary strong { display:block; font-size:20px; line-height:28px; margin-bottom:4px; font-weight:600; }
.profile-summary .muted { font-size:12px; line-height:20px; }
.avatar { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; background:var(--accent-soft); color:var(--accent-ink); font-size:24px; line-height:32px; font-weight:600; border-radius:12px; }
.subsection-title { border-top:1px solid var(--line); padding-top:24px; margin-top:32px; }
.delivery { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.delivery p { margin:0; }
.hist { font-size:12px; line-height:24px; overflow-wrap:anywhere; }
.hist > div { padding:12px 0; border-bottom:1px solid var(--line); }
.hist > div:last-child { border:0; }
.hist .ev { font-weight:600; }
.status-msg { margin-top:12px; font-size:14px; line-height:20px; }
.status-msg:empty { margin:0; }
.status-msg.done { color:var(--ok); }
.actions-panel:has(#actions:empty):has(#msg:empty) { display:none; }
#lossBox { display:none; padding:24px; margin-top:16px; background:#fbefea; border:1px solid #ebd2c8; border-radius:8px; }
#lossBox select,#lossBox input { width:100%; max-width:480px; }

/* Editor: all columns remain available inside the scrollable specification. */
.editor-page main { margin-bottom:160px; }
.editor-page .page-heading { align-items:flex-start; }
.editor-page .grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px 24px; }
.editor-page .fld label { margin:0 0 4px; }
.editor-page .fld textarea { resize:vertical; }
.specification-panel .section-heading { margin-bottom:8px; }
.table-hint { margin:0 0 24px; }
#tbl { min-width:1400px; }
#tbl td,#tbl th { padding:12px 8px; }
#tbl td[contenteditable] { min-width:80px; max-width:192px; overflow-wrap:anywhere; cursor:text; }
#tbl td[contenteditable]:hover { background:var(--accent-soft); }
#tbl td input { width:96px; min-height:32px; padding:4px 8px; text-align:right; font-variant-numeric:tabular-nums; }
#tbl td input.bad { background:#fbefea; border-color:var(--warn); }
tr.onreq td.num.amount::after { content:'По запросу'; display:block; color:var(--warn); font-size:12px; line-height:16px; }
.totals { width:360px; max-width:100%; margin:24px 0 0 auto; font-size:14px; line-height:24px; font-variant-numeric:tabular-nums; }
.totals > div { display:flex; justify-content:space-between; gap:16px; padding:8px 16px; }
.totals .grand { margin-top:8px; padding:16px; background:var(--accent-soft); color:var(--accent-ink); border-radius:6px; font-weight:600; }
.imgcell { min-width:128px; width:128px; text-align:center; }
.imgcell img { display:block; max-width:96px; max-height:80px; object-fit:contain; margin:4px auto 8px; }
.imgcell .src { display:inline-block; padding:2px 4px; color:var(--muted); font-size:12px; line-height:16px; background:var(--bg); border-radius:4px; }
.imgcell .src.mgr { color:var(--accent-ink); background:var(--accent-soft); }
.drop { border:1px dashed #bdbdbd; border-radius:4px; padding:8px; font-size:12px; line-height:16px; color:var(--muted); cursor:pointer; }
.drop.over { background:var(--accent-soft); border-color:var(--accent-ink); }
tr.specs-row > td { background:var(--bg); padding:24px; }
.specbox { display:flex; flex-wrap:wrap; gap:24px; }
.specbox h4 { margin:0 0 12px; font-size:14px; line-height:20px; }
table.spec { width:auto; min-width:480px; font-size:12px; line-height:20px; }
table.spec th { background:var(--accent-soft); }
table.spec td { min-width:128px; }
.p1toggle { white-space:nowrap; }
.p1toggle.filled { color:var(--accent-ink); font-weight:600; }
#resv { display:none; }
#acList { position:absolute; z-index:20; background:white; border:1px solid var(--line); border-radius:8px; padding:8px; box-shadow:0 8px 32px #18181826; max-width:min(640px,calc(100vw - 32px)); min-width:240px; display:none; font-size:12px; line-height:20px; }
#acList .it { display:flex; gap:8px; padding:8px; cursor:pointer; }
#acList .it:hover,#acList .it.sel { background:var(--accent-soft); }
#acList .br { color:var(--accent-ink); }
#acList .nm { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar { position:fixed; bottom:0; left:0; right:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; z-index:10; background:#fffffff2; backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:16px max(32px,calc((100vw - 1440px)/2)); }
.bar .status { margin-left:auto; color:var(--muted); font-size:12px; line-height:20px; text-align:right; max-width:320px; overflow-wrap:anywhere; }
.bar .status.err { color:var(--warn); }
.bar .status.done { color:var(--ok); }

/* Sign in illustration uses the same document shapes as the workspace. */
.login-page body { min-height:100dvh; display:flex; flex-direction:column; }
.login-layout { display:grid; grid-template-columns:1.15fr 1fr; width:100%; max-width:1440px; flex:1; margin:0 auto; padding:24px 32px 48px; align-items:center; gap:80px; }
.login-intro { position:relative; background:#efefef; padding:48px; border-radius:16px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.login-intro h1 { font-size:48px; line-height:1; letter-spacing:-2px; margin:8px 0 24px; }
.intro-copy { color:var(--muted); font-size:16px; line-height:28px; max-width:40ch; }
.document-visual { position:relative; width:100%; max-width:400px; height:288px; margin:24px auto 32px; }
.document-back { position:absolute; width:72%; height:240px; top:16px; left:16%; background:#f7d0a8; border-radius:8px; transform:rotate(8deg); }
.document-front { position:absolute; top:0; left:8%; width:80%; padding:24px; background:#fff; border-radius:8px; transform:rotate(-4deg); box-shadow:0 16px 40px #18181814; }
.document-top { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; line-height:16px; font-weight:600; }
.visual-logo { font-size:30px; line-height:36px; color:var(--accent-ink); }
.visual-line { width:40%; height:4px; margin-top:8px; background:#e5e5e5; border-radius:2px; }
.visual-line.long { width:64%; margin-top:24px; }
.visual-table { display:grid; grid-template-columns:1fr 48px; gap:12px; font-size:12px; line-height:16px; color:var(--muted); margin-top:24px; }
.visual-table i { display:block; height:4px; background:#eeeeee; border-radius:2px; }
.visual-total { display:flex; justify-content:space-between; background:var(--accent-soft); color:var(--accent-ink); padding:12px; border-radius:4px; margin-top:24px; font-weight:600; }
.document-check { position:absolute; bottom:0; right:0; display:flex; align-items:center; gap:8px; background:var(--accent); color:var(--ink); padding:12px 16px; border-radius:8px; font-size:12px; line-height:20px; transform:rotate(2deg); }
.document-check > span:not([data-i18n]) { font-size:20px; line-height:28px; }
.intro-footer { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:12px; line-height:20px; margin-top:auto; padding-top:24px; }
.login-form-wrap { width:100%; max-width:400px; margin:0 auto; }
.box { border:0; background:transparent; width:100%; }
.box h2 { font-size:30px; line-height:36px; letter-spacing:-1px; margin-bottom:12px; }
.box > .muted { margin-bottom:32px; }
.box label { display:block; font-size:12px; line-height:20px; font-weight:500; margin:24px 0 8px; }
.box input { width:100%; min-height:48px; background:var(--paper); }
.box button { width:100%; min-height:48px; margin-top:32px; justify-content:space-between; font-size:16px; }
.box .note { padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
.box .err { display:none; margin-top:16px; }
.login-access { margin-top:40px; color:var(--muted); font-size:12px; line-height:20px; }
.login-page footer { color:var(--muted); text-align:center; padding:0 24px 24px; font-size:12px; line-height:20px; }
@media (min-width:1600px) { .editor-page main { max-width:1800px; } }
@media (max-width:1100px) {
  .page-heading { align-items:flex-start; }
  h1 { font-size:30px; line-height:36px; }
  .login-layout { gap:40px; }
  .login-intro { padding:32px; }
  .login-intro h1 { font-size:36px; line-height:40px; letter-spacing:-1px; }
  .bar .status { flex-basis:100%; max-width:none; text-align:left; }
}
@media (max-width:700px) {
  body > .app-header { grid-template-columns:minmax(112px,1fr) minmax(0,1fr); gap:12px; min-height:68px; padding:16px; }
  .brand { font-size:20px; line-height:28px; }
  .brand svg { width:32px; height:32px; }
  .workspace-label { display:block; grid-column:1 / -1; grid-row:2; font-size:16px; line-height:24px; }
  header .sub { grid-row:3; }
  #hUser { gap:8px; max-width:100%; }
  #hUser > span { max-width:112px; font-size:12px; }
  header .hbtn { padding:8px; }
  .app-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0 16px; }
  .app-nav a { flex-direction:column; justify-content:center; gap:4px; min-height:72px; min-width:0; padding:12px 4px; font-size:12px; line-height:16px; white-space:normal; text-align:center; overflow-wrap:anywhere; }
  .app-nav a::after { left:8px; right:8px; }
  main { padding:0 16px; margin:24px auto 48px; }
  h1 { font-size:24px; line-height:32px; letter-spacing:-.5px; }
  h2 { font-size:18px; line-height:28px; }
  .eyebrow { font-size:12px; line-height:16px; letter-spacing:0; }
  .page-heading { flex-direction:column; gap:16px; margin-bottom:24px; }
  .page-heading > .btn { width:100%; }
  section,.panel { padding:24px 16px; border-radius:8px; margin-bottom:16px; }
  .section-heading { gap:8px; align-items:flex-start; margin-bottom:16px; }
  .section-marker { white-space:normal; text-align:right; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; margin-bottom:24px; padding:24px 0; border-radius:8px; }
  .cards .card { padding:0 16px; }
  .cards .card:nth-child(2) { border:0; }
  .cards .card b { font-size:30px; line-height:36px; margin:8px 0 4px; }
  .cards .card small { display:none; }
  .tabs { gap:16px; flex-wrap:nowrap; }
  .tabs button { font-size:12px; line-height:20px; text-align:left; }
  .filters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .filters input { grid-row:1; grid-column:1/-1; min-width:0; width:100%; }
  .filters select { min-width:0; width:100%; }
  .filters .note { grid-column:1/-1; }
  .registry-panel > .table-scroll > table { display:block; }
  .registry-panel thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #tbStore { display:block; }
  #tbStore tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:24px 0; border-bottom:1px solid var(--line); }
  #tbStore tr:last-child { border:0; }
  #tbStore td { display:block; min-width:0; max-width:none; padding:0; border:0; overflow-wrap:anywhere; }
  #tbStore tr:hover td { background:transparent; }
  #tbStore td[data-label]::before { content:attr(data-label); display:block; color:var(--muted); font-size:12px; line-height:16px; font-weight:400; margin-bottom:4px; }
  #tbStore td:nth-child(1) { grid-row:1; grid-column:1; }
  #tbStore td:nth-child(8) { grid-row:1; grid-column:2; }
  #tbStore td:nth-child(2) { grid-row:2; grid-column:1/-1; }
  #tbStore td:nth-child(5) { grid-row:3; grid-column:1; font-size:16px; line-height:24px; text-align:left; }
  #tbStore td:nth-child(9) { grid-row:3; grid-column:2; align-self:end; }
  #tbStore td:nth-child(3) { grid-row:4; grid-column:1/-1; max-width:none; }
  #tbStore td:nth-child(4) { grid-row:5; grid-column:1/-1; max-width:none; }
  #tbStore td:nth-child(6) { grid-row:6; grid-column:1; }
  #tbStore td:nth-child(7) { grid-row:6; grid-column:2; }
  #tbStore td:last-child .btn { min-height:40px; padding:8px 12px; }
  main input,main select,main textarea,.filters select { font-size:16px; line-height:24px; min-height:44px; }
  .form-grid,.grid,.editor-page .grid { grid-template-columns:1fr; gap:16px; }
  .alert,.err { padding:16px; margin-bottom:16px; }
  .steps { gap:12px; justify-content:space-between; }
  .steps li { flex-direction:column; align-items:flex-start; gap:8px; max-width:96px; }
  .upload-box { padding:24px 16px 32px; }
  .upload-box strong { font-size:18px; line-height:28px; }
  .upload-box > .muted { display:block; margin:12px 0 0; }
  .upload-box input[type=file] { padding:8px; }
  #manualMessage { grid-template-columns:1fr; gap:16px; }
  #senderHint { grid-row:auto; margin:0; }
  .form-actions button { width:100%; }
  .profile-summary { align-items:flex-start; gap:12px; }
  .profile-summary strong { font-size:18px; line-height:28px; overflow-wrap:anywhere; }
  .avatar { width:48px; height:48px; font-size:20px; line-height:28px; }
  .editor-page main { margin-bottom:240px; }
  .bar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .bar .btn { font-size:12px; line-height:16px; min-height:40px; padding:8px; }
  .bar #btnSave { grid-row:1; grid-column:1/4; }
  .bar #btnApprove { grid-row:1; grid-column:4/-1; }
  .bar #btnPreview { grid-row:2; grid-column:3/5; }
  .bar #btnBack { grid-row:2; grid-column:1/3; }
  .bar #btnReset { grid-row:2; grid-column:5/-1; }
  .bar #resv { grid-column:1/-1; }
  .bar .status { grid-column:1/-1; font-size:12px; line-height:16px; text-align:left; margin:0; }
  .totals { width:100%; }
  .login-layout { grid-template-columns:1fr; padding:16px 24px 40px; gap:32px; }
  .login-intro { padding:24px; }
  .login-intro h1 { font-size:30px; line-height:36px; }
  .intro-copy { font-size:14px; line-height:24px; margin:0; }
  .document-visual,.intro-footer { display:none; }
  .box h2 { font-size:24px; line-height:32px; }
  .box > .muted { margin-bottom:24px; }
  .login-access { margin-top:24px; }
}
@media (max-width:400px) { .filters select { grid-column:1/-1; } }
.management-page section { min-width:0; }
.management-page .section-heading { flex-wrap:wrap; }
.management-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; }
.management-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; margin-top:24px; }
.management-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.management-card h3 { margin:0 0 12px; font-size:18px; line-height:28px; }
.management-card dl { margin:16px 0; }
.management-card dt { color:var(--muted); font-size:12px; line-height:20px; }
.management-card dd { margin:0 0 12px; }
.switch-label { display:flex; align-items:center; gap:8px; margin:16px 0; text-align:left; font-size:14px; line-height:20px; }
.switch-label input[type=checkbox],.permission-category input[type=checkbox] { width:18px; height:18px; min-height:18px; flex-shrink:0; padding:0; margin:0; }
#tbl td .switch-label input[type=checkbox] { width:18px; height:18px; min-height:18px; padding:0; }
.permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:24px; }
.permission-category { min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.permission-category summary { cursor:pointer; }
.permission-category summary input[type=checkbox] { margin-right:12px; vertical-align:middle; }
.price-details { font-size:12px; line-height:20px; text-align:left; white-space:normal; }
.price-details summary { cursor:pointer; color:var(--accent-ink); }
.price-explanation { white-space:pre-line; overflow-wrap:anywhere; min-width:180px; padding:8px 0; }
.calculation-total { font-size:24px; line-height:32px; font-weight:700; }
.account-panel { max-width:800px; }
.management-table .management-actions { margin-top:0; }
@media (max-width:700px) {
  .management-table,.management-table tbody,.management-table tr,.management-table td { display:block; }
  .management-table thead { display:none; }
  .management-table tr { padding:16px 0; border-bottom:1px solid var(--line); }
  .management-table td { padding:8px 0; border:0; overflow-wrap:anywhere; }
  .management-table td[data-label]::before { content:attr(data-label); display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
  .management-card { padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; }
}
/* Visible guidance and supplier/pricing forms share the established palette. */
.workflow-hint { padding:16px; border-left:4px solid var(--accent); background:var(--accent-soft); color:var(--ink); line-height:1.6; }
.field-error { color:#a12618; font-size:14px; line-height:20px; }
[aria-invalid="true"] { outline:2px solid #a12618; outline-offset:2px; }
.field:has(.suggest-list) { position:relative; }
.suggest-list { position:absolute; top:100%; left:0; right:0; z-index:30; max-height:280px; overflow:auto; background:var(--paper); border:1px solid var(--line); box-shadow:0 4px 16px #0002; }
.suggest-option { padding:12px; cursor:pointer; color:var(--ink); white-space:normal; overflow-wrap:anywhere; }
.suggest-option:hover, .suggest-option[aria-selected="true"], #acList .it[aria-selected="true"] { background:var(--accent-soft); outline:2px solid var(--accent); outline-offset:-2px; }
.editor-page td:has(> .suggest-list) { position:relative; }
.rule-kinds { flex-wrap:wrap; }
.rule-filters { margin:16px 0; }
.rule-filters .field { min-width:0; }
.pricing-list td { vertical-align:top; overflow-wrap:anywhere; }
.pricing-list td p { margin:4px 0; }
.pricing-list .management-actions { margin:0; }
.multiline { white-space:pre-line; }
.sample-data { white-space:pre-wrap; overflow-wrap:anywhere; }
.history-list { display:grid; gap:8px; }
.history-list button { white-space:normal; text-align:left; overflow-wrap:anywhere; }
.analog-note { margin-top:8px; color:var(--accent-ink); font-size:12px; line-height:16px; }
.analog-dialog { box-sizing:border-box; width:calc(100% - 32px); max-width:850px; max-height:calc(100dvh - 32px); padding:24px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); overflow:auto; overflow-wrap:anywhere; }
.analog-dialog::backdrop { background:#0008; }
.analog-dialog .section-heading { align-items:center; gap:16px; }
.analog-dialog .section-heading h2 { margin:0; }
.analog-dialog .section-heading .btn { flex-shrink:0; white-space:nowrap; }
.analog-list { display:grid; gap:16px; }
.analog-candidate { min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; }
.analog-candidate h3 { margin:0; }
.analog-candidate p { margin:8px 0; }
.analog-class { font-weight:700; }
.analog-risk { padding:8px; background:var(--accent-soft); }
.analog-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.analog-images figure { min-width:0; margin:0; }
.analog-images img { display:block; width:100%; height:120px; object-fit:contain; }
.analog-images figcaption { font-size:12px; line-height:16px; margin-top:8px; }
.analog-candidate details { margin:16px 0; }
#sourceForms fieldset, #categoryForm fieldset { min-width:0; margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:8px; }
#sourceForms legend { max-width:100%; overflow-wrap:anywhere; font-weight:700; }
#originals, #uploadInfo { overflow-wrap:anywhere; }
.management-page .btn, .management-page .tabs button { min-height:44px; }
.btn[aria-busy="true"]::after { content:attr(data-busy-label); margin-left:8px; font-size:12px; }
.import-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:16px 0; }
.import-summary > div { display:flex; flex-direction:column; gap:8px; padding:16px; background:var(--bg); border-radius:8px; }
.import-summary strong { font-size:24px; line-height:32px; }
.import-summary span { color:var(--muted); }
.import-notes p { margin:8px 0; }
.import-skipped { border-left:3px solid var(--accent); padding:12px 16px; background:var(--accent-soft); margin:16px 0; }
.import-skipped p:last-child { margin:0; }
.import-actions { margin:24px 0; }
.import-details { border-top:1px solid var(--line); padding:16px 0; }
.import-details > summary { cursor:pointer; color:var(--accent-ink); }
.import-details[open] > summary { margin-bottom:16px; }
.import-file-list td, .import-file-details h3, #detailText { overflow-wrap:anywhere; }
.import-file-details { margin:16px 0; padding:16px; background:var(--bg); border-radius:8px; }
#review:focus { outline:none; }
@media (max-width:700px) {
  .import-summary { grid-template-columns:1fr; gap:8px; }
  .import-summary > div { flex-direction:row; align-items:center; justify-content:space-between; }
  .import-file-list table, .import-file-list tbody, .import-file-list tr, .import-file-list td { display:block; width:100%; min-width:0; }
  .import-file-list thead { display:none; }
  .import-file-list tr { border-bottom:1px solid var(--line); padding:16px 0; }
  .import-file-list td { border:0; padding:4px 0; }
  .import-file-list td[data-label]::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); }
  .pricing-list table, .pricing-list tbody, .pricing-list tr, .pricing-list td { display:block; width:100%; min-width:0; }
  .pricing-list thead { display:none; }
  .pricing-list tr { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:8px; box-sizing:border-box; }
  .pricing-list td { border:0; box-sizing:border-box; padding:8px; }
  .pricing-list td::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
}