:root {
    --page: #eef2f5;
    --ink: #14191f;
    --ink-soft: #374151;
    --muted: #6b7280;
    --line: #d9e0e7;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --nav: #121820;
    --nav-2: #1c2632;
    --nav-line: rgba(255, 255, 255, 0.09);
    --green: #1f8a5b;
    --green-soft: #e7f5ee;
    --blue: #286ca8;
    --blue-soft: #e6f0fa;
    --amber: #b86f17;
    --amber-soft: #fff1dd;
    --red: #b84238;
    --red-soft: #fde7e3;
    --violet: #7654b7;
    --violet-soft: #eee8fb;
    --shadow: 0 18px 42px rgba(29, 38, 48, 0.09);
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

/* Material price requests */
.material-request-shell { margin-top: 22px; }
.material-request-shell .material-price-workspace { min-width: 0; }
.price-request-overview { display: grid; gap: 16px; }
.price-request-intro {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
    padding: 28px 30px; border: 1px solid #dbe5ec; border-radius: 24px;
    background: linear-gradient(135deg, #f8fbfd 0%, #eef7f5 100%); box-shadow: 0 14px 36px rgba(25, 55, 72, .07);
}
.price-request-intro-icon { display: grid; place-items: center; width: 54px; height: 54px; color: #fff; border-radius: 17px; background: linear-gradient(145deg, #173b57, #11746b); box-shadow: 0 10px 24px rgba(17, 92, 91, .24); }
.price-request-intro-icon svg { width: 25px; height: 25px; }
.price-request-intro h1 { margin: 3px 0 5px; color: #173449; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.15; }
.price-request-intro p:not(.eyebrow) { margin: 0; max-width: 760px; color: #637684; font-size: 14px; line-height: 1.65; }
.price-request-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.price-request-kpis article { display: flex; align-items: center; gap: 13px; min-height: 108px; padding: 18px; border: 1px solid #e0e8ed; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(28, 58, 74, .045); }
.price-request-kpis article div { display: grid; gap: 2px; }
.price-request-kpis small { color: #71818b; font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.price-request-kpis strong { color: #173449; font-size: 26px; line-height: 1; }
.price-request-kpis em { color: #8b99a2; font-size: 11px; font-style: normal; }
.request-kpi-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; font-size: 18px; font-weight: 900; }
.request-kpi-icon.is-open { color: #176f66; background: #ddf4ef; }.request-kpi-icon.is-waiting { color: #936617; background: #fff0cc; }.request-kpi-icon.is-urgent { color: #b84738; background: #ffe4df; }.request-kpi-icon.is-done { color: #3a6888; background: #e2eff8; }
.price-request-board { margin-top: 18px; padding: 0; overflow: hidden; border-radius: 22px; }
.price-request-board-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding: 23px 26px 19px; border-bottom: 1px solid #e5ecef; background: #fff; }
.price-request-board-head h2 { margin: 2px 0 3px; color: #19384d; font-size: 21px; }.price-request-board-head > div > span { color: #86949d; font-size: 12px; }
.request-legend { display: flex; gap: 16px; padding-bottom: 4px; color: #71818b; font-size: 11px; font-weight: 700; }.request-legend span { display: flex; align-items: center; gap: 6px; }.request-legend i { width: 8px; height: 8px; border-radius: 50%; background: #27a08f; }.request-legend i.is-waiting { background: #e4a52e; }.request-legend i.is-done { background: #7594aa; }
.price-request-list { display: grid; gap: 0; background: #f8fafb; }
.price-request-card { display: grid; grid-template-columns: 5px minmax(230px, 1.1fr) minmax(410px, 1.5fr) auto; gap: 20px; align-items: center; min-height: 126px; padding: 20px 24px 20px 0; border-bottom: 1px solid #e5ecef; background: #fff; transition: background .18s ease, transform .18s ease; }
.price-request-card:last-child { border-bottom: 0; }.price-request-card:hover { background: #fbfdfd; }
.price-request-card.is-selected { background: #edf9f6; box-shadow: inset 0 0 0 2px rgba(24, 139, 121, .28); }
.price-request-state { align-self: stretch; border-radius: 0 4px 4px 0; background: #21a08d; }.price-request-card.is-approval_pending .price-request-state { background: #e3a52e; }.price-request-card.is-completed .price-request-state { background: #7896aa; }.price-request-card.is-cancelled .price-request-state { background: #b4bec4; }.price-request-card.is-urgent .price-request-state { background: #d65645; }
.price-request-main { min-width: 0; }.price-request-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }.request-code { color: #176f66; font-size: 11px; font-weight: 900; letter-spacing: .06em; }.request-priority { padding: 3px 6px; color: #ad3e30; border-radius: 5px; background: #ffe5e0; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.request-status { padding: 4px 8px; color: #167267; border-radius: 999px; background: #e1f4f0; font-size: 10px; font-weight: 800; }.request-status.is-approval_pending { color: #946714; background: #fff0ce; }.request-status.is-completed { color: #52728a; background: #e7f0f6; }.request-status.is-cancelled { color: #697780; background: #edf1f3; }
.price-request-main h3 { margin: 0 0 5px; overflow: hidden; color: #18364a; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }.price-request-main p { margin: 0; overflow: hidden; color: #788791; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.request-price-preview { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }.request-price-preview strong { color: #176f66; font-size: 15px; }.request-price-preview span { color: #81909a; font-size: 10px; }
.material-request-inbox { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.material-request-inbox-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 92px; padding: 17px 19px; color: inherit; border: 1px solid #d9e7e3; border-radius: 18px; background: linear-gradient(135deg,#f1faf7,#fff); box-shadow: 0 8px 24px rgba(24,72,72,.06); text-decoration: none; }
.material-request-inbox-card.is-approval { border-color: #eadfbe; background: linear-gradient(135deg,#fff8e8,#fff); }.material-request-inbox-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #167568; border-radius: 13px; background: #d9f2eb; }.material-request-inbox-card.is-approval .material-request-inbox-icon { color: #956a19; background: #ffedc4; }.material-request-inbox-icon svg { width: 20px; }.material-request-inbox-card div { display: grid; gap: 2px; }.material-request-inbox-card small { color: #70838a; font-size: 9px; font-weight: 900; letter-spacing: .08em; }.material-request-inbox-card strong { color: #18384b; font-size: 15px; }.material-request-inbox-card em { color: #7f8e96; font-size: 11px; font-style: normal; }.material-request-inbox-card b { color: #176f66; font-size: 11px; white-space: nowrap; }.material-request-inbox-card.is-approval b { color: #956a19; }
.price-request-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; }.price-request-details div { min-width: 0; }.price-request-details small { display: block; margin-bottom: 3px; color: #94a0a8; font-size: 9px; font-weight: 900; letter-spacing: .07em; }.price-request-details strong { display: block; overflow: hidden; color: #435966; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.price-request-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 142px; }.request-icon-button { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; color: #58717f; border: 1px solid #d9e3e8; border-radius: 10px; background: #fff; cursor: pointer; }.request-icon-button svg { width: 15px; }.request-icon-button span { font-size: 10px; font-weight: 800; }.request-locked-note,.request-complete-note { color: #8b6b24; font-size: 11px; font-weight: 800; }.request-complete-note { display: inline-flex; align-items: center; gap: 6px; color: #56788e; }.request-complete-note svg { width: 15px; }
.price-request-empty { min-height: 280px; margin: 18px; border: 1px dashed #cad8df; border-radius: 18px; background: #fff; }.price-request-empty .primary-button { margin-top: 12px; }
#priceRequestModal { width: min(880px, calc(100vw - 36px)); max-height: min(820px, calc(100vh - 42px)); padding: 0; overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 30px 80px rgba(13, 35, 48, .28); }
#priceRequestModal > .modal-header { padding: 22px 26px; color: #fff; border: 0; background: linear-gradient(135deg, #173b57, #126b65); }#priceRequestModal > .modal-header h2,#priceRequestModal > .modal-header .eyebrow { color: #fff; }#priceRequestModal > .modal-header .icon-button { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
#priceRequestForm { max-height: calc(100vh - 145px); padding: 25px 27px 0; overflow-y: auto; }#priceRequestForm .modal-actions { position: sticky; bottom: 0; margin: 22px -27px 0; padding: 16px 27px; border-top: 1px solid #e4ebef; background: rgba(255,255,255,.97); }
#priceRequestForm fieldset { margin: 2px 0; padding: 15px 17px; border: 1px solid #dce6eb; border-radius: 15px; }#priceRequestForm legend { padding: 0 7px; color: #536a77; font-size: 11px; font-weight: 800; }.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }.choice-card { display: flex!important; flex-direction: row!important; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e1e8ec; border-radius: 11px; background: #f9fbfc; }.choice-card input { width: 17px!important; height: 17px; margin: 0; }.choice-card span { display: grid; gap: 1px; }.choice-card strong { color: #314b5a; font-size: 12px; }.choice-card small { color: #89969e; font-size: 10px; }
@media (max-width: 1180px) { .price-request-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.price-request-card { grid-template-columns: 5px minmax(220px,1fr) minmax(300px,1.25fr); }.price-request-actions { grid-column: 2 / -1; justify-content: flex-start; }.price-request-card { padding-bottom: 16px; } }
@media (max-width: 760px) { .price-request-intro { grid-template-columns: auto 1fr; padding: 21px; }.price-request-intro .primary-button { grid-column: 1 / -1; width: 100%; }.price-request-kpis { grid-template-columns: 1fr 1fr; }.price-request-kpis article { min-height: 92px; padding: 13px; }.price-request-card { grid-template-columns: 4px minmax(0,1fr); gap: 14px; padding: 17px 17px 17px 0; }.price-request-details,.price-request-actions { grid-column: 2; }.price-request-details { grid-template-columns: 1fr 1fr; }.request-legend { display: none; }.price-request-board-head { align-items: flex-start; }.choice-grid { grid-template-columns: 1fr; }.material-request-inbox { grid-template-columns: 1fr; } }

.global-live-cost-runner {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 7800;
    width: min(370px, calc(100vw - 28px));
    overflow: hidden;
    color: #f8fafc;
    background: linear-gradient(145deg, #102f46, #0f625e);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    box-shadow: 0 22px 55px rgba(15, 47, 70, .3);
}

.global-live-cost-runner-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.global-live-cost-runner-toggle span:nth-child(2) { display: grid; gap: 2px; }
.global-live-cost-runner-toggle strong { font-size: 14px; }
.global-live-cost-runner-toggle small { color: #c7e4e1; }
.global-live-cost-runner-toggle b {
    min-width: 34px;
    padding: 6px 8px;
    color: #12364b;
    text-align: center;
    background: #d9f5ed;
    border-radius: 999px;
}

.global-live-cost-runner-pulse {
    width: 11px;
    height: 11px;
    background: #62e6bd;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(98, 230, 189, .5);
    animation: global-live-cost-pulse 1.7s infinite;
}

.global-live-cost-runner-body { padding: 0 16px 14px; }
.global-live-cost-progress {
    height: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
    border-radius: 99px;
}
.global-live-cost-progress i {
    display: block;
    width: 8%;
    height: 100%;
    background: linear-gradient(90deg, #62e6bd, #b9f4e1);
    border-radius: inherit;
    transition: width .35s ease;
}
.global-live-cost-source { margin-top: 10px; font-size: 13px; font-weight: 700; }
.global-live-cost-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    color: #c7e4e1;
    font-size: 12px;
}
.global-live-cost-actions a { color: #fff; font-weight: 800; }
.global-live-cost-runner.is-collapsed .global-live-cost-runner-body { display: none; }
.global-live-cost-runner.is-error { background: linear-gradient(145deg, #642622, #9a3412); }

@keyframes global-live-cost-pulse {
    70% { box-shadow: 0 0 0 10px rgba(98, 230, 189, 0); }
    100% { box-shadow: 0 0 0 0 rgba(98, 230, 189, 0); }
}

@media (max-width: 700px) {
    .global-live-cost-runner { right: 14px; bottom: 14px; }
}

/* Toplu malzeme fiyat onizlemesi */
#bulkMaterialPriceModal.bulk-material-price-modal {
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100vh - 96px);
    padding: 0;
    overflow: hidden;
}

#bulkMaterialPriceModal.bulk-material-price-modal:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#bulkMaterialPriceModal.bulk-material-price-modal > .modal-header {
    flex: 0 0 auto;
    margin: 0;
    padding: 20px 24px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

#bulkMaterialPriceModal.bulk-material-price-modal > .modal-header h2 {
    margin: 5px 0 4px;
    color: #132d40;
    font-size: 22px;
    line-height: 1.2;
}

#bulkMaterialPriceModal.bulk-material-price-modal > .modal-header > div > span {
    display: block;
    color: #6b7f90;
    font-size: 12px;
    font-weight: 600;
}

#bulkMaterialPriceModal.bulk-material-price-modal > form {
    padding: 22px 24px 0;
}

#bulkMaterialPriceModal .bulk-material-price-preview:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    padding: 22px 24px 0;
}

#bulkMaterialPriceModal .bulk-material-price-preview .notice {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid #bde5d4;
    border-radius: 14px;
    background: #f0fbf6;
    color: #173e31;
    padding: 14px 16px;
}

#bulkMaterialPriceModal .bulk-material-price-preview .notice.is-warning {
    border-color: #efd2a4;
    background: #fff8ec;
    color: #6d4714;
}

#bulkMaterialPriceModal .bulk-preview-summary-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: #d9f3e7;
    color: #19714d;
    font-size: 17px;
    font-weight: 900;
}

#bulkMaterialPriceModal .notice.is-warning .bulk-preview-summary-icon {
    background: #ffebc7;
    color: #a15f09;
}

#bulkMaterialPriceModal .bulk-material-price-preview .notice > div {
    display: grid;
    gap: 2px;
}

#bulkMaterialPriceModal .bulk-material-price-preview .notice strong {
    font-size: 14px;
}

#bulkMaterialPriceModal .bulk-material-price-preview .notice span:not(.bulk-preview-summary-icon) {
    color: #668074;
    font-size: 12px;
}

#bulkMaterialPriceModal .bulk-material-price-table-wrap {
    min-height: 230px;
    max-height: min(430px, calc(100vh - 300px));
    overflow: auto;
    border: 1px solid #d8e4ec;
    border-radius: 14px;
    background: #f7fafc;
}

#bulkMaterialPriceModal .bulk-material-price-table {
    width: 100%;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0 10px;
    padding: 0 12px 12px;
}

#bulkMaterialPriceModal .bulk-material-price-table col.is-row {
    width: 72px;
}

#bulkMaterialPriceModal .bulk-material-price-table col.is-price {
    width: 190px;
}

#bulkMaterialPriceModal .bulk-material-price-table col.is-status {
    width: 180px;
}

#bulkMaterialPriceModal .bulk-material-price-table th,
#bulkMaterialPriceModal .bulk-material-price-table td {
    padding: 14px 16px !important;
    vertical-align: middle;
}

#bulkMaterialPriceModal .bulk-material-price-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7fafc;
    color: #728394;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 #d8e4ec;
}

#bulkMaterialPriceModal .bulk-material-price-table tbody td {
    border-top: 1px solid #dce7ee;
    border-bottom: 1px solid #dce7ee;
    background: #fff;
}

#bulkMaterialPriceModal .bulk-material-price-table tbody td:first-child {
    border-left: 1px solid #dce7ee;
    border-radius: 12px 0 0 12px;
}

#bulkMaterialPriceModal .bulk-material-price-table tbody td:last-child {
    border-right: 1px solid #dce7ee;
    border-radius: 0 12px 12px 0;
}

#bulkMaterialPriceModal .bulk-preview-row-number {
    color: #7890a2;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

#bulkMaterialPriceModal .bulk-preview-material,
#bulkMaterialPriceModal .bulk-preview-price,
#bulkMaterialPriceModal .bulk-preview-status {
    min-width: 0;
}

#bulkMaterialPriceModal .bulk-preview-material span {
    display: block;
    overflow: hidden;
    color: #718496;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkMaterialPriceModal .bulk-preview-material strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #172f41;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#bulkMaterialPriceModal .bulk-preview-price {
    white-space: nowrap;
}

#bulkMaterialPriceModal .bulk-preview-price strong {
    color: #173f5a;
    font-size: 16px;
}

#bulkMaterialPriceModal .bulk-preview-price span {
    margin-left: 6px;
    color: #768b9b;
    font-size: 11px;
    font-weight: 800;
}

#bulkMaterialPriceModal .bulk-preview-status > span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 850;
}

#bulkMaterialPriceModal .bulk-preview-status > span.is-ready {
    background: #e4f6ed;
    color: #19714d;
}

#bulkMaterialPriceModal .bulk-preview-status > span.is-error {
    background: #fff0dc;
    color: #a15f09;
}

#bulkMaterialPriceModal .bulk-preview-status small {
    display: block;
    margin-top: 4px;
    color: #9b5e1a;
    font-size: 10px;
    line-height: 1.35;
}

#bulkMaterialPriceModal .bulk-material-price-preview > .modal-actions {
    flex: 0 0 auto;
    bottom: 0;
    margin: 0 -24px;
    padding: 14px 24px 16px;
}

@media (max-width: 720px) {
    #bulkMaterialPriceModal.bulk-material-price-modal {
        top: 16px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 32px);
    }

    #bulkMaterialPriceModal.bulk-material-price-modal > .modal-header,
    #bulkMaterialPriceModal.bulk-material-price-modal > form,
    #bulkMaterialPriceModal .bulk-material-price-preview:not([hidden]) {
        padding-left: 16px;
        padding-right: 16px;
    }

    #bulkMaterialPriceModal .bulk-material-price-preview > .modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 16px;
        padding-left: 16px;
    }

    #bulkMaterialPriceModal .bulk-material-price-preview > .modal-actions button {
        width: 100%;
    }
}

.material-price-import-batches {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.material-price-import-batch {
    display: grid;
    gap: 14px;
    border: 1px solid #244c67;
    border-radius: 16px;
    background: linear-gradient(135deg, #173b53 0%, #214e68 58%, #173d53 100%);
    color: #fff;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(17, 55, 78, 0.18);
}

.material-price-import-batch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.material-price-import-batch-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.material-price-import-batch-head > div > strong {
    color: #fff;
    font-size: 17px;
}

.material-price-import-batch-head > div > em {
    color: #c9dce8;
    font-size: 12px;
    font-style: normal;
}

.material-price-import-batch-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8ed4ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.material-price-import-batch-head .primary-button {
    flex: 0 0 auto;
    border-color: #fff;
    background: #fff;
    color: #173b53;
}

.material-price-import-batch-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.material-price-import-batch-items > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    padding: 12px;
}

.material-price-import-batch-items span,
.material-price-import-batch-items em {
    overflow: hidden;
    color: #bfd3df;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-import-batch-items strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-import-batch-more {
    margin: 0;
    border-radius: 10px;
    background: rgba(8, 29, 43, .3);
    color: #d8e8f1;
    padding: 10px 12px;
    font-size: 12px;
}

.material-price-import-batch-more strong {
    color: #fff;
}

@media (max-width: 780px) {
    .material-price-import-batch-head {
        align-items: stretch;
        flex-direction: column;
    }

    .material-price-import-batch-items {
        grid-template-columns: 1fr;
    }

    .material-price-import-batch-head .primary-button {
        width: 100%;
    }
}

/* Material pricing */

.material-price-main {
    gap: 16px;
}

.material-price-hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(640px, 1.1fr);
    gap: 18px;
    padding: 28px;
    border: 1px solid #cfe1ed;
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 16%, rgba(38, 126, 106, 0.18), transparent 26%),
        linear-gradient(135deg, #f1fbf7 0%, #eef7ff 52%, #fff8ed 100%);
    box-shadow: 0 18px 44px rgba(35, 80, 96, 0.1);
}

.material-price-hero-copy {
    display: grid;
    align-content: center;
    gap: 10px;
}

.material-price-hero-copy h1 {
    margin: 0;
    color: #0d2538;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.04;
}

.material-price-hero-copy p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: #547082;
    font-size: 15px;
    line-height: 1.65;
}

.material-price-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.material-price-hero-metrics article,
.material-price-stage article,
.material-price-set-summary article {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d7e6ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
}

.material-price-hero-metrics span,
.material-price-hero-metrics em,
.material-price-stage span,
.material-price-stage em,
.material-price-set-summary span,
.material-price-set-summary em,
.material-price-set-main span,
.material-price-set-main em,
.material-price-flow-note span,
.material-price-period-card span,
.material-price-period-card em,
.material-price-period-metrics small,
.material-price-missing-card span,
.material-price-missing-card em {
    color: #637887;
    font-size: 12px;
    line-height: 1.35;
}

.material-price-hero-metrics strong,
.material-price-stage strong,
.material-price-set-summary strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 20px;
    line-height: 1.1;
    text-overflow: ellipsis;
}

.material-price-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.24fr) minmax(760px, 1fr);
    gap: 16px;
    align-items: start;
}

.material-price-shell.is-full {
    grid-template-columns: 1fr;
}

.material-price-side {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 14px;
}

.material-price-set-list,
.material-price-workspace,
.material-price-period-grid,
.material-price-missing-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    margin: 0;
}

.inline-form label {
    display: grid;
    gap: 5px;
    min-width: 140px;
}

.inline-form label span {
    color: #637887;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.inline-form input,
.inline-form select {
    min-height: 40px;
    border: 1px solid #d7e2ec;
    border-radius: 12px;
    background: #ffffff;
}

.currency-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.currency-card {
    display: grid;
    gap: 12px;
}

.app-modal.currency-archive-modal.operation-modal.wide-modal {
    top: 42px;
    width: min(1520px, calc(100vw - 72px));
    max-height: calc(100vh - 84px);
    padding: 0;
    overflow: hidden;
}

.app-modal.currency-archive-modal > .modal-header {
    margin: 0;
    padding: 24px 30px 20px;
    border-bottom: 1px solid #dce8f2;
    background:
        radial-gradient(circle at 94% 0%, rgba(75, 169, 142, 0.13), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.app-modal.currency-archive-modal > .modal-header h2 {
    margin: 2px 0 4px;
    font-size: 24px;
    line-height: 1.12;
}

.app-modal.currency-archive-modal > .modal-header span {
    display: block;
    color: #48657b;
    font-size: 14px;
    line-height: 1.45;
}

.app-modal.currency-archive-modal .currency-archive-summary {
    margin: 20px 30px 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-modal.currency-archive-modal .currency-archive-table-wrap {
    max-height: min(52vh, 560px);
    margin: 0 30px 22px;
    overflow: auto;
    border: 1px solid #dce8f2;
    border-radius: 18px;
    background: #ffffff;
}

.app-modal.currency-archive-modal .currency-archive-empty {
    margin: 18px;
}

.app-modal.currency-archive-modal > .modal-actions {
    margin: 0;
    padding: 16px 30px 22px;
    border-top: 1px solid #dce8f2;
}

.material-price-set-card,
.material-price-period-card,
.material-price-missing-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #d9e6ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(31, 72, 98, 0.06);
}

.material-price-set-card {
    display: grid;
    gap: 8px;
}

.material-price-set-card:hover,
.material-price-set-card.is-selected,
.material-price-period-card.is-selected {
    border-color: #4ba98e;
    background: linear-gradient(135deg, #effbf7 0%, #ffffff 62%, #fff8ed 100%);
}

.material-price-live-card {
    border-color: #b9e0d3;
    background:
        radial-gradient(circle at 92% 10%, rgba(31, 138, 91, 0.12), transparent 30%),
        #f8fffb;
}

.material-price-live-card.is-selected {
    box-shadow: 0 16px 32px rgba(31, 138, 91, 0.12);
}

.material-price-live-stage {
    border-color: #c6e6d9;
    background:
        radial-gradient(circle at 8% 12%, rgba(31, 138, 91, 0.14), transparent 28%),
        linear-gradient(135deg, #f6fffa 0%, #eef8ff 100%);
}

.material-price-set-main,
.material-price-period-card > a {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.material-price-set-main strong,
.material-price-period-card strong,
.material-price-missing-card strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.material-price-flow-note {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px dashed #b8d9ea;
    border-radius: 16px;
    background: #f7fcff;
}

.material-price-flow-note strong {
    color: #0d2538;
}

.material-price-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 0.22fr));
    gap: 14px;
    align-items: stretch;
    background:
        radial-gradient(circle at 4% 8%, rgba(38, 126, 106, 0.12), transparent 24%),
        #ffffff;
}

.material-price-stage-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.material-price-stage-copy h2 {
    margin: 0;
    color: #0d2538;
    font-size: 28px;
}

.material-price-stage-copy > span {
    max-width: 720px;
    color: #637887;
    font-size: 14px;
    line-height: 1.55;
}

.material-price-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-price-period-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.material-price-period-metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.material-price-period-metrics small {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid #e1edf4;
    border-radius: 12px;
    background: #f7fbfe;
}

.material-price-period-metrics b {
    color: #0d2538;
}

.material-price-set-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.material-price-list-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 0.8fr) auto auto;
    gap: 12px;
    align-items: end;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #d9e8f1;
    border-radius: 18px;
    background:
        radial-gradient(circle at 96% 10%, rgba(29, 128, 91, 0.08), transparent 30%),
        linear-gradient(135deg, #f8fcff 0%, #ffffff 72%);
}

.material-price-list-filter label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.material-price-list-filter label > span {
    color: #637887;
    font-size: 12px;
    font-weight: 900;
}

.material-price-list-filter input,
.material-price-list-filter select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d7e4ee;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    color: #0d2538;
    font-weight: 800;
}

.material-price-list-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.material-price-list-filter > strong {
    align-self: center;
    justify-self: end;
    color: #315166;
    font-size: 13px;
    white-space: nowrap;
}

.material-price-table-wrap {
    overflow: auto;
    max-height: 620px;
    border: 1px solid #d9e6ef;
    border-radius: 18px;
}

.material-price-table {
    width: 100%;
    min-width: 1040px;
    table-layout: fixed;
}

.material-price-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f3f8fc;
}

.material-price-table th,
.material-price-table td {
    overflow: hidden;
    vertical-align: top;
}

.material-price-table td strong,
.material-price-table td em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-price-table td strong {
    color: #071522;
    white-space: nowrap;
}

.material-price-table td em {
    color: #617485;
    font-size: 12px;
    line-height: 1.45;
}

.material-price-table th:nth-child(1),
.material-price-table td:nth-child(1) {
    width: 25%;
}

.material-price-table th:nth-child(2),
.material-price-table td:nth-child(2) {
    width: 16%;
}

.material-price-table th:nth-child(3),
.material-price-table td:nth-child(3) {
    width: 22%;
}

.material-price-table th:nth-child(4),
.material-price-table td:nth-child(4) {
    width: 16%;
}

.material-price-table th:nth-child(5),
.material-price-table td:nth-child(5) {
    width: 13%;
}

.material-price-table th:nth-child(6),
.material-price-table td:nth-child(6) {
    width: 8%;
}

.material-price-live-table {
    min-width: 1220px;
}

.material-price-live-table th:nth-child(1),
.material-price-live-table td:nth-child(1) {
    width: 25%;
}

.material-price-live-table th:nth-child(2),
.material-price-live-table td:nth-child(2) {
    width: 16%;
}

.material-price-live-table th:nth-child(3),
.material-price-live-table td:nth-child(3) {
    width: 19%;
}

.material-price-live-table th:nth-child(4),
.material-price-live-table td:nth-child(4) {
    width: 13%;
}

.material-price-live-table th:nth-child(5),
.material-price-live-table td:nth-child(5) {
    width: 12%;
}

.material-price-live-table th:nth-child(6),
.material-price-live-table td:nth-child(6) {
    width: 15%;
}

.material-price-row td:first-child {
    position: relative;
}

.material-price-row.is-approved td:first-child {
    box-shadow: inset 4px 0 0 #22a06b;
}

.material-price-row.is-pending td:first-child {
    box-shadow: inset 4px 0 0 #d9902d;
}

.material-price-main-cell,
.material-price-price-cell {
    padding-left: 16px;
}

.material-price-status-stack {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.material-price-status-stack em {
    white-space: normal;
}

.material-price-action-cell {
    overflow: visible !important;
}

.material-price-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.material-price-queue-note {
    display: grid;
    gap: 4px;
    margin: 0 0 14px;
    border: 1px solid #cfe8dc;
    border-radius: 18px;
    background:
        radial-gradient(circle at 96% 10%, rgba(29, 128, 91, 0.10), transparent 28%),
        linear-gradient(135deg, #f3fbf7 0%, #ffffff 72%);
    padding: 14px 16px;
}

.material-price-queue-note strong,
.material-price-queue-note span {
    display: block;
}

.material-price-queue-note strong {
    color: #0c2a1e;
    font-size: 16px;
}

.material-price-queue-note span {
    color: #567064;
    font-size: 13px;
    line-height: 1.45;
}

.material-price-history-table th:nth-child(1),
.material-price-history-table td:nth-child(1) {
    width: 24%;
}

.material-price-history-table th:nth-child(2),
.material-price-history-table td:nth-child(2) {
    width: 25%;
}

.material-price-history-table th:nth-child(3),
.material-price-history-table td:nth-child(3) {
    width: 15%;
}

.material-price-history-table th:nth-child(4),
.material-price-history-table td:nth-child(4) {
    width: 22%;
}

.material-price-history-table th:nth-child(5),
.material-price-history-table td:nth-child(5) {
    width: 14%;
}

.material-price-missing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.material-price-missing-card {
    display: grid;
    gap: 14px;
    align-content: space-between;
    min-height: 160px;
}

.material-price-missing-card > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.material-price-modal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.material-price-modal-grid label,
.material-price-modal-grid input,
.material-price-modal-grid select,
.material-price-modal-grid textarea {
    min-width: 0;
}

.material-price-entry-modal {
    left: 50%;
    top: 52px;
    display: flex;
    flex-direction: column;
    width: min(1320px, calc(100vw - 42px));
    max-height: calc(100vh - 82px);
    overflow: hidden;
    border-radius: 20px;
    padding: 16px;
    transform: translateX(-50%);
}

.material-price-entry-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.material-price-entry-body {
    display: grid;
    gap: 16px;
    overflow: auto;
    padding: 18px 6px 18px 0;
}

.material-price-entry-section {
    display: grid;
    gap: 14px;
    border: 1px solid #d7e6ef;
    border-radius: 20px;
    background:
        radial-gradient(circle at 4% 10%, rgba(38, 126, 106, 0.06), transparent 24%),
        #ffffff;
    padding: 16px;
}

.material-price-source-section {
    background:
        radial-gradient(circle at 96% 8%, rgba(31, 138, 91, 0.10), transparent 28%),
        linear-gradient(135deg, #f7fffb 0%, #ffffff 62%);
}

.material-price-money-section {
    background:
        radial-gradient(circle at 94% 12%, rgba(184, 111, 23, 0.09), transparent 25%),
        linear-gradient(135deg, #fffdf8 0%, #ffffff 62%);
}

.material-price-history-section {
    background:
        radial-gradient(circle at 96% 10%, rgba(44, 121, 183, 0.10), transparent 28%),
        linear-gradient(135deg, #f8fcff 0%, #ffffff 62%);
}

.material-price-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.material-price-section-heading h3 {
    margin: 0;
    color: #0d2538;
    font-size: 20px;
}

.material-price-section-heading span,
.material-price-product-card span,
.material-price-source-card span {
    color: #617485;
    font-size: 12px;
    line-height: 1.45;
}

.material-price-entry-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.material-price-field {
    display: grid;
    grid-column: span 4;
    gap: 6px;
    min-width: 0;
}

.material-price-field.span-2 { grid-column: span 2; }
.material-price-field.span-3 { grid-column: span 3; }
.material-price-field.span-4 { grid-column: span 4; }
.material-price-field.span-5 { grid-column: span 5; }
.material-price-field.span-6 { grid-column: span 6; }
.material-price-field.span-8 { grid-column: span 8; }
.material-price-field.span-12 { grid-column: 1 / -1; }

.material-price-field > span:first-child {
    color: #667384;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.material-price-field.is-required > span:first-child::after {
    content: " *";
    color: #c33a31;
}

.material-price-field input,
.material-price-field select,
.material-price-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d6e1ea;
    border-radius: 12px;
    background: #fff;
    padding: 12px 13px;
    color: #102133;
    font: inherit;
}

.material-price-field input[readonly] {
    background: #f6f9fc;
    color: #536474;
}

.material-price-field.is-required input,
.material-price-field.is-required select,
.material-price-field.is-required textarea {
    border-color: #efb2ad;
    background: #fffafa;
}

.material-price-field input:focus,
.material-price-field select:focus,
.material-price-field textarea:focus {
    border-color: #2c79b7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 121, 183, 0.12);
}

.material-price-field input.is-invalid,
.material-price-field select.is-invalid,
.material-price-field textarea.is-invalid {
    border-color: #c33a31;
    box-shadow: 0 0 0 3px rgba(195, 58, 49, 0.12);
}

.material-price-product-picker {
    position: relative;
    display: grid;
    grid-column: span 8;
    gap: 6px;
    min-width: 0;
}

.material-price-product-picker > span:first-child {
    color: #667384;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.material-price-product-picker.is-required > span:first-child::after {
    content: " *";
    color: #c33a31;
}

.material-price-picker-shell {
    display: flex;
    gap: 8px;
    min-width: 0;
    border: 1px solid #efb2ad;
    border-radius: 15px;
    background: #fffafa;
    padding: 6px;
}

.material-price-picker-shell:focus-within {
    border-color: #2c79b7;
    box-shadow: 0 0 0 3px rgba(44, 121, 183, 0.12);
}

.material-price-picker-shell:has(input.is-invalid) {
    border-color: #c33a31;
    box-shadow: 0 0 0 3px rgba(195, 58, 49, 0.12);
}

.material-price-picker-shell input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    color: #102133;
    font: inherit;
    outline: none;
}

.material-price-picker-shell .compact-button {
    flex: 0 0 auto;
}

.material-price-picker-shell .ghost-button {
    min-height: 40px;
    border-color: #cfe0ec;
    border-radius: 12px;
    background: #f4f9fd;
    color: #1f5f92;
    padding: 0 14px;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.material-price-picker-shell .ghost-button:hover {
    border-color: #8dbfe1;
    background: #eaf5fc;
    color: #174f7f;
}

.material-price-product-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.material-price-product-results {
    position: absolute;
    z-index: 25;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    display: grid;
    gap: 4px;
    max-height: 320px;
    overflow: auto;
    border: 1px solid #cfe0ec;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(13, 37, 56, 0.16);
    padding: 8px;
}

.material-price-product-results[hidden] {
    display: none;
}

.material-price-product-option {
    display: grid;
    gap: 3px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    color: #0d2538;
    text-align: left;
    cursor: pointer;
}

.material-price-product-option:hover,
.material-price-product-option.is-selected {
    background: #eff8ff;
}

.material-price-product-option strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-product-option span,
.material-price-product-empty {
    color: #617485;
    font-size: 12px;
}

.material-price-product-empty {
    padding: 12px;
}

.material-price-hidden-select {
    display: none;
}

.material-price-source-card,
.material-price-product-card {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 74px;
    border: 1px solid #d7e6ef;
    border-radius: 16px;
    background: #f7fbfe;
    padding: 12px 14px;
}

.material-price-source-card {
    grid-column: span 4;
}

.material-price-source-card.span-12 {
    grid-column: 1 / -1;
    min-height: 86px;
    background:
        radial-gradient(circle at 98% 10%, rgba(31, 138, 91, 0.11), transparent 24%),
        #f7fbfe;
}

.material-price-product-card {
    grid-column: span 6;
}

.material-price-product-card.span-8 {
    grid-column: span 8;
}

.material-price-source-label {
    color: #286ca8 !important;
    font-size: 11px !important;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.material-price-source-card strong,
.material-price-product-card strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-rate-chip {
    display: inline-flex;
    align-items: center;
    max-width: 440px;
    border: 1px solid #d7e6ef;
    border-radius: 999px;
    background: #f4f9fd;
    padding: 8px 12px;
    color: #286ca8 !important;
    font-weight: 900;
}

.material-price-history-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    padding-right: 4px;
}

.material-price-history-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(120px, 0.55fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe9f3;
    border-radius: 16px;
    background: #ffffff;
    padding: 11px 13px;
}

.material-price-history-row.is-latest {
    border-color: #93d6bd;
    background: linear-gradient(135deg, #effbf7 0%, #ffffff 64%);
}

.material-price-history-row strong {
    display: block;
    overflow: hidden;
    color: #0d2538;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-price-history-row span {
    display: block;
    margin-top: 2px;
    color: #65778a;
    font-size: 12px;
    line-height: 1.35;
}

.material-price-history-badge {
    justify-self: end;
    border: 1px solid #cfe8dc;
    border-radius: 999px;
    background: #eaf8f2;
    padding: 6px 9px;
    color: #087044;
    font-size: 12px;
    font-weight: 900;
}

.material-price-drop-warning {
    border: 1px solid #f0c3a2;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffdf9 100%);
    padding: 12px 14px;
    color: #8b4317;
    font-size: 13px;
    line-height: 1.45;
}

.material-price-drop-warning strong {
    display: block;
    margin-bottom: 2px;
    color: #79370f;
    font-size: 14px;
}

.material-price-drop-warning[hidden],
.material-price-history-section[hidden] {
    display: none;
}

.material-price-entry-form > .reference-form-hint {
    margin: 0;
    padding: 0 0 12px;
}

.material-price-entry-form > .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -16px -16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #fff);
    padding: 14px 16px 16px;
}

.material-price-approval-panel {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    border: 1px solid #f0d2ab;
    border-radius: 18px;
    background:
        radial-gradient(circle at 98% 4%, rgba(184, 111, 23, 0.10), transparent 26%),
        linear-gradient(135deg, #fffaf2 0%, #ffffff 60%);
    padding: 14px;
}

.material-price-table-wrap.is-compact {
    max-height: 360px;
}

.material-price-locked-note {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid #d9e6ef;
    border-radius: 999px;
    background: #f6fafc;
    color: #54697a;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.compact-approve-button {
    min-height: 32px;
    border-color: #b9e0d3;
    background: #effbf7;
    color: #087044;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
}

.compact-approve-button svg {
    width: 14px;
    height: 14px;
}

.compact-price-revision-button {
    min-height: 32px;
    border-color: #cfe0ed;
    background: #f7fbfe;
    color: #25455c;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.compact-price-revision-button:disabled {
    cursor: not-allowed;
    border-color: #e1e9f1;
    background: #f3f6f9;
    color: #7a8a99;
}

.material-price-pagination {
    padding: 0 4px;
}

.material-price-pagination-gap {
    color: #7c8d9b;
    font-size: 12px;
    font-weight: 900;
}

.status-pill.warning {
    background: var(--amber-soft);
    color: var(--amber);
}

.status-pill.muted {
    background: #eef3f7;
    color: #64748b;
}

.material-price-picker-shell #materialPriceProductClear {
    flex: 0 0 auto;
    border-color: #b9d8ec;
    background: #edf7ff;
    color: #155a8e;
    opacity: 1;
    font-weight: 900;
}

@media (max-width: 1320px) {
    .material-price-hero,
    .material-price-shell {
        grid-template-columns: 1fr;
    }

    .material-price-side {
        position: static;
    }

    .material-price-hero-metrics,
    .currency-card-grid,
    .material-price-set-summary,
    .product-cost-metrics,
    .product-cost-source,
    .standard-cost-summary,
    .standard-cost-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .material-price-stage,
    .material-price-list-filter,
    .currency-card-grid,
    .material-price-period-grid,
    .material-price-missing-grid,
    .material-price-modal-grid,
    .product-cost-metrics,
    .product-cost-source,
    .standard-cost-summary,
    .standard-cost-hero {
        grid-template-columns: 1fr;
    }

    .material-price-entry-modal {
        top: 16px;
        width: calc(100vw - 22px);
        max-height: calc(100vh - 32px);
    }

    .material-price-entry-grid {
        grid-template-columns: 1fr;
    }

    .material-price-field,
    .material-price-field.span-2,
    .material-price-field.span-3,
    .material-price-field.span-4,
    .material-price-field.span-5,
    .material-price-field.span-6,
    .material-price-field.span-8,
    .material-price-field.span-12,
    .material-price-product-picker,
    .material-price-source-card,
    .material-price-product-card {
        grid-column: 1 / -1;
    }

    .material-price-history-row {
        grid-template-columns: 1fr;
    }

    .material-price-history-badge {
        justify-self: start;
    }

    .material-price-section-heading {
        display: grid;
    }

    .material-price-list-filter > strong {
        justify-self: start;
    }

    .material-price-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Efficiency */

.efficiency-main {
    gap: 16px;
}

.efficiency-hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(640px, 1.1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid #cfe1f0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.22), transparent 34%),
        linear-gradient(135deg, #f6fbff 0%, #eef9f6 48%, #fffaf2 100%);
    box-shadow: 0 24px 56px rgba(25, 61, 92, 0.12);
}

.efficiency-hero-copy {
    display: grid;
    align-content: center;
    gap: 10px;
    min-width: 0;
}

.efficiency-hero-copy h1 {
    margin: 0;
    color: #0d2538;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1.05;
}

.efficiency-hero-copy p:not(.eyebrow) {
    margin: 0;
    max-width: 680px;
    color: #5f7285;
    font-size: 15px;
    line-height: 1.65;
}

.efficiency-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.efficiency-hero-metrics article {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 126px;
    padding: 16px;
    border: 1px solid rgba(124, 163, 193, 0.38);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.efficiency-hero-metrics span,
.efficiency-hero-metrics em {
    color: #617485;
    font-size: 12px;
    font-weight: 800;
}

.efficiency-hero-metrics strong {
    display: -webkit-box;
    overflow: hidden;
    color: #0e2539;
    font-size: 20px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.efficiency-shell {
    display: grid;
    grid-template-columns: minmax(270px, 0.28fr) minmax(620px, 1fr) minmax(280px, 0.28fr);
    gap: 16px;
    align-items: start;
}

.efficiency-shell.is-class-workflow {
    grid-template-columns: minmax(280px, 0.2fr) minmax(980px, 1fr);
}

.efficiency-shell.is-two-column {
    grid-template-columns: minmax(280px, 0.24fr) minmax(760px, 1fr);
}

.efficiency-side,
.efficiency-apply-panel {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 14px;
}

.efficiency-set-list,
.efficiency-workspace,
.efficiency-rule-stack {
    display: grid;
    gap: 12px;
}

.efficiency-set-card {
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid #d7e5f1;
    border-radius: 17px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: var(--ink);
}

.efficiency-set-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.efficiency-set-card:hover,
.efficiency-set-card.is-selected {
    border-color: #68a8dc;
    background: linear-gradient(135deg, #eff8ff 0%, #ffffff 58%, #f4fff9 100%);
    box-shadow: 0 14px 30px rgba(26, 97, 150, 0.12);
}

.efficiency-set-main span,
.efficiency-set-main em,
.efficiency-flow-note span,
.efficiency-next-box span {
    color: #617485;
    font-size: 12px;
    font-weight: 750;
}

.efficiency-set-main strong {
    color: #0d2538;
    font-size: 15px;
}

.efficiency-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px dashed #d5e5f2;
}

.efficiency-card-actions form {
    margin: 0;
}

.efficiency-flow-note,
.efficiency-next-box {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px dashed #b7d1e6;
    border-radius: 18px;
    background: #f7fbff;
}

.efficiency-apply-form {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d2e4f3;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 251, 255, 0.94) 100%);
}

.efficiency-apply-form > div:first-child {
    display: grid;
    gap: 5px;
}

.efficiency-apply-form strong {
    color: #0d2538;
}

.efficiency-apply-form span,
.efficiency-apply-form em {
    color: #617485;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.efficiency-apply-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.efficiency-apply-form label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.efficiency-apply-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.efficiency-live-preview {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #b9d9ef;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(184, 231, 255, 0.4), transparent 42%),
        linear-gradient(135deg, #f4fbff 0%, #ffffff 100%);
}

.efficiency-live-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.efficiency-live-preview-grid article {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #d6e9f6;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.efficiency-live-preview-grid article em {
    color: #6b7d8c;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.efficiency-live-preview-grid article strong,
.efficiency-live-preview [data-eff-preview-summary],
.efficiency-live-preview [data-eff-preview-detail] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.efficiency-live-preview-grid article strong {
    color: #0d2538;
    font-size: 14px;
    white-space: nowrap;
}

.efficiency-apply-form input,
.efficiency-apply-form select,
.efficiency-apply-form textarea,
.efficiency-filter-form input,
.efficiency-filter-form select {
    width: 100%;
    min-width: 0;
}

.efficiency-revision-list {
    display: grid;
    gap: 12px;
}

.efficiency-revision-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.efficiency-revision-summary article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d6e8f6;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(204, 239, 255, 0.55), transparent 48%),
        #fff;
}

.efficiency-revision-summary span,
.efficiency-revision-summary em {
    color: #617485;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.efficiency-revision-summary strong {
    color: #0d2538;
    font-size: 22px;
}

.efficiency-revision-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 0.36fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid #d8e7f3;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(232, 247, 238, 0.65), rgba(255, 255, 255, 0.96) 34%),
        #fff;
}

.efficiency-revision-card > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.efficiency-revision-card span,
.efficiency-revision-card em,
.efficiency-revision-card small {
    color: #617485;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.efficiency-revision-card small {
    display: block;
    font-size: 11px;
}

.efficiency-revision-card strong {
    color: #0d2538;
    font-size: 15px;
}

.efficiency-revision-card form {
    margin: 0;
}

.efficiency-edit-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 10% 0%, rgba(45, 125, 188, 0.12), transparent 30%),
        linear-gradient(135deg, #f5fbff, #ffffff);
}

.efficiency-edit-hero article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #d7e5f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.efficiency-edit-hero span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.efficiency-edit-hero strong {
    overflow: hidden;
    color: #0d2538;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-set-overview {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.efficiency-set-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 0.22fr));
    gap: 12px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #d4e6f3;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(45, 125, 188, 0.14), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f5fbff 64%, #f7fbf5 100%);
}

.efficiency-set-stage > div,
.efficiency-set-stage article {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.efficiency-set-stage h3 {
    margin: 0;
    color: #0d2538;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.08;
}

.efficiency-set-stage > div > span,
.efficiency-set-stage article span,
.efficiency-set-stage article em {
    color: #617485;
    font-size: 12px;
    font-weight: 850;
}

.efficiency-set-stage article {
    align-content: center;
    padding: 14px;
    border: 1px solid #d8e7f3;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
}

.efficiency-set-stage article strong {
    color: #0d2538;
    font-size: 24px;
}

.efficiency-flow-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.efficiency-flow-cards a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px 12px;
    align-items: start;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d8e7f3;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.efficiency-flow-cards a:hover {
    border-color: #68a8dc;
    box-shadow: 0 14px 30px rgba(26, 97, 150, 0.11);
}

.efficiency-flow-cards span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #e7f4ff;
    color: #166aa6;
    font-weight: 950;
}

.efficiency-flow-cards strong {
    color: #0d2538;
    font-size: 16px;
}

.efficiency-flow-cards em,
.efficiency-scenario-note span {
    color: #617485;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.5;
}

.efficiency-scenario-note {
    display: grid;
    gap: 6px;
    padding: 15px;
    border: 1px dashed #b7d1e6;
    border-radius: 18px;
    background: #f8fcff;
}

.efficiency-scenario-note strong {
    color: #0d2538;
}

.efficiency-scenario-impact {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(160px, 0.28fr));
    gap: 12px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #d5e8f5;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(202, 241, 255, 0.85), transparent 34%),
        linear-gradient(135deg, #f7fcff 0%, #ffffff 58%, #f7fff7 100%);
}

.efficiency-scenario-impact > div,
.efficiency-scenario-impact article {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.efficiency-scenario-impact h3 {
    margin: 0;
    color: #0d2538;
    font-size: 22px;
    line-height: 1.18;
}

.efficiency-scenario-impact > div > span,
.efficiency-scenario-impact article span,
.efficiency-scenario-impact article em {
    color: #617485;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.45;
}

.efficiency-scenario-impact article {
    align-content: center;
    padding: 14px;
    border: 1px solid #d8e7f3;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
}

.efficiency-scenario-impact article strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-scenario-impact article.is-positive {
    border-color: #bee9d3;
    background: linear-gradient(135deg, #f1fff8 0%, #ffffff 100%);
}

.efficiency-scenario-impact article.is-positive strong {
    color: #087346;
}

.efficiency-scenario-impact article.is-negative {
    border-color: #ffd2c9;
    background: linear-gradient(135deg, #fff6f3 0%, #ffffff 100%);
}

.efficiency-scenario-impact article.is-negative strong {
    color: #b43c29;
}

.efficiency-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.efficiency-impact-grid article {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid #d8e7f3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

.efficiency-impact-grid span,
.efficiency-impact-grid em,
.efficiency-preview-strip span,
.efficiency-preview-strip em {
    color: #617485;
    font-size: 12px;
    font-weight: 800;
}

.efficiency-impact-grid strong {
    color: #0d2538;
    font-size: 18px;
}

.efficiency-preview-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.efficiency-preview-strip article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d8e7f3;
    border-radius: 16px;
    background: #fff;
}

.efficiency-preview-strip strong,
.efficiency-preview-strip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-preview-strip strong {
    color: #0d2538;
}

.efficiency-filter-panel,
.efficiency-result-panel {
    min-width: 0;
}

.efficiency-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.efficiency-filter-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.efficiency-filter-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.efficiency-filter-form .is-wide {
    grid-column: span 2;
}

.efficiency-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
}

.efficiency-product-table-wrap {
    overflow: auto;
    max-height: 520px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.efficiency-product-table {
    width: 100%;
    min-width: 920px;
    table-layout: fixed;
}

.efficiency-product-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f8fb;
}

.efficiency-product-table th,
.efficiency-product-table td {
    overflow: hidden;
    vertical-align: top;
    white-space: normal;
}

.efficiency-product-table .eff-col-code {
    width: 20%;
}

.efficiency-product-table .eff-col-product {
    width: 25%;
}

.efficiency-product-table .eff-col-route {
    width: 18%;
}

.efficiency-product-table .eff-col-station {
    width: 27%;
}

.efficiency-product-table .eff-col-type {
    width: 10%;
}

.efficiency-product-table td strong,
.efficiency-product-table td em {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.efficiency-product-table td strong {
    line-height: 1.25;
}

.efficiency-product-table td em {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.efficiency-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid #d8e7f3;
    border-radius: 16px;
    background: linear-gradient(90deg, #f5fbff 0%, #ffffff 100%);
}

.efficiency-selection-bar > strong {
    color: #0d2538;
    font-size: 14px;
}

.efficiency-selection-bar > em {
    color: #70808d;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.efficiency-selection-bar > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.efficiency-product-card-list {
    display: grid;
    gap: 12px;
    max-height: 620px;
    overflow: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

.efficiency-product-card {
    display: grid;
    grid-template-columns: minmax(70px, 0.1fr) minmax(210px, 0.7fr) minmax(160px, 0.42fr) minmax(260px, 0.9fr) minmax(170px, 0.38fr) minmax(190px, 0.48fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    border: 1px solid #d8e7f3;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.98)),
        #fff;
    box-shadow: 0 10px 24px rgba(20, 72, 112, 0.06);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.efficiency-product-card.is-selected {
    border-color: #71b8e8;
    box-shadow: 0 16px 32px rgba(24, 105, 164, 0.11);
}

.efficiency-product-card:hover {
    transform: translateY(-1px);
}

.efficiency-product-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #185984;
    font-size: 12px;
    font-weight: 900;
}

.efficiency-product-check input {
    width: 18px;
    height: 18px;
}

.efficiency-product-main,
.efficiency-product-route,
.efficiency-product-steps,
.efficiency-product-metrics,
.efficiency-product-preview {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.efficiency-product-main span,
.efficiency-product-route span,
.efficiency-product-steps > span:first-child,
.efficiency-product-preview span,
.efficiency-product-metrics em {
    color: #6a7988;
    font-size: 11px;
    font-weight: 850;
}

.efficiency-product-main strong,
.efficiency-product-route strong,
.efficiency-product-metrics strong,
.efficiency-product-preview strong {
    color: #071c2d;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.25;
}

.efficiency-product-main span,
.efficiency-product-main strong,
.efficiency-product-main em,
.efficiency-product-route strong,
.efficiency-product-route em,
.efficiency-product-metrics strong,
.efficiency-product-metrics em,
.efficiency-product-preview span,
.efficiency-product-preview strong,
.efficiency-product-preview em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-product-main em,
.efficiency-product-route em,
.efficiency-product-steps em,
.efficiency-product-preview em {
    color: #70808d;
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}

.efficiency-product-steps {
    align-content: center;
}

.efficiency-product-metrics {
    justify-items: start;
}

.efficiency-product-preview {
    align-content: center;
    padding: 11px;
    border: 1px solid #d6e9f6;
    border-radius: 16px;
    background: #f7fcff;
}

.efficiency-product-preview strong {
    color: #0c6f48;
}

.efficiency-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 28px;
    margin: 2px 4px 2px 0;
    padding: 0 9px;
    border: 1px solid #cfe1f0;
    border-radius: 999px;
    background: #f4faff;
    color: #144b78;
    font-size: 11px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-step-pill.is-check {
    cursor: pointer;
}

.efficiency-step-pill input {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.efficiency-step-pill span,
.efficiency-step-pill em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.efficiency-step-pill em {
    color: #5d7080;
    font-style: normal;
    font-weight: 800;
}

.efficiency-rule-stack article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 13px;
    border: 1px solid #d8e7f3;
    border-radius: 18px;
    background: #fff;
}

.efficiency-rule-stack article span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #e7f4ff;
    color: #166aa6;
    font-weight: 900;
}

.efficiency-rule-stack article strong {
    color: #0d2538;
}

.efficiency-rule-stack article em {
    color: #617485;
    font-size: 12px;
    line-height: 1.45;
}

.efficiency-class-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.efficiency-class-form {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #d2e4f3;
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 137, 180, 0.12), transparent 28%),
        linear-gradient(135deg, #f8fcff 0%, #ffffff 58%, #f6fbf8 100%);
}

.efficiency-class-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.efficiency-class-form-head div {
    display: grid;
    gap: 4px;
}

.efficiency-class-form-head span {
    color: #166aa6;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.efficiency-class-form-head strong {
    color: #0d2538;
    font-size: 16px;
}

.efficiency-class-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.efficiency-class-form-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.efficiency-class-form-grid label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.efficiency-class-form-grid .is-wide {
    grid-column: span 2;
}

.efficiency-class-station-list {
    display: grid;
    gap: 14px;
}

.efficiency-process-panel {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border-color: #c8deee;
    box-shadow: 0 22px 54px rgba(20, 56, 86, 0.1);
}

.efficiency-process-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #d8e7f3;
    background:
        radial-gradient(circle at 4% 0%, rgba(39, 151, 202, 0.2), transparent 32%),
        linear-gradient(135deg, #f3fbff 0%, #ffffff 58%, #f3fbf5 100%);
}

.efficiency-process-hero h2 {
    margin: 0;
    color: #0d2538;
    font-size: 26px;
}

.efficiency-process-hero span {
    color: #617485;
    font-weight: 750;
    line-height: 1.55;
}

.efficiency-process-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
}

.efficiency-process-steps article {
    display: grid;
    gap: 6px;
    min-width: 120px;
    padding: 13px;
    border: 1px solid #cfe1f0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.efficiency-process-steps strong {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: #e7f4ff;
    color: #166aa6;
}

.efficiency-process-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    min-height: 680px;
}

.efficiency-process-list {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
    border-right: 1px solid #d8e7f3;
    background:
        linear-gradient(180deg, #f7fbff 0%, #eef6fb 100%);
}

.efficiency-process-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.efficiency-process-list-head strong {
    color: #0d2538;
}

.efficiency-process-list-head span {
    color: #617485;
    font-size: 12px;
    font-weight: 850;
}

.efficiency-process-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 14px 14px 14px 16px;
    border: 1px solid #d7e5f1;
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
}

.efficiency-process-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: transparent;
}

.efficiency-process-card:hover,
.efficiency-process-card.is-selected {
    border-color: #3b8dcc;
    background: linear-gradient(135deg, #eef8ff 0%, #fff 58%, #f4fff9 100%);
    box-shadow: 0 12px 26px rgba(26, 97, 150, 0.1);
}

.efficiency-process-card.is-selected::before {
    background: #1f8a5b;
}

.efficiency-process-code,
.efficiency-process-card em {
    color: #617485;
    font-size: 12px;
    font-weight: 800;
}

.efficiency-process-card strong {
    color: #0d2538;
    font-size: 16px;
    line-height: 1.2;
}

.efficiency-process-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.efficiency-process-meta small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid #d8e7f3;
    border-radius: 999px;
    background: #f5faff;
    color: #275d88;
    font-size: 11px;
    font-weight: 900;
}

.efficiency-process-workspace {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    padding: 18px;
}

.efficiency-process-empty {
    min-height: 360px;
    align-content: center;
    border: 1px dashed #b7d1e6;
    border-radius: 22px;
    background: #f8fcff;
}

.efficiency-process-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, 150px) auto;
    gap: 12px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid #d8e7f3;
    border-radius: 22px;
    background:
        radial-gradient(circle at 0 0, rgba(31, 138, 91, 0.12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
}

.efficiency-process-summary > div {
    display: grid;
    gap: 5px;
}

.efficiency-process-summary h3 {
    margin: 0;
    color: #0d2538;
    font-size: 24px;
}

.efficiency-process-summary > div > span,
.efficiency-process-summary article span {
    color: #617485;
    font-size: 12px;
    font-weight: 850;
}

.efficiency-process-summary article {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid #d8e7f3;
    border-radius: 17px;
    background: #fff;
}

.efficiency-process-summary article strong {
    color: #0d2538;
    font-size: 22px;
}

.efficiency-process-summary .primary-button {
    align-self: center;
    white-space: nowrap;
}

.efficiency-class-station {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #d8e7f3;
    border-radius: 22px;
    background: #fff;
}

.efficiency-process-workspace .efficiency-class-form {
    margin-bottom: 0;
}

.efficiency-process-workspace .efficiency-class-form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.efficiency-class-field {
    min-width: 0;
}

.efficiency-class-field input,
.efficiency-class-field select {
    width: 100%;
    min-width: 0;
}

.efficiency-class-field.is-name {
    grid-column: span 4;
}

.efficiency-class-field.is-type {
    grid-column: span 4;
}

.efficiency-class-field.is-basis {
    grid-column: span 2;
}

.efficiency-class-field.is-code {
    grid-column: span 2;
}

.efficiency-class-field.is-value {
    grid-column: span 3;
}

.efficiency-class-field.is-note {
    grid-column: span 6;
}

.efficiency-class-submit {
    grid-column: span 3;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    white-space: nowrap;
}

.efficiency-class-station-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.efficiency-class-station-head div {
    display: grid;
    gap: 4px;
}

.efficiency-class-station-head span,
.efficiency-class-station-head em {
    color: #617485;
    font-size: 12px;
    font-weight: 850;
}

.efficiency-class-station-head strong {
    color: #0d2538;
    font-size: 18px;
}

.efficiency-class-grid article {
    display: grid;
    gap: 6px;
    padding: 15px;
    border: 1px solid #d8e7f3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    min-width: 0;
}

.efficiency-class-grid span {
    color: #166aa6;
    font-size: 12px;
    font-weight: 900;
}

.efficiency-class-grid em {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.efficiency-class-grid small {
    color: #617485;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.efficiency-class-grid form {
    margin: 0;
}

.efficiency-class-grid .danger-button {
    justify-self: start;
}

.efficiency-legacy-classes {
    padding: 14px;
    border: 1px dashed #b7d1e6;
    border-radius: 18px;
    background: #f8fcff;
}

.efficiency-legacy-classes summary {
    cursor: pointer;
    color: #0d2538;
    font-weight: 900;
}

.efficiency-legacy-classes .efficiency-class-grid {
    margin-top: 12px;
}

.efficiency-set-modal.definition-modal,
.efficiency-set-modal.operation-modal {
    width: min(900px, calc(100vw - 44px));
}

.efficiency-set-modal .efficiency-set-form {
    min-width: 0;
}

.efficiency-set-form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.efficiency-set-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.efficiency-set-field input,
.efficiency-set-field select,
.efficiency-set-field textarea {
    width: 100%;
    min-width: 0;
}

.efficiency-set-field.is-name {
    grid-column: span 5;
}

.efficiency-set-field.is-period {
    grid-column: span 3;
}

.efficiency-set-field.is-status,
.efficiency-set-field.is-code {
    grid-column: span 2;
}

.efficiency-set-field.is-scope {
    grid-column: span 3;
}

.efficiency-set-field.is-note {
    grid-column: span 9;
}

@media (max-width: 1480px) {
    .efficiency-hero,
    .efficiency-shell {
        grid-template-columns: 1fr;
    }

    .efficiency-shell.is-class-workflow,
    .efficiency-shell.is-two-column,
    .efficiency-process-layout,
    .efficiency-process-hero,
    .efficiency-process-summary,
    .efficiency-set-stage,
    .efficiency-scenario-impact,
    .efficiency-flow-cards {
        grid-template-columns: 1fr;
    }

    .efficiency-process-list {
        border-right: 0;
        border-bottom: 1px solid #d8e7f3;
    }

    .efficiency-process-workspace .efficiency-class-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .efficiency-product-card {
        grid-template-columns: minmax(70px, 0.12fr) minmax(220px, 0.72fr) minmax(170px, 0.46fr) minmax(240px, 0.82fr);
    }

    .efficiency-product-metrics {
        grid-column: 2 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px 12px;
    }

    .efficiency-product-preview {
        grid-column: 2 / -1;
    }

    .efficiency-product-metrics em {
        grid-column: 1 / -1;
    }

    .efficiency-class-field.is-name,
    .efficiency-class-field.is-type,
    .efficiency-class-field.is-basis,
    .efficiency-class-field.is-code,
    .efficiency-class-field.is-value,
    .efficiency-class-field.is-note,
    .efficiency-class-submit,
    .efficiency-set-field.is-name,
    .efficiency-set-field.is-period,
    .efficiency-set-field.is-status,
    .efficiency-set-field.is-code,
    .efficiency-set-field.is-scope,
    .efficiency-set-field.is-note {
        grid-column: span 1;
    }

    .efficiency-side,
    .efficiency-apply-panel {
        position: static;
    }
}

@media (max-width: 980px) {
    .efficiency-hero-metrics,
    .efficiency-filter-form,
    .efficiency-class-form-grid,
    .efficiency-class-grid,
    .efficiency-impact-grid,
    .efficiency-preview-strip,
    .efficiency-revision-summary,
    .efficiency-revision-card,
    .efficiency-set-form-grid {
        grid-template-columns: 1fr;
    }

    .efficiency-selection-bar,
    .efficiency-product-card {
        align-items: stretch;
    }

    .efficiency-selection-bar,
    .efficiency-product-card,
    .efficiency-product-metrics,
    .efficiency-product-preview {
        grid-template-columns: 1fr;
    }

    .efficiency-selection-bar {
        display: grid;
    }

    .efficiency-product-metrics,
    .efficiency-product-preview {
        grid-column: auto;
    }

    .efficiency-live-preview-grid {
        grid-template-columns: 1fr;
    }

    .efficiency-filter-form .is-wide {
        grid-column: 1;
    }

    .efficiency-class-form-grid .is-wide {
        grid-column: 1;
    }

    .efficiency-process-workspace .efficiency-class-form-grid {
        grid-template-columns: 1fr;
    }

    .efficiency-class-field.is-name,
    .efficiency-class-field.is-type,
    .efficiency-class-field.is-basis,
    .efficiency-class-field.is-code,
    .efficiency-class-field.is-value,
    .efficiency-class-field.is-note,
    .efficiency-class-submit,
    .efficiency-set-field.is-name,
    .efficiency-set-field.is-period,
    .efficiency-set-field.is-status,
    .efficiency-set-field.is-code,
    .efficiency-set-field.is-scope,
    .efficiency-set-field.is-note {
        grid-column: 1;
    }

    .efficiency-filter-actions {
        justify-content: stretch;
    }

    .efficiency-filter-actions .secondary-button,
    .efficiency-filter-actions .primary-button {
        flex: 1 1 0;
    }
}

[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

button.is-disabled {
    cursor: not-allowed;
}

svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
    letter-spacing: 0;
}

h1 {
    font-size: 24px;
    line-height: 1.18;
}

h2 {
    font-size: 18px;
    line-height: 1.25;
}

input,
select {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    outline: none;
}

textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    padding: 10px;
    font: inherit;
    line-height: 1.45;
    outline: none;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #8bb7dd;
    box-shadow: 0 0 0 3px rgba(40, 108, 168, 0.14);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #d45043;
    background: #ffffff;
    box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 40px #fff inset, 0 0 0 3px rgba(40, 108, 168, 0.08);
    transition: background-color 9999s ease-in-out 0s;
}

label span {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 6px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #2a78b5 0%, #1f8a5b 100%);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 12px 24px rgba(31, 138, 91, 0.24);
}

.primary-button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: var(--radius);
    font-weight: 800;
}

.primary-button {
    gap: 8px;
    border: 1px solid #1f6fa8;
    background: #1f6fa8;
    color: #fff;
    padding: 0 14px;
}

.primary-button:hover {
    background: #195f91;
}

.primary-button.wide {
    width: 100%;
}

.primary-button:disabled {
    opacity: 0.82;
}

.icon-button {
    width: 38px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
}

.icon-button:hover {
    border-color: #b7c7d6;
    color: var(--blue);
}

.button-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Auth */

.auth-body {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(18, 24, 32, 0.94), rgba(21, 35, 42, 0.86)),
        radial-gradient(circle at 12% 18%, rgba(40, 108, 168, 0.28), transparent 32%),
        #111820;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(420px, 1.06fr) minmax(380px, 0.94fr);
    min-height: 100vh;
}

.auth-visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    color: #fff;
    padding: 34px;
    overflow: hidden;
    position: relative;
}

.auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 26% 34%, rgba(40, 108, 168, 0.26), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 44%);
    pointer-events: none;
}

.auth-visual > * {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-brand strong,
.auth-brand span {
    display: block;
}

.auth-brand span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    margin-top: 3px;
}

.auth-board {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 230px;
    align-items: end;
    gap: 22px;
}

.install-stage {
    display: grid;
    gap: 8px;
}

.install-stage-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0 12px;
}

.install-stage strong {
    font-size: 20px;
}

.install-stage span {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.5;
}

.auth-hero-copy {
    width: min(620px, 100%);
    margin-top: auto;
    margin-bottom: 6px;
}

.auth-hero-copy h2 {
    max-width: 560px;
    color: #fff;
    font-size: 34px;
    line-height: 1.08;
}

.auth-hero-copy > span {
    display: block;
    max-width: 520px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.55;
}

.login-vanity-stage {
    position: relative;
    min-height: 390px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.03);
    overflow: hidden;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.login-vanity-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.42;
    pointer-events: none;
}

.login-vanity-canvas {
    position: absolute;
    inset: 0;
    min-height: 390px;
}

.login-vanity-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.login-vanity-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    background: rgba(15, 23, 32, 0.72);
    color: #fff;
    padding: 10px 12px;
    backdrop-filter: blur(12px);
}

.login-vanity-caption strong,
.login-vanity-caption span {
    display: block;
}

.login-vanity-caption span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
}

.auth-metrics {
    display: grid;
    gap: 10px;
}

.auth-metrics article {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.07);
    padding: 14px;
    backdrop-filter: blur(14px);
}

.auth-metrics span,
.auth-metrics strong {
    display: block;
}

.auth-metrics span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    margin-bottom: 5px;
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f7fafc;
}

.auth-card {
    width: min(420px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 26px;
}

.auth-heading {
    margin-bottom: 22px;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-form input {
    width: 100%;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}

.auth-options a {
    color: var(--blue);
    font-weight: 750;
}

.portal-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 5px;
}

.portal-switch > input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.portal-option {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 54px;
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted);
    cursor: pointer;
    padding: 8px 10px;
}

.portal-option.is-active {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 8px 18px rgba(30, 55, 80, 0.08);
}

.portal-option span,
.portal-option em {
    display: block;
    margin: 0;
}

.portal-option span {
    color: inherit;
    font-size: 13px;
    font-weight: 900;
}

.portal-option em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}

.portal-option.is-active em {
    color: #52779a;
}

.auth-error,
.auth-success {
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 780;
    margin-bottom: 14px;
}

.auth-error {
    border: 1px solid #f0b3aa;
    background: #fff1ef;
    color: #ad382d;
}

.auth-success {
    border: 1px solid #bee5cd;
    background: #eefaf3;
    color: #1f7a4d;
}

.demo-credentials {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.demo-credentials button {
    display: grid;
    text-align: left;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 12px;
    cursor: pointer;
}

.demo-credentials button:hover {
    border-color: #adc5db;
    background: #fff;
}

.demo-credentials strong {
    display: block;
    font-size: 12px;
}

.demo-credentials span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.check-row input {
    width: 16px;
    min-height: 16px;
}

.auth-remember input {
    width: 16px;
    min-height: 16px;
    flex: 0 0 auto;
    padding: 0;
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--blue);
    padding: 0;
    font: inherit;
    font-weight: 850;
}

.link-button:hover {
    color: #195f91;
}

.check-row span {
    margin: 0;
}

.auth-footnote {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    color: var(--muted);
    font-size: 12px;
}

.auth-footnote strong {
    color: var(--ink);
}

.install-card {
    width: min(470px, 100%);
    padding: 22px;
}

.install-card .auth-heading {
    margin-bottom: 18px;
}

.install-form {
    gap: 12px;
    margin-top: 14px;
}

.install-form label {
    display: grid;
    min-width: 0;
}

.install-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.install-form label > span {
    margin-bottom: 5px;
    font-size: 11px;
}

.install-form input,
.install-form select {
    width: 100%;
    min-height: 36px;
}

.install-status {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    padding: 12px 14px;
}

.install-status.is-pending {
    border-color: #c9d8e6;
    background: #eef5fb;
    color: #215a89;
}

.install-status.is-success {
    border-color: #bee5cd;
    background: #eefaf3;
    color: #1f7a4d;
}

.install-status.is-error {
    border-color: #f0b3aa;
    background: #fff1ef;
    color: #ad382d;
}

.install-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e8eef4;
    overflow: hidden;
    margin: 12px 0 14px;
}

.install-progress-bar {
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6fa8 0%, #1f8a5b 100%);
    transition: width 0.35s ease;
}

.install-log {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdff;
    padding: 14px;
    max-height: 170px;
    overflow: auto;
}

.install-log p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}

.install-actions {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .install-form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* App Shell */

.app-shell {
    --sidebar-width: 260px;
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--nav);
    color: #ecf2f7;
    padding: 18px 14px;
}

.brand-block {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 4px;
}

.brand-copy strong,
.brand-copy em {
    display: block;
}

.brand-copy em {
    color: rgba(236, 242, 247, 0.62);
    font-size: 12px;
    font-style: normal;
    margin-top: 3px;
}

.sidebar-section {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.sidebar-title {
    color: rgba(236, 242, 247, 0.5);
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
    text-transform: uppercase;
}

.nav-list {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
}

.nav-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: rgba(236, 242, 247, 0.72);
    padding: 0 10px;
    font-weight: 760;
    text-align: left;
    text-decoration: none;
}

.nav-item svg {
    width: 17px;
    height: 17px;
}

.nav-item > span:not(.nav-chevron) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item:hover,
.nav-item.is-active {
    border-color: var(--nav-line);
    background: var(--nav-2);
    color: #fff;
}

.nav-item.is-active svg {
    color: #76cda3;
}

.nav-item.is-disabled {
    cursor: default;
    color: rgba(236, 242, 247, 0.42);
}

.nav-item.is-disabled:hover {
    border-color: transparent;
    background: transparent;
    color: rgba(236, 242, 247, 0.42);
}

.sidebar-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    border: 1px solid var(--nav-line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.055);
    padding: 12px;
}

.sidebar-status div {
    min-width: 0;
}

.sidebar-status strong,
.sidebar-status span:last-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-status span:last-child {
    color: rgba(236, 242, 247, 0.58);
    font-size: 12px;
    margin-top: 2px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #68d391;
    box-shadow: 0 0 0 4px rgba(104, 211, 145, 0.14);
}

.main-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 16px;
    margin-left: var(--sidebar-width);
    padding: 18px;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 440px) auto;
    align-items: center;
    gap: 14px;
    min-height: 64px;
}

.topbar-title {
    min-width: 0;
}

.topbar-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-search-button,
.global-search,
.search-box {
    position: relative;
}

.command-search-button {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    padding: 0 10px;
    text-align: left;
}

.command-search-button:hover {
    border-color: #adc5db;
    color: var(--ink-soft);
}

.command-search-button kbd {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    padding: 3px 6px;
}

.search-box svg {
    position: absolute;
    left: 11px;
    top: 10px;
    color: var(--muted);
}

.global-search svg {
    position: absolute;
    left: 11px;
    top: 10px;
    color: var(--muted);
}

.global-search input {
    width: 100%;
    padding-left: 38px;
}

.search-box input {
    width: 100%;
    padding-left: 38px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.live-header-notification-button {
    position: relative;
    width: auto;
    min-width: 46px;
    gap: 6px;
    padding: 0 11px;
    overflow: visible;
}

.live-header-notification-button.has-live-alert {
    border-color: #afdcef;
    background:
        radial-gradient(circle at 80% 10%, rgba(244, 146, 43, 0.16), transparent 28%),
        linear-gradient(135deg, #f1f9ff 0%, #effcf7 100%);
    color: #17669b;
    animation: live-alert-pulse 2.4s ease-in-out infinite;
}

.live-header-notification-button.has-live-alert::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d8483e;
    box-shadow: 0 0 0 5px rgba(216, 72, 62, 0.12);
}

.live-header-notification-button.is-open {
    border-color: #1f7bbb;
    background: #eef7ff;
    color: #0f5f95;
}

.live-header-queue-chip {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 1120;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: min(380px, calc(100vw - 32px));
    padding: 11px 13px 13px;
    border: 1px solid #cbe3f4;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 10%, rgba(31, 138, 91, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.96));
    box-shadow: 0 22px 58px rgba(15, 38, 58, 0.22);
    color: #0d2538;
    text-decoration: none;
    backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.live-header-queue-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 68px rgba(15, 38, 58, 0.27);
}

.live-header-queue-chip[hidden] {
    display: none;
}

.live-header-queue-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: #e8f5ff;
    color: #1f7bbb;
    box-shadow: inset 0 0 0 1px #cfe6f8;
}

.live-header-queue-orb svg {
    width: 18px;
    height: 18px;
}

.live-header-queue-chip.is-running .live-header-queue-orb svg {
    animation: live-queue-spin 1.1s linear infinite;
}

.live-header-queue-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.live-header-queue-copy strong,
.live-header-queue-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-header-queue-copy strong {
    font-size: 14px;
    line-height: 1.15;
}

.live-header-queue-copy small {
    color: #526b7e;
    font-size: 12px;
}

.live-header-queue-chip em {
    justify-self: end;
    padding: 7px 10px;
    border: 1px solid #d8e9f5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #1f5f8f;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.live-header-queue-chip > i {
    grid-column: 1 / -1;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(31, 123, 187, 0.12);
}

.live-header-queue-chip > i > b {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f7bbb, #1f8a5b);
    box-shadow: 0 0 18px rgba(31, 123, 187, 0.28);
    transition: width 0.35s ease;
}

.live-header-queue-chip.is-idle {
    border-color: #dce8f2;
}

.live-header-queue-chip.is-done {
    border-color: #bce8ce;
    background:
        radial-gradient(circle at 92% 10%, rgba(31, 138, 91, 0.2), transparent 36%),
        linear-gradient(135deg, #ffffff, #f0fff7);
}

.live-header-queue-chip.is-done .live-header-queue-orb {
    background: #e4f8eb;
    color: #10844b;
}

.live-header-queue-chip.is-error {
    border-color: #ffc7bd;
    background:
        radial-gradient(circle at 92% 10%, rgba(216, 72, 62, 0.14), transparent 36%),
        linear-gradient(135deg, #ffffff, #fff5f2);
}

.live-header-queue-chip.is-error .live-header-queue-orb {
    background: #fff0ed;
    color: #c53f35;
}

.live-header-queue-chip.is-error > i > b {
    background: linear-gradient(90deg, #d8483e, #f4922b);
}

@keyframes live-queue-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes live-alert-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(31, 123, 187, 0.16);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(31, 123, 187, 0);
        transform: translateY(-1px);
    }
}

.live-header-notification-popover {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 1200;
    display: grid;
    gap: 12px;
    width: min(440px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid #cfe1f0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 98% 0%, rgba(31, 138, 91, 0.12), transparent 32%),
        rgba(255, 255, 255, 0.97);
    box-shadow: 0 26px 72px rgba(15, 38, 58, 0.24);
    backdrop-filter: blur(12px);
}

.live-header-notification-popover[hidden] {
    display: none;
}

.live-header-notification-popover::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 78px;
    width: 16px;
    height: 16px;
    border-left: 1px solid #cfe1f0;
    border-top: 1px solid #cfe1f0;
    background: #fff;
    transform: rotate(45deg);
}

.live-header-notification-popover-head,
.live-header-notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.live-header-notification-popover-head strong {
    display: block;
    color: #0d2538;
    font-size: 18px;
}

.live-header-notification-popover-head form {
    margin: 0;
}

.live-header-notification-list {
    display: grid;
    gap: 8px;
    max-height: 340px;
    overflow: auto;
}

.live-header-notification-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 34px;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid #dce8f2;
    border-left: 4px solid #2b7bbb;
    border-radius: 15px;
    background: rgba(248, 252, 255, 0.9);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.live-header-notification-item:hover {
    border-color: #b7d3e9;
    box-shadow: 0 12px 28px rgba(28, 74, 111, 0.12);
    transform: translateY(-1px);
}

.live-header-notification-item-critical {
    border-left-color: #d8483e;
}

.live-header-notification-item-warning {
    border-left-color: #c47a00;
}

.live-header-notification-item-notice {
    border-left-color: #1f8a5b;
}

.live-header-notification-item > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d6e7f4;
    border-radius: 12px;
    background: #eef7ff;
    color: #1d6ba7;
}

.live-header-notification-item svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.live-header-notification-item strong,
.live-header-notification-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-header-notification-item strong {
    color: #0d2538;
    font-size: 13px;
}

.live-header-notification-item small,
.live-header-notification-footer span {
    color: #607586;
    font-size: 12px;
}

.live-header-notification-item em {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d6ba7;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.live-header-notification-read-form {
    margin: 0;
}

.header-notification-read-button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d8e6f1;
    border-radius: 10px;
    background: #fff;
    color: #64798b;
    cursor: pointer;
}

.header-notification-read-button:hover {
    border-color: #ffc9c4;
    background: #fff4f2;
    color: #c7372f;
}

.app-modal.live-header-notification-detail-modal {
    top: 74px;
    width: min(760px, calc(100vw - 40px));
    padding: 0;
    overflow: hidden;
}

.live-notification-detail-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.live-notification-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid #cfe2f2;
    border-radius: 22px;
    background:
        radial-gradient(circle at 98% 0%, rgba(244, 146, 43, 0.14), transparent 28%),
        linear-gradient(135deg, #eef9ff 0%, #f1fff8 100%);
}

.live-notification-detail-hero span,
.live-notification-detail-grid span,
.live-notification-detail-split span,
.live-notification-detail-note span {
    display: block;
    color: #5f7182;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.live-notification-detail-hero strong {
    display: block;
    margin-top: 6px;
    color: #0d2538;
    font-size: 24px;
    line-height: 1.1;
}

.live-notification-detail-hero small,
.live-notification-detail-note small {
    display: block;
    margin-top: 6px;
    color: #62778a;
}

.live-notification-detail-hero b {
    display: block;
    color: #0d2538;
    font-size: 28px;
    line-height: 1;
    text-align: right;
}

.live-notification-detail-hero > div:last-child small {
    text-align: right;
}

.live-notification-detail-grid,
.live-notification-detail-split {
    display: grid;
    gap: 10px;
}

.live-notification-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.live-notification-detail-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-notification-detail-grid article,
.live-notification-detail-split article,
.live-notification-detail-note {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dbe9f4;
    border-radius: 18px;
    background: #f8fcff;
}

.live-notification-detail-grid strong,
.live-notification-detail-split strong,
.live-notification-detail-note strong {
    display: block;
    margin-top: 6px;
    color: #0d2538;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.live-notification-detail-note {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 138, 91, 0.1), transparent 30%),
        #fbfdff;
}

.live-header-notification-detail-modal[data-severity="critical"] .live-notification-detail-hero {
    border-color: #ffd1cb;
    background:
        radial-gradient(circle at 98% 0%, rgba(216, 72, 62, 0.13), transparent 28%),
        linear-gradient(135deg, #fff6f3 0%, #f8fcff 100%);
}

.live-header-notification-detail-modal[data-severity="warning"] .live-notification-detail-hero {
    border-color: #f6d9ad;
    background:
        radial-gradient(circle at 98% 0%, rgba(196, 122, 0, 0.14), transparent 28%),
        linear-gradient(135deg, #fff9ef 0%, #f8fcff 100%);
}

.live-header-notification-detail-modal[data-severity="notice"] .live-notification-detail-hero {
    border-color: #c8eadb;
}

@media (max-width: 760px) {
    .app-modal.live-header-notification-detail-modal {
        top: 24px;
        width: calc(100vw - 24px);
    }

    .live-notification-detail-hero,
    .live-notification-detail-grid,
    .live-notification-detail-split,
    .live-notification-detail-note {
        grid-template-columns: 1fr;
    }

    .live-notification-detail-hero b,
    .live-notification-detail-hero > div:last-child small {
        text-align: left;
    }
}

.has-dot {
    position: relative;
}

.has-dot::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--red);
}

.profile-button {
    display: inline-grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    width: auto;
    min-width: 48px;
    max-width: 226px;
    height: 44px;
    border: 1px solid rgba(15, 27, 42, 0.18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 14% 12%, rgba(22, 182, 176, 0.44), transparent 30%),
        linear-gradient(135deg, #0f1b2a, #17293b);
    color: #fff;
    padding: 5px 9px 5px 5px;
    box-shadow: 0 14px 32px rgba(15, 27, 42, 0.18);
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.profile-button:hover {
    border-color: rgba(36, 120, 183, 0.42);
    box-shadow: 0 18px 36px rgba(15, 27, 42, 0.24);
    transform: translateY(-1px);
}

.profile-button-avatar,
.profile-panel-avatar {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: linear-gradient(135deg, #16b6b0, #2478b7);
    color: #fff;
    font-weight: 900;
}

.profile-button-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 11px;
    box-shadow: inset 0 -9px 14px rgba(15, 27, 42, 0.18);
}

.profile-button-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    max-width: 150px;
}

.profile-button-copy strong,
.profile-button-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-button-copy strong {
    font-size: 12.5px;
    line-height: 1.1;
}

.profile-button-copy small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 750;
}

.profile-button-caret {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.74);
}

.profile-button-caret svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 1360px) {
    .profile-button {
        max-width: 174px;
    }

    .profile-button-copy small {
        display: none;
    }
}

@media (max-width: 1180px) {
    .profile-button {
        grid-template-columns: 34px;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        padding: 5px;
    }

    .profile-button-copy,
    .profile-button-caret {
        display: none;
    }
}

.panel-view {
    display: none;
}

.panel-view.is-visible {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.metric-card,
.workspace-panel,
.module-canvas {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.metric-card {
    display: grid;
    gap: 6px;
    min-height: 108px;
    padding: 15px;
}

.metric-card span,
.metric-card small {
    color: var(--muted);
}

.metric-card span {
    font-weight: 750;
}

.metric-card strong {
    font-size: 25px;
    line-height: 1.08;
}

.metric-card.critical {
    border-color: #f0c5bf;
    background: var(--red-soft);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.76fr) minmax(640px, 1.24fr);
    gap: 14px;
}

.workspace-panel {
    min-width: 0;
    padding: 15px;
}

.panel-accordion {
    overflow: hidden;
}

.panel-accordion-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    list-style: none;
    cursor: pointer;
}

.panel-accordion-summary::-webkit-details-marker {
    display: none;
}

.panel-accordion-summary > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.panel-accordion-summary h2,
.panel-accordion-summary .eyebrow {
    margin: 0;
}

.panel-accordion-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.panel-accordion-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.panel-accordion-caret::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(39, 50, 65, 0.65);
    border-bottom: 2px solid rgba(39, 50, 65, 0.65);
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.panel-accordion[open] .panel-accordion-caret::before {
    transform: rotate(-135deg);
}

.panel-accordion-panel {
    margin-top: 14px;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.badge,
.delta,
.state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
}

.badge.draft {
    background: var(--violet-soft);
    color: var(--violet);
}

.badge.live,
.state-pill {
    background: var(--green-soft);
    color: #176943;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.scenario-grid select {
    width: 100%;
}

.readiness-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.readiness-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 0 10px;
}

.readiness-row span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}

.readiness-row.warn span {
    background: var(--amber);
}

.readiness-row.danger span {
    background: var(--red);
}

.readiness-row em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.product-workbench {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
    gap: 14px;
    min-width: 0;
}

.tree-side {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.tree-list {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tree-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    text-align: left;
}

.tree-row:hover {
    border-color: #a9c7df;
    background: #f7fbff;
}

.tree-row.is-selected {
    border-color: #77aede;
    background: #edf6ff;
    box-shadow: inset 3px 0 0 var(--blue);
}

.tree-row.depth-1 {
    margin-left: 18px;
}

.tree-row.depth-2 {
    margin-left: 36px;
}

.tree-row.depth-3 {
    margin-left: 54px;
}

.tree-rail {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.tree-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tree-main strong,
.tree-main em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-main em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.tree-cost {
    color: var(--ink-soft);
    font-weight: 850;
}

.part-inspector {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
}

.part-inspector-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.part-inspector h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.part-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.part-spec-grid div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 8px;
}

.part-spec-grid dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.part-spec-grid dd {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.part-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.part-chip-row span {
    border: 1px solid #cbd7e3;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 800;
}

.cabinet-stage {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(40, 108, 168, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(40, 108, 168, 0.08) 1px, transparent 1px),
        #f7fafc;
    background-size: 22px 22px;
    overflow: hidden;
}

.cabinet-preview {
    position: relative;
    width: 260px;
    height: 260px;
    transform: perspective(720px) rotateY(-18deg) rotateX(4deg);
    transform-style: preserve-3d;
}

.cabinet-preview.large {
    width: 210px;
    height: 230px;
}

.cabinet-side,
.cabinet-door,
.cabinet-shelf,
.cabinet-back {
    position: absolute;
    border: 1px solid rgba(67, 85, 101, 0.5);
    background: #d8b887;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.cabinet-side.left {
    left: 38px;
    top: 34px;
    width: 26px;
    height: 168px;
    transform: skewY(-12deg);
    background: #c8a16d;
}

.cabinet-side.right {
    right: 42px;
    top: 22px;
    width: 28px;
    height: 178px;
    transform: skewY(10deg);
    background: #bf9864;
}

.cabinet-door {
    left: 64px;
    top: 28px;
    width: 112px;
    height: 172px;
    background: linear-gradient(120deg, #e2c79a, #c79e68);
}

.cabinet-back {
    left: 84px;
    top: 40px;
    width: 82px;
    height: 148px;
    background: rgba(104, 129, 151, 0.22);
}

.cabinet-shelf {
    left: 64px;
    width: 112px;
    height: 16px;
    background: #d4ad78;
}

.cabinet-shelf.one {
    top: 82px;
}

.cabinet-shelf.two {
    top: 138px;
}

.part-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
}

.part-tags span {
    border: 1px solid #cbd7e3;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 750;
}

.three-workspace {
    display: grid;
    grid-template-rows: auto minmax(360px, 1fr) auto;
    min-width: 0;
    min-height: 460px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0f1720;
    overflow: hidden;
}

.viewer-toolbar,
.viewer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #eaf2f7;
    padding: 10px 12px;
}

.viewer-toolbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.viewer-toolbar strong,
.viewer-toolbar span {
    display: block;
}

.viewer-toolbar span {
    color: rgba(234, 242, 247, 0.58);
    font-size: 12px;
    margin-top: 2px;
}

.view-switch {
    display: inline-flex;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.view-switch button {
    min-width: 42px;
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(234, 242, 247, 0.66);
    font-size: 12px;
    font-weight: 850;
}

.view-switch button.is-active,
.view-switch button:hover {
    background: #eaf2f7;
    color: #14202b;
}

.three-viewport {
    position: relative;
    min-height: 360px;
    background:
        radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.22), transparent 34%),
        linear-gradient(180deg, #172230 0%, #0d141d 100%);
}

.three-viewport canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.viewer-status {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(234, 242, 247, 0.72);
    font-size: 12px;
}

.viewer-status span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.table-heading {
    align-items: center;
}

.table-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-tools select {
    width: 150px;
}

.search-box {
    width: 260px;
}

.data-table-wrap {
    overflow: auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.data-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}

.data-table th {
    background: #f7fafc;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.payroll-workbench {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.payroll-period-selector {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(40, 128, 185, 0.08), transparent 34%),
        #fff;
    padding: 14px;
}

.payroll-period-selector-head {
    margin-bottom: 0;
}

.payroll-period-card-grid {
    display: flex;
    gap: 10px;
    align-items: stretch;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.payroll-period-card-grid::-webkit-scrollbar {
    height: 8px;
}

.payroll-period-card-grid::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #edf4fa;
}

.payroll-period-card-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #b7cce0;
}

.payroll-period-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 clamp(280px, 31vw, 420px);
    gap: 10px;
    align-items: stretch;
    border: 1px solid #d9e5ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fbfd);
    box-shadow: 0 10px 24px rgba(25, 53, 82, 0.05);
    overflow: hidden;
    scroll-snap-align: start;
}

.payroll-period-card.is-active {
    border-color: #8ebce2;
    background:
        linear-gradient(135deg, rgba(47, 110, 168, 0.14), rgba(255, 255, 255, 0.94)),
        #f8fbff;
    box-shadow: 0 16px 34px rgba(47, 110, 168, 0.14);
}

.payroll-period-card-main {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
}

.payroll-period-card-main:hover strong,
.payroll-period-card-main:focus-visible strong {
    color: var(--blue);
}

.payroll-period-card-main strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-period-card-main em,
.payroll-period-card-kicker {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-period-card-kicker {
    color: var(--blue);
    font-weight: 900;
    text-transform: uppercase;
}

.payroll-period-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.payroll-period-card-metrics small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #dbe7f1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 800;
}

.payroll-period-card-metrics b {
    color: var(--ink);
    font-size: 11px;
}

.payroll-period-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 10px 10px 0;
}

.payroll-period-card-actions .table-action {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
}

.payroll-period-card-actions .table-action svg {
    margin: 0;
}

.payroll-period-empty {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 8px 14px;
    min-height: 0;
    padding: 16px;
    border: 1px dashed #bad5ea;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(40, 128, 185, 0.1), transparent 52%),
        #f7fbff;
    text-align: left;
}

.payroll-period-empty::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 12px;
    width: 130px;
    height: 44px;
    border-radius: 999px;
    background: rgba(40, 128, 185, 0.07);
    filter: blur(18px);
    pointer-events: none;
}

.payroll-period-empty-icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #cce2f3;
    border-radius: 14px;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 10px 24px rgba(40, 128, 185, 0.12);
}

.payroll-period-empty-icon svg {
    width: 21px;
    height: 21px;
}

.payroll-period-empty strong {
    align-self: end;
}

.payroll-period-empty > span:not(.payroll-period-empty-icon) {
    align-self: start;
    max-width: 440px;
    line-height: 1.45;
}

.payroll-period-empty .secondary-button {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .payroll-period-empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .payroll-period-empty .secondary-button {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        justify-content: center;
    }
}

.payroll-hero {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.5fr) auto;
    gap: 14px;
    align-items: stretch;
    border: 1px solid #cfe0ed;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(40, 128, 185, 0.16), transparent 36%),
        linear-gradient(135deg, #f8fbff 0%, #eef6fb 100%);
    padding: 16px;
}

.payroll-hero h3 {
    margin: 4px 0;
    font-size: 22px;
}

.payroll-hero > div:first-child > span,
.payroll-line-head span,
.payroll-line-list-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.payroll-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payroll-hero > .primary-button {
    align-self: center;
    min-height: 46px;
    white-space: nowrap;
}

.payroll-hero-metrics article {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid rgba(39, 118, 182, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
}

.payroll-hero-metrics span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.payroll-hero-metrics strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-flow-trigger-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.payroll-flow-open-button {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: min(420px, 100%);
    border: 1px solid #cfe0ed;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.96)),
        radial-gradient(circle at 15% 20%, rgba(47, 110, 168, 0.16), transparent 28%);
    color: inherit;
    padding: 10px 12px;
    box-shadow: 0 16px 38px rgba(19, 54, 82, 0.08);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.payroll-flow-open-button:hover {
    border-color: #9dc8e9;
    box-shadow: 0 20px 44px rgba(31, 91, 143, 0.13);
    transform: translateY(-1px);
}

.payroll-flow-open-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #cfe0ed;
    border-radius: 14px;
    background: #fff;
    color: var(--blue);
}

.payroll-flow-open-icon svg {
    width: 19px;
    height: 19px;
}

.payroll-flow-open-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.payroll-flow-open-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-flow-open-copy em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-flow-open-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.payroll-feed-modal.definition-modal,
.payroll-feed-modal.operation-modal.wide-modal {
    top: 38px;
    width: min(1080px, calc(100vw - 40px));
    max-height: calc(100vh - 76px);
}

.payroll-feed-modal .modal-header {
    margin-bottom: 0;
}

.payroll-feed-modal-body {
    display: grid;
    gap: 12px;
    padding-top: 14px;
}

.payroll-feed-map {
    display: grid;
    gap: 12px;
    border: 1px solid #d7e6f1;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 249, 253, 0.92)),
        radial-gradient(circle at 12% 18%, rgba(47, 110, 168, 0.13), transparent 30%);
    padding: 14px;
}

.payroll-feed-map--modal {
    box-shadow: none;
}

.payroll-feed-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.payroll-feed-map-head h3 {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 17px;
}

.payroll-feed-map-head > span {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfe0ed;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.payroll-feed-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payroll-feed-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    align-items: center;
    min-width: 0;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    padding: 11px;
    text-decoration: none;
}

.payroll-feed-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -9px;
    z-index: 1;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid #cfe0ed;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    content: ">";
    font-size: 12px;
    font-weight: 950;
    transform: translateY(-50%);
}

.payroll-feed-step > span {
    display: grid;
    grid-row: span 2;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #cfe0ed;
    border-radius: 12px;
    background: #f5faff;
    color: var(--blue);
}

.payroll-feed-step svg,
.payroll-feed-note-grid svg {
    width: 18px;
    height: 18px;
}

.payroll-feed-step strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-feed-step em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-feed-step.is-source,
.payroll-feed-step.is-current {
    border-color: #9dc8e9;
    background: linear-gradient(180deg, #fff, #edf7ff);
}

.payroll-feed-step.is-target {
    border-color: #bde0d2;
    background: linear-gradient(180deg, #fff, #effbf6);
}

.payroll-feed-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payroll-feed-note-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    align-items: start;
    border: 1px dashed #cfe0ed;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    padding: 11px;
}

.payroll-feed-note-grid span {
    display: grid;
    grid-row: span 3;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: #eef7ff;
    color: var(--blue);
}

.payroll-feed-note-grid strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.payroll-feed-note-grid em,
.payroll-feed-note-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.payroll-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.65fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: start;
}

.payroll-detail-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.payroll-line-card,
.payroll-line-list {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    padding: 14px;
}

.payroll-line-list {
    display: grid;
    gap: 10px;
    min-width: 0;
    overflow: visible;
}

.payroll-line-preview {
    background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
}

.payroll-line-preview .section-heading {
    align-items: center;
}

.payroll-list-open-button {
    min-height: 36px;
    padding-inline: 14px;
    white-space: nowrap;
}

.payroll-line-preview-grid {
    display: grid;
    gap: 10px;
}

.payroll-line-preview-card {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(120px, auto) minmax(100px, auto) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(15, 35, 52, 0.06);
}

.payroll-line-preview-person,
.payroll-line-preview-metric {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.payroll-line-preview-person strong,
.payroll-line-preview-metric strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-line-preview-person em,
.payroll-line-preview-metric span,
.payroll-line-preview-more {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.payroll-line-preview-metric span {
    font-weight: 900;
    text-transform: uppercase;
}

.payroll-line-preview-more {
    padding-inline: 4px;
    font-weight: 800;
}

.payroll-line-preview-empty {
    min-height: 132px;
}

.payroll-list-modal.definition-modal,
.payroll-list-modal.operation-modal.wide-modal {
    top: 28px;
    width: min(1320px, calc(100vw - 36px));
    max-height: calc(100vh - 56px);
}

.payroll-list-modal.labor-assignment-modal.definition-modal,
.payroll-list-modal.labor-assignment-modal.operation-modal.wide-modal {
    top: 18px;
    width: min(1560px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
}

.payroll-list-modal .modal-header {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.payroll-list-modal .modal-header > div {
    display: grid;
    gap: 2px;
}

.payroll-list-modal .modal-header h2 {
    line-height: 1.15;
}

.payroll-modal-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.payroll-list-modal-body {
    display: grid;
    gap: 10px;
    padding-top: 10px;
}

.app-modal.labor-assignment-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.app-modal.labor-assignment-modal > .modal-header {
    margin: 0;
    padding: 12px 16px;
}

.app-modal.labor-assignment-modal > .modal-header h2 {
    margin: 1px 0 0;
    font-size: 22px;
}

.app-modal.labor-assignment-modal > .modal-header .eyebrow {
    margin: 0;
}

.labor-assignment-modal-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    max-height: calc(100vh - 116px);
    padding: 10px 16px 16px;
    overflow: hidden;
}

.labor-assignment-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.labor-assignment-summary article {
    display: grid;
    gap: 4px;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f7fbff);
    padding: 12px;
}

.labor-assignment-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.labor-assignment-summary strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.labor-assignment-summary em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-period-table {
    min-width: 1120px;
    table-layout: fixed;
}

.budget-period-table .budget-col-code {
    width: 170px;
}

.budget-period-table .budget-col-name {
    width: 250px;
}

.budget-period-table .budget-col-total,
.budget-period-table .budget-col-general,
.budget-period-table .budget-col-maintenance {
    width: 150px;
}

.budget-period-table .budget-col-flow {
    width: 170px;
}

.budget-period-table .budget-col-action {
    width: 126px;
}

.budget-flow-cell {
    display: grid;
    gap: 6px;
}

.budget-flow-cell span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.budget-flow-cell strong,
.budget-flow-cell em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-flow-cell strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
}

.budget-flow-cell em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
}

.budget-period-modal.definition-modal,
.budget-period-modal.operation-modal.wide-modal {
    width: min(980px, calc(100vw - 32px));
}

.budget-lines-modal.definition-modal,
.budget-lines-modal.operation-modal.wide-modal {
    width: min(1640px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
}

.definition-modal.operation-modal:has(> form.budget-period-form) > form,
.definition-modal.operation-modal:has(> form.budget-lines-form) > form {
    padding: 14px 18px 0;
}

.definition-modal.operation-modal:has(> form.budget-lines-form) > form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.budget-period-form .operation-form-grid {
    grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(320px, 1.4fr);
}

.budget-flow-note {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 86px;
    border: 1px solid #cfe0ef;
    border-left: 4px solid var(--blue);
    border-radius: 12px;
    background: linear-gradient(135deg, #f7fbff, #fff);
    padding: 11px 13px;
}

.budget-flow-note strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
}

.budget-flow-note span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.35;
}

.budget-line-preview {
    background: linear-gradient(135deg, #ffffff 0%, #f9fcff 100%);
}

.budget-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.budget-preview-group {
    display: grid;
    gap: 10px;
    min-width: 0;
    border: 1px solid #d8e6f1;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
}

.budget-preview-group.is-maintenance {
    background: linear-gradient(135deg, #fff, #fffaf4);
}

.budget-preview-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.budget-preview-group-head strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
}

.budget-preview-group-head span,
.budget-preview-more {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.budget-preview-list {
    display: grid;
    gap: 8px;
}

.budget-preview-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid #e1ebf3;
    border-radius: 12px;
    background: #fbfdff;
    padding: 9px 10px;
}

.budget-preview-line span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.budget-preview-line strong,
.budget-preview-line em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-preview-line strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.budget-preview-line em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
}

.budget-preview-line b {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.compact-empty {
    min-height: 0;
    padding: 14px;
}

.budget-builder-shell {
    display: grid;
    gap: 12px;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    background: #fbfdff;
    padding: 12px;
}

.budget-lines-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 2px 2px 0;
}

.budget-lines-modal .budget-builder-shell {
    min-width: 0;
    background:
        radial-gradient(circle at 0 0, rgba(40, 128, 185, 0.07), transparent 28%),
        #fbfdff;
}

.budget-builder-head {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1fr);
    gap: 12px;
    align-items: stretch;
}

.budget-lines-modal .budget-builder-head {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
}

.budget-builder-head h3 {
    margin: 2px 0 4px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.1;
}

.budget-builder-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.45;
}

.budget-builder-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.budget-builder-summary article {
    display: grid;
    gap: 3px;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    background: #fff;
    padding: 10px 11px;
}

.budget-builder-summary span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.budget-builder-summary strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
}

.budget-builder-summary em {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-line-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.budget-lines-modal .budget-line-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.budget-line-panel {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid #d5e4f0;
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    overflow: hidden;
}

.budget-lines-modal .budget-line-panel {
    padding: 12px;
}

.budget-line-panel--maintenance {
    background: linear-gradient(135deg, #fff, #fffaf4);
}

.budget-line-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.budget-line-panel-head strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
}

.budget-line-panel-head span {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-line-table-head {
    display: grid;
    gap: 7px;
    align-items: center;
    border: 1px solid #dbe8f2;
    border-radius: 12px 12px 0 0;
    background: #f3f7fb;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.budget-line-table-head--general {
    grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1.25fr) minmax(100px, 0.75fr) minmax(120px, 0.9fr) minmax(120px, 1fr) 36px;
    min-width: 700px;
}

.budget-line-table-head--maintenance {
    grid-template-columns: minmax(135px, 1fr) minmax(140px, 1.08fr) minmax(150px, 1.15fr) minmax(96px, 0.72fr) minmax(110px, 0.8fr) minmax(110px, 0.9fr) 36px;
    min-width: 840px;
}

.budget-lines-modal .budget-line-table-head--general {
    grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.35fr) minmax(120px, 0.55fr) minmax(150px, 0.75fr) minmax(240px, 1.2fr) 38px;
    min-width: 1060px;
}

.budget-lines-modal .budget-line-table-head--maintenance {
    grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.2fr) minmax(260px, 1.25fr) minmax(120px, 0.55fr) minmax(150px, 0.72fr) minmax(240px, 1.1fr) 38px;
    min-width: 1240px;
}

.budget-line-list {
    display: grid;
    max-height: 360px;
    overflow: auto;
    border: 1px solid #dbe8f2;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.budget-lines-modal .budget-line-list {
    max-height: 260px;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.budget-line-row {
    display: grid;
    gap: 7px;
    align-items: center;
    border-bottom: 1px solid #e5edf5;
    background: #fff;
    padding: 8px 10px;
}

.budget-line-row:last-child {
    border-bottom: 0;
}

.budget-line-row.is-general {
    grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1.25fr) minmax(100px, 0.75fr) minmax(120px, 0.9fr) minmax(120px, 1fr) 36px;
    min-width: 700px;
}

.budget-line-row.is-maintenance {
    grid-template-columns: minmax(135px, 1fr) minmax(140px, 1.08fr) minmax(150px, 1.15fr) minmax(96px, 0.72fr) minmax(110px, 0.8fr) minmax(110px, 0.9fr) 36px;
    min-width: 840px;
}

.budget-lines-modal .budget-line-row.is-general {
    grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.35fr) minmax(120px, 0.55fr) minmax(150px, 0.75fr) minmax(240px, 1.2fr) 38px;
    min-width: 1060px;
}

.budget-lines-modal .budget-line-row.is-maintenance {
    grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.2fr) minmax(260px, 1.25fr) minmax(120px, 0.55fr) minmax(150px, 0.72fr) minmax(240px, 1.1fr) 38px;
    min-width: 1240px;
}

.budget-line-row label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.budget-line-row label span {
    display: none;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.budget-line-row input,
.budget-line-row select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #fbfdff;
    padding: 0 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 760;
}

.budget-lines-modal .budget-line-row input,
.budget-lines-modal .budget-line-row select {
    overflow: hidden;
    text-overflow: ellipsis;
}

.budget-line-row .budget-line-remove {
    min-height: 34px;
    justify-self: end;
}

.labor-assignment-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
}

.labor-assignment-station-rail,
.labor-assignment-list-pane {
    min-width: 0;
    min-height: 0;
}

.labor-assignment-list-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.labor-assignment-station-map {
    display: grid;
    gap: 12px;
    height: auto;
    min-height: 0;
    border: 1px solid #d7e6f2;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    padding: 14px 16px 12px;
}

.labor-assignment-station-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.labor-assignment-station-map-head h3 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.15;
}

.labor-assignment-station-map-head .eyebrow {
    margin: 0;
}

.labor-assignment-station-map-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.35;
}

.labor-assignment-station-map-head .table-action {
    flex: 0 0 auto;
}

.labor-assignment-station-groups {
    display: flex;
    gap: 10px;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 12px;
    scrollbar-color: #a9b8c8 transparent;
    scrollbar-width: thin;
}

.labor-assignment-station-groups::-webkit-scrollbar {
    height: 8px;
}

.labor-assignment-station-groups::-webkit-scrollbar-track {
    background: #edf4fa;
    border-radius: 999px;
}

.labor-assignment-station-groups::-webkit-scrollbar-thumb {
    background: #aebdcc;
    border-radius: 999px;
}

.labor-station-filter-pill {
    display: grid;
    gap: 5px;
    flex: 0 0 196px;
    max-width: 196px;
    min-height: 58px;
    border: 1px solid #dce8f2;
    border-radius: 14px;
    background: #fff;
    padding: 10px 11px;
    color: inherit;
    text-align: left;
    box-shadow: 0 6px 18px rgba(33, 55, 82, 0.04);
}

.labor-station-filter-pill:hover,
.labor-station-filter-pill.is-active {
    border-color: #2f80ed;
    background: linear-gradient(135deg, #f1f8ff, #ffffff);
}

.labor-station-filter-pill-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.labor-station-filter-pill-title strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-station-filter-pill-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #ecf6ff;
    color: #1f6fb4;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 950;
}

.labor-station-filter-pill.is-under .labor-station-filter-pill-badge {
    background: #fff7df;
    color: #9a6500;
}

.labor-station-filter-pill.is-full .labor-station-filter-pill-badge {
    background: #e5f8ee;
    color: #137a43;
}

.labor-station-filter-pill.is-over .labor-station-filter-pill-badge {
    background: #ffebe8;
    color: #bf2f24;
}

.labor-station-filter-pill-meta {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labor-station-inline-detail {
    display: grid;
    gap: 8px;
    border: 1px dashed #cfe0ef;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    margin-top: 2px;
    padding: 10px 12px;
}

.labor-station-inline-detail[hidden] {
    display: none;
}

.labor-station-inline-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.labor-station-inline-detail-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.labor-station-inline-detail-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 820;
}

.labor-station-accordion-item {
    border: 1px solid #dce8f2;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(33, 55, 82, 0.04);
}

.labor-station-accordion-item.is-active {
    border-color: #2f80ed;
    box-shadow: 0 12px 28px rgba(47, 128, 237, 0.12);
}

.labor-station-accordion-trigger {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 58px;
    border: 0;
    background: linear-gradient(135deg, #ffffff, #f7fbff);
    padding: 9px 10px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.labor-station-accordion-item.is-open .labor-station-accordion-trigger,
.labor-station-accordion-trigger:hover {
    background: linear-gradient(135deg, #f2f8ff, #ffffff);
}

.labor-station-accordion-title {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.labor-station-accordion-title strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

.labor-station-accordion-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #ecf6ff;
    color: #1f6fb4;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 950;
}

.labor-station-accordion-item.is-under .labor-station-accordion-badge {
    background: #fff7df;
    color: #9a6500;
}

.labor-station-accordion-item.is-full .labor-station-accordion-badge {
    background: #e5f8ee;
    color: #137a43;
}

.labor-station-accordion-item.is-over .labor-station-accordion-badge {
    background: #ffebe8;
    color: #bf2f24;
}

.labor-station-accordion-meta {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
    line-height: 1.3;
}

.labor-station-accordion-chevron {
    justify-self: start;
    border-radius: 999px;
    background: #edf5fc;
    color: #1f6fb4;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 950;
}

.labor-station-accordion-body {
    display: grid;
    gap: 8px;
    border-top: 1px solid #e1ebf4;
    background: #fbfdff;
    padding: 8px 10px 10px;
}

.labor-station-accordion-body[hidden] {
    display: none;
}

.labor-station-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 72px;
    overflow: auto;
}

.labor-station-people span {
    border: 1px solid #dbe8f2;
    border-radius: 999px;
    background: #f6fbff;
    color: #21384f;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 850;
}

.labor-station-people .is-more {
    background: #eef4fb;
    color: var(--muted);
}

.labor-station-accordion-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 1180px) {
    .budget-period-form .operation-form-grid,
    .budget-preview-grid,
    .budget-builder-head,
    .budget-line-panels {
        grid-template-columns: 1fr;
    }

    .budget-line-table-head {
        display: none;
    }

    .budget-line-list {
        max-height: 420px;
        border-top: 1px solid #dbe8f2;
        border-radius: 12px;
    }

    .budget-line-row.is-general,
    .budget-line-row.is-maintenance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        border-bottom: 1px solid #e5edf5;
        padding: 10px;
    }

    .budget-line-row label span {
        display: block;
    }

    .budget-line-row .budget-line-remove {
        justify-self: start;
    }

    .labor-assignment-modal-body {
        overflow: auto;
    }

    .labor-assignment-workspace {
        grid-template-columns: 1fr;
    }

    .labor-assignment-station-map {
        height: auto;
        max-height: 260px;
    }

    .labor-assignment-list-pane {
        min-height: 520px;
    }
}

.labor-assignment-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #fff);
    padding: 10px 12px;
}

.labor-assignment-list-toolbar h3 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.15;
}

.labor-assignment-list-toolbar .eyebrow {
    margin: 0;
}

.labor-assignment-filter-status {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.labor-assignment-list-toolbar .primary-button {
    min-height: 42px;
    white-space: nowrap;
}

.labor-assignment-form {
    border: 1px solid #dbe7f1;
    border-radius: 18px;
    background: #f8fbff;
    padding: 12px;
}

.app-modal.labor-assignment-editor-modal.definition-modal,
.app-modal.labor-assignment-editor-modal.operation-modal.wide-modal {
    top: 42px;
    width: min(940px, calc(100vw - 44px));
    max-height: calc(100vh - 84px);
    padding: 0;
    overflow: hidden;
}

.app-modal.labor-assignment-editor-modal > .modal-header {
    margin: 0;
    padding: 14px 18px 12px;
}

.app-modal.labor-assignment-editor-modal > .modal-header h2 {
    margin: 1px 0 0;
    font-size: 22px;
}

.app-modal.labor-assignment-editor-modal > .modal-header span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.labor-assignment-editor-form {
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 166px);
    overflow: auto;
    border: 0;
    border-radius: 0;
    padding: 14px 18px 0;
}

.labor-assignment-editor-modal.operation-modal > form.labor-assignment-editor-form {
    padding-top: 14px;
}

.labor-assignment-editor-form > .modal-actions {
    bottom: 0;
    margin: 0 -18px;
    padding: 12px 18px 14px;
}

.labor-assignment-editor-modal .labor-assignment-editor-form > .modal-actions {
    bottom: 0;
    margin: 0 -18px;
    padding: 12px 18px 14px;
}

.labor-component-type-card {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(39, 118, 182, 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(219, 236, 249, 0.72), rgba(255, 255, 255, 0.92));
    padding: 12px;
}

.labor-component-type-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.labor-component-type-head strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.labor-component-type-head span {
    color: var(--muted);
    font-size: 12px;
}

.labor-component-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
}

.labor-component-type-grid label {
    gap: 5px;
}

.labor-component-type-grid select {
    min-height: 38px;
}

.labor-assignment-table-wrap {
    max-height: calc(100vh - 286px);
}

.labor-assignment-table .compact-action {
    width: auto;
    min-width: 48px;
    padding-inline: 8px;
}

.labor-assignment-table .personnel-visual-cell {
    display: table-cell;
    vertical-align: middle !important;
    text-align: center;
}

.payroll-list-modal .payroll-lines-table-wrap--modal {
    max-height: calc(100vh - 166px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.payroll-list-modal .labor-assignment-table-wrap.payroll-lines-table-wrap--modal {
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    min-height: 0;
}

.payroll-list-modal .payroll-lines-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.payroll-line-card {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 12px;
}

.payroll-line-card--modal {
    position: static;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.payroll-line-drawer.definition-modal,
.payroll-line-drawer.operation-modal.wide-modal {
    inset: 0 0 0 auto;
    width: min(560px, calc(100vw - 22px));
    max-height: 100vh;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transform: none;
}

.payroll-line-drawer .modal-header {
    margin-bottom: 0;
}

.payroll-line-drawer > form {
    padding-top: 18px;
}

.payroll-detail-modal.definition-modal,
.payroll-detail-modal.operation-modal.wide-modal {
    width: min(1040px, calc(100vw - 40px));
}

.payroll-detail-readonly {
    display: grid;
    gap: 14px;
    padding-top: 18px;
}

.payroll-detail-summary,
.payroll-detail-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payroll-detail-summary article,
.payroll-check-card,
.payroll-detail-formula,
.payroll-detail-group {
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
}

.payroll-detail-summary article {
    display: grid;
    gap: 5px;
    background: linear-gradient(180deg, #fff, #f7fbff);
}

.payroll-detail-summary span,
.payroll-check-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.payroll-detail-summary strong,
.payroll-check-card strong,
.payroll-detail-formula strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.payroll-detail-summary em,
.payroll-check-card em,
.payroll-detail-formula span,
.payroll-detail-row em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.4;
}

.payroll-check-card {
    display: grid;
    gap: 5px;
}

.payroll-check-card.is-ok {
    border-color: #bfebd5;
    background: linear-gradient(180deg, #f7fffb, #edf9f2);
}

.payroll-check-card.is-ok span {
    color: #0b7a45;
}

.payroll-check-card.is-warn {
    border-color: #f4c8bd;
    background: linear-gradient(180deg, #fffaf7, #fff0ec);
}

.payroll-check-card.is-warn span {
    color: #bc4125;
}

.payroll-detail-action {
    color: var(--blue);
}

.payroll-detail-formula {
    display: grid;
    gap: 6px;
    background:
        radial-gradient(circle at top left, rgba(47, 110, 168, 0.12), transparent 34%),
        #f8fbff;
}

.payroll-detail-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payroll-detail-group {
    display: grid;
    gap: 10px;
}

.payroll-detail-group h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}

.payroll-detail-row-list {
    display: grid;
    gap: 6px;
}

.payroll-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: baseline;
    border-top: 1px solid #edf3f8;
    padding-top: 6px;
}

.payroll-detail-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.payroll-detail-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.payroll-detail-row strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
    text-align: right;
}

.payroll-detail-row em {
    grid-column: 1 / -1;
}

.station-period-detail-rates {
    display: grid;
    gap: 10px;
}

.station-period-detail-alert {
    display: grid;
    gap: 6px;
    border: 1px solid #f4c8bd;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf7, #fff0ec);
    padding: 12px;
}

.station-period-detail-alert strong {
    color: #8c2f1a;
    font-size: 14px;
    font-weight: 900;
}

.station-period-detail-alert span {
    color: #8f4c3f;
    font-size: 12px;
    line-height: 1.5;
}

.station-period-detail-rates .data-table-wrap {
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
}

.station-period-detail-rates .data-table td strong,
.station-period-detail-rates .data-table td em {
    display: block;
}

.station-period-detail-rates .data-table td em {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.4;
}

.station-period-source-breakdown {
    display: grid;
    gap: 10px;
}

.station-period-source-heading {
    align-items: end;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.station-period-source-heading strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
}

.station-period-source-heading span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.station-period-source-card {
    background: #fff;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    overflow: hidden;
}

.station-period-source-card summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    list-style: none;
    padding: 12px 14px;
}

.station-period-source-card summary::-webkit-details-marker {
    display: none;
}

.station-period-source-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.station-period-source-title strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.station-period-source-title em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}

.station-period-source-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.station-period-source-badges b {
    background: #edf7ff;
    border: 1px solid #cde5f8;
    border-radius: 999px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    padding: 6px 8px;
    white-space: nowrap;
}

.station-period-source-body {
    border-top: 1px solid #dbe7f1;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.station-period-source-line-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.station-period-source-line-card {
    background: #f8fbff;
}

.station-period-recalc-form {
    padding-top: 12px;
}

#stationPeriodDetailModal.payroll-detail-modal.definition-modal,
#stationPeriodDetailModal.payroll-detail-modal.operation-modal.wide-modal {
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1120px, calc(100vw - 44px));
    height: min(820px, calc(100vh - 44px));
    max-height: calc(100vh - 44px);
    overflow: hidden;
    padding: 0;
    border-color: #d7e5f1;
    border-radius: 20px;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 34px 90px rgba(12, 23, 36, 0.28);
}

#stationPeriodDetailModal > .modal-header {
    position: relative;
    top: auto;
    z-index: 4;
    margin: 0;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #dbe7f1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

#stationPeriodDetailModal > .modal-header h2 {
    max-width: min(760px, calc(100vw - 170px));
    line-height: 1.25;
}

#stationPeriodDetailModal > .payroll-detail-readonly {
    min-height: 0;
    overflow: auto;
    padding: 18px 22px;
}

#stationPeriodDetailModal .payroll-detail-summary {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
}

#stationPeriodDetailModal .payroll-detail-checks {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#stationPeriodDetailModal .payroll-detail-groups {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#stationPeriodDetailModal .payroll-detail-summary article,
#stationPeriodDetailModal .payroll-check-card,
#stationPeriodDetailModal .payroll-detail-formula,
#stationPeriodDetailModal .payroll-detail-group {
    border-radius: 14px;
}

#stationPeriodDetailModal .station-period-source-line-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#stationPeriodDetailModal > .station-period-recalc-form {
    min-height: auto;
    overflow: visible;
    padding: 0;
}

#stationPeriodDetailModal > .station-period-recalc-form > .modal-actions {
    position: relative;
    bottom: auto;
    z-index: 4;
    margin: 0;
    padding: 12px 22px 14px;
    border-top: 1px solid #dbe7f1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
}

.payroll-line-head,
.payroll-line-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.payroll-line-head strong,
.payroll-line-list-head strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
}

.payroll-line-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payroll-line-form-grid label {
    display: grid;
    gap: 6px;
}

.payroll-line-form-grid label.is-wide,
.payroll-line-form-grid > .is-wide {
    grid-column: 1 / -1;
}

.payroll-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    min-height: 38px;
    border: 1px solid #dbe7f1;
    border-radius: 12px;
    background: #f8fbfe;
    padding: 0 10px;
}

.payroll-check input {
    width: auto;
    min-height: auto;
    margin-right: 8px;
}

.payroll-lines-table {
    width: max(100%, 1126px);
    min-width: 1126px;
}

.payroll-lines-table col.personnel-col-select {
    width: 44px;
}

.payroll-lines-table col.inventory-col-visual {
    width: 70px;
}

.payroll-lines-table col.inventory-col-code {
    width: 150px;
}

.payroll-lines-table col.inventory-col-name {
    width: 270px;
}

.payroll-lines-table col.inventory-col-type {
    width: 160px;
}

.payroll-lines-table col.inventory-col-status {
    width: 150px;
}

.payroll-lines-table col.inventory-col-updated {
    width: 150px;
}

.payroll-lines-table col.inventory-col-actions {
    width: 132px;
}

.payroll-lines-table th,
.payroll-lines-table td {
    padding: 9px 10px;
}

.payroll-lines-table .personnel-select-cell {
    padding-inline: 8px;
}

.payroll-lines-table .row-actions form {
    display: inline-flex;
}

.payroll-lines-table .row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
}

.payroll-lines-table .inventory-actions-heading,
.payroll-lines-table .inventory-actions-cell {
    text-align: right;
}

.payroll-lines-table .compact-action {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
}

.payroll-lines-table .compact-action svg {
    margin: 0;
}

.payroll-list-modal .personnel-table.payroll-full-list-table {
    width: max(100%, 1240px);
    min-width: 1240px;
    table-layout: fixed;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.personnel-col-select {
    width: 42px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-visual {
    width: 66px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-code {
    width: 150px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-name {
    width: auto;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-type {
    width: 158px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-status {
    width: 146px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-updated {
    width: 160px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table col.inventory-col-actions {
    width: 140px;
}

.payroll-list-modal .personnel-table.payroll-full-list-table th,
.payroll-list-modal .personnel-table.payroll-full-list-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.payroll-list-modal .personnel-table.payroll-full-list-table tbody td {
    height: 72px;
}

.payroll-list-modal .payroll-full-list-table thead th {
    background: #f6f9fc;
    box-shadow: inset 0 -1px 0 #d7e4ee;
}

.payroll-list-modal .payroll-full-list-table .personnel-select-cell,
.payroll-list-modal .payroll-full-list-table .inventory-visual-cell {
    text-align: center;
    vertical-align: middle !important;
}

.payroll-list-modal .payroll-full-list-table .personnel-visual-cell {
    display: table-cell;
    padding-left: 8px;
    padding-right: 8px;
}

.payroll-list-modal .payroll-full-list-table .inventory-visual-cell .table-thumb {
    margin: 0 auto;
}

.payroll-list-modal .payroll-full-list-table .inventory-name-cell {
    padding-right: 18px;
}

.payroll-list-modal .payroll-full-list-table .payroll-money-heading,
.payroll-list-modal .payroll-full-list-table .payroll-money-cell,
.payroll-list-modal .payroll-full-list-table .payroll-benefit-cell,
.payroll-list-modal .payroll-full-list-table .payroll-yearly-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payroll-list-modal .payroll-full-list-table .payroll-money-cell strong,
.payroll-list-modal .payroll-full-list-table .payroll-benefit-cell .status-pill,
.payroll-list-modal .payroll-full-list-table .payroll-yearly-cell strong {
    display: inline-flex;
    justify-content: flex-end;
    max-width: 100%;
    white-space: nowrap;
}

.payroll-list-modal .payroll-full-list-table .payroll-money-cell em,
.payroll-list-modal .payroll-full-list-table .payroll-benefit-cell em,
.payroll-list-modal .payroll-full-list-table .payroll-yearly-cell em {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-list-modal .payroll-full-list-table .payroll-benefit-cell .status-pill {
    min-width: 92px;
}

.payroll-list-modal .payroll-full-list-table .inventory-actions-heading,
.payroll-list-modal .payroll-full-list-table .inventory-actions-cell {
    width: 140px;
    padding-left: 8px;
    padding-right: 14px;
    overflow: visible;
    text-align: right;
}

.payroll-list-modal .payroll-full-list-table .row-actions {
    gap: 6px;
    justify-content: flex-end;
    min-width: 112px;
    flex-wrap: nowrap;
}

.payroll-list-modal .payroll-full-list-table .row-actions form {
    display: inline-flex;
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .payroll-hero,
    .payroll-feed-steps,
    .payroll-detail-grid {
        grid-template-columns: 1fr;
    }

    .payroll-feed-step:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -9px;
        transform: translateX(50%) rotate(90deg);
    }

    .payroll-line-card {
        position: static;
    }

    .payroll-flow-trigger-row {
        justify-content: stretch;
    }

    .payroll-flow-open-button {
        width: 100%;
    }

    .payroll-line-preview-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .payroll-line-preview-metric {
        grid-column: span 1;
    }
}

@media (max-width: 760px) {
    .payroll-period-card {
        grid-template-columns: 1fr;
    }

    .payroll-period-card-actions {
        justify-content: flex-start;
        padding: 0 12px 12px;
    }

    .payroll-line-drawer.definition-modal,
    .payroll-line-drawer.operation-modal.wide-modal {
        inset: 0;
        width: 100vw;
        border-radius: 0;
    }

    .payroll-list-modal.definition-modal,
    .payroll-list-modal.operation-modal.wide-modal {
        top: 12px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 24px);
    }

    .app-modal.labor-assignment-editor-modal.definition-modal,
    .app-modal.labor-assignment-editor-modal.operation-modal.wide-modal {
        top: 12px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 24px);
    }

    .labor-assignment-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .labor-assignment-list-toolbar .primary-button {
        justify-content: center;
        width: 100%;
    }

    .payroll-list-modal .payroll-lines-table-wrap--modal {
        max-height: calc(100vh - 172px);
    }

    .payroll-feed-modal.definition-modal,
    .payroll-feed-modal.operation-modal.wide-modal {
        top: 12px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 24px);
    }

    .payroll-flow-open-button {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .payroll-flow-open-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .payroll-line-preview-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .payroll-line-preview-metric,
    .payroll-line-preview-card .payroll-detail-action {
        grid-column: 1 / -1;
    }

    .payroll-hero-metrics,
    .payroll-feed-note-grid,
    .labor-assignment-summary,
    .labor-component-type-grid,
    .payroll-detail-summary,
    .payroll-detail-checks,
    .payroll-detail-groups,
    .payroll-line-form-grid {
        grid-template-columns: 1fr;
    }
}

.delta.up {
    background: var(--amber-soft);
    color: #8b5511;
}

.delta.down {
    background: var(--green-soft);
    color: #176943;
}

.module-canvas {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: 520px;
    padding: 20px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-grid article {
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px;
}

.module-grid span {
    color: var(--muted);
    font-size: 12px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(13, 19, 27, 0.48);
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
}

.modal-backdrop[data-overlay-mode="confirm"] {
    background: rgba(9, 14, 22, 0.58);
    backdrop-filter: blur(10px);
}

.modal-backdrop[data-overlay-mode="inline-help"] {
    background: rgba(9, 14, 22, 0.54);
    backdrop-filter: blur(9px);
}

.app-modal {
    position: fixed;
    z-index: 70;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 26px 70px rgba(14, 22, 31, 0.24);
    padding: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.app-modal.is-under-confirm {
    filter: blur(1.8px) saturate(0.9);
    opacity: 0.92;
    box-shadow: 0 18px 48px rgba(14, 22, 31, 0.18);
}

.app-modal.is-under-modal {
    pointer-events: none;
    filter: blur(1.2px) saturate(0.92);
    opacity: 0.78;
}

.app-modal.is-under-inline-help {
    filter: blur(2.4px) saturate(0.92);
    opacity: 0.9;
    box-shadow: 0 18px 48px rgba(14, 22, 31, 0.18);
}

.app-modal[hidden],
.modal-backdrop[hidden] {
    display: none;
}

.search-modal {
    left: 50%;
    top: 86px;
    width: min(720px, calc(100vw - 28px));
    transform: translateX(-50%);
}

.side-modal {
    right: 18px;
    top: 82px;
    width: min(420px, calc(100vw - 28px));
}

.profile-modal {
    right: 18px;
    top: 78px;
    width: min(620px, calc(100vw - 32px));
}

.profile-panel-modal {
    padding: 0;
    overflow: hidden;
    border-color: #d6e5f0;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(14, 22, 31, 0.28);
}

.profile-modal-backdrop .profile-panel-modal {
    display: block;
}

.profile-panel-header {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 18px;
    margin-bottom: 0;
}

.app-modal.profile-panel-modal > .profile-panel-header {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 46px;
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom-color: #dce9f3;
    background:
        radial-gradient(circle at 95% 0%, rgba(22, 182, 176, 0.16), transparent 34%),
        linear-gradient(180deg, #fff, #f8fcff);
}

.profile-panel-header > div {
    min-width: 0;
    padding-right: 4px;
}

.profile-panel-header .icon-button {
    align-self: start;
    border-radius: 15px;
    height: 46px;
    justify-self: end;
    width: 46px;
}

.profile-panel-header h2 {
    margin: 4px 0 0;
    color: #102033;
    font-size: 22px;
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.profile-panel-header span {
    display: block;
    margin-top: 5px;
    color: #66788b;
    font-size: 12px;
    font-weight: 750;
}

.profile-panel-body {
    display: grid;
    gap: 14px;
    padding: 18px 22px 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(232, 250, 255, 0.9), transparent 42%),
        linear-gradient(180deg, #fff, #f6fbff);
}

.profile-panel-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(170px, 0.75fr);
    gap: 12px;
    align-items: stretch;
}

.profile-panel-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-width: 0;
    border: 1px solid #d8e9f2;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7fcff, #edf9f3);
    padding: 15px;
}

.profile-panel-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 19px;
    box-shadow: inset 0 -12px 20px rgba(15, 27, 42, 0.18), 0 12px 24px rgba(36, 120, 183, 0.16);
}

.profile-panel-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-panel-identity small,
.profile-panel-identity strong,
.profile-panel-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-panel-identity small {
    color: #2478b7;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-panel-identity strong {
    color: #102033;
    font-size: 18px;
    font-weight: 950;
}

.profile-panel-identity span {
    color: #66788b;
    font-size: 12px;
    font-weight: 750;
}

.profile-panel-role {
    align-self: start;
    justify-self: end;
    border: 1px solid #bdebd5;
    border-radius: 999px;
    background: #eafbf1;
    color: #08784c;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.profile-panel-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.profile-panel-meta span {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 58px;
    border: 1px solid #dce8f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
}

.profile-panel-meta b {
    color: #66788b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-panel-meta em {
    color: #102033;
    font-size: 15px;
    font-style: normal;
    font-weight: 950;
}

.profile-panel-section {
    display: grid;
    gap: 10px;
    border: 1px solid #deebf4;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    padding: 12px;
}

.profile-panel-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.profile-panel-section-head strong {
    color: #102033;
    font-size: 13px;
    font-weight: 950;
}

.profile-panel-section-head span {
    color: #66788b;
    font-size: 11px;
    font-weight: 750;
}

.profile-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.profile-panel-actions a,
.profile-panel-logout {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 58px;
    border: 1px solid #d8e6f0;
    border-radius: 16px;
    background: #fff;
    color: #102033;
    padding: 10px 12px;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.profile-panel-actions a:hover,
.profile-panel-logout:hover {
    border-color: #9bc4df;
    background: #f2f9fd;
    transform: translateY(-1px);
}

.profile-panel-actions svg,
.profile-panel-logout svg {
    width: 19px;
    height: 19px;
    color: #2478b7;
}

.profile-panel-actions a > svg,
.profile-panel-logout > svg {
    justify-self: center;
}

.profile-panel-actions span,
.profile-panel-logout span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.profile-panel-actions strong,
.profile-panel-actions small,
.profile-panel-logout strong,
.profile-panel-logout small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-panel-actions strong,
.profile-panel-logout strong {
    font-size: 13px;
    font-weight: 950;
}

.profile-panel-actions small,
.profile-panel-logout small {
    color: #66788b;
    font-size: 11px;
    font-weight: 750;
}

.profile-panel-logout {
    border-color: #ffd5d0;
    background: #fff8f7;
    color: #b42318;
}

.profile-panel-logout svg,
.profile-panel-logout small {
    color: #d4382a;
}

.profile-panel-footnote {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #66788b;
    font-size: 11px;
    font-weight: 750;
}

.profile-panel-footnote .status-dot {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .profile-modal {
        left: 14px;
        right: 14px;
        width: auto;
    }

    .profile-panel-summary,
    .profile-panel-actions {
        grid-template-columns: 1fr;
    }

    .profile-panel-card {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .profile-panel-avatar {
        width: 54px;
        height: 54px;
    }

    .profile-panel-role {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .profile-panel-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.app-modal > .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -16px -16px 0;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

.app-modal > .modal-actions,
.app-modal > .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -16px -16px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
}

.app-modal > .modal-actions {
    margin-top: 0;
}

.app-modal.catalog-entry-modal {
    left: 50%;
    top: 50%;
    width: min(840px, calc(100vw - 44px));
    max-height: min(760px, calc(100vh - 44px));
    overflow: hidden;
    padding: 0;
    border-color: #d9e6f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 34px 92px rgba(10, 21, 34, 0.28);
    transform: translate(-50%, -50%);
}

.app-modal.catalog-entry-modal .catalog-entry-form {
    display: flex;
    flex-direction: column;
    max-height: min(760px, calc(100vh - 44px));
}

.app-modal.catalog-entry-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e2ebf3;
    background: linear-gradient(180deg, #fff, #f8fbfd);
}

.app-modal.catalog-entry-modal .modal-header h2 {
    margin: 4px 0 4px;
    color: #172233;
    font-size: 22px;
    line-height: 1.18;
}

.app-modal.catalog-entry-modal .modal-header span {
    display: block;
    max-width: 620px;
    color: #66788b;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
}

.app-modal.catalog-entry-modal .modal-body {
    overflow: auto;
    padding: 22px 24px 24px;
}

.app-modal.catalog-entry-modal .modal-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.38fr);
    gap: 16px;
}

.app-modal.catalog-entry-modal .form-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.app-modal.catalog-entry-modal .form-field.is-wide,
.app-modal.catalog-entry-modal .catalog-field-snapshot,
.app-modal.catalog-entry-modal .catalog-field-team {
    grid-column: 1 / -1;
}

.app-modal.catalog-entry-modal .catalog-field-notes {
    grid-column: 1 / -1;
}

.app-modal.catalog-entry-modal .form-field > span {
    color: #3b4b5f;
    font-size: 12px;
    font-weight: 900;
}

.app-modal.catalog-entry-modal input,
.app-modal.catalog-entry-modal select,
.app-modal.catalog-entry-modal textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid #d4e1eb;
    border-radius: 10px;
    background: #fff;
    color: #172233;
    font-size: 14px;
    font-weight: 650;
}

.app-modal.catalog-entry-modal textarea {
    min-height: 92px;
    resize: vertical;
}

.app-modal.catalog-entry-modal input:focus,
.app-modal.catalog-entry-modal select:focus,
.app-modal.catalog-entry-modal textarea:focus {
    border-color: #2478b7;
    box-shadow: 0 0 0 3px rgba(36, 120, 183, 0.15);
    outline: none;
}

.app-modal.catalog-entry-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 16px 24px 22px;
    border-top: 1px solid #e2ebf3;
    background: #fff;
}

@media (max-width: 760px) {
    .app-modal.catalog-entry-modal {
        top: 16px;
        width: min(100vw - 24px, 840px);
        max-height: calc(100vh - 32px);
        transform: translateX(-50%);
    }

    .app-modal.catalog-entry-modal .catalog-entry-form {
        max-height: calc(100vh - 32px);
    }

    .app-modal.catalog-entry-modal .modal-header,
    .app-modal.catalog-entry-modal .modal-body,
    .app-modal.catalog-entry-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .app-modal.catalog-entry-modal .modal-field-grid {
        grid-template-columns: 1fr;
    }

    .app-modal.catalog-entry-modal .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .app-modal.catalog-entry-modal .modal-footer .primary-button,
    .app-modal.catalog-entry-modal .modal-footer .secondary-button {
        justify-content: center;
        width: 100%;
    }
}

.modal-search {
    position: relative;
    display: block;
}

.modal-search svg {
    position: absolute;
    left: 12px;
    top: 11px;
    color: var(--muted);
}

.modal-search input {
    width: 100%;
    min-height: 44px;
    padding-left: 40px;
}

.quick-result-list,
.notification-list,
.profile-actions {
    display: grid;
    gap: 8px;
}

.quick-result-list {
    margin-top: 12px;
}

.quick-result-list button,
.quick-result-list a,
.profile-actions button,
.profile-actions a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
    padding: 9px 11px;
    text-align: left;
}

.quick-result-list button:hover,
.quick-result-list a:hover,
.profile-actions button:hover,
.profile-actions a:hover {
    border-color: #adc5db;
    background: #f3f8fc;
}

.quick-result-list span {
    color: var(--muted);
    font-size: 12px;
}

.notice {
    display: grid;
    gap: 4px;
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    background: var(--blue-soft);
    padding: 10px 12px;
}

.notice span {
    color: var(--muted);
    font-size: 13px;
}

.notice.danger {
    border-color: var(--red);
    background: var(--red-soft);
}

.notice.warn {
    border-color: var(--amber);
    background: var(--amber-soft);
}

.notice.ok {
    border-color: var(--green);
    background: var(--green-soft);
}

.flash-toast-root {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 10000;
    display: grid;
    gap: 12px;
    width: min(560px, calc(100vw - 24px));
    transform: translateX(-50%);
    pointer-events: none;
}

.flash-toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--green);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 68px rgba(17, 26, 38, 0.24);
    padding: 17px 18px;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    animation: flash-toast-enter 0.22s ease;
}

.flash-toast.is-warn {
    border-left-color: var(--amber);
}

.flash-toast.is-danger {
    border-left-color: var(--red);
}

.flash-toast-body {
    display: grid;
    gap: 4px;
}

.flash-toast-body strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.flash-toast-body span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.flash-toast-close {
    display: grid;
    place-items: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7fafc;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
}

.flash-toast-close:hover {
    background: #eef5fb;
    color: var(--ink);
}

.flash-toast.is-leaving {
    animation: flash-toast-leave 0.2s ease forwards;
}

@keyframes flash-toast-enter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flash-toast-leave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
    margin-bottom: 12px;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: #17212c;
    color: #fff;
    font-weight: 900;
}

.profile-summary strong,
.profile-summary span {
    display: block;
}

.profile-summary span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.profile-actions button,
.profile-actions a {
    grid-template-columns: 22px 1fr;
    align-items: center;
}

/* Product Module */

.product-topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 420px) auto;
}

.operation-topbar {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 520px) auto;
}

.product-notice {
    margin-bottom: 0;
}

.stock-filter-section {
    margin-top: 8px;
}

.sidebar-menu-group {
    display: grid;
    gap: 6px;
}

.sidebar-menu-group > summary {
    list-style: none;
}

.sidebar-menu-group > summary::-webkit-details-marker {
    display: none;
}

.sidebar-menu-group > summary::after {
    content: "";
    justify-self: end;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.sidebar-menu-group[open] > summary::after {
    transform: rotate(225deg);
}

.nav-accordion {
    display: grid;
    gap: 6px;
}

.nav-accordion-button {
    cursor: pointer;
    grid-template-columns: 28px 1fr 16px;
}

.nav-accordion-button .nav-chevron {
    justify-self: center;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.nav-accordion.is-open .nav-accordion-button .nav-chevron {
    transform: rotate(225deg);
}

.nav-accordion:not(.is-open) .sidebar-subnav {
    display: none;
}

.sidebar-subnav {
    display: grid;
    gap: 6px;
    padding-left: 28px;
}

.sidebar-subnav a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: rgba(235, 243, 248, 0.72);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 760;
}

.sidebar-subnav a:hover,
.sidebar-subnav a.is-active {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-subnav strong {
    min-width: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 7px;
    text-align: center;
    font-size: 11px;
}

.inventory-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.inventory-metrics div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 14px;
}

.inventory-metrics span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
}

.inventory-metrics strong {
    display: block;
    margin-top: 7px;
    font-size: 24px;
    letter-spacing: 0;
}

.inventory-table-panel {
    display: grid;
    align-content: start;
    gap: 14px;
}

.inventory-admin-tools {
    display: grid;
    gap: 16px;
}

.inventory-admin-tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 14px;
}

.inventory-admin-tool-grid.is-shared {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-admin-tool-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d7e4ee;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.inventory-admin-tool-card.is-wide {
    grid-column: 1 / -1;
}

.inventory-admin-tool-card.is-danger {
    border-color: #f0c5bf;
    background: linear-gradient(180deg, #fff9f8 0%, #fff1ef 100%);
}

.inventory-admin-tool-copy {
    display: grid;
    gap: 6px;
}

.inventory-admin-tool-copy strong {
    font-size: 18px;
    color: var(--ink);
}

.inventory-admin-tool-copy span {
    color: var(--muted);
    line-height: 1.5;
}

.inventory-admin-tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inventory-admin-tool-actions form {
    display: inline-flex;
}

.inventory-admin-tool-actions .secondary-button,
.inventory-admin-tool-card .danger-button {
    min-height: 40px;
}

.inventory-list-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-list-meta a {
    color: var(--blue);
}

.inventory-list-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.inventory-list-toolbar-copy {
    display: grid;
    gap: 4px;
}

.inventory-list-toolbar-copy strong {
    color: #173554;
    font-size: 15px;
    font-weight: 850;
}

.inventory-list-toolbar-copy span,
.inventory-filter-modal-copy {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.inventory-list-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.inventory-filter-trigger {
    min-height: 40px;
}

.inventory-filter-modal {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
}

.inventory-filter-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 32px);
}

.inventory-filter-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

.inventory-filter-modal-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
}

.inventory-filter-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.inventory-filter-overview article {
    display: grid;
    gap: 2px;
    padding: 12px 10px;
    border: 1px solid #e2eaf3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.inventory-filter-overview strong {
    color: #173554;
    font-size: 18px;
    font-weight: 900;
}

.inventory-filter-overview span {
    color: #6b7f92;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.inventory-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-filter-grid label {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e1e9f2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.inventory-filter-grid label > span {
    color: #4f657a;
    font-size: 12px;
    font-weight: 800;
}

.inventory-filter-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
}

@media (max-width: 980px) {
    .inventory-list-toolbar {
        flex-direction: column;
    }

    .inventory-list-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .inventory-filter-modal {
        width: min(100vw - 20px, 720px);
    }

    .inventory-filter-grid {
        grid-template-columns: 1fr;
    }
}

.inventory-table {
    width: max-content;
    min-width: max(100%, 1460px);
    table-layout: fixed;
}

.inventory-table col.inventory-col-visual {
    width: 56px;
}

.inventory-table col.inventory-col-code {
    width: 158px;
}

.inventory-table col.inventory-col-type {
    width: 128px;
}

.inventory-table col.inventory-col-category {
    width: 118px;
}

.inventory-table col.inventory-col-unit {
    width: 82px;
}

.inventory-table col.inventory-col-part {
    width: 78px;
}

.inventory-table col.inventory-col-status {
    width: 88px;
}

.inventory-table col.inventory-col-created,
.inventory-table col.inventory-col-updated {
    width: 144px;
}

.inventory-table col.inventory-col-actions {
    width: 116px;
}

.inventory-table th,
.inventory-table td {
    padding: 10px 8px;
    overflow: hidden;
}

.inventory-table tbody td {
    vertical-align: top;
}

.inventory-table tbody td:last-child {
    vertical-align: middle;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.sort-marker {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #2a5f96;
}

.sort-marker svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}

.table-thumb {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--blue);
    overflow: hidden;
}

.table-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-code-column {
    width: 158px;
}

.inventory-visual-cell {
    width: 60px;
    vertical-align: top !important;
}

.inventory-visual-cell .table-thumb {
    margin-top: 1px;
}

.inventory-code-cell {
    min-width: 0;
}

.inventory-code-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin-top: 3px;
}

.inventory-code-primary,
.inventory-name-cell .item-name-link {
    display: block;
    line-height: 1.35;
}

.inventory-code-cell .quick-build-badge-list {
    margin-top: 0;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 7px;
    margin-right: 10px;
    padding-left: 2px;
}

.inventory-code-primary {
    max-width: min(100%, 158px);
}

.inventory-code-secondary {
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 84px);
    margin-top: 0 !important;
    margin-left: 0;
    line-height: 1.4;
    flex: 0 1 auto;
    font-size: 11px;
}

.inventory-name-cell {
    min-width: 0;
}

.inventory-name-cell .item-name-link,
.inventory-name-cell em {
    max-width: 100%;
}

.inventory-name-cell .item-name-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-name-cell em {
    display: block;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-date-heading,
.inventory-actions-heading,
.inventory-date-cell,
.inventory-actions-cell {
    white-space: nowrap;
}

.inventory-actions-cell {
    overflow: hidden;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
}

.inventory-date-cell {
    font-variant-numeric: tabular-nums;
}

.inventory-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.inventory-pagination-summary {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-pagination-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-pagination .table-action.is-active {
    border-color: #9ec5e1;
    background: var(--blue-soft);
    color: var(--blue);
}

.inventory-table td > em,
.definition-table td > em {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.item-name-link {
    color: var(--ink);
    font-weight: 800;
}

.item-name-link:hover {
    color: var(--blue);
}

.type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: var(--green-soft);
    color: #176943;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inventory-table .row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
}

.row-actions form {
    margin: 0;
}

.inventory-table .row-actions form {
    flex: 0 0 auto;
}

.table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink-soft);
    padding: 0 9px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.table-action svg {
    width: 15px;
    height: 15px;
}

.table-action:hover {
    border-color: #adc5db;
    color: var(--blue);
}

.table-action.danger {
    border-color: #efc4be;
    color: var(--red);
}

.table-action.danger:hover {
    background: var(--red-soft);
}

.table-action.is-disabled,
.table-action.is-disabled:hover {
    opacity: 0.58;
    border-color: #d9e0e7;
    background: #f5f7f9;
    color: var(--muted);
}

.muted-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.user-table .user-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.user-table .user-cell > span:last-child {
    display: grid;
    gap: 2px;
}

.user-table .user-cell em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.user-table td strong {
    display: block;
}

.user-table td em {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.profile-avatar.small {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.user-admin-panel {
    display: grid;
    gap: 14px;
}

.user-modal {
    width: min(620px, calc(100vw - 32px));
}

.wide-modal {
    width: min(1120px, calc(100vw - 32px));
}

#roleModal.user-modal,
#userModal.user-modal {
    width: min(1380px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
    overflow: hidden;
}

#roleModal.user-modal > form,
#userModal.user-modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 116px);
}

#roleModal.user-modal .admin-modal-layout,
#userModal.user-modal .admin-modal-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 18px 0 0;
}

#roleModal.user-modal .admin-modal-main,
#userModal.user-modal .admin-modal-main {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

#roleModal.user-modal .admin-modal-panel.is-active,
#userModal.user-modal .admin-modal-panel.is-active {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.system-token-modal {
    left: 50%;
    top: 70px;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-50%);
}

.system-token-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
    padding: 16px 18px 14px;
}

.system-token-modal > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.system-token-modal .admin-modal-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 18px 0;
}

.system-token-modal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
    padding: 12px 18px 16px;
}

.admin-modal-layout {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 16px;
}

.admin-modal-aside {
    display: grid;
    gap: 12px;
    align-content: start;
}

.admin-summary-card {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 14px;
}

.admin-summary-card.soft {
    background: var(--surface-2);
}

.admin-summary-card h3 {
    margin: 0;
    font-size: 22px;
}

.admin-summary-card > span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.admin-summary-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-summary-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.admin-summary-list span {
    color: var(--muted);
    font-size: 12px;
}

.admin-summary-list strong {
    font-size: 13px;
    text-align: right;
}

.admin-modal-main {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.admin-modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.admin-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    padding: 0 12px;
}

.admin-tab-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 11px;
    padding: 0 6px;
}

.admin-tab-button.is-active {
    border-color: #9ec5e1;
    background: var(--blue-soft);
    color: var(--blue);
}

.admin-tab-button.is-active span {
    background: #fff;
    color: var(--blue);
}

.admin-modal-panel {
    display: none;
    min-width: 0;
}

.admin-modal-panel.is-active {
    display: block;
}

.permission-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
}

.permission-scope strong,
.permission-scope > span:last-child {
    flex: 1 1 100%;
}

.permission-scope strong {
    color: var(--ink);
    font-size: 13px;
}

.permission-scope > span:last-child {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.permission-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.permission-panel-head h3 {
    margin: 0;
    font-size: 18px;
}

.permission-panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.permission-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    max-height: min(54vh, 620px);
    overflow: auto;
    padding: 4px 4px 10px;
    scrollbar-width: thin;
}

#roleModal .permission-card-grid,
#userModal .permission-card-grid {
    max-height: calc(100vh - 380px);
}

.permission-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid #cfe1f1;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fcff 72%, #f4fbf6 100%);
    box-shadow: 0 14px 32px rgba(16, 39, 68, 0.05);
    padding: 13px;
}

.permission-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 10px;
}

.permission-card-title {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.permission-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #bdd8ee;
    border-radius: 13px;
    background: #eaf5ff;
    color: var(--blue);
    font-size: 15px;
    font-weight: 950;
}

.permission-card-header strong {
    display: block;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-card-header span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 780;
}

.permission-card-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.table-action.compact {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

.inventory-table .row-actions .table-action {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
}

.inventory-table .row-actions .table-action svg {
    width: 16px;
    height: 16px;
}

.inventory-table .row-actions .table-action.is-quick-module {
    border-color: #a7e4d0;
    background: #eefcf6;
    color: #0f8f77;
}

.permission-option-list {
    display: grid;
    gap: 7px;
}

.permission-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
    border: 1px solid #dbe8f2;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
    padding: 9px 10px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.permission-option:has(input:checked) {
    border-color: #9cc8ed;
    background: #edf8ff;
    box-shadow: inset 3px 0 0 var(--blue);
}

.permission-option input {
    width: 16px;
    min-height: 16px;
    margin-top: 2px;
}

.permission-option span {
    display: grid;
    gap: 2px;
    color: var(--ink);
    line-height: 1.45;
    min-width: 0;
}

.permission-option span strong {
    display: block;
    font-size: 12px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-option span small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: min(52vh, 560px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px;
}

.permission-editor h3 {
    margin: 0;
    font-size: 16px;
}

.permission-editor fieldset {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
}

.permission-editor legend {
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 6px;
}

.permission-editor label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
}

.permission-editor input {
    width: 15px;
    min-height: 15px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.ai-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr);
    gap: 14px;
    align-items: start;
}

.ai-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.ai-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ai-form input,
.ai-form select,
.ai-form textarea {
    width: 100%;
    min-width: 0;
}

.ai-form label.is-wide,
.ai-form button {
    grid-column: 1 / -1;
}

.ai-result {
    min-height: 410px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 18px;
    color: var(--ink-soft);
    line-height: 1.58;
    overflow: auto;
}

.ai-result strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 8px;
}

.ai-result span {
    display: block;
    white-space: normal;
}

.ai-result.is-loading {
    border-color: #aac9e4;
    background: #f2f8fe;
}

.ai-result.is-error {
    border-color: #efc4be;
    background: #fff5f3;
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 28px;
    text-align: center;
}

.empty-state span {
    color: var(--muted);
    font-size: 13px;
}

.definition-layout {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.definition-group-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 360px;
    max-height: calc(100vh - 240px);
    overflow: hidden;
}

.definition-group-sidebar .section-heading {
    margin-bottom: 0;
}

.definition-group-list {
    display: grid;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.definition-group-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    padding: 8px 9px;
}

.definition-group-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--blue);
}

.definition-group-icon svg {
    width: 16px;
    height: 16px;
}

.definition-group-copy {
    min-width: 0;
}

.definition-group-copy strong,
.definition-group-copy em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.definition-group-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
}

.definition-group-copy em {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    margin-top: 2px;
}

.definition-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    padding: 0 8px;
    font-size: 11px;
    font-weight: 850;
}

.definition-group-link:hover,
.definition-group-link.is-active {
    border-color: #adc5db;
    background: #f4f9fd;
}

.definition-group-link.is-active {
    box-shadow: inset 3px 0 0 var(--blue);
}

.definition-group-link.is-active .definition-group-icon {
    border-color: #b7d3ea;
    background: var(--blue-soft);
}

.definition-table {
    min-width: 760px;
}

.definition-card-list {
    display: none;
}

.definition-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px;
}

.definition-card-title {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.definition-card-title p,
.definition-card-title h3,
.definition-card-title span {
    margin: 0;
}

.definition-card-title p {
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.definition-card-title h3 {
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.definition-card-title span {
    color: var(--muted);
    font-size: 12px;
}

.definition-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.definition-card-meta span {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    padding: 8px;
    font-size: 11px;
    font-weight: 780;
}

.definition-card-meta strong {
    color: var(--ink);
    font-size: 12px;
}

.definition-color {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.definition-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
}

.definition-modal {
    left: 50%;
    top: 70px;
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 92px);
    overflow: auto;
    transform: translateX(-50%);
}

.confirm-modal {
    left: 50%;
    top: 50%;
    width: min(460px, calc(100vw - 28px));
    transform: translate(-50%, -50%);
}

.smx-confirm-modal {
    display: grid;
    gap: 14px;
    border: 1px solid #d8e3ec;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(246, 250, 254, 0.98) 0%, rgba(255, 255, 255, 0.99) 52%),
        var(--surface);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    padding: 24px 24px 22px;
    box-shadow: 0 34px 90px rgba(14, 22, 31, 0.24);
    animation: smx-confirm-enter 0.22s cubic-bezier(0.2, 0.9, 0.24, 1);
}

.smx-confirm-modal[data-confirm-tone="warn"] {
    border-color: #e7d2b2;
    box-shadow: 0 28px 80px rgba(73, 51, 14, 0.18);
}

.smx-confirm-modal[data-confirm-tone="danger"] {
    border-color: #efc1bb;
    box-shadow: 0 28px 80px rgba(95, 25, 17, 0.18);
}

.smx-confirm-head {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.smx-confirm-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 2px;
    border-radius: 999px;
    background: #edf4fb;
    color: #295b88;
    font-size: 28px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(41, 91, 136, 0.08);
}

.smx-confirm-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 88px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf4fb;
    color: #295b88;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.smx-confirm-modal[data-confirm-tone="warn"] .smx-confirm-kicker {
    background: #fff1dd;
    color: #9a5c12;
}

.smx-confirm-modal[data-confirm-tone="warn"] .smx-confirm-icon {
    background: #fff1dd;
    color: #9a5c12;
}

.smx-confirm-modal[data-confirm-tone="danger"] .smx-confirm-kicker {
    background: #fde7e3;
    color: #a43f35;
}

.smx-confirm-modal[data-confirm-tone="danger"] .smx-confirm-icon {
    background: #fde7e3;
    color: #a43f35;
}

.smx-confirm-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.18;
}

.smx-confirm-copy {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    white-space: pre-line;
}

.smx-confirm-actions {
    margin-top: 0;
    justify-content: center;
    gap: 10px;
}

.smx-confirm-modal > .modal-actions {
    position: static;
    margin: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
}

@keyframes smx-confirm-enter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 12px)) scale(0.965);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.modal-form-grid label {
    display: grid;
    gap: 6px;
}

.definition-modal .modal-form-grid label[data-field-kind]:not(.checkbox-line) {
    position: relative;
    gap: 7px;
    min-width: 0;
    border: 1px solid var(--line);
    border-color: color-mix(in srgb, var(--field-accent, #d8e3ec) 32%, var(--line));
    border-left: 4px solid var(--field-accent, #d8e3ec);
    border-radius: var(--radius);
    background: #fff;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--field-bg, #f8fbfd) 78%, #fff), #fff);
    padding: 9px 10px;
}

.definition-modal .modal-form-grid label[data-field-kind] > span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--field-accent, var(--blue)) 74%, #273241);
    font-size: 11px;
    letter-spacing: 0.01em;
}

.definition-modal .modal-form-grid label[data-field-kind] > span:first-child::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--field-accent, var(--blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent, var(--blue)) 15%, transparent);
}

.definition-modal .modal-form-grid label[data-field-kind] input,
.definition-modal .modal-form-grid label[data-field-kind] select,
.definition-modal .modal-form-grid label[data-field-kind] textarea {
    width: 100%;
    min-width: 0;
    border-color: color-mix(in srgb, var(--field-accent, #cdd9e4) 22%, var(--line));
    background: color-mix(in srgb, var(--field-bg, #fff) 45%, #fff);
}

.definition-modal .modal-form-grid label[data-field-kind] input:focus,
.definition-modal .modal-form-grid label[data-field-kind] select:focus,
.definition-modal .modal-form-grid label[data-field-kind] textarea:focus {
    border-color: var(--field-accent, var(--blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent, var(--blue)) 16%, transparent);
}

.definition-modal .modal-form-grid label.is-select-field:not(.checkbox-line)::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--field-accent, var(--blue)) 45%, #fff);
}

.definition-modal .modal-form-grid label[data-field-kind="identity"] {
    --field-accent: #2776b6;
    --field-bg: #eef7ff;
}

.definition-modal .modal-form-grid label[data-field-kind="link"] {
    --field-accent: #248b9a;
    --field-bg: #eefbfc;
}

.definition-modal .modal-form-grid label[data-field-kind="option"] {
    --field-accent: #6f6ab7;
    --field-bg: #f4f3ff;
}

.definition-modal .modal-form-grid label[data-field-kind="state"] {
    --field-accent: #2f9b67;
    --field-bg: #effaf4;
}

.definition-modal .modal-form-grid label[data-field-kind="date"] {
    --field-accent: #3b87a8;
    --field-bg: #f0f8fb;
}

.definition-modal .modal-form-grid label[data-field-kind="money"] {
    --field-accent: #c1862f;
    --field-bg: #fff8ed;
}

.definition-modal .modal-form-grid label[data-field-kind="rate"] {
    --field-accent: #8c64a8;
    --field-bg: #fbf3ff;
}

.definition-modal .modal-form-grid label[data-field-kind="capacity"] {
    --field-accent: #467f4f;
    --field-bg: #f2faf0;
}

.definition-modal .modal-form-grid label[data-field-kind="source"] {
    --field-accent: #7b6a52;
    --field-bg: #faf7f1;
}

.definition-modal .modal-form-grid label[data-field-kind="note"] {
    --field-accent: #64748b;
    --field-bg: #f6f8fb;
}

.modal-form-grid label.is-wide,
.modal-form-grid .is-wide {
    grid-column: 1 / -1;
}

.modal-form-grid span,
.confirm-copy {
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.definition-modal .modal-actions {
    position: sticky;
    bottom: -16px;
    z-index: 2;
    margin: 14px -16px -16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
    padding: 12px 16px 16px;
}

.definition-material-profile {
    display: grid;
    gap: 14px;
    border: 1px solid #dbe6ef;
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(180deg, #f8fbff, #fdfefe);
    padding: 16px;
}

.definition-material-profile__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.definition-material-profile__head strong {
    display: block;
    font-size: 16px;
}

.definition-material-profile__head span {
    display: block;
    margin-top: 4px;
}

.definition-material-profile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.definition-material-profile__sources {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 14px;
}

.definition-material-profile__source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.definition-material-profile .checkbox-line.is-disabled,
.definition-material-profile label.is-disabled {
    opacity: 0.56;
}

.definition-table .table-action,
.definition-card .table-action {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
}

.definition-table .table-action svg,
.definition-card .table-action svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.secondary-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: var(--radius);
    padding: 0 14px;
    font-weight: 850;
}

.secondary-button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
}

.secondary-button:hover {
    border-color: #adc5db;
    color: var(--blue);
}

.danger-button {
    border: 1px solid #d45043;
    background: #d45043;
    color: #fff;
}

.danger-button:hover {
    background: #bd4034;
}

.product-module-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    width: 100%;
}

.product-list-panel {
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.product-card-list {
    display: grid;
    gap: 8px;
}

.product-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 8px;
}

.product-card:hover,
.product-card.is-selected {
    border-color: #86b8e1;
    background: #f1f8ff;
}

.product-thumb {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--blue);
    overflow: hidden;
}

.product-thumb img,
.product-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.product-card-main strong,
.product-card-main em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card-main em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.product-detail-stack {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    width: 100%;
}

.product-tabbar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    padding: 8px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.04);
    scrollbar-width: none;
}

.product-tabbar::-webkit-scrollbar {
    display: none;
}

.product-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    padding: 0 14px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.product-tab-button:hover,
.product-tab-button.is-active {
    border-color: #b8d7ed;
    background: #eef7ff;
    color: var(--blue);
    box-shadow: 0 10px 18px rgba(32, 96, 150, 0.08);
}

.product-tab-panel {
    display: none;
}

.product-tab-panel.is-active {
    display: block;
}

.product-cost-archive-grid {
    display: grid;
    gap: 14px;
}

.product-cost-latest-card,
.product-cost-history-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.product-cost-latest-card {
    border-color: #cfe6dc;
    background:
        radial-gradient(circle at 96% 10%, rgba(31, 138, 91, 0.12), transparent 28%),
        linear-gradient(135deg, #f7fffb 0%, #ffffff 62%);
}

.product-cost-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.product-cost-metrics article,
.product-cost-source div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid #d9e8f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
}

.product-cost-metrics span,
.product-cost-metrics em,
.product-cost-source span,
.product-cost-history-table em {
    color: #617485;
    font-size: 12px;
    line-height: 1.35;
}

.product-cost-metrics strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 20px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-live-sales-metric {
    grid-column: span 2;
    align-content: start;
    border-color: #b9e1d0 !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.86)) !important;
}

.product-live-sales-metric strong,
.product-live-sales-cell strong {
    color: #047857;
}

.product-live-sales-chip-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
}

.product-live-sales-chip {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #d7ecdf;
    border-left: 3px solid var(--live-sales-color, #10b981);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
}

.product-live-sales-chip small {
    overflow: hidden;
    color: #0b6896;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-live-sales-chip strong {
    display: block;
    overflow: hidden;
    color: #047857;
    font-size: 15px;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-live-sales-chip em {
    margin-top: 0;
    overflow: hidden;
    color: #6a7e8d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-live-sales-chip-list.is-compact {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 6px;
}

.product-live-sales-chip-list.is-compact .product-live-sales-chip {
    padding: 6px 8px;
    border-radius: 10px;
}

.product-live-sales-chip-list.is-compact .product-live-sales-chip strong {
    font-size: 12px;
}

.product-live-sales-chip-list.is-compact .product-live-sales-chip small {
    font-size: 10px;
}

.product-cost-source {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.product-cost-source strong,
.product-cost-history-table strong {
    display: block;
    overflow: hidden;
    color: #0d2538;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-cost-history-wrap {
    position: relative;
    max-height: 520px;
    overflow: auto;
    border: 1px solid #dce8f2;
    border-radius: 18px;
    isolation: isolate;
}

.product-cost-history-table {
    min-width: 1120px;
    table-layout: fixed;
}

.product-cost-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #f3f8fc;
    box-shadow: 0 1px 0 #dce8f2;
}

.product-cost-history-table th,
.product-cost-history-table td {
    overflow: hidden;
    vertical-align: middle;
}

.product-cost-history-table th:nth-child(1),
.product-cost-history-table td:nth-child(1) { width: 13%; }
.product-cost-history-table th:nth-child(2),
.product-cost-history-table td:nth-child(2) { width: 11%; }
.product-cost-history-table th:nth-child(3),
.product-cost-history-table td:nth-child(3) { width: 21%; }
.product-cost-history-table th:nth-child(4),
.product-cost-history-table td:nth-child(4) { width: 10%; }
.product-cost-history-table th:nth-child(5),
.product-cost-history-table td:nth-child(5) { width: 13%; }
.product-cost-history-table th:nth-child(6),
.product-cost-history-table td:nth-child(6) { width: 20%; }
.product-cost-history-table th:nth-child(7),
.product-cost-history-table td:nth-child(7) { width: 7%; }
.product-cost-history-table th:nth-child(8),
.product-cost-history-table td:nth-child(8) {
    width: 5%;
    text-align: center;
}

.product-cost-history-table td:nth-child(6) em {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-cost-history-table td:nth-child(7) {
    display: table-cell;
    white-space: nowrap;
}

.product-cost-history-table td:nth-child(7) .state-pill,
.product-cost-history-table td:nth-child(7) .cost-issue-badge {
    vertical-align: middle;
}

.product-cost-history-table td:nth-child(7) .cost-issue-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
}

.product-cost-simulation-action {
    position: relative;
    z-index: 0;
    display: inline-grid;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}

.product-cost-simulation-action svg {
    width: 16px;
    height: 16px;
    margin: 0;
}

.product-live-sales-cell {
    box-shadow: inset 4px 0 0 #10b981;
}

@media (max-width: 960px) {
    .product-live-sales-metric {
        grid-column: span 1;
    }
}

.product-hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.product-hero-copy {
    min-width: 0;
}

.product-hero-copy span {
    display: block;
    color: var(--muted);
    margin-top: 5px;
}

.product-hero-media {
    display: grid;
    place-items: center;
    width: 88px;
    height: 70px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--blue);
    overflow: hidden;
}

.product-hero-media svg {
    width: 28px;
    height: 28px;
}

.product-detail-hero {
    min-height: 126px;
    background:
        linear-gradient(135deg, rgba(16, 118, 164, 0.08), rgba(42, 156, 128, 0.07)),
        #fff;
}

.product-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.product-hero-meta span {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.68);
    padding: 9px 10px;
}

.product-hero-meta strong {
    color: var(--ink);
    font-size: 16px;
}

.product-hero-meta em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.product-hero-preview {
    width: 120px;
    height: 96px;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) minmax(520px, 0.8fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.product-detail-grid {
    display: grid;
    gap: 12px;
}

.detail-card {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px;
}

.detail-card > strong {
    font-size: 15px;
}

.product-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}

.product-hero-stats span {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 12px;
}

.product-hero-stats strong {
    display: block;
    font-size: 24px;
    line-height: 1.05;
}

.product-hero-stats em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.product-form-panel {
    min-width: 0;
}

.product-edit-form {
    display: grid;
    gap: 14px;
}

.form-zone {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.form-zone:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.form-zone-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.form-zone-title strong {
    font-size: 13px;
    font-weight: 900;
}

.form-zone-title span {
    color: var(--muted);
    font-size: 12px;
}

.product-edit-form label:not(.toggle-field),
.product-create-form label:not(.toggle-field),
.product-report-side-zone label {
    display: grid;
    gap: 6px;
    align-content: start;
}

.product-edit-form label,
.product-create-form label,
.product-report-side-zone label {
    min-width: 0;
}

.product-edit-form label:not(.toggle-field) > span:first-child,
.product-create-form label:not(.toggle-field) > span:first-child,
.product-report-side-zone label > span:first-child {
    color: #173554;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
}

.product-edit-form label > span.inline-help-heading,
.product-create-form label > span.inline-help-heading,
.product-report-side-zone label > span.inline-help-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.product-identity-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.product-identity-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.product-identity-input-row > input {
    min-width: 0;
    min-height: 38px;
    height: 38px;
}

.product-edit-form input[data-identity-code-input][readonly],
.product-edit-form input[data-identity-name-input][readonly],
.product-create-form input[data-identity-code-input][readonly],
.product-create-form input[data-identity-name-input][readonly] {
    border-color: #d7e0ea;
    background: #f3f6f9;
    color: #6f8197;
    cursor: default;
}

.product-identity-override-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    white-space: nowrap;
}

.product-identity-override-inline-input {
    min-height: 38px;
    height: 38px;
    border-radius: var(--radius);
}

.product-identity-override-inline-input {
    padding: 0 10px;
    background: #ffffff;
}

.product-edit-form .product-identity-override-inline input[type="checkbox"],
.product-create-form .product-identity-override-inline input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #16835b;
}

.product-identity-override-inline > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.product-identity-inline-hint {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.product-edit-form label.is-required:not(.toggle-field) > span:first-child:not(.inline-help-heading)::after,
.product-create-form label.is-required:not(.toggle-field) > span:first-child:not(.inline-help-heading)::after,
.product-report-side-zone label.is-required > span:first-child:not(.inline-help-heading)::after,
.product-edit-form label.is-required:not(.toggle-field) > span.inline-help-heading > .inline-help-label::after,
.product-create-form label.is-required:not(.toggle-field) > span.inline-help-heading > .inline-help-label::after,
.product-report-side-zone label.is-required > span.inline-help-heading > .inline-help-label::after {
    content: " *";
    color: #b84238;
    font-weight: 800;
}

.product-edit-form label.is-required:not(.toggle-field) input,
.product-edit-form label.is-required:not(.toggle-field) select,
.product-edit-form label.is-required:not(.toggle-field) textarea,
.product-create-form label.is-required:not(.toggle-field) input,
.product-create-form label.is-required:not(.toggle-field) select,
.product-create-form label.is-required:not(.toggle-field) textarea,
.product-report-side-zone label.is-required input,
.product-report-side-zone label.is-required select,
.product-report-side-zone label.is-required textarea {
    border-color: var(--line);
    background: #ffffff;
}

.product-edit-form label.is-invalid:not(.toggle-field) > span:first-child,
.product-create-form label.is-invalid:not(.toggle-field) > span:first-child,
.product-report-side-zone label.is-invalid > span:first-child {
    color: #b84238;
}

.product-edit-form label.is-invalid:not(.toggle-field) input,
.product-edit-form label.is-invalid:not(.toggle-field) select,
.product-edit-form label.is-invalid:not(.toggle-field) textarea,
.product-create-form label.is-invalid:not(.toggle-field) input,
.product-create-form label.is-invalid:not(.toggle-field) select,
.product-create-form label.is-invalid:not(.toggle-field) textarea,
.product-report-side-zone label.is-invalid input,
.product-report-side-zone label.is-invalid select,
.product-report-side-zone label.is-invalid textarea {
    border-color: #d45043;
    background: #ffffff;
    box-shadow: none;
}

.product-edit-form input,
.product-edit-form select {
    width: 100%;
}

.product-edit-form .span-full,
.product-edit-form .product-create-typebar,
.product-edit-form .product-create-texture-state-note {
    grid-column: 1 / -1;
}

.product-edit-form input[readonly] {
    background: var(--surface-2);
    color: var(--muted);
}

.toggle-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 12px;
}

.product-edit-form .toggle-field input[type="checkbox"],
.product-create-form .toggle-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #16835b;
}

.toggle-field > input[type="hidden"] {
    display: none;
}

.toggle-field span,
.toggle-field strong,
.toggle-field em {
    display: block;
}

.toggle-field strong {
    font-size: 13px;
    font-weight: 900;
}

.toggle-field em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
    margin-top: 2px;
}

.capability-note {
    grid-column: 1 / -1;
    border: 1px solid #d7e2eb;
    border-radius: var(--radius);
    background: #f6f9fb;
    color: #536170;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    padding: 10px 12px;
}

.product-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.product-optional-fields {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed #d7e4ee;
    border-radius: 16px;
    background: #fbfdff;
}

.product-optional-fields summary {
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 900;
    color: #274b6d;
}

.product-optional-fields summary::-webkit-details-marker {
    display: none;
}

.product-optional-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-optional-fields-grid label:last-child {
    grid-column: 1 / -1;
}

.cutting-panel {
    position: sticky;
    top: 18px;
    align-self: start;
    overflow: hidden;
}

.cutting-result-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.optimal-actions {
    display: flex;
    justify-content: stretch;
    margin-bottom: 10px;
}

.optimal-actions .primary-button {
    width: 100%;
}

.optimal-required-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.optimal-required-grid div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f7fbf8;
    padding: 9px 10px;
}

.optimal-required-grid div.is-missing {
    border-color: #e2a542;
    background: #fff6e2;
}

.optimal-required-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 4px;
}

.optimal-required-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.cutting-result-strip div,
.cutting-details-grid div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px;
}

.cutting-result-strip span,
.cutting-details-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 4px;
}

.cutting-result-strip strong {
    font-size: 20px;
}

.cutting-preview-wrap {
    display: grid;
    place-items: center;
    min-height: 430px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(#eef3f7 1px, transparent 1px),
        linear-gradient(90deg, #eef3f7 1px, transparent 1px),
        #fbfdff;
    background-size: 22px 22px;
    padding: 14px;
}

.cutting-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1040 / 720;
    max-height: 520px;
    fill: initial;
    stroke: initial;
    filter: drop-shadow(0 14px 26px rgba(32, 46, 61, 0.14));
}

.cutting-svg text {
    font-family: inherit;
}

.cutting-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.cutting-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cutting-legend i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.cutting-legend .main {
    background: #3b8cc4;
}

.cutting-legend .extra {
    background: #dfa34f;
}

.cutting-legend .waste {
    background: #f7dfd5;
    border: 1px solid #d6a391;
}

.pvc-visual {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfd;
    margin-top: 14px;
    padding: 12px;
}

.pvc-visual strong,
.pvc-visual span {
    display: block;
}

.pvc-visual span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.pvc-panel-map {
    position: relative;
    width: 120px;
    height: 92px;
    border: 2px solid #d0b17a;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(132, 94, 43, 0.12), transparent 38%, rgba(132, 94, 43, 0.1)),
        #d3aa6d;
}

.pvc-panel-map > span {
    position: absolute;
    display: grid;
    place-items: center;
    color: transparent;
    background: rgba(48, 63, 78, 0.18);
}

.pvc-panel-map > span.is-on {
    background: #1976a2;
}

.edge-top {
    left: -2px;
    right: -2px;
    top: -7px;
    height: 8px;
}

.edge-bottom {
    left: -2px;
    right: -2px;
    bottom: -7px;
    height: 8px;
}

.edge-left {
    left: -7px;
    top: -2px;
    bottom: -2px;
    width: 8px;
}

.edge-right {
    right: -7px;
    top: -2px;
    bottom: -2px;
    width: 8px;
}

.edge-note {
    position: absolute;
    display: none;
}

.cutting-empty {
    color: var(--muted);
    font-weight: 850;
}

.cutting-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.cutting-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.cutting-breakdown div {
    border: 1px solid #cddde9;
    border-radius: var(--radius);
    background: #f5f9fc;
    padding: 10px;
}

.cutting-breakdown span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 4px;
}

.cutting-breakdown strong {
    display: block;
}

.cutting-details-grid strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.optimal-modal {
    left: 50%;
    top: 64px;
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow: auto;
    transform: translateX(-50%);
}

.product-context-panel {
    min-height: 260px;
}

.product-context-panel.is-carton-preview {
    display: grid;
    gap: 10px;
    align-content: start;
}

.product-detail-side-stack {
    display: grid;
    gap: 14px;
    align-content: start;
}

.product-detail-side-stack > .cutting-panel,
.product-detail-side-stack > .product-report-side-panel {
    position: static;
}

.product-context-copy {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px;
}

.product-context-copy span {
    color: var(--muted);
    line-height: 1.55;
}

.material-card-panel {
    display: grid;
    gap: 14px;
}

.material-texture-preview {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.material-texture-swatch {
    position: relative;
    min-height: 156px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--texture-base, #d0aa73);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 12px, var(--texture-line, #865d32) 13px 14px),
        linear-gradient(115deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08));
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.material-texture-swatch.has-image {
    background-position: center;
    background-size: cover;
}

.material-texture-swatch span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 6px;
    background: rgba(15, 23, 32, 0.76);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 10px;
}

.material-texture-copy,
.material-usage-card,
.material-capability-empty {
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px;
}

.material-texture-copy strong,
.material-usage-card strong,
.material-capability-empty strong {
    font-size: 16px;
}

.material-texture-copy span,
.material-usage-card span,
.material-capability-empty span {
    color: var(--muted);
    line-height: 1.55;
}

.material-capability-empty {
    min-height: 120px;
    border-style: dashed;
}

.texture-priority-list {
    display: grid;
    gap: 8px;
}

.texture-priority-list div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfd;
    padding: 10px;
}

.texture-priority-list div.is-active {
    border-color: #91c9a4;
    background: #f1fbf4;
}

.texture-priority-list strong {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e8eef4;
    color: #415364;
    font-size: 12px;
}

.texture-priority-list .is-active strong {
    background: #16835b;
    color: #fff;
}

.texture-priority-list span {
    font-weight: 900;
}

.texture-priority-list em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.material-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.material-detail-grid div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px;
}

.material-detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 4px;
}

.material-detail-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.co-consumption-zone {
    gap: 12px;
}

.co-consumption-note {
    display: grid;
    gap: 6px;
    border: 1px solid #cfe1f3;
    border-radius: var(--radius);
    background: #f4f8fc;
    padding: 12px 14px;
}

.co-consumption-note strong,
.co-consumption-hint strong,
.co-consumption-summary-list strong {
    font-size: 13px;
    font-weight: 850;
}

.co-consumption-note span,
.co-consumption-hint span,
.co-consumption-summary-list span {
    color: var(--muted);
    line-height: 1.5;
}

.co-consumption-list {
    display: grid;
    gap: 10px;
}

.product-material-summary.is-three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-material-summary.is-co-consumption-summary article {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 14px;
    min-height: 88px;
}

.product-material-summary.is-co-consumption-summary article > span {
    margin-right: 0;
    white-space: normal;
    font-size: 11px;
    line-height: 1.35;
}

.product-material-summary.is-co-consumption-summary article > strong {
    display: block;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.co-consumption-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.55fr) minmax(126px, 0.42fr) minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfd;
    padding: 12px;
}

.co-consumption-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.co-consumption-row .is-wide {
    min-width: 0;
}

.material-bag-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: start;
}

.material-bag-select-field {
    grid-column: 1 / -1;
}

.material-bag-note-field {
    grid-column: span 2;
}

.co-consumption-remove {
    align-self: end;
    width: 42px;
    min-width: 42px;
    height: 42px;
    color: var(--red);
}

.co-consumption-hint {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    border-top: 1px solid #e6edf4;
    padding-top: 10px;
}

.co-consumption-hint.is-inline-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.co-consumption-hint.is-inline-help strong {
    min-width: 0;
}

.co-consumption-hint.is-inline-help .inline-help-button {
    flex: 0 0 auto;
}

.co-consumption-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.co-consumption-save {
    display: flex;
    justify-content: flex-end;
}

.co-consumption-zone-create {
    margin-bottom: 4px;
}

.co-consumption-summary-list {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.co-consumption-summary-list div {
    border: 1px solid #e3e9ef;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
}

.material-usage-card .inline-help-heading {
    justify-content: space-between;
    width: 100%;
}

@container (max-width: 760px) {
    .product-material-summary.is-three-up {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .co-consumption-row {
        grid-template-columns: minmax(0, 1fr) minmax(118px, 0.4fr) minmax(0, 1fr) auto;
    }
}

@container (max-width: 700px) {
    .product-material-summary.is-three-up {
        grid-template-columns: 1fr;
    }

    .co-consumption-row {
        grid-template-columns: 1fr;
    }

    .co-consumption-remove {
        justify-self: end;
    }

    .co-consumption-hint.is-inline-help {
        align-items: flex-start;
    }
}

.lacquer-recipe-card.is-active {
    border-color: #b8d8f0;
    background:
        radial-gradient(circle at top right, rgba(46, 126, 193, 0.12), transparent 42%),
        linear-gradient(180deg, #f7fbff 0%, #eef6fd 100%);
}

.lacquer-module-layout {
    align-items: start;
}

.recipe-center-tabs {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recipe-center-tabs .product-tab-button {
    min-width: 180px;
    justify-content: center;
}

.lacquer-module-list {
    position: sticky;
    top: 26px;
}

.lacquer-recipe-module-list {
    display: grid;
    gap: 12px;
}

.lacquer-recipe-module-link {
    color: inherit;
    text-decoration: none;
}

.lacquer-recipe-module-link.is-active {
    border-color: #9fc4e6;
    box-shadow: 0 14px 30px rgba(22, 42, 77, 0.08);
}

.lacquer-recipe-summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.lacquer-recipe-summary-strip article {
    display: grid;
    gap: 6px;
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    background: #f9fbfd;
    padding: 12px 14px;
}

.lacquer-recipe-summary-strip span {
    color: var(--muted);
    font-size: 13px;
}

.lacquer-recipe-summary-strip strong {
    font-size: 21px;
    font-weight: 850;
}

.lacquer-recipe-summary-strip-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lacquer-module-main {
    display: grid;
    gap: 16px;
}

.lacquer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lacquer-detail-intro {
    margin-top: 6px;
}

.lacquer-formula-note {
    margin-top: 4px;
}

.lacquer-recipe-line-grid {
    display: grid;
    gap: 14px;
}

.lacquer-recipe-line-card {
    display: grid;
    gap: 14px;
}

.lacquer-step-card {
    display: grid;
    gap: 14px;
}

.lacquer-line-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.lacquer-line-card-head > div:first-child {
    display: grid;
    gap: 4px;
}

.lacquer-line-card-head span {
    color: var(--muted);
    font-size: 13px;
}

.lacquer-line-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lacquer-line-card-grid > div {
    display: grid;
    gap: 6px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px 14px;
}

.lacquer-line-card-grid span {
    color: var(--muted);
    font-size: 12px;
}

.lacquer-line-card-grid strong {
    font-size: 18px;
    line-height: 1.35;
    word-break: break-word;
}

.lacquer-line-formula-block code {
    display: block;
    color: #20496e;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    white-space: normal;
}

.lacquer-line-error strong {
    color: #b13b34;
    font-size: 14px;
}

.lacquer-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.lacquer-step-stat {
    display: grid;
    gap: 6px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px 14px;
}

.lacquer-step-stat span {
    color: var(--muted);
    font-size: 12px;
}

.lacquer-step-stat strong {
    font-size: 17px;
    line-height: 1.35;
    word-break: break-word;
}

.lacquer-step-stat.is-error strong {
    color: #b13b34;
    font-size: 14px;
}

.lacquer-recipe-empty-state {
    align-items: start;
    gap: 14px;
}

.lacquer-recipe-form,
.compact-form.lacquer-recipe-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
}

.lacquer-recipe-editor-modal {
    top: 38px;
    width: min(1320px, calc(100vw - 36px));
    max-height: calc(100vh - 76px);
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.lacquer-recipe-modal-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
}

.lacquer-token-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.lacquer-token-chip {
    border: 1px solid #c9daea;
    border-radius: 999px;
    background: #f5f9fd;
    color: #1f5f95;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 8px 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lacquer-token-chip:hover {
    border-color: #8ebbe0;
    box-shadow: 0 10px 24px rgba(20, 57, 93, 0.1);
    transform: translateY(-1px);
}

.lacquer-modal-guidance {
    margin-bottom: 14px;
}

.lacquer-modal-body {
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.lacquer-recipe-editor-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 0;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

.lacquer-modal-footer {
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
}

.lacquer-recipe-modal-layout .admin-modal-main,
.lacquer-recipe-modal-layout .admin-modal-aside {
    min-width: 0;
}

.lacquer-recipe-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lacquer-editor-section-head {
    margin-top: 6px;
}

.lacquer-recipe-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: start;
}

.lacquer-recipe-form .bom-component-picker,
.lacquer-recipe-form .bom-component-trigger {
    width: 100%;
}

.lacquer-recipe-form [data-lacquer-formula-field] input,
.lacquer-formula-editor {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.lacquer-formula-field-card {
    grid-column: 1 / -1;
}

.lacquer-formula-editor {
    min-height: 132px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.55;
    padding: 14px 14px 12px;
}

.lacquer-recipe-hint {
    grid-column: 1 / -1;
}

.lacquer-row-sample {
    color: #2c6fad;
    font-size: 13px;
    font-weight: 700;
}

.lacquer-row-sample.is-error {
    color: #b13b34;
}

.lacquer-recipe-archive-form {
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .co-consumption-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .material-bag-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-recipe-row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .material-entry-actions {
        justify-content: stretch;
    }

    .material-entry-actions .primary-button,
    .material-entry-actions .secondary-button {
        flex: 1 1 220px;
    }

    .material-bag-select-field,
    .material-bag-note-field,
    .quick-recipe-row-grid > .is-wide {
        grid-column: 1 / -1;
    }

    .co-consumption-remove {
        justify-self: end;
    }

    .lacquer-recipe-summary-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .lacquer-line-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lacquer-recipe-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lacquer-recipe-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lacquer-modal-body {
        padding: 16px;
    }
}

@media (max-width: 720px) {
    .co-consumption-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .material-bag-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .quick-recipe-row-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .material-entry-actions .primary-button,
    .material-entry-actions .secondary-button {
        width: 100%;
        flex: 1 1 auto;
    }

    .co-consumption-remove {
        width: 100%;
        justify-self: stretch;
    }

    .co-consumption-actions {
        align-items: stretch;
    }

    .co-consumption-actions .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .lacquer-detail-actions {
        width: 100%;
        justify-content: stretch;
    }

    .lacquer-detail-actions .secondary-button,
    .lacquer-detail-actions .ghost-button {
        width: 100%;
        justify-content: center;
    }

    .lacquer-recipe-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .recipe-center-tabs .product-tab-button {
        width: 100%;
    }

    .lacquer-recipe-editor-modal .modal-header {
        padding: 16px 16px 12px;
    }

    .lacquer-modal-footer {
        padding: 12px 16px 16px;
    }
}

.material-texture-upload {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.texture-upload-preview {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 8px;
}

.texture-upload-preview img {
    width: 72px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
}

.texture-upload-preview span {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.optimal-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-editor-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 14px;
    min-width: 0;
}

.product-editor-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.product-editor-grid.is-media {
    grid-template-columns: minmax(420px, 1.25fr) minmax(320px, 0.75fr);
    align-items: start;
}

.product-spec-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.product-spec-matrix div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px;
}

.product-spec-matrix span,
.mini-table span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.product-spec-matrix strong {
    display: block;
    margin-top: 4px;
}

.media-form,
.compact-form,
.product-create-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.media-form {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.product-scene-upload {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.viewer-source-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.texture-upload-preview.is-file {
    display: flex;
    align-items: center;
    gap: 10px;
}

.texture-upload-preview.is-file > span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef5ff;
    color: var(--accent);
}

.product-gallery-panel {
    display: grid;
    gap: 16px;
}

.product-gallery-upload-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 14px;
    border: 1px dashed #bfd8eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fcff 0%, #ffffff 100%);
}

.product-gallery-upload-form label {
    margin: 0;
}

.product-gallery-upload-form .form-help {
    grid-column: 1 / -1;
}

.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.product-gallery-card {
    position: relative;
    display: grid;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.product-gallery-image {
    display: block;
    aspect-ratio: 4 / 3;
    background: #eef4f8;
}

.product-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-card-body {
    display: grid;
    gap: 4px;
    padding: 0 12px 12px;
}

.product-gallery-card-body strong,
.product-gallery-card-body span,
.product-gallery-card-body em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-gallery-card-body strong {
    font-size: 13px;
}

.product-gallery-card-body span,
.product-gallery-card-body em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.product-gallery-delete-form {
    position: absolute;
    top: 8px;
    right: 8px;
}

.product-gallery-delete-form .table-action {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
}

.product-gallery-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbfd;
}

.product-gallery-empty > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #eef7ff;
    color: var(--blue);
}

.product-gallery-empty svg {
    width: 20px;
    height: 20px;
}

.product-gallery-empty strong,
.product-gallery-empty em {
    display: block;
}

.product-gallery-empty em {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

@media (max-width: 760px) {
    .product-gallery-upload-form {
        grid-template-columns: 1fr;
    }
}

.compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-form > .is-wide,
.product-create-form > .is-wide {
    grid-column: 1 / -1;
}

.compact-form .primary-button,
.product-create-form .primary-button {
    align-self: end;
}

.product-create-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-create-launcher {
    display: grid;
    gap: 12px;
}

.product-create-typebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 6px;
}

.product-create-type-button {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 58px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #f8fbff;
    color: var(--text);
    font-weight: 700;
}

.product-create-type-button svg {
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

.product-create-type-button-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.product-create-type-button-copy strong {
    font-size: 13px;
    line-height: 1.2;
}

.product-create-type-button-copy small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
}

.product-create-type-button.is-active {
    border-color: rgba(47, 122, 203, 0.35);
    background: rgba(47, 122, 203, 0.1);
    color: var(--accent);
}

.product-create-form-inline {
    margin-top: 12px;
}

.product-create-modal {
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    width: min(1320px, calc(100vw - 32px));
    max-height: calc(100vh - 56px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto auto;
}

.product-create-launcher-modal {
    position: sticky;
    top: 74px;
    z-index: 2;
    display: grid;
    gap: 6px;
    background: var(--surface);
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--line);
}

.product-create-form-modal {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 16px;
    margin-top: 0;
    padding: 0 16px 16px;
}

.product-create-form-modal .form-zone {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
}

.product-create-form-modal .form-zone[data-create-section="identity"] {
    grid-template-columns: minmax(96px, 0.65fr) minmax(220px, 1.15fr) minmax(320px, 1.7fr) minmax(92px, 0.6fr);
}

.product-create-form-modal .form-zone[data-create-section="identity"] > label {
    grid-column: auto;
}

.product-create-form-modal .form-zone > label,
.product-create-form-modal .form-zone > .toggle-field {
    grid-column: span 3;
    min-width: 0;
}

.product-create-form-modal .form-zone > .is-wide,
.product-create-form-modal .form-zone > .span-12 {
    grid-column: 1 / -1;
}

.product-create-form-modal .form-zone > .span-6 {
    grid-column: span 6;
}

.product-create-form-modal .form-zone > .span-4 {
    grid-column: span 4;
}

.product-create-form-modal .form-zone > .span-3 {
    grid-column: span 3;
}

.product-create-form-modal .form-zone > .span-2 {
    grid-column: span 2;
}

.product-create-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.product-create-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.product-create-header-button {
    min-height: 38px;
    padding: 0 14px;
    white-space: nowrap;
}

.product-create-modal-body {
    display: grid;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    gap: 14px;
}

.product-create-top-alert {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #efc8bf;
    border-radius: 14px;
    background: #fff8f4;
}

.product-create-top-alert strong {
    color: #a7392f;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}

.product-create-top-alert span {
    color: #8c544c;
    font-size: 12px;
    line-height: 1.45;
}

.product-create-legacy-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed #d4e0ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.product-create-legacy-panel-head {
    display: grid;
    gap: 4px;
}

.product-create-legacy-panel-head strong {
    color: #173554;
    font-size: 13px;
    font-weight: 900;
}

.product-create-legacy-panel-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.product-create-legacy-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

.product-create-legacy-grid > label,
.product-create-legacy-grid > .toggle-field {
    grid-column: span 4;
    min-width: 0;
}

.product-create-modal-header-actions .secondary-button.is-warning {
    border-color: #efc1bb;
    background: #fff3f0;
    color: #b84238;
}

.product-create-modal-footer {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -16px -16px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.product-create-form label,
.compact-form label {
    min-width: 0;
}

.product-create-form-modal label {
    width: 100%;
    align-self: start;
}

.product-create-form input,
.product-create-form select,
.compact-form input,
.compact-form select {
    width: 100%;
}

.product-create-form .product-identity-override-inline input[type="hidden"],
.product-edit-form .product-identity-override-inline input[type="hidden"] {
    display: none;
}

.product-create-form .product-identity-override-inline input[type="checkbox"],
.product-edit-form .product-identity-override-inline input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.form-help {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.4;
}

.inline-help-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.inline-help-label {
    min-width: 0;
}

.inline-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #cfe0ee;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    color: #2b679f;
    box-shadow: 0 4px 10px rgba(35, 85, 131, 0.08);
}

.inline-help-button:hover,
.inline-help-button:focus-visible {
    border-color: #9fc6e4;
    background: linear-gradient(180deg, #ffffff 0%, #ebf5ff 100%);
}

.inline-help-button svg {
    width: 14px;
    height: 14px;
}

.inline-help-modal {
    position: fixed;
    z-index: 980;
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 40px));
    max-height: calc(100vh - 56px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0;
    border: 1px solid #d8e5ef;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 78%, #f4f8fc 100%);
    box-shadow: 0 22px 56px rgba(14, 30, 48, 0.22);
}

.inline-help-modal.is-checklist {
    width: min(610px, calc(100vw - 40px));
}

.inline-help-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #e1ebf3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 253, 0.96));
}

.inline-help-modal > .modal-header {
    position: relative;
    top: auto;
    margin: 0;
}

.inline-help-modal .modal-footer {
    justify-content: flex-end;
    padding: 10px 18px 12px;
    background: linear-gradient(180deg, rgba(248, 251, 254, 0.92), #fff);
}

.inline-help-modal > .modal-footer {
    position: relative;
    bottom: auto;
    margin: 0;
}

.inline-help-modal .modal-header h2 {
    margin: 2px 0 0;
    color: #132f4c;
    font-size: 20px;
    line-height: 1.14;
    letter-spacing: -0.02em;
}

.inline-help-modal .modal-header .eyebrow {
    color: #2566a1;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.inline-help-modal .icon-button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border-color: #d4e2ee;
    background: rgba(255, 255, 255, 0.92);
}

.inline-help-modal-body {
    display: grid;
    gap: 10px;
    padding: 14px 18px 16px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.inline-help-modal-copy {
    display: grid;
    gap: 8px;
}

.inline-help-lead,
.inline-help-modal-body p {
    margin: 0;
    color: #32506d;
    font-size: 12px;
    line-height: 1.58;
}

.inline-help-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #dbe7f0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
    box-shadow: 0 8px 18px rgba(21, 52, 79, 0.05);
}

.inline-help-card.is-step {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
}

.inline-help-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2f7dbe 0%, #1f5e97 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(31, 94, 151, 0.18);
}

.inline-help-card-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.inline-help-card-copy strong {
    color: #163753;
    font-size: 14px;
    line-height: 1.28;
}

.inline-help-card-copy p {
    color: #41607b;
}

.inline-help-status-panel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 14px;
    border: 1px solid #f2d2c8;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff9f6 0%, #fff5f1 100%);
}

.inline-help-status-panel.is-success {
    border-color: #cde7d8;
    background: linear-gradient(180deg, #f6fff8 0%, #eefaf1 100%);
}

.inline-help-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #d95d39;
    color: #fff;
    font-size: 0;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(217, 93, 57, 0.18);
}

.inline-help-status-icon.is-success {
    background: #2f8f5b;
    box-shadow: 0 10px 20px rgba(47, 143, 91, 0.18);
}

.inline-help-status-icon svg,
.inline-help-check-indicator svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.inline-help-status-copy {
    display: grid;
    gap: 4px;
}

.inline-help-status-copy strong {
    color: #7f2f1b;
    font-size: 14px;
    line-height: 1.3;
}

.inline-help-status-panel.is-success .inline-help-status-copy strong {
    color: #1f6942;
}

.inline-help-status-copy p {
    margin: 0;
    color: #8f4a38;
}

.inline-help-status-panel.is-success .inline-help-status-copy p {
    color: #3d6f54;
}

.inline-help-checklist-block {
    display: grid;
    gap: 10px;
}

.inline-help-checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inline-help-checklist-head strong {
    color: #163753;
    font-size: 14px;
}

.inline-help-checklist-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid #d4e1eb;
    border-radius: 999px;
    background: #f8fbfe;
    color: #44627d;
    font-size: 11px;
    font-weight: 700;
}

.inline-help-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inline-help-checklist-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid #e0e8ef;
    border-radius: 10px;
    background: #fff;
}

.inline-help-checklist-item.is-done {
    border-color: #d3e8dc;
    background: linear-gradient(180deg, #ffffff 0%, #f6fcf8 100%);
}

.inline-help-check-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff0ea;
    color: #c45837;
    font-size: 0;
    font-weight: 800;
}

.inline-help-check-indicator.is-done {
    background: #ecf8f0;
    color: #2d8a58;
}

.inline-help-checklist-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.inline-help-checklist-copy strong {
    color: #163753;
    font-size: 14px;
    line-height: 1.3;
}

.inline-help-checklist-copy p {
    margin: 0;
    color: #55728b;
    font-size: 12px;
    line-height: 1.5;
}

.inline-help-footnote {
    margin: 0;
    color: #5b7890;
    font-size: 11px;
    line-height: 1.6;
}

.inline-help-checklist-empty {
    padding: 11px 12px;
    border: 1px dashed #d5e1ea;
    border-radius: 10px;
    color: #55728b;
    font-size: 12px;
    background: #fbfdff;
}

@media (max-width: 720px) {
    .inline-help-modal {
        width: calc(100vw - 18px);
        top: 10px;
        max-height: calc(100vh - 20px);
        border-radius: var(--radius);
    }

    .inline-help-modal .modal-header,
    .inline-help-modal-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .inline-help-modal .modal-header h2 {
        font-size: 18px;
    }

    .inline-help-card.is-step {
        grid-template-columns: 1fr;
    }

    .inline-help-step {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .inline-help-status-panel,
    .inline-help-checklist-item {
        grid-template-columns: 1fr;
    }

    .inline-help-checklist-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.mini-table {
    display: grid;
    gap: 8px;
}

.mini-table div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px;
}

.product-material-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
}

.product-material-list-panel,
.product-material-side-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

.product-material-list-panel {
    container-type: inline-size;
}

.product-material-side-panel {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 4px;
}

.material-section-heading-copy {
    display: grid;
    gap: 6px;
    max-width: 760px;
}

.material-section-heading-copy h2 {
    margin: 0;
}

.material-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.material-entry-actions .primary-button,
.material-entry-actions .secondary-button {
    width: auto;
    min-height: 42px;
    padding-inline: 16px;
    justify-content: center;
}

.material-flow-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.product-material-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
}

.product-material-summary article,
.material-intake-note {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
}

.product-material-summary article {
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    padding: 8px 12px 8px 14px;
}

.product-material-summary article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(44, 103, 181, 0.12);
}

.product-material-summary article.is-primary {
    border-color: #c9dff2;
    background: linear-gradient(180deg, #fafdff 0%, #edf6fd 100%);
}

.product-material-summary article.is-primary::before {
    background: linear-gradient(180deg, #2d6fb8 0%, #57a0e1 100%);
}

.product-material-summary span,
.material-intake-note span,
.bom-line-copy span,
.bom-line-metrics span,
.bom-line-toolbar-copy span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.product-material-summary article > span {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-material-summary strong,
.material-intake-note strong {
    font-size: 15px;
    line-height: 1.25;
}

.product-material-summary article > strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(42, 103, 181, 0.08);
    color: #163753;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    max-width: 56%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@container (max-width: 1180px) {
    .product-material-summary article.is-summary-optional {
        display: none;
    }

    .product-material-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.material-intake-note .inline-help-heading,
.material-step-card .inline-help-heading,
.material-compose-head.inline-help-heading {
    justify-content: space-between;
    width: 100%;
}

.material-side-stack {
    display: grid;
    gap: 12px;
}

.material-family-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.material-family-card {
    display: grid;
    gap: 6px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.material-family-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.material-family-card-title {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.material-family-card-title .inline-help-heading {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.material-family-card-title strong {
    font-size: 13px;
    line-height: 1.2;
}

.material-family-card-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.material-family-card span,
.material-family-card em {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    font-style: normal;
}

.material-family-card-meta em {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.material-family-card-head .bom-chip {
    min-height: 22px;
    padding: 0 7px;
    font-size: 10px;
}

.material-intake-note.is-rule {
    border-color: #cbdff3;
    background: linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
}

.material-step-list {
    display: grid;
    gap: 10px;
}

@media (max-width: 1360px) {
    .material-family-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .material-family-guide {
        grid-template-columns: 1fr;
    }
}

.material-step-card,
.material-compose-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #d7e4ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #fdfefe 0%, #f6fafc 100%);
}

.material-step-card strong,
.material-compose-head strong {
    font-size: 15px;
    line-height: 1.4;
}

.material-compose-card {
    gap: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(33, 74, 116, 0.06);
    scroll-margin-top: 88px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.material-compose-card.is-attention {
    border-color: #8fc2ea;
    background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
    box-shadow: 0 18px 36px rgba(38, 94, 146, 0.14);
}

.material-compose-head {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d7e4ee;
}

.bom-component-picker-field > .inline-help-heading {
    justify-content: flex-start;
    width: fit-content;
    gap: 6px;
    color: #173554;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.material-compose-card .primary-button {
    width: 100%;
    justify-content: center;
}

.quick-recipe-card {
    gap: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.quick-recipe-note {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #d7e7f4;
    border-radius: 16px;
    background: #f5faff;
}

.quick-recipe-note strong {
    color: #244b73;
}

.quick-recipe-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.quick-recipe-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.quick-recipe-list {
    display: grid;
    gap: 12px;
}

.quick-recipe-row {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7e4ee;
    border-radius: 18px;
    background: #fbfdff;
}

.quick-recipe-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-recipe-row-title {
    display: grid;
    gap: 4px;
}

.quick-recipe-row-title strong {
    color: #173554;
    font-size: 14px;
}

.quick-recipe-row-title span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.quick-recipe-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-flow: dense;
    gap: 10px;
    align-items: start;
}

.quick-recipe-row-grid > .is-wide {
    grid-column: span 2;
}

.quick-recipe-row-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-recipe-row-grid label > span {
    color: #173554;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.quick-recipe-status {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #deebf4;
    background: #ffffff;
}

.quick-recipe-status [data-quick-preview-text] {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.quick-recipe-actions {
    align-items: center;
}

.quick-recipe-form .primary-button {
    width: 100%;
    justify-content: center;
}

.quick-module-page {
    display: grid;
    gap: 14px;
    padding-bottom: 156px;
}

.quick-module-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 14px;
}

.quick-module-intro > :only-child {
    grid-column: 1 / -1;
}

.quick-module-callout,
.quick-module-current-card,
.quick-module-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #d7e4ee;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(33, 74, 116, 0.06);
}

.quick-module-callout h2,
.quick-module-current-card h3,
.quick-module-card h3 {
    margin: 0;
    color: #173554;
}

.quick-module-callout span,
.quick-module-current-card p,
.quick-module-card-head span,
.quick-module-current-meta span {
    color: var(--muted);
}

.quick-module-current-card {
    align-content: start;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.quick-module-current-card .secondary-button {
    width: fit-content;
    min-height: 36px;
}

.quick-module-current-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.quick-module-current-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-module-current-meta span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f7fb;
    font-size: 12px;
}

.quick-module-layout {
    display: grid;
    gap: 14px;
}

.quick-module-box-rows {
    display: grid;
    gap: 12px;
}

.quick-module-box-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

.quick-module-box-grid > * {
    min-width: 0;
    width: auto;
    max-width: none;
}

.quick-module-field-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    height: 100%;
    align-content: start;
    padding: 14px;
    border: 1px solid #dbe7f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.04);
}

.quick-module-field-card-head {
    display: grid;
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #dce7ef;
}

.quick-module-field-card-head strong {
    color: #173554;
    font-size: 13px;
}

.quick-module-field-card-head span {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.quick-module-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;
    align-items: start;
}

.quick-module-field-grid > .is-wide {
    grid-column: 1 / -1;
}

.quick-module-field-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-module-field-grid label > span {
    color: #173554;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.quick-module-field-grid label.is-required > span::after,
.quick-module-grid label.is-required > span::after,
.quick-recipe-row-grid label.is-required > span::after {
    content: " *";
    color: #b84238;
    font-weight: 800;
}

.quick-route-inline.is-required .quick-route-copy strong::after {
    content: " *";
    color: #b84238;
    font-weight: 800;
}

.quick-module-field-grid label.is-invalid > span,
.quick-module-grid label.is-invalid > span {
    color: #b84238;
}

.quick-module-field-grid input,
.quick-module-field-grid select {
    width: 100%;
    min-height: 40px;
}

.quick-select-with-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: center;
}

.quick-select-with-action .icon-button {
    width: 38px;
    height: 40px;
    border-radius: 12px;
}

.quick-definition-editor {
    gap: 16px;
}

.quick-definition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-module-field-grid input[readonly] {
    background: #f6f9fc;
    color: #5a6f86;
}

.quick-module-utility-card {
    align-content: start;
}

.quick-module-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d7e4ee;
}

.quick-module-card-head > div {
    display: grid;
    gap: 4px;
}

.quick-module-card-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-module-card-head-actions .secondary-button {
    min-height: 36px;
}

.quick-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-flow: dense;
    gap: 10px;
    align-items: start;
}

.quick-module-grid > .is-wide {
    grid-column: span 2;
}

.quick-module-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-module-grid label > span {
    color: #173554;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.quick-module-grid input,
.quick-module-grid select,
.quick-recipe-row-grid input,
.quick-recipe-row-grid select {
    width: 100%;
    min-height: 40px;
}

.quick-module-grid input[readonly],
.quick-recipe-row-grid input[readonly] {
    background: #f6f9fc;
    color: #5a6f86;
}

.quick-module-status {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px;
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
}

.quick-module-field-card.has-invalid {
    border-color: #e2a59e;
    background: linear-gradient(180deg, #fffdfd 0%, #fff5f3 100%);
    box-shadow: 0 0 0 3px rgba(212, 80, 67, 0.08);
}

.quick-module-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.quick-module-tools-root {
    margin-top: 2px;
}

.quick-module-row-tools {
    margin-top: 2px;
    grid-template-columns: 1fr;
}

.quick-module-root-card .quick-module-box-grid,
.quick-module-row .quick-module-box-grid {
    grid-auto-rows: 1fr;
}

.quick-route-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    min-height: 100%;
}

.quick-route-inline.is-invalid,
.quick-module-status.is-invalid,
.quick-recipe-status.is-invalid {
    border-color: #d45043;
    background: #fff7f5;
    box-shadow: 0 0 0 3px rgba(212, 80, 67, 0.12);
}

.quick-route-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-route-copy strong {
    color: #173554;
    font-size: 13px;
}

.quick-route-copy span {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.quick-root-route-inline {
    margin-top: 2px;
}

.quick-route-modal .route-step-list {
    display: grid;
    gap: 14px;
}

.quick-materials-layout {
    gap: 18px;
}

.quick-materials-editor {
    gap: 16px;
}

.quick-material-list {
    display: grid;
    gap: 12px;
    overflow: visible;
}

.quick-material-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(110px, 0.7fr) minmax(160px, 0.9fr) minmax(0, 1.4fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid #d7e4ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.quick-material-row .co-consumption-remove {
    align-self: center;
    justify-self: end;
}

.quick-materials-modal .bom-component-picker-field {
    min-width: 0;
}

.quick-bulk-row {
    grid-template-columns: minmax(0, 1.7fr) minmax(150px, 0.5fr) minmax(300px, 0.95fr);
    align-items: center;
    position: relative;
    overflow: visible;
}

.quick-bulk-row.is-bulk-replacing {
    z-index: 8;
}

.quick-bulk-row.is-picker-open {
    z-index: 32;
}

.quick-bulk-row-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quick-bulk-row-copy strong {
    color: #173554;
    font-size: 15px;
    line-height: 1.4;
}

.quick-bulk-row-copy span {
    color: #607489;
    font-size: 12.5px;
    line-height: 1.45;
}

.quick-bulk-target-field {
    min-width: 0;
}

.quick-bulk-target-field > span {
    color: #173554;
    font-size: 12px;
    font-weight: 800;
}

.quick-bulk-target-field .bom-component-picker {
    gap: 8px;
}

.quick-bulk-target-field .bom-component-trigger {
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.quick-bulk-target-field .bom-component-trigger:hover,
.quick-bulk-target-field .bom-component-trigger.is-open {
    background: linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%);
}

.quick-bulk-target-field.has-selection .bom-component-trigger {
    border-color: #b5d7c8;
    background: linear-gradient(180deg, #fbfffd 0%, #eefaf4 100%);
}

.quick-bulk-target-field .bom-component-trigger-copy strong {
    font-size: 14px;
}

.quick-bulk-target-field .bom-component-trigger-copy span {
    white-space: normal;
}

.quick-bulk-target-field .bom-component-trigger-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(40, 108, 168, 0.1);
    color: #286ca8;
    font-size: 12px;
    font-weight: 900;
}

.quick-bulk-target-field .bom-component-dropdown {
    left: auto;
    right: 0;
    width: min(560px, 72vw);
    max-width: min(560px, calc(100vw - 120px));
    z-index: 60;
}

.quick-dimension-bulk-list {
    gap: 14px;
}

.quick-dimension-bulk-row {
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(120px, 0.56fr));
    align-items: end;
}

.quick-dimension-bulk-row label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.quick-dimension-bulk-row label > span {
    color: #173554;
    font-size: 12px;
    font-weight: 800;
}

.quick-definition-modal,
.quick-route-modal,
.quick-materials-modal,
.quick-dimension-bulk-modal,
.quick-tree-preview-modal {
    z-index: 980;
}

[data-quick-definition-backdrop],
[data-quick-route-backdrop],
[data-quick-materials-backdrop],
[data-quick-dimension-bulk-backdrop],
[data-quick-tree-preview-backdrop] {
    z-index: 970;
}

.quick-tree-preview-modal {
    width: min(1480px, calc(100vw - 32px));
}

.quick-tree-preview-layout {
    display: grid;
    gap: 16px;
}

.quick-tree-preview-summary-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #d7e4ee;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.quick-tree-preview-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-tree-preview-summary-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.quick-tree-preview-summary-copy strong {
    color: #173554;
    font-size: 18px;
    line-height: 1.35;
}

.quick-tree-preview-summary-copy span {
    color: #62758a;
    font-size: 13px;
    line-height: 1.5;
}

.quick-tree-preview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.quick-tree-preview-stat {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.quick-tree-preview-stat span {
    color: #5f7387;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quick-tree-preview-stat strong {
    color: #173554;
    font-size: 20px;
    line-height: 1.1;
}

.quick-tree-preview-tree {
    display: grid;
    gap: 14px;
    padding: 4px 2px 4px 4px;
}

.quick-tree-preview-entry {
    display: grid;
    gap: 12px;
}

.quick-tree-preview-node {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid #d7e4ee;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 10px 24px rgba(16, 42, 67, 0.05);
}

.quick-tree-preview-node.is-root {
    border-color: #bfd6eb;
    background: linear-gradient(180deg, #fbfdff 0%, #eef6fd 100%);
    box-shadow: 0 16px 34px rgba(16, 42, 67, 0.06);
}

.quick-tree-preview-node-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-tree-preview-node-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-tree-preview-node-copy strong {
    color: #173554;
    font-size: 16px;
    line-height: 1.35;
}

.quick-tree-preview-node-copy span {
    color: #62758a;
    font-size: 12.5px;
    line-height: 1.5;
}

.quick-tree-preview-node-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-tree-preview-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid #d8e4ef;
    background: #f7fbff;
    color: #35506b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.quick-tree-preview-node-note {
    padding-top: 10px;
    border-top: 1px dashed #dbe7f0;
    color: #526779;
    font-size: 12.5px;
    line-height: 1.5;
}

.quick-tree-preview-branch {
    display: grid;
    gap: 12px;
    margin-left: 22px;
    padding-left: 20px;
    border-left: 2px dashed #dbe7f0;
}

.quick-tree-preview-materials {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    background: rgba(246, 250, 253, 0.92);
}

.quick-tree-preview-materials > strong {
    color: #173554;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quick-tree-preview-material-list {
    display: grid;
    gap: 8px;
}

.quick-tree-preview-material {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    background: #ffffff;
}

.quick-tree-preview-material strong {
    color: #173554;
    font-size: 13px;
    line-height: 1.4;
}

.quick-tree-preview-material span {
    color: #62758a;
    font-size: 12px;
    line-height: 1.45;
}

.quick-tree-preview-empty {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px dashed #cad8e5;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
}

.quick-tree-preview-empty strong {
    color: #173554;
    font-size: 14px;
}

.quick-tree-preview-empty span {
    color: #62758a;
    font-size: 12.5px;
    line-height: 1.5;
}

.quick-module-tree-card {
    gap: 12px;
}

.quick-module-step-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7e4ee;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.quick-module-step-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #dbe7f0;
}

.quick-module-step-card-head > div {
    display: grid;
    gap: 4px;
}

.quick-module-step-card-head strong {
    color: #173554;
    font-size: 15px;
}

.quick-module-step-card-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.quick-module-tree {
    gap: 10px;
}

.quick-module-row {
    gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.quick-module-row.has-invalid {
    box-shadow: inset 0 0 0 1px rgba(212, 80, 67, 0.28);
    background: linear-gradient(180deg, #fffdfd 0%, #fff7f5 100%);
}

.quick-module-row-shell {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.quick-module-tree-glyph {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    color: #87a0b8;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
}

.quick-module-row-summary {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.quick-module-row-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-module-row-summary-title {
    min-width: 0;
}

.quick-module-row-summary-title strong {
    font-size: 16px;
    color: #173554;
}

.quick-module-row-summary-title span {
    color: #62758a;
    font-size: 12.5px;
    line-height: 1.45;
}

.quick-module-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-module-meta-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid #d8e4ef;
    background: #f7fbff;
    color: #35506b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.quick-module-row-note {
    color: #526779;
    font-size: 12.5px;
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px dashed #dbe6ef;
}

.quick-module-row-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.quick-module-row-summary-actions .secondary-button,
.quick-module-editor-actions .secondary-button {
    min-height: 36px;
}

.quick-module-row-summary-actions .primary-button,
.quick-module-editor-actions .primary-button {
    min-height: 36px;
}

.quick-module-row-editor[hidden] {
    display: none !important;
}

.quick-row-editor-backdrop {
    z-index: 940;
}

.quick-module-row.is-editing {
    z-index: 945;
}

.quick-module-row.is-editing .quick-module-row-editor {
    position: fixed;
    inset: 34px 42px;
    z-index: 950;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border: 1px solid #d8e5f0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 28px 60px rgba(15, 35, 56, 0.24);
    overflow: auto;
}

.quick-module-row.is-editing .quick-recipe-row-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px -18px 0;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    border-bottom: 1px solid #e1ebf3;
}

.quick-module-row.is-editing .quick-module-box-rows {
    display: grid;
    gap: 12px;
}

.quick-module-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.quick-module-row.is-editing .quick-module-row-summary,
.quick-module-row.is-editing .quick-module-row-summary-actions,
.quick-module-row.is-editing .quick-module-tree-glyph {
    opacity: 0;
    pointer-events: none;
}

.quick-module-row.is-editing .quick-module-row-shell {
    min-height: 0;
}

.quick-module-actions,
.quick-module-submit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-module-actions .form-help {
    flex: 1;
}

.quick-module-submit-bar {
    position: fixed;
    left: calc(var(--sidebar-width) + 18px);
    right: 18px;
    bottom: 16px;
    z-index: 24;
    margin-top: 0;
}

.quick-module-submit {
    width: 100%;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #d5e3ee;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px rgba(14, 22, 31, 0.12);
}

.quick-module-submit-copy {
    flex: 1;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.quick-module-submit .primary-button {
    width: auto;
    min-width: 240px;
    justify-content: center;
}

.quick-module-result-panel,
.quick-module-history-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #d7e4ee;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 12px 28px rgba(16, 42, 67, 0.05);
}

.quick-module-result-head,
.quick-module-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quick-module-result-head > div,
.quick-module-history-head > div {
    display: grid;
    gap: 4px;
}

.quick-module-result-head h3,
.quick-module-history-head h3 {
    margin: 0;
}

.quick-module-result-head span,
.quick-module-history-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.quick-module-result-actions,
.quick-module-history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.quick-module-result-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.quick-module-result-stats article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.quick-module-result-stats span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
}

.quick-module-result-stats strong {
    color: #173554;
    font-size: 22px;
}

.quick-module-result-root {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    background: #fff;
}

.quick-module-result-root > div {
    display: grid;
    gap: 4px;
}

.quick-module-result-root strong {
    color: #173554;
    font-size: 15px;
}

.quick-module-result-root span,
.quick-module-result-root em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.quick-module-result-list,
.quick-module-history-list {
    display: grid;
    gap: 10px;
}

.quick-module-result-item,
.quick-module-history-item {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.quick-module-result-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}

.quick-module-result-item-tree {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
}

.quick-module-result-glyph {
    color: #86a0b9;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 16px;
    font-weight: 700;
}

.quick-module-result-item-copy,
.quick-module-history-item > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quick-module-result-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quick-module-result-item-head strong,
.quick-module-history-item strong {
    color: #173554;
    font-size: 14px;
}

.quick-module-result-item-copy > span,
.quick-module-history-item span {
    color: #3b5167;
    font-size: 13px;
}

.quick-module-result-item-copy em,
.quick-module-history-item em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.quick-module-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.quick-module-intro.is-library-view {
    gap: 10px;
}

.quick-module-callout.is-library-view {
    gap: 8px;
    padding: 14px 18px;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(16, 42, 67, 0.05);
}

.quick-module-callout.is-library-view h2 {
    font-size: 16px;
    line-height: 1.35;
}

.quick-module-callout.is-library-view span {
    font-size: 13px;
    line-height: 1.5;
}

.quick-module-library-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.quick-module-library-sidebar {
    position: sticky;
    top: 18px;
}

.quick-module-library-filter-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid #dce7f1;
    border-radius: 22px;
    background: linear-gradient(180deg, #f9fbfe 0%, #f3f8fc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.quick-module-library-filter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.quick-module-library-filter-head h3 {
    margin: 4px 0 0;
    color: #173554;
    font-size: 16px;
    line-height: 1.25;
}

.quick-module-library-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.quick-module-library-overview article {
    display: grid;
    gap: 2px;
    padding: 12px 10px;
    border: 1px solid #e2eaf3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.quick-module-library-overview strong {
    color: #173554;
    font-size: 18px;
    font-weight: 900;
}

.quick-module-library-overview span {
    color: #6b7f92;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.quick-module-library-filter-form {
    display: grid;
    gap: 12px;
}

.quick-module-library-filter-form label {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e1e9f2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.quick-module-library-filter-form label > span {
    color: #4f657a;
    font-size: 12px;
    font-weight: 800;
}

.quick-module-library-filter-actions {
    display: flex;
    gap: 8px;
}

.quick-module-library-filter-actions .primary-button,
.quick-module-library-filter-actions .secondary-button {
    flex: 1 1 0;
    justify-content: center;
}

.quick-module-library-table-card {
    min-width: 0;
}

.quick-module-library-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.quick-module-library-toolbar-copy {
    display: grid;
    gap: 4px;
}

.quick-module-library-toolbar-copy strong {
    color: #173554;
    font-size: 15px;
    font-weight: 850;
}

.quick-module-library-toolbar-copy span,
.quick-module-library-filter-modal-copy {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.quick-module-library-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-module-library-filter-trigger {
    min-height: 40px;
}

.quick-module-library-panel .data-table-wrap {
    scrollbar-gutter: stable both-edges;
}

.quick-module-library-filter-modal {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
}

.quick-module-library-filter-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 32px);
}

.quick-module-library-filter-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

.quick-module-library-filter-modal-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
}

.quick-module-library-filter-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-module-library-filter-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), #fff);
}

.quick-module-library-table {
    width: max-content;
    min-width: max(100%, 1180px);
    table-layout: fixed;
}

.quick-module-library-table col.quick-module-col-visual {
    width: 56px;
}

.quick-module-library-table col.quick-module-col-code {
    width: 158px;
}

.quick-module-library-table col.quick-module-col-name {
    width: 420px;
}

.quick-module-library-table col.quick-module-col-status {
    width: 92px;
}

.quick-module-library-table col.quick-module-col-rows,
.quick-module-library-table col.quick-module-col-created,
.quick-module-library-table col.quick-module-col-reused {
    width: 88px;
}

.quick-module-library-table col.quick-module-col-date {
    width: 144px;
}

.quick-module-library-table col.quick-module-col-actions {
    width: 76px;
}

.quick-module-library-table th,
.quick-module-library-table td {
    padding: 10px 8px;
    overflow: hidden;
}

.quick-module-library-table tbody td {
    vertical-align: top;
}

.quick-module-library-table tbody td:last-child {
    vertical-align: middle;
}

.quick-module-library-row {
    transition: none;
}

.quick-module-library-row:hover {
    background: transparent;
}

.quick-module-library-code-cell,
.quick-module-library-name-cell {
    min-width: 0;
}

.quick-module-library-visual-cell {
    vertical-align: top;
}

.quick-module-library-visual-cell .table-thumb {
    margin-top: 1px;
}

.quick-module-library-code-cell {
    display: table-cell;
}

.quick-module-library-run-id {
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    letter-spacing: 0;
}

.quick-module-library-code-cell,
.quick-module-library-name-cell {
    vertical-align: top;
}

.quick-module-library-name-cell .item-name-link {
    margin-bottom: 0;
}

.quick-module-library-status-cell,
.quick-module-library-count-cell {
    text-align: left;
}

.quick-module-library-date-cell {
    font-variant-numeric: tabular-nums;
}

.quick-module-library-actions-cell {
    overflow: hidden;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
}

.quick-module-library-actions {
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}

.truncate-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .quick-module-library-shell {
        grid-template-columns: 1fr;
    }

    .quick-module-library-sidebar {
        position: static;
    }

    .quick-module-library-filter-card {
        max-height: none;
    }
}

@media (max-width: 720px) {
    .quick-module-library-overview {
        grid-template-columns: 1fr;
    }

    .quick-module-library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-module-library-toolbar-actions {
        justify-content: stretch;
    }

    .quick-module-library-toolbar-actions .table-action,
    .quick-module-library-toolbar-actions .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .quick-module-library-filter-modal {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
    }

    .quick-module-library-filter-modal-grid {
        grid-template-columns: 1fr;
    }

    .quick-module-library-filter-actions {
        flex-direction: column;
    }
}

.quick-module-history-empty {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px dashed #d4e1ec;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
}

.quick-module-history-empty strong {
    color: #173554;
    font-size: 14px;
}

.quick-module-history-empty span {
    color: var(--muted);
    font-size: 12px;
}

.quick-build-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.quick-build-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid #d3dfeb;
    background: #f7fbff;
    color: #28527a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.quick-build-badge.is-root {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(37, 99, 235, 0.09);
    color: #1d4f91;
}

.quick-build-badge.is-child {
    border-color: rgba(249, 115, 22, 0.22);
    background: rgba(249, 115, 22, 0.1);
    color: #a04a12;
}

.quick-build-badge.is-run {
    border-color: #d9e3ec;
    background: #fff;
    color: #5a6e82;
}

@media (max-width: 1180px) {
    .quick-module-intro {
        grid-template-columns: 1fr;
    }

    .quick-module-library-table {
        min-width: 1180px;
    }

    .quick-module-library-actions {
        flex-wrap: nowrap;
    }

    .quick-module-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .quick-bulk-row {
        grid-template-columns: minmax(0, 1fr) minmax(160px, 0.6fr);
    }

    .quick-bulk-row.is-bulk-replacing {
        grid-template-columns: minmax(0, 1fr);
    }

    .quick-bulk-row.is-bulk-replacing .quick-bulk-target-field {
        grid-column: 1 / -1;
    }

    .quick-module-row.is-editing .quick-module-row-editor {
        inset: 22px 24px;
    }

    .quick-dimension-bulk-row {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(110px, 0.7fr));
    }

    .quick-module-grid,
    .quick-recipe-row-grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .quick-module-tools {
        grid-template-columns: 1fr;
    }

    .quick-module-submit {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-module-submit .primary-button {
        width: 100%;
        min-width: 0;
    }

    .quick-module-submit-bar {
        left: calc(var(--sidebar-width) + 14px);
        right: 14px;
        bottom: 14px;
    }

    .quick-tree-preview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-module-result-stats,
    .quick-module-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-module-library-table {
        min-width: 1180px;
    }
}

@media (max-width: 760px) {
    .quick-module-box-rows {
        gap: 10px;
    }

    .quick-module-field-grid,
    .quick-module-grid,
    .quick-recipe-row-grid,
    .quick-material-row,
    .quick-bulk-row {
        grid-template-columns: 1fr;
    }

    .quick-dimension-bulk-row {
        grid-template-columns: 1fr;
    }

    .quick-module-box-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .quick-module-row-shell {
        grid-template-columns: 1fr;
    }

    .quick-module-tree-glyph {
        display: none;
    }

    .quick-module-row-summary-actions {
        justify-content: flex-start;
    }

    .quick-module-row.is-editing .quick-module-row-editor {
        inset: 12px;
        padding: 14px;
    }

    .quick-module-box-grid > * {
        width: 100%;
    }

    .quick-module-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-route-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-module-card-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .quick-tree-preview-summary-head,
    .quick-tree-preview-node-head {
        flex-direction: column;
    }

    .quick-tree-preview-stats {
        grid-template-columns: 1fr;
    }

    .quick-tree-preview-branch {
        margin-left: 12px;
        padding-left: 14px;
    }

    .quick-module-result-item,
    .quick-module-result-root,
    .quick-module-result-head,
    .quick-module-history-head,
    .quick-module-history-item {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .quick-module-result-stats,
    .quick-module-history-grid {
        grid-template-columns: 1fr;
    }

    .quick-module-submit-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .quick-bulk-target-field .bom-component-dropdown {
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
    }
}

.product-material-side-panel .material-capability-empty {
    padding: 16px;
    border: 1px dashed #d2dfeb;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
}

.bom-group-list {
    display: grid;
    gap: 16px;
}

.bom-family-group {
    display: grid;
    gap: 12px;
}

.bom-family-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px;
}

.bom-family-group-copy {
    display: grid;
    gap: 4px;
}

.bom-family-group-copy strong {
    font-size: 15px;
    line-height: 1.4;
}

.bom-family-group-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.bom-family-group-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.product-create-form-modal .toggle-field {
    min-height: 84px;
    align-content: start;
}

.product-create-form-modal .co-consumption-row {
    align-items: start;
}

.product-create-form-modal .form-zone-title {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d7e4ee;
}

.product-create-form-modal .form-zone-title span {
    max-width: none;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="raw-capabilities"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="raw-links"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="generic-measure"] {
    display: none !important;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] > label {
    grid-column: span 6;
}

.product-create-part-layout {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.product-create-part-main,
.product-create-part-side {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
    grid-auto-rows: min-content;
}

.product-create-part-main {
    grid-column: 1;
}

.product-create-part-side {
    grid-column: 2;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] {
    grid-column: auto;
    grid-row: auto;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] {
    grid-column: auto;
    grid-row: auto;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] > label.span-12 {
    grid-column: 1 / -1;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] > label.span-4 {
    grid-column: span 4;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] > label.span-4 input {
    max-width: 200px;
}

.create-edge-planner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
}

.create-edge-planner-map {
    display: grid;
    place-items: center;
}

.create-pvc-map {
    width: 148px;
    height: 110px;
}

.create-pvc-map > span {
    color: rgba(18, 31, 43, 0.5);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    background: rgba(48, 63, 78, 0.08);
}

.create-pvc-map > span.is-on {
    color: #fff;
    background: #1976a2;
}

.create-edge-planner-copy {
    display: grid;
    gap: 6px;
}

.create-edge-planner-copy strong {
    font-size: 15px;
}

.create-edge-planner-copy span {
    color: var(--muted);
    line-height: 1.6;
}

.is-readonly-field input[readonly] {
    background: #f4f8fc;
    color: #4f6275;
    font-weight: 800;
    cursor: default;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] {
    padding: 18px 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    width: 100%;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] {
    gap: 14px;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] > label.span-12:first-of-type {
    grid-column: 1 / -1;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] > label.span-4 {
    grid-column: span 4;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] > label.span-12,
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] > .product-create-surface-mode-card.span-12 {
    grid-column: 1 / -1;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] > label.span-6 {
    grid-column: span 6;
}

.product-create-modal.is-type-part .product-create-part-main .form-zone,
.product-create-modal.is-type-part .product-create-part-side .form-zone {
    grid-column: 1 / -1;
    justify-self: stretch;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] .is-readonly-field {
    min-height: 118px;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"] .form-zone-title,
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] .form-zone-title,
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] .form-zone-title,
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] .form-zone-title {
    margin-bottom: 2px;
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] .form-zone-title,
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"] .form-zone-title {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
}

.product-create-surface-mode-card {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
}

.product-create-surface-mode-card > strong {
    font-size: 15px;
    line-height: 1.35;
}

.product-create-surface-mode-card > span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.product-create-surface-card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.product-create-surface-card-head > div {
    display: grid;
    gap: 4px;
}

.product-create-surface-card-head .badge {
    white-space: nowrap;
}

.product-create-surface-mode-card[data-create-part-surface-only="material"] > strong,
.product-create-surface-mode-card[data-create-part-surface-only="material"] > span,
.product-create-surface-mode-card[data-create-part-surface-only="material"] > .product-create-surface-mode-grid:not([data-create-part-texture-preview-block]) {
    display: none;
}

.product-create-surface-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-create-material-texture-preview {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
}

.product-create-material-texture-preview .material-texture-copy {
    align-content: center;
}

.product-create-surface-mode-card .material-texture-swatch {
    min-height: 148px;
}

.product-create-surface-mode-card .material-texture-swatch.is-empty {
    border-style: dashed;
    background-color: #e8eef4;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(200, 214, 227, 0.45));
}

.product-create-texture-state-note {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: #fbfdff;
}

.product-create-texture-state-note strong {
    font-size: 13px;
    line-height: 1.35;
}

.product-create-texture-state-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.product-create-texture-state-note.is-invalid {
    border-color: #d45043;
    background: #fff7f5;
    box-shadow: 0 0 0 3px rgba(212, 80, 67, 0.12);
}

.product-create-texture-state-note.is-invalid strong {
    color: #8b3028;
}

.product-create-texture-state-note.is-invalid span {
    color: #9a4a42;
}

@media (max-width: 980px) {
    .product-create-modal-header-actions {
        gap: 8px;
    }

    .product-create-header-button {
        padding: 0 12px;
    }

    .product-create-legacy-grid {
        grid-template-columns: 1fr;
    }

    .product-create-legacy-grid > label,
    .product-create-legacy-grid > .toggle-field {
        grid-column: 1 / -1;
    }
}

.product-create-carton-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 720 / 564;
    border: 1px solid #e1e8ef;
    border-radius: 16px;
    background:
        linear-gradient(#edf3f8 1px, transparent 1px),
        linear-gradient(90deg, #edf3f8 1px, transparent 1px),
        linear-gradient(180deg, #fffdfa 0%, #f6faff 100%);
    background-size: 24px 24px, 24px 24px, auto;
    fill: initial;
    stroke: initial;
    overflow: visible;
}

.product-report-side-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.product-report-side-zone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border-top: 0;
    padding-top: 0;
}

.product-report-side-zone label {
    min-width: 0;
}

.product-report-side-zone select,
.product-report-side-zone input {
    width: 100%;
}

.product-create-carton-svg text {
    font-family: inherit;
    stroke: none;
}

.product-create-surface-mode-card[data-create-part-surface-only="lacquer"] .product-create-surface-mode-grid > label.span-3 .form-help + .form-help {
    display: none;
}

.product-create-surface-mode-grid > .span-3 {
    grid-column: 1 / -1;
}

.product-create-surface-mode-grid .is-readonly-field input[readonly] {
    background: #eef4fb;
}

.product-create-upload-card {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed #c4d7ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfdff 0%, #f4f8fc 100%);
}

.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"],
.product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] {
    box-shadow: 0 10px 24px rgba(18, 31, 43, 0.035);
}

.product-create-upload-head {
    display: grid;
    gap: 4px;
}

.product-create-upload-head strong {
    font-size: 14px;
    line-height: 1.35;
}

.product-create-upload-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.product-create-file-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.product-create-file-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.product-create-file-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: #edf4fb;
    color: #1f5f9f;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.product-create-file-button svg {
    width: 16px;
    height: 16px;
}

.product-create-file-name {
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"],
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-reporting"],
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-reporting"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"],
.product-create-modal.is-type-service .product-create-form-modal .form-zone[data-create-section="raw-reporting"] {
    padding: 18px 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(18, 31, 43, 0.035);
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"],
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-reporting"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-reporting"],
.product-create-modal.is-type-service .product-create-form-modal .form-zone[data-create-section="raw-reporting"] {
    gap: 12px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] {
    grid-template-columns: minmax(112px, 0.66fr) minmax(112px, 0.66fr) minmax(268px, 1.62fr) minmax(138px, 0.74fr);
    align-items: end;
}

.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] {
    grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 0.9fr);
    align-items: end;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > label,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > .toggle-field,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > label,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > .toggle-field {
    grid-column: auto;
}

.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-kind-field,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field {
    display: none !important;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-kind-field {
    order: 1;
    grid-column: 3;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field {
    order: 2;
    grid-column: 4;
    align-self: end;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field:first-of-type {
    order: 3;
    grid-column: 1;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field:last-of-type {
    order: 4;
    grid-column: 2;
}

.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field:first-of-type {
    order: 1;
    grid-column: 1;
}

.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field:last-of-type {
    order: 2;
    grid-column: 2;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field {
    order: 5;
    grid-column: 4;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field > span.inline-help-heading,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field > span.inline-help-heading {
    justify-content: flex-start;
    width: fit-content;
    gap: 4px;
    white-space: nowrap;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field .inline-help-label,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field .inline-help-label {
    font-size: 11px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field .inline-help-button,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field .inline-help-button {
    width: 18px;
    height: 18px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-rate-field .inline-help-button svg,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field .inline-help-button svg {
    width: 11px;
    height: 11px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field {
    min-height: 38px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-self: end;
    gap: 8px;
    padding: 0 10px;
    background: #ffffff;
    border-radius: var(--radius);
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-copy,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-copy {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    color: #173554;
    font-size: 12px;
    font-weight: 700;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field > span,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-copy em,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field > .form-help,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-copy em,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field > .form-help {
    display: none !important;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-heading,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-heading {
    justify-content: space-between;
    width: 100%;
    gap: 6px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-label,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-label {
    color: #173554;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-button,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-button {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-button svg,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-toggle-field .inline-help-button svg {
    width: 11px;
    height: 11px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"],
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] {
    gap: 14px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .form-zone-title,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-reporting"] .form-zone-title,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] .form-zone-title,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .form-zone-title,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-reporting"] .form-zone-title,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] .form-zone-title,
.product-create-modal.is-type-service .product-create-form-modal .form-zone[data-create-section="raw-reporting"] .form-zone-title {
    margin-bottom: 2px;
}

.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] .material-texture-preview,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] .material-detail-grid,
.product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] .texture-priority-list,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] .material-texture-preview,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] .material-detail-grid,
.product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] .texture-priority-list {
    grid-column: 1 / -1;
}

.product-create-raw-texture-preview .material-texture-swatch {
    min-height: 148px;
}

.product-create-raw-texture-preview .material-texture-swatch.is-empty {
    border-style: dashed;
    background-color: #e8eef4;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(200, 214, 227, 0.45));
}

.product-create-texture-source-list {
    gap: 8px;
}

.product-create-texture-source-option {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfcfd;
    padding: 10px;
    cursor: pointer;
}

.product-create-texture-source-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.product-create-texture-source-option strong {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e8eef4;
    color: #415364;
    font-size: 12px;
}

.product-create-texture-source-option span {
    font-weight: 900;
}

.product-create-texture-source-option em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.product-create-texture-source-option.is-active {
    border-color: #91c9a4;
    background: #f1fbf4;
}

.product-create-texture-source-option.is-active strong {
    background: #16835b;
    color: #fff;
}

@media (max-width: 1360px) {
    .product-create-part-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-create-part-main,
    .product-create-part-side {
        grid-column: 1;
    }
}

.bom-line-list {
    display: grid;
    gap: 12px;
}

.bom-line-card {
    border: 1px solid #d7e4ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #fdfefe 0%, #f6fafc 100%);
    overflow: hidden;
}

.bom-line-accordion {
    display: grid;
    gap: 0;
}

.bom-line-accordion[open] .bom-line-summary {
    border-bottom: 1px solid #dce7ef;
}

.bom-line-summary {
    display: grid;
    grid-template-columns: minmax(340px, 1.35fr) minmax(300px, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.bom-line-summary::-webkit-details-marker {
    display: none;
}

.bom-line-summary-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.bom-line-summary-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid #cfdcea;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #2c67b5;
}

.bom-line-summary-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.bom-line-accordion[open] .bom-line-summary-toggle svg {
    transform: rotate(180deg);
}

.bom-line-summary-right,
.bom-line-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bom-line-summary-right {
    display: grid;
    grid-template-columns: minmax(220px, 248px) minmax(168px, max-content) auto;
    justify-content: end;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.bom-line-summary-qty {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}

.bom-line-summary-qty strong {
    font-size: 15px;
    line-height: 1.2;
}

.bom-line-summary-qty:not(.is-editable) {
    max-width: 148px;
    justify-self: end;
}

.bom-line-summary-qty.is-editable {
    max-width: 248px;
    justify-self: end;
}

.bom-line-summary-qty-row {
    display: grid;
    grid-template-columns: max-content minmax(112px, 1fr);
    gap: 14px;
    align-items: center;
}

.bom-line-summary-qty-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.bom-line-summary-qty-editor input {
    width: 100%;
    min-width: 0;
    height: 38px;
}

.bom-line-summary-qty strong {
    white-space: nowrap;
}

.bom-line-summary-qty-editor em {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}

.bom-line-summary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.bom-summary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d5e1ec;
    border-radius: 12px;
    background: #fff;
    color: #536273;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.bom-summary-action:hover {
    border-color: #9fc0e8;
    color: #2c67b5;
    background: #f5f9ff;
}

.bom-summary-action.is-danger {
    color: #d14e42;
    border-color: #f2c7c2;
}

.bom-summary-action.is-danger:hover {
    background: #fff5f3;
    border-color: #e79b92;
}

.bom-line-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bom-line-copy strong {
    display: block;
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bom-line-link {
    color: var(--text);
    text-decoration: none;
}

.bom-line-link:hover {
    color: var(--primary);
}

.bom-line-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

.bom-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e9f1ff;
    color: #2b67b5;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.bom-chip.is-warn {
    background: #fff2dd;
    color: #9b5f09;
}

.bom-chip.is-info {
    background: #e8f3ff;
    color: #2c67b5;
}

.bom-chip.is-neutral {
    background: #edf1f5;
    color: #536273;
}

.bom-line-card-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.bom-line-card.is-auto {
    border-color: #d5e4f3;
    background: linear-gradient(180deg, #fdfefe 0%, #f3f8fc 100%);
}

.bom-line-card.is-manual {
    border-color: #d9e2ea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.bom-line-card.is-archived {
    opacity: 0.76;
    border-style: dashed;
}

.bom-line-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bom-line-metrics.has-placement {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bom-line-metrics div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.bom-line-metrics strong,
.bom-line-toolbar-copy strong {
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.bom-line-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
}

.bom-line-toolbar-copy {
    display: grid;
    gap: 4px;
    min-height: 44px;
}

.bom-inline-help-heading {
    justify-content: flex-start;
    gap: 8px;
}

.bom-line-toolbar-copy.is-inline-help {
    min-height: 0;
}

.bom-line-toolbar-copy.is-inline-help .inline-help-heading {
    justify-content: flex-start;
}

.bom-line-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    align-items: start;
    width: 100%;
}

.bom-line-edit-form.has-placement {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bom-line-edit-form .is-wide {
    grid-column: 1 / -1;
}

.bom-line-edit-form .is-note {
    grid-column: 3 / -1;
}

.bom-line-edit-form.has-placement .is-note {
    grid-column: 3 / 5;
}

.bom-edit-field {
    min-width: 0;
}

.bom-edit-field input,
.bom-edit-field select {
    width: 100%;
}

.bom-line-edit-form > .secondary-button {
    justify-self: start;
    align-self: end;
    min-width: 148px;
    grid-column: 1 / span 1;
}

.bom-placement-box {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 14px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: #f7fbff;
}

.bom-placement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.bom-placement-toggle {
    flex: 1 1 auto;
    width: 100%;
}

.bom-placement-toggle strong {
    font-size: 14px;
}

.bom-placement-fields {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(0, 0.82fr));
    gap: 10px;
    align-items: end;
}

.bom-placement-fields label {
    min-width: 0;
}

.bom-placement-fields input,
.bom-placement-fields select {
    width: 100%;
}

.bom-placement-fields[hidden] {
    display: none;
}

.bom-line-remove-form {
    flex: 0 0 auto;
}

.material-add-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.material-add-form .is-wide {
    grid-column: 1 / -1;
}

.material-add-form .material-add-note-field {
    grid-column: auto;
}

.material-add-role-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #cfe1f1;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbff 0%, #ecf5ff 100%);
}

.material-add-role-preview span {
    color: #5b7390;
    font-size: 11px;
    font-weight: 700;
}

.material-add-role-preview strong {
    color: #1b5ea0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.bom-component-picker {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.bom-component-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    color: var(--ink);
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.bom-component-trigger:hover,
.bom-component-trigger.is-open {
    border-color: #b8d7ed;
    box-shadow: 0 10px 18px rgba(32, 96, 150, 0.08);
    background: #eef7ff;
}

.bom-component-trigger-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bom-component-trigger-copy strong {
    font-size: 15px;
    line-height: 1.35;
}

.bom-component-trigger-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bom-component-trigger-note {
    flex: 0 0 auto;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.bom-component-dropdown {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: #f8fbfe;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 18px 34px rgba(16, 56, 92, 0.14);
}

.bom-component-dropdown[hidden] {
    display: none;
}

.bom-component-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(170px, 0.8fr);
    gap: 10px;
}

.bom-component-search,
.bom-component-filter {
    min-width: 0;
}

.bom-component-search input,
.bom-component-filter select {
    width: 100%;
}

.bom-component-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bom-component-status strong {
    font-size: 13px;
}

.bom-component-status span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.bom-component-options {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.bom-component-option {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d7e4ee;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.bom-component-option:hover,
.bom-component-option.is-active {
    border-color: #b8d7ed;
    background: #eef7ff;
    box-shadow: 0 8px 16px rgba(32, 96, 150, 0.08);
}

.bom-component-option-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bom-component-option-copy strong {
    font-size: 14px;
    line-height: 1.35;
}

.bom-component-option-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.bom-component-option-badge {
    flex: 0 0 auto;
    border: 1px solid #d7e6f2;
    border-radius: 999px;
    background: #f4f9fd;
    color: var(--blue);
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
}

.material-bag-row .bom-component-trigger {
    padding: 12px 14px;
    border-radius: 14px;
}

.material-bag-row .bom-component-trigger-copy strong {
    font-size: 14px;
}

.material-bag-row .bom-component-options {
    max-height: 220px;
}

.material-bag-row .bom-component-option {
    padding: 10px 12px;
    border-radius: 12px;
}

.material-bag-row .bom-component-option-copy strong {
    font-size: 13px;
}

.bom-component-empty {
    margin-top: 0;
}

.route-workspace {
    position: relative;
}

.route-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid #d7e5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbfe 0%, #eef5fa 100%);
}

.route-stage-copy {
    display: grid;
    gap: 6px;
}

.route-stage-copy h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
}

.route-stage-copy span,
.route-modal-subtitle,
.route-preview-head span,
.route-metric-box small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.route-stage-note {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 120px;
    padding: 12px 16px;
    border: 1px solid #d6e3ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.route-stage-note strong {
    font-size: 28px;
    line-height: 1;
}

.route-stage-note span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.route-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.route-summary-strip article {
    display: grid;
    gap: 6px;
    min-height: 92px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    padding: 14px;
}

.route-summary-strip span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.route-summary-strip strong {
    font-size: 18px;
    line-height: 1.3;
}

.route-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.route-preview-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d7e4ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.04);
}

.route-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.route-preview-head strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.route-preview-metrics,
.route-step-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.route-metric-box {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid #d7e4ef;
    background: #f4f8fb;
}

.route-metric-box span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.route-metric-box strong {
    font-size: 18px;
    line-height: 1.1;
}

.route-metric-box.is-process-auto,
.route-metric-box.is-setup-auto {
    border-color: #cfe2f4;
    background: #ebf5ff;
    color: #235f95;
}

.route-metric-box.is-process-manual,
.route-metric-box.is-setup-manual {
    border-color: #f0ddb7;
    background: #fff7e9;
    color: #915f18;
}

.route-metric-box.is-abstract {
    border-color: #e2d4f5;
    background: #f6efff;
    color: #6a43a4;
}

.route-empty-state {
    margin-top: 16px;
}

.route-empty-state.is-modal {
    margin-top: 0;
}

.route-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
}

.route-mode-pill.is-auto,
.route-mode-pill.is-setup-auto {
    background: #e9f4ff;
    color: #1d5f9d;
}

.route-mode-pill.is-manual,
.route-mode-pill.is-setup-manual {
    background: #fff2de;
    color: #936326;
}

.route-mode-pill.is-split {
    background: #f2ebff;
    color: #6e45a8;
}

.route-mode-pill.is-standard {
    background: #eef4f7;
    color: #5c6a77;
}

.route-modal {
    left: 50%;
    top: 48px;
    width: min(1360px, calc(100vw - 32px));
    max-height: calc(100vh - 72px);
    overflow: auto;
    transform: translateX(-50%);
}

.route-modal .modal-header {
    margin-bottom: 18px;
}

.quick-route-modal {
    padding: 0;
    overflow: hidden;
}

.quick-route-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
}

.route-modal-layout {
    display: grid;
    gap: 18px;
}

.quick-route-modal .quick-module-modal-shell {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 72px);
}

.quick-route-modal .quick-module-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: visible;
    overflow-y: auto;
    padding: 18px 20px;
    display: grid;
    gap: 18px;
}

.quick-route-modal .quick-module-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #fff 42%);
}

.quick-route-modal .quick-module-modal-footer .secondary-button,
.quick-route-modal .quick-module-modal-footer .primary-button {
    min-height: 40px;
}

.route-modal-top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
    gap: 16px;
}

.route-call-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.route-call-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.route-call-card-head h3 {
    margin: 2px 0 0;
    font-size: 19px;
    line-height: 1.35;
}

.route-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 12px;
    background: #ebf4ff;
    color: #235f95;
    font-size: 12px;
    font-weight: 800;
}

.route-status-pill.is-neutral {
    background: #eff4f8;
    color: #5c6976;
}

.route-field-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d7e3ec;
    border-radius: 16px;
    background: #fbfcfd;
}

.route-field-box > span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
}

.route-field-box.is-mode {
    background: #eef5fb;
    border-color: #d6e3ef;
}

.route-field-box.is-process {
    background: #fff8ee;
    border-color: #f1deb8;
}

.route-field-box.is-abstract {
    background: #f7f0ff;
    border-color: #e2d3f6;
}

.route-field-box.is-setup {
    background: #fff6f1;
    border-color: #f2d8cb;
}

.route-field-box.is-summary {
    background: #f7fafc;
}

.route-field-box input,
.route-field-box select {
    width: 100%;
}

.route-flow-preview {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    border: 1px solid #d6e2eb;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.route-call-actions {
    display: flex;
    justify-content: flex-end;
}

.route-call-card-aside {
    align-content: start;
}

.route-aside-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.route-aside-stats article {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #d7e3ec;
    border-radius: 14px;
    background: #f7fafc;
}

.route-aside-stats span {
    color: var(--muted);
    font-size: 12px;
}

.route-aside-stats strong {
    font-size: 18px;
    line-height: 1.2;
}

.route-clear-form {
    display: grid;
    gap: 10px;
}

.route-clear-form p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.route-modal .ghost-button {
    border-color: #f0d0c1;
    background: #fff7f3;
    color: #b25b37;
}

.route-editor-form {
    display: grid;
    gap: 14px;
    margin-top: 0;
}

.route-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
}

.route-editor-header strong {
    display: block;
    font-size: 15px;
}

.route-editor-header span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.route-step-list {
    display: grid;
    gap: 14px;
}

.route-step-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e4ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff, #f5f9fc);
}

.route-step-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.route-step-card-head strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.route-step-card-head span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

.route-step-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.route-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d6e2f0;
    border-radius: 999px;
    background: #edf4fb;
    color: #2a5e96;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
}

.route-chip.is-muted {
    background: #fff6ea;
    border-color: #f1ddb3;
    color: #8a5a18;
}

.route-chip.is-warm {
    background: #fff2ea;
    border-color: #efdbd2;
    color: #9b5435;
}

.route-chip.is-purple {
    background: #f4eeff;
    border-color: #e0d3f4;
    color: #6a43a4;
}

.route-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.route-step-grid input[readonly] {
    background: #edf5ff;
    border-color: #cfe0f0;
    color: #2b5f95;
    font-weight: 800;
}

.route-step-grid input:not([readonly]) {
    background: #fff7ec;
    border-color: #efd6aa;
    color: #7e5720;
    font-weight: 800;
}

.route-step-grid .route-abstract-field input {
    background: #f6efff;
    border-color: #dacbf2;
    color: #6a43a4;
}

.route-inline-control {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
}

.route-inline-control select,
.route-inline-control input {
    width: 100%;
}

.route-abstract-field.is-hidden,
.route-step-alert.is-hidden {
    display: none;
}

.route-step-alert {
    border: 1px solid #f0d2c3;
    border-radius: 12px;
    background: #fff7f3;
    color: #b75d35;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
}

.product-3d-panel {
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: hidden;
}

.light-toolbar {
    color: var(--ink);
    background: transparent;
    border-bottom: 1px solid var(--line);
    margin: -15px -15px 0;
}

.light-toolbar span {
    color: var(--muted);
}

.product-viewer {
    height: clamp(320px, 46vh, 520px);
    min-height: 0;
    margin: 0 -15px;
}

.product-3d-panel .viewer-status {
    margin: 0 -15px -15px;
    background: #0f1720;
    color: rgba(234, 242, 247, 0.78);
}

.product-3d-panel .viewer-status .ghost-button {
    color: #eef6fb;
}

.ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    color: #eef6fb;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
}

.ghost-button:disabled {
    opacity: 0.8;
}

.operation-layout {
    align-items: start;
    min-width: 0;
}

.operation-nav-panel {
    max-height: calc(100vh - 36px);
}

.operation-layout > .workspace-panel,
.operation-layout > .definition-group-sidebar {
    min-width: 0;
}

.operation-ai-note {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    margin-top: 14px;
    border: 1px solid #cfe2f2;
    border-radius: var(--radius);
    background: #f4f9fd;
    padding: 12px;
}

.operation-ai-note svg {
    width: 20px;
    height: 20px;
    color: var(--blue);
}

.operation-ai-note strong,
.operation-ai-note span {
    display: block;
}

.operation-ai-note strong {
    font-size: 13px;
}

.operation-ai-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.operation-system-note a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.operation-system-note a:hover {
    text-decoration: underline;
}

.operation-flow-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fbfd;
    padding: 14px;
    margin-bottom: 14px;
}

.operation-flow-panel h3,
.operation-flow-panel p,
.operation-flow-panel span {
    margin: 0;
}

.operation-flow-panel h3 {
    margin-top: 3px;
    font-size: 18px;
}

.operation-flow-panel > div > span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}

.operation-flow,
.operation-flow-mini,
.operation-definition-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.operation-flow span,
.operation-flow-mini span,
.operation-definition-filter a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d7e4ee;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.operation-flow em,
.operation-flow-mini em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.operation-step-list {
    border-top: 1px solid var(--line);
    margin-top: 18px;
    padding-top: 18px;
}

.operation-table td > em,
.operation-step-table td > em {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    margin-top: 3px;
}

.operation-table {
    min-width: 1120px;
}

.route-group-table {
    min-width: 1040px;
}

.station-table {
    min-width: 1320px;
}

.machine-table {
    min-width: 1360px;
}

.definition-table {
    min-width: 1120px;
}

.station-table .formula-cell {
    min-width: 320px;
    white-space: normal;
}

.station-table .formula-cell em {
    white-space: nowrap;
}

.operation-formula {
    display: inline-block;
    max-width: min(420px, 100%);
    overflow: hidden;
    border: 1px solid #dae5ee;
    border-radius: 6px;
    background: #f8fbfd;
    color: var(--ink);
    padding: 4px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personnel-main {
    min-height: 100vh;
    height: auto;
    overflow: visible;
    gap: 12px;
    padding-bottom: 18px;
}

.personnel-metrics {
    gap: 10px;
}

.personnel-metrics div {
    padding: 10px 14px;
}

.personnel-metrics strong {
    margin-top: 5px;
    font-size: 18px;
}

.personnel-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    overflow: visible;
}

.personnel-layout > * {
    min-height: 0;
}

.personnel-nav-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    min-height: 0;
    max-height: calc(100vh - 28px);
    height: auto;
    padding-bottom: 10px;
    overflow: hidden;
}

.personnel-nav-panel .definition-group-list {
    align-content: start;
    grid-auto-rows: min-content;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
}

.personnel-nav-panel .definition-group-link {
    min-height: 44px;
    padding: 8px;
}

.personnel-nav-panel .definition-group-copy strong {
    font-size: 12px;
}

.personnel-nav-panel .definition-group-copy em {
    font-size: 11px;
}

.personnel-main .operation-ai-note {
    margin-top: auto;
    padding: 10px;
}

.personnel-main .operation-ai-note span {
    font-size: 11px;
}

.personnel-table-panel {
    display: grid;
    align-content: start;
    min-height: 0;
    gap: 10px;
    overflow: visible;
}

.personnel-table-panel .section-heading {
    margin-bottom: 0;
}

.personnel-bulk-form {
    display: grid;
    gap: 8px;
    min-height: 0;
}

.personnel-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(243, 248, 252, 0.92));
    box-shadow: none;
    margin-bottom: 0;
}

.personnel-bulk-toolbar-copy {
    gap: 3px;
}

.personnel-bulk-toolbar-copy strong {
    font-size: 14px;
}

.personnel-bulk-toolbar-copy span {
    display: none;
}

.personnel-bulk-toolbar-actions {
    gap: 8px;
}

.personnel-bulk-toolbar-actions .table-action {
    min-height: 34px;
}

.personnel-table-panel .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 14px;
    background: #fff;
    scrollbar-gutter: stable;
}

.personnel-table {
    width: max(100%, 1080px);
    min-width: 1080px;
    table-layout: fixed;
}

.personnel-table col.personnel-col-select {
    width: 42px;
}

.personnel-table col.inventory-col-visual {
    width: 72px;
}

.personnel-table col.inventory-col-code {
    width: 150px;
}

.personnel-table col.inventory-col-name {
    width: auto;
}

.personnel-table col.inventory-col-type {
    width: 160px;
}

.personnel-table col.inventory-col-status {
    width: 116px;
}

.personnel-table col.inventory-col-updated {
    width: 148px;
}

.personnel-table col.inventory-col-actions {
    width: 98px;
}

.personnel-table th,
.personnel-table td {
    padding: 9px 10px;
    white-space: normal;
    vertical-align: middle;
}

.personnel-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 42px;
    border-bottom-color: #d7e4ee;
    background: #f6f9fc;
    white-space: nowrap;
}

.personnel-table .inventory-actions-heading,
.personnel-table .inventory-actions-cell {
    width: 98px;
}

.personnel-table .inventory-actions-heading {
    padding-left: 12px;
    padding-right: 12px;
    background: #f6f9fc;
}

.payroll-list-modal .labor-assignment-table-wrap.payroll-lines-table-wrap--modal {
    scrollbar-gutter: stable;
}

.payroll-list-modal .personnel-table.labor-assignment-table {
    width: max(100%, 1240px);
    min-width: 1240px;
    table-layout: fixed;
}

.payroll-list-modal .labor-assignment-table col.personnel-col-select {
    width: 44px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-visual {
    width: 72px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-code {
    width: 158px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-name {
    width: 250px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-type {
    width: 190px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-status {
    width: 118px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-updated {
    width: 210px;
}

.payroll-list-modal .labor-assignment-table col.inventory-col-actions {
    width: 150px;
}

.payroll-list-modal .labor-assignment-table th:last-child,
.payroll-list-modal .labor-assignment-table .inventory-actions-cell {
    width: 150px;
    min-width: 150px;
    padding-left: 8px;
    padding-right: 16px;
    text-align: right;
    overflow: visible;
}

.payroll-list-modal .labor-assignment-table .row-actions {
    min-width: 112px;
    justify-content: flex-end;
    gap: 6px;
}

.personnel-table tbody td {
    height: 70px;
    border-bottom-color: #dce6ef;
    background: #fff;
}

.personnel-table tbody tr:hover td {
    background: #fbfdff;
}

.personnel-table td > strong,
.personnel-table td > .definition-color {
    display: block;
}

.personnel-table-panel .table-heading {
    align-items: center;
    margin-bottom: 4px;
}

.personnel-table .bulk-check-head,
.personnel-table .bulk-check-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bulk-check-head {
    white-space: nowrap;
    font-size: 11px;
    color: var(--muted);
}

.bulk-check-head input,
.bulk-check-row input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.bulk-check-head span,
.personnel-visual-select span,
.personnel-select-cell .bulk-check-row span {
    display: none !important;
}

.personnel-table td > strong {
    line-height: 1.3;
}

.personnel-table .inventory-code-primary,
.personnel-table .inventory-name-cell .item-name-link,
.personnel-table .personnel-skill-cell > strong {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.personnel-table .inventory-code-primary,
.personnel-table .inventory-code-secondary,
.personnel-table .inventory-name-cell .item-name-link,
.personnel-table .inventory-name-cell em,
.personnel-table .personnel-skill-cell em,
.personnel-table .personnel-status-meta,
.personnel-table .responsive-inline-summary em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personnel-table .inventory-name-cell em:nth-of-type(2) {
    display: none;
}

.personnel-table .responsive-inline-summary {
    max-width: 100%;
}

.personnel-table.is-responsive-collapsed .responsive-inline-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px 12px;
}

.personnel-table.is-responsive-collapsed .responsive-inline-summary span {
    min-width: 0;
}

.personnel-table.is-responsive-collapsed .responsive-inline-summary strong,
.personnel-table.is-responsive-collapsed .responsive-inline-summary em {
    min-width: 0;
}

.personnel-table td > em,
.personnel-main .definition-table td > em,
.personnel-main .inventory-table:not(.personnel-table) td > em {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: normal;
}

.personnel-definition-table {
    min-width: 0;
}

.personnel-main .operation-definition-filter {
    margin-bottom: 0;
}

.personnel-main .operation-definition-filter a {
    padding: 5px 8px;
    font-size: 11px;
}

.personnel-main .row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
}

.personnel-main .inventory-actions-heading,
.personnel-main .inventory-actions-cell {
    text-align: right;
}

.personnel-select-cell {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}

.personnel-visual-head {
    display: flex;
    align-items: center;
    gap: 0;
}

.personnel-visual-head > span {
    font-size: 11px;
}

.personnel-visual-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle !important;
    padding-left: 6px;
    padding-right: 6px;
}

.personnel-visual-trigger,
.personnel-name-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.personnel-visual-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.personnel-visual-cell .table-thumb {
    margin: 0 auto;
}

.personnel-avatar-thumb {
    position: relative;
    width: 42px;
    height: 42px;
    border-color: color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 28%, #d6e4ef);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 24%, white) 0%, transparent 48%),
        linear-gradient(160deg, color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 14%, white), color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 8%, #eff5fb));
    color: color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 74%, #0f2740);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.personnel-avatar-thumb::after {
    content: "";
    position: absolute;
    inset: auto 5px 5px auto;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--personnel-avatar-accent, #2f6ea8) 78%, white);
    box-shadow: 0 4px 10px rgba(23, 53, 84, 0.18);
}

.personnel-visual-select {
    font-size: 10px;
    color: var(--muted);
}

.personnel-name-trigger {
    display: block;
    width: 100%;
}

.personnel-name-trigger:hover,
.personnel-name-trigger:focus-visible,
.personnel-visual-trigger:hover .personnel-avatar-thumb,
.personnel-visual-trigger:focus-visible .personnel-avatar-thumb {
    color: var(--blue);
}

.personnel-name-trigger:focus-visible,
.personnel-visual-trigger:focus-visible {
    outline: 2px solid rgba(47, 110, 168, 0.35);
    outline-offset: 3px;
    border-radius: 10px;
}

.personnel-main .compact-action {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
}

.personnel-main .compact-action svg {
    margin: 0;
}

.reference-main {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    gap: 12px;
    padding: 14px 14px 18px;
}

.reference-metrics {
    gap: 10px;
}

.reference-metrics div {
    padding: 10px 14px;
}

.reference-metrics strong {
    margin-top: 5px;
    font-size: 18px;
}

.reference-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow: visible;
}

.reference-layout > * {
    min-height: 0;
}

.reference-nav-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    max-height: calc(100vh - 36px);
    padding-bottom: 10px;
}

.reference-nav-panel .definition-group-list {
    align-content: start;
    grid-auto-rows: min-content;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
}

.reference-nav-panel .definition-group-link {
    min-height: 48px;
    padding: 8px;
}

.reference-nav-panel .definition-group-copy strong {
    font-size: 12px;
}

.reference-nav-panel .definition-group-copy em {
    font-size: 11px;
}

.reference-nav-panel .definition-group-link.is-disabled {
    opacity: 0.7;
}

.reference-table-panel {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    height: auto;
    gap: 10px;
    overflow: visible;
}

.reference-table-panel .section-heading {
    margin-bottom: 0;
}

.reference-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.reference-overview-card {
    display: grid;
    gap: 7px;
    min-height: 132px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    padding: 14px;
}

.reference-overview-card:hover {
    border-color: #b8d5ea;
    box-shadow: 0 14px 34px rgba(20, 35, 50, 0.08);
}

.reference-overview-card strong,
.reference-overview-card em,
.reference-overview-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.reference-overview-card em {
    color: var(--ink);
    font-style: normal;
    font-weight: 800;
}

.reference-overview-card small {
    color: var(--muted);
    line-height: 1.4;
}

.reference-overview-state {
    justify-self: start;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 850;
}

.reference-overview-card.is-ready .reference-overview-state {
    background: #e0f5eb;
    color: #147348;
}

.reference-overview-card.is-missing .reference-overview-state {
    background: #fff2dd;
    color: #9a5a08;
}

.reference-flow-panel,
.reference-action-strip {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 14px;
}

.reference-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.reference-flow-steps a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fbfd;
    color: var(--ink);
    padding: 10px;
}

.reference-flow-steps span {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9f2fa;
    color: var(--blue);
    font-weight: 900;
}

.reference-flow-steps em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.reference-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reference-period-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 10px;
}

.reference-period-settings,
.reference-code-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px;
}

.reference-period-settings {
    border-left: 4px solid #2f9b67;
}

.reference-period-settings.is-readonly {
    border-left-color: #7b8794;
}

.reference-code-rule {
    border-left: 4px solid #2776b6;
}

.period-setting-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.period-setting-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: #eef6fb;
    color: var(--blue);
}

.period-setting-icon svg {
    width: 18px;
    height: 18px;
}

.period-setting-copy strong,
.reference-code-rule strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.period-setting-copy em,
.reference-code-rule em {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.period-setting-toggle {
    flex: 0 1 300px;
    margin: 0;
    background: #f8fbfd;
}

.reference-period-settings .secondary-button {
    flex: 0 0 auto;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fbfd;
    padding: 10px;
}

.checkbox-line input {
    width: 16px;
    height: 16px;
}

.reference-table-panel .data-table-wrap {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

.reference-main .data-table {
    width: 100%;
}

.reference-table {
    min-width: min(100%, 980px);
    table-layout: fixed;
}

.reference-table th,
.reference-table td {
    padding: 9px 10px;
    white-space: normal;
    vertical-align: middle;
}

.reference-table th {
    white-space: nowrap;
}

.reference-table td > strong,
.reference-table td > em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-table th:last-child,
.reference-table td:last-child {
    width: 112px;
}

.reference-table th a.sort-link {
    min-height: 26px;
}

.legal-period-table {
    min-width: 1180px;
}

.legal-period-table col.legal-col-code {
    width: 136px;
}

.legal-period-table col.legal-col-set {
    width: 300px;
}

.legal-period-table col.legal-col-minimum {
    width: 240px;
}

.legal-period-table col.legal-col-rates {
    width: 126px;
}

.legal-period-table col.legal-col-capacity {
    width: 116px;
}

.legal-period-table col.legal-col-currency {
    width: 124px;
}

.legal-period-table col.legal-col-actions {
    width: 118px;
}

.legal-period-table .legal-currency-cell {
    padding-right: 18px;
    white-space: nowrap;
}

.legal-period-table .inventory-actions-cell {
    width: 118px;
    padding-left: 8px;
    padding-right: 12px;
    overflow: visible;
    text-align: right;
}

.legal-period-table .row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}

.reference-period-table {
    table-layout: fixed;
    min-width: 1280px;
}

.reference-period-table th,
.reference-period-table td {
    box-sizing: border-box;
}

.reference-period-table th:nth-child(1),
.reference-period-table td:nth-child(1) {
    width: 112px;
}

.reference-period-table th:nth-child(2),
.reference-period-table td:nth-child(2) {
    width: 300px;
}

.reference-period-table th:nth-child(3),
.reference-period-table td:nth-child(3) {
    width: 150px;
}

.reference-period-table th:nth-child(4),
.reference-period-table td:nth-child(4) {
    width: 104px;
}

.reference-period-table th:nth-child(5),
.reference-period-table td:nth-child(5) {
    width: 150px;
}

.reference-period-table th:nth-child(6),
.reference-period-table td:nth-child(6) {
    width: 92px;
    text-align: center;
}

.reference-period-table th:nth-child(7),
.reference-period-table td:nth-child(7) {
    width: 132px;
    white-space: nowrap;
}

.reference-period-table th:nth-child(8),
.reference-period-table td:nth-child(8) {
    width: 140px;
}

.reference-period-table td {
    vertical-align: middle;
}

.reference-period-table td:nth-child(2),
.reference-period-table td:nth-child(5) {
    white-space: normal;
}

.reference-period-table td:nth-child(8) {
    padding-left: 8px;
    padding-right: 12px;
    overflow: visible;
    text-align: right;
}

.reference-period-table .row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
}

.reference-main .data-table td > em {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    font-style: normal;
}

.reference-main .row-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.reference-main .compact-action {
    min-width: 32px;
    width: 32px;
    padding: 0;
}

.reference-main .compact-action svg {
    margin: 0;
}

.reference-dependency-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 58px;
    border: 1px solid #bed5ea;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff 0%, #edf6ff 100%);
    color: #164a78;
    padding: 6px 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(43, 105, 160, 0.08);
}

.reference-dependency-button:hover {
    border-color: #6da4d4;
    background: #eaf5ff;
    transform: translateY(-1px);
}

.reference-dependency-button.is-info-only {
    border-color: #d6e2ec;
    background: #f8fbfd;
    box-shadow: none;
}

.reference-dependency-button strong,
.reference-dependency-empty strong {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.2;
}

.reference-dependency-button em,
.reference-dependency-empty em {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
    font-style: normal;
}

.reference-dependency-empty {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.reference-dependency-modal {
    max-width: 720px;
}

.reference-dependency-modal-body {
    display: grid;
    gap: 14px;
}

.reference-dependency-hero,
.reference-dependency-explain,
.reference-dependency-group,
.reference-dependency-empty-state {
    border: 1px solid #dce7f1;
    border-radius: var(--radius);
    background: #f8fbfd;
}

.reference-dependency-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.reference-dependency-hero strong,
.reference-dependency-explain strong,
.reference-dependency-group-head strong,
.reference-dependency-empty-state strong {
    color: var(--ink);
}

.reference-dependency-hero span,
.reference-dependency-explain span,
.reference-dependency-empty-state span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.reference-dependency-hero em {
    border-radius: 999px;
    background: #dff3ea;
    color: #087044;
    padding: 6px 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.reference-dependency-explain {
    padding: 12px 14px;
}

.reference-dependency-groups {
    display: grid;
    gap: 10px;
}

.reference-dependency-group {
    overflow: hidden;
    background: #fff;
}

.reference-dependency-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5edf5;
    background: #f4f8fc;
    padding: 10px 12px;
}

.reference-dependency-group-copy {
    margin: 0;
    border-bottom: 1px solid #edf2f7;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    padding: 9px 12px;
}

.reference-dependency-group-head em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.reference-dependency-group ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 12px 16px 12px 28px;
}

.reference-dependency-group li {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
}

.reference-dependency-empty-state {
    padding: 14px;
}

.reference-sort-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.reference-sort-tools .sort-link {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    padding: 4px 9px;
    font-size: 11px;
}

.reference-chip-filter {
    margin-bottom: 0;
}

.reference-chip-filter a {
    text-decoration: none;
}

.reference-resolution-card {
    display: grid;
    gap: 14px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: var(--radius);
    background: #f8fbfd;
    padding: 14px;
}

.reference-resolution-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.reference-resolution-card h3,
.reference-resolution-card p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.reference-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.reference-meta-grid div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px 12px;
}

.reference-meta-grid dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 5px;
}

.reference-meta-grid dd {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.reference-helper-copy,
.reference-form-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.reference-placeholder-state {
    min-height: 180px;
}

.reference-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.station-period-card {
    margin-bottom: 10px;
}

.station-rate-table-wrap {
    max-width: 100%;
    max-height: 260px;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}

.station-rate-table {
    min-width: min(100%, 860px);
}

.station-period-selector .station-period-card {
    min-height: 124px;
}

.station-period-workbench {
    gap: 14px;
}

.station-period-hero {
    align-items: center;
}

.station-period-hero .station-period-component-preview {
    grid-column: 1 / -1;
}

.station-period-flow-panel {
    padding: 14px;
}

.section-subcopy {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.station-period-flow-list {
    display: grid;
    gap: 10px;
}

.station-period-flow-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.06);
    overflow: hidden;
}

.station-period-flow-card summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(210px, 1.3fr) auto minmax(360px, 2fr);
    list-style: none;
    padding: 14px 16px;
    position: relative;
}

.station-period-flow-card summary::-webkit-details-marker {
    display: none;
}

.station-period-flow-card summary::before {
    align-items: center;
    background: #edf6ff;
    border: 1px solid #cbe4ff;
    border-radius: 999px;
    color: #0f5f9f;
    content: '+';
    display: inline-flex;
    font-size: 16px;
    font-weight: 900;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: 16px;
    width: 26px;
}

.station-period-flow-card[open] summary::before {
    content: '-';
}

.station-period-hero-actions,
.station-period-line-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.station-period-flow-station {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.station-period-flow-station strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.station-period-flow-station em,
.station-period-machine-card span,
.station-period-machine-card p {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.station-period-flow-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.station-period-flow-badges b {
    background: #eaf7f1;
    border: 1px solid #cbecdc;
    border-radius: 999px;
    color: #087a43;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
    white-space: nowrap;
}

.station-period-flow-metrics {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-right: 42px;
}

.station-period-flow-metrics small {
    background: #f4f8fc;
    border: 1px solid #d7e5f2;
    border-radius: 12px;
    color: #334155;
    font-size: 11px;
    font-weight: 850;
    padding: 8px 10px;
    text-align: center;
}

.station-period-component-preview {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 253, 0.98)),
        radial-gradient(circle at 12% 10%, rgba(35, 126, 191, 0.10), transparent 26%);
    border: 1px solid #d5e5f2;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    display: grid;
    gap: 10px;
    margin: 0 16px 12px;
    padding: 12px;
}

.station-period-hero .station-period-component-preview {
    margin: 0;
}

.station-period-component-head {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-between;
}

.station-period-component-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.station-period-component-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.station-period-component-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.station-period-component-chip {
    background: #fff;
    border: 1px solid #dce9f3;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
}

.station-period-component-chip span {
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.station-period-component-chip strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-period-component-chip em {
    color: #1d6fa8;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.station-period-component-chip.is-personnel {
    border-color: #c9eadb;
    background: #f3fbf7;
}

.station-period-component-chip.is-energy {
    border-color: #cde3fb;
    background: #f3f8ff;
}

.station-period-component-chip.is-amortization {
    border-color: #ded7f7;
    background: #f8f6ff;
}

.station-period-component-chip.is-maintenance {
    border-color: #f3d6bd;
    background: #fff8f1;
}

.station-period-component-chip.is-other {
    border-color: #dce3ec;
    background: #f8fafc;
}

.station-final-rate-panel {
    padding: 14px;
}

.final-rate-selector .payroll-period-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
}

.station-final-rate-hero {
    align-items: stretch;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.7fr);
}

.station-final-rate-hero .payroll-hero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    min-width: 0;
}

.station-final-rate-hero .payroll-hero-metrics article {
    min-width: 0;
    padding: 12px;
}

.station-final-rate-hero .payroll-hero-metrics span,
.station-final-rate-hero .payroll-hero-metrics em,
.station-final-rate-hero .payroll-hero-metrics strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-final-rate-hero .payroll-hero-metrics strong {
    font-size: clamp(16px, 1vw, 20px);
    line-height: 1.15;
    white-space: nowrap;
}

.station-final-rate-alert {
    align-items: center;
    background: linear-gradient(135deg, #fff8ed 0%, #f7fbff 100%);
    border: 1px solid #efd2a8;
    border-radius: 16px;
    color: #7a5118;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 10px 12px;
}

.station-final-rate-alert strong {
    color: #8a5614;
    font-size: 13px;
    font-weight: 950;
}

.station-final-rate-alert span {
    color: #73572d;
    font-size: 12px;
    font-weight: 760;
}

.station-final-rate-alert.is-sealed {
    background: linear-gradient(135deg, #edf9f3 0%, #f7fbff 100%);
    border-color: #a8dec5;
    color: #176949;
}

.station-final-rate-alert.is-sealed strong,
.station-final-rate-alert.is-sealed span {
    color: #176949;
}

.station-final-rate-alert.is-waiting-live {
    background: linear-gradient(135deg, #fff8ed 0%, #f7fbff 100%);
    border-color: #efd2a8;
}

.station-final-rate-alert.is-waiting-live strong,
.station-final-rate-alert.is-waiting-live span {
    color: #7a5118;
}

.station-final-rate-actions {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #cfe0ee;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    grid-column: 1 / -1;
    justify-content: space-between;
    padding: 10px 12px;
}

.station-final-rate-actions form {
    margin: 0;
}

.station-final-rate-actions .primary-button,
.station-final-rate-actions .secondary-button {
    white-space: nowrap;
}

.station-final-rate-actions > span:not(.status-pill) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .station-final-rate-hero {
        grid-template-columns: 1fr;
    }

    .station-final-rate-hero .payroll-hero-metrics {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.station-final-rate-table-wrap {
    border: 1px solid var(--line);
    border-radius: 16px;
    max-height: 430px;
    overflow: auto;
}

.station-final-rate-table {
    border: 0;
    min-width: 920px;
    table-layout: fixed;
}

.station-final-rate-table th:first-child,
.station-final-rate-table td:first-child {
    width: 24%;
}

.station-final-rate-table th:nth-child(2),
.station-final-rate-table th:nth-child(3),
.station-final-rate-table th:nth-child(4),
.station-final-rate-table td:nth-child(2),
.station-final-rate-table td:nth-child(3),
.station-final-rate-table td:nth-child(4) {
    width: 16%;
}

.station-final-rate-table th:nth-child(5),
.station-final-rate-table td:nth-child(5) {
    width: 16%;
}

.station-final-rate-table th:nth-child(6),
.station-final-rate-table td:nth-child(6) {
    width: 12%;
}

.station-final-rate-table th,
.station-final-rate-table td {
    padding: 10px 12px;
    vertical-align: top;
}

.station-final-rate-table thead th {
    background: #f3f8fc;
    box-shadow: 0 1px 0 var(--line);
    position: sticky;
    top: 0;
    z-index: 2;
}

.station-final-rate-table tfoot td {
    background: #eef7fc;
    border-top: 1px solid #cfe2f1;
    bottom: 0;
    box-shadow: 0 -1px 0 #cfe2f1;
    position: sticky;
    z-index: 1;
}

.station-final-rate-table tbody tr:nth-child(even) td {
    background: #fbfdff;
}

.station-final-rate-table tr.has-distribution td:first-child {
    box-shadow: inset 4px 0 0 #27a36a;
}

.station-final-rate-table tr.no-distribution td:first-child {
    box-shadow: inset 4px 0 0 #d6e2ed;
}

.station-final-rate-table td strong {
    color: var(--ink);
    display: block;
    font-size: 12.5px;
    font-weight: 950;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.station-final-rate-table td em {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 750;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.station-final-rate-table .status-pill {
    font-size: 10px;
    padding: 4px 8px;
}

.station-period-machine-grid {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding: 12px 16px 16px;
}

.station-period-line-toolbar {
    border-top: 1px solid var(--line);
    justify-content: space-between;
    padding: 12px 16px;
}

.station-period-line-toolbar > div {
    display: grid;
    gap: 2px;
}

.station-period-line-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.station-period-line-actions form {
    margin: 0;
}

.station-period-line-toolbar strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.station-period-line-toolbar span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.station-period-machine-card {
    background: #fff;
    border: 1px solid #d8e6f1;
    border-radius: 16px;
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.station-period-machine-actions {
    align-items: center;
    display: flex;
    gap: 6px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.station-period-machine-actions form {
    margin: 0;
}

.station-period-machine-delete {
    position: absolute;
    right: 10px;
    top: 10px;
}

.station-period-machine-title {
    display: grid;
    gap: 3px;
    min-height: 34px;
    padding-right: 210px;
}

.station-period-machine-origin {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    justify-self: start;
    padding: 4px 8px;
    text-transform: uppercase;
}

.station-period-machine-origin.is-manual {
    background: #eaf7f1;
    border: 1px solid #c9eadb;
    color: #087a43;
}

.station-period-machine-origin.is-legacy {
    background: #fff8ed;
    border: 1px solid #f1d2ad;
    color: #9a5a13;
}

.station-period-machine-origin.is-duplicate {
    background: #fff1f1;
    border: 1px solid #f3b7b7;
    color: #b72e2e;
}

.station-period-machine-card strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.station-period-machine-card dl {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.station-period-machine-card dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.station-period-machine-card dd {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    margin: 0;
    overflow-wrap: anywhere;
}

.station-period-machine-card p {
    border-top: 1px dashed #d6e4f0;
    margin: 0;
    padding-top: 8px;
}

.station-period-machine-card .station-period-machine-warning {
    background: #fff8ed;
    border: 1px solid #f3d4ae;
    border-radius: 12px;
    color: #985c16;
    padding: 8px 10px;
}

.station-machine-modal.operation-modal.wide-modal {
    width: min(1180px, calc(100vw - 34px));
}

.station-machine-modal.definition-modal {
    max-height: calc(100vh - 36px);
    top: 18px;
}

.definition-modal.operation-modal:has(> form.station-machine-form) > .modal-header {
    padding: 12px 18px;
}

.definition-modal.operation-modal:has(> form.station-machine-form) > form {
    padding: 10px 16px 0;
}

.definition-modal.operation-modal:has(> form.station-machine-form) > form > .modal-actions {
    margin: 8px -16px 0;
    padding: 8px 16px;
}

.station-machine-layout {
    display: block;
    padding: 0;
}

.station-machine-main {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.station-machine-section {
    background: #fff;
    border: 1px solid #d6e5f1;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.04);
    display: grid;
    gap: 7px;
    padding: 9px 10px;
}

.station-machine-flow-note {
    align-items: center;
    background: linear-gradient(90deg, #102f49 0%, #155071 100%);
    border-radius: 14px;
    color: #dff1ff;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-height: 36px;
    padding: 8px 12px;
}

.station-machine-flow-note strong {
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.station-machine-flow-note span {
    font-size: 12px;
    font-weight: 760;
}

.station-machine-flow-note b {
    color: #fff;
}

.station-machine-labor-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.station-machine-labor-strip article {
    background: linear-gradient(180deg, #f8fcff 0%, #eef8ff 100%);
    border: 1px solid #d4e6f4;
    border-radius: 12px;
    min-width: 0;
    padding: 6px 9px;
}

.station-machine-labor-strip span {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.station-machine-labor-strip strong {
    color: var(--ink);
    display: block;
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-machine-section-head {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 24px minmax(0, 1fr);
}

.station-machine-section-head > span {
    align-items: center;
    background: #e9f5ff;
    border: 1px solid #cfe7fb;
    border-radius: 10px;
    color: #106aa9;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.station-machine-section-head strong {
    color: var(--ink);
    display: block;
    font-size: 13px;
    font-weight: 900;
}

.station-machine-section-head em {
    color: var(--muted);
    display: block;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
    margin-top: 2px;
}

.station-machine-field-grid {
    align-items: end;
    display: grid;
    gap: 7px;
    grid-template-columns: 130px minmax(260px, 1.1fr) minmax(220px, 0.85fr) minmax(220px, 1fr);
}

.station-machine-field-grid label {
    display: grid;
    gap: 4px;
}

.station-machine-field-grid label span,
.station-component-row label span {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
}

.station-machine-field-grid .is-wide {
    grid-column: auto;
}

.station-machine-field-grid input,
.station-machine-field-grid select {
    min-height: 32px;
}

.station-component-row input,
.station-component-row select {
    min-height: 30px;
}

.station-component-list {
    border: 1px solid #dbe8f3;
    border-radius: 12px;
    overflow: hidden;
}

.station-component-columns {
    background: #eef6fc;
    border-bottom: 1px solid #dbe8f3;
    color: var(--muted);
    display: grid;
    font-size: 10px;
    font-weight: 950;
    gap: 8px;
    grid-template-columns: minmax(155px, 0.85fr) minmax(210px, 1.1fr) 132px 132px;
    letter-spacing: 0.02em;
    padding: 5px 8px;
    text-transform: uppercase;
}

.station-component-row {
    align-items: center;
    background: #fbfdff;
    border-bottom: 1px solid #dbe8f3;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(155px, 0.85fr) minmax(210px, 1.1fr) 132px 132px;
    min-height: 44px;
    padding: 5px 8px;
}

.station-component-row:last-child {
    border-bottom: 0;
}

.station-component-row:nth-child(even) {
    background: #f7fbff;
}

.station-component-row .check-row {
    align-items: center;
    display: flex;
    gap: 8px;
}

.station-component-row .check-row span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.station-component-row label:not(.check-row) > span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.station-component-row .check-row input {
    height: 16px;
    min-height: 16px;
    width: 16px;
}

.station-component-row p {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    margin: 0;
}

.station-component-row label {
    display: grid;
    gap: 2px;
}

.station-component-row.is-personnel {
    grid-template-columns: minmax(155px, 0.85fr) minmax(210px, 1.1fr) 132px 132px;
}

.station-component-row.is-personnel label:last-child {
    grid-column: 4;
}

.station-machine-form .station-machine-service-field {
    display: none;
}

.station-machine-form.is-service-line .station-machine-service-field {
    display: grid;
}

.station-machine-form.is-service-line .station-machine-cost-section {
    opacity: 0.42;
    pointer-events: none;
}

.distribution-profile-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.distribution-workbench {
    display: grid;
    gap: 14px;
}

.distribution-hero {
    align-items: center;
    background:
        radial-gradient(circle at 12% 12%, rgba(14, 122, 83, 0.12), transparent 28%),
        linear-gradient(135deg, #f3fbf7 0%, #eef7ff 100%);
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.7fr) auto;
}

.distribution-hero .payroll-hero-metrics {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
}

.distribution-hero-title {
    grid-row: 1 / span 2;
}

.distribution-hero > .primary-button {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.distribution-hero .payroll-hero-metrics article {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 255, 0.9));
    min-height: 86px;
}

.distribution-hero .payroll-hero-metrics article.is-total {
    border-color: rgba(14, 122, 83, 0.28);
    box-shadow: inset 4px 0 0 rgba(14, 122, 83, 0.18);
}

.distribution-hero .payroll-hero-metrics strong {
    font-size: clamp(17px, 1.12vw, 21px);
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.distribution-hero .payroll-hero-metrics em {
    color: var(--muted);
    display: block;
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
}

.distribution-source-equation {
    align-items: center;
    align-self: stretch;
    background:
        linear-gradient(135deg, rgba(6, 95, 70, 0.08), rgba(39, 118, 182, 0.08));
    border: 1px dashed rgba(37, 82, 115, 0.22);
    border-radius: 16px;
    display: flex;
    gap: 12px;
    grid-column: 2;
    justify-content: space-between;
    padding: 10px 12px;
}

.distribution-source-equation span {
    color: #255273;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.distribution-source-equation strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
    text-align: right;
}

@media (max-width: 1180px) {
    .distribution-hero {
        grid-template-columns: 1fr;
    }

    .distribution-hero-title,
    .distribution-hero .payroll-hero-metrics,
    .distribution-source-equation,
    .distribution-hero > .primary-button {
        grid-column: 1;
        grid-row: auto;
    }

    .distribution-hero .payroll-hero-metrics {
        grid-template-columns: 1fr;
    }
}

.distribution-rule-panel {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e7f1;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 35, 55, 0.05);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px;
}

.distribution-rule-panel h3 {
    color: var(--ink);
    font-size: 18px;
    font-weight: 950;
    margin: 0 0 4px;
}

.distribution-rule-panel span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.distribution-rule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.distribution-rule-chips span {
    background: #f2f8fd;
    border: 1px solid #d5e7f4;
    border-radius: 999px;
    color: #255273;
    font-size: 11px;
    font-weight: 900;
    padding: 8px 10px;
    white-space: nowrap;
}

.distribution-table-wrap {
    max-height: 430px;
    overflow: auto;
}

.distribution-table {
    min-width: 1480px;
}

.distribution-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.distribution-table tfoot td {
    background:
        linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(235, 246, 255, 0.98));
    border-bottom: 0;
    border-top: 1px solid #cfe0ed;
    bottom: 0;
    box-shadow: 0 -10px 24px rgba(15, 35, 55, 0.08);
    position: sticky;
    z-index: 2;
}

.distribution-table tfoot strong {
    color: #0f314a;
}

.distribution-table td strong,
.distribution-table td em,
.distribution-table tfoot strong,
.distribution-table tfoot em {
    display: block;
}

.distribution-table td em,
.distribution-table tfoot em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    margin-top: 3px;
}

.distribution-source-display {
    background:
        linear-gradient(135deg, rgba(240, 248, 255, 0.98), rgba(246, 252, 249, 0.98));
    border: 1px solid #cfe0ed;
    border-radius: 14px;
    display: grid;
    gap: 5px;
    padding: 12px 14px;
}

.distribution-source-display span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.distribution-source-display strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.distribution-source-display em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.distribution-profile-modal.operation-modal.wide-modal {
    width: min(1380px, calc(100vw - 34px));
}

.distribution-profile-modal.definition-modal {
    max-height: calc(100vh - 30px);
    top: 15px;
}

.definition-modal.operation-modal:has(> form.distribution-profile-form) > .modal-header {
    padding: 12px 20px;
}

.definition-modal.operation-modal:has(> form.distribution-profile-form) > form {
    padding: 14px 18px 0;
}

.definition-modal.operation-modal:has(> form.distribution-profile-form) > form > .modal-actions {
    margin: 12px -18px 0;
    padding: 10px 18px;
}

.distribution-modal-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 310px;
}

.distribution-modal-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.distribution-modal-aside {
    display: grid;
    gap: 12px;
    align-content: start;
}

.distribution-rule-summary,
.distribution-source-toggles,
.distribution-target-builder {
    background: #fff;
    border: 1px solid #d7e7f1;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 35, 55, 0.05);
    padding: 14px;
}

.distribution-rule-summary {
    background:
        radial-gradient(circle at top left, rgba(35, 126, 191, 0.16), transparent 34%),
        linear-gradient(180deg, #163952 0%, #0f2e45 100%);
    border-color: #214b67;
    color: #dff1ff;
}

.distribution-rule-summary h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.2;
    margin: 4px 0 10px;
}

.distribution-rule-summary span {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #d7e9f7;
    display: block;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    padding: 9px 0;
}

.distribution-source-toggles {
    display: grid;
    gap: 10px;
}

.distribution-profile-form .operation-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.distribution-target-head {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.distribution-target-head h3 {
    color: var(--ink);
    font-size: 18px;
    font-weight: 950;
    margin: 0 0 3px;
}

.distribution-target-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.distribution-target-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.distribution-target-row {
    align-items: center;
    background: #f8fbfe;
    border: 1px solid #dbe8f3;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1.1fr) minmax(280px, 1.4fr) 96px minmax(140px, 0.8fr);
    padding: 10px;
}

.distribution-target-row.is-selected {
    background: linear-gradient(135deg, #f3fbf7 0%, #f7fbff 100%);
    border-color: #bee8d3;
}

.distribution-target-selector {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.distribution-target-selector input {
    height: 17px;
    min-height: 17px;
    width: 17px;
}

.distribution-target-selector span,
.distribution-target-basis,
.distribution-target-risk,
.distribution-target-note {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.distribution-target-selector strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.distribution-target-selector em,
.distribution-target-basis span,
.distribution-target-risk span,
.distribution-target-note span {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.distribution-target-metrics {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.distribution-target-metrics span {
    background: #fff;
    border: 1px solid #dce9f3;
    border-radius: 10px;
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 6px 8px;
}

.distribution-target-metrics b {
    color: #64748b;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.distribution-target-metrics strong {
    color: var(--ink);
    font-size: 11px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.distribution-target-risk input,
.distribution-target-note input {
    min-height: 34px;
}

.distribution-profile-modal.operation-modal.wide-modal {
    width: min(1580px, calc(100vw - 30px));
}

.distribution-profile-modal > .modal-header {
    background:
        radial-gradient(circle at 8% 0%, rgba(35, 126, 191, 0.12), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.distribution-modal-hero {
    align-items: center;
    background:
        radial-gradient(circle at 12% 20%, rgba(14, 122, 83, 0.18), transparent 30%),
        linear-gradient(135deg, #0f324b 0%, #155d78 58%, #e9f8f1 58%, #f8fcff 100%);
    border: 1px solid #cfe3ef;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 35, 55, 0.11);
    color: #dff1ff;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 14px;
    padding: 18px 20px;
}

.distribution-modal-hero h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 3px 0 6px;
}

.distribution-modal-hero span {
    color: #d7ebf7;
    display: block;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.45;
    max-width: 820px;
}

.distribution-modal-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.distribution-modal-flow span {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(185, 218, 237, 0.92);
    border-radius: 999px;
    color: #173d58;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    gap: 7px;
    padding: 8px 11px;
    white-space: nowrap;
}

.distribution-modal-flow b {
    align-items: center;
    background: #1f79b6;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.distribution-modal-layout {
    grid-template-areas:
        "main aside"
        "targets targets";
    grid-template-columns: minmax(0, 1fr) 330px;
}

.distribution-modal-main {
    display: contents;
}

.distribution-profile-form .operation-form-grid {
    grid-area: main;
}

.distribution-modal-aside {
    grid-area: aside;
}

.distribution-target-builder {
    grid-area: targets;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind]:not(.checkbox-line) {
    background: #fff;
    border: 1px solid #d8e7f2;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.045);
    gap: 6px;
    min-height: 74px;
    padding: 10px 12px;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind="note"] {
    min-height: 112px;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind] > span:first-child {
    color: #2a5875;
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind] > span:first-child::before,
.distribution-profile-modal .modal-form-grid label.is-select-field:not(.checkbox-line)::after {
    display: none;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind] input,
.distribution-profile-modal .modal-form-grid label[data-field-kind] select,
.distribution-profile-modal .modal-form-grid label[data-field-kind] textarea {
    background: #f9fcff;
    border-color: #d9e7f2;
    min-height: 39px;
}

.distribution-profile-modal .modal-form-grid label[data-field-kind] textarea {
    min-height: 78px;
}

.distribution-rule-summary span:last-child {
    display: none;
}

.distribution-rule-summary::after {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #d7e9f7;
    content: 'Eski programa yakin davranis icin risk "payi carpar" secilebilir.';
    display: block;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    padding: 9px 0;
}

.distribution-source-toggles .checkbox-line {
    align-items: center;
    background: #f7fbff;
    border: 1px solid #dce9f3;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 62px;
    padding: 12px;
}

.distribution-source-toggles .checkbox-line span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.distribution-target-builder {
    padding: 16px 18px;
}

.distribution-target-list {
    background: #f7fbfe;
    border: 1px solid #dbe8f3;
    border-radius: 16px;
    gap: 0;
    max-height: 320px;
    padding: 0;
}

.distribution-target-table-head {
    background: linear-gradient(180deg, #eef6fc 0%, #eaf4fb 100%);
    border-bottom: 1px solid #dbe8f3;
    color: #536476;
    display: grid;
    font-size: 10px;
    font-weight: 950;
    gap: 18px;
    grid-template-columns: minmax(300px, 1fr) minmax(500px, 1.35fr) 180px 96px minmax(260px, 0.8fr);
    letter-spacing: 0.05em;
    padding: 9px 14px;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}

.distribution-target-row {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e2ecf4;
    border-radius: 0;
    gap: 18px;
    grid-template-columns: minmax(300px, 1fr) minmax(500px, 1.35fr) 180px 96px minmax(260px, 0.8fr);
    min-height: 70px;
    padding: 11px 14px;
    position: relative;
}

.distribution-target-row:last-child {
    border-bottom: 0;
}

.distribution-target-row.is-selected {
    background: linear-gradient(90deg, rgba(232, 248, 239, 0.95) 0%, #ffffff 46%);
    border-color: #d8eadf;
}

.distribution-target-row.is-selected::before {
    background: #15865a;
    border-radius: 999px;
    bottom: 12px;
    content: "";
    left: 5px;
    position: absolute;
    top: 12px;
    width: 4px;
}

.distribution-target-row:hover {
    background: #fbfdff;
}

.distribution-target-row.is-selected:hover {
    background: linear-gradient(90deg, rgba(229, 249, 239, 0.98) 0%, #ffffff 48%);
}

.distribution-target-selector {
    padding-left: 8px;
}

.distribution-target-selector strong {
    font-size: 14px;
}

.distribution-target-selector em {
    font-size: 11px;
}

.distribution-target-metrics {
    gap: 8px;
    grid-template-columns: repeat(4, minmax(108px, 1fr));
}

.distribution-target-metrics span {
    border-radius: 12px;
    padding: 8px 9px;
}

.distribution-target-metrics strong {
    font-size: 12px;
}

.distribution-target-basis,
.distribution-target-risk,
.distribution-target-note {
    align-self: center;
    min-width: 0;
}

.distribution-target-basis > span,
.distribution-target-risk > span,
.distribution-target-note > span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.distribution-target-basis select,
.distribution-target-risk input,
.distribution-target-note input {
    background: #fff;
    border-color: #d9e7f2;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.035);
    min-height: 40px;
}

.distribution-target-basis select {
    font-size: 11px;
    font-weight: 900;
    min-width: 170px;
}

.distribution-target-risk input {
    max-width: 84px;
    text-align: center;
}

.distribution-target-note input {
    min-width: 260px;
}

.distribution-table {
    min-width: 1480px;
}

.distribution-table th:nth-child(1),
.distribution-table td:nth-child(1) {
    min-width: 220px;
}

.distribution-table th:nth-child(4),
.distribution-table td:nth-child(4) {
    min-width: 170px;
}

.distribution-table th:nth-child(5),
.distribution-table td:nth-child(5),
.distribution-table th:nth-child(6),
.distribution-table td:nth-child(6),
.distribution-table th:nth-child(7),
.distribution-table td:nth-child(7) {
    min-width: 150px;
}

.distribution-table td:nth-child(6) strong,
.distribution-table td:nth-child(6) em,
.distribution-table td:nth-child(7) strong,
.distribution-table td:nth-child(7) em {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

@media (max-width: 1500px) {
    .reference-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .reference-nav-panel {
        min-height: 0;
        max-height: none;
    }

    .reference-nav-panel,
    .reference-table-panel {
        height: auto;
    }

    .reference-nav-panel .definition-group-list {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        max-height: 174px;
    }

    .reference-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .distribution-modal-layout {
        grid-template-areas:
            "main"
            "aside"
            "targets";
        grid-template-columns: 1fr;
    }

    .distribution-modal-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .distribution-modal-hero {
        grid-template-columns: 1fr;
    }

    .distribution-modal-flow {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .reference-main {
        min-height: auto;
        overflow: visible;
    }

    .reference-period-control-grid {
        grid-template-columns: 1fr;
    }

    .reference-period-settings,
    .reference-code-rule {
        align-items: stretch;
        flex-direction: column;
    }

    .period-setting-copy {
        align-items: flex-start;
    }

    .period-setting-toggle,
    .reference-period-settings .secondary-button {
        width: 100%;
    }

    .period-setting-toggle {
        flex: 0 0 auto;
    }

    .reference-table {
        min-width: 760px;
    }

    .station-rate-table {
        min-width: 760px;
    }

    .station-period-flow-card summary {
        grid-template-columns: 1fr;
        padding-right: 54px;
    }

    .station-period-flow-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-right: 0;
    }

    .station-period-component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .station-period-machine-grid {
        grid-template-columns: 1fr;
    }

    .station-period-machine-actions {
        position: static;
        justify-content: flex-start;
    }

    .station-period-machine-title {
        padding-right: 0;
    }

    .station-machine-field-grid,
    .station-machine-labor-strip,
    .station-component-columns,
    .station-component-row,
    .station-component-row.is-personnel,
    .distribution-profile-form .operation-form-grid,
    .distribution-rule-panel,
    .distribution-target-table-head,
    .distribution-target-row {
        grid-template-columns: 1fr;
    }

    .distribution-modal-aside,
    .distribution-target-metrics {
        grid-template-columns: 1fr;
    }

    .distribution-target-head,
    .distribution-rule-chips {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
    }

    .station-component-row.is-personnel label:last-child {
        grid-column: auto;
    }

    .reference-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-resolution-head {
        flex-direction: column;
    }

    .reference-meta-grid {
        grid-template-columns: 1fr;
    }

    .reference-form-grid {
        grid-template-columns: 1fr;
    }
}

.operation-definition-filter {
    margin-bottom: 14px;
}

.operation-definition-filter a {
    text-decoration: none;
}

.operation-definition-filter a.is-active {
    border-color: #adc5db;
    background: var(--blue-soft);
    color: var(--blue);
}

.operation-definition-filter strong {
    border-radius: 999px;
    background: rgba(20, 25, 31, 0.08);
    padding: 2px 7px;
}

.operation-modal {
    width: min(760px, calc(100vw - 32px));
}

.operation-modal.wide-modal {
    width: min(1220px, calc(100vw - 40px));
}

.definition-modal.operation-modal:has(> form) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
}

.definition-modal.operation-modal:has(> form) > .modal-header {
    position: relative;
    top: auto;
    z-index: 4;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), #fff);
}

.definition-modal.operation-modal:has(> form) > form {
    min-height: 0;
    overflow: auto;
    padding: 18px 20px 0;
}

.operation-modal > form > .modal-actions {
    justify-content: flex-end;
}

.definition-modal.operation-modal:has(> form) > form > .modal-actions {
    bottom: 0;
    z-index: 3;
    margin: 18px -20px 0;
    padding: 12px 20px 16px;
}

.operation-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-section-title {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.06);
}

.form-section-title strong {
    font-size: 14px;
}

.form-section-title span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.operation-check {
    display: flex;
    align-items: center;
    flex-direction: row;
    min-height: 42px;
}

.operation-formula-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #d7e4ee;
    border-radius: var(--radius);
    background: #f8fbfd;
    padding: 10px;
    margin-top: 12px;
}

.operation-formula-tools span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.operation-formula-tools span.is-error {
    color: var(--red);
}

.compact-heading {
    margin-bottom: 0;
}

.compact-heading h3 {
    margin: 0;
    font-size: 18px;
}

.operation-formula-context-card {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 14px;
}

.operation-formula-context-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-height: 420px;
    overflow: auto;
    padding-right: 2px;
}

.operation-formula-context-grid > label {
    display: grid;
    gap: 6px;
    min-width: 0;
    align-content: start;
}

.operation-formula-context-grid .is-wide {
    grid-column: 1 / -1;
}

.operation-formula-context-grid input,
.operation-formula-context-grid select {
    width: 100%;
    min-width: 0;
}

.operation-context-field {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.04);
    padding: 10px;
}

.operation-context-field span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.operation-context-field small,
.operation-context-field em,
.operation-formula-context-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    font-style: normal;
}

.operation-context-field.is-locked {
    opacity: 0.62;
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.35);
}

.formula-definition-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1180px) {
    .app-shell {
        --sidebar-width: 86px;
    }

    .sidebar {
        width: var(--sidebar-width);
    }

    .main-area {
        margin-left: var(--sidebar-width);
    }

    .brand-copy,
    .sidebar-title,
    .nav-item span,
    .sidebar-status div {
        display: none;
    }

    .nav-item {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .nav-accordion-button .nav-chevron {
        display: none;
    }

    .nav-accordion .sidebar-subnav {
        display: none;
    }

    .dashboard-layout,
    .ai-workspace,
    .product-module-grid,
    .product-detail-layout,
    .product-editor-grid,
    .product-workbench {
        grid-template-columns: 1fr;
    }

    .inventory-admin-tool-grid {
        grid-template-columns: 1fr;
    }

    .product-list-panel {
        max-height: none;
    }

    .cutting-panel {
        position: static;
    }

    .three-workspace {
        min-height: 260px;
    }
}

@media (max-width: 860px) {
    .inventory-admin-tool-actions .secondary-button,
    .inventory-admin-tool-card .danger-button {
        width: 100%;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 360px;
    }

    .auth-board {
        grid-template-columns: 1fr;
    }

    .auth-hero-copy h2 {
        font-size: 26px;
    }

    .login-vanity-stage,
    .login-vanity-canvas {
        min-height: 300px;
    }

    .login-vanity-caption {
        align-items: flex-start;
        flex-direction: column;
    }

    .sidebar {
        position: sticky;
        inset: auto;
        top: 0;
        z-index: 20;
        width: auto;
        height: auto;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        overflow: visible;
        padding: 10px 14px;
    }

    .main-area {
        margin-left: 0;
    }

    .quick-module-submit-bar {
        left: 14px;
        right: 14px;
        bottom: 12px;
    }

    .brand-block {
        flex: 0 0 auto;
        min-height: 44px;
    }

    .sidebar-section {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }

    .stock-filter-section {
        width: 100%;
    }

    .sidebar-subnav {
        display: none;
        padding-left: 0;
    }

    .nav-accordion.is-open .sidebar-subnav {
        display: flex;
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        z-index: 40;
        max-width: calc(100vw - 28px);
        overflow-x: auto;
        border: 1px solid var(--nav-line);
        border-radius: var(--radius);
        background: var(--nav);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
        padding: 8px;
    }

    .sidebar-subnav a {
        min-width: max-content;
    }

    .nav-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding: 2px 0;
    }

    .nav-accordion {
        position: relative;
        flex: 0 0 auto;
    }

    .sidebar-status {
        flex: 0 0 38px;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-top: 0;
        padding: 0;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .topbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .command-search-button {
        grid-template-columns: 22px 1fr;
    }

    .command-search-button kbd {
        display: none;
    }

    .metric-strip,
    .inventory-metrics,
    .scenario-grid,
    .part-spec-grid,
    .form-zone,
    .product-hero-meta,
    .cutting-result-strip,
    .cutting-details-grid,
    .cutting-breakdown,
    .optimal-required-grid,
    .optimal-form-grid,
    .material-texture-preview,
    .material-detail-grid,
    .texture-priority-list div,
    .texture-upload-preview,
    .pvc-visual,
    .permission-editor,
    .ai-form,
    .product-material-grid,
    .product-material-summary,
    .bom-line-metrics,
    .compact-form,
    .product-create-form,
    .modal-form-grid,
    .operation-form-grid,
    .operation-formula-context-grid,
    .formula-definition-fields,
    .operation-flow-panel,
    .product-spec-matrix,
    .bom-component-toolbar,
    .module-grid,
    .definition-material-profile__grid,
    .definition-material-profile__source-grid {
        grid-template-columns: 1fr;
    }

    .product-create-surface-card-head {
        flex-direction: column;
    }

    .media-form {
        grid-template-columns: 1fr;
    }

    .bom-line-summary {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .bom-line-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .bom-family-group-head,
    .material-family-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .bom-line-summary-main,
    .bom-line-summary-right {
        width: 100%;
    }

    .bom-line-summary-right {
        justify-content: flex-start;
    }

    .bom-line-summary-qty.is-editable {
        min-width: 100%;
    }

    .bom-line-summary-qty-row {
        grid-template-columns: 1fr;
    }

    .bom-line-badges {
        justify-content: flex-start;
    }

    .bom-family-group-badges {
        justify-content: flex-start;
    }

    .bom-line-edit-form,
    .bom-line-edit-form.has-placement {
        grid-template-columns: 1fr;
    }

    .bom-line-edit-form .is-wide {
        grid-column: auto;
    }

    .bom-line-edit-form .is-note {
        grid-column: auto;
    }

    .bom-placement-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-material-side-panel {
        position: static;
    }

    .material-flow-pills {
        justify-content: flex-start;
    }

    .product-material-summary article {
        min-height: auto;
    }

    .product-viewer {
        height: 340px;
        margin: 0;
    }

    .section-heading,
    .table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box,
    .table-tools select {
        width: 100%;
    }

    .definition-layout {
        grid-template-columns: 1fr;
    }

    .definition-group-sidebar {
        position: static;
        min-height: 0;
        max-height: none;
    }

    .definition-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 230px;
        overflow-y: auto;
        padding-right: 3px;
    }

    .definition-group-link {
        min-height: 46px;
    }

    .definition-table-wrap {
        display: none;
    }

    .definition-card-list {
        display: grid;
        gap: 10px;
    }

    .definition-card .row-actions {
        justify-content: stretch;
    }

    .definition-card .table-action {
        flex: 1 1 0;
    }

    .tree-row.depth-1,
    .tree-row.depth-2,
    .tree-row.depth-3 {
        margin-left: 0;
    }

    .three-workspace {
        grid-template-rows: auto minmax(300px, 1fr) auto;
    }

    .viewer-toolbar,
    .viewer-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .definition-card-meta {
        grid-template-columns: 1fr;
    }

    .route-stage,
    .route-summary-strip,
    .route-modal-top,
    .route-editor-header,
    .route-step-card-head,
    .route-preview-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .route-step-badges {
        justify-content: flex-start;
    }

    .route-preview-grid,
    .route-step-metrics,
    .route-aside-stats {
        grid-template-columns: 1fr;
    }

    .route-step-grid {
        grid-template-columns: 1fr;
    }

    .bom-component-option {
        flex-direction: column;
        align-items: stretch;
    }

    .bom-component-option-badge {
        justify-self: start;
    }

    .route-modal {
        left: 8px;
        right: 8px;
        top: 16px;
        width: auto;
        max-height: calc(100vh - 32px);
        transform: none;
    }

    .quick-route-modal .quick-module-modal-shell {
        max-height: calc(100vh - 32px);
    }

    .quick-route-modal .modal-header,
    .quick-route-modal .quick-module-modal-body,
    .quick-route-modal .quick-module-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .definition-modal,
    .confirm-modal {
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow: auto;
    }
}

@media (max-width: 520px) {
    .definition-group-list {
        grid-template-columns: 1fr;
    }
}

.system-layout {
    align-items: start;
}

.system-nav-panel {
    max-height: calc(100vh - 36px);
}

.system-nav-note {
    display: grid;
    gap: 4px;
    border: 1px solid #cfe2f2;
    border-radius: var(--radius);
    background: #f4f9fd;
    padding: 12px;
}

.system-nav-note strong {
    font-size: 13px;
}

.system-nav-note span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.system-section-panel {
    min-width: 0;
}

.system-section-stack {
    display: grid;
    gap: 14px;
}

.system-field-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-card-grid {
    display: grid;
    gap: 14px;
}

.system-setting-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px;
}

.system-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.system-card-head strong,
.system-card-head span {
    display: block;
}

.system-card-head strong {
    font-size: 15px;
}

.system-card-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}

.system-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.system-form-grid label {
    display: grid;
    gap: 7px;
    min-width: 0;
    border: 1px solid var(--line);
    border-left: 4px solid var(--field-accent, #d8e3ec);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px;
}

.system-form-grid label > span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--field-accent, var(--blue)) 74%, #273241);
    font-size: 11px;
    letter-spacing: 0.01em;
}

.system-form-grid label > span:first-child::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--field-accent, var(--blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent, var(--blue)) 15%, transparent);
}

.system-form-grid label input,
.system-form-grid label select,
.system-form-grid label textarea {
    width: 100%;
    min-width: 0;
}

.system-form-grid label[data-field-kind="identity"] {
    --field-accent: #2776b6;
}

.system-form-grid label[data-field-kind="link"] {
    --field-accent: #248b9a;
}

.system-form-grid label[data-field-kind="option"] {
    --field-accent: #6f6ab7;
}

.system-form-grid label[data-field-kind="rate"] {
    --field-accent: #8c64a8;
}

.system-form-grid label[data-field-kind="capacity"] {
    --field-accent: #467f4f;
}

.system-form-grid label[data-field-kind="formula"] {
    --field-accent: #1f78b4;
}

.identity-team-formula-card {
    border-color: #b8daf3;
    background:
        radial-gradient(circle at 96% 6%, rgba(32, 132, 196, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(237, 248, 255, 0.92), #fff 42%, rgba(245, 252, 248, 0.9));
}

.identity-team-formula-card .modal-actions {
    justify-content: flex-end;
    padding: 0;
}

.system-field-span-2 {
    grid-column: span 2;
}

.system-field-span-3 {
    grid-column: 1 / -1;
}

.lacquer-color-picker-card {
    display: grid;
    gap: 12px;
}

.lacquer-color-picker-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.lacquer-color-picker-input {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 4px;
    cursor: pointer;
}

.lacquer-color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.lacquer-color-picker-input::-webkit-color-swatch {
    border: 0;
    border-radius: 12px;
}

.lacquer-color-picker-input::-moz-color-swatch {
    border: 0;
    border-radius: 12px;
}

.lacquer-color-picker-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.lacquer-color-picker-copy strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

.lacquer-color-picker-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.lacquer-color-preview-chip,
.lacquer-color-chip-swatch {
    display: block;
    background: var(--lacquer-color-preview, #f7f7f2);
    border: 1px solid rgba(18, 28, 45, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.lacquer-color-preview-chip {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

.lacquer-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lacquer-color-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lacquer-color-inline-copy {
    gap: 4px;
}

.lacquer-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    padding: 6px 12px;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.lacquer-color-chip:hover {
    border-color: #adc5db;
    background: #f8fbff;
    box-shadow: 0 8px 18px rgba(39, 118, 182, 0.08);
    transform: translateY(-1px);
}

.lacquer-color-chip.is-active {
    border-color: #2776b6;
    background: #f5fbff;
    box-shadow: 0 0 0 3px rgba(39, 118, 182, 0.14);
}

.lacquer-color-chip-swatch {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 999px;
}

@media (max-width: 720px) {
    .lacquer-color-picker-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lacquer-color-preview-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.system-toggle-list {
    display: grid;
    gap: 10px;
}

.system-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 62px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdff;
    padding: 12px;
}

.system-toggle:hover {
    border-color: #adc5db;
    background: #f6fbff;
}

.system-toggle input {
    width: 18px;
    height: 18px;
    min-height: 18px;
}

.system-toggle-copy {
    min-width: 0;
}

.system-toggle-copy strong,
.system-toggle-copy em {
    display: block;
}

.system-toggle-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-style: normal;
}

.system-toggle-copy em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
    margin-top: 4px;
}

.system-inline-list {
    display: grid;
    gap: 10px;
}

.system-inline-list > div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 12px;
}

.system-inline-list strong,
.system-inline-list span {
    display: block;
}

.system-inline-list strong {
    font-size: 13px;
}

.system-inline-list span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}

.system-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #cfe2f2;
    border-radius: var(--radius);
    background: #f4f9fd;
    padding: 14px;
}

.system-save-bar strong,
.system-save-bar span {
    display: block;
}

.system-save-bar strong {
    font-size: 14px;
}

.system-save-bar span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}

.system-save-bar .modal-actions {
    margin: 0;
    flex: 0 0 auto;
}

.system-save-bar-danger {
    border-color: #efc0c0;
    background: #fff5f5;
}

.system-maintenance-grid {
    margin-top: 20px;
}

.system-backup-card,
.system-reset-card {
    min-height: 100%;
}

.system-maintenance-actions {
    justify-content: flex-start;
    margin-top: 16px;
}

.system-backup-list {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.system-backup-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.system-backup-list span {
    font-weight: 750;
    overflow-wrap: anywhere;
}

.system-backup-list em,
.system-backup-list p {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.system-reset-card {
    border-color: #f2b8ad;
    background: linear-gradient(180deg, #fff 0%, #fff8f6 100%);
}

.system-reset-backup {
    margin: 14px 0;
}

.system-reset-card .notice.danger {
    margin: 14px 0 0;
}

@media (max-width: 760px) {
    .system-backup-list > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.system-save-actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.system-risk-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    border: 1px solid #f0d8d8;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    padding: 10px 12px;
}

.system-risk-check input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
}

.system-risk-check span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.system-metric-text {
    font-size: 16px;
    line-height: 1.35;
}

.audit-log-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.audit-log-filter-form {
    display: grid;
    gap: 12px;
}

.audit-log-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.audit-log-table {
    min-width: 1280px;
}

.audit-log-table td > strong,
.audit-log-table td > .type-pill,
.audit-log-table td > .status-pill {
    display: inline-flex;
}

.audit-log-table td > strong {
    display: block;
}

.audit-log-table td > em {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    font-style: normal;
}

.audit-action-pill.is-create {
    background: #e7f5ee;
    color: #1f8a5b;
}

.audit-action-pill.is-update {
    background: #e6f0fa;
    color: #286ca8;
}

.audit-action-pill.is-danger {
    background: #fde7e3;
    color: #b84238;
}

.audit-action-pill.is-route {
    background: #eee8fb;
    color: #7654b7;
}

.audit-action-pill.is-neutral {
    background: #eff4f8;
    color: #5c6976;
}

.audit-log-request {
    max-width: 300px;
}

.audit-log-detail-cell {
    min-width: 260px;
}

.audit-log-detail {
    min-width: 0;
}

.audit-log-detail > summary {
    cursor: pointer;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    list-style: none;
}

.audit-log-detail > summary::-webkit-details-marker {
    display: none;
}

.audit-log-detail-copy {
    display: grid;
    gap: 3px;
    margin-top: 10px;
}

.audit-log-detail-copy strong {
    color: var(--ink);
    font-size: 12px;
}

.audit-log-detail-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.audit-log-payload {
    margin: 10px 0 0;
    border: 1px solid rgba(18, 24, 32, 0.12);
    border-radius: var(--radius);
    background: #0f1720;
    color: #edf5fd;
    padding: 12px;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

.data-field-table {
    min-width: 1080px;
}

.formula-token-table {
    min-width: 980px;
}

.data-field-table td > strong,
.data-field-table td > .field-capability-list,
.formula-token-table td > strong,
.formula-token-table td > .field-capability-list {
    display: block;
}

.data-field-table td > em,
.formula-token-table td > em {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.identity-schema-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.identity-schema-card {
    display: grid;
    grid-template-columns: minmax(170px, 0.72fr) minmax(340px, 1.35fr) minmax(230px, 0.88fr) minmax(150px, 0.62fr) auto;
    gap: 14px;
    align-items: stretch;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d7e6f0;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fcff 100%);
    box-shadow: 0 14px 32px rgba(15, 43, 73, 0.05);
}

.identity-schema-card.identity-team-row {
    border-color: #b7dcf5;
    border-left: 4px solid var(--blue);
    background: linear-gradient(135deg, rgba(230, 248, 247, 0.82), rgba(247, 252, 255, 0.96));
}

.identity-schema-main,
.identity-schema-formulas,
.identity-schema-formula-block,
.identity-schema-rules,
.identity-schema-meta,
.identity-schema-actions {
    min-width: 0;
}

.identity-schema-kicker,
.identity-schema-formula-block > span,
.identity-schema-meta span {
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.identity-schema-main h3 {
    margin: 4px 0 6px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
}

.identity-schema-main p,
.identity-schema-main em,
.identity-schema-formula-block em,
.identity-schema-rules em,
.identity-schema-meta em {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.identity-schema-main p,
.identity-schema-main em {
    overflow-wrap: anywhere;
}

.identity-schema-formulas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.identity-schema-formula-block {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 12px;
    border: 1px solid #dfeaf4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
}

.identity-schema-formula-block code,
.identity-schema-formula-block strong {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.identity-schema-formula-block code {
    color: #174a78;
    font-size: 12px;
    line-height: 1.45;
}

.identity-schema-formula-block strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}

.identity-schema-rules {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dcecf8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbff, #ffffff);
}

.identity-schema-rules strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
}

.identity-rule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.identity-rule-chips span {
    padding: 4px 8px;
    border: 1px solid #cfe4f4;
    border-radius: 999px;
    background: #edf7ff;
    color: #1f5f95;
    font-size: 11px;
    font-weight: 850;
}

.identity-schema-meta {
    display: grid;
    align-content: start;
    gap: 8px;
}

.identity-schema-meta > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #dfeaf4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.identity-schema-meta strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.identity-schema-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.identity-schema-actions .table-action {
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .identity-schema-card {
        grid-template-columns: minmax(170px, 0.8fr) minmax(320px, 1.3fr) minmax(220px, 0.9fr);
    }

    .identity-schema-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .identity-schema-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .identity-schema-card,
    .identity-schema-formulas,
    .identity-schema-meta {
        grid-template-columns: 1fr;
    }
}

.identity-formula-modal-layout .admin-summary-card h3 {
    font-size: 18px;
    line-height: 1.25;
    word-break: break-word;
}

.identity-formula-preview-name {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.identity-formula-trace {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.identity-formula-trace-item {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #f7fbff;
}

.identity-formula-trace-token {
    color: #1f5f95;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.identity-formula-trace-value {
    color: var(--text);
    font-size: 12px;
    line-height: 1.45;
}

.identity-formula-trace-empty {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.identity-formula-live-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.identity-formula-live-card {
    display: grid;
    gap: 8px;
    border: 1px solid #d6e4f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    padding: 14px 16px;
}

.identity-formula-live-card > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.identity-formula-live-card > strong {
    color: var(--blue);
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
}

.identity-formula-live-card > em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}

.identity-formula-rule-cell strong {
    display: block;
}

.identity-formula-field-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 14px;
    margin-top: 16px;
}

.identity-field-rule-table {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.identity-field-rule-head,
.identity-field-rule-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 12px;
    align-items: center;
}

.identity-field-rule-head {
    padding: 0 4px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.identity-field-rule-row {
    padding: 12px;
    border: 1px solid #d7e4ef;
    border-radius: 16px;
    background: #fff;
}

.identity-field-rule-row.is-required {
    border-color: #9ec2e3;
    box-shadow: 0 10px 24px rgba(28, 77, 119, 0.08);
}

.identity-field-rule-row.is-auto-required {
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.identity-field-rule-main strong,
.identity-field-rule-main em,
.identity-field-rule-status em {
    display: block;
}

.identity-field-rule-main em,
.identity-field-rule-status em {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.identity-field-rule-status .type-pill.is-info {
    background: #e8f3ff;
    color: #1d5f97;
}

.identity-field-rule-row .compact-toggle {
    margin: 0;
}

.identity-field-rule-row .compact-toggle > span {
    gap: 2px;
}

.identity-token-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.identity-token-chip {
    border: 1px solid #c9daea;
    border-radius: 999px;
    background: #f5f9fd;
    color: #1f5f95;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 9px 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.identity-token-chip:hover {
    border-color: #8ebbe0;
    box-shadow: 0 10px 24px rgba(20, 57, 93, 0.1);
    transform: translateY(-1px);
}

.identity-formula-token-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 14px;
    margin-top: 16px;
}

#identityFormulaModal.system-token-modal {
    width: min(1440px, calc(100vw - 48px));
    top: 36px;
    max-height: calc(100vh - 64px);
}

#identityFormulaModal .modal-header {
    padding: 18px 24px 16px;
}

#identityFormulaModal .admin-modal-layout.identity-formula-modal-layout {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    gap: 20px;
    padding: 18px 24px 0;
}

#identityFormulaModal .admin-modal-aside {
    align-self: start;
}

#identityFormulaModal .identity-formula-field-panel {
    padding: 16px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(239, 248, 255, 0.86), rgba(255, 255, 255, 0.96) 48%, rgba(242, 251, 247, 0.8));
}

#identityFormulaModal .identity-field-rule-table {
    gap: 12px;
}

#identityFormulaModal .identity-field-rule-head,
#identityFormulaModal .identity-field-rule-row {
    grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 0.72fr) minmax(170px, 0.82fr) minmax(170px, 0.82fr);
    gap: 12px;
}

#identityFormulaModal .identity-field-rule-head {
    padding: 0 12px 2px;
    color: #556579;
}

#identityFormulaModal .identity-field-rule-row {
    align-items: stretch;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(11, 55, 91, 0.05);
}

#identityFormulaModal .identity-field-rule-main,
#identityFormulaModal .identity-field-rule-status {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#identityFormulaModal .identity-field-rule-main strong {
    font-size: 13px;
    line-height: 1.25;
}

#identityFormulaModal .identity-field-rule-main em,
#identityFormulaModal .identity-field-rule-status em {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.38;
}

#identityFormulaModal .identity-field-rule-row .compact-toggle {
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
}

#identityFormulaModal .identity-field-rule-row .compact-toggle input {
    margin-top: 0;
}

#identityFormulaModal .identity-field-rule-row .compact-toggle > span {
    min-width: 0;
    gap: 3px;
}

#identityFormulaModal .identity-field-rule-row .compact-toggle strong {
    font-size: 12px;
    line-height: 1.2;
}

#identityFormulaModal .identity-field-rule-row .compact-toggle em {
    font-size: 11px;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

#identityFormulaModal .modal-actions {
    padding: 13px 24px 16px;
}

.formula-token-modal-layout .admin-summary-card h3 {
    font-size: 18px;
    line-height: 1.25;
    word-break: break-word;
}

.formula-token-modal-layout .admin-summary-card > span:last-child {
    line-height: 1.5;
}

.field-capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-pill.is-draft {
    background: #fff4d8;
    color: #8a5a00;
}

.status-pill.is-hidden {
    background: #eef2f7;
    color: #526173;
}

@media (max-width: 860px) {
    .system-form-grid {
        grid-template-columns: 1fr;
    }

    .system-field-span-2 {
        grid-column: auto;
    }

    .system-token-modal {
        left: 8px;
        right: 8px;
        top: 16px;
        width: auto;
        max-height: calc(100vh - 32px);
        transform: none;
    }

    #identityFormulaModal.system-token-modal {
        left: 8px;
        right: 8px;
        top: 16px;
        width: auto;
        max-height: calc(100vh - 32px);
        transform: none;
    }

    .system-token-modal .modal-header {
        padding: 14px 14px 12px;
    }

    .system-token-modal .admin-modal-layout {
        padding: 14px 14px 0;
    }

    #identityFormulaModal .admin-modal-layout.identity-formula-modal-layout {
        grid-template-columns: 1fr;
        padding: 14px 14px 0;
    }

    .system-token-modal .modal-actions {
        padding: 12px 14px 14px;
    }

    #identityFormulaModal .modal-actions {
        padding: 12px 14px 14px;
    }

    .system-save-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .system-save-actions {
        justify-items: stretch;
    }

    .system-risk-check {
        max-width: none;
    }

    .system-save-bar .modal-actions {
        width: 100%;
        justify-content: stretch;
    }

    .system-save-bar .modal-actions .secondary-button,
    .system-save-bar .modal-actions .primary-button {
        flex: 1 1 0;
    }

    .system-field-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-toggle {
        grid-template-columns: 1fr;
    }

    .admin-modal-layout,
    .permission-card-grid {
        grid-template-columns: 1fr;
    }

    .identity-formula-live-panel {
        grid-template-columns: 1fr;
    }

    .identity-field-rule-head {
        display: none;
    }

    #identityFormulaModal .identity-field-rule-head {
        display: none;
    }

    .identity-field-rule-row {
        grid-template-columns: 1fr;
    }

    #identityFormulaModal .identity-field-rule-row {
        grid-template-columns: 1fr;
    }

    .admin-modal-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .admin-tab-button {
        flex: 0 0 auto;
    }

    .product-create-part-layout {
        grid-template-columns: 1fr;
    }

    .product-create-form-modal .form-zone[data-create-section="identity"] {
        grid-template-columns: 1fr;
    }

    .product-create-form-modal .form-zone[data-create-section="identity"] > label {
        grid-column: 1 / -1;
    }

    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] > label,
    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"] > label.span-6 {
        grid-column: 1 / -1;
    }

    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-reporting"] > label,
    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > label,
    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > .toggle-field,
    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] > label.span-4,
    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] > .material-usage-card.span-4,
    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-texture"] > .product-create-texture-state-note.span-4,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-reporting"] > label,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > label,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] > .toggle-field,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] > label.span-4,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] > .material-usage-card.span-4,
    .product-create-modal.is-type-purchased .product-create-form-modal .form-zone[data-create-section="raw-texture"] > .product-create-texture-state-note.span-4,
    .product-create-modal.is-type-service .product-create-form-modal .form-zone[data-create-section="raw-reporting"] > label {
        grid-column: 1 / -1;
    }

    .product-create-modal.is-type-raw-material .product-create-form-modal .form-zone[data-create-section="raw-capabilities"] .raw-capability-extra-field {
        grid-column: 1 / -1;
    }

    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-surface"],
    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="part-pvc"],
    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="placement"],
    .product-create-modal.is-type-part .product-create-form-modal .form-zone[data-create-section="reporting"] {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .product-create-surface-mode-grid {
        grid-template-columns: 1fr;
    }
}

/* Costing */

.costing-metric-strip,
.compare-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.costing-metric-strip.is-compact {
    gap: 9px;
    margin-bottom: 10px;
}

.costing-metric-strip.is-compact .metric-card {
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(18, 48, 74, 0.04);
}

.costing-metric-strip.is-compact .metric-card strong {
    font-size: 18px;
}

.costing-metric-strip.is-compact .metric-card span,
.costing-metric-strip.is-compact .metric-card small {
    font-size: 11px;
}

.costing-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.cost-set-workspace {
    grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
    align-items: start;
}

.cost-set-workspace .costing-table-panel,
.cost-set-workspace .costing-summary-panel {
    padding: 16px;
}

.cost-set-workspace .costing-summary-panel {
    max-height: calc(100vh - 118px);
    overflow: auto;
}

.compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.costing-table-panel,
.costing-summary-panel,
.costing-item-detail,
.compare-form-panel,
.compare-insight-panel,
.compare-card {
    min-width: 0;
}

.costing-table .record-link {
    font-weight: 800;
}

.costing-table td strong,
.costing-table td small {
    display: block;
}

.costing-table td small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.cost-set-workspace .costing-table-panel .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.cost-set-workspace .costing-table-panel .costing-table {
    display: grid;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
}

.cost-set-workspace .costing-table-panel .costing-table thead {
    display: none;
}

.cost-set-workspace .costing-table-panel .costing-table tbody {
    display: grid;
    gap: 10px;
}

.cost-set-workspace .costing-table-panel .costing-table tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dce8f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(18, 48, 74, 0.06);
}

.cost-set-workspace .costing-table-panel .costing-table tr.is-current-row {
    border-color: #8bc8ef;
    background:
        linear-gradient(90deg, rgba(24, 140, 214, 0.1), transparent 48%),
        #fff;
    box-shadow: 0 16px 34px rgba(20, 111, 181, 0.11);
}

.cost-set-workspace .costing-table-panel .costing-table td {
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(1) {
    grid-column: 1;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(1) .record-link {
    color: #176fa9;
    font-size: 12px;
    letter-spacing: 0.01em;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(2) {
    grid-column: 1;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(2) strong {
    overflow: hidden;
    color: #142235;
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(3) {
    display: flex;
    grid-column: 1;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(4),
.cost-set-workspace .costing-table-panel .costing-table td:nth-child(6) {
    justify-self: end;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(4)::before {
    content: "Urun";
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    color: #142235;
    font-size: 18px;
    font-weight: 900;
    text-align: right;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(4)::before,
.cost-set-workspace .costing-table-panel .costing-table td:nth-child(5)::before,
.cost-set-workspace .costing-table-panel .costing-table td:nth-child(7)::before {
    display: block;
    margin-bottom: 2px;
    color: #6b7d8e;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
    color: #142235;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(5)::before {
    content: "Toplam";
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(7) {
    grid-column: 1;
    color: #5b7083;
    font-size: 12px;
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(7)::before {
    content: "Tarih";
}

.cost-set-workspace .costing-table-panel .costing-table td:nth-child(8) {
    grid-column: 2;
    align-self: end;
    justify-self: end;
}

.cost-set-workspace .costing-table-panel .costing-table .secondary-button {
    min-height: 34px;
    padding: 8px 12px;
}

.cost-set-workspace .costing-table-panel .empty-cell {
    display: block;
    padding: 18px;
    border: 1px dashed #bfd0df;
    border-radius: 14px;
    color: #637789;
    background: #f8fbfd;
    text-align: center;
}

.cost-set-workspace .costing-summary-panel > .section-heading:first-child {
    align-items: start;
    padding: 16px;
    border: 1px solid #dce8f1;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(33, 123, 180, 0.08), transparent 48%),
        #fff;
}

.cost-set-workspace .costing-summary-panel > .section-heading:first-child h2 {
    max-width: 720px;
    margin: 0;
    font-size: 22px;
    line-height: 1.18;
}

.cost-set-workspace .costing-summary-panel > .section-heading:first-child .badge,
.cost-set-workspace .costing-summary-panel > .section-heading:first-child .state-pill {
    flex: 0 0 auto;
}

.costing-summary-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.costing-summary-cards article {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 78px;
    padding: 12px;
    border: 1px solid #dce8f1;
    border-radius: 14px;
    background: #f8fbfd;
}

.costing-summary-cards article.critical {
    border-color: #f0c5bf;
    background: var(--red-soft);
}

.costing-summary-cards span {
    color: #66798a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.costing-summary-cards strong {
    overflow-wrap: anywhere;
    color: #142235;
    font-size: 17px;
    line-height: 1.2;
}

.cost-set-workspace .scenario-reference-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-set-workspace .scenario-reference-grid article {
    min-height: 78px;
}

.cost-set-workspace .compact-table-wrap {
    max-height: min(620px, calc(100vh - 520px));
    min-height: 320px;
    overflow: auto;
    border: 1px solid #dce8f1;
    border-radius: 16px;
}

.cost-set-workspace .costing-summary-panel .costing-table {
    min-width: 920px;
    table-layout: fixed;
}

.cost-set-workspace .costing-summary-panel .costing-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f8fb;
}

.cost-set-workspace .costing-summary-panel .costing-table th,
.cost-set-workspace .costing-summary-panel .costing-table td {
    padding: 10px 12px;
    vertical-align: middle;
}

.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(1),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(1) {
    width: 34%;
}

.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(2),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(2) {
    width: 11%;
}

.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(3),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(3),
.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(4),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(4),
.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(5),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(5) {
    width: 15%;
    text-align: right;
}

.cost-set-workspace .costing-summary-panel .costing-table th:nth-child(6),
.cost-set-workspace .costing-summary-panel .costing-table td:nth-child(6) {
    width: 10%;
    text-align: right;
}

.cost-set-workspace .costing-summary-panel .costing-table td:first-child strong,
.cost-set-workspace .costing-summary-panel .costing-table td:first-child small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cost-set-sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px;
    border: 1px solid #dce8f1;
    border-radius: 12px;
    background: #f7fbfe;
}

.cost-set-sortbar > span {
    margin-right: auto;
    color: #65798c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-set-sortbar .sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #d6e5f0;
    border-radius: 10px;
    background: #fff;
    color: #24445f;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.cost-set-selector {
    display: grid;
    gap: 12px;
}

.cost-set-tile {
    position: relative;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d9e7f2;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(28, 116, 177, 0.07), transparent 42%),
        #fff;
    color: #142235;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(18, 48, 74, 0.07);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cost-set-tile:hover,
.cost-set-tile.is-selected {
    transform: translateY(-1px);
    border-color: #75b8e6;
    box-shadow: 0 18px 36px rgba(18, 93, 151, 0.13);
}

.cost-set-tile.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #1682c5;
}

.cost-set-tile__badge {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e7f7ee;
    color: #087348;
    font-size: 11px;
    font-weight: 900;
}

.cost-set-tile__code {
    color: #176fa9;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.cost-set-tile strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.25;
}

.cost-set-tile small {
    display: block;
    color: #65798c;
    font-size: 12px;
    line-height: 1.45;
}

.cost-set-tile__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cost-set-tile__metrics span {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid #e1ebf3;
    border-radius: 12px;
    background: #f8fbfd;
    color: #65798c;
    font-size: 11px;
    font-weight: 800;
}

.cost-set-tile__metrics b {
    color: #142235;
    font-size: 15px;
}

.cost-set-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #65798c;
    font-size: 12px;
    font-weight: 750;
}

.cost-set-tile__foot em {
    color: #087348;
    font-style: normal;
    font-weight: 900;
}

.cost-set-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #d9e7f2;
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 15%, rgba(37, 128, 185, 0.13), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f5fbff 58%, #fffaf1 100%);
    box-shadow: 0 18px 40px rgba(18, 48, 74, 0.08);
}

.cost-set-detail-hero h2 {
    margin: 0;
    max-width: 860px;
    color: #102132;
    font-size: 26px;
    line-height: 1.14;
    overflow-wrap: anywhere;
}

.cost-set-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.cost-set-detail-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid #d6e5f0;
    border-radius: 999px;
    background: #fff;
    color: #426174;
    font-size: 12px;
    font-weight: 850;
}

.cost-set-total-card {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #cde5d9;
    border-radius: 16px;
    background: #f4fbf7;
    text-align: right;
}

.cost-set-total-card strong {
    color: #0f2a1f;
    font-size: 24px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.cost-set-total-card small {
    color: #607586;
    font-size: 12px;
    font-weight: 850;
}

.cost-set-item-deck {
    display: grid;
    gap: 10px;
    max-height: min(680px, calc(100vh - 510px));
    min-height: 340px;
    overflow: auto;
    padding-right: 6px;
}

.cost-set-item-card {
    display: grid;
    grid-template-columns: minmax(230px, 1.05fr) minmax(180px, 0.72fr) minmax(420px, 1.35fr) minmax(92px, auto);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #dce8f1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(18, 48, 74, 0.05);
}

.cost-set-item-card.is-warning {
    border-color: #efd3a8;
    background: #fffaf1;
}

.cost-set-item-card__product {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cost-set-item-card__product > span {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef5fb;
    color: #35627f;
    font-size: 11px;
    font-weight: 900;
}

.cost-set-item-card__product strong {
    color: #142235;
    font-size: 14px;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.cost-set-item-card__product small {
    color: #76889a;
    font-size: 11px;
    font-weight: 750;
}

.cost-set-item-card__method {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e2ebf3;
    border-radius: 12px;
    background: #f8fbfd;
}

.cost-set-item-card__method span {
    color: #6f8192;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-set-item-card__method strong {
    color: #172233;
    font-size: 13px;
    font-weight: 950;
}

.cost-set-item-card__method small {
    color: #65788c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cost-set-item-card__values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.cost-set-item-card__values span,
.cost-set-item-card__values strong {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    border-radius: 12px;
    background: #f8fbfd;
    color: #142235;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
}

.cost-set-item-card__values b {
    color: #6f8192;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-set-item-card__values strong {
    background: #edf8f2;
    color: #0f5d3f;
}

.cost-set-item-card__state {
    justify-self: end;
}

.cost-set-legacy-table[hidden],
.cost-set-legacy-heading[hidden],
.cost-set-legacy-items[hidden] {
    display: none !important;
}

.is-current-row {
    background: #f3f8fc;
}

.state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
}

.state-ready,
.state-calculated {
    background: var(--green-soft);
    color: var(--green);
}

.state-review,
.state-draft {
    background: var(--amber-soft);
    color: var(--amber);
}

.state-blocked,
.state-deleted {
    background: var(--red-soft);
    color: var(--red);
}

.live-sales-formula-panel {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-color: #cfe6dc;
    background: #fbfdff;
}

.live-sales-formula-panel > .section-heading {
    padding: 10px 12px;
    border: 1px solid #d9e8f2;
    border-radius: 10px;
    background: #fff;
}

.live-sales-formula-panel > .section-heading h2 {
    margin: 0;
    color: #0d2538;
    font-size: 18px;
    line-height: 1.15;
}

.live-sales-formula-panel .compact-button {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 9px;
    white-space: nowrap;
}

.live-sales-token-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 8px;
    border: 1px dashed #bed9eb;
    border-radius: 10px;
    background: #f8fbfd;
}

.live-sales-rule-note {
    padding: 9px 11px;
    border: 1px solid #cde7f8;
    border-radius: 10px;
    background: #f3fbff;
    color: #33576f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.live-sales-token-strip button,
.live-sales-modal-tokens button {
    padding: 4px 8px;
    border: 1px solid #d8ebf8;
    border-radius: 999px;
    background: #eef8ff;
    color: #0d6ea8;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.live-sales-token-strip button:hover,
.live-sales-modal-tokens button:hover,
.live-sales-token-strip button:focus-visible,
.live-sales-modal-tokens button:focus-visible {
    background: #dff2ff;
    border-color: #8ccdf4;
    color: #075985;
    transform: translateY(-1px);
}

.live-sales-formula-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: start;
}

.live-sales-formula-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #d7e6f2;
    border-left: 3px solid var(--live-sales-color, #0ea5e9);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.live-sales-formula-card.is-new {
    border-left-color: #1f8a5b;
    background: #f8fffb;
}

.live-sales-formula-card:not(.is-new) {
    position: relative;
    grid-template-columns: minmax(132px, 178px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 52px 10px 12px;
}

.live-sales-formula-card-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: start;
}

.live-sales-formula-card-head h3 {
    margin: 0;
    color: #0d2538;
    font-size: 14px;
    line-height: 1.2;
}

.live-sales-formula-card-head .eyebrow,
.live-sales-formula-card-head h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-sales-formula-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.live-sales-formula-card.is-new .live-sales-formula-form {
    grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1fr) 90px 90px minmax(260px, 1.6fr) auto;
    align-items: end;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-card-head {
    display: grid;
    gap: 4px;
    align-content: start;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form {
    grid-template-columns: minmax(112px, 0.85fr) minmax(220px, 1.25fr) 58px 68px minmax(122px, 0.85fr) 38px;
    align-items: end;
    gap: 8px;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(4) {
    grid-column: 4;
    grid-row: 1;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(5) {
    grid-column: 5;
    grid-row: 1;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > .is-wide {
    grid-column: 1 / 6;
    grid-row: 2;
}

.live-sales-formula-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.live-sales-formula-form label > span:first-child {
    color: #4f6678;
    font-size: 10px;
    font-weight: 900;
}

.live-sales-formula-form input,
.live-sales-formula-form select,
.live-sales-formula-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d5e4f1;
    border-radius: 9px;
    background: #fff;
    color: #0d2538;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

.live-sales-formula-form input {
    min-height: 29px;
    padding: 5px 8px;
}

.live-sales-formula-form select {
    min-height: 29px;
    padding: 5px 7px;
}

.live-sales-formula-form input[type="color"] {
    padding: 3px;
}

.live-sales-formula-form textarea {
    min-height: 42px;
    padding: 8px 10px;
    resize: vertical;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form textarea {
    min-height: 44px;
}

.live-sales-formula-form .is-wide,
.live-sales-formula-actions {
    grid-column: auto;
}

.live-sales-formula-form .checkbox-line {
    display: flex;
    grid-column: 1 / -2;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 0 8px;
    border: 1px solid #e2edf5;
    border-radius: 9px;
    background: #f8fbfd;
    font-size: 11px;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form .checkbox-line,
.live-sales-formula-card:not(.is-new) .live-sales-formula-actions {
    grid-column: auto;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form .checkbox-line {
    overflow: hidden;
    white-space: nowrap;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(7) {
    grid-column: 1 / 3;
    grid-row: 3;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(8) {
    grid-column: 3 / 6;
    grid-row: 3;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-actions {
    grid-column: 6;
    grid-row: 2 / 4;
    align-self: stretch;
}

.live-sales-formula-form .is-display-toggle span,
.live-sales-modal-grid .is-display-toggle span {
    font-size: 0;
}

.live-sales-formula-form .is-display-toggle span::after,
.live-sales-modal-grid .is-display-toggle span::after {
    content: "Urun/arsivde goster";
    font-size: 11px;
}

.live-sales-formula-form .checkbox-line input {
    flex: 0 0 16px;
    width: 16px;
    min-height: 16px;
}

.live-sales-formula-actions,
.live-sales-delete-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.live-sales-formula-card:not(.is-new) .live-sales-delete-form {
    position: absolute;
    top: 50%;
    right: 10px;
    grid-column: auto;
    display: grid;
    align-content: center;
    margin-top: 0;
    padding-top: 0;
    transform: translateY(-50%);
}

.live-sales-formula-card:not(.is-new) .live-sales-delete-form .danger-button {
    width: 36px;
    min-width: 36px;
    padding-inline: 0;
    overflow: hidden;
    white-space: nowrap;
}

.live-sales-formula-card:not(.is-new) .live-sales-delete-form .danger-button svg {
    margin-right: 0;
}

.live-sales-formula-card:not(.is-new) .live-sales-delete-form .danger-button {
    font-size: 0;
}

.live-sales-formula-card:not(.is-new) .live-sales-delete-form .danger-button svg {
    font-size: 12px;
}

.live-sales-formula-actions .primary-button,
.live-sales-delete-form .danger-button {
    min-height: 30px;
    padding: 6px 10px;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-actions .primary-button {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
    font-size: 0;
}

.live-sales-formula-card:not(.is-new) .live-sales-formula-actions .primary-button svg {
    margin-right: 0;
}

.live-sales-formula-modal {
    max-width: 680px;
}

.live-sales-modal-form {
    display: grid;
    gap: 12px;
}

.live-sales-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px 92px;
    gap: 9px;
    padding: 0 16px 16px;
}

.live-sales-modal-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.live-sales-modal-grid label > span:first-child {
    color: #52677a;
    font-size: 12px;
    font-weight: 900;
}

.live-sales-modal-grid input,
.live-sales-modal-grid select,
.live-sales-modal-grid textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d5e4f1;
    border-radius: 10px;
    background: #fff;
    color: #0d2538;
    font: inherit;
    font-weight: 800;
}

.live-sales-modal-grid input {
    min-height: 34px;
    padding: 7px 9px;
}

.live-sales-modal-grid select {
    min-height: 34px;
    padding: 7px 9px;
}

.live-sales-modal-grid input[type="color"] {
    padding: 4px;
}

.live-sales-modal-grid textarea {
    min-height: 96px;
    padding: 9px 10px;
    resize: vertical;
}

.live-sales-modal-grid .is-wide,
.live-sales-modal-tokens {
    grid-column: 1 / -1;
}

.live-sales-modal-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px;
    border: 1px dashed #c9ddec;
    border-radius: 10px;
    background: #f8fbfd;
}

.live-sales-modal-grid .checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dfeaf3;
    border-radius: 10px;
    background: #f8fbfd;
}

.live-sales-modal-grid .checkbox-line input {
    flex: 0 0 16px;
    width: 16px;
    min-height: 16px;
}

@media (max-width: 1180px) {
    .live-sales-formula-grid {
        grid-template-columns: 1fr;
    }

    .live-sales-formula-card.is-new,
    .live-sales-formula-card:not(.is-new) {
        position: static;
        grid-column: 1;
    }

    .live-sales-formula-card:not(.is-new) {
        grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
        padding-right: 52px;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form {
        grid-template-columns: minmax(108px, 0.9fr) minmax(170px, 1.2fr) 58px 64px minmax(110px, 0.9fr) 38px;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(4) {
        grid-column: 4;
        grid-row: 1;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(5) {
        grid-column: 5;
        grid-row: 1;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > .is-wide {
        grid-column: 1 / 6;
        grid-row: 2;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(7) {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(8) {
        grid-column: 3 / 6;
        grid-row: 3;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-actions {
        grid-column: 6;
        grid-row: 2 / 4;
    }
}

@media (max-width: 760px) {
    .live-sales-formula-panel {
        padding: 12px;
    }

    .live-sales-formula-card:not(.is-new) {
        grid-template-columns: 1fr;
        padding-right: 10px;
    }

    .live-sales-formula-card.is-new .live-sales-formula-form,
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form {
        grid-template-columns: 1fr;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(1),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(2),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(3),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(4),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(5),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(7),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > label:nth-of-type(8),
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form > .is-wide,
    .live-sales-formula-card:not(.is-new) .live-sales-formula-form .checkbox-line,
    .live-sales-formula-card:not(.is-new) .live-sales-formula-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .live-sales-formula-card:not(.is-new) .live-sales-delete-form {
        position: static;
        grid-column: 1;
        justify-self: end;
        margin-top: 0;
        padding-top: 0;
        transform: none;
    }
}

.standard-cost-hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.8fr) minmax(620px, 1.2fr);
    gap: 18px;
    align-items: stretch;
    border-color: #cfe6dc;
    background:
        radial-gradient(circle at 7% 12%, rgba(31, 138, 91, 0.13), transparent 28%),
        linear-gradient(135deg, #f7fffb 0%, #eef8ff 52%, #fffaf2 100%);
}

.standard-cost-hero > div:first-child {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.standard-cost-hero h2 {
    margin: 0;
    color: #0d2538;
    font-size: 30px;
    line-height: 1.08;
}

.standard-cost-hero span {
    color: #5d7283;
    line-height: 1.55;
}

.standard-cost-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.standard-cost-summary article {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    border: 1px solid #d8e8f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
}

.standard-cost-summary article span,
.standard-cost-summary article em {
    color: #617485;
    font-size: 12px;
    line-height: 1.35;
}

.standard-cost-summary article strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 20px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-cost-panel {
    min-width: 0;
}

.standard-cost-live-control {
    display: grid;
    gap: 14px;
    min-width: 0;
    border-color: #cfe6dc;
    background:
        radial-gradient(circle at 92% 18%, rgba(31, 138, 91, 0.1), transparent 24%),
        linear-gradient(135deg, #fbfffd 0%, #f6fbff 58%, #fffaf4 100%);
}

.standard-cost-live-control .section-heading {
    align-items: center;
}

.standard-cost-live-control .inline-form {
    justify-content: flex-end;
    max-width: 100%;
}

.live-queue-runner-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #cfe4f4;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(238, 248, 255, 0.9), rgba(255, 255, 255, 0.9));
}

.live-queue-runner-status strong {
    color: #0d2538;
    font-size: 14px;
    white-space: nowrap;
}

.live-queue-runner-status span {
    overflow: hidden;
    color: #607586;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-queue-runner-status.is-running {
    border-color: #8ec9ef;
    background: linear-gradient(135deg, rgba(232, 247, 255, 0.96), rgba(242, 255, 249, 0.96));
    box-shadow: inset 4px 0 0 #1f7bbb;
}

.live-queue-runner-status.is-done {
    border-color: #9bd8b8;
    box-shadow: inset 4px 0 0 #1f8a5b;
}

.live-queue-runner-status.is-error {
    border-color: #ffc7bd;
    box-shadow: inset 4px 0 0 #d8483e;
}

.queue-inline-filter {
    min-width: 150px;
}

.queue-inline-filter select {
    min-width: 150px;
}

.standard-cost-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.standard-cost-live-grid article {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #d8e8f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
}

.standard-cost-live-grid span,
.standard-cost-live-grid em {
    overflow: hidden;
    color: #607586;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-cost-live-grid strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 18px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-cost-queue-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px dashed #bdd8eb;
    border-radius: 16px;
    background: rgba(238, 248, 255, 0.65);
}

.standard-cost-queue-preview div,
.standard-cost-queue-preview > em {
    display: grid;
    gap: 2px;
    max-width: 260px;
    padding: 9px 11px;
    border: 1px solid #d7e8f5;
    border-radius: 13px;
    background: #fff;
}

.standard-cost-queue-preview strong,
.standard-cost-queue-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-cost-queue-preview strong {
    color: #0d2538;
    font-size: 13px;
}

.standard-cost-queue-preview span,
.standard-cost-queue-preview > em {
    color: #5b7284;
    font-size: 12px;
}

.live-queue-run-log {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #d8e8f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.live-queue-run-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.live-queue-run-log-head h3 {
    margin: 0;
    color: #0d2538;
    font-size: 18px;
}

.live-queue-run-log-head > span {
    color: #607586;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.live-queue-run-log-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 9px;
    min-width: 0;
}

.live-queue-run-log-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #dcebf5;
    border-radius: 14px;
    background: #fff;
}

.live-queue-run-log-item strong {
    overflow: hidden;
    color: #0d2538;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-queue-run-log-item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.live-queue-run-log-item span {
    overflow: hidden;
    color: #607586;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-queue-empty-log {
    padding: 12px;
    color: #607586;
    font-size: 13px;
}

.standard-cost-notification-list {
    display: grid;
    gap: 8px;
}

.live-cost-notification-center {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.live-cost-notification-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    color: #607586;
    font-size: 12px;
}

.live-cost-notification-score > div {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.live-cost-notification-score form {
    margin: 0;
}

.live-cost-notification-score .danger-button {
    min-height: 38px;
    white-space: nowrap;
}

.live-cost-notification-score strong {
    color: #0d2538;
    font-size: 18px;
}

.live-cost-notification-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 0.55fr) minmax(190px, 0.65fr) auto;
    gap: 12px;
    align-items: end;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dcebf5;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 138, 91, 0.08), transparent 30%),
        rgba(247, 252, 255, 0.9);
}

.live-cost-notification-filter label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.live-cost-notification-filter span {
    color: #5d6f81;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.live-cost-notification-filter input,
.live-cost-notification-filter select {
    width: 100%;
    min-width: 0;
}

.live-cost-notification-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.live-cost-notification-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.live-cost-notification-gate {
    border-style: dashed;
    background:
        radial-gradient(circle at 0% 0%, rgba(43, 123, 187, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(247, 252, 255, 0.98), rgba(255, 251, 243, 0.84));
    text-align: left;
}

.live-cost-notification {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(190px, 0.72fr) minmax(190px, 0.78fr) minmax(210px, 0.85fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #dce8f2;
    border-left-width: 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.live-cost-notification > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.live-cost-notification-main {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
}

.live-cost-notification-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cfe4f4;
    border-radius: 13px;
    background: #eef7ff;
    color: #1d6ba7;
}

.live-cost-notification-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.live-cost-notification strong,
.live-cost-notification b,
.live-cost-notification span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-cost-notification strong,
.live-cost-notification b {
    color: #0d2538;
}

.live-cost-notification span {
    color: #607586;
    font-size: 12px;
}

.live-cost-notification-source small {
    overflow: hidden;
    color: #8a9baa;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-cost-notification-actions {
    justify-items: end;
}

.live-cost-notification-actions em,
.live-cost-notification em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d6ba7;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.live-cost-notification-actions .table-action {
    width: max-content;
    white-space: nowrap;
}

.live-cost-notification-info {
    border-left-color: #2b7bbb;
}

.live-cost-notification-notice {
    border-left-color: #1f8a5b;
}

.live-cost-notification-warning {
    border-left-color: #c47a00;
}

.live-cost-notification-critical {
    border-left-color: #d8483e;
}

.live-queue-console {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #cfe4f4;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 138, 91, 0.08), transparent 28%),
        rgba(255, 255, 255, 0.8);
}

.live-queue-console-head {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, auto);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.live-queue-console-head h3 {
    margin: 0;
    color: #0d2538;
    font-size: 22px;
}

.live-queue-console-head span {
    color: #607586;
    line-height: 1.45;
}

.live-queue-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.live-queue-status-strip a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #d8e8f1;
    border-radius: 14px;
    background: #fff;
    color: #21384d;
    text-decoration: none;
}

.live-queue-status-strip a.is-active {
    border-color: #1f7bbb;
    background: #eef7ff;
    box-shadow: inset 3px 0 0 #1f7bbb;
}

.live-queue-status-strip span {
    overflow: hidden;
    color: #5e7182;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-queue-status-strip strong {
    color: #0d2538;
    font-size: 16px;
}

.live-queue-filter {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 0.75fr)) auto;
    gap: 10px;
    align-items: end;
    min-width: 0;
    padding: 11px;
    border: 1px solid #dcebf5;
    border-radius: 18px;
    background: rgba(247, 252, 255, 0.88);
}

.live-queue-filter label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.live-queue-filter span {
    color: #5d6f81;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.live-queue-filter input,
.live-queue-filter select {
    width: 100%;
    min-width: 0;
}

.live-queue-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.live-queue-table-form {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.live-queue-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.live-queue-table-toolbar strong {
    margin-right: auto;
    color: #0d2538;
}

.live-queue-table-toolbar span {
    color: #607586;
    font-size: 12px;
    font-weight: 800;
}

.live-queue-table-toolbar b {
    color: #0f73b7;
}

.live-queue-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.live-queue-bulk-actions .secondary-button,
.live-queue-bulk-actions .danger-button {
    min-height: 38px;
    white-space: nowrap;
}

.danger-button.subtle-danger {
    border-color: #ffd2c9;
    background: #fff7f4;
    color: #b83225;
}

.danger-button.subtle-danger:hover {
    border-color: #ffb5a6;
    background: #ffece7;
    color: #9f291f;
}

.live-queue-table-wrap {
    max-height: 460px;
    overflow: auto;
    border: 1px solid #d6e6f1;
    border-radius: 18px;
    background: #fff;
}

.live-queue-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.live-queue-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 13px;
    border-bottom: 1px solid #d9e6ef;
    background: #eef5fb;
    color: #5d6f81;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.live-queue-table td {
    min-width: 0;
    padding: 13px;
    border-bottom: 1px solid #e2edf4;
    vertical-align: middle;
}

.live-queue-table tbody tr:last-child td {
    border-bottom: 0;
}

.live-queue-table tbody tr {
    background: #fff;
}

.live-queue-table tbody tr.queue-row-failed {
    background: #fff8f2;
}

.live-queue-table tbody tr.queue-row-cancelled,
.live-queue-table tbody tr.queue-row-muted {
    background: #f8fafc;
    color: #778697;
}

.live-queue-table tbody tr.is-selected {
    background: linear-gradient(90deg, rgba(29, 128, 94, 0.1), #fff);
    box-shadow: inset 4px 0 0 #1c9b6b;
}

.queue-check-col {
    width: 62px;
    text-align: center;
}

.live-queue-select-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.live-queue-select-head input {
    width: 16px;
    height: 16px;
}

.live-queue-check {
    display: inline-grid;
    place-items: center;
}

.live-queue-check input {
    width: 16px;
    height: 16px;
}

.live-queue-product,
.live-queue-source,
.live-queue-time {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.live-queue-product strong,
.live-queue-source strong,
.live-queue-time strong,
.live-queue-product span,
.live-queue-source span,
.live-queue-source em,
.live-queue-time span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-queue-product strong,
.live-queue-source strong,
.live-queue-time strong {
    color: #0d2538;
    font-size: 13px;
}

.live-queue-product span,
.live-queue-source span,
.live-queue-time span,
.muted-small {
    color: #607586;
    font-size: 12px;
}

.live-queue-source em {
    color: #b35b00;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.queue-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.queue-status-queued {
    background: #eef7ff;
    color: #1468a8;
}

.queue-status-processing {
    background: #fff6df;
    color: #9c6400;
}

.queue-status-failed {
    background: #ffece8;
    color: #b93025;
}

.queue-status-done {
    background: #e8f8ef;
    color: #057247;
}

.queue-status-cancelled,
.queue-status-muted {
    background: #edf1f5;
    color: #667789;
}

@media (max-width: 1100px) {
    .standard-cost-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-queue-console-head,
    .live-queue-filter,
    .live-cost-notification-filter,
    .live-cost-notification {
        grid-template-columns: 1fr;
    }

    .live-queue-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-cost-notification-score,
    .live-cost-notification-actions {
        justify-content: flex-start;
        justify-items: start;
    }

    .live-header-queue-chip {
        left: 16px;
        right: 16px;
        top: 84px;
        width: auto;
    }

    .live-header-notification-popover {
        left: 16px;
        right: 16px;
        width: auto;
    }

    .live-header-notification-popover::before {
        right: 92px;
    }
}

.standard-cost-filter {
    grid-template-columns: minmax(280px, 1.35fr) minmax(150px, 0.7fr) minmax(180px, 0.85fr) minmax(150px, 0.7fr) auto;
    align-items: end;
}

.standard-cost-filter .material-price-list-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 210px;
}

.standard-cost-filter > strong {
    grid-column: 1 / -1;
    justify-self: start;
    color: #4f6678;
}

.standard-cost-table-wrap {
    max-height: 650px;
    overflow: auto;
    border: 1px solid #dce8f2;
    border-radius: 18px;
}

.standard-cost-table {
    min-width: 1480px;
    table-layout: fixed;
}

.standard-cost-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f3f8fc;
}

.standard-cost-table td,
.standard-cost-table th {
    vertical-align: top;
    overflow: hidden;
}

.standard-cost-table th:nth-child(1),
.standard-cost-table td:nth-child(1) { width: 25%; }
.standard-cost-table th:nth-child(2),
.standard-cost-table td:nth-child(2) { width: 11%; }
.standard-cost-table th:nth-child(3),
.standard-cost-table td:nth-child(3) { width: 9%; }
.standard-cost-table th:nth-child(4),
.standard-cost-table td:nth-child(4) { width: 11%; }
.standard-cost-table th:nth-child(5),
.standard-cost-table td:nth-child(5) { width: 12%; }
.standard-cost-table th:nth-child(6),
.standard-cost-table td:nth-child(6) { width: 17%; }
.standard-cost-table th:nth-child(7),
.standard-cost-table td:nth-child(7) { width: 8%; }
.standard-cost-table th:nth-child(8),
.standard-cost-table td:nth-child(8) { width: 9%; }

.standard-cost-product-cell,
.standard-cost-source-cell,
.standard-cost-status-cell,
.live-sales-price-cell {
    min-width: 0;
}

.standard-cost-code,
.standard-cost-product-cell strong,
.standard-cost-product-cell small,
.standard-cost-source-cell strong,
.standard-cost-source-cell small,
.live-sales-price-cell strong,
.live-sales-price-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.standard-cost-code {
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid #d9e8f7;
    border-radius: 999px;
    background: #f7fbff;
    color: #1165a8;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.standard-cost-product-cell strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.22;
    white-space: normal;
}

.standard-cost-product-cell small,
.standard-cost-source-cell strong,
.standard-cost-source-cell small,
.live-sales-price-cell strong,
.live-sales-price-cell small {
    white-space: nowrap;
}

.live-sales-price-cell {
    box-shadow: inset 4px 0 0 var(--live-sales-color, #0ea5e9);
}

.live-sales-price-cell strong {
    color: #075985;
}

.live-sales-price-cell small {
    margin-top: 4px;
    color: #607586;
}

.live-sales-results-button {
    display: inline-grid;
    grid-template-columns: 16px auto minmax(22px, auto);
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #cfe6f7;
    border-radius: 9px;
    background: #f7fbff;
    color: #075985;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.live-sales-results-button svg {
    width: 14px;
    height: 14px;
}

.live-sales-results-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-sales-results-button strong {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e3f3ff;
    color: #075985;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.live-sales-results-button:hover,
.live-sales-results-button:focus-visible {
    border-color: #8ccdf4;
    background: #eaf7ff;
}

.live-sales-price-cell .live-sales-results-button,
.product-live-sales-cell .live-sales-results-button,
.product-live-sales-metric .live-sales-results-button {
    width: max-content;
    max-width: 100%;
}

.product-live-sales-cell em,
.product-live-sales-metric em {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-modal.live-sales-results-modal {
    border-color: #d8e8f5;
    border-radius: 18px;
    left: 50%;
    max-width: 860px;
    overflow: hidden;
    padding: 0;
    top: clamp(20px, 7vh, 76px);
    transform: translateX(-50%);
    width: min(860px, calc(100vw - 32px));
}

.app-modal.live-sales-results-modal > .modal-header {
    margin: 0;
    padding: 22px 28px 18px;
    position: sticky;
    top: 0;
}

.app-modal.live-sales-results-modal > .modal-header h2 {
    font-size: 22px;
    line-height: 1.2;
    margin: 6px 0 4px;
}

.app-modal.live-sales-results-modal > .modal-header span {
    color: #334155;
    display: block;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
}

.app-modal.live-sales-results-modal > .modal-header .icon-button {
    flex: 0 0 auto;
    height: 44px;
    width: 44px;
}

.live-sales-results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 18px 28px 12px;
}

.live-sales-results-summary article {
    padding: 12px 14px;
    border: 1px solid #dceaf4;
    border-radius: 12px;
    background: #f8fbfd;
}

.live-sales-results-summary span,
.live-sales-result-row span,
.live-sales-result-row em {
    color: #607586;
    font-size: 12px;
}

.live-sales-results-summary strong,
.live-sales-result-row strong {
    display: block;
    color: #0d2538;
}

.live-sales-results-list {
    display: grid;
    gap: 10px;
    padding: 0 28px 28px;
}

.live-sales-result-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(140px, 0.55fr) minmax(220px, 1fr) minmax(118px, auto);
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid #dceaf4;
    border-left: 4px solid var(--live-sales-color, #0ea5e9);
    border-radius: 12px;
    background: #fff;
}

.live-sales-result-row .state-pill {
    min-width: 0;
    white-space: nowrap;
}

.live-sales-result-row code {
    overflow: hidden;
    padding: 9px 10px;
    border-radius: 8px;
    background: #f5f8fb;
    color: #22384a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .live-sales-results-summary,
    .live-sales-result-row {
        grid-template-columns: 1fr;
    }

    .live-sales-result-row code {
        white-space: normal;
    }
}

.standard-cost-product-cell > * + *,
.standard-cost-status-cell > * + * {
    margin-top: 6px;
}

.standard-cost-action-cell {
    overflow: visible;
}

.standard-cost-table .standard-cost-actions {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    justify-content: end;
    align-items: start;
    gap: 7px;
    min-width: 116px;
}

.standard-cost-actions form {
    display: contents;
}

.standard-cost-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid #d5e4f1;
    border-radius: 10px;
    background: #fff;
    color: #24364a;
    box-shadow: 0 10px 20px rgba(22, 54, 82, 0.06);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.standard-cost-action-button:hover {
    transform: translateY(-1px);
    border-color: #8bc0ec;
    background: #f3f9ff;
    color: #0f6fb5;
}

.standard-cost-action-button svg {
    width: 16px;
    height: 16px;
}

.standard-cost-table .is-warning-row {
    background: #fffaf2;
}

.scenario-reference-grid,
.cost-split-grid,
.compare-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.scenario-reference-grid article,
.cost-split-grid article,
.compare-summary-list div {
    display: grid;
    gap: 6px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.scenario-reference-grid span,
.cost-split-grid span,
.compare-summary-list span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

.scenario-reference-grid strong,
.cost-split-grid strong,
.compare-summary-list strong {
    font-size: 16px;
    line-height: 1.3;
}

.costing-readiness {
    margin: 16px 0;
}

.stack-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.stack-list > strong {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.stack-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 10px 12px;
}

.stack-item.warning {
    border-color: #f1d3aa;
    background: #fff8ef;
    color: #8a5d1d;
}

.empty-state-panel {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 220px;
    border: 1px dashed #bfd0df;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f8fbfd, #f2f7fa);
    padding: 28px;
    text-align: center;
}

.empty-state-panel.compact {
    min-height: auto;
    place-items: start;
    text-align: left;
}

.empty-state-panel strong {
    font-size: 18px;
}

.empty-state-panel span {
    max-width: 560px;
    color: var(--muted);
    line-height: 1.5;
}

.costing-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.detail-stack {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.detail-stack > strong {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(20, 25, 31, 0.08);
}

.detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.detail-row span {
    display: grid;
    gap: 4px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.detail-row span em {
    color: #1d6e9d;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.detail-row.warning {
    color: var(--amber);
}

.detail-row.success {
    color: var(--green);
    font-weight: 700;
}

.detail-row.empty {
    color: var(--muted);
}

.compare-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compare-form-grid .modal-actions {
    grid-column: 1 / -1;
    margin: 0;
}

.compare-insight-panel .stack-item {
    justify-content: flex-start;
}

.costing-modal {
    left: 50%;
    top: 72px;
    width: min(980px, calc(100vw - 28px));
    max-height: calc(100vh - 88px);
    overflow: hidden;
    transform: translateX(-50%);
}

.costing-modal.definition-modal {
    width: min(980px, calc(100vw - 28px));
    max-height: calc(100vh - 88px);
}

.costing-modal.definition-modal > .modal-header {
    margin: -16px -16px 0;
}

.costing-modal-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.costing-modal-form > .modal-form-grid {
    align-items: start;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    max-height: calc(100vh - 254px);
    overflow: auto;
    padding: 16px 4px 16px 0;
}

.costing-modal-form > .modal-actions {
    bottom: -16px;
    margin-top: 0;
}

.costing-modal .selected-product-panel {
    min-width: 0;
}

.costing-modal .checkbox-card {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 86px;
}

.costing-modal .modal-form-grid label.checkbox-card > span:first-child {
    display: grid;
    gap: 4px;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0;
}

.costing-modal .modal-form-grid label.checkbox-card > span:first-child::before {
    content: none;
}

.costing-modal .modal-form-grid label.checkbox-card input[type="checkbox"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--blue);
}

.costing-modal .checkbox-card strong,
.costing-modal .checkbox-card small {
    display: block;
    line-height: 1.35;
}

.costing-confirm-modal {
    width: min(420px, calc(100vw - 28px));
}

.selected-product-panel {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
}

.field-help {
    display: grid;
    gap: 4px;
}

.field-help strong {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.field-help span {
    color: var(--muted);
    line-height: 1.45;
}

.product-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow: auto;
}

.product-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 56px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px;
}

.product-check-item input {
    min-height: 16px;
    margin-top: 2px;
}

.product-check-item span {
    display: grid;
    gap: 3px;
}

.product-check-item strong {
    font-size: 13px;
    line-height: 1.35;
}

.product-check-item small {
    color: var(--muted);
    font-size: 11px;
}

.import-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.import-module-switcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 42%),
        rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-soft);
}

.import-module-current {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.import-module-current > div {
    min-width: 0;
}

.import-module-current strong {
    display: block;
    font-size: 18px;
    line-height: 1.25;
}

.import-module-current em {
    display: block;
    max-width: 760px;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

.import-module-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.import-module-select-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.import-module-select-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.import-module-select-form label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.import-module-select-form select {
    width: 100%;
    min-height: 38px;
}

.import-module-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(213, 224, 235, 0.88);
    scrollbar-width: thin;
}

.import-module-pill {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--ink);
    text-decoration: none;
}

.import-module-pill:hover,
.import-module-pill.is-active {
    border-color: rgba(37, 99, 235, 0.36);
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue);
}

.import-module-pill span,
.import-module-pill em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    white-space: nowrap;
}

.import-module-pill strong {
    font-size: 12px;
    white-space: nowrap;
}

.import-module-pill.is-disabled {
    opacity: 0.58;
    pointer-events: none;
}

.import-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.import-step {
    display: grid;
    gap: 3px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--muted);
}

.import-step.is-active {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
    color: var(--text);
}

.import-step strong {
    font-size: 13px;
}

.import-step span {
    font-size: 11px;
    line-height: 1.45;
}

.import-module-card {
    display: grid;
    gap: 12px;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.import-module-card.is-ready {
    border-color: rgba(37, 99, 235, 0.22);
}

.import-module-card.is-active {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), var(--shadow-soft);
}

.import-module-card span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.import-layout {
    align-items: start;
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
}

.import-nav-panel {
    display: grid;
    align-self: start;
    gap: 12px;
    min-width: 0;
}

.import-accordion {
    display: grid;
    gap: 12px;
}

.import-accordion-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.import-accordion-item.is-open {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12), var(--shadow-soft);
}

.import-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 14px 16px;
    cursor: pointer;
}

.import-accordion-trigger:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.36);
    outline-offset: -2px;
}

.import-accordion-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.import-accordion-copy .eyebrow {
    margin: 0;
}

.import-accordion-copy strong {
    font-size: 15px;
    line-height: 1.35;
}

.import-accordion-copy em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.import-accordion-meta {
    display: grid;
    justify-items: end;
    gap: 10px;
    flex: 0 0 auto;
}

.import-accordion-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.import-accordion-caret::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(39, 50, 65, 0.65);
    border-bottom: 2px solid rgba(39, 50, 65, 0.65);
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.import-accordion-item.is-open .import-accordion-caret::before {
    transform: rotate(-135deg);
}

.import-accordion-panel {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.import-accordion-panel[hidden] {
    display: none;
}

.import-accordion-panel .import-upload-card,
.import-accordion-panel .import-template-card,
.import-accordion-panel .import-history-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    isolation: auto;
}

.import-accordion-panel .import-note {
    margin-top: 0;
}

.import-upload-card {
    display: grid;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.import-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.import-card-head h3 {
    margin: 2px 0 0;
    font-size: 20px;
}

.import-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.import-template-card {
    display: grid;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.import-template-copy h3 {
    margin: 0;
    font-size: 18px;
}

.import-template-copy span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.import-template-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.import-template-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 12px;
}

.import-dropzone {
    display: grid;
    gap: 10px;
    place-items: center;
    text-align: center;
    padding: 22px 18px;
    border: 1px dashed rgba(37, 99, 235, 0.35);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    position: relative;
}

.import-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.import-dropzone-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
}

.import-dropzone svg {
    width: 20px;
    height: 20px;
}

.import-dropzone em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    max-width: 240px;
    line-height: 1.45;
}

.import-dropzone.is-hover,
.import-dropzone.has-file {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.import-file-picker {
    display: grid;
    gap: 8px;
    width: 100%;
}

.import-file-button,
.import-file-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
}

.import-file-button {
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
    font-weight: 700;
}

.import-file-name {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.88);
    color: var(--muted);
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-main .data-table-wrap {
    scrollbar-gutter: stable both-edges;
}

.operations-main .operation-table,
.operations-main .operation-step-table {
    min-width: 0;
}

.operations-main .route-group-table {
    min-width: 1120px;
}

.operations-main .route-group-inventory-table {
    width: 100%;
    min-width: 1320px;
}

.operations-main .route-group-inventory-table col.inventory-col-code {
    width: 184px;
}

.operations-main .route-group-inventory-table col.inventory-col-name {
    width: 392px;
}

.operations-main .route-group-inventory-table col.inventory-col-type {
    width: 308px;
}

.operations-main .route-group-inventory-table col.inventory-col-category {
    width: 118px;
}

.operations-main .route-group-inventory-table col.inventory-col-status {
    width: 124px;
}

.operations-main .route-group-inventory-table col.inventory-col-updated {
    width: 144px;
}

.operations-main .route-group-inventory-table col.inventory-col-actions {
    width: 148px;
}

.operations-main .station-table {
    width: max(100%, 1440px);
    min-width: 1440px;
    table-layout: fixed;
}

.operations-main .machine-table {
    width: max(100%, 1380px);
    min-width: 1380px;
    table-layout: fixed;
}

.operations-main .station-table col.operation-col-code {
    width: 168px;
}

.operations-main .station-table col.operation-col-name {
    width: 220px;
}

.operations-main .station-table col.operation-col-department {
    width: 170px;
}

.operations-main .station-table col.operation-col-type {
    width: 130px;
}

.operations-main .station-table col.operation-col-formula {
    width: 300px;
}

.operations-main .station-table col.operation-col-setup {
    width: 96px;
}

.operations-main .station-table col.operation-col-headcount {
    width: 118px;
}

.operations-main .station-table col.operation-col-efficiency {
    width: 122px;
}

.operations-main .station-table col.operation-col-status {
    width: 104px;
}

.operations-main .station-table col.operation-col-actions {
    width: 110px;
}

.operations-main .machine-table col.operation-col-code {
    width: 180px;
}

.operations-main .machine-table col.operation-col-machine {
    width: 240px;
}

.operations-main .machine-table col.operation-col-station {
    width: 154px;
}

.operations-main .machine-table col.operation-col-type {
    width: 148px;
}

.operations-main .machine-table col.operation-col-energy {
    width: 144px;
}

.operations-main .machine-table col.operation-col-finance {
    width: 154px;
}

.operations-main .machine-table col.operation-col-operation {
    width: 154px;
}

.operations-main .machine-table col.operation-col-status {
    width: 104px;
}

.operations-main .machine-table col.operation-col-actions {
    width: 102px;
}

.operations-main .definition-table {
    min-width: 1040px;
}

.operations-main .operation-step-table {
    min-width: 860px;
}

.operations-main .operation-table th,
.operations-main .operation-table td,
.operations-main .operation-step-table th,
.operations-main .operation-step-table td {
    padding: 10px 12px;
}

.operations-main .operation-table td,
.operations-main .operation-step-table td {
    white-space: normal;
    vertical-align: top;
}

.operations-main .operation-table td:first-child,
.operations-main .operation-table td:last-child,
.operations-main .operation-step-table td:first-child,
.operations-main .operation-step-table td:last-child {
    white-space: nowrap;
}

.operations-main .operation-table td > strong,
.operations-main .operation-step-table td > strong {
    display: block;
}

.operations-main .operation-table td.operation-code-cell,
.operations-main .operation-table td.operation-name-cell {
    min-width: 0;
    white-space: normal;
}

.operations-main .operation-table .operation-code-cell > strong,
.operations-main .operation-table .operation-code-cell > em,
.operations-main .operation-table .operation-name-cell > strong {
    text-transform: uppercase;
}

.operations-main .operation-table .operation-code-cell > strong,
.operations-main .operation-table .operation-name-cell > strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.operations-main .operation-table .operation-code-cell > em,
.operations-main .operation-table .operation-name-cell > em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-main .machine-table td {
    overflow: hidden;
    vertical-align: middle;
}

.operations-main .machine-table td:nth-child(3),
.operations-main .machine-table td:nth-child(5),
.operations-main .machine-table td:nth-child(6),
.operations-main .machine-table td:nth-child(7) {
    overflow-wrap: anywhere;
}

.operations-main .row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.operations-main .row-actions .table-action {
    min-width: 32px;
    width: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
}

.operations-main .row-actions .table-action svg {
    width: 15px;
    height: 15px;
    margin: 0;
}

.operations-main .row-actions .table-action.route-use-action.is-active {
    border-color: #9ec5e1;
    background: var(--blue-soft);
    color: var(--blue);
}

.operations-main .row-actions .table-action.route-use-action.is-static:disabled {
    border-color: #d7e4ee;
    background: #f5f8fc;
    color: #6b7a90;
    opacity: 1;
}

.operations-main .route-flow-link {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.operations-main .route-flow-link:hover,
.operations-main .route-flow-link:focus-visible {
    color: var(--blue);
    outline: none;
}

.operations-main .route-group-inventory-table .table-thumb {
    color: var(--blue);
}

.operations-main .route-group-inventory-table td > strong {
    display: block;
}

.operations-main .route-group-inventory-table .inventory-code-meta {
    flex-wrap: nowrap;
}

.operations-main .route-group-inventory-table .quick-build-badge-list {
    margin-right: 8px;
}

.operations-main .route-group-inventory-table .inventory-name-cell em,
.operations-main .route-group-inventory-table td > em {
    white-space: normal;
}

@media (max-width: 1520px) {
    .operations-main .route-group-inventory-table {
        min-width: 1240px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-name {
        width: 344px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-type {
        width: 272px;
    }
}

@media (max-width: 1320px) {
    .operations-main .route-group-inventory-table {
        min-width: 1160px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-code {
        width: 164px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-name {
        width: 296px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-type {
        width: 236px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-category {
        width: 104px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-status {
        width: 112px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-updated {
        width: 132px;
    }

    .operations-main .route-group-inventory-table col.inventory-col-actions {
        width: 136px;
    }
}

.route-flow-modal .route-flow-modal-body {
    display: grid;
    gap: 12px;
    padding-top: 22px;
}

.route-flow-modal {
    width: min(1520px, calc(100vw - 24px));
    max-width: 1520px;
}

.route-flow-modal > .modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), #ffffff);
}

.route-flow-modal .route-flow-step-table {
    min-width: 860px;
}

.route-flow-modal .route-flow-step-table .route-flow-col-order {
    width: 110px;
}

.route-flow-modal .route-flow-step-table .route-flow-col-station {
    width: 280px;
}

.route-flow-modal .route-flow-step-table .route-flow-col-standard,
.route-flow-modal .route-flow-step-table .route-flow-col-setup {
    width: 138px;
}

.route-flow-modal .route-flow-step-table .route-flow-col-mode {
    width: 170px;
}

.route-flow-modal .route-flow-step-table .route-flow-col-action {
    width: 110px;
}

.route-flow-modal .route-flow-hero,
.route-flow-modal .route-flow-existing-card {
    display: grid;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid #d7e4ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.route-flow-modal .route-flow-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.route-flow-modal .route-flow-hero-copy,
.route-flow-modal .route-flow-section-head,
.route-flow-modal .route-flow-footer-copy {
    display: grid;
    gap: 4px;
}

.route-flow-modal .route-flow-hero-copy h3,
.route-flow-modal .route-flow-section-head h3 {
    margin: 0;
    color: #173554;
    font-size: 15px;
    line-height: 1.2;
}

.route-flow-modal .route-flow-hero-copy span,
.route-flow-modal .route-flow-section-head span,
.route-flow-modal .route-flow-footer-copy span,
.route-flow-modal .route-flow-draft-row-head span,
.route-flow-modal .route-flow-draft-empty span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.route-flow-modal .route-flow-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.route-flow-modal .route-flow-meta-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid #d2e2f0;
    border-radius: 999px;
    background: #fff;
    color: #395a78;
    font-size: 11px;
    font-weight: 800;
}

.route-flow-modal .route-flow-hero-flow {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.route-flow-modal .route-flow-lock-notice {
    margin: 0;
}

.route-flow-modal .route-flow-section-head,
.route-flow-modal .route-flow-modal-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.route-flow-modal .route-flow-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.route-flow-modal .route-flow-section-actions > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.route-flow-modal .route-flow-draft-list {
    display: grid;
    gap: 8px;
    margin-top: 6px;
}

.route-flow-modal .route-flow-draft-empty {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px dashed #c8dae8;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.route-flow-modal .route-flow-draft-empty strong,
.route-flow-modal .route-flow-footer-copy strong {
    color: #173554;
    font-size: 14px;
    font-weight: 850;
}

.route-flow-modal .route-flow-draft-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.8fr) 100px 120px 120px minmax(170px, 0.9fr) auto;
    gap: 8px 10px;
    align-items: end;
    border: 1px solid #d5e3ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    padding: 12px 14px;
}

.route-flow-modal .route-flow-draft-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.route-flow-modal .route-flow-draft-field > span,
.route-flow-modal .route-flow-draft-hint strong {
    color: #5c7088;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.route-flow-modal .route-flow-draft-row input,
.route-flow-modal .route-flow-draft-row select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

.route-flow-modal .route-flow-draft-row .route-flow-draft-note-cell {
    grid-column: 1 / span 5;
}

.route-flow-modal .route-flow-draft-row .route-flow-draft-note-cell input {
    min-width: 0;
}

.route-flow-modal .route-flow-draft-remove {
    align-self: end;
    justify-self: end;
}

.route-flow-modal .route-flow-draft-hint {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    border-top: 1px solid #e6edf4;
    padding-top: 9px;
}

.route-flow-modal .route-flow-draft-hint span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.route-flow-modal .route-flow-draft-row .table-action svg,
.route-flow-modal .route-flow-draft-remove svg {
    width: 15px;
    height: 15px;
    margin: 0;
}

.route-flow-modal .route-flow-builder-feedback {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}

.route-flow-modal .route-flow-builder-feedback.is-error {
    background: #fff2ef;
    color: #b94b37;
}

.route-flow-modal .route-flow-builder-feedback.is-success {
    background: #eef8f1;
    color: #25734b;
}

.route-flow-modal .route-flow-existing-card .data-table-wrap {
    margin-top: 0;
}

.route-flow-modal .route-flow-modal-footer {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

.route-flow-modal .route-flow-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.route-flow-modal .operation-step-table th,
.route-flow-modal .operation-step-table td {
    padding: 11px 14px;
}

.route-flow-modal .operation-step-table td {
    vertical-align: top;
}

.route-flow-modal .operation-step-table tr.is-inline-editing td {
    background: #f8fbff;
}

.route-flow-modal .route-step-inline-input,
.route-flow-modal .route-step-inline-select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

.route-flow-modal .route-step-inline-stack,
.route-flow-modal .route-step-inline-subfield {
    display: grid;
    gap: 6px;
}

.route-flow-modal .route-step-inline-standard-wrap.is-hidden,
.route-flow-modal .route-step-inline-split-pair.is-hidden {
    display: none;
}

.route-flow-modal .route-step-inline-split-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.route-flow-modal .route-step-inline-mini-field {
    display: grid;
    gap: 6px;
}

.route-flow-modal .route-step-inline-label,
.route-flow-modal .route-step-inline-subfield > span,
.route-flow-modal .route-step-inline-mini-field > span {
    color: #5c7088;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.route-flow-modal .route-step-inline-subfield.is-hidden {
    display: none;
}

.route-flow-modal .route-step-inline-note {
    min-width: 220px;
}

.route-flow-modal .route-step-inline-actions .table-action.is-save {
    border-color: #c9dff6;
    background: #edf6ff;
    color: var(--blue);
}

.route-flow-modal .row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.route-flow-modal .row-actions .table-action {
    min-width: 32px;
    width: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
}

.route-flow-modal .row-actions .table-action svg {
    width: 15px;
    height: 15px;
    margin: 0;
}

.operations-main .row-open-cell {
    cursor: pointer;
}

.operations-main .row-open-cell strong {
    transition: color 0.16s ease;
}

.operations-main .row-open-cell:hover strong {
    color: var(--blue);
}

.operations-main .row-open-cell:focus-visible {
    outline: 2px solid rgba(47, 128, 237, 0.28);
    outline-offset: -2px;
    border-radius: 8px;
}

@media (max-width: 1100px) {
    .route-flow-modal .route-flow-hero {
        grid-template-columns: 1fr;
    }

    .route-flow-modal .route-flow-hero-flow {
        grid-column: 1;
    }

    .route-flow-modal .route-flow-section-head,
    .route-flow-modal .route-flow-modal-footer {
        grid-template-columns: 1fr;
    }

    .route-flow-modal .route-flow-section-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .route-flow-modal .route-flow-draft-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .route-flow-modal .route-flow-draft-row .route-flow-draft-note-cell {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .route-flow-modal .route-flow-draft-row {
        grid-template-columns: 1fr;
    }

    .route-flow-modal .route-flow-draft-remove {
        justify-self: stretch;
    }
}

.import-upload-card > .primary-button.wide {
    margin: 0;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.import-upload-card + .import-template-card {
    margin-top: 0;
}

.import-note,
.import-history-panel {
    position: relative;
    flex: 0 0 auto;
}

.import-history-panel {
    padding: 12px;
}

.import-history-list {
    display: grid;
    gap: 8px;
    max-height: 380px;
    overflow: auto;
    padding-right: 2px;
}

.import-history-item {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.82);
}

.import-history-item.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.import-history-item span,
.import-history-item em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.import-workspace {
    gap: 14px;
    min-height: 0;
}

.import-job-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.import-job-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.import-job-summary > div,
.import-result-strip > div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.84);
}

.import-job-summary span,
.import-result-strip span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.import-job-summary strong,
.import-result-strip strong {
    font-size: 18px;
}

.import-mapping-chip {
    display: grid;
    place-items: center;
    min-width: 110px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.import-mapping-chip strong {
    font-size: 24px;
}

.import-mapping-chip span {
    color: var(--muted);
    font-size: 12px;
}

.import-mapping-form {
    display: grid;
    gap: 14px;
}

.mapping-group {
    display: grid;
    gap: 10px;
}

.mapping-group-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.mapping-group-head h3 {
    margin: 2px 0 0;
    font-size: 18px;
}

.mapping-group-head span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.mapping-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.mapping-field {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.84);
}

.mapping-field.is-required {
    border-color: rgba(37, 99, 235, 0.2);
}

.mapping-field span {
    font-size: 13px;
    font-weight: 700;
}

.mapping-field em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

.mapping-field select.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.14);
}

.import-preview-table {
    max-height: 360px;
    overflow: auto;
}

.import-row-number {
    min-width: 72px;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.import-inline-notice {
    margin-bottom: 18px;
}

.import-result-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.import-error-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 12px;
    background: rgba(255, 251, 235, 0.72);
}

.import-error-panel-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.import-error-panel-head strong {
    display: block;
    margin-bottom: 4px;
}

.import-error-panel-head span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.import-error-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
}

.import-error-item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
}

.import-error-item strong {
    font-size: 13px;
    line-height: 1.5;
}

.import-error-item span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.personnel-status-meta {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.form-section-title {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.06);
}

.form-section-title strong {
    font-size: 13px;
}

.form-section-title span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 1180px) {
    .costing-page-grid,
    .compare-grid,
    .costing-detail-grid,
    .import-stepper,
    .import-module-grid,
    .mapping-grid,
    .import-job-summary,
    .import-result-strip {
        grid-template-columns: 1fr;
    }

    .import-layout {
        grid-template-columns: 1fr;
    }

    .import-module-switcher {
        grid-template-columns: 1fr;
    }

    .cost-set-workspace .costing-summary-panel {
        max-height: none;
        overflow: visible;
    }

    .cost-set-workspace .scenario-reference-grid,
    .costing-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cost-set-detail-hero,
    .cost-set-item-card {
        grid-template-columns: 1fr;
    }

    .cost-set-total-card,
    .cost-set-item-card__state {
        justify-items: start;
        justify-self: start;
        text-align: left;
    }

    .cost-set-item-deck {
        max-height: none;
        min-height: 0;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 860px) {
    .costing-metric-strip,
    .compare-metric-strip,
    .scenario-reference-grid,
    .cost-split-grid,
    .compare-summary-list,
    .compare-form-grid,
    .product-checklist {
        grid-template-columns: 1fr;
    }

    .cost-set-workspace .scenario-reference-grid,
    .costing-summary-cards {
        grid-template-columns: 1fr;
    }

    .cost-set-detail-hero {
        padding: 14px;
    }

    .cost-set-detail-hero h2 {
        font-size: 21px;
    }

    .cost-set-tile__metrics,
    .cost-set-item-card__values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cost-set-workspace .costing-table-panel .costing-table tr {
        grid-template-columns: 1fr;
    }

    .cost-set-workspace .costing-table-panel .costing-table td:nth-child(n) {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
        text-align: left;
    }

    .cost-set-workspace .costing-table-panel .costing-table td:nth-child(8) {
        justify-self: start;
    }

    .costing-modal {
        width: min(100vw - 16px, 860px);
        left: 8px;
        right: 8px;
        top: 58px;
        transform: none;
    }

    .costing-modal.definition-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 74px);
    }

    .costing-modal-form > .modal-form-grid {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 238px);
        padding-right: 0;
    }

    .import-module-current,
    .import-module-select-form {
        grid-template-columns: 1fr;
    }

    .import-module-current .import-card-badge {
        justify-self: start;
    }
}

/* Work tracking */

.work-main {
    display: grid;
    gap: 18px;
}

.notice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}

.notice-banner span,
.notice-banner strong {
    display: block;
}

.notice-banner span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.notice-banner strong {
    color: var(--ink);
}

.notice-banner.is-ok {
    border-color: #bfe1cb;
    background: #f0faf4;
}

.notice-banner.is-warn {
    border-color: #f3d7aa;
    background: #fff8eb;
}

.notice-banner.is-danger {
    border-color: #efc1b9;
    background: #fff2ef;
}

.work-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.work-kpi-card,
.work-section-card {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 2px);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.work-kpi-card {
    padding: 16px;
}

.work-kpi-card span,
.work-kpi-card strong,
.work-kpi-card em {
    display: block;
}

.work-kpi-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.work-kpi-card strong {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1;
}

.work-kpi-card em {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 12px;
    font-style: normal;
}

.work-filter-panel {
    padding: 18px;
}

.work-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) repeat(3, auto);
    gap: 12px;
    align-items: end;
}

.work-filter-form > label {
    display: grid;
}

.work-filter-form > label.is-wide {
    grid-column: span 2;
}

.work-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.work-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 0 12px;
}

.work-checkbox > span {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.work-checkbox input {
    min-height: 0;
    margin: 0;
}

.work-layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.88fr) minmax(0, 1.52fr);
    gap: 18px;
    align-items: start;
}

.work-list-panel,
.work-detail-panel {
    padding: 18px;
}

.work-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.work-section-head h2 {
    font-size: 19px;
}

.work-list-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.work-list-stack,
.work-comment-list,
.work-reminder-list,
.work-attachment-list,
.work-activity-list {
    display: grid;
    gap: 12px;
}

.work-list-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(180deg, #fff, #fbfcfe);
    padding: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.work-list-card:hover,
.work-list-card.is-active {
    border-color: #9ec5e1;
    box-shadow: 0 16px 36px rgba(29, 38, 48, 0.08);
    transform: translateY(-1px);
}

.work-list-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.work-list-card-head strong,
.work-list-card-head span {
    display: block;
}

.work-list-card-head strong {
    font-size: 15px;
}

.work-list-card-head span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.work-list-card > p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.45;
}

.work-list-meta,
.work-list-people,
.work-detail-badges,
.work-detail-actions,
.work-participant-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.work-list-meta span,
.work-list-people span,
.work-participant-list span,
.work-ai-badge,
.work-warning-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
}

.work-list-meta span {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.work-list-people span,
.work-participant-list span {
    background: #edf5fb;
    color: #215c8d;
}

.work-participant-list em {
    color: var(--muted);
    font-style: normal;
}

.work-status-badge,
.work-priority-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.work-status-badge {
    background: color-mix(in srgb, var(--work-status-color) 14%, #fff);
    color: var(--work-status-color);
}

.work-priority-badge.priority-low {
    background: #eef5ef;
    color: #2d6a45;
}

.work-priority-badge.priority-normal {
    background: #edf5fb;
    color: #245f92;
}

.work-priority-badge.priority-high {
    background: #fff2dd;
    color: #a35c06;
}

.work-priority-badge.priority-urgent,
.work-warning-badge {
    background: #fde9e5;
    color: #a63c31;
}

.work-ai-badge {
    background: #efe8fb;
    color: #6a49a8;
}

.work-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.work-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.work-detail-meta-grid div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px;
}

.work-detail-meta-grid span,
.work-detail-meta-grid strong {
    display: block;
}

.work-detail-meta-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.work-detail-meta-grid strong {
    margin-top: 6px;
}

.work-section-card {
    padding: 18px;
}

.work-edit-form select[multiple],
.work-inline-form select[multiple],
#workCreateForm select[multiple] {
    min-height: 132px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.work-participant-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.work-participant-groups > div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 14px;
}

.work-participant-groups strong {
    display: block;
    margin-bottom: 10px;
}

.work-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.work-comment-item,
.work-reminder-item,
.work-attachment-item,
.work-activity-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 12px 14px;
}

.work-comment-item header,
.work-reminder-item,
.work-attachment-item,
.work-activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.work-comment-item header strong,
.work-comment-item header span,
.work-reminder-item strong,
.work-reminder-item span,
.work-attachment-item strong,
.work-attachment-item span,
.work-activity-item strong,
.work-activity-item span {
    display: block;
}

.work-comment-item header span,
.work-reminder-item span,
.work-attachment-item span,
.work-activity-item span {
    color: var(--muted);
    font-size: 12px;
}

.work-comment-item em,
.work-reminder-item em {
    display: block;
    margin-top: 6px;
    color: var(--blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.work-comment-item p {
    margin: 8px 0 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.work-inline-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.work-inline-form > label {
    display: grid;
}

.work-inline-form > label.is-wide {
    grid-column: 1 / -1;
}

.work-empty-state {
    min-height: 220px;
    place-items: center;
}

@media (max-width: 1380px) {
    .work-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .work-layout,
    .work-detail-columns,
    .work-participant-groups,
    .work-detail-meta-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .notice-banner,
    .work-detail-hero,
    .work-list-card-head,
    .work-reminder-item,
    .work-attachment-item,
    .work-activity-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .work-kpi-grid,
    .work-filter-form {
        grid-template-columns: 1fr;
    }

    .work-filter-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .work-filter-actions > * {
        width: 100%;
    }
}

/* Work studio refresh */

.work-studio {
    display: grid;
    gap: 18px;
}

.work-studio .workspace-panel,
.work-studio .work-kpi-card,
.work-studio .notice-banner {
    border-radius: 22px;
    border-color: #d9e3ee;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.work-suite-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.95fr);
    gap: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at top left, rgba(29, 78, 216, 0.14), transparent 34%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.14), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.work-suite-hero-copy h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
}

.work-suite-hero-copy p:not(.eyebrow) {
    margin: 12px 0 0;
    max-width: 760px;
    color: #536479;
    font-size: 15px;
    line-height: 1.65;
}

.work-hero-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.work-hero-pill-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d4deea;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    padding: 10px 14px;
    color: #26415d;
    font-size: 12px;
    font-weight: 800;
}

.work-hero-pill-row svg {
    width: 15px;
    height: 15px;
}

.work-view-switch {
    display: grid;
    gap: 12px;
}

.work-view-card {
    display: grid;
    gap: 8px;
    border: 1px solid #d4deea;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    padding: 16px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.work-view-card:hover,
.work-view-card.is-active {
    transform: translateY(-2px);
    border-color: #86b8e1;
    box-shadow: 0 16px 34px rgba(27, 88, 150, 0.12);
}

.work-view-card.is-active {
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
}

.work-view-card strong {
    font-size: 18px;
}

.work-view-card em {
    color: #60748a;
    font-style: normal;
    line-height: 1.5;
}

.work-view-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e9f3ff;
    color: var(--blue);
}

.work-view-card-icon svg {
    width: 20px;
    height: 20px;
}

.work-kpi-grid--studio {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.work-kpi-grid--studio .work-kpi-card {
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.work-control-panel {
    padding: 18px 18px 6px;
}

.work-filter-form--studio {
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(160px, 0.7fr)) repeat(3, auto) auto;
    align-items: end;
}

.work-filter-form--studio .work-checkbox {
    align-self: center;
    min-height: 42px;
}

.work-list-experience {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.6fr);
    gap: 18px;
    align-items: start;
}

.work-card-rail,
.work-focus-stack,
.work-side-stack {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.work-card-rail {
    padding: 18px;
    position: sticky;
    top: 18px;
}

.work-card-rail-stack {
    display: grid;
    gap: 12px;
}

.work-rail-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d9e3ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work-rail-card:hover,
.work-rail-card.is-active {
    border-color: #84b4dd;
    box-shadow: 0 16px 30px rgba(27, 88, 150, 0.12);
    transform: translateY(-1px);
}

.work-rail-card-top,
.work-focus-badges,
.work-rail-card-meta,
.work-section-inline-head,
.work-appointment-summary,
.work-range-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.work-rail-card-top strong,
.work-focus-hero-copy h2 {
    margin: 0;
}

.work-rail-card-top span,
.work-rail-card p,
.work-rail-card-meta span,
.work-muted-line,
.work-stream-item p,
.work-section-inline-head span {
    color: #62758b;
}

.work-rail-card p,
.work-stream-item p,
.work-muted-line {
    margin: 0;
    line-height: 1.58;
}

.work-focus-stack {
    min-width: 0;
}

.work-focus-hero {
    display: grid;
    gap: 18px;
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(19, 99, 176, 0.11), rgba(17, 124, 112, 0.08)),
        #fff;
}

.work-focus-hero-copy p:not(.eyebrow) {
    margin: 10px 0 0;
    max-width: 860px;
    color: #536479;
    line-height: 1.7;
}

.work-focus-meta,
.work-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.work-focus-meta span,
.work-summary-grid div,
.work-rule-card {
    border: 1px solid #d9e3ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px 14px;
}

.work-focus-meta strong,
.work-summary-grid strong {
    display: block;
    font-size: 16px;
}

.work-focus-meta em,
.work-summary-grid span {
    display: block;
    margin-top: 4px;
    color: #6d8095;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.work-grid-dual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.work-summary-card,
.work-appointment-hub,
.work-editor-card,
.work-calendar-panel,
.work-gantt-panel {
    padding: 20px;
}

.work-participant-clusters {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.work-participant-clusters strong,
.work-section-inline-head strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
}

.work-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    background: #eef6ff;
    color: #135089;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
}

.work-chip-list em {
    color: #7a8fa4;
    font-style: normal;
}

.work-appointment-hub {
    display: grid;
    gap: 14px;
}

.work-rule-card {
    display: grid;
    gap: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
}

.work-rule-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #31506f;
    font-size: 12px;
    font-weight: 750;
}

.work-rule-card svg {
    width: 14px;
    height: 14px;
}

.work-appointment-stack {
    display: grid;
    gap: 12px;
}

.work-appointment-item {
    border: 1px solid #d9e3ee;
    border-radius: 18px;
    background: #fbfdff;
    overflow: hidden;
}

.work-appointment-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
}

.work-appointment-item > summary::-webkit-details-marker {
    display: none;
}

.work-appointment-item[open] {
    border-color: #89b7df;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 26px rgba(27, 88, 150, 0.08);
}

.work-appointment-item-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid #e3ebf4;
    padding: 14px 16px 16px;
}

.work-appointment-form {
    margin-top: 4px;
}

.work-appointment-form .modal-actions {
    margin-top: 0;
}

.work-editor-form,
.work-appointment-form {
    gap: 12px;
}

.work-stream-list {
    display: grid;
    gap: 12px;
}

.work-stream-item {
    display: grid;
    gap: 8px;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 14px;
}

.work-stream-item header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.work-stream-item header span {
    color: #71859a;
    font-size: 12px;
}

.work-stream-item em {
    color: var(--blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.work-stream-item--tight {
    gap: 4px;
}

.work-stream-item--link {
    color: inherit;
    text-decoration: none;
}

.work-inline-link {
    width: 100%;
    justify-content: center;
}

.work-calendar-layout,
.work-gantt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.work-calendar-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.work-calendar-day {
    display: grid;
    gap: 12px;
    min-height: 320px;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 14px;
}

.work-calendar-day.is-today {
    border-color: #89b7df;
    box-shadow: inset 0 0 0 1px rgba(137, 183, 223, 0.2);
}

.work-calendar-day header strong,
.work-gantt-label strong {
    display: block;
    font-size: 14px;
}

.work-calendar-day header span,
.work-gantt-label span,
.work-calendar-event em,
.work-calendar-event span,
.work-calendar-empty {
    color: #71859a;
    font-size: 12px;
}

.work-calendar-stack {
    display: grid;
    align-content: start;
    gap: 10px;
}

.work-calendar-event {
    display: grid;
    gap: 4px;
    border-radius: 14px;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.work-calendar-event.is-appointment {
    background: #eef6ff;
    border: 1px solid #cfe1f6;
}

.work-calendar-event.is-deadline {
    background: #fff4e5;
    border: 1px solid #f0d7ab;
}

.work-calendar-empty {
    padding: 10px 0;
}

.work-gantt-board {
    display: grid;
    gap: 12px;
}

.work-gantt-head,
.work-gantt-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.54fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.work-gantt-track-head,
.work-gantt-track {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 8px;
    min-height: 64px;
    align-items: center;
}

.work-gantt-track-head span {
    display: grid;
    justify-items: center;
    color: #60748a;
    font-size: 12px;
    font-weight: 800;
}

.work-gantt-track-head em {
    font-style: normal;
    color: #90a1b3;
    font-size: 11px;
}

.work-gantt-label {
    display: grid;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    border: 1px solid #dbe5ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 12px 14px;
}

.work-gantt-row.is-active .work-gantt-label {
    border-color: #89b7df;
}

.work-gantt-track {
    position: relative;
}

.work-gantt-cell {
    min-height: 64px;
    border-radius: 14px;
    background: #f5f8fb;
    border: 1px solid #edf2f7;
}

.work-gantt-bar {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    align-self: center;
    min-height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--work-status-color) 78%, white 22%), color-mix(in srgb, var(--work-status-color) 56%, white 44%));
    color: #fff;
    padding: 10px 12px;
    box-shadow: 0 16px 26px rgba(21, 53, 85, 0.18);
}

.work-gantt-bar em {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-style: normal;
}

.work-side-stack {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.work-status-badge,
.work-priority-badge,
.work-warning-badge,
.work-ai-badge {
    border-radius: 999px;
}

.work-warning-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    background: #fff4e5;
    color: #8e5b00;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
}

.work-section-head h2 {
    margin: 4px 0 0;
}

.work-range-actions {
    justify-content: flex-end;
}

@media (max-width: 1380px) {
    .work-kpi-grid--studio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-filter-form--studio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-list-experience,
    .work-calendar-layout,
    .work-gantt-layout,
    .work-suite-hero {
        grid-template-columns: 1fr;
    }

    .work-card-rail,
    .work-side-stack {
        position: static;
    }
}

@media (max-width: 1120px) {
    .work-grid-dual,
    .work-focus-meta,
    .work-summary-grid,
    .work-calendar-board {
        grid-template-columns: 1fr;
    }

    .work-gantt-head,
    .work-gantt-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .work-kpi-grid--studio,
    .work-filter-form--studio {
        grid-template-columns: 1fr;
    }

    .work-view-card,
    .work-calendar-day,
    .work-gantt-bar,
    .work-appointment-item > summary,
    .work-stream-item header {
        align-items: flex-start;
    }

    .work-appointment-item > summary,
    .work-range-actions,
    .work-rail-card-top,
    .work-rail-card-meta {
        flex-direction: column;
    }

    .work-gantt-track-head,
    .work-gantt-track {
        gap: 6px;
    }
}

/* Work studio advanced calendar refresh */

.work-studio input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.work-studio select,
.work-studio textarea,
.work-appointment-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.work-appointment-modal select,
.work-appointment-modal textarea,
#workCreateModal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#workCreateModal select,
#workCreateModal textarea {
    border-radius: 16px;
    border: 1px solid #d5deea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.work-studio input:focus,
.work-studio select:focus,
.work-studio textarea:focus,
.work-appointment-modal input:focus,
.work-appointment-modal select:focus,
.work-appointment-modal textarea:focus,
#workCreateModal input:focus,
#workCreateModal select:focus,
#workCreateModal textarea:focus {
    border-color: #6aa7da;
    box-shadow: 0 0 0 4px rgba(52, 120, 191, 0.12);
}

.work-appointment-card {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #dbe7f3;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.work-appointment-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.work-appointment-card-head strong {
    display: block;
    margin-top: 6px;
    font-size: 17px;
}

.work-appointment-card-head > div > span {
    color: #5f7287;
    font-size: 13px;
}

.work-status-badge--soft {
    background: rgba(42, 108, 176, 0.1);
    color: #1d4f80;
    border-color: rgba(42, 108, 176, 0.18);
}

.work-appointment-card-body {
    display: grid;
    gap: 14px;
}

.work-appointment-meta-grid,
.work-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.work-appointment-meta-grid div,
.work-inspector-grid div {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #e0e9f2;
    background: rgba(255, 255, 255, 0.88);
}

.work-appointment-meta-grid span,
.work-inspector-grid span {
    display: block;
    color: #678096;
    font-size: 12px;
    margin-bottom: 4px;
}

.work-appointment-meta-grid strong,
.work-inspector-grid strong {
    font-size: 14px;
}

.work-appointment-cta,
.work-appointment-modal-intro,
.work-calendar-prologue {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #d9e5f1;
    background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 100%);
}

.work-appointment-cta strong,
.work-appointment-modal-intro strong {
    display: block;
    margin-bottom: 4px;
}

.work-appointment-cta span,
.work-appointment-modal-intro span,
.work-calendar-prologue span {
    color: #5f7287;
    line-height: 1.5;
}

.work-calendar-caption {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #d6e1ed;
    background: #f8fbff;
    color: #4d657d;
    font-weight: 600;
}

.work-calendar-instance {
    min-height: 820px;
}

.work-calendar-inspector-panel .work-calendar-inspector-body {
    display: grid;
    gap: 14px;
}

.work-conflict-banner {
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid #d7e4f1;
    background: #f8fbff;
    color: #35516d;
    font-size: 13px;
    line-height: 1.5;
}

.work-conflict-banner.is-danger {
    border-color: #f1b9c2;
    background: #fff4f6;
    color: #8b1e31;
}

.work-conflict-banner.is-success {
    border-color: #b6e0c9;
    background: #edf9f1;
    color: #0f6a42;
}

.work-conflict-banner.is-info {
    border-color: #c8dcef;
    background: #f1f8ff;
    color: #23537f;
}

.work-conflict-banner.is-warn {
    border-color: #ead39c;
    background: #fff9eb;
    color: #7a5511;
}

.work-appointment-modal .modal-header,
#workCreateModal .modal-header {
    margin-bottom: 16px;
}

.work-appointment-modal .modal-form-grid,
#workCreateModal .modal-form-grid {
    gap: 16px;
}

.work-studio .ts-wrapper.single .ts-control,
.work-studio .ts-wrapper.multi .ts-control,
.work-appointment-modal .ts-wrapper.single .ts-control,
.work-appointment-modal .ts-wrapper.multi .ts-control,
#workCreateModal .ts-wrapper.single .ts-control,
#workCreateModal .ts-wrapper.multi .ts-control {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid #d5deea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 10px 12px;
    box-shadow: none;
}

.work-studio .ts-wrapper.focus .ts-control,
.work-appointment-modal .ts-wrapper.focus .ts-control,
#workCreateModal .ts-wrapper.focus .ts-control {
    border-color: #6aa7da;
    box-shadow: 0 0 0 4px rgba(52, 120, 191, 0.12);
}

.work-studio .ts-dropdown,
.work-appointment-modal .ts-dropdown,
#workCreateModal .ts-dropdown {
    border-radius: 16px;
    border: 1px solid #d9e3ee;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.work-studio .ts-wrapper.multi .ts-control > div,
.work-appointment-modal .ts-wrapper.multi .ts-control > div,
#workCreateModal .ts-wrapper.multi .ts-control > div {
    background: #eef5ff;
    border-radius: 999px;
    color: #194f84;
    padding: 5px 9px;
}

.work-calendar-instance .fc {
    --fc-border-color: #dbe5ef;
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: #f8fbff;
    --fc-list-event-hover-bg-color: #eef6ff;
    --fc-today-bg-color: rgba(39, 116, 194, 0.08);
}

.work-calendar-instance .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 20px;
    gap: 12px;
}

.work-calendar-instance .fc .fc-toolbar-title {
    font-size: 24px;
    font-weight: 700;
    color: #183650;
}

.work-calendar-instance .fc .fc-button {
    border-radius: 14px;
    border: 1px solid #d7e2ee;
    background: #ffffff;
    color: #224869;
    box-shadow: none;
    padding: 0.6rem 0.95rem;
    text-transform: none;
    font-weight: 600;
}

.work-calendar-instance .fc .fc-button:hover,
.work-calendar-instance .fc .fc-button.fc-button-active,
.work-calendar-instance .fc .fc-button:focus {
    background: #edf5ff;
    border-color: #7cb0dd;
    color: #123f66;
    box-shadow: 0 0 0 4px rgba(46, 109, 176, 0.12);
}

.work-calendar-instance .fc .fc-scrollgrid,
.work-calendar-instance .fc .fc-list {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #dbe5ef;
}

.work-calendar-instance .fc-theme-standard td,
.work-calendar-instance .fc-theme-standard th {
    border-color: #dbe5ef;
}

.work-calendar-instance .fc .fc-col-header-cell-cushion,
.work-calendar-instance .fc .fc-daygrid-day-number,
.work-calendar-instance .fc .fc-timegrid-axis-cushion {
    color: #4c6680;
    font-weight: 600;
}

.work-calendar-instance .fc .fc-timegrid-slot {
    height: 4.2rem;
}

.work-calendar-instance .fc .fc-event {
    border-radius: 14px;
    padding: 4px 6px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.work-calendar-instance .fc .fc-event-title {
    font-weight: 700;
}

.work-calendar-instance .fc .fc-event-time {
    font-weight: 600;
}

.work-calendar-instance .fc .fc-list-day-cushion {
    background: #f8fbff;
}

@media (max-width: 980px) {
    .work-appointment-card-head,
    .work-appointment-cta,
    .work-appointment-modal-intro,
    .work-calendar-prologue {
        flex-direction: column;
        align-items: stretch;
    }

    .work-appointment-meta-grid,
    .work-inspector-grid {
        grid-template-columns: 1fr;
    }
}

/* Work simplification polish */

.work-studio {
    gap: 16px;
}

.work-studio .workspace-panel,
.work-studio .work-kpi-card,
.work-studio .notice-banner {
    border-radius: 20px;
    border-color: #dbe6f1;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.work-suite-hero {
    position: relative;
    overflow: hidden;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 20px;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f6fffd 100%);
}

.work-suite-hero::after {
    content: "";
    position: absolute;
    inset: auto -120px -120px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.09), transparent 65%);
    pointer-events: none;
}

.work-suite-hero-copy {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.work-suite-hero-copy h1 {
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.work-suite-hero-copy p:not(.eyebrow) {
    margin: 0;
    max-width: 820px;
    color: #567086;
    font-size: 14px;
    line-height: 1.6;
}

.work-hero-pill-row {
    gap: 8px;
    margin-top: 6px;
}

.work-hero-pill-row span {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(123, 158, 193, 0.28);
    background: rgba(255, 255, 255, 0.88);
    color: #224664;
    font-size: 11px;
    font-weight: 800;
}

.work-view-switch {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.work-view-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 3px 12px;
    min-height: 86px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
}

.work-view-card strong,
.work-view-card em {
    grid-column: 2;
}

.work-view-card strong {
    font-size: 17px;
}

.work-view-card em {
    font-size: 12px;
    line-height: 1.45;
}

.work-view-card-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(180deg, #ecf6ff 0%, #dff2ff 100%);
    color: #1d63a2;
}

.work-view-card:hover {
    transform: translateY(-1px);
}

.work-view-card.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #1d72b8 0%, #16a085 100%);
    box-shadow: 0 14px 30px rgba(22, 114, 184, 0.22);
}

.work-view-card.is-active strong,
.work-view-card.is-active em {
    color: #ffffff;
}

.work-view-card.is-active .work-view-card-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.work-kpi-grid--studio {
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.work-kpi-grid--studio .work-kpi-card {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 15px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.work-kpi-grid--studio .work-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #2b7fc7 0%, #61c2a5 100%);
}

.work-kpi-grid--studio .work-kpi-card:nth-child(2)::before {
    background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
}

.work-kpi-grid--studio .work-kpi-card:nth-child(3)::before {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.work-kpi-grid--studio .work-kpi-card:nth-child(4)::before {
    background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%);
}

.work-kpi-grid--studio .work-kpi-card:nth-child(5)::before {
    background: linear-gradient(90deg, #0f766e 0%, #38bdf8 100%);
}

.work-kpi-grid--studio .work-kpi-card:nth-child(6)::before {
    background: linear-gradient(90deg, #ef4444 0%, #fb7185 100%);
}

.work-kpi-card span {
    color: #587085;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.work-kpi-card strong {
    margin-top: 10px;
    font-size: 34px;
}

.work-kpi-card em {
    margin-top: 8px;
    color: #76889a;
}

.work-control-panel {
    padding: 16px 16px 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfeff 100%);
}

.work-filter-form--studio {
    gap: 12px;
}

.work-filter-form--studio .work-checkbox {
    align-self: end;
    min-height: 44px;
    border-style: solid;
    border-color: #dde7f1;
    border-radius: 999px;
    background: #f9fbfe;
    padding: 0 14px;
}

.work-filter-form--studio .work-checkbox > span {
    color: #385169;
    font-size: 12px;
}

.work-filter-actions {
    gap: 8px;
}

.work-list-experience,
.work-calendar-layout,
.work-gantt-layout {
    gap: 16px;
}

.work-calendar-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(290px, 0.62fr);
    align-items: start;
}

.work-calendar-panel,
.work-side-stack > .workspace-panel,
.work-card-rail,
.work-summary-card,
.work-appointment-hub,
.work-editor-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.work-calendar-panel {
    padding: 18px;
}

.work-calendar-prologue {
    padding: 12px 14px;
    border-radius: 18px;
    border-color: #dce9f3;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
}

.work-calendar-caption {
    min-height: 40px;
    padding: 0 13px;
    border-color: #cfe0ef;
    background: linear-gradient(180deg, #f9fcff 0%, #eef8ff 100%);
    color: #20537f;
}

.work-side-stack {
    gap: 14px;
}

.work-calendar-instance {
    min-height: 760px;
}

.work-calendar-instance .fc .fc-toolbar-title {
    font-size: 20px;
}

.work-calendar-instance .fc .fc-button {
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    font-size: 13px;
}

.work-calendar-instance .fc .fc-day-sat,
.work-calendar-instance .fc .fc-day-sun {
    background: rgba(245, 249, 253, 0.72);
}

.work-calendar-instance .fc .fc-timegrid-col.fc-day-today,
.work-calendar-instance .fc .fc-daygrid-day.fc-day-today {
    background: rgba(34, 197, 94, 0.06);
}

.work-calendar-inspector-panel .empty-state,
.work-side-stack .empty-state {
    min-height: 120px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafcff 0%, #f5f9fd 100%);
}

@media (max-width: 1180px) {
    .work-view-switch {
        grid-template-columns: 1fr;
    }

    .work-calendar-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .work-suite-hero {
        padding: 16px;
    }

    .work-kpi-grid--studio {
        gap: 10px;
    }

    .work-view-card {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: auto;
    }

    .work-view-card-icon {
        width: 38px;
        height: 38px;
    }
}

/* Work button polish */

.work-main .primary-button,
.work-main .secondary-button,
.work-main .icon-button,
.work-main .table-action {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.work-main .primary-button {
    min-height: 40px;
    border-color: #1d72b8;
    background: linear-gradient(135deg, #1d72b8 0%, #1aa391 100%);
    box-shadow: 0 10px 22px rgba(26, 115, 184, 0.18);
}

.work-main .primary-button:hover {
    transform: translateY(-1px);
    border-color: #165f97;
    background: linear-gradient(135deg, #1765a2 0%, #168978 100%);
    box-shadow: 0 14px 28px rgba(26, 115, 184, 0.22);
}

.work-main .secondary-button {
    min-height: 40px;
    border-color: #d5e0eb;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    color: #31506d;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.work-main .secondary-button:hover {
    transform: translateY(-1px);
    border-color: #a9c9e2;
    background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
    color: #1f5b8f;
    box-shadow: 0 12px 22px rgba(25, 91, 143, 0.12);
}

.work-main .icon-button {
    width: 40px;
    border-color: #d5e0eb;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.work-main .icon-button:hover {
    transform: translateY(-1px);
    border-color: #a9c9e2;
    background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
    box-shadow: 0 12px 22px rgba(25, 91, 143, 0.12);
}

.work-main .table-action {
    min-height: 32px;
    border-radius: 12px;
    border-color: #d6e1eb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #49627b;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

.work-main .table-action:hover {
    transform: translateY(-1px);
    border-color: #abc8e0;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    color: #1c5f95;
    box-shadow: 0 10px 18px rgba(28, 95, 149, 0.12);
}

.work-main .table-action.danger {
    border-color: #f0c9c2;
    background: linear-gradient(180deg, #fffafa 0%, #fff1ef 100%);
    color: #bf4d3e;
}

.work-main .table-action.danger:hover {
    background: linear-gradient(180deg, #fff8f7 0%, #ffeceb 100%);
    color: #a63c2f;
}

.work-view-switch {
    padding: 6px;
    border-radius: 22px;
    border: 1px solid rgba(207, 224, 239, 0.7);
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
}

.work-view-card {
    position: relative;
    overflow: hidden;
    min-height: 78px;
    border-radius: 16px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.work-view-card::after {
    content: "";
    position: absolute;
    inset: auto 14px 0 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(29, 114, 184, 0), rgba(29, 114, 184, 0.85), rgba(26, 163, 145, 0));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.work-view-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 22px rgba(19, 52, 82, 0.08);
}

.work-view-card:hover::after,
.work-view-card.is-active::after {
    opacity: 1;
    transform: translateY(0);
}

.work-view-card.is-active {
    border-color: rgba(29, 114, 184, 0.08);
    background: linear-gradient(135deg, #1d72b8 0%, #1aa391 100%);
    box-shadow: 0 14px 30px rgba(22, 114, 184, 0.2);
}

.work-view-card-icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.work-view-card.is-active .work-view-card-icon {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.work-range-actions {
    gap: 12px;
}

.work-calendar-caption {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 14px;
    border: 1px solid #d3e2ef;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.work-range-actions .primary-button {
    min-height: 42px;
    padding-inline: 16px;
    border-radius: 14px;
}

.work-calendar-instance .fc .fc-toolbar.fc-header-toolbar {
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid #dce8f2;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.work-calendar-instance .fc .fc-toolbar-chunk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.work-calendar-instance .fc .fc-button-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 16px;
    border: 1px solid #dfe8f1;
    background: #f7fbff;
}

.work-calendar-instance .fc .fc-button {
    min-height: 38px;
    border-radius: 12px;
    border-color: transparent;
    background: transparent;
    color: #35516d;
    box-shadow: none;
    padding: 0.55rem 0.9rem;
    font-weight: 700;
}

.work-calendar-instance .fc .fc-prev-button,
.work-calendar-instance .fc .fc-next-button {
    min-width: 38px;
    width: 38px;
    padding: 0;
    border-radius: 12px;
}

.work-calendar-instance .fc .fc-today-button {
    border: 1px solid #d3e2ef;
    background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
}

.work-calendar-instance .fc .fc-button:hover {
    background: rgba(29, 114, 184, 0.08);
    color: #1d5f95;
    box-shadow: none;
}

.work-calendar-instance .fc .fc-button.fc-button-active,
.work-calendar-instance .fc .fc-button:focus {
    border-color: transparent;
    background: linear-gradient(135deg, #1d72b8 0%, #1aa391 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(22, 114, 184, 0.2);
}

.work-calendar-instance .fc .fc-button-primary:disabled {
    opacity: 0.5;
    background: transparent;
    color: #8aa0b5;
}

@media (max-width: 760px) {
    .work-view-switch {
        padding: 4px;
        border-radius: 18px;
    }

    .work-view-card {
        min-height: 70px;
    }

    .work-calendar-instance .fc .fc-toolbar.fc-header-toolbar,
    .work-calendar-instance .fc .fc-toolbar-chunk,
    .work-calendar-instance .fc .fc-button-group {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Work appointment modal refinement */

.work-appointment-modal {
    top: 42px;
    width: min(920px, calc(100vw - 36px));
    max-height: calc(100vh - 84px);
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #dbe6ef;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
}

.work-appointment-modal > .modal-header {
    margin: 0;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #e3ebf3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
}

.work-appointment-modal-header-copy {
    display: grid;
    gap: 6px;
}

.work-appointment-modal .modal-header .eyebrow {
    color: #1f68a3;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.work-appointment-modal .modal-header h2 {
    margin: 0;
    color: #102a44;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.work-appointment-modal-header-note {
    margin: 0;
    color: #6c8094;
    font-size: 13px;
    line-height: 1.55;
}

.work-appointment-modal .modal-header .icon-button {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border-color: #d8e3ee;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: #48637d;
}

.work-appointment-modal .modal-header .icon-button:hover {
    color: #174f7f;
}

.work-appointment-modal-intro {
    margin: 18px 22px 0;
    padding: 18px;
    align-items: stretch;
    border-radius: 22px;
    border: 1px solid #dbe8f2;
    background:
        radial-gradient(circle at top right, rgba(29, 114, 184, 0.09), transparent 32%),
        linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f6fffd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.work-appointment-modal-intro-copy {
    display: grid;
    gap: 8px;
    max-width: 560px;
}

.work-appointment-modal-intro-copy strong {
    margin: 0;
    color: #173551;
    font-size: 16px;
    line-height: 1.35;
}

.work-appointment-modal-intro-copy span {
    color: #65798f;
    font-size: 14px;
}

.work-appointment-modal-intro-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 10px 12px;
    align-content: start;
    justify-content: end;
}

.work-appointment-modal-intro-metrics > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #d7e5f1;
    background: rgba(255, 255, 255, 0.92);
    color: #2f5678;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.work-appointment-modal-intro-metrics > span:nth-child(odd) {
    background: #edf5ff;
    color: #507091;
}

.work-appointment-modal-form {
    padding: 18px 22px 0;
}

.work-appointment-modal .modal-form-grid {
    gap: 14px 16px;
}

.work-modal-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}

.work-modal-section-title span {
    color: #6a7f93;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.work-modal-section-title strong {
    color: #183651;
    font-size: 16px;
    line-height: 1.2;
}

.work-appointment-modal .modal-form-grid label[data-field-kind]:not(.checkbox-line) {
    min-width: 0;
    padding: 12px 14px 14px;
    border-width: 1px;
    border-left-width: 1px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(249, 252, 255, 0.94), rgba(255, 255, 255, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 8px 20px rgba(15, 23, 42, 0.04);
}

.work-appointment-modal .modal-form-grid label[data-field-kind] > span:first-child {
    color: #526b84;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.work-appointment-modal .modal-form-grid label[data-field-kind] > span:first-child::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--field-accent, var(--blue)) 12%, transparent);
}

.work-appointment-modal .modal-form-grid label[data-field-kind] input,
.work-appointment-modal .modal-form-grid label[data-field-kind] select,
.work-appointment-modal .modal-form-grid label[data-field-kind] textarea {
    min-height: 48px;
    border-radius: 14px;
    background: #ffffff;
}

.work-appointment-modal .modal-form-grid label[data-field-kind="note"] textarea {
    min-height: 150px;
    resize: vertical;
}

.work-appointment-modal .ts-wrapper.single .ts-control,
.work-appointment-modal .ts-wrapper.multi .ts-control {
    min-height: 48px;
    border-radius: 14px;
    background: #ffffff;
}

.work-appointment-modal .ts-wrapper.multi .ts-control > div {
    border: 1px solid #dce8f5;
    background: linear-gradient(180deg, #f4f8ff 0%, #edf4ff 100%);
    color: #1f5a91;
    font-weight: 700;
    padding: 6px 10px;
}

.work-conflict-banner {
    border-radius: 18px;
    padding: 14px 16px;
}

.work-checkbox--appointment {
    min-height: 58px;
    border-style: solid;
    border-color: #dce7f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
    padding: 0 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.work-checkbox--appointment > span {
    color: #28455f;
    font-size: 13px;
}

.work-appointment-modal-footer {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 22px 18px;
    border-top: 1px solid #e2ebf3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff);
}

.work-modal-footer-note {
    color: #6b8195;
    font-size: 12px;
    line-height: 1.5;
}

.work-appointment-modal-footer .primary-button {
    min-height: 46px;
    padding-inline: 18px;
    border-radius: 16px;
}

@media (max-width: 980px) {
    .work-appointment-modal {
        width: min(100vw - 24px, 920px);
        top: 18px;
        max-height: calc(100vh - 36px);
    }

    .work-appointment-modal-intro-metrics {
        justify-content: start;
    }
}

@media (max-width: 760px) {
    .work-appointment-modal > .modal-header,
    .work-appointment-modal-intro,
    .work-appointment-modal-form,
    .work-appointment-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .work-appointment-modal-intro {
        margin-left: 16px;
        margin-right: 16px;
    }

    .work-appointment-modal-intro-metrics,
    .work-modal-section-title,
    .work-appointment-modal-footer {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .work-appointment-modal .modal-header h2 {
        font-size: 20px;
    }

    .work-modal-footer-note {
        order: 2;
    }
}

/* Work calendar control upgrade */

.work-range-actions {
    align-items: stretch;
    gap: 14px;
}

.work-calendar-caption {
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 9px 16px 8px;
    border-radius: 18px;
    border: 1px solid #d7e5f0;
    background:
        radial-gradient(circle at top right, rgba(29, 114, 184, 0.12), transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.work-calendar-caption small {
    color: #6d8297;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-calendar-caption strong {
    color: #143552;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.work-range-actions .primary-button {
    min-height: 48px;
    padding-inline: 18px;
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(18, 108, 173, 0.18);
}

.work-calendar-prologue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.work-calendar-tip {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid #dce7f1;
    background:
        radial-gradient(circle at top right, rgba(26, 163, 145, 0.08), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.work-calendar-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid #dbe7f2;
    background: linear-gradient(180deg, #edf5ff 0%, #ffffff 100%);
    color: #1d5f95;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.work-calendar-tip-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.work-calendar-tip-copy strong {
    color: #183651;
    font-size: 15px;
    line-height: 1.2;
}

.work-calendar-tip-copy > span {
    margin: 0;
    color: #667b90;
    font-size: 13px;
    line-height: 1.55;
}

.work-calendar-instance .fc .fc-toolbar.fc-header-toolbar {
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid #d9e6f0;
    background:
        radial-gradient(circle at top right, rgba(29, 114, 184, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.work-calendar-instance .fc .fc-toolbar-title {
    color: #102a44;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.work-calendar-instance .fc .fc-toolbar-chunk {
    gap: 10px;
}

.work-calendar-instance .fc .fc-toolbar-chunk:first-child .fc-button-group {
    padding: 4px;
    border-color: #10273f;
    background: linear-gradient(180deg, #203a57 0%, #13293f 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.work-calendar-instance .fc .fc-toolbar-chunk:first-child .fc-button {
    color: rgba(241, 247, 255, 0.92);
}

.work-calendar-instance .fc .fc-toolbar-chunk:first-child .fc-button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.work-calendar-instance .fc .fc-toolbar-chunk:last-child {
    margin-left: auto;
}

.work-calendar-instance .fc .fc-toolbar-chunk:last-child .fc-button-group:last-child {
    padding: 4px;
    border-radius: 18px;
    border-color: #dce8f3;
    background: linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%);
}

.work-calendar-instance .fc .fc-button {
    min-height: 40px;
    padding: 0.62rem 1rem;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work-calendar-instance .fc .fc-prev-button,
.work-calendar-instance .fc .fc-next-button {
    min-width: 40px;
    width: 40px;
    border-radius: 14px;
}

.work-calendar-instance .fc .fc-today-button {
    min-width: 86px;
    border-radius: 14px;
    border: 1px solid #d4e2ed;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    color: #1d557f;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.work-calendar-instance .fc .fc-button:hover {
    transform: translateY(-1px);
}

.work-calendar-instance .fc .fc-button.fc-button-active,
.work-calendar-instance .fc .fc-button:focus {
    transform: translateY(-1px);
}

.work-side-card-cta {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #dbe7f1;
    background:
        radial-gradient(circle at top right, rgba(26, 163, 145, 0.1), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #ffffff 52%, #f6fffd 100%);
    box-shadow:
        0 16px 32px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.work-side-card-cta-copy {
    display: grid;
    gap: 5px;
}

.work-side-card-cta-copy strong {
    color: #16324f;
    font-size: 15px;
    line-height: 1.2;
}

.work-side-card-cta-copy span {
    color: #687d92;
    font-size: 13px;
    line-height: 1.55;
}

.work-inline-link--card {
    min-height: 48px;
    border-radius: 18px;
    box-shadow: 0 18px 34px rgba(18, 108, 173, 0.18);
}

@media (max-width: 980px) {
    .work-calendar-prologue {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .work-calendar-caption {
        width: 100%;
    }

    .work-calendar-instance .fc .fc-toolbar.fc-header-toolbar {
        padding: 12px;
    }

    .work-calendar-instance .fc .fc-toolbar-title {
        font-size: 23px;
        text-align: center;
    }

    .work-side-card-cta {
        padding: 14px;
    }
}

/* Work module expansion */

.work-module-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.work-module-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #d8e4ef;
    background: rgba(255, 255, 255, 0.84);
    color: #49647f;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.work-module-pill:hover,
.work-module-pill.is-active {
    border-color: #7fb3de;
    background: linear-gradient(135deg, #edf6ff 0%, #f6fffd 100%);
    color: #134a77;
    transform: translateY(-1px);
}

.work-notification-layout,
.work-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) 360px;
    gap: 16px;
    align-items: start;
}

.work-notification-board,
.work-settings-panel {
    display: grid;
    gap: 16px;
}

.work-kpi-grid--notifications {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-grid-dual--notifications {
    align-items: start;
}

.work-inline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-rule-card--stack {
    display: grid;
    gap: 10px;
}

.work-settings-form {
    display: grid;
    gap: 16px;
}

.work-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.work-setting-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid #dce7f1;
    background:
        radial-gradient(circle at top right, rgba(29, 114, 184, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.work-setting-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.work-setting-card-head strong {
    display: block;
    color: #16324f;
    font-size: 17px;
    line-height: 1.2;
}

.work-setting-card-head span {
    display: block;
    margin-top: 5px;
    color: #6a8094;
    font-size: 13px;
    line-height: 1.55;
}

.work-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.work-settings-fields label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.work-settings-fields label.is-wide,
.work-settings-fields .work-checkbox.is-wide {
    grid-column: 1 / -1;
}

.work-settings-fields label > span {
    color: #536d86;
    font-size: 12px;
    font-weight: 800;
}

.work-settings-fields input {
    min-height: 48px;
    border-radius: 15px;
}

.work-setting-card--demo {
    grid-column: 1 / -1;
}

.work-setting-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.work-setting-actions .work-inline-form {
    display: flex;
    gap: 12px;
}

.work-setting-actions .secondary-button {
    width: auto;
}

.work-record-list-page,
.work-detail-workspace {
    display: grid;
    gap: 18px;
}

.work-record-list-panel {
    display: grid;
    gap: 16px;
}

.work-record-table {
    display: grid;
    gap: 10px;
}

.work-record-head,
.work-record-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(150px, 1fr) minmax(180px, 1fr) minmax(220px, 1.15fr) minmax(170px, 0.9fr);
    gap: 14px;
    align-items: center;
}

.work-record-head {
    padding: 0 10px;
    color: #647a90;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-record-row {
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid #dce7f1;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.04);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.work-record-row:hover {
    transform: translateY(-2px);
    border-color: #90b7da;
    box-shadow: 0 22px 34px rgba(20, 86, 147, 0.1);
}

.work-record-primary,
.work-record-cell {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.work-record-primary strong,
.work-record-cell strong {
    color: #17324d;
}

.work-record-primary p,
.work-record-cell span {
    margin: 0;
    color: #6b8094;
    font-size: 13px;
    line-height: 1.5;
}

.work-detail-backbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.work-detail-backbar > span {
    color: #6a8094;
    font-size: 13px;
}

.work-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(400px, 1.08fr);
    gap: 18px;
    align-items: start;
}

.work-detail-main,
.work-detail-side {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.work-detail-side {
    position: sticky;
    top: 92px;
}

.work-detail-hero-card {
    padding: 18px;
}

.work-summary-card--compact {
    padding: 16px;
}

.work-summary-card--compact .work-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.work-summary-card--compact .work-summary-grid div {
    padding: 10px 12px;
    border-radius: 14px;
}

.work-summary-card--compact .work-summary-grid strong {
    font-size: 14px;
}

.work-summary-card--compact .work-participant-clusters {
    gap: 12px;
    margin-top: 14px;
}

.work-compose-card,
.work-timeline-card {
    display: grid;
    gap: 14px;
}

.work-compose-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid #dce7f1;
    background: #f7fbff;
}

.work-compose-tab {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #56708b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.work-compose-tab.is-active {
    background: linear-gradient(135deg, #246fb0 0%, #18a88d 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(25, 112, 169, 0.18);
}

.work-compose-pane {
    display: none;
}

.work-compose-pane.is-active {
    display: grid;
}

.work-comment-tone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-tone-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone, #2563eb) 11%, #ffffff);
    color: var(--tone, #2563eb);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.work-timeline-stream {
    position: relative;
    display: grid;
    gap: 14px;
}

.work-timeline-stream::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(43, 108, 176, 0.18) 0%, rgba(15, 118, 110, 0.08) 100%);
}

.work-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.work-timeline-marker {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--timeline-tone, #2b6cb0);
    border: 4px solid #eef7ff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.work-timeline-content {
    display: grid;
    gap: 7px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid #dce7f1;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.work-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.work-timeline-head time,
.work-timeline-content em,
.work-timeline-actor {
    color: #6f8498;
    font-size: 12px;
}

.work-timeline-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--timeline-tone, #2b6cb0) 12%, #ffffff);
    color: var(--timeline-tone, #2b6cb0);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.work-timeline-content strong {
    color: #17324d;
}

.work-timeline-content p {
    margin: 0;
    color: #5f7589;
    font-size: 13px;
    line-height: 1.6;
}

.work-settings-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid #dce8f2;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f6fffd 100%);
}

.work-settings-savebar strong {
    display: block;
    color: #16324f;
    font-size: 15px;
}

.work-settings-savebar span {
    display: block;
    margin-top: 4px;
    color: #6c8094;
    font-size: 13px;
    line-height: 1.55;
}

.work-status-catalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.work-status-catalog-item {
    display: grid;
    gap: 8px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid #dce7f1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.work-status-catalog-item strong {
    color: #16324f;
    font-size: 14px;
}

.work-status-catalog-item em {
    color: #73879a;
    font-style: normal;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.work-calendar-instance .fc .fc-daygrid-event-harness {
    margin-top: 6px;
}

.work-calendar-instance .fc .fc-daygrid-day-events {
    max-height: 174px;
    overflow-y: auto;
    padding-right: 4px;
}

.work-calendar-instance .fc .fc-daygrid-day-events::-webkit-scrollbar {
    width: 6px;
}

.work-calendar-instance .fc .fc-daygrid-day-events::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(90, 118, 146, 0.35);
}

.work-calendar-instance .fc .fc-timegrid-slot {
    height: 5rem;
}

.work-calendar-instance .fc .fc-timegrid-event-harness {
    margin: 0 2px 4px;
}

.work-calendar-instance .fc .fc-timegrid-event,
.work-calendar-instance .fc .fc-timegrid-more-link {
    min-height: 56px;
}

.work-calendar-instance .fc .fc-timegrid-event .fc-event-main {
    height: 100%;
    overflow: hidden;
}

.work-calendar-instance .fc .fc-timegrid-col-events {
    margin: 0 2px 0 1px;
}

.work-calendar-instance .fc .fc-event {
    padding: 0;
}

.work-fc-event-card {
    display: grid;
    gap: 6px;
    padding: 7px 8px;
}

.work-fc-event-head {
    display: grid;
    gap: 3px;
}

.work-fc-event-card strong {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.work-fc-event-card.is-compact {
    gap: 4px;
    height: 100%;
    padding: 6px 7px;
}

.work-fc-event-card.is-compact strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    line-height: 1.28;
}

.work-fc-event-time-text {
    display: inline-flex;
    width: fit-content;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    opacity: 0.84;
}

.work-fc-event-inline-meta {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.86;
}

.work-fc-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.work-fc-event-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}

.work-calendar-instance .fc .fc-daygrid-more-link {
    margin-top: 6px;
    color: #1a5c92;
    font-weight: 800;
}

.work-calendar-instance .fc .fc-daygrid-event .work-fc-event-card strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.work-quick-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.92fr);
    gap: 18px;
    align-items: start;
}

.work-quick-main,
.work-quick-side,
.work-quick-capture-card,
.work-quick-voice-card,
.work-quick-focus-card,
.work-quick-queue-card,
.work-quick-form {
    display: grid;
    gap: 16px;
}

.work-quick-side {
    position: sticky;
    top: 92px;
}

.work-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.work-field-head .secondary-button {
    padding: 10px 14px;
    white-space: nowrap;
}

.work-kpi-grid--quick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-quick-capture-card .work-inline-form,
.work-quick-voice-card .work-inline-form {
    display: grid;
    gap: 12px;
}

.work-quick-form,
.work-quick-action-card .work-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work-voice-brief,
.work-voice-preview-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbe8f3;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #f4fffb 100%);
}

.work-voice-brief strong,
.work-voice-preview-card strong {
    color: #17324d;
}

.work-voice-brief p,
.work-voice-preview-card p {
    margin: 0;
    color: #63798d;
    font-size: 13px;
    line-height: 1.6;
}

.work-voice-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.work-voice-preview-head span {
    color: #5f768a;
    font-size: 12px;
    font-weight: 800;
}

.work-voice-preview-card.is-ready {
    border-color: #9ad7bd;
    background: linear-gradient(135deg, #f4fffa 0%, #ffffff 62%, #f6fbff 100%);
}

.work-voice-preview-card.is-warning {
    border-color: #f0d89f;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 62%, #fffaf2 100%);
}

.work-stream-list--quick .work-stream-item.is-selected {
    border-color: #79a9d2;
    box-shadow: 0 18px 30px rgba(20, 86, 147, 0.1);
}

.work-linked-quick-card {
    display: grid;
    gap: 14px;
}

.work-quick-action-grid {
    display: grid;
    gap: 14px;
}

.work-quick-action-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe7f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6fbff 100%);
}

@media (max-width: 1320px) {
    .work-record-head,
    .work-record-row,
    .work-detail-shell,
    .work-quick-layout {
        grid-template-columns: 1fr;
    }

    .work-detail-side,
    .work-quick-side {
        position: static;
    }

    .work-record-head {
        display: none;
    }
}

@media (max-width: 1120px) {
    .work-summary-card--compact .work-summary-grid,
    .work-kpi-grid--quick {
        grid-template-columns: 1fr;
    }

    .work-quick-form,
    .work-quick-action-card .work-inline-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1320px) {
    .work-notification-layout,
    .work-settings-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    .work-kpi-grid--notifications,
    .work-settings-grid,
    .work-status-catalog {
        grid-template-columns: 1fr;
    }

    .work-record-row {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    .work-settings-savebar {
        flex-direction: column;
        align-items: stretch;
    }

    .work-settings-fields {
        grid-template-columns: 1fr;
    }
}

.app-modal.cost-simulation-modal {
    left: 50%;
    top: 38px;
    width: min(1540px, calc(100vw - 44px));
    max-height: calc(100vh - 76px);
    padding: 0;
    transform: translateX(-50%);
    overflow: hidden;
}

.app-modal.cost-simulation-modal > .modal-header {
    margin: 0;
    padding: 18px 22px;
}

.cost-sim-body {
    display: grid;
    gap: 16px;
    padding: 18px 22px 22px;
    max-height: calc(100vh - 178px);
    overflow: auto;
    background: radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.11), transparent 32%), linear-gradient(180deg, #f8fbff, #fff 42%);
}

.cost-sim-hero,
.cost-sim-card,
.cost-sim-tree-panel {
    border: 1px solid #d7e6f2;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08);
}

.cost-sim-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(150px, 190px));
    gap: 12px;
    padding: 18px;
    background: radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.14), transparent 42%), linear-gradient(135deg, #eff8ff, #fff7ed);
}

.cost-sim-hero-main strong {
    display: block;
    color: #0f172a;
    font-size: clamp(1.5rem, 2vw, 2.4rem);
    line-height: 1.05;
}

.cost-sim-hero-main span,
.cost-sim-source,
.cost-sim-warning-list span,
.cost-sim-empty {
    color: #64748b;
}

.cost-sim-metric {
    display: grid;
    align-content: center;
    gap: 7px;
    min-height: 96px;
    padding: 14px 16px;
    border: 1px solid #d9e7f5;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.cost-sim-metric span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cost-sim-metric strong {
    color: #061827;
    font-size: 1.3rem;
}

.cost-sim-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: #dcfce7;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 900;
}

.cost-sim-state-badge.is-warning {
    background: #fff7ed;
    color: #b45309;
}

.cost-sim-grid,
.cost-sim-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.cost-sim-card,
.cost-sim-tree-panel {
    padding: 16px;
}

.cost-sim-card h3,
.cost-sim-tree-panel h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
}

.cost-sim-card > p,
.cost-sim-tree-panel > p {
    margin: 4px 0 14px;
    color: #64748b;
    font-size: 0.88rem;
}

.cost-sim-breakdown-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(90deg, #f8fbff, #f0fdfa);
}

.cost-sim-breakdown-toolbar span {
    color: #475569;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-sim-breakdown-toolbar select {
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
}

.cost-sim-chart {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.cost-sim-pie {
    width: 142px;
    aspect-ratio: 1;
    border: 10px solid #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 18px 34px rgba(15, 23, 42, 0.11);
}

.cost-sim-legend,
.cost-sim-component-list,
.cost-sim-tree,
.cost-sim-node-warnings {
    display: grid;
    gap: 9px;
}

.cost-sim-legend {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cost-sim-legend li,
.cost-sim-component-list span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.cost-sim-legend li.is-empty {
    display: block;
    color: #64748b;
}

.cost-sim-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--dot, #1f6feb);
}

.cost-sim-legend strong,
.cost-sim-component-list strong {
    color: #0f172a;
}

.cost-sim-legend em,
.cost-sim-component-list em {
    color: #64748b;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.cost-sim-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cost-sim-warning-list span {
    padding: 8px 11px;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.82rem;
    font-weight: 800;
}

.cost-sim-warning-list .is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #047857;
}

.cost-sim-tree-node {
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.cost-sim-tree-node.is-type-team,
.cost-sim-tree-node.is-type-module {
    border-color: #bfdbfe;
    background: linear-gradient(90deg, #eff6ff, #fff);
}

.cost-sim-tree-node.is-type-sub_module {
    border-color: #bae6fd;
    background: linear-gradient(90deg, #f0f9ff, #fff);
}

.cost-sim-tree-node.is-type-part {
    border-color: #bbf7d0;
    background: linear-gradient(90deg, #f0fdf4, #fff);
}

.cost-sim-tree-node.is-type-raw_material,
.cost-sim-tree-node.is-type-purchased,
.cost-sim-tree-node.is-type-service {
    border-color: #fed7aa;
    background: linear-gradient(90deg, #fff7ed, #fff);
}

.cost-sim-tree-node.is-missing {
    border-color: #fecaca;
    background: linear-gradient(90deg, #fff7ed, #fff);
}

.cost-sim-tree-node summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.cost-sim-tree-node summary::-webkit-details-marker {
    display: none;
}

.cost-sim-tree-title strong,
.cost-sim-tree-title em {
    display: block;
}

.cost-sim-tree-title strong,
.cost-sim-tree-cost {
    color: #0f172a;
    font-size: 1rem;
}

.cost-sim-tree-title em,
.cost-sim-node-warnings span {
    color: #64748b;
    font-style: normal;
    font-weight: 700;
}

.cost-sim-tree-cost {
    font-weight: 900;
}

.cost-sim-warning-pill {
    padding: 7px 10px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 900;
}

.cost-sim-tree-body {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.cost-sim-tree-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cost-sim-tree-metrics span {
    padding: 8px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
}

.cost-sim-tree-metrics strong {
    color: #0f172a;
}

.cost-sim-node-warnings {
    padding: 10px 12px;
    border: 1px dashed #fdba74;
    border-radius: 14px;
    background: #fff7ed;
}

.cost-sim-tree-children {
    display: grid;
    gap: 10px;
    padding-left: 18px;
    border-left: 3px solid #dbeafe;
}

.cost-sim-stage-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dceaf7;
    border-radius: 18px;
    background: rgba(248, 251, 255, 0.86);
}

.cost-sim-stage-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5eff8;
}

.cost-sim-stage-group > header strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-sim-stage-group > header em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.cost-sim-stage-group.is-modules {
    background: linear-gradient(90deg, #eff6ff, #fff);
}

.cost-sim-stage-group.is-sub_modules {
    background: linear-gradient(90deg, #ecfeff, #fff);
}

.cost-sim-stage-group.is-parts {
    background: linear-gradient(90deg, #f0fdf4, #fff);
}

.cost-sim-stage-group.is-materials {
    background: linear-gradient(90deg, #fff7ed, #fff);
}

.cost-sim-stage-list {
    display: grid;
    gap: 10px;
}

.cost-sim-stage-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #fff;
}

.cost-sim-stage-card.is-missing {
    border-color: #fecaca;
    background: #fff7ed;
}

.cost-sim-stage-card strong,
.cost-sim-stage-card em,
.cost-sim-stage-values span,
.cost-sim-stage-values b {
    display: block;
}

.cost-sim-stage-card strong {
    color: #0f172a;
    font-size: 0.92rem;
}

.cost-sim-stage-card em,
.cost-sim-stage-values span {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
}

.cost-sim-stage-values {
    min-width: 190px;
    text-align: right;
}

.cost-sim-stage-values strong {
    font-size: 1rem;
}

.cost-sim-stage-values b {
    color: #b91c1c;
    font-size: 0.75rem;
}

.cost-sim-mini-table {
    display: grid;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    overflow: hidden;
}

.cost-sim-mini-head,
.cost-sim-mini-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(90px, 0.6fr) minmax(160px, 1fr) minmax(120px, 0.7fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
}

.cost-sim-mini-head {
    background: #f1f7fc;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-sim-mini-row {
    border-top: 1px solid #e2eef8;
    color: #0f172a;
    font-weight: 800;
}

.cost-sim-mini-row.is-missing {
    background: #fff7ed;
    color: #9a3412;
}

.cost-sim-mini-row strong,
.cost-sim-mini-row em {
    display: block;
}

.cost-sim-mini-row em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
}

.cost-sim-empty {
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
}

.cost-sim-component-list span {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cost-issue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 0.76rem;
    font-weight: 900;
}

.standard-cost-table tr.is-cost-incomplete,
.product-cost-history-table tr.is-cost-incomplete {
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.98));
}

.cost-sim-tree {
    gap: 14px;
}

.cost-sim-analysis-node {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d7e6f2;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.cost-sim-analysis-node.has-issues {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fffaf4, #ffffff);
}

.cost-sim-analysis-node-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.cost-sim-analysis-node-head strong,
.cost-sim-analysis-node-head em {
    display: block;
}

.cost-sim-analysis-node-head strong {
    color: #0f172a;
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    font-weight: 950;
    letter-spacing: -0.02em;
}

.cost-sim-analysis-node-head em {
    color: #64748b;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.cost-sim-analysis-node-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 760px;
}

.cost-sim-analysis-node-totals span,
.cost-sim-analysis-node-totals b,
.cost-sim-analysis-node-totals i {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f8fbff;
    color: #334155;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.cost-sim-analysis-node-totals b {
    color: #0f172a;
    background: #eff6ff;
}

.cost-sim-analysis-node-totals i {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #b45309;
}

.cost-sim-analysis-node-totals i.is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #047857;
}

.cost-sim-analysis-section {
    display: grid;
    gap: 10px;
}

.cost-sim-analysis-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #0f766e;
    font-size: 0.9rem;
    font-weight: 950;
    text-transform: uppercase;
}

.cost-sim-analysis-section > header em {
    color: #0f172a;
    font-style: normal;
    text-transform: none;
}

.cost-sim-analysis-section.is-components > header {
    color: #15803d;
}

.cost-sim-analysis-table {
    display: grid;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #fff;
}

.cost-sim-analysis-head,
.cost-sim-analysis-row {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
}

.cost-sim-analysis-table.is-labor .cost-sim-analysis-head,
.cost-sim-analysis-table.is-labor .cost-sim-analysis-row {
    grid-template-columns: minmax(170px, 1fr) minmax(90px, 0.45fr) minmax(280px, 1.5fr) minmax(120px, 0.6fr);
}

.cost-sim-analysis-table.is-components .cost-sim-analysis-head,
.cost-sim-analysis-table.is-components .cost-sim-analysis-row {
    grid-template-columns: minmax(280px, 1.45fr) minmax(95px, 0.45fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(130px, 0.6fr) minmax(160px, 0.72fr);
}

.cost-sim-analysis-head {
    background: #eef5fb;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.cost-sim-analysis-row {
    min-height: 58px;
    border-top: 1px solid #e2edf7;
    color: #0f172a;
    font-weight: 850;
}

.cost-sim-analysis-row:nth-child(odd) {
    background: rgba(248, 251, 255, 0.72);
}

.cost-sim-analysis-row.is-missing {
    border-left: 4px solid #f97316;
    background: linear-gradient(90deg, #fff7ed, #fff);
}

.cost-sim-analysis-row strong,
.cost-sim-analysis-row em,
.cost-sim-analysis-row b {
    display: block;
}

.cost-sim-analysis-row em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
}

.cost-sim-analysis-name {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.cost-sim-expand-sign,
.cost-sim-expand-spacer {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.cost-sim-expand-sign {
    display: inline-grid;
    place-items: center;
    border: 1px solid #38bdf8;
    color: #0369a1;
    background: #f0f9ff;
}

.cost-sim-expand-sign::before {
    content: "+";
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.cost-sim-analysis-details[open] > summary .cost-sim-expand-sign::before {
    content: "-";
}

.cost-sim-analysis-details {
    display: grid;
}

.cost-sim-analysis-details > summary {
    list-style: none;
    cursor: pointer;
}

.cost-sim-analysis-details > summary::-webkit-details-marker {
    display: none;
}

.cost-sim-analysis-section.is-components.is-focus-mode .cost-sim-analysis-row {
    opacity: 0.32;
    filter: blur(0.7px) saturate(0.72);
    transform: scale(0.997);
    transform-origin: center left;
    transition: opacity 160ms ease, filter 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cost-sim-analysis-section.is-components.is-focus-mode .cost-sim-analysis-details.is-focus-path > summary,
.cost-sim-analysis-section.is-components.is-focus-mode .cost-sim-analysis-details.is-focused-detail .cost-sim-analysis-row {
    opacity: 1;
    filter: none;
    transform: none;
}

.cost-sim-analysis-details.is-focused-detail {
    position: relative;
    z-index: 2;
}

.cost-sim-analysis-details.is-focused-detail > summary {
    background: linear-gradient(90deg, #eef8ff, #ffffff 62%);
    box-shadow: inset 4px 0 0 #38bdf8, 0 14px 32px rgba(14, 116, 144, 0.12);
}

.cost-sim-analysis-details.is-focused-detail > .cost-sim-analysis-nested {
    border-left-color: #38bdf8;
    background: linear-gradient(90deg, rgba(224, 242, 254, 0.9), rgba(255, 255, 255, 0.86));
    box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.16);
}

.cost-sim-analysis-details.is-focus-path > summary .cost-sim-expand-sign {
    border-color: #0ea5e9;
    background: #e0f2fe;
    color: #075985;
}

.cost-sim-analysis-nested {
    padding: 12px 0 14px 28px;
    border-top: 1px solid #e2edf7;
    border-left: 3px solid #dbeafe;
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.62), rgba(255, 255, 255, 0));
}

.cost-sim-row-status {
    width: fit-content;
    margin-top: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
}

.cost-sim-row-status.is-ok {
    background: #dcfce7;
    color: #047857;
}

.cost-sim-row-status.is-warning {
    background: #fff7ed;
    color: #b45309;
}

.cost-sim-row-status.is-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.cost-sim-analysis-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid #e2edf7;
    background: #f8fbff;
    color: #0f172a;
    font-weight: 950;
}

.cost-sim-analysis-foot.is-wide {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.cost-sim-analysis-report {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
    gap: 14px;
    margin-top: 4px;
}

.cost-sim-analysis-report > div,
.cost-sim-analysis-report > aside {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.cost-sim-analysis-report strong {
    color: #0f172a;
}

.cost-sim-analysis-report span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-weight: 800;
}

.cost-sim-analysis-report aside {
    align-content: center;
    text-align: right;
}

.cost-sim-analysis-report aside em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.cost-sim-analysis-report aside strong {
    font-size: 1.5rem;
}

@media (max-width: 1100px) {
    .cost-sim-hero,
    .cost-sim-grid,
    .cost-sim-lower-grid,
    .cost-sim-chart,
    .cost-sim-stage-card,
    .cost-sim-analysis-node-head,
    .cost-sim-analysis-report {
        grid-template-columns: 1fr;
    }

    .cost-sim-pie {
        width: 120px;
    }

    .cost-sim-stage-values {
        min-width: 0;
        text-align: left;
    }

    .cost-sim-analysis-node-totals {
        justify-content: flex-start;
    }

    .cost-sim-analysis-table.is-labor .cost-sim-analysis-head,
    .cost-sim-analysis-table.is-labor .cost-sim-analysis-row,
    .cost-sim-analysis-table.is-components .cost-sim-analysis-head,
    .cost-sim-analysis-table.is-components .cost-sim-analysis-row,
    .cost-sim-analysis-foot.is-wide {
        grid-template-columns: 1fr;
    }

    .cost-sim-analysis-nested {
        padding-left: 14px;
    }
}

@media (max-width: 720px) {
    .app-modal.cost-simulation-modal {
        top: 12px;
        width: calc(100vw - 18px);
        max-height: calc(100vh - 24px);
    }

    .cost-sim-mini-head,
    .cost-sim-mini-row,
    .cost-sim-tree-node summary {
        grid-template-columns: 1fr;
    }

    .cost-sim-breakdown-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .cost-sim-breakdown-toolbar select {
        min-width: 0;
        width: 100%;
    }
}

/* Team builder */
.team-page {
    --team-border: #d7e5f2;
    --team-blue: #1f78b4;
    --team-green: #15945f;
    --team-ink: #0d2238;
    --team-soft: #f4f9fd;
    overflow-x: hidden;
}

.team-page .topbar {
    grid-template-columns: minmax(230px, 1fr) minmax(320px, 560px) auto;
}

.team-hero {
    align-items: stretch;
    background: linear-gradient(115deg, #dcf8f0 0%, #eef8ff 54%, #fff8ed 100%);
    border: 1px solid var(--team-border);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(28, 63, 91, 0.08);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 0.7fr);
    margin: 12px 0 16px;
    padding: 20px 22px;
}

.team-hero h2 {
    color: var(--team-ink);
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.08;
    margin: 4px 0 8px;
}

.team-section-head h2,
.team-detail-head h2 {
    color: var(--team-ink);
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.12;
    margin: 3px 0 8px;
}

.team-hero p,
.team-section-head p,
.team-detail-head p {
    color: #5a6b7d;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}

.team-hero-metrics {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-hero-metrics article,
.team-detail-metrics article {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--team-border);
    border-radius: 16px;
    padding: 13px 14px;
}

.team-hero-metrics span,
.team-detail-metrics span {
    color: #65758a;
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.team-hero-metrics strong,
.team-detail-metrics strong {
    color: #071a2d;
    display: block;
    font-size: 22px;
    margin-top: 6px;
}

.team-hero-metrics em {
    color: #65758a;
    display: block;
    font-style: italic;
    margin-top: 5px;
}

.team-shell {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 290px minmax(0, 1fr);
}

.team-side-panel,
.team-workspace,
.team-detail,
.team-lines-panel,
.team-picker-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--team-border);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(23, 45, 71, 0.08);
}

.team-side-panel,
.team-workspace {
    padding: 16px;
    min-width: 0;
}

.team-panel-head,
.team-section-head,
.team-detail-head {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.team-panel-head h2,
.team-panel-head h3 {
    color: var(--team-ink);
    font-size: 19px;
    margin: 4px 0 0;
}

.team-group-list,
.team-card-grid,
.team-candidate-list,
.team-line-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.team-group-card,
.team-card,
.team-empty-card,
.team-help-card,
.team-candidate-card,
.team-line-row {
    border: 1px solid var(--team-border);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
}

.team-group-card {
    background: #fff;
    display: block;
    padding: 13px 14px;
}

.team-group-card.is-active,
.team-card.is-active {
    background: linear-gradient(120deg, #effaf5, #f3f9ff);
    border-color: #72b6f8;
    box-shadow: inset 4px 0 0 var(--team-green);
}

.team-group-card span,
.team-card a span,
.team-candidate-card span {
    color: #63758a;
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.team-group-card strong,
.team-card a strong,
.team-candidate-card strong,
.team-line-product strong {
    color: #071a2d;
    display: block;
    font-size: 15px;
    line-height: 1.25;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-group-card em,
.team-card a em,
.team-candidate-card em,
.team-line-product em {
    color: #5e7186;
    display: block;
    font-size: 13px;
    font-style: italic;
    margin-top: 8px;
}

.team-empty-card,
.team-help-card {
    background: var(--team-soft);
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 14px;
}

.team-empty-card.is-wide {
    grid-column: 1 / -1;
}

.team-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.team-card {
    align-items: stretch;
    background: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px;
}

.team-card a {
    min-width: 0;
    text-decoration: none;
}

.team-card-actions,
.team-head-actions,
.team-line-actions,
.team-filter-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.team-head-actions form,
.team-delete-form {
    margin: 0;
}

.secondary-button.is-danger,
.table-action.danger {
    border-color: #fecaca;
    color: #b42318;
}

.secondary-button.is-muted {
    cursor: not-allowed;
    opacity: 0.72;
}

.team-card-actions button,
.small-action {
    align-items: center;
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 12px;
    color: #263a51;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 36px;
    padding: 7px 11px;
}

.team-card-actions button svg,
.small-action svg {
    height: 17px;
    width: 17px;
}

.team-detail {
    margin-top: 14px;
    padding: 16px;
}

.team-detail-head {
    align-items: stretch;
}

.team-detail-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
}

.team-detail-metrics article {
    padding: 14px;
}

.team-builder-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(410px, 0.48fr);
    margin-top: 14px;
}

.team-lines-panel,
.team-picker-panel {
    min-width: 0;
    padding: 14px;
}

.team-line-row {
    align-items: end;
    background: #fff;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) 88px 126px minmax(140px, 0.65fr) 132px;
    padding: 11px 12px;
}

.team-line-product {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-width: 0;
}

.team-type-dot {
    align-items: center;
    background: #e8f4ff;
    border: 1px solid #b9d9f4;
    border-radius: 12px;
    color: var(--team-blue);
    display: inline-flex;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.team-line-row label,
.team-filter-grid label,
.team-candidate-card label {
    display: grid;
    gap: 6px;
}

.team-line-row label span,
.team-filter-grid label span,
.team-candidate-card label span {
    color: #647589;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-line-row input,
.team-filter-grid input,
.team-filter-grid select,
.team-candidate-card input,
.team-modal input,
.team-modal select,
.team-modal textarea {
    border: 1px solid var(--team-border);
    border-radius: 12px;
    min-height: 38px;
    padding: 8px 10px;
}

#teamGroupModal.definition-modal {
    top: 56px;
    width: min(860px, calc(100vw - 32px));
    border: 1px solid #d6e7f4;
    box-shadow: 0 34px 90px rgba(15, 34, 55, 0.24);
}

#teamGroupModal .modal-header {
    align-items: center;
    background:
        radial-gradient(circle at 12% 0%, rgba(212, 247, 238, 0.85), transparent 34%),
        linear-gradient(115deg, #ffffff 0%, #f4fbff 55%, #fff8ed 100%);
    border-bottom: 1px solid #dce8f2;
    padding: 20px 22px;
}

#teamGroupModal .modal-header h2 {
    color: var(--team-ink);
    font-size: 22px;
    line-height: 1.1;
    margin: 4px 0 0;
}

.team-group-form {
    display: grid;
    gap: 14px;
}

.team-group-form-hero {
    align-items: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(222, 246, 239, 0.9), transparent 38%),
        linear-gradient(120deg, #f7fcff, #ffffff);
    border: 1px solid #d8e8f3;
    border-radius: 20px;
    display: grid;
    gap: 13px;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 16px 18px 0;
    padding: 15px;
}

.team-group-form-icon {
    align-items: center;
    background: #e9f5ff;
    border: 1px solid #c6dff5;
    border-radius: 16px;
    color: var(--team-blue);
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.team-group-form-icon svg {
    height: 22px;
    width: 22px;
}

.team-group-form-hero strong {
    color: var(--team-ink);
    display: block;
    font-size: 16px;
    line-height: 1.25;
}

.team-group-form-hero span {
    color: #5f7084;
    display: block;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 4px;
}

.team-group-form-grid {
    gap: 14px;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
    padding: 0 18px;
}

.definition-modal .team-group-form-grid label[data-field-kind]:not(.checkbox-line) {
    border-radius: 18px;
    padding: 12px;
}

.team-group-form-grid .team-group-name-field input {
    font-size: 17px;
    font-weight: 850;
}

.team-group-form-grid textarea {
    min-height: 104px;
    resize: vertical;
}

.team-group-form-note {
    background: #fff8ef;
    border: 1px solid #f4d4a6;
    border-radius: 16px;
    color: #8a4a08;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.45;
    margin: -2px 18px 0;
    padding: 11px 13px;
}

#teamGroupModal .modal-actions {
    bottom: 0;
    margin: 0;
    padding: 14px 18px 18px;
}

.team-filter-grid {
    align-items: end;
    background: linear-gradient(120deg, #f5fbff, #f9fffb);
    border: 1px solid var(--team-border);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 138px 160px auto;
    margin-top: 12px;
    padding: 12px;
}

.team-candidate-card {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 82px auto;
    min-width: 0;
    padding: 11px 12px;
}

.team-candidate-card > div,
.team-line-product > div {
    min-width: 0;
}

.team-candidate-card strong {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.team-candidate-card input {
    width: 100%;
}

.team-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.team-pagination a {
    align-items: center;
    border: 1px solid var(--team-border);
    border-radius: 11px;
    color: #25405c;
    display: inline-flex;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 10px;
    text-decoration: none;
}

.team-pagination a.is-active {
    background: var(--team-blue);
    border-color: var(--team-blue);
    color: #fff;
}

.team-empty-state {
    align-items: center;
    display: grid;
    justify-items: center;
    min-height: 320px;
    padding: 28px;
    text-align: center;
}

.notice-card {
    background: #fff8f0;
    border: 1px solid #f6c98e;
    border-radius: 18px;
    color: #8a4300;
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 14px 18px;
}

@media (max-width: 1500px) {
    .team-hero,
    .team-builder-grid {
        grid-template-columns: 1fr;
    }

    .team-hero-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .team-shell {
        grid-template-columns: 1fr;
    }

    .team-group-list {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .team-card-grid,
    .team-hero-metrics,
    .team-detail-metrics,
    .team-filter-grid,
    .team-line-row,
    .team-candidate-card {
        grid-template-columns: 1fr;
    }

    .team-head-actions,
    .team-line-actions,
    .team-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Team module refinement */
.team-page .page-shell,
.team-page .content-shell {
    min-width: 0;
}

.team-page .team-shell {
    gap: 18px;
    grid-template-columns: 300px minmax(0, 1fr);
}

.team-side-panel {
    position: sticky;
    top: 86px;
}

.team-quick-create,
.team-list-filter {
    align-items: end;
    background: linear-gradient(120deg, #f6fbff, #f7fff9);
    border: 1px solid var(--team-border);
    border-radius: 20px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(210px, 0.7fr) repeat(4, minmax(150px, 1fr)) auto;
    margin-top: 14px;
    padding: 14px;
}

.team-quick-create label.is-wide {
    grid-column: span 2;
}

.system-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.system-form-grid label small {
    color: #728197;
    font-size: 12px;
    line-height: 1.45;
}

.team-quick-create > div {
    min-width: 0;
}

.team-quick-create h3 {
    color: var(--team-ink);
    font-size: 18px;
    margin: 2px 0 4px;
}

.team-quick-create span,
.team-list-filter span,
.team-modal-filter span {
    color: #65758a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-quick-create label,
.team-list-filter label,
.team-modal-filter label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.team-quick-create input,
.team-quick-create select,
.team-list-filter input,
.team-list-filter select,
.team-modal-filter input,
.team-modal-filter select {
    border: 1px solid var(--team-border);
    border-radius: 13px;
    min-height: 42px;
    min-width: 0;
    padding: 9px 11px;
    width: 100%;
}

.team-list-filter {
    grid-template-columns: minmax(240px, 1fr) 180px auto auto auto;
}

.team-list-filter strong {
    align-self: center;
    color: #5e7186;
    justify-self: end;
}

.team-quick-create {
    grid-template-columns: 230px repeat(5, minmax(132px, 1fr)) auto;
    scroll-margin-top: 96px;
}

.team-quick-create > div {
    align-self: stretch;
    border-right: 1px dashed #cfe0ef;
    display: grid;
    place-content: center start;
    padding-right: 6px;
}

.team-quick-create .primary-button {
    min-height: 44px;
    white-space: nowrap;
}

.team-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.team-list-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 20px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px;
}

.team-list-card.is-active {
    background: linear-gradient(120deg, #f1fbf6, #f4faff);
    border-color: #79b9f7;
    box-shadow: inset 4px 0 0 var(--team-green);
}

.team-list-main {
    align-items: center;
    display: grid;
    gap: 13px;
    grid-template-columns: 44px minmax(0, 1fr);
    min-width: 0;
}

.team-list-main h3 {
    color: #071a2d;
    font-size: 19px;
    line-height: 1.2;
    margin: 4px 0 4px;
    max-width: 760px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-list-main p,
.team-list-main em {
    color: #627489;
    display: block;
    margin: 0;
}

.team-list-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.team-list-metrics span {
    background: #f2f8ff;
    border: 1px solid #d7e8f7;
    border-radius: 999px;
    color: #344a63;
    font-size: 12px;
    padding: 6px 10px;
}

.team-list-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 280px;
}

.team-list-actions form {
    display: inline-flex;
}

.team-list-actions .table-action {
    min-height: 38px;
    white-space: nowrap;
}

.app-modal.team-detail-modal,
.app-modal.team-preview-modal {
    max-height: calc(100vh - 48px);
    overflow: auto;
    width: min(1700px, calc(100vw - 56px));
}

.team-detail-modal .modal-header,
.team-preview-modal .modal-header,
.team-detail-modal .modal-actions,
.team-preview-modal .modal-actions {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    position: sticky;
    z-index: 4;
}

.team-detail-modal .modal-header,
.team-preview-modal .modal-header {
    top: 0;
}

.team-detail-modal .modal-actions,
.team-preview-modal .modal-actions {
    bottom: 0;
}

.team-modal-summary,
.team-preview-hero {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 16px 20px 0;
}

.team-modal-summary article,
.team-preview-hero article,
.team-preview-hero > div {
    background: linear-gradient(120deg, #f8fcff, #ffffff);
    border: 1px solid var(--team-border);
    border-radius: 16px;
    padding: 13px 15px;
}

.team-preview-hero > div {
    grid-column: span 2;
}

.team-modal-summary span,
.team-preview-hero span {
    color: #65758a;
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-modal-summary strong,
.team-preview-hero strong {
    color: #071a2d;
    display: block;
    font-size: 22px;
    margin-top: 6px;
}

.team-modal-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.45fr);
    padding: 16px 20px;
}

.team-modal-lines,
.team-modal-pool {
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 20px;
    min-width: 0;
    padding: 14px;
}

.team-modal-pool {
    max-height: min(720px, calc(100vh - 260px));
    overflow: auto;
}

.team-modal-filter {
    background: linear-gradient(120deg, #f5fbff, #f8fffb);
    border: 1px solid var(--team-border);
    border-radius: 16px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 135px 160px;
    margin: 12px 0;
    padding: 12px;
}

.team-candidate-list.is-modal {
    display: grid;
    gap: 10px;
}

.team-candidate-card.is-linked {
    background: #f2fff8;
    border-color: #8ddfba;
}

.team-candidate-card.is-linked b {
    color: var(--team-green);
    display: block;
    font-size: 12px;
    margin-top: 6px;
}

.team-modal-layout.is-single {
    display: block;
    padding: 16px 20px 22px;
}

.team-modal-layout.is-single .team-modal-lines {
    background: transparent;
    border: 0;
    padding: 0;
}

.team-modal-layout.is-single .team-panel-head {
    background: linear-gradient(120deg, #f5fbff, #f9fffb);
    border: 1px solid var(--team-border);
    border-radius: 18px 18px 0 0;
    margin: 0;
    padding: 14px 16px;
}

.team-inline-table {
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 0 0 18px 18px;
    border-top: 0;
    overflow: hidden;
}

.team-inline-header,
.team-inline-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 96px 126px minmax(360px, 1.5fr) 96px 140px minmax(170px, 0.75fr) 152px;
}

.team-inline-header {
    align-items: center;
    background: #eef5fb;
    color: #65758a;
    font-size: 12px;
    font-weight: 900;
    padding: 12px 18px;
    text-transform: uppercase;
}

.team-inline-row {
    align-items: center;
    border-top: 1px solid var(--team-border);
    min-width: 0;
    padding: 12px 18px;
}

.team-inline-add-row {
    background: linear-gradient(120deg, #f4fbff, #f8fff7);
    box-shadow: inset 4px 0 0 #8eddbb;
}

.team-inline-existing-row {
    background: #fff;
    min-height: 74px;
}

.team-inline-existing-row:nth-of-type(even) {
    background: #f9fcff;
}

.team-inline-row label,
.team-inline-row > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.team-inline-row label span,
.team-inline-row > div > span {
    color: #65758a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-inline-existing-row label > span {
    display: none;
}

.team-inline-row input,
.team-inline-row select {
    border: 1px solid var(--team-border);
    border-radius: 12px;
    min-height: 40px;
    min-width: 0;
    padding: 8px 10px;
    width: 100%;
}

.team-inline-existing-row input,
.team-inline-existing-row select {
    min-height: 38px;
}

.team-product-select {
    display: grid;
    grid-template-columns: minmax(160px, 0.65fr) minmax(260px, 1fr);
}

.team-product-select span {
    grid-column: 1 / -1;
}

.team-product-select input,
.team-product-select select {
    min-width: 0;
}

.team-line-product {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr);
    min-width: 0;
}

.team-line-product strong {
    color: #071a2d;
    display: block;
    font-size: 15px;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-line-product em {
    color: #627489;
    display: block;
    font-size: 12px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-inline-actions {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
}

.team-inline-actions .table-action {
    min-height: 38px;
    padding-inline: 10px;
    white-space: nowrap;
}

.team-inline-empty {
    align-items: center;
    background: #fbfdff;
    border-top: 1px solid var(--team-border);
    color: #627489;
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 28px;
    text-align: center;
}

.team-inline-empty strong {
    color: var(--team-ink);
}

.team-preview-list {
    display: grid;
    gap: 10px;
    padding: 16px 20px 20px;
}

.team-preview-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--team-border);
    border-radius: 18px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr) auto;
    padding: 13px 15px;
}

.team-preview-row.is-warning {
    background: #fff8f2;
    border-color: #f3c79f;
}

.team-preview-row span,
.team-preview-row em {
    color: #627489;
    display: block;
}

.team-preview-row strong {
    color: #071a2d;
}

.team-preview-values {
    display: grid;
    gap: 4px;
}

.team-preview-values strong {
    font-size: 18px;
}

.team-preview-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1500px) {
    .team-quick-create {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-quick-create > div,
    .team-quick-create .primary-button {
        grid-column: 1 / -1;
    }

    .team-modal-layout {
        grid-template-columns: 1fr;
    }

    .team-inline-header {
        display: none;
    }

    .team-inline-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-inline-existing-row label > span {
        display: block;
    }

    .team-product-select,
    .team-inline-actions {
        grid-column: 1 / -1;
    }

    .team-inline-existing-row .team-line-product {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .team-side-panel {
        position: static;
    }

    .team-list-card,
    .team-list-filter,
    .team-modal-summary,
    .team-preview-hero,
    .team-preview-row,
    .team-modal-filter {
        grid-template-columns: 1fr;
    }

    .team-list-actions {
        justify-content: flex-start;
        min-width: 0;
    }

    .team-preview-hero > div {
        grid-column: auto;
    }

    .team-inline-row {
        grid-template-columns: 1fr;
    }

    .team-product-select {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #teamGroupModal.definition-modal {
        top: 14px;
        width: calc(100vw - 18px);
        max-height: calc(100vh - 28px);
    }

    .team-group-form-hero,
    .team-group-form-grid {
        grid-template-columns: 1fr;
    }

    .team-group-form-icon {
        height: 40px;
        width: 40px;
    }
}

/* Quote module */
.quote-page {
    --quote-border: #cfe2f1;
    --quote-ink: #08233b;
    --quote-muted: #64748b;
    --quote-soft: #f5fbff;
    --quote-line: #e2edf6;
}

.quote-hero,
.quote-workspace,
.quote-formula-layout,
.quote-detail-panel,
.quote-list-panel {
    border: 1px solid var(--quote-border);
    border-radius: 22px;
    background: linear-gradient(135deg, #f4fcff 0%, #fff 56%, #fff8ed 100%);
    box-shadow: 0 18px 44px rgba(8, 35, 59, 0.07);
}

.quote-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
    gap: 24px;
    padding: 28px;
}

.quote-hero h2 {
    color: #07182b;
    font-size: clamp(28px, 3vw, 46px);
    letter-spacing: 0;
    line-height: 1.1;
    margin: 6px 0 12px;
    max-width: 920px;
}

.quote-hero p {
    color: #5f7289;
    margin: 0;
    max-width: 860px;
}

.quote-metrics,
.quote-summary-grid {
    display: grid;
    gap: 12px;
}

.quote-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-metrics article,
.quote-summary-grid article {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 15px 16px;
}

.quote-metrics span,
.quote-summary-grid span,
.quote-metrics small,
.quote-summary-grid small {
    color: var(--quote-muted);
    font-weight: 800;
}

.quote-metrics strong,
.quote-summary-grid strong {
    color: var(--quote-ink);
    font-size: 24px;
    line-height: 1;
}

.quote-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 16px;
}

.quote-summary-grid article.is-warning {
    background: #fff7ed;
    border-color: #fed7aa;
}

.quote-tabs {
    align-items: center;
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    display: inline-flex;
    gap: 4px;
    margin: 18px 0;
    padding: 5px;
}

.quote-tabs a {
    border-radius: 12px;
    color: #29435d;
    font-weight: 900;
    padding: 10px 16px;
    text-decoration: none;
}

.quote-tabs a.is-active {
    background: #1479b8;
    color: #fff;
}

.quote-workspace,
.quote-formula-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 360px minmax(0, 1fr);
    padding: 18px;
}

.quote-overview-panel {
    margin-bottom: 18px;
}

.quote-page .quote-workspace {
    display: none;
    grid-template-columns: minmax(0, 1fr);
}

.quote-page .quote-workspace > .quote-list-panel {
    display: none;
}

.quote-list-panel-wide {
    background: rgba(255, 255, 255, 0.9);
}

.quote-management-wrap {
    margin-top: 16px;
}

.quote-management-table {
    min-width: 980px;
}

.quote-management-table tr.is-active td {
    background: #eef9ff;
}

.quote-actions-cell {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 220px;
}

.quote-actions-cell form {
    margin: 0;
}

.quote-actions-cell .table-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.status-pill.is-locked {
    background: #fff7ed;
    color: #9a3412;
}

.quote-editor-page .quote-workspace {
    display: none;
}

.quote-editor-hero,
.quote-editor-panel {
    background: linear-gradient(135deg, #f6fcff 0%, #fff 60%, #fff8ee 100%);
    border: 1px solid var(--quote-border);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(8, 35, 59, 0.06);
    margin-bottom: 18px;
    padding: 20px;
}

.quote-editor-hero {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.quote-editor-title {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quote-editor-title h2 {
    color: var(--quote-ink);
    font-size: clamp(24px, 2vw, 34px);
    letter-spacing: 0;
    line-height: 1.12;
    margin: 0;
}

.quote-editor-title span,
.quote-editor-title em {
    color: var(--quote-muted);
    font-style: normal;
    font-weight: 800;
}

.quote-editor-title em {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    justify-self: start;
    margin-top: 4px;
    padding: 7px 10px;
}

.quote-editor-summary {
    margin: 0 0 18px;
}

.quote-editor-tabs {
    margin-bottom: 18px;
    margin-top: 0;
}

.quote-info-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 16px;
}

.quote-info-grid article {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--quote-border);
    border-radius: 15px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
}

.quote-info-grid span,
.quote-info-grid small {
    color: var(--quote-muted);
    font-size: 12px;
    font-weight: 900;
}

.quote-info-grid strong {
    color: var(--quote-ink);
    overflow-wrap: anywhere;
}

.quote-header-form {
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
}

.quote-formula-purpose {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.quote-formula-purpose article {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

.quote-formula-purpose article > span {
    align-items: center;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    color: #0369a1;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.quote-formula-purpose svg {
    height: 17px;
    width: 17px;
}

.quote-formula-purpose strong {
    color: var(--quote-ink);
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.quote-formula-purpose p {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    margin: 3px 0 0;
}

.quote-formula-note {
    background: linear-gradient(135deg, #f8fcff, #ffffff);
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
    padding: 14px;
}

.quote-formula-note strong {
    color: var(--quote-ink);
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.quote-formula-note p {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    margin: 4px 0 0;
}

.quote-formula-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.quote-formula-note-tags span {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #075985;
    font-size: 11px;
    font-weight: 950;
    padding: 5px 8px;
}

.quote-analysis-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.quote-analysis-table {
    min-width: 1320px;
}

.quote-record-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.quote-record-card {
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    min-height: 160px;
    padding: 16px;
}

.quote-record-card h3 {
    color: var(--quote-ink);
    margin: 0 0 10px;
}

.quote-record-card p {
    color: #334155;
    font-weight: 750;
    line-height: 1.45;
    margin: 0 0 8px;
}

.quote-panel-head span {
    color: var(--quote-muted);
    display: block;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    margin-top: 5px;
}

.quote-efficiency-panel {
    display: grid;
    gap: 16px;
}

.quote-efficiency-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-efficiency-summary article,
.quote-efficiency-card,
.quote-efficiency-action-bar {
    background: linear-gradient(135deg, #ffffff, #f7fcff);
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    min-width: 0;
}

.quote-efficiency-summary article {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
}

.quote-efficiency-summary span,
.quote-efficiency-summary small,
.quote-efficiency-card > div > span,
.quote-efficiency-action-bar span {
    color: var(--quote-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.quote-efficiency-summary strong,
.quote-efficiency-card h3,
.quote-efficiency-action-bar strong {
    color: var(--quote-ink);
}

.quote-efficiency-summary strong {
    font-size: 21px;
    line-height: 1.15;
}

.quote-efficiency-control-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.quote-efficiency-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.quote-efficiency-card h3 {
    font-size: 18px;
    margin: 2px 0 4px;
}

.quote-efficiency-card label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quote-efficiency-card label > span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.quote-efficiency-card input,
.quote-efficiency-card select {
    background: #fff;
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    color: #07182b;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    padding: 10px 12px;
    width: 100%;
}

.quote-efficiency-form-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-efficiency-action-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
}

.quote-efficiency-action-bar > div {
    display: grid;
    flex: 1 1 320px;
    gap: 4px;
    min-width: 0;
}

.quote-efficiency-action-bar form {
    margin: 0;
}

.quote-efficiency-action-bar.is-readonly {
    background: #f8fbff;
}

.quote-efficiency-table {
    min-width: 1180px;
}

.quote-efficiency-table td > span {
    display: block;
}

.quote-detail-actions .danger {
    border-color: #fecaca;
    color: #b91c1c;
}

.quote-list-panel,
.quote-detail-panel {
    background: rgba(255, 255, 255, 0.84);
    border-radius: 20px;
    box-shadow: none;
    min-width: 0;
    padding: 18px;
}

.quote-list-panel {
    position: sticky;
    top: 18px;
}

.quote-panel-head,
.quote-detail-head,
.quote-card-head {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-width: 0;
}

.quote-panel-head h2,
.quote-detail-head h2,
.quote-card-head h3 {
    color: var(--quote-ink);
    margin: 3px 0 0;
}

.quote-panel-head > strong,
.quote-card-head > strong {
    background: #eef6ff;
    border-radius: 999px;
    color: #075985;
    padding: 8px 12px;
    white-space: nowrap;
}

.quote-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.quote-list-card {
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    color: inherit;
    display: grid;
    gap: 5px;
    padding: 14px;
    text-decoration: none;
}

.quote-list-card.is-active {
    background: #edf9ff;
    border-color: #38bdf8;
    box-shadow: inset 4px 0 0 #0ea5e9;
}

.quote-list-card span,
.quote-list-card small,
.quote-list-card em {
    color: var(--quote-muted);
    font-style: normal;
    font-weight: 800;
}

.quote-list-card strong {
    color: var(--quote-ink);
    line-height: 1.25;
}

.quote-empty {
    align-items: center;
    background: #f8fbff;
    border: 1px dashed var(--quote-border);
    border-radius: 14px;
    color: var(--quote-muted);
    display: grid;
    font-weight: 800;
    justify-items: center;
    min-height: 58px;
    padding: 18px;
    text-align: center;
}

.quote-empty.large {
    min-height: 320px;
}

.quote-detail-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.quote-detail-actions form {
    margin: 0;
}

.quote-inline-form,
.quote-add-line-form,
.quote-modal-form {
    display: grid;
    gap: 12px;
}

.quote-inline-form {
    border-top: 1px solid var(--quote-line);
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    margin-top: 18px;
    padding-top: 18px;
}

.quote-add-line-form {
    background: #f8fcff;
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    grid-template-columns: minmax(320px, 1fr) repeat(5, minmax(110px, 0.18fr)) auto;
    margin-top: 14px;
    padding: 14px;
}

.quote-add-line-form-wide {
    align-items: end;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.32fr) minmax(220px, 0.32fr);
}

.quote-add-line-form-wide > label,
.quote-add-line-form-wide > .quote-selected-result-field,
.quote-add-line-form-wide > .quote-selected-result-note,
.quote-add-line-form-wide > .primary-button {
    align-self: end;
}

.quote-add-line-form-wide > label:not(.quote-selected-result-field) {
    align-content: start;
}

.quote-add-line-form-wide > .primary-button {
    min-height: 52px;
    min-width: 220px;
    width: 100%;
}

.quote-inline-form label,
.quote-add-line-form label,
.quote-modal-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quote-inline-form label.wide,
.quote-modal-form label.wide {
    grid-column: span 2;
}

.quote-inline-form span,
.quote-add-line-form span,
.quote-modal-form span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.quote-inline-form input,
.quote-inline-form select,
.quote-add-line-form input,
.quote-add-line-form select,
.quote-modal-form input,
.quote-modal-form select,
.quote-modal-form textarea {
    background: #fff;
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    color: #07182b;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    min-width: 0;
    padding: 10px 12px;
    width: 100%;
}

.quote-selected-result-note {
    align-self: stretch;
    background: #fff;
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    display: grid;
    gap: 2px;
    min-height: 42px;
    padding: 8px 12px;
}

.quote-selected-result-field small,
.quote-selected-result-note small {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.quote-selected-result-note strong {
    color: var(--quote-ink);
    font-size: 13px;
    font-weight: 950;
}

.quote-product-picker {
    background: linear-gradient(135deg, #ffffff, #f8fcff);
    border: 1px solid #cfe0ef;
    border-radius: 16px;
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    padding: 12px;
}

.quote-product-picker.has-error {
    border-color: #fca5a5;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.quote-picker-label-row,
.quote-product-search-row,
.quote-product-filter-row {
    align-items: center;
    display: grid;
    gap: 10px;
}

.quote-picker-label-row {
    grid-template-columns: 1fr auto;
}

.quote-picker-label-row strong {
    background: #eef6ff;
    border-radius: 999px;
    color: #075985;
    font-size: 12px;
    font-weight: 950;
    padding: 5px 9px;
}

.quote-product-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.quote-product-search-row .secondary-button {
    min-height: 42px;
}

.quote-product-filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-product-selected {
    background: #f8fbff;
    border: 1px dashed #cfe0ef;
    border-radius: 12px;
    color: #64748b;
    display: grid;
    font-size: 12px;
    font-weight: 850;
    gap: 2px;
    padding: 9px 11px;
}

.quote-product-selected strong {
    color: var(--quote-ink);
    font-size: 13px;
}

.quote-product-selected span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.quote-product-results {
    border: 1px solid #dbeaf5;
    border-radius: 14px;
    display: grid;
    gap: 7px;
    max-height: 330px;
    overflow: auto;
    padding: 8px;
}

.quote-product-result {
    align-items: center;
    background: #fff;
    border: 1px solid #e2edf6;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 10px 12px;
    text-align: left;
}

.quote-product-result:hover,
.quote-product-result:focus-visible,
.quote-product-result.is-selected {
    background: #eef8ff;
    border-color: #38bdf8;
    outline: none;
}

.quote-product-result-main,
.quote-product-result-side {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.quote-product-result-main strong {
    color: var(--quote-ink);
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-product-result-main small {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-product-result-side {
    justify-items: end;
}

.quote-product-result-side em {
    color: #475569;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.quote-product-result-side b {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    padding: 5px 9px;
    white-space: nowrap;
}

.quote-product-result-side b.is-ready {
    background: #dcfce7;
    color: #047857;
}

.quote-product-result-side b.is-missing {
    background: #fee2e2;
    color: #b91c1c;
}

.quote-product-result-side b.is-blocked {
    background: #ffedd5;
    color: #c2410c;
}

.quote-product-no-result {
    align-items: center;
    color: #64748b;
    display: grid;
    font-weight: 850;
    min-height: 58px;
    text-align: center;
}

.quote-add-line-form .primary-button,
.quote-inline-form .secondary-button {
    align-self: end;
    min-height: 42px;
}

.quote-manual-token-group {
    align-items: end;
    background: #fff;
    border: 1px dashed #b7d9f2;
    border-radius: 16px;
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 0.9fr) repeat(auto-fit, minmax(132px, 1fr));
    padding: 12px;
}

.quote-manual-token-group strong {
    color: var(--quote-ink);
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.quote-manual-token-group p {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    margin: 3px 0 0;
}

.quote-line-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.quote-line-actions form {
    margin: 0;
}

.quote-lines-card {
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    margin-top: 18px;
    overflow: hidden;
}

.quote-card-head {
    padding: 16px 18px;
}

.quote-table-wrap {
    overflow-x: auto;
    padding-bottom: 8px;
}

.quote-table {
    border-collapse: collapse;
    min-width: 1180px;
    width: 100%;
}

.quote-table th {
    background: #edf6fd;
    color: #50627a;
    font-size: 12px;
    letter-spacing: 0;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}

.quote-table td {
    border-top: 1px solid var(--quote-line);
    color: #0b2239;
    padding: 13px 14px;
    vertical-align: middle;
}

.quote-table td > span,
.quote-table td small,
.quote-product-cell span {
    color: #64748b;
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.quote-product-cell {
    min-width: 260px;
}

.quote-result-stack {
    display: grid;
    gap: 6px;
    min-width: 230px;
}

.quote-result-stack > span {
    background: #f8fffb;
    border: 1px solid #cdeedd;
    border-left: 4px solid var(--quote-accent, #0ea5e9);
    border-radius: 12px;
    color: #047857;
    display: grid;
    font-weight: 900;
    gap: 2px;
    padding: 7px 9px;
}

.quote-result-stack b {
    color: #075985;
    font-size: 11px;
}

.quote-result-stack em {
    color: #b91c1c;
    font-style: normal;
    font-weight: 800;
}

.quote-distribution-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.quote-distribution-card {
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    display: grid;
    gap: 10px;
    padding: 16px;
}

.quote-distribution-card h3 {
    color: var(--quote-ink);
    font-size: 15px;
    margin: 0;
}

.quote-dist-row {
    display: grid;
    gap: 5px;
    position: relative;
}

.quote-dist-row span,
.quote-dist-row strong {
    color: #334155;
    font-weight: 900;
}

.quote-dist-row strong {
    justify-self: end;
    margin-top: -22px;
}

.quote-dist-row em {
    background: linear-gradient(90deg, #0ea5e9, #22c55e);
    border-radius: 999px;
    display: block;
    height: 7px;
    min-width: 4px;
}

.quote-distribution-chart-grid {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.quote-distribution-chart-card {
    gap: 14px;
    min-height: 260px;
    padding: 18px;
}

.quote-chart-card-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.quote-chart-card-head div {
    min-width: 0;
}

.quote-chart-card-head span {
    color: var(--quote-blue);
    display: block;
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.quote-chart-card-head strong {
    background: #eef8ff;
    border: 1px solid #d7ecfb;
    border-radius: 999px;
    color: #075985;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 950;
    padding: 7px 10px;
}

.quote-chart-card-body {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 150px minmax(0, 1fr);
}

.quote-donut {
    align-self: center;
    aspect-ratio: 1;
    background: var(--quote-chart, conic-gradient(#e8f1f8 0 100%));
    border: 1px solid #dbeafe;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74), 0 18px 34px rgba(15, 23, 42, 0.08);
    display: grid;
    place-items: center;
    position: relative;
    width: 150px;
}

.quote-donut::after {
    background:
        radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.96), #fff 68%),
        #fff;
    border: 1px solid rgba(219, 234, 254, 0.9);
    border-radius: inherit;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
    content: "";
    inset: 30px;
    position: absolute;
}

.quote-donut-center {
    display: grid;
    gap: 2px;
    max-width: 92px;
    min-width: 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.quote-donut-center strong {
    color: #0b2239;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.quote-donut-center small {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.25;
}

.quote-dist-legend {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.quote-dist-legend-row {
    align-items: center;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.quote-dist-legend-row span {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.quote-dist-legend-row span i {
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.08);
    display: inline-flex;
    flex: 0 0 auto;
    height: 10px;
    width: 10px;
}

.quote-dist-legend-row b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-dist-legend-row strong {
    justify-self: end;
    margin-top: 0;
}

.quote-dist-legend-row small {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    grid-column: 1 / -1;
    padding-left: 18px;
}

.quote-dist-legend-row em {
    grid-column: 1 / -1;
    height: 5px;
    margin-left: 18px;
}

.quote-token-strip {
    background: #f8fcff;
    border: 1px dashed #bae6fd;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding: 12px;
}

.quote-token-strip span {
    background: #eef8ff;
    border: 1px solid #d7ecfb;
    border-radius: 999px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 9px;
}

.quote-formula-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.quote-formula-list article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--quote-border);
    border-left: 5px solid var(--quote-accent, #0ea5e9);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
    padding: 13px 14px;
}

.quote-formula-list span,
.quote-formula-list small {
    color: var(--quote-muted);
    display: block;
    font-weight: 800;
}

.quote-formula-list strong {
    color: var(--quote-ink);
    display: block;
    margin: 3px 0;
}

.quote-formula-list code {
    background: #f8fbff;
    border: 1px solid var(--quote-line);
    border-radius: 12px;
    color: #0f172a;
    display: block;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 900;
    padding: 12px;
    white-space: normal;
}

.quote-formula-workspace {
    display: grid;
    gap: 14px;
}

.quote-formula-set-head {
    align-items: flex-start;
    gap: 14px;
}

.quote-formula-set-head form {
    margin-left: auto;
}

.quote-formula-section {
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.72), rgba(255, 255, 255, 0.96));
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.quote-section-head.compact {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.quote-section-head.compact h3 {
    color: var(--quote-ink);
    font-size: 17px;
    margin: 2px 0 0;
}

.quote-section-head.compact > span {
    background: #eef8ff;
    border: 1px solid #d7ecfb;
    border-radius: 999px;
    color: #075985;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 10px;
}

.quote-formula-token-grid,
.quote-formula-quick-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quote-formula-token-grid button,
.quote-formula-quick-tools button {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    color: #0369a1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    min-height: 32px;
    padding: 6px 10px;
}

.quote-formula-token-grid button:hover,
.quote-formula-quick-tools button:hover {
    background: #dff3ff;
    border-color: #7dd3fc;
}

.quote-formula-quick-tools {
    background: #f8fbff;
    border: 1px dashed #cfe3f4;
    border-radius: 14px;
    padding: 10px;
}

.quote-formula-quick-tools > span {
    color: var(--quote-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.quote-formula-add-form {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) 100px 130px 90px;
}

.quote-formula-add-form .wide {
    grid-column: 1 / -1;
}

.quote-formula-add-form textarea {
    min-height: 96px;
    resize: vertical;
}

.quote-formula-show-check {
    align-self: center;
    background: #f8fbff;
    border: 1px solid var(--quote-line);
    border-radius: 12px;
    min-height: 44px;
    padding: 0 12px;
}

.quote-formula-add-form .primary-button {
    align-self: center;
    min-height: 44px;
}

.quote-formula-order-form {
    display: none;
}

.quote-formula-sort-list {
    display: grid;
    gap: 10px;
}

.quote-formula-row-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--quote-border);
    border-left: 5px solid var(--quote-accent, #0ea5e9);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 12px;
    grid-template-columns: 42px 54px minmax(190px, 0.35fr) minmax(280px, 1fr) auto;
    padding: 12px;
}

.quote-formula-row-card.is-dragging {
    opacity: 0.62;
}

.quote-formula-drag {
    align-items: center;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    color: #075985;
    cursor: grab;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.quote-formula-order-pill {
    align-items: center;
    background: #eef8ff;
    border: 1px solid #d7ecfb;
    border-radius: 999px;
    color: #075985;
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    min-width: 42px;
}

.quote-formula-row-main span,
.quote-formula-row-main small {
    color: var(--quote-muted);
    display: block;
    font-size: 12px;
    font-weight: 900;
}

.quote-formula-row-main strong {
    color: var(--quote-ink);
    display: block;
    margin: 3px 0;
}

.quote-formula-row-card code {
    background: #f8fbff;
    border: 1px solid var(--quote-line);
    border-radius: 12px;
    color: #0f172a;
    display: block;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 900;
    line-height: 1.45;
    padding: 11px 12px;
    white-space: normal;
}

.app-modal.quote-modal {
    left: 50%;
    max-width: 980px;
    top: 76px;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 32px));
}

.quote-modal-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
}

.quote-modal-form .modal-actions {
    grid-column: 1 / -1;
}

.quote-formula-modal {
    max-width: 1180px;
    width: min(1180px, calc(100vw - 32px));
}

.quote-formula-editor {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
}

.quote-formula-editor-row {
    align-items: center;
    background: #f8fcff;
    border: 1px solid var(--quote-border);
    border-radius: 14px;
    display: grid;
    gap: 8px;
    grid-template-columns: 150px 170px minmax(260px, 1fr) 58px 92px 100px;
    padding: 10px;
}

.quote-formula-editor-row input[type="color"] {
    padding: 3px;
}

.inline-check {
    align-items: center;
    display: flex !important;
    flex-direction: row;
    font-size: 12px;
    font-weight: 900;
    gap: 7px;
}

.inline-check input {
    min-height: auto;
    width: auto;
}

.secondary-button.success {
    border-color: #a7f3d0;
    color: #047857;
}

.secondary-button.warning {
    border-color: #fed7aa;
    color: #9a3412;
}

.quote-approval-banner,
.quote-approval-record,
.quote-approval-panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--quote-border);
    border-radius: 20px;
}

.quote-approval-banner {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
    margin: -4px 0 18px;
    padding: 16px 18px;
}

.quote-approval-banner h3 {
    color: var(--quote-ink);
    margin: 3px 0 4px;
}

.quote-approval-banner span {
    color: var(--quote-muted);
    font-weight: 800;
}

.quote-approval-decision-form {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
}

.quote-approval-decision-form label {
    display: grid;
    gap: 6px;
}

.quote-approval-decision-form label span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.quote-approval-decision-form input {
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    min-width: 0;
    padding: 10px 12px;
}

.quote-approval-record {
    margin-top: 18px;
    padding: 16px;
}

.quote-approval-rule-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.quote-approval-rule-list span {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
}

.quote-approval-flow {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 14px;
}

.quote-approval-flow article {
    align-items: start;
    background: #f8fcff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 12px;
}

.quote-approval-flow article.is-current {
    background: #f0fdf4;
    border-color: #86efac;
}

.quote-approval-flow article > span {
    align-items: center;
    background: #e0f2fe;
    border-radius: 999px;
    color: #075985;
    display: inline-flex;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.quote-approval-flow strong,
.quote-approval-flow small,
.quote-approval-flow em,
.quote-approval-history p {
    color: #334155;
    display: block;
    font-style: normal;
    font-weight: 800;
    margin: 0;
}

.quote-approval-flow em {
    color: #64748b;
    margin-top: 4px;
}

.quote-approval-history {
    border-top: 1px solid var(--quote-line);
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
}

.quote-approval-history p span {
    color: #64748b;
}

.quote-approval-layout {
    display: grid;
    gap: 18px;
}

.quote-approval-form {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.quote-approval-explainer {
    background: linear-gradient(120deg, #f8fcff, #ffffff 55%, #f7fff9);
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 12px;
}

.quote-approval-explainer article {
    align-items: start;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    display: grid;
    gap: 6px;
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    padding: 11px;
}

.quote-approval-explainer article > span {
    align-items: center;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    color: #075985;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.quote-approval-explainer strong,
.quote-approval-explainer em {
    display: block;
    font-style: normal;
    min-width: 0;
}

.quote-approval-explainer strong {
    color: var(--quote-ink);
    font-size: 13px;
    font-weight: 950;
}

.quote-approval-explainer em {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.quote-approval-summary,
.quote-visibility-preview {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-approval-summary article,
.quote-visibility-preview article {
    background: #f8fcff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
}

.quote-visibility-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-approval-summary small,
.quote-visibility-preview small {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.quote-approval-summary strong,
.quote-visibility-preview strong {
    color: var(--quote-ink);
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-approval-summary span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.quote-approval-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-approval-card {
    background: #fff;
    border: 1px solid var(--quote-border);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
}

.quote-approval-card.is-wide {
    grid-column: 1 / -1;
}

.quote-approval-card h3 {
    color: var(--quote-ink);
    margin: 0;
}

.quote-approval-card-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}

.quote-approval-card-head span {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #075985;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 950;
    padding: 6px 9px;
}

.quote-approval-note {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
}

.quote-approval-card label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quote-approval-card label > span:first-child,
.quote-approval-card small,
.quote-approval-savebar span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.quote-approval-card input,
.quote-approval-card select {
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    color: #07182b;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    min-width: 0;
    padding: 10px 12px;
    width: 100%;
}

.quote-approval-card select[multiple] {
    min-height: 150px;
}

.quote-switch {
    align-items: center;
    background: #f8fcff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    display: flex !important;
    gap: 10px;
    padding: 10px 12px;
}

.quote-switch input {
    accent-color: #0ea5e9;
    min-height: auto;
    width: auto;
}

.quote-approval-columns {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-approval-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quote-approval-savebar {
    align-items: center;
    background: #f8fcff;
    border: 1px solid var(--quote-border);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 12px 14px;
}

@media (max-width: 1500px) {
    .quote-hero,
    .quote-workspace,
    .quote-formula-layout {
        grid-template-columns: 1fr;
    }

    .quote-list-panel {
        position: static;
    }

    .quote-inline-form,
    .quote-add-line-form,
    .quote-header-form,
    .quote-add-line-form-wide,
    .quote-formula-add-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-inline-form label.wide,
    .quote-add-line-form .product-select,
    .quote-inline-form .secondary-button,
    .quote-add-line-form .primary-button {
        grid-column: 1 / -1;
    }

    .quote-formula-purpose {
        grid-template-columns: 1fr;
    }

    .quote-formula-note {
        grid-template-columns: 1fr;
    }

    .quote-formula-row-card {
        grid-template-columns: 42px 54px minmax(180px, 0.45fr) minmax(260px, 1fr) auto;
    }

    .quote-distribution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-editor-hero {
        display: grid;
    }

    .quote-info-grid,
    .quote-record-grid,
    .quote-efficiency-summary,
    .quote-efficiency-control-grid,
    .quote-approval-grid,
    .quote-approval-columns,
    .quote-approval-explainer,
    .quote-approval-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-approval-banner,
    .quote-approval-decision-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .quote-metrics,
    .quote-summary-grid,
    .quote-distribution-grid,
    .quote-info-grid,
    .quote-record-grid,
    .quote-modal-form,
    .quote-inline-form,
    .quote-add-line-form,
    .quote-header-form,
    .quote-add-line-form-wide,
    .quote-formula-add-form,
    .quote-formula-list article,
    .quote-formula-editor-row,
    .quote-formula-row-card,
    .quote-efficiency-summary,
    .quote-efficiency-control-grid,
    .quote-efficiency-form-grid,
    .quote-approval-grid,
    .quote-approval-columns,
    .quote-approval-explainer,
    .quote-approval-summary,
    .quote-visibility-preview {
        grid-template-columns: 1fr;
    }

    .quote-approval-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .quote-formula-editor-row input,
    .quote-formula-editor-row select {
        width: 100%;
    }

    .quote-formula-set-head,
    .quote-section-head.compact {
        align-items: stretch;
        flex-direction: column;
    }

    .quote-formula-set-head form {
        margin-left: 0;
    }

    .quote-formula-row-card code,
    .quote-formula-row-card form,
    .quote-formula-add-form .primary-button,
    .quote-formula-show-check {
        grid-column: 1 / -1;
    }

    .quote-manual-token-group {
        grid-template-columns: 1fr;
    }

    .quote-product-search-row,
    .quote-product-filter-row,
    .quote-product-result {
        grid-template-columns: 1fr;
    }

    .quote-product-result-side {
        justify-items: start;
    }

    .quote-chart-card-body {
        grid-template-columns: 1fr;
    }

    .quote-donut {
        justify-self: center;
        width: 136px;
    }

    .quote-donut::after {
        inset: 27px;
    }
}
.global-notification-button{position:relative}.global-notification-button b{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#e5484d;color:#fff;border:2px solid #fff;font-size:10px;line-height:15px}.global-notification-backdrop{z-index:1200;align-items:flex-start;justify-content:flex-end;padding:72px 22px 22px;background:rgba(12,29,43,.38);backdrop-filter:blur(4px)}.global-notification-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 94px);padding:0;overflow:hidden;border-radius:24px;box-shadow:0 24px 80px rgba(11,31,48,.28);display:flex;flex-direction:column}.global-notification-head{padding:22px 24px 18px;display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #e7edf2;background:linear-gradient(145deg,#fff,#f4f8fb)}.global-notification-head h2{margin:2px 0 4px;font-size:24px}.global-notification-head span{color:#6b7b88;font-size:13px}.global-notification-feature{margin:18px 20px 10px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#163b57,#205b72);color:#fff}.global-notification-feature>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.global-notification-feature span{color:#b9d7df;font-size:12px}.global-notification-top{display:grid;gap:7px}.global-notification-top-row{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.09)}.global-notification-top-row i{font-style:normal;color:#8ce7c8}.global-notification-top-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.global-notification-top-row b{color:#8ce7c8}.global-notification-list{padding:8px 20px 18px;overflow:auto;display:grid;gap:9px}.global-notification-item{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:start;padding:13px;border:1px solid #e6edf2;border-radius:15px;background:#fff;color:inherit;text-decoration:none}.global-notification-item:hover{border-color:#a9c7d4;background:#f8fbfc}.global-notification-item>i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e8f3f5;color:#1d6573;font-style:normal}.global-notification-item strong,.global-notification-item span,.global-notification-item small{display:block}.global-notification-item span{margin-top:3px;color:#637581;font-size:12px;line-height:1.35}.global-notification-item small{color:#8a99a3;font-size:10px}.global-notification-item>em{font-style:normal;font-weight:800;color:#d45b45;white-space:nowrap}.global-notification-modal footer{padding:14px 20px;border-top:1px solid #e7edf2;background:#f8fafb;text-align:right}@media(max-width:700px){.global-notification-backdrop{padding:56px 0 0;align-items:flex-end}.global-notification-modal{width:100%;max-height:calc(100vh - 56px);border-radius:24px 24px 0 0}.global-notification-feature{margin:14px}.global-notification-list{padding:6px 14px 16px}}

/* Ortak bildirim: sag drawer + merkez detay modalı. */
.modal-backdrop.global-notification-backdrop{position:fixed;inset:0;display:flex;align-items:stretch;justify-content:flex-end;padding:0;background:rgba(9,25,38,.46)}
.global-notification-backdrop[hidden],.global-notification-detail-backdrop[hidden]{display:none!important}
.global-notification-backdrop .global-notification-modal{margin:0;width:min(500px,100vw);height:100vh;max-height:none;border-radius:0;border:0;box-shadow:-22px 0 60px rgba(9,27,40,.22)}
.global-notification-head{padding:20px 22px 16px}.global-notification-feature{margin:14px 16px 8px;padding:14px}.global-notification-list{padding:8px 16px 16px}.global-notification-item{width:100%;font:inherit;text-align:left;cursor:pointer}.global-notification-item:focus-visible{outline:3px solid rgba(28,112,133,.25);outline-offset:2px}
.modal-backdrop.global-notification-detail-backdrop{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,25,38,.56);backdrop-filter:blur(7px)}
.global-notification-detail-modal{width:min(680px,100%);max-height:calc(100vh - 48px);padding:0;overflow:auto;border-radius:24px;box-shadow:0 30px 90px rgba(5,21,33,.32)}.global-notification-detail-modal>header{display:grid;grid-template-columns:44px 1fr 44px;gap:14px;align-items:center;padding:20px 22px;border-bottom:1px solid #e4ebf0;background:#f8fafc}.global-notification-detail-modal h2{margin:2px 0 0}.global-notification-detail-hero{margin:22px;padding:22px;border-radius:18px;background:linear-gradient(135deg,#163b57,#246b77);color:#fff}.global-notification-detail-hero span{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.13);font-size:11px;text-transform:uppercase}.global-notification-detail-hero strong{display:block;margin-top:14px;font-size:22px}.global-notification-detail-hero p{margin:7px 0 0;color:#c9e0e4;line-height:1.55}.global-notification-detail-values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 22px}.global-notification-detail-values article{padding:15px;border:1px solid #e3ebef;border-radius:14px;background:#fff}.global-notification-detail-values span,.global-notification-detail-values strong{display:block}.global-notification-detail-values span{color:#74848e;font-size:11px}.global-notification-detail-values strong{margin-top:5px;font-size:18px}.global-notification-detail-meta{margin:18px 22px;padding:4px 16px;border-radius:14px;background:#f4f7f9}.global-notification-detail-meta div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #e1e8ec}.global-notification-detail-meta div:last-child{border:0}.global-notification-detail-meta dt{color:#7a8992}.global-notification-detail-meta dd{margin:0;font-weight:700}.global-notification-detail-modal>footer{padding:16px 22px;border-top:1px solid #e4ebf0;text-align:right}
@media(max-width:700px){.global-notification-backdrop .global-notification-modal{width:100%;height:100vh;border-radius:0}.modal-backdrop.global-notification-detail-backdrop{padding:0;align-items:flex-end}.global-notification-detail-modal{max-height:92vh;border-radius:24px 24px 0 0}.global-notification-detail-values{grid-template-columns:1fr}.global-notification-detail-hero,.global-notification-detail-values,.global-notification-detail-meta{margin-left:16px;margin-right:16px}}

.global-notification-head-actions{display:flex;align-items:center;gap:8px}.global-notification-head-actions .secondary-button{min-height:38px;padding:0 12px;font-size:11px;white-space:nowrap}.global-notification-feature{border:1px solid #dce9eb;background:linear-gradient(145deg,#f4faf9,#edf5f6);color:#17384a;box-shadow:none}.global-notification-feature>div:first-child{padding:0 2px 5px}.global-notification-feature span{color:#607984}.global-notification-top-row{border:1px solid #dbe8e9;background:#fff;box-shadow:0 3px 10px rgba(25,68,78,.04)}.global-notification-top-row i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:#e1f3ef;color:#18735f}.global-notification-top-row b{color:#168064}.global-notification-detail-modal>footer{display:flex;justify-content:flex-end;gap:9px}@media(max-width:560px){.global-notification-head{align-items:flex-start}.global-notification-head-actions .secondary-button{width:38px;overflow:hidden;color:transparent;padding:0}.global-notification-head-actions .secondary-button:after{content:'✓';color:#17384a;font-size:16px}}
.cost-health-badges{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}.cost-health-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.02em;line-height:1.1;box-shadow:0 2px 8px rgba(15,23,42,.08)}.cost-health-badge svg{width:12px;height:12px}.cost-health-badge.is-missing{color:#9a3412;background:#ffedd5;border:1px solid #fdba74}.cost-health-badge.is-stale{color:#fff;background:linear-gradient(110deg,#f59e0b 0 48%,#0f8b86 52% 100%);border:1px solid rgba(15,118,110,.25)}.is-stale-cost-row>td:first-child{box-shadow:inset 4px 0 0 #0f8b86}
.live-queue-table tbody tr.queue-row-blocked{background:#fffaf0}.queue-status-blocked{color:#9a5b00!important;background:#fff1c7!important;border-color:#f2c66d!important}.queue-row-blocked .live-queue-source em{color:#9a5b00!important}