:root {
  color-scheme: light;
  --violet: #7046a5;
  --violet-dark: #4f2d78;
  --violet-soft: #f0eaf7;
  --violet-pale: #faf7fd;
  --ink: #29232d;
  --ink-soft: #5f5866;
  --muted: #8a8290;
  --line: #e9e4e9;
  --warm: #f6f3ee;
  --white: #fff;
  --green: #2f8a65;
  --green-soft: #e7f5ec;
  --amber: #a86d20;
  --amber-soft: #fff2da;
  --blue: #416b9c;
  --blue-soft: #eaf1fa;
  --shadow: 0 12px 34px rgba(41, 35, 45, .035);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--warm); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(112, 70, 165, .37); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { background: var(--white); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 30px 18px 22px; min-height: 100vh; position: sticky; top: 0; height: 100vh; z-index: 4; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; margin-bottom: 68px; width: fit-content; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; background: var(--violet); color: white; font: 700 22px/1 Georgia, serif; letter-spacing: -.1em; padding-right: 3px; }
.brand-word { font-size: 21px; font-weight: 800; letter-spacing: .08em; line-height: 1; }
.brand-word small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .25em; color: var(--muted); margin-top: 7px; }
.brand-dot, .mobile-brand span { color: var(--violet); }
.sidebar-section-label, .eyebrow, .small-label { display: block; color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.4; }
.sidebar-section-label { color: #aaa3ae; margin: 0 13px 14px; font-size: 9px; }
.side-nav { display: grid; gap: 4px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 13px; color: var(--ink-soft); font-weight: 600; border-radius: 11px; transition: background .15s, color .15s; }
.nav-link:hover { color: var(--violet-dark); background: var(--violet-pale); }
.nav-link.is-active { background: var(--violet-soft); color: var(--violet-dark); }
.nav-icon { display: inline-grid; place-items: center; width: 18px; font-size: 19px; font-weight: 400; line-height: 1; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 9px 0; }
.account-card { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar, .small-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 11px; background: var(--violet-soft); color: var(--violet-dark); font-weight: 800; }
.avatar { width: 35px; height: 35px; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-copy strong { font-size: 12px; }
.account-copy small { color: var(--muted); font-size: 11px; }
.logout-link { width: 100%; border: 0; background: none; color: var(--muted); display: flex; justify-content: space-between; align-items: center; padding: 13px 2px 0; font-size: 12px; }
.logout-link:hover { color: var(--violet); }
.workspace { min-width: 0; }
.mobile-header, .mobile-nav { display: none; }
.main-content { width: min(100%, 1560px); margin-inline: auto; padding: 42px clamp(25px, 3.9vw, 68px) 80px; }

.page-heading { margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(29px, 2.7vw, 40px); line-height: 1.15; letter-spacing: -.035em; margin: 9px 0 8px; font-weight: 750; }
.page-heading p { color: var(--ink-soft); margin: 0; }
.heading-with-action { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.order-list-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 600; margin: 0 0 25px; }
.back-link:hover { color: var(--violet); }
.back-link span { font-size: 18px; line-height: 1; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; min-height: 41px; padding: 10px 16px; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--violet); color: white; box-shadow: 0 5px 13px rgba(112, 70, 165, .15); }
.button-primary:hover { background: var(--violet-dark); box-shadow: 0 7px 17px rgba(112, 70, 165, .2); }
.button-secondary { background: white; border-color: #dcd5e4; color: var(--violet-dark); }
.button-secondary:hover { background: var(--violet-pale); }
.button-quiet { background: transparent; color: var(--ink-soft); }
.button-quiet:hover { background: #ebe7e2; }
.button-small { min-height: 36px; padding: 8px 12px; }
.button-wide { width: 100%; }
.panel { background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title-row h2, .section-heading h2 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; }
.panel-title-row .eyebrow { font-size: 9px; }
.count-pill { display: inline-grid; place-items: center; min-width: 25px; height: 25px; border-radius: 8px; padding: 0 7px; background: var(--violet-soft); color: var(--violet-dark); font-size: 11px; font-weight: 750; }
.muted { color: var(--ink-soft); }

.order-list-panel { overflow: hidden; }
.list-toolbar { padding: 20px 22px 17px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1 1 275px; max-width: 390px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 26px; line-height: 1; color: #a9a0ae; pointer-events: none; }
.search-input { width: 100%; height: 39px; padding: 9px 13px 9px 38px; border: 1px solid var(--line); border-radius: 9px; background: #fbfaf9; color: var(--ink); font-size: 12px; outline: none; }
.search-input:focus { border-color: #b59bcf; background: white; box-shadow: 0 0 0 3px rgba(112, 70, 165, .1); }
.search-input::placeholder { color: #9a929e; }
.filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-pill { border: 0; border-radius: 8px; background: none; padding: 8px 10px; color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.filter-pill:hover { background: var(--violet-pale); }
.filter-pill.is-active { color: var(--violet-dark); background: var(--violet-soft); }
.order-cards { padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 13px; }
.order-card { display: flex; flex-direction: column; min-width: 0; min-height: 235px; border: 1px solid var(--line); border-radius: 13px; padding: 17px; background: white; transition: transform .17s, border-color .17s, box-shadow .17s; }
.order-card:hover { transform: translateY(-2px); border-color: #cbb9dc; box-shadow: 0 12px 24px rgba(55, 34, 79, .07); }
.order-card-top, .order-card-bottom, .progress-heading, .position-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-number { color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.order-card h2 { margin: 19px 0 3px; font-size: 17px; line-height: 1.3; letter-spacing: -.025em; }
.order-customer { margin: 0; color: var(--ink-soft); font-size: 12px; }
.order-object { margin: 4px 0 0; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.card-divider { height: 1px; background: var(--line); margin: auto 0 17px; }
.progress-heading { font-size: 11px; color: var(--ink-soft); margin-bottom: 9px; }
.progress-heading strong { color: var(--violet-dark); }
.progress-track { height: 7px; background: #eee9f1; border-radius: 99px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, #9b76c2, var(--violet)); border-radius: inherit; }
.order-card-bottom { margin-top: 10px; font-size: 10px; color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; white-space: nowrap; border-radius: 99px; padding: 5px 8px; background: var(--violet-soft); color: var(--violet-dark); font-size: 10px; font-weight: 750; line-height: 1.2; }
.status-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-new { color: var(--blue); background: var(--blue-soft); }
.status-in_progress, .status-in-progress { color: var(--violet-dark); background: var(--violet-soft); }
.status-ready { color: var(--green); background: var(--green-soft); }
.status-shipped { color: #526276; background: #eaf0f4; }
.status-paused { color: var(--amber); background: var(--amber-soft); }
.empty-state { text-align: center; padding: 75px 20px; }
.empty-icon { color: var(--violet); background: var(--violet-soft); display: inline-grid; place-items: center; border-radius: 17px; width: 55px; height: 55px; font-size: 24px; }
.empty-state h2 { font-size: 20px; margin: 16px 0 4px; }
.empty-state p { color: var(--ink-soft); margin: 0 auto 23px; }
.search-empty { padding: 34px; text-align: center; color: var(--muted); }

.form-panel { padding: 26px 28px; }
.order-edit-form { display: grid; gap: 19px; }
.section-heading { display: flex; align-items: start; gap: 13px; padding-bottom: 23px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.section-heading p { color: var(--ink-soft); font-size: 12px; margin: 4px 0 0; }
.section-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); font-size: 10px; font-weight: 800; }
.section-heading-action { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.section-heading-main { display: flex; align-items: start; gap: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-stack { display: grid; gap: 16px; }
.field { min-width: 0; }
.field label { display: block; font-size: 11px; font-weight: 750; color: #4b4350; margin-bottom: 7px; }
.required-mark { color: var(--violet); }
.field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea { display: block; width: 100%; min-height: 40px; border: 1px solid #ddd6de; border-radius: 9px; background: white; padding: 9px 11px; color: var(--ink); font-size: 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #a580c9; box-shadow: 0 0 0 3px rgba(112, 70, 165, .1); }
.field input::placeholder, .field textarea::placeholder { color: #a9a2aa; }
.field input[type="file"] { width: 100%; max-width: 100%; font-size: 11px; color: var(--ink-soft); }
.field input[type="file"]::file-selector-button { margin-right: 10px; border: 1px solid #dcd5e4; background: var(--violet-pale); color: var(--violet-dark); border-radius: 8px; padding: 8px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.field input[type="checkbox"] { accent-color: var(--violet); width: 16px; height: 16px; margin: 4px 0; }
.field-help { display: block; margin-top: 6px; font-size: 10px; color: var(--muted); }
.field-error { display: block; margin-top: 5px; font-size: 11px; color: #b33f49; }
.form-error-summary { padding: 10px 13px; border-radius: 9px; background: #fff0f0; border: 1px solid #f5c8cc; color: #a03340; font-size: 12px; margin-bottom: 12px; }
.form-error-summary ul { margin: 0; padding-left: 17px; }
.field-description, .field-note { grid-column: 1 / -1; }
.item-form-list { display: grid; gap: 14px; }
.item-form-card { border: 1px solid var(--line); border-radius: 12px; padding: 19px; background: #fff; }
.item-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.item-form-heading h3 { margin: 0; font-size: 13px; }
.text-button { border: 0; padding: 4px; background: none; font-size: 11px; font-weight: 650; }
.danger-link { color: #a84757; }
.danger-link:hover { color: #7f2736; text-decoration: underline; }
.item-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.item-fields .field-title, .item-fields .field-catalog_system, .item-fields .field-system, .item-fields .field-base_material, .item-fields .field-decor, .item-fields .field-note { grid-column: span 2; }
.item-fields .field-note { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }

.order-detail-heading { margin-bottom: 24px; }
.detail-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.detail-heading-row h1 { max-width: 760px; }
.detail-subline { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; }
.subline-dot { color: #bcb4bf; }
.detail-heading-actions { display: flex; align-items: center; gap: 10px; flex: none; padding-top: 10px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: start; gap: 18px; }
.detail-main, .detail-side { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.detail-side { position: sticky; top: 20px; }
.overview-panel, .detail-section { padding: 24px; }
.overview-panel .panel-title-row { margin-bottom: 23px; }
.overview-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.overview-meta > div { border: 1px solid var(--line); border-radius: 10px; padding: 13px; }
.overview-meta span, .overview-meta strong { display: block; }
.overview-meta span { color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.overview-meta strong { font-size: 13px; }
.overview-description { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.overview-description .small-label { color: var(--muted); font-size: 9px; }
.overview-description p { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.detail-section > .panel-title-row { margin-bottom: 20px; }
.detail-section .panel-title-row h2 { margin-top: 5px; }
.position-list { display: grid; gap: 11px; }
.position-card { border: 1px solid var(--line); border-radius: 11px; padding: 18px; }
.position-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.position-index { color: var(--violet); font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.position-head h3 { margin: 4px 0 0; font-size: 14px; }
.position-percent { color: var(--violet-dark); font-size: 16px; }
.position-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0 16px; }
.position-tags span { background: #f6f3f6; border-radius: 5px; padding: 3px 7px; color: var(--ink-soft); font-size: 10px; }
.position-note { color: var(--ink-soft); font-size: 11px; margin: -3px 0 14px; }
.position-bottom { margin-top: 10px; color: var(--ink-soft); font-size: 11px; }
.position-bottom strong { color: var(--ink); }
.empty-section { padding: 20px 0 4px; color: var(--muted); font-size: 12px; }
.empty-section p { margin: 0; }
.empty-section a { color: var(--violet); font-weight: 700; display: inline-block; margin-top: 8px; }

.plan-task-list { display: grid; gap: 10px; }
.plan-task { border: 1px solid var(--line); border-left: 3px solid #9d7abe; border-radius: 10px; padding: 14px 16px; }
.plan-task-top, .plan-task-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-task-top time { color: var(--muted); font-size: 10px; font-weight: 700; }
.plan-task h3 { font-size: 13px; margin: 9px 0 4px; }
.plan-task-item, .plan-task-target { color: var(--ink-soft); font-size: 11px; margin: 2px 0; }
.plan-task-target strong { color: var(--ink); }
.plan-task-note { color: var(--ink-soft); font-size: 11px; line-height: 1.6; margin: 10px 0 0; overflow-wrap: anywhere; }
.plan-task-bottom { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.plan-task-bottom a { color: var(--violet); font-weight: 700; white-space: nowrap; }
.plan-task-bottom a:hover { text-decoration: underline; }
.plan-status { display: inline-flex; align-items: center; gap: 6px; flex: none; border-radius: 99px; padding: 5px 8px; font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.plan-status-planned { background: var(--blue-soft); color: var(--blue); }
.plan-status-in_progress { background: var(--violet-soft); color: var(--violet-dark); }
.plan-status-done { background: var(--green-soft); color: var(--green); }
.plan-status-blocked { background: #fff0e9; color: #a55032; }
.plan-create-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.plan-create-form h3 { margin: 0 0 3px; font-size: 13px; }
.plan-create-form > p { color: var(--muted); font-size: 11px; margin: 0 0 18px; }
.plan-create-form .field-note { grid-column: 1 / -1; }
.plan-create-form > .button { margin-top: 18px; }
.plan-board-panel { overflow: hidden; }
.plan-board-toolbar { padding: 20px 23px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.plan-date-nav { display: flex; align-items: center; gap: 16px; }
.plan-date-nav a { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; color: var(--ink-soft); }
.plan-date-nav a:hover { color: var(--violet); background: var(--violet-pale); }
.plan-date-nav strong { display: block; min-width: 150px; font-size: 17px; line-height: 1.25; margin-top: 3px; }
.plan-board-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); background: #fcfbfd; padding: 10px 23px; color: var(--muted); font-size: 10px; }
.plan-board-summary strong { color: var(--violet-dark); font-size: 13px; }
.plan-board-list { display: grid; gap: 10px; padding: 22px; }
.plan-board-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 11px; padding: 16px 18px; }
.plan-board-card-main { min-width: 0; flex: 1; }
.plan-board-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-order-link { color: var(--violet); font-size: 10px; font-weight: 750; overflow-wrap: anywhere; }
.plan-order-link:hover { text-decoration: underline; }
.plan-board-card h2 { font-size: 15px; line-height: 1.3; margin: 10px 0 5px; }
.plan-board-card-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.plan-board-card-meta span { color: var(--ink-soft); background: #f5f2f5; border-radius: 5px; padding: 3px 7px; font-size: 10px; }
.plan-board-card .plan-task-note { margin-top: 9px; }
.plan-completed { display: block; color: var(--muted); font-size: 10px; margin-top: 9px; }
.section-note { color: var(--muted); font-size: 11px; margin: -10px 0 19px; }
.activity-list { display: grid; gap: 0; }
.activity-row { display: flex; gap: 14px; border-bottom: 1px solid var(--line); padding: 13px 0; }
.activity-row:first-child { padding-top: 0; }
.activity-row:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-date { flex: none; width: 78px; display: flex; flex-direction: column; align-items: start; gap: 9px; }
.activity-date time { color: var(--muted); font-size: 10px; font-weight: 650; }
.activity-check { display: inline-grid; place-items: center; flex: none; width: 23px; height: 23px; background: var(--green-soft); color: var(--green); border-radius: 7px; font-size: 12px; font-weight: 800; }
.activity-content { flex: 1; min-width: 0; }
.activity-content h3 { margin: 0 0 5px; font-size: 12px; }
.rework-tag { display: inline-block; vertical-align: 1px; margin-left: 7px; border-radius: 5px; padding: 2px 5px; background: #fff1e8; color: #a35c30; font-size: 9px; font-weight: 700; }
.activity-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.activity-meta span { color: var(--ink-soft); background: #f5f7f5; border-radius: 5px; padding: 3px 7px; font-size: 10px; }
.activity-content p { color: var(--ink-soft); font-size: 11px; margin: 8px 0 0; }
.activity-content small { color: var(--muted); font-size: 10px; display: block; margin-top: 8px; }
.inline-edit-link { color: var(--violet); font-weight: 700; }
.inline-edit-link:hover { text-decoration: underline; }
.activity-board-panel, .completion-board-panel { margin-top: 18px; }
.plan-board-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding: 23px; border-bottom: 1px solid var(--line); }
.plan-board-section-heading h2 { margin: 5px 0 4px; font-size: 17px; }
.plan-board-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.activity-board-list { display: grid; gap: 10px; padding: 22px; }
.activity-board-card { display: flex; align-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.activity-board-card > div { min-width: 0; }
.activity-board-card h3 { margin: 6px 0; font-size: 13px; }
.activity-board-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.completion-check { display: inline-grid; place-items: center; flex: none; width: 23px; height: 23px; background: var(--violet-soft); color: var(--violet-dark); border-radius: 7px; font-size: 12px; font-weight: 800; }
.empty-inline-section { padding: 26px 23px; color: var(--muted); font-size: 12px; }

.chart-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.chart-legend span { width: 8px; height: 8px; border-radius: 2px; background: var(--violet); }
.metric-selector { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; }
.metric-selector label { color: var(--ink-soft); font-size: 10px; font-weight: 650; }
.metric-selector select { min-height: 35px; min-width: 118px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 6px 8px; color: var(--ink); font-size: 11px; }
.chart-wrap { position: relative; height: 226px; overflow-x: auto; }
.chart-grid { display: none; position: absolute; inset: 9px 0 24px; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-grid span { width: 100%; border-top: 1px dashed #eee9ef; }
.bar-chart { position: relative; display: grid; grid-template-columns: repeat(var(--day-count), minmax(26px, 1fr)); align-items: end; gap: 5px; height: 100%; min-width: max(100%, calc(var(--day-count) * 36px)); }
.bar-column { display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.bar-value { height: 16px; color: var(--violet-dark); font-size: 9px; line-height: 16px; white-space: nowrap; }
.bar-track { display: flex; align-items: end; flex: 1; width: 100%; justify-content: center; }
.bar { display: block; width: min(100%, 27px); background: linear-gradient(180deg, #9b75c3, var(--violet)); border-radius: 5px 5px 2px 2px; transition: opacity .15s; }
.bar-column:hover .bar { opacity: .72; }
.bar-label { display: block; width: 100%; height: 25px; padding-top: 6px; text-align: center; color: var(--muted); font-size: 9px; white-space: nowrap; }
.chart-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.calendar-title-row { align-items: end; }
.calendar-controls { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.calendar-controls a { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); font-size: 15px; }
.calendar-controls a:hover { background: var(--violet-pale); color: var(--violet); }
.calendar-controls strong { font-size: 11px; min-width: 90px; text-align: center; }
.calendar-scroll { overflow-x: auto; }
.production-calendar { width: 100%; min-width: 490px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.production-calendar th { text-align: left; padding: 0 6px 6px; color: var(--muted); font-size: 9px; font-weight: 650; }
.production-calendar td { border: 1px solid #ece8ed; border-radius: 8px; vertical-align: top; height: 67px; background: white; }
.production-calendar td.outside-month { background: #fbfafb; opacity: .48; }
.production-calendar td.has-production { border-color: #dbcde9; background: var(--violet-pale); }
.calendar-day { padding: 5px 6px; }
.calendar-day time, .calendar-day strong, .calendar-day small { display: block; }
.calendar-day time { color: var(--ink-soft); font-size: 9px; }
.calendar-day strong { color: var(--violet-dark); font-size: 9px; margin-top: 4px; white-space: nowrap; }
.calendar-day small { color: var(--muted); font-size: 8px; white-space: nowrap; }
.calendar-note { color: var(--muted); font-size: 10px; margin: 10px 0 0; }
.table-scroll { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.data-table th { border-bottom: 1px solid var(--line); padding: 0 10px 11px; color: var(--muted); font-size: 10px; font-weight: 650; text-align: left; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table td { border-bottom: 1px solid #f0edf0; padding: 13px 10px; font-size: 11px; color: var(--ink-soft); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td strong { color: var(--ink); font-weight: 650; }
.data-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.table-action { color: var(--violet); font-weight: 700; }
.table-action:hover { text-decoration: underline; }
.audit-list { display: grid; gap: 0; }
.audit-row { display: flex; align-items: start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.audit-row:first-child { padding-top: 0; }
.audit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-mark { flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--violet); border: 2px solid white; outline: 1px solid #cdb7df; border-radius: 50%; }
.audit-row strong, .audit-row small { display: block; }
.audit-row strong { font-size: 11px; }
.audit-row small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.comment-list { display: grid; gap: 0; }
.comment { display: flex; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.comment:first-child { padding-top: 0; }
.small-avatar { width: 29px; height: 29px; font-size: 10px; border-radius: 9px; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.comment-meta strong { font-size: 11px; overflow-wrap: anywhere; }
.comment-meta time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.comment-body p { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.comment-form { margin-top: 20px; }
.comment-form .button { margin-top: 12px; }
.side-panel { padding: 21px; }
.side-panel h2 { font-size: 16px; margin: 6px 0 5px; }
.side-panel > .muted { margin: 0 0 18px; font-size: 11px; }
.side-panel .form-stack { gap: 13px; }
.side-panel .panel-title-row { margin-bottom: 14px; }
.attachment-list { display: grid; gap: 7px; }
.attachment-link { display: flex; align-items: start; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 9px; min-width: 0; }
.attachment-link:hover { border-color: #cfbbdf; background: var(--violet-pale); }
.file-icon { flex: none; width: 25px; height: 25px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); border-radius: 6px; }
.attachment-link span:last-child { min-width: 0; }
.attachment-link strong, .attachment-link small { display: block; }
.attachment-link strong { color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }
.attachment-link small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.attachment-form { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 17px; }
.attachment-form .button { margin-top: 13px; }

.users-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); align-items: start; gap: 18px; }
.users-sections { display: grid; gap: 18px; min-width: 0; }
.invite-panel .section-heading { margin-bottom: 20px; }
.role-note { background: var(--violet-pale); border-radius: 9px; padding: 12px; color: var(--ink-soft); font-size: 10px; line-height: 1.65; margin-top: 20px; }
.role-note strong { color: var(--violet-dark); }
.table-panel { padding: 22px; }
.table-panel .panel-title-row { margin-bottom: 18px; }
.table-person { display: flex; align-items: center; gap: 9px; }
.table-person > span:last-child { min-width: 0; }
.role-tag { display: inline-block; border-radius: 6px; background: #f2f0f2; color: var(--ink-soft); font-size: 10px; font-weight: 650; padding: 4px 7px; }
.role-editor { background: var(--violet-soft); color: var(--violet-dark); }
.role-owner { background: #efe9dc; color: #765c28; }
.activity-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--green); }
.activity-indicator:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.activity-indicator.is-pending { color: var(--amber); }
.activity-indicator.is-inactive { color: var(--muted); }
.inline-control-form { display: flex; align-items: center; gap: 5px; }
.inline-control-form select { min-width: 110px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink-soft); font-size: 10px; padding: 5px; }
.inline-control-form button { border: 1px solid #dcd5e4; border-radius: 6px; background: var(--violet-pale); color: var(--violet-dark); font-size: 11px; font-weight: 800; width: 25px; height: 25px; }
.inline-control-form button:hover { background: var(--violet-soft); }
.table-action-button { border: 0; background: none; padding: 3px 0; color: var(--violet); font-size: 10px; font-weight: 700; white-space: nowrap; }
.table-action-button:hover { text-decoration: underline; }
.empty-inline { color: var(--muted); margin: 0; font-size: 12px; }
.narrow-content { max-width: 650px; }

.flash-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { background: #f1eaf9; border: 1px solid #dccbe9; color: var(--violet-dark); border-radius: 9px; padding: 10px 13px; font-size: 12px; }
.flash-success { background: #e7f5ec; border-color: #c6e7d3; color: #216a4b; }
.flash-error { background: #fff0f0; border-color: #f2cdd0; color: #a03340; }

.auth-page { background: white; }
.auth-layout { display: grid; grid-template-columns: minmax(360px, 46%) minmax(0, 1fr); min-height: 100vh; }
.auth-intro { position: relative; overflow: hidden; background: #634192; color: white; display: flex; flex-direction: column; padding: 46px clamp(35px, 5vw, 80px); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: .08em; }
.auth-brand .brand-mark { background: white; color: var(--violet); }
.auth-brand .brand-dot { color: #cbb0e7; }
.auth-intro-bottom { position: relative; z-index: 1; margin: auto 0 62px; max-width: 480px; }
.eyebrow-light { color: #d7bff0; }
.auth-intro-bottom h1 { font-size: clamp(42px, 5.2vw, 75px); line-height: 1.07; letter-spacing: -.055em; margin: 17px 0 20px; font-weight: 720; }
.auth-intro-bottom p { max-width: 360px; color: #e8dbf2; font-size: 14px; line-height: 1.65; }
.auth-decoration { position: absolute; width: 420px; height: 520px; right: -165px; bottom: -170px; transform: rotate(-27deg); opacity: .13; }
.auth-decoration span { display: block; width: 100%; height: 105px; margin-bottom: 17px; border: 2px solid white; border-radius: 17px; }
.auth-form-wrap { display: grid; place-items: center; padding: 35px; }
.auth-form-inner { width: min(100%, 370px); }
.auth-form-inner h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; margin: 10px 0 6px; }
.auth-form-inner > .muted { font-size: 12px; margin: 0 0 30px; }
.auth-form { gap: 18px; }
.auth-form .button { margin-top: 6px; }
.auth-footnote { color: var(--muted); font-size: 11px; margin-top: 25px; }
.auth-footnote a { color: var(--violet); font-weight: 700; }
.auth-flashes { position: fixed; right: 20px; top: 20px; z-index: 10; width: min(350px, calc(100% - 40px)); }

@media (max-width: 1220px) {
  .app-shell { grid-template-columns: 215px minmax(0, 1fr); }
  .main-content { padding-inline: 30px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  .users-layout { grid-template-columns: 310px minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 20px; background: white; border-bottom: 1px solid var(--line); }
  .mobile-brand { font-size: 17px; font-weight: 800; letter-spacing: .09em; }
  .mobile-header-label { color: var(--muted); font-size: 11px; }
  .mobile-nav { display: flex; align-items: center; gap: 14px; overflow-x: auto; padding: 0 20px; background: white; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .mobile-nav a, .mobile-nav button { display: block; border: 0; background: none; padding: 11px 0; color: var(--ink-soft); font-size: 11px; font-weight: 650; }
  .mobile-nav .is-active { color: var(--violet); box-shadow: inset 0 -2px var(--violet); }
  .mobile-nav form { margin-left: auto; }
  .main-content { padding: 29px 18px 55px; }
  .page-heading h1 { font-size: 30px; }
  .heading-with-action { align-items: start; }
  .detail-heading-row { flex-direction: column; gap: 8px; }
  .detail-heading-actions { padding-top: 0; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-intro { min-height: 230px; padding: 25px; }
  .auth-intro-bottom { margin: auto 0 0; }
  .auth-intro-bottom h1 { font-size: 34px; margin: 8px 0; }
  .auth-intro-bottom p { font-size: 11px; margin-bottom: 0; }
  .auth-form-wrap { padding: 40px 22px; align-items: start; }
}
@media (max-width: 550px) {
  .heading-with-action { display: block; }
  .heading-with-action .button { margin-top: 19px; width: 100%; }
  .order-list-actions { flex-direction: column; gap: 0; }
  .list-toolbar { padding: 15px; }
  .search-wrap { max-width: none; }
  .filter-pills { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .filter-pill { flex: none; }
  .order-cards { padding: 14px; grid-template-columns: 1fr; }
  .order-card { min-height: 207px; }
  .form-panel, .overview-panel, .detail-section { padding: 18px; }
  .form-grid, .item-fields { grid-template-columns: 1fr; }
  .item-fields .field-title, .item-fields .field-catalog_system, .item-fields .field-system, .item-fields .field-base_material, .item-fields .field-decor, .item-fields .field-note { grid-column: auto; }
  .item-form-card { padding: 14px; }
  .form-actions { flex-wrap: wrap-reverse; }
  .form-actions .button { flex: 1; }
  .detail-side { grid-template-columns: minmax(0, 1fr); }
  .overview-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .overview-meta > div { padding: 9px; }
  .overview-meta strong { font-size: 10px; }
  .calendar-title-row { display: block; }
  .calendar-controls { margin-top: 12px; }
  .bar-chart { gap: 2px; }
  .bar-label { font-size: 7px; }
  .chart-title-row { align-items: start; }
  .comment-meta { display: block; }
  .comment-meta time { display: block; margin-top: 2px; }
  .plan-board-toolbar { padding: 15px; }
  .plan-date-nav { gap: 7px; }
  .plan-date-nav strong { min-width: 0; font-size: 14px; }
  .plan-board-summary { display: block; padding: 11px 15px; }
  .plan-board-summary span { display: block; }
  .plan-board-summary span + span { margin-top: 3px; }
  .plan-board-list { padding: 14px; }
  .plan-board-card { align-items: start; flex-direction: column; gap: 13px; }
  .plan-board-card > .button { align-self: flex-start; }
  .plan-board-section-heading { padding: 17px; }
  .activity-board-list { padding: 14px; }
}

/* Order overview and factory scope */
.factory-switcher { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 19px; margin: -7px 0 18px; border: 1px solid #e2d9e8; border-radius: 15px; background: linear-gradient(105deg, #fbf9fd, #f8f7f4); }
.factory-switcher-copy { display: grid; gap: 3px; }
.factory-switcher-copy strong { font-size: 14px; font-weight: 750; }
.factory-switcher-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.factory-switcher-option { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid #ded9e3; border-radius: 9px; background: white; color: var(--ink-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.factory-switcher-option:not(.is-locked):hover { border-color: #bfa8d4; background: var(--violet-pale); color: var(--violet-dark); }
.factory-switcher-option.is-active { border-color: #ae8cca; background: var(--violet-soft); color: var(--violet-dark); box-shadow: 0 2px 7px rgba(112, 70, 165, .08); }
.factory-switcher-option.is-locked { color: #a8a1aa; background: #f7f6f7; cursor: not-allowed; }
.factory-switcher-dot { width: 8px; height: 8px; border-radius: 50%; background: #bbaac9; flex: none; }
.factory-switcher-option.is-active .factory-switcher-dot { background: var(--violet); }
.factory-switcher-option.is-locked .factory-switcher-dot { background: #d8d3d9; }
.factory-switcher-lock { margin-left: 3px; padding-left: 6px; border-left: 1px solid #e1dde3; font-size: 9px; color: #928b96; font-weight: 600; }
.order-card { position: relative; overflow: hidden; padding-left: 22px; }
.order-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--order-accent, #ad9cbd); }
.order-card:hover { border-color: var(--order-accent, #cbb9dc); }
.order-card .order-number { color: var(--ink-soft); background: var(--order-accent-soft, #f7f4fa); border-radius: 6px; padding: 5px 7px; margin: -5px 0; }
.order-card-factory { width: fit-content; margin: 9px 0 6px; padding: 3px 7px; border-radius: 6px; background: #f4f0f7; color: var(--violet-dark); font-size: 10px; font-weight: 750; }
.detail-subline { flex-wrap: wrap; }
.detail-factory { color: var(--violet-dark); font-weight: 750; }

/* Subtle hatch marks distinguish sections within an order. */
.pattern-panel { position: relative; overflow: hidden; }
.pattern-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; pointer-events: none; opacity: .75; }
.pattern-diagonal::before { background: repeating-linear-gradient(135deg, #c6bccd 0 2px, #f7f4f8 2px 7px); }
.pattern-lines::before { background: repeating-linear-gradient(0deg, #c8c0cc 0 2px, #f7f5f8 2px 9px); }
.pattern-cross::before { background: repeating-linear-gradient(135deg, transparent 0 5px, #cbc3d1 5px 7px, transparent 7px 12px), repeating-linear-gradient(45deg, #f8f6f9 0 6px, #d5cdda 6px 7px, #f8f6f9 7px 12px); }
.pattern-dots::before { background-color: #faf8fb; background-image: radial-gradient(#bfb4c8 1.4px, transparent 1.5px); background-size: 7px 7px; }

.order-action-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: stretch; gap: 18px; margin-bottom: 18px; }
.order-action-row > * { min-width: 0; }
.order-action-row--comments-only { grid-template-columns: minmax(0, 1fr); }
.quick-production { margin: 0; padding: 23px 26px; border-color: #d9c9e8; background: linear-gradient(112deg, #fbf9fe, #f2ebf9); }
.quick-production-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.quick-production-intro h2 { margin: 4px 0 4px; font-size: 20px; letter-spacing: -.025em; }
.quick-production-intro p { max-width: 720px; color: var(--ink-soft); font-size: 11px; margin: 0; }
.quick-production-mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: #e3d5f0; color: var(--violet-dark); font-size: 24px; font-weight: 500; }
.quick-production-form { display: grid; gap: 16px; }
.quick-production-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.quick-production-fields .field-note { grid-column: 1 / -1; }
.quick-production-form > .button { justify-self: start; min-height: 44px; padding-inline: 21px; }
.comments-highlight { display: flex; flex-direction: column; margin: 0; padding: 23px 26px; border-color: #d9c9e8; background: linear-gradient(112deg, #fbf9fe, #f2ebf9); box-shadow: none; }
.comments-highlight .panel-title-row h2 { margin: 5px 0 0; font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.comments-highlight .comment { border-color: #e2d8eb; }
.comments-highlight .comment-list { max-height: 260px; overflow-y: auto; }
.order-action-row--comments-only .comment-list { max-height: none; overflow: visible; }
.comments-highlight .comment-form { margin-top: auto; padding-top: 20px; }
.comments-highlight .comment-form .button { min-height: 44px; padding-inline: 21px; }
.statistics-divider { height: 1px; background: var(--line); margin: 25px 0 22px; }
.statistics-section .calendar-title-row h3 { margin: 5px 0 0; font-size: 15px; letter-spacing: -.015em; }

@media (max-width: 1100px) {
  .order-action-row { grid-template-columns: minmax(0, 1fr); }
  .comments-highlight .comment-list { max-height: none; overflow: visible; }
}
@media (max-width: 550px) {
  .factory-switcher { margin-top: 0; padding: 14px; }
  .factory-switcher-options { width: 100%; }
  .factory-switcher-option { flex: 1; justify-content: center; }
  .quick-production { padding: 18px; }
  .comments-highlight { padding: 18px; }
  .quick-production-intro h2 { font-size: 18px; }
  .quick-production-mark { width: 35px; height: 35px; font-size: 20px; }
  .quick-production-fields { grid-template-columns: minmax(0, 1fr); }
  .quick-production-form > .button { width: 100%; }
  .comments-highlight .comment-form .button { width: 100%; }
}

/* Order editor keeps the everyday panel flow compact. */
.order-edit-form .order-info-panel { background: #f2ebf8; border-color: #ded0e9; }
.order-edit-form .order-info-panel .section-heading { border-color: #ddcfeb; }
.order-edit-form .order-info-panel .section-icon { background: #e3d5ef; color: #624085; }
.order-edit-form .order-items-panel { background: #f5faf6; border-color: #dce8de; }
.order-edit-form .order-items-panel .section-heading { border-color: #dce8de; }
.order-edit-form .order-items-panel .section-icon { background: #e2eee5; color: #3b7657; }
[data-item-form][data-kind="product"] [data-panel-only],
[data-item-form][data-kind="work"] [data-panel-only] { display: none; }
.order-edit-form .order-files-panel { background: #fcfaf7; border-color: #e9e4dc; }
.order-edit-form .order-files-panel .section-heading { margin-bottom: 17px; }
.order-edit-form .order-files-panel .section-icon { background: #f1e8dc; color: #8f683d; }
.order-edit-form .item-form-card { padding: 21px; background: white; border-color: #dbe7de; }
.order-edit-form .item-form-heading { margin-bottom: 17px; }
.item-heading-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.item-number-chip { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; color: #3d7454; background: #e8f2e9; font-size: 12px; font-weight: 800; }
.item-heading-label h3 { margin: 0; font-size: 13px; }
.item-heading-label small { display: block; color: #748477; font-size: 10px; margin-top: 1px; }
.item-form-card [data-remove-item]:disabled { opacity: .38; cursor: default; text-decoration: none; }
.item-kind-details { margin-bottom: 17px; border-bottom: 1px solid #edf1ed; padding-bottom: 15px; }
.item-kind-details summary { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #4b7259; font-size: 11px; font-weight: 750; cursor: pointer; list-style: none; }
.item-kind-details summary::-webkit-details-marker, .item-extra-details summary::-webkit-details-marker { display: none; }
.item-kind-details summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #e7f1e9; font-size: 15px; line-height: 1; }
.item-kind-details[open] summary::before { content: "−"; }
.item-kind-details summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.item-kind-details .field { max-width: 320px; margin-top: 13px; }
.item-core-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.item-core-grid .field { min-width: 0; }
.item-core-grid .field-title, .item-core-grid .field-catalog_system, .item-core-grid .field-base_material, .item-core-grid .field-decor { grid-column: span 3; }
.item-core-grid .field-planned_quantity, .item-core-grid .field-unit, .item-core-grid .field-due_date { grid-column: span 2; }
.item-core-grid .field label { min-height: 16px; line-height: 16px; }
.item-core-grid .field input, .item-core-grid .field select { height: 42px; }
.item-core-help { margin: 11px 0 0; color: #728276; font-size: 10px; }
.item-extra-details { margin-top: 17px; border-top: 1px solid #e7eee8; padding-top: 15px; }
.item-extra-details summary { display: flex; align-items: center; justify-content: space-between; width: fit-content; min-width: 190px; gap: 17px; color: var(--violet-dark); font-size: 11px; font-weight: 750; cursor: pointer; list-style: none; }
.item-extra-details summary span { font-size: 17px; line-height: .7; transition: transform .15s; }
.item-extra-details[open] summary span { transform: rotate(180deg); }
.item-extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 17px; }
.item-extra-grid .field-system, .item-extra-grid .field-note { grid-column: 1 / -1; }
.item-extra-grid .field-note textarea { min-height: 74px; }
.item-extra-help { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.add-item-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 68px; margin-top: 15px; gap: 12px; border: 2px dashed #9ec6a7; border-radius: 12px; background: #eaf5ec; color: #285c3c; font-size: 14px; font-weight: 800; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.add-item-button:hover { background: #e0f0e3; border-color: #5ca773; transform: translateY(-1px); }
.add-item-button small { display: block; margin-top: 2px; color: #63836d; font-size: 10px; font-weight: 550; }
.add-item-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: white; background: #529067; font-size: 25px; line-height: 1; font-weight: 400; }
.order-file-input { border: 1px dashed #d9cec0; border-radius: 11px; background: white; padding: 19px; }
.order-file-input label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 750; }
.order-file-input input { display: block; width: 100%; font-size: 11px; color: var(--ink-soft); }
.order-file-input input::file-selector-button { margin-right: 10px; border: 1px solid #dbcdbb; border-radius: 8px; background: #f9f2e9; color: #775a38; padding: 9px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.order-file-input p { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
@media (max-width: 780px) {
  .item-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-core-grid .field-title, .item-core-grid .field-catalog_system, .item-core-grid .field-due_date { grid-column: span 2; }
  .item-core-grid .field-base_material, .item-core-grid .field-decor, .item-core-grid .field-planned_quantity, .item-core-grid .field-unit { grid-column: span 1; }
}
@media (max-width: 550px) {
  .order-edit-form .item-form-card { padding: 14px; }
  .item-core-grid, .item-extra-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .item-core-grid > .field, .item-extra-grid > .field { grid-column: 1 / -1; }
  .item-kind-details summary small { display: none; }
  .add-item-button { min-height: 64px; }
}