/* Workspace design system. Shared components keep the same visual language in every view. */
:root {
  --ink: #253c34;
  --muted: #6c7972;
  --line: #e3e8e1;
  --bg: #f6f7f4;
  --green: #285c47;
  --lime: #e0eeae;
  --radius: 14px;
  --shadow: 0 3px 12px #253c3403;
  font-family: "Segoe UI Variable", "Segoe UI", "Leelawadee UI", "Malgun Gothic", Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

[hidden] { display: none !important; }
body { background: var(--bg); }
button, a, input, select, textarea { transition: background-color .16s, border-color .16s, box-shadow .16s, color .16s; }
button:disabled { opacity: .6; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #6b9675; outline-offset: 3px; }
input, select, textarea { min-height: 43px; border-color: #dce3da; border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: #6a8a6c; box-shadow: 0 0 0 3px #6a8a6c18; }
input::placeholder { color: #89938c; }
h1 { font-size: clamp(28px, 2.5vw, 36px); font-weight: 650; letter-spacing: -1.1px; line-height: 1.35; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -.3px; }
h3 { font-size: 14px; }
:lang(th) h1, :lang(ko) h1 { letter-spacing: -.5px; }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: 10px; left: 250px; z-index: 250; transform: translateY(-150%); padding: 10px 18px; border-radius: 8px; background: var(--ink); color: white; }
.skip-link:focus { transform: translateY(0); }

/* Navigation and workspace header */
.app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { width: 232px; padding: 24px 17px 18px; background: #fff; color: var(--muted); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.brand { padding: 0 13px; gap: 11px; color: #234536; font-size: 27px; font-weight: 750; letter-spacing: -1.2px; line-height: 1.1; }
.brand-period { color: #83a36a; }
.brand-mark { width: 29px; height: 29px; background: #2e5945; border-radius: 7px; }
.brand-mark::before, .brand-mark::after { background: #fff; }
.workspace-name { margin: 12px 13px 22px; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: #73816d; }
.nav-label { margin: 16px 14px 8px; font-size: 10px; font-weight: 650; letter-spacing: 1.2px; color: #78856f; }
.nav-item { position: relative; gap: 12px; min-height: 42px; margin: 2px 0; padding: 10px 14px; border-radius: 8px; color: #5b6b5a; font-size: 13px; }
.nav-item svg { width: 19px; height: 19px; color: #7c897c; }
.nav-item:hover { color: #28533e; background: #f2f5ed; }
.nav-item.active { background: #edf2df; color: #2e5139; font-weight: 650; }
.nav-item.active svg { color: #527747; }
.nav-active-dot { width: 5px; height: 5px; margin-left: auto; background: #74905b; border-radius: 50%; }
.nav-item .count { margin-left: auto; min-width: 20px; padding: 1px 5px; background: #f0f3e9; color: #67775e; text-align: center; font-size: 10px; }
.sidebar-spacer { min-height: 12px; }
.new-project-nav { border: 1px dashed #d4ddcf; justify-content: center; font-size: 12px; color: #587348; margin-top: 16px; }
.new-project-nav svg { width: 16px; color: #587348; }
.sidebar-bottom { padding: 15px 9px 0; margin-top: 16px; border-top-color: var(--line); }
.server-state { font-size: 10px; color: #788573; gap: 7px; }
.status-dot { width: 6px; height: 6px; background: #86a268; box-shadow: 0 0 0 3px #8eaa7412; }
.sidebar-note { display: flex; justify-content: space-between; color: #9aa395; font-size: 9px; letter-spacing: 1.7px; margin-top: 12px; }
.sidebar-note span { letter-spacing: 0; }
.topbar { height: 78px; padding: 0 34px; background: #ffffffd9; gap: 18px; }
.project-control { gap: 11px; flex: 1; }
.project-icon { width: 35px; height: 35px; background: #f4f6ee; color: #718468; border-color: #e5e9dd; }
.project-icon svg { width: 18px; height: 18px; }
.project-picker { min-width: 0; }
.project-picker-label { display: block; color: #8a9585; font-size: 10px; line-height: 1.3; }
.project-select { display: block; max-width: min(330px, 32vw); min-height: 25px; padding: 1px 20px 1px 0; color: #52644b; font-size: 12px; text-overflow: ellipsis; }
.top-actions { gap: 17px; flex-shrink: 0; }
.topbar-date { font-size: 11px; color: #8b9586; padding-right: 16px; border-right: 1px solid var(--line); white-space: nowrap; }
.language-control { gap: 5px; color: #7f8c75; }
.language-control svg { width: 16px; height: 16px; }
.language-control select { color: #5a6b4f; font-size: 12px; min-height: 35px; padding-right: 17px; }
.refresh-button { border: 1px solid var(--line); min-width: 33px; min-height: 33px; color: #86917c; }
.avatar { width: 32px; height: 32px; background: #edf1e2; border: 3px solid white; box-shadow: 0 0 0 1px #e1e7d7; color: #6d8156; font-size: 10px; }
.content { padding: 34px 34px 24px; max-width: 1510px; animation: none; }
#view-root:focus { outline: none; }
.page-top { align-items: center; gap: 20px; margin-bottom: 27px; }
.eyebrow { color: #80926e; font-size: 10px; font-weight: 650; letter-spacing: 1.7px; margin-bottom: 8px; }
.subtitle { color: var(--muted); font-size: 13px; margin-top: 9px; line-height: 1.75; max-width: 770px; }
.page-top > div:first-child { min-width: 0; }
.page-top .actions { flex-shrink: 0; }
.btn { min-height: 40px; border-color: #dce3d6; border-radius: 8px; gap: 8px; padding: 9px 15px; font-size: 12px; font-weight: 600; color: #536847; box-shadow: 0 1px 2px #253c3403; }
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: #f3f6ec; border-color: #bdcbb1; }
.btn.primary { background: #2e553e; border-color: #2e553e; color: white; box-shadow: 0 3px 7px #28513915; }
.btn.primary:hover { background: #234630; border-color: #234630; box-shadow: 0 4px 10px #28513920; }
.btn.small { min-height: 34px; font-size: 11px; padding: 6px 11px; }
.btn.subtle { box-shadow: none; }
.badge { font-size: 10px; border-radius: 5px; padding: 3px 8px; font-weight: 550; }
.badge.green { color: #567346; background: #edf3e5; }
.badge.amber { color: #9a7335; background: #fbf4e5; }
.badge.blue { color: #527c8a; background: #edf4f5; }
.badge.red { color: #a05c50; background: #fcf0ec; }
.panel { box-shadow: var(--shadow); border-color: #e4e8df; }
.panel-head { padding: 23px 25px 0; }
.panel-head .subtitle { font-size: 12px; color: #7e8b73; }
.footer-line { margin-top: 29px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 10px; color: #8a9681; gap: 18px; }
.footer-line strong { color: #93a183; font-size: 9px; letter-spacing: 2px; }

/* Drawing-to-workbook flow */
.converter-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: 0; margin: 0 0 22px; padding: 0; border: 1px solid #e2e7da; border-radius: 9px; background: #f0f3e9; overflow: hidden; }
.converter-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 17px; font-size: 11px; color: #77866a; min-width: 0; }
.converter-steps li + li { border-left: 1px solid #dee5d5; }
.converter-steps li:first-child { background: #eaf0de; color: #516b3f; font-weight: 600; }
.converter-steps li > svg { margin-left: auto; width: 15px; height: 15px; color: #8f9f7d; }
.converter-step-number { font-size: 10px; font-weight: 700; color: #8c9d79; font-variant-numeric: tabular-nums; }
.converter-steps li:first-child .converter-step-number { color: #5b7946; }
.converter-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, 1fr); gap: 22px; margin-bottom: 25px; align-items: stretch; }
.converter-main { padding: 23px; }
.converter-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 19px; }
.converter-card-head h2 { font-size: 15px; }
.converter-card-head p { font-size: 12px; color: #6e7b60; margin-top: 4px; }
.file-type-tag { border: 1px solid #e1e5d9; color: #8a977b; padding: 3px 7px; border-radius: 5px; font-family: Consolas, monospace; font-size: 10px; letter-spacing: .5px; }
.drawing-drop-zone { border: 1.5px dashed #bacba9; border-radius: 10px; background: #fafcf6; text-align: center; padding: 25px 18px 20px; transition: border-color .18s, background-color .18s, box-shadow .18s; }
.drawing-drop-zone:hover, .drawing-drop-zone:focus-within { border-color: #819d65; background: #f6f9ed; }
.drawing-drop-zone.is-dragging { border-color: #547c3b; background: #edf4dd; box-shadow: inset 0 0 0 2px #9cb87b44; }
.drawing-upload-symbol { position: relative; display: block; width: 75px; height: 75px; margin: 0 auto 12px; background: transparent; border: none; }
.drawing-file-sheet { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; left: 10px; top: 0; width: 49px; height: 64px; border: 1px solid #d7e0c8; border-radius: 8px; background: #fff; transform: rotate(-7deg); box-shadow: 3px 4px 0 #e8eedb; }
.drawing-file-sheet svg { width: 24px; height: 24px; color: #a3b28c; stroke-width: 1.1; }
.drawing-file-sheet b { font-family: Consolas, monospace; font-size: 9px; font-weight: 600; color: #839569; letter-spacing: 1px; }
.drawing-upload-bubble { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; right: 0; bottom: 4px; border-radius: 50%; border: 3px solid #fafcf6; background: #dfeabe; color: #657f47; }
.drawing-upload-bubble svg { width: 14px; height: 14px; stroke-width: 1.8; }
.drawing-drop-zone h3 { font-size: 16px; font-weight: 600; color: #516544; }
.drawing-drop-zone p { font-size: 13px; color: #718060; margin: 5px auto 17px; max-width: 350px; }
.drawing-file-label { min-height: 42px; padding: 10px 19px; font-size: 12px; }
.drawing-drop-zone small { display: block; margin-top: 12px; font-size: 11px; color: #738062; }
.drawing-drop-zone.is-uploading { background: #f2f6e8; }
.drawing-drop-zone .spinner { border-color: #ffffff40; border-top-color: #fff; }
.converter-options { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; }
.converter-options label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #657852; }
.converter-options label svg { width: 15px; height: 15px; color: #91a07f; }
.converter-options select { width: 120px; min-height: 37px; font-size: 12px; padding: 6px 10px; border-color: #e1e7d7; background: #fdfefa; }
.upload-project-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 15px 0 0; font-size: 11px; color: #72845f; }
.upload-project-note svg { width: 12px; height: 12px; }
.converter-format { display: block; padding: 0; background: #fff; }
.preview-heading { display: flex; gap: 11px; align-items: center; padding: 20px 22px; color: #edf4df; background: #344d36; }
.preview-icon { display: grid; place-items: center; width: 35px; height: 38px; border: 1px solid #ffffff1a; border-radius: 7px; background: #ffffff08; color: #d2e3b7; }
.preview-icon svg { width: 19px; height: 19px; }
.preview-heading .eyebrow { color: #a4b595; font-size: 8px; letter-spacing: 1.3px; margin-bottom: 4px; }
.preview-heading h2 { color: #edf4e5; font-size: 14px; font-weight: 550; }
.preview-extension { margin-left: auto; font-family: Consolas, monospace; font-size: 10px; color: #b8cca2; border: 1px solid #b8cca22a; border-radius: 5px; padding: 3px 6px; }
.preview-body { padding: 20px 22px 14px; }
.mini-sheet { border: 1px solid #dce4d2; border-radius: 7px; overflow: hidden; margin: 0; box-shadow: 0 5px 12px #32452b06; }
.mini-sheet-title { display: flex; align-items: center; gap: 6px; text-align: left; color: #6e8259; background: #f0f4e6; border-bottom: 1px solid #dfe7d4; padding: 8px 10px; font-size: 9px; font-weight: 600; }
.mini-sheet-title > span:last-child { margin-left: auto; font-size: 13px; color: #8c9f74; }
.mini-sheet-title .status-dot { width: 5px; height: 5px; }
.mini-sheet-table { overflow-x: auto; }
.mini-sheet table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; font-size: 9px; }
.mini-sheet th, .mini-sheet td { height: 29px; padding: 5px 8px; border-right: 1px solid #eef1e8; border-bottom: 1px solid #eef1e8; }
.mini-sheet th { background: #fafbf8; color: #8b987d; font-weight: 500; font-size: 8px; white-space: nowrap; }
.mini-sheet th:first-child { width: 25px; }
.mini-sheet th:nth-child(2) { width: 31%; }
.mini-sheet th:nth-child(3) { width: 34%; }
.mini-sheet td:first-child { text-align: center; background: #fcfdfb; color: #b0b9a4; font-size: 8px; padding: 4px; }
.mini-sheet td:nth-child(2) { color: #7c8e67; font-family: Consolas, monospace; }
.mini-sheet tr:last-child td { border-bottom: none; }
.mini-sheet th:last-child, .mini-sheet td:last-child { border-right: none; }
.sheet-placeholder { display: block; height: 4px; width: 54%; background: #e7ecdf; border-radius: 2px; }
.sheet-placeholder.short { width: 34%; background: #dae5c8; }
.mini-sheet-tabs { display: flex; gap: 0; padding: 0; background: #f8faf3; border-top: 1px solid #e1e8d7; }
.mini-sheet-tabs span { padding: 6px 13px; font-size: 9px; color: #8b9a77; }
.mini-sheet-tabs .selected { color: #597842; background: #edf3e1; box-shadow: inset 0 -2px #8ea971; }
.mini-sheet-tabs .sheet-more { margin-left: auto; padding: 6px 10px; }
.preview-caption { font-size: 8px; color: #98a18c; text-align: center; margin-top: 9px; }
.workbook-benefits { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 18px 0 15px; gap: 9px; }
.workbook-benefits li { display: flex; align-items: flex-start; gap: 8px; color: #667b52; font-size: 12px; line-height: 1.6; }
.workbook-benefits svg { width: 14px; height: 14px; color: #91a877; margin-top: 1px; }
.conversion-notes { border-top: 1px solid #edf0e7; padding-top: 11px; }
.conversion-notes summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #6e825a; cursor: pointer; list-style: none; }
.conversion-notes summary::-webkit-details-marker, .supplied-drawings summary::-webkit-details-marker { display: none; }
.conversion-notes summary svg { width: 13px; height: 13px; }
.conversion-notes p { font-size: 11px; color: #7b896a; margin-top: 9px; line-height: 1.75; }
.conversion-notes[open] summary { color: #507139; }
.conversion-results { margin-bottom: 18px; }
.conversion-results .panel-head { align-items: center; padding: 22px 24px 20px; border-bottom: 1px solid var(--line); }
.section-title-row { display: flex; align-items: center; gap: 9px; }
.section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px; padding: 1px 6px; background: #eef2e5; color: #7c8f65; border: 1px solid #e6ecdb; font-size: 10px; font-weight: 550; border-radius: 5px; }
.conversion-results .panel-head .subtitle { margin-top: 5px; font-size: 11px; }
.processing-label { display: inline-flex; align-items: center; gap: 7px; color: #97a18c; font-size: 9px; white-space: nowrap; }
.processing-label .status-dot { width: 5px; height: 5px; }
.conversion-job { display: flex; align-items: center; gap: 15px; padding: 22px 24px; border-bottom: 1px solid #edf0e7; }
.conversion-job:last-child { border-bottom: 0; }
.conversion-job:hover { background: #fdfefa; }
.conversion-job-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 43px; height: 51px; border-radius: 7px; background: #f4f5ef; color: #9ba789; border: 1px solid #e4e9da; flex-shrink: 0; }
.conversion-job-icon.is-ready { background: #f0f5e6; color: #8ca66d; border-color: #e1e9d4; }
.conversion-job-icon svg { width: 20px; height: 20px; stroke-width: 1.3; }
.conversion-job-icon > span { font-family: Consolas, monospace; font-size: 7px; font-weight: 600; letter-spacing: .5px; }
.conversion-job-content { min-width: 0; flex: 1; }
.conversion-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.conversion-job-title { font-size: 13px; font-weight: 600; color: #4e643f; overflow-wrap: anywhere; }
.conversion-title-row .badge { font-size: 8px; padding: 2px 6px; }
.conversion-job-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px; font-size: 11px; color: #738163; }
.conversion-job-meta span + span::before { content: "·"; margin: 0 8px; color: #b0b9a3; }
.conversion-check { display: flex; align-items: flex-start; gap: 5px; margin-top: 7px; font-size: 11px; line-height: 1.65; color: #8a713b; }
.conversion-check svg { width: 12px; height: 12px; margin-top: 2px; }
.conversion-job-action { align-self: center; flex-shrink: 0; }
.download-workbook { color: #647c4b; border-color: #dbe4ce; background: #f9fbf5; font-size: 11px; min-height: 37px; }
.conversion-progress { height: 5px; margin: 12px 0 6px; max-width: 450px; background: #edf2e5; border-radius: 4px; overflow: hidden; }
.conversion-progress span { display: block; height: 100%; background: #94ad6e; transition: width .3s; }
.conversion-job .muted { font-size: 10px; }
.conversion-error { font-size: 11px; color: #a65a4b; margin-top: 8px; }
.job-failed .conversion-job-icon { background: #fbf2ee; color: #ad7963; border-color: #eddfd6; }
.conversion-empty { padding: 36px 24px; }
.empty-file-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); background: #f5f8ee; border-radius: 12px; margin: 0 auto 12px; }
.empty-file-icon svg { width: 23px; height: 23px; margin: 0; }
.conversion-empty h3 { color: #728661; }
.conversion-empty p { margin: 7px auto 0; font-size: 12px; color: #8a997e; }
.supplied-drawings { padding: 0; background: transparent; box-shadow: none; }
.supplied-drawings > summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 23px; list-style: none; cursor: pointer; color: #788b65; }
.supplied-drawings > summary > span { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 550; }
.supplied-drawings > summary svg { width: 16px; height: 16px; color: #95a581; }
.supplied-drawings[open] > summary { background: #f0f4e8; border-bottom: 1px solid var(--line); }
.supplied-drawings[open] > summary > svg { transform: rotate(45deg); }
.supplied-drawings-list { padding: 0 23px; background: #fff; }
.supplied-drawing-row { padding: 17px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.supplied-drawing-row:last-child { border: none; padding-bottom: 17px; }
.supplied-drawing-row .flex { min-width: 0; gap: 11px; }
.supplied-drawing-row strong { font-size: 12px; display: block; color: #697d58; overflow-wrap: anywhere; }
.supplied-drawing-row small { display: block; font-size: 10px; color: #98a48b; margin-top: 4px; }
.source-file-icon { width: 30px; height: 34px; display: grid; place-items: center; background: #f1f5e8; color: #93a57a; border-radius: 6px; flex-shrink: 0; }

/* Production, register, documents, and forms */
.project-strip { font-size: 12px; color: #718665; margin-bottom: 24px; }
.project-strip .today { color: #93a086; font-size: 11px; }
.stats { gap: 17px; }
.stat-card { min-height: 145px; padding: 22px; border-radius: 12px; box-shadow: var(--shadow); }
.stat-top { font-size: 12px; color: #829172; margin-bottom: 17px; }
.stat-top svg { color: #9cac8b; }
.stat-number { font-size: 35px; color: #48603c; letter-spacing: -1.2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-number small { color: #99a58b; font-size: 11px; }
.stat-bottom, .stat-bottom strong { font-size: 10px; }
.stat-bottom { color: #8d9c7d; margin-top: 14px; }
.stat-card.featured { background: #344f37; border-color: #344f37; }
.featured .stat-top, .featured .stat-top svg { color: #b7c8a4; }
.featured .stat-number { color: #eef7df; }
.featured .stat-number small, .featured .stat-bottom { color: #a5bb91; }
.featured .stat-bottom strong { color: #d5e9b3; }
.dashboard-grid, .lower-grid { gap: 22px; }
.ring-fill { stroke: #91ab68; }
.ring-number { font-size: 31px; color: #506b3e; }
.ring-inner small { font-size: 10px; color: #8e9e7c; }
.legend-row { font-size: 12px; color: #7f9270; }
.legend-row strong { color: #566f44; font-size: 13px; }
.legend-dot { background: #9bb57b; }
.legend-dot.dark { background: #3e5c37; }
.volume-label, .volume-value small { font-size: 11px; color: #99a78b; }
.volume-value { font-size: 15px; color: #647f4c; font-variant-numeric: tabular-nums; }
.workflow-step strong { font-size: 12px; color: #6e835c; }
.workflow-step small { font-size: 11px; color: #96a486; }
.text-link { font-size: 12px; color: #738e56; }
.recent-row .code { font-size: 12px; color: #6a8356; }
.recent-row small { font-size: 11px; color: #98a88a; }
.callout { font-size: 12px; border-radius: 10px; padding: 15px 18px; }
.callout.blue { color: #758b91; background: #f0f5f5; border-color: #dfe8e7; }
.data-table { font-size: 12px; }
.data-table th { font-size: 11px; color: #869776; background: #f7f9f3; padding: 14px 17px; font-weight: 550; }
.data-table td { padding: 15px 17px; border-color: #edf1e6; color: #788d66; }
.data-table .code-cell, .category-cell { font-size: 12px; }
.data-table tbody tr { transition: background-color .15s; }
.data-table tbody tr:hover { background: #fafcf6; }
.data-table .num { font-variant-numeric: tabular-nums; }
.toolbar { padding: 20px; gap: 13px; align-items: flex-end; background: #fff; }
.filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 135px; font-size: 11px; color: #849573; }
.filter-field > label { font-size: 11px; font-weight: 550; }
.filter-search { flex: 1; min-width: 185px; }
.filter-search .search { width: 100%; }
.search input { font-size: 12px; background: #fafcf6; }
.search svg { color: #a1b28e; top: 14px; }
.toolbar select { width: 100%; min-width: 135px; font-size: 12px; background: #fdfefa; }
.filter-reset { align-self: flex-end; margin-left: auto; font-size: 11px; }
.results-summary { padding: 12px 20px; color: #94a182; font-size: 11px; background: #fdfefa; border-bottom: 1px solid #eef1e8; }
.part-detail-button { padding: 5px 0; border: none; background: transparent; font: inherit; color: #607d49; font-weight: 650; text-decoration: underline; text-decoration-color: #c6d5b7; text-underline-offset: 4px; }
.part-detail-button:hover { color: #3b5e2a; text-decoration-color: currentColor; }
.table-pagination { padding: 16px 20px; font-size: 11px; color: #92a080; gap: 12px; flex-wrap: wrap; }
.document-grid { gap: 20px; }
.document-card { border-radius: 12px; box-shadow: var(--shadow); }
.document-card-top { height: 116px; background: #f0f4e7; border-color: #e5ebda; }
.document-card-body { padding: 22px; }
.document-name { font-size: 13px; color: #71875c; }
.document-meta { font-size: 11px; color: #98a98a; margin-bottom: 20px; }
.settings-card { padding: 27px; }
.settings-card .subtitle { font-size: 13px; }
.report-card { padding: 27px; }
.modal { border-radius: 15px; box-shadow: 0 24px 90px #182f2440; }
.modal-backdrop { background: #1f342a75; backdrop-filter: blur(5px); }
.modal-header { padding: 22px 26px; }
.modal-header h2 { font-size: 19px; }
.modal-content { padding: 26px; }
.modal-footer { background: #f8faf4; padding: 17px 26px; }
.modal form { display: flex; flex-direction: column; overflow: auto; min-height: 0; }
.modal form > .modal-content { flex: 1; }
.field label, .field { color: #82966d; font-size: 12px; }
.field input, .field select, .field textarea { font-size: 13px; }
.field .optional { font-size: 11px; color: #a5b394; }
.form-section-title { font-size: 13px; margin-top: 27px; }
.check-row { font-size: 12px; }
.detail-item small { font-size: 11px; color: #94a57f; }
.detail-item strong { font-size: 14px; color: #738d5b; }
.form-message { font-size: 12px; }
.toast { font-size: 13px; padding: 15px 20px; background: #344f37; border: 1px solid #ffffff1a; }

@media (min-width: 1550px) {
  .content { padding: 44px 48px 28px; }
  .topbar { padding: 0 48px; }
  .converter-layout { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: 26px; }
  .converter-main { padding: 27px; }
  .drawing-drop-zone { padding: 34px 24px 28px; }
  .preview-body { padding: 25px 27px 18px; }
  .mini-sheet th, .mini-sheet td { height: 32px; }
}

@media (max-width: 1150px) {
  .content { padding: 28px 25px 24px; }
  .topbar { padding: 0 25px; }
  .topbar-date { display: none; }
  .top-actions { gap: 11px; }
  .converter-layout { grid-template-columns: minmax(0, 1.15fr) minmax(285px, 1fr); gap: 18px; }
  .converter-main { padding: 20px; }
  .preview-heading { padding: 19px; }
  .preview-body { padding: 18px 19px 14px; }
  .converter-card-head p { font-size: 10px; }
  .converter-steps li { padding: 11px 13px; font-size: 10px; gap: 7px; }
  .drawing-drop-zone h3 { font-size: 15px; }
  .conversion-results .panel-head { padding: 20px; }
  .conversion-job { padding: 21px 20px; }
  .conversion-title-row .badge { flex-shrink: 0; }
  .processing-label { display: none; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .sidebar { width: 200px; padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 24px; padding: 0 10px; }
  .workspace-name { font-size: 8px; letter-spacing: 1px; margin-left: 10px; }
  .nav-item { font-size: 12px; padding: 11px; gap: 10px; }
  .converter-layout { grid-template-columns: minmax(0, 1fr); }
  .converter-format { display: block; }
  .preview-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: center; padding: 22px; }
  .mini-sheet { grid-column: 1; grid-row: 1 / 3; }
  .preview-caption { grid-column: 1; grid-row: 3; }
  .workbook-benefits { grid-column: 2; grid-row: 1; margin: 0 0 13px; }
  .conversion-notes { grid-column: 2; grid-row: 2 / 4; align-self: start; }
  .page-top { align-items: flex-start; }
  .page-top .actions { flex-shrink: 1; }
  .project-select { max-width: 240px; }
  .conversion-job { flex-wrap: wrap; }
  .conversion-job-action { margin-left: 58px; }
  .filter-reset { margin-left: 0; }
}

@media (max-width: 700px) {
  h1 { font-size: 27px; letter-spacing: -.7px; }
  h2 { font-size: 16px; }
  .sidebar { width: 250px; padding-top: 28px; visibility: hidden; transition: transform .2s, visibility .2s; }
  .sidebar.open { visibility: visible; box-shadow: 12px 0 60px #20382020; }
  .sidebar.open + .mobile-backdrop { background: #18322460; backdrop-filter: blur(2px); }
  .skip-link { left: 15px; }
  .topbar { height: 70px; padding: 0 16px; gap: 8px; }
  .project-control { gap: 7px; min-width: 0; }
  .mobile-menu { min-height: 38px; min-width: 34px; color: #7f936d; }
  .project-picker-label { font-size: 9px; }
  .project-select { font-size: 11px; max-width: min(40vw, 240px); width: 100%; }
  .top-actions { gap: 7px; }
  .language-control svg { display: none; }
  .language-control select { width: 72px; min-height: 38px; font-size: 11px; padding: 4px; }
  .refresh-button { min-width: 32px; min-height: 34px; }
  .content { padding: 27px 17px 22px; }
  .page-top { margin-bottom: 22px; gap: 17px; align-items: flex-start; }
  .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .subtitle { font-size: 12px; margin-top: 8px; }
  .converter-steps { margin-bottom: 18px; }
  .converter-steps li { padding: 11px 9px; gap: 6px; font-size: 9px; }
  .converter-steps li > svg { display: none; }
  .converter-step-number { font-size: 9px; }
  .converter-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 20px; }
  .converter-main { padding: 20px; }
  .converter-card-head { margin-bottom: 16px; }
  .converter-card-head h2 { font-size: 15px; }
  .converter-card-head p { font-size: 11px; }
  .drawing-drop-zone { padding: 25px 14px 22px; }
  .drawing-drop-zone h3 { font-size: 16px; }
  .drawing-drop-zone p { font-size: 12px; }
  .drawing-file-label { min-height: 44px; font-size: 12px; }
  .drawing-drop-zone small { font-size: 11px; }
  .converter-options { flex-direction: row; align-items: center; gap: 12px; }
  .converter-options label { font-size: 12px; }
  .converter-options select { width: 110px; min-height: 40px; font-size: 12px; }
  .upload-project-note { font-size: 10px; }
  .converter-format { display: block; }
  .preview-heading { padding: 19px 22px; }
  .preview-body { padding: 22px; }
  .preview-caption { font-size: 9px; }
  .mini-sheet table { font-size: 10px; }
  .mini-sheet th { font-size: 9px; }
  .mini-sheet th, .mini-sheet td { height: 32px; }
  .workbook-benefits li { font-size: 11px; }
  .conversion-notes summary { font-size: 11px; min-height: 30px; }
  .conversion-results .panel-head { padding: 20px; }
  .conversion-results .panel-head h2 { font-size: 15px; }
  .conversion-results .panel-head .subtitle { font-size: 11px; }
  .conversion-job { padding: 21px 18px; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  .conversion-job-icon { width: 37px; height: 45px; }
  .conversion-job-title { font-size: 12px; }
  .conversion-job-meta { font-size: 10px; }
  .conversion-check { font-size: 10px; }
  .conversion-job-action { margin-left: 49px; margin-top: 2px; }
  .download-workbook { min-height: 40px; }
  .supplied-drawings > summary { padding: 16px 18px; }
  .supplied-drawings > summary > span { font-size: 11px; gap: 7px; }
  .supplied-drawings-list { padding: 0 18px; }
  .supplied-drawing-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .supplied-drawing-row .btn { margin-left: 41px; }
  .supplied-drawing-row strong { font-size: 11px; }
  .stats { gap: 11px; }
  .stat-card { min-height: 139px; padding: 17px; }
  .stat-top { font-size: 11px; }
  .stat-number { font-size: 31px; }
  .stat-bottom, .stat-bottom strong { font-size: 10px; }
  .stat-number small { font-size: 10px; }
  .dashboard-grid, .lower-grid { gap: 18px; }
  .progress-layout { padding: 26px 22px; gap: 24px; }
  .ring { width: 120px; height: 120px; }
  .ring-number { font-size: 26px; }
  .legend-row { font-size: 11px; }
  .legend-row strong { font-size: 12px; }
  .project-strip { font-size: 11px; gap: 7px; }
  .toolbar { padding: 17px; gap: 13px; }
  .filter-search { flex-basis: 100%; }
  .filter-field:not(.filter-search) { flex: 1; min-width: 0; }
  .toolbar select { width: 100%; min-width: 0; font-size: 12px; }
  .filter-reset { font-size: 11px; margin-left: 0; }
  .results-summary { padding: 12px 17px; }
  .data-table th { padding: 13px; font-size: 11px; }
  .data-table td { padding: 14px 13px; font-size: 12px; }
  .table-pagination { padding: 15px 17px; font-size: 11px; }
  .document-card-top { height: 105px; }
  .document-card-body { padding: 21px; }
  .document-meta { font-size: 11px; }
  .modal-header, .modal-content { padding: 20px; }
  .modal-footer { padding: 16px 20px; }
  .field label { font-size: 12px; }
  .field input, .field select, .field textarea { font-size: 14px; }
  .check-row { font-size: 12px; }
  .footer-line { font-size: 9px; align-items: flex-start; }
}

@media (max-width: 370px) {
  .content { padding-left: 13px; padding-right: 13px; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .project-select { max-width: 37vw; }
  .top-actions { gap: 4px; }
  .language-control select { width: 65px; }
  .converter-main { padding: 16px; }
  .converter-steps li { font-size: 8px; padding-left: 7px; padding-right: 7px; gap: 4px; }
  .stat-card { padding: 15px; }
  .stat-number { font-size: 28px; }
  .stat-bottom { flex-wrap: wrap; gap: 3px; }
  .progress-layout { padding: 23px 17px; gap: 18px; }
  .ring { width: 105px; height: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; }
  .skip-link { display: none !important; }
  .data-table td { color: #253c34; }
}