:root {
    --ui-zoom: 1;
    --nav: #111827;
    --nav-soft: #1c2535;
    --nav-text: #a9b2c1;
    --ink: #172033;
    --text: #344054;
    --muted: #7b8495;
    --line: #e6e9ef;
    --line-strong: #d8dce5;
    --canvas: #f5f6f9;
    --surface: #ffffff;
    --violet: #6758e8;
    --violet-dark: #5546d3;
    --violet-soft: #eeecff;
    --blue: #2774d8;
    --blue-soft: #eaf3ff;
    --teal: #12866f;
    --teal-soft: #e7f6f2;
    --amber: #b96f10;
    --amber-soft: #fff4df;
    --red: #cb4545;
    --red-soft: #fff0f0;
    --green: #24845a;
    --green-soft: #eaf7f0;
    --shadow: 0 1px 2px rgba(16, 24, 40, .025), 0 6px 18px rgba(16, 24, 40, .035);
    color: var(--text);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
}

html[data-ui-scale="large"] { --ui-zoom: 1.3; }
html[data-ui-scale="normal"] { --ui-zoom: 1; }

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--canvas); }
body.sidebar-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app-layout { min-width: 0; min-height: 100vh; overflow-x: clip; zoom: var(--ui-zoom); }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 264px;
    max-width: 100vw;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    display: flex;
    flex-direction: column;
    color: var(--nav-text);
    background: var(--nav);
    border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand { height: 76px; padding: 0 19px 0 21px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-lockup { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand-symbol { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--violet); border-radius: 9px; box-shadow: 0 8px 24px rgba(103,88,232,.25); }
.brand-symbol svg { width: 27px; height: 27px; fill: currentColor; stroke: none; }
.brand-lockup strong { display: block; font-size: 13px; letter-spacing: .18em; line-height: 1; }
.brand-lockup small { display: block; margin-top: 5px; color: #7f8a9b; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.sidebar-close { display: none; color: #fff; background: none; border: 0; font-size: 24px; }
.sidebar-nav { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 17px 13px 24px; scrollbar-width: thin; }
.nav-section + .nav-section { margin-top: 22px; }
.nav-label { display: block; margin: 0 10px 8px; color: #657084; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-link { min-height: 42px; margin: 2px 0; padding: 0 11px; display: flex; align-items: center; gap: 11px; color: #aeb7c5; border-radius: 8px; font-size: 12px; font-weight: 570; text-decoration: none; transition: color .16s, background .16s; }
.nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7d8798; }
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-link:hover svg { color: #bdc5d2; }
.nav-link.is-active { color: #fff; background: rgba(103,88,232,.19); box-shadow: inset 3px 0 0 #8579ff; }
.nav-link.is-active svg { color: #9e94ff; }
.nav-count { margin-left: auto; min-width: 23px; padding: 2px 6px; color: #c8c1ff; background: rgba(103,88,232,.25); border-radius: 10px; font-size: 9px; text-align: center; }
.nav-alert { width: 6px; height: 6px; margin-left: auto; background: #ef8b4f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(239,139,79,.12); }
.nav-link em { margin-left: auto; color: #6d7789; font-style: normal; }
.sidebar-footer { padding: 15px 17px 18px; flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-sync { display: flex; align-items: center; gap: 10px; }
.sidebar-sync > div { min-width: 0; }
.sidebar-sync strong, .sidebar-sync small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-sync strong { color: #c8ced8; font-size: 10px; }
.sidebar-sync small { margin-top: 3px; color: #677386; font-size: 8px; }
.sync-indicator { width: 8px; height: 8px; flex: 0 0 auto; background: #778193; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.sync-indicator.status-success, .sync-indicator.status-skipped { background: #4fc58b; box-shadow: 0 0 0 4px rgba(79,197,139,.1); }
.sync-indicator.status-failed { background: #ef6a6a; }
.sync-indicator.status-running { background: #f2a541; animation: pulse 1.4s infinite; }
.sidebar-overlay { display: none; }

.workspace { min-width: 0; min-height: 100vh; margin-left: 264px; }
.topbar { position: sticky; top: 0; z-index: 30; height: 76px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; }
.mobile-menu { display: none; width: 38px; height: 38px; padding: 9px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.mobile-menu svg { width: 100%; height: 100%; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.breadcrumb span { color: var(--muted); }
.breadcrumb b { color: #c0c5ce; font-weight: 400; }
.breadcrumb strong { color: var(--ink); font-weight: 650; }
.topbar-actions { gap: 11px; }
.display-scale-button { min-width: 82px; height: 39px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #687386; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.display-scale-button:hover { color: var(--violet); background: #f8f7ff; border-color: #d9d4fa; }
.display-scale-button > span { font-size: 12px; font-weight: 800; letter-spacing: -.04em; }
.display-scale-button > strong { font-size: 9px; font-weight: 700; }
.global-search { position: relative; width: 248px; }
.global-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: #8992a2; transform: translateY(-50%); }
.global-search input { width: 100%; height: 39px; padding: 0 38px 0 36px; color: var(--ink); background: #f5f6f8; border: 1px solid transparent; border-radius: 8px; outline: 0; font-size: 11px; }
.global-search input:focus { background: #fff; border-color: #aaa2ee; box-shadow: 0 0 0 3px rgba(103,88,232,.08); }
.global-search kbd { position: absolute; right: 10px; top: 10px; min-width: 19px; padding: 2px 5px; color: #8d95a3; background: #fff; border: 1px solid #dfe2e8; border-radius: 5px; box-shadow: 0 1px 1px #ddd; font-family: inherit; font-size: 9px; text-align: center; }
.icon-button { position: relative; width: 39px; height: 39px; padding: 9px; color: #697386; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.icon-button svg { width: 100%; height: 100%; }
.notification-button i { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; background: #e55b5b; border: 2px solid #fff; border-radius: 50%; }
.user-menu-wrap { position: relative; }
.user-menu-button { min-width: 180px; height: 46px; padding: 4px 8px 4px 5px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 9px; text-align: left; }
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { background: #f5f6f8; border-color: var(--line); }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #35415a; border-radius: 9px; font-size: 12px; font-weight: 800; }
.avatar.small { width: 32px; height: 32px; font-size: 11px; }
.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { font-size: 11px; }
.user-meta small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.user-menu-button > svg { width: 15px; height: 15px; color: #9299a6; }
.user-dropdown { position: absolute; top: calc(100% + 9px); right: 0; z-index: 70; width: 225px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 16px 38px rgba(16,24,40,.16); }
.user-dropdown[hidden] { display: none; }
.dropdown-head { padding: 10px 11px 11px; border-bottom: 1px solid var(--line); }
.dropdown-head strong, .dropdown-head span { display: block; }
.dropdown-head strong { color: var(--ink); font-size: 11px; }
.dropdown-head span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.user-dropdown a, .user-dropdown button { width: 100%; min-height: 36px; padding: 0 10px; display: flex; align-items: center; color: var(--text); background: none; border: 0; border-radius: 7px; font-size: 10px; text-decoration: none; }
.user-dropdown a:hover, .user-dropdown button:hover { background: #f4f5f7; }
.user-dropdown form { margin: 3px 0 0; padding-top: 3px; border-top: 1px solid var(--line); }
.user-dropdown form button { color: var(--red); }

.content-shell { max-width: 1600px; margin: 0 auto; padding: 31px 30px 60px; }
.page-heading-row { min-height: 67px; margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-kicker, .section-kicker { display: block; color: var(--violet); font-size: 8px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.page-heading-row h1 { margin: 7px 0 6px; color: var(--ink); font-size: clamp(25px, 3vw, 33px); letter-spacing: -.035em; line-height: 1.08; }
.page-heading-row p { margin: 0; color: var(--muted); font-size: 11px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.primary-button, .secondary-button, .filter-button { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-size: 10px; font-weight: 700; text-decoration: none; }
.primary-button { color: #fff; background: var(--violet); border: 1px solid var(--violet); box-shadow: 0 5px 14px rgba(103,88,232,.16); }
.primary-button:hover { background: var(--violet-dark); }
.secondary-button, .filter-button { color: var(--text); background: #fff; border: 1px solid var(--line-strong); }
.secondary-button:hover, .filter-button:hover { background: #f8f8fa; }
.filter-button { min-height: 32px; padding: 0 11px; color: #626b7b; font-weight: 600; }
.prototype-pill { padding: 6px 9px; color: #6d5bb9; background: #f0edff; border: 1px solid #ded8ff; border-radius: 999px; font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.prototype-note { margin: -4px 0 18px; padding: 10px 13px; display: flex; align-items: center; gap: 11px; color: #5e547b; background: #f3f0ff; border: 1px solid #e4defd; border-radius: 9px; }
.prototype-note span { flex: 0 0 auto; padding: 4px 6px; color: #fff; background: #7767db; border-radius: 5px; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.prototype-note p { margin: 0; font-size: 9px; }
.data-freshness { padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.data-freshness i { width: 6px; height: 6px; background: #39a974; border-radius: 50%; box-shadow: 0 0 0 3px #e6f5ed; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.panel-head { min-height: 68px; padding: 16px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 5px 0 0; color: var(--ink); font-size: 14px; letter-spacing: -.015em; }
.panel-head > a { color: var(--violet); font-size: 9px; font-weight: 700; text-decoration: none; }
.panel-count { color: var(--muted); font-size: 9px; }

.kpi-grid { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.kpi-card { min-height: 143px; padding: 16px 17px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon { width: 32px; height: 32px; padding: 7px; display: grid; place-items: center; border-radius: 8px; }
.kpi-icon svg { width: 100%; height: 100%; }
.kpi-icon-violet { color: var(--violet); background: var(--violet-soft); }
.kpi-icon-blue { color: var(--blue); background: var(--blue-soft); }
.kpi-icon-amber { color: var(--amber); background: var(--amber-soft); }
.kpi-icon-teal { color: var(--teal); background: var(--teal-soft); }
.trend { color: var(--muted); font-size: 8px; font-weight: 650; }
.trend-up { color: var(--green); }
.trend-warn { color: var(--amber); }
.kpi-label { margin-top: 18px; color: #697386; font-size: 9px; font-weight: 650; }
.kpi-card > strong { margin: 4px 0 3px; color: var(--ink); font-size: clamp(19px, 2vw, 25px); letter-spacing: -.04em; line-height: 1.1; }
.kpi-card > small { color: #959caa; font-size: 8px; }

.dashboard-grid { display: grid; gap: 15px; margin-bottom: 15px; }
.dashboard-grid-primary { grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr); }
.dashboard-grid-secondary { grid-template-columns: 1.35fr .65fr; }
.attention-list { padding: 6px 0; }
.attention-row { min-height: 62px; padding: 0 18px; display: flex; align-items: center; gap: 11px; text-decoration: none; transition: background .15s; }
.attention-row + .attention-row { border-top: 1px solid #f0f1f4; }
.attention-row:hover { background: #fafafe; }
.attention-marker { width: 7px; height: 32px; flex: 0 0 auto; border-radius: 4px; }
.marker-violet { background: #8a7df2; }.marker-red { background: #ea7777; }.marker-amber { background: #e6a142; }.marker-blue { background: #5b9ee5; }
.attention-row > div { min-width: 0; flex: 1; }
.attention-row strong, .attention-row small { display: block; }
.attention-row strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.attention-row small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.attention-row > b { color: var(--ink); font-size: 15px; }
.row-arrow { color: #a2a9b5; font-size: 15px; }
.spend-panel { min-height: 350px; }
.chart-summary { padding: 18px 22px 2px; display: flex; align-items: baseline; gap: 10px; }
.chart-summary > strong { color: var(--ink); font-size: 23px; letter-spacing: -.04em; }
.bar-chart { height: 218px; padding: 21px 25px 17px; display: flex; align-items: stretch; gap: 16px; border-top: 1px dashed #e5e7ec; }
.bar-column { min-width: 20px; flex: 1; display: grid; grid-template-rows: 18px 1fr 16px; align-items: end; text-align: center; }
.bar-value { color: #798292; font-size: 7px; opacity: 0; transition: opacity .15s; }
.bar-column:hover .bar-value { opacity: 1; }
.bar-track { height: 100%; display: flex; align-items: flex-end; background: linear-gradient(to top, transparent 24%, #f0f1f4 25%, transparent 26%, transparent 49%, #f0f1f4 50%, transparent 51%, transparent 74%, #f0f1f4 75%, transparent 76%); }
.bar-track svg { width: 100%; height: 100%; overflow: visible; }.bar-track rect { fill: #7b6ce7; transition: fill .15s; }
.bar-column:hover rect { fill: #5444d1; }
.bar-column small { color: #89919f; font-size: 8px; }

.flow-panel { margin-bottom: 15px; }
.procurement-flow { padding: 18px 20px 20px; display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr 25px 1fr; align-items: center; }
.procurement-flow > a { min-height: 104px; padding: 14px; display: grid; grid-template-columns: 1fr auto; color: inherit; background: #f8f8fb; border: 1px solid #edeef3; border-radius: 9px; text-decoration: none; transition: border .15s, transform .15s; }
.procurement-flow > a:hover { border-color: #c9c4f5; transform: translateY(-1px); }
.procurement-flow > a > span { width: 22px; height: 22px; display: grid; place-items: center; color: var(--violet); background: #eae7ff; border-radius: 6px; font-size: 8px; font-weight: 800; }
.procurement-flow > a small { grid-column: 1 / -1; align-self: end; color: var(--muted); font-size: 8px; }
.procurement-flow > a strong { color: var(--ink); font-size: 22px; line-height: 1; }
.procurement-flow > a em { align-self: end; color: #687284; font-size: 8px; font-style: normal; }
.procurement-flow > b { color: #bcc1cb; font-weight: 400; text-align: center; }

.compact-table-wrap, .data-table-scroll { overflow-x: auto; }
.compact-table, .data-table { width: 100%; border-collapse: collapse; }
.compact-table { font-size: 9px; }
.compact-table th, .compact-table td { height: 43px; padding: 0 17px; border-bottom: 1px solid #f0f1f4; text-align: left; }
.compact-table th { height: 34px; color: #9199a6; background: #fafafd; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.compact-table tr:last-child td { border-bottom: 0; }
.numeric { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.number-pill { padding: 4px 7px; color: var(--blue); background: var(--blue-soft); border-radius: 5px; font-weight: 750; }
.health-panel { padding-bottom: 10px; }
.health-score { padding: 18px; display: flex; align-items: center; gap: 15px; }
.score-ring { width: 68px; height: 68px; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; color: var(--green); background: radial-gradient(circle closest-side, #fff 80%, transparent 82%), conic-gradient(var(--green) 94%, #e8ebef 0); border-radius: 50%; }
.score-ring strong { font-size: 20px; letter-spacing: -.05em; }.score-ring span { font-size: 8px; }
.health-score > div:last-child { flex: 1; }
.health-score > div > strong { color: var(--ink); font-size: 10px; }.health-score p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.health-list { padding: 0 18px; }
.health-list > span { min-height: 33px; display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 8px; border-top: 1px solid #f0f1f4; color: #626d7e; font-size: 8px; }
.health-list i { width: 6px; height: 6px; border-radius: 50%; }.health-list .ok { background: #42aa77; }.health-list .warn { background: #e49a38; }.health-list b { color: var(--ink); font-size: 8px; }

.summary-strip { margin-bottom: 15px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.summary-strip > div { min-width: 0; min-height: 86px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.summary-strip > div + div { border-left: 1px solid var(--line); }
.summary-strip span, .summary-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-strip span { color: var(--muted); font-size: 8px; }.summary-strip strong { margin-top: 6px; color: var(--ink); font-size: 17px; letter-spacing: -.03em; }
.orders-summary { grid-template-columns: repeat(4, 1fr); }
.inventory-panel, .list-panel { overflow: hidden; }
.table-toolbar { min-height: 66px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.table-tabs { display: flex; align-items: center; gap: 3px; }
.table-tabs button { min-height: 34px; padding: 0 11px; color: #737c8d; background: transparent; border: 0; border-radius: 7px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.table-tabs button:hover { background: #f5f6f8; }
.table-tabs button.is-active { color: var(--ink); background: #edeef3; }
.table-tabs button span { margin-left: 4px; padding: 2px 5px; color: var(--violet); background: #e5e1ff; border-radius: 8px; font-size: 7px; }
.table-search { position: relative; width: min(350px, 38vw); }
.table-search > svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; color: #8a93a2; transform: translateY(-50%); }
.table-search input { width: 100%; height: 38px; padding: 0 37px 0 34px; color: var(--ink); background: #f5f6f8; border: 1px solid transparent; border-radius: 8px; outline: none; font-size: 10px; }
.table-search input:focus { background: #fff; border-color: #aaa2ee; box-shadow: 0 0 0 3px rgba(103,88,232,.08); }
.search-spinner { position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; border: 2px solid #d7dae1; border-top-color: var(--violet); border-radius: 50%; opacity: 0; }
.table-search.is-loading .search-spinner { opacity: 1; animation: spin .8s linear infinite; }
.table-result-line { min-height: 35px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #8a92a0; background: #fbfbfc; border-bottom: 1px solid var(--line); font-size: 8px; }
.table-result-line strong { color: #626c7d; }
.data-table { min-width: 760px; font-size: 9px; }
.data-table th { height: 38px; padding: 0 14px; color: #87909f; background: #fafafd; border-bottom: 1px solid var(--line); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { height: 51px; padding: 7px 14px; color: #465164; border-bottom: 1px solid #eff0f3; vertical-align: middle; }
.data-table tbody tr:hover { background: #fbfbfe; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td > strong { color: var(--ink); }
.inventory-data-table { min-width: 1040px; }
.item-identity { min-width: 300px; display: flex; align-items: center; gap: 10px; }
.item-token { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #6054b8; background: #eeecff; border-radius: 7px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.item-identity > div { min-width: 0; }
.item-identity strong, .item-identity span:not(.item-token), .item-identity small { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-identity > div > span { margin-top: 3px; color: #6e7889; font-size: 8px; }.item-identity small { margin-top: 2px; color: #a0a6b2; font-size: 7px; }
.code-chip { display: inline-block; max-width: 150px; overflow: hidden; padding: 4px 6px; color: #3d6595; background: #eef5fc; border-radius: 5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.empty-value { color: #aab0ba; }.value-positive { color: var(--green) !important; }.value-warning { color: var(--amber) !important; }.value-danger { color: var(--red) !important; }
.transit-value { padding: 4px 6px; color: var(--blue); background: var(--blue-soft); border-radius: 5px; font-weight: 750; }
.row-menu { width: 29px; height: 27px; color: #8b93a0; background: transparent; border: 0; border-radius: 6px; font-weight: 750; letter-spacing: 1px; }
.row-menu:hover { background: #eceef2; }
.pagination { min-height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: #fff; border-top: 1px solid var(--line); font-size: 8px; }
.pagination > div { display: flex; gap: 7px; }.pagination a { padding: 7px 10px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 6px; font-weight: 650; text-decoration: none; }
.empty-state { padding: 72px 20px; text-align: center; }.empty-state > span { width: 42px; height: 42px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 50%; font-size: 22px; }.empty-state h3 { margin: 0 0 5px; color: var(--ink); font-size: 13px; }.empty-state p { margin: 0; color: var(--muted); font-size: 9px; }

.mini-kpi-grid { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-kpi-grid article { min-height: 104px; padding: 16px 17px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.mini-kpi-grid span { color: var(--muted); font-size: 8px; }.mini-kpi-grid strong { margin: auto 0 3px; color: var(--ink); font-size: 20px; letter-spacing: -.04em; }.mini-kpi-grid small { color: #959ca9; font-size: 8px; }
.document-cell strong, .document-cell span { display: block; }.document-cell strong { font-size: 9px; }.document-cell span { max-width: 360px; margin-top: 4px; overflow: hidden; color: #6c7686; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.status-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 7px; font-weight: 750; white-space: nowrap; }
.status-badge::before { width: 5px; height: 5px; margin-right: 5px; background: currentColor; border-radius: 50%; content: ""; opacity: .7; }
.status-approval, .status-production { color: #7056c9; background: #f0ecff; }.status-sourcing, .status-transit { color: #236eb7; background: #eaf4ff; }.status-approved, .status-ordered, .status-closed { color: #247755; background: #e9f7f0; }.status-risk { color: #b74444; background: #fff0f0; }.status-draft { color: #70798a; background: #eff1f4; }.status-confirmed { color: #7b651d; background: #fff6d9; }.status-receiving { color: #16776d; background: #e7f7f4; }
.progress-cell { min-width: 120px; display: flex; align-items: center; gap: 8px; }.progress-cell progress { width: 76px; height: 5px; overflow: hidden; appearance: none; background: #e9ebef; border: 0; border-radius: 4px; }.progress-cell progress::-webkit-progress-bar { background: #e9ebef; }.progress-cell progress::-webkit-progress-value { background: var(--violet); border-radius: 4px; }.progress-cell progress::-moz-progress-bar { background: var(--violet); border-radius: 4px; }.progress-cell small { color: var(--muted); font-size: 7px; }

.supplier-toolbar { margin-bottom: 12px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.supplier-search { min-width: 210px; padding: 9px 11px; display: flex; gap: 8px; color: #9aa1ad; background: #f5f6f8; border-radius: 7px; font-size: 9px; }
.supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.supplier-card { min-height: 250px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.supplier-card-head { display: flex; align-items: flex-start; justify-content: space-between; }.supplier-avatar { width: 40px; height: 40px; display: grid; place-items: center; color: #6255bd; background: #eeecff; border-radius: 10px; font-size: 10px; font-weight: 850; }.risk-dot { width: 8px; height: 8px; margin: 5px; border-radius: 50%; }.risk-low { background: #3daa75; box-shadow: 0 0 0 4px #e8f6ef; }.risk-medium { background: #dfa13f; box-shadow: 0 0 0 4px #fff3e0; }.risk-high { background: #dd5b5b; box-shadow: 0 0 0 4px #fdecec; }
.supplier-card h2 { margin: 14px 0 5px; color: var(--ink); font-size: 13px; }.supplier-card > p { margin: 0; color: var(--muted); font-size: 8px; }.supplier-rating { margin: 16px 0 13px; padding-bottom: 13px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 8px; }.supplier-rating strong { color: #b87916; }.supplier-rating span { color: var(--muted); }
.supplier-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.supplier-metrics > div { min-width: 0; }.supplier-metrics span, .supplier-metrics strong { display: block; }.supplier-metrics span { color: var(--muted); font-size: 7px; }.supplier-metrics strong { margin-top: 5px; color: var(--ink); font-size: 11px; }.supplier-metrics progress { width: 100%; height: 3px; margin-top: 5px; display: block; overflow: hidden; appearance: none; background: #e9ebef; border: 0; border-radius: 3px; }.supplier-metrics progress::-webkit-progress-bar { background: #e9ebef; }.supplier-metrics progress::-webkit-progress-value { background: #4aa67c; border-radius: 3px; }.supplier-metrics progress::-moz-progress-bar { background: #4aa67c; border-radius: 3px; }
.card-link { width: 100%; margin-top: 17px; padding: 12px 0 0; display: flex; justify-content: space-between; color: var(--violet); background: transparent; border: 0; border-top: 1px solid var(--line); font-size: 8px; font-weight: 700; }

.shipment-board { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 11px; overflow-x: auto; }
.shipment-stage { min-height: 470px; padding: 10px; background: #ebedf2; border: 1px solid #e1e4ea; border-radius: 11px; }
.shipment-stage header { height: 57px; padding: 5px 7px 11px; display: flex; align-items: center; gap: 9px; }.shipment-stage header > span { width: 26px; height: 26px; display: grid; place-items: center; color: #6559b4; background: #ddd9fb; border-radius: 7px; font-size: 8px; font-weight: 800; }.shipment-stage header strong, .shipment-stage header small { display: block; }.shipment-stage header strong { color: var(--ink); font-size: 10px; }.shipment-stage header small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.shipment-stage article { margin-bottom: 8px; padding: 14px; display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e4e9; border-radius: 9px; box-shadow: 0 2px 5px rgba(16,24,40,.04); }.shipment-stage article.is-risk { border-left: 3px solid #dd5b5b; }.shipment-stage article strong { color: var(--ink); font-size: 9px; }.shipment-stage article span { margin-top: 6px; color: #5e6879; font-size: 8px; }.shipment-stage article small { margin-top: 12px; padding-top: 9px; color: var(--muted); border-top: 1px solid var(--line); font-size: 7px; }.shipment-stage .ghost-card { background: rgba(255,255,255,.55); border-style: dashed; box-shadow: none; }

.analytics-grid { margin-bottom: 15px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 15px; }.analytics-chart { min-height: 350px; }.large-bar-chart { height: 270px; padding: 30px 25px 18px; display: flex; align-items: flex-end; gap: 18px; background: linear-gradient(to top, transparent 24%, #f0f1f4 25%, transparent 25.5%, transparent 49%, #f0f1f4 50%, transparent 50.5%, transparent 74%, #f0f1f4 75%, transparent 75.5%); }.large-bar-chart > div { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }.large-bar-chart span { margin-bottom: 5px; color: var(--muted); font-size: 7px; }.large-bar-fill { width: min(42px, 80%); flex: 1; overflow: visible; }.large-bar-fill rect { fill: var(--violet); }.large-bar-chart small { margin-top: 8px; color: #8a92a0; font-size: 8px; }
.donut-wrap { padding: 25px 19px; }.donut { width: 126px; height: 126px; margin: 0 auto 23px; display: grid; place-items: center; background: conic-gradient(#6d5de7 0 48%, #3d8bd8 48% 72%, #35a184 72% 89%, #d6a34e 89%); border-radius: 50%; }.donut::before { width: 77px; height: 77px; background: #fff; border-radius: 50%; content: ""; }.donut > span { position: absolute; color: var(--muted); font-size: 7px; text-align: center; }.donut strong { display: block; color: var(--ink); font-size: 18px; }.donut-wrap ul { margin: 0; padding: 0; list-style: none; }.donut-wrap li { min-height: 28px; display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; font-size: 8px; }.donut-wrap li i { width: 6px; height: 6px; border-radius: 2px; }.cat-1{background:#6d5de7}.cat-2{background:#3d8bd8}.cat-3{background:#35a184}.cat-4{background:#d6a34e}.donut-wrap li span{color:var(--muted)}.donut-wrap li strong{color:var(--ink)}
.donut { position: relative; }
.table-subline { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; }.risk-label { padding: 4px 6px; border-radius: 6px; font-size: 7px; font-weight: 700; }.risk-label-low{color:var(--green);background:var(--green-soft)}.risk-label-medium{color:var(--amber);background:var(--amber-soft)}.risk-label-high{color:var(--red);background:var(--red-soft)}

.settings-grid, .security-grid { margin-bottom: 15px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }.profile-panel { padding: 20px; }.profile-hero { padding-bottom: 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }.profile-avatar { width: 50px; height: 50px; display: grid; place-items: center; color: #fff; background: var(--violet); border-radius: 12px; font-size: 18px; font-weight: 850; }.profile-hero > div { flex: 1; }.profile-hero h2 { margin: 0; color: var(--ink); font-size: 15px; }.profile-hero p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }.profile-details { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; }.profile-details > div { padding: 16px 4px 7px; }.profile-details dt { color: var(--muted); font-size: 7px; text-transform: uppercase; }.profile-details dd { margin: 5px 0 0; color: var(--ink); font-size: 9px; font-weight: 650; }
.security-tips ul, .protection-panel ul { margin: 0; padding: 6px 18px 15px; list-style: none; }.security-tips li { min-height: 61px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #f0f1f4; }.security-tips li:last-child { border: 0; }.security-tips li > span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 7px; font-size: 9px; font-weight: 800; }.security-tips strong, .security-tips small { display: block; }.security-tips strong { color: var(--ink); font-size: 9px; }.security-tips small { margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.audit-list { padding: 6px 18px 15px; }.audit-list > div { min-height: 52px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f1f4; }.audit-icon { width: 25px; height: 25px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 8px; font-weight: 800; }.audit-list strong, .audit-list small { display: block; }.audit-list strong { color: var(--ink); font-size: 9px; }.audit-list small { margin-top: 4px; color: var(--muted); font-size: 7px; }.empty-copy { color: var(--muted); font-size: 9px; }
.user-access-list { padding: 6px 18px 14px; }.user-access-list > div { min-height: 57px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f1f4; }.user-access-list > div > div { min-width: 0; flex: 1; }.user-access-list strong, .user-access-list small { display: block; }.user-access-list strong { color: var(--ink); font-size: 9px; }.user-access-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }.access-state { padding: 4px 6px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 7px; font-weight: 700; }.access-state.is-disabled { color: var(--red); background: var(--red-soft); }
.protection-panel li { min-height: 40px; display: flex; align-items: center; gap: 9px; color: #596476; border-bottom: 1px solid #f0f1f4; font-size: 8px; }.protection-panel li i { width: 18px; height: 18px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 5px; font-size: 7px; font-style: normal; font-weight: 800; }
.form-panel { max-width: 680px; padding: 21px; }.settings-form label { display: block; margin: 15px 0 7px; color: var(--ink); font-size: 9px; font-weight: 700; }.settings-form input { width: 100%; height: 42px; padding: 0 11px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; }.settings-form input:focus { border-color: #9e94eb; box-shadow: 0 0 0 3px rgba(103,88,232,.08); }.field-help { margin: 7px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }.form-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }

.message-stack { position: fixed; top: 88px; right: 25px; z-index: 90; width: min(360px, calc(100vw - 30px)); }.message { margin-bottom: 8px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; color: #24573f; background: #ebf8f1; border: 1px solid #c8ebd8; border-radius: 9px; box-shadow: 0 10px 28px rgba(16,24,40,.12); font-size: 9px; }.message button { color: inherit; background: none; border: 0; font-size: 17px; }
.demo-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 330px; padding: 13px 15px; color: #fff; background: #1a2232; border: 1px solid #323d50; border-radius: 9px; box-shadow: 0 15px 40px rgba(0,0,0,.25); font-size: 9px; animation: toast-in .2s ease-out; }

.table-tabs a { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; color: #737c8d; border-radius: 7px; font-size: 9px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.table-tabs a:hover { background: #f5f6f8; }.table-tabs a.is-active { color: var(--ink); background: #edeef3; }
.planning-gate-note { margin: -4px 0 15px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #565072; background: #f3f1ff; border: 1px solid #e1dcff; border-radius: 10px; }
.planning-gate-note > span { padding: 5px 7px; color: #fff; background: #6e60dd; border-radius: 5px; font-size: 7px; font-weight: 850; letter-spacing: .08em; }.planning-gate-note strong, .planning-gate-note p { display: block; }.planning-gate-note strong { color: #302a50; font-size: 10px; }.planning-gate-note p { margin: 4px 0 0; font-size: 8px; line-height: 1.45; }.planning-gate-note a { color: #5c4fc5; font-size: 8px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.planning-panel { overflow: hidden; }.planning-data-table { min-width: 1780px; }.planning-data-table .item-identity { min-width: 270px; }.planning-data-table .item-identity a { color: inherit; text-decoration: none; }.planning-data-table .item-identity a:hover { color: var(--violet); }
.readiness-badge { padding: 5px 7px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 7px; font-weight: 750; white-space: nowrap; }.readiness-badge::before { width: 5px; height: 5px; margin-right: 5px; background: currentColor; border-radius: 50%; content: ""; }.readiness-risk { color: #b94343; background: #fff0f0; }.readiness-warning { color: #9a650e; background: #fff4df; }.readiness-neutral { color: #59677a; background: #eef1f5; }.readiness-ready { color: #227651; background: #e9f7ef; }
.table-primary { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.calculation-placeholder { color: #8a93a1; font-size: 8px; font-style: italic; white-space: nowrap; }.row-arrow { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; text-decoration: none; }.row-arrow:hover { color: var(--violet); background: var(--violet-soft); }
.deadline-risk { color: var(--red) !important; }.deadline-ok { color: var(--green); }
.item-readiness-card { margin-bottom: 15px; padding: 14px 16px; display: grid; grid-template-columns: minmax(240px,.65fr) 1.35fr; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; }.item-readiness-card > div { display: flex; align-items: center; gap: 10px; }.item-readiness-card > div > strong { color: var(--ink); font-size: 10px; }.item-readiness-card ul { margin: 0; padding-left: 18px; color: #687386; font-size: 8px; line-height: 1.7; }.readiness-card-risk { border-left-color: var(--red); }.readiness-card-warning { border-left-color: var(--amber); }.readiness-card-neutral { border-left-color: #8993a2; }.readiness-card-ready { border-left-color: var(--green); }
.fact-card-grid { margin-bottom: 15px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.fact-card-grid article { min-width: 0; min-height: 105px; padding: 15px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }.fact-card-grid span { color: var(--muted); font-size: 8px; }.fact-card-grid strong { margin: auto 0 3px; overflow: hidden; color: var(--ink); font-size: 19px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.fact-card-grid small { color: #9aa1ac; font-size: 7px; }
.planning-detail-grid { margin-bottom: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.detail-section { overflow: hidden; }.panel-meta { color: var(--muted); font-size: 8px; }.detail-list { margin: 0; padding: 4px 18px 14px; }.detail-list > div { min-height: 47px; display: grid; grid-template-columns: minmax(130px,.65fr) 1.35fr; align-items: center; gap: 12px; border-bottom: 1px solid #f0f1f4; }.detail-list > div:last-child { border: 0; }.detail-list dt { color: var(--muted); font-size: 8px; }.detail-list dd { margin: 0; color: var(--ink); font-size: 9px; font-weight: 650; text-align: right; }
.section-empty { padding: 34px 20px; text-align: center; }.section-empty strong { display: block; color: var(--ink); font-size: 11px; }.section-empty p { max-width: 520px; margin: 7px auto 0; color: var(--muted); font-size: 8px; line-height: 1.55; }.calculation-empty { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg,#fff,#fff 12px,#fbfbfd 12px,#fbfbfd 24px); }
.history-section { margin-bottom: 15px; }.change-list { padding: 4px 18px 13px; }.change-list article { min-height: 52px; display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; border-bottom: 1px solid #f0f1f4; }.change-list time { color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }.change-list strong, .change-list small { display: block; }.change-list strong { color: var(--ink); font-size: 9px; }.change-list small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.transit-section { margin-bottom: 15px; }.transit-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }.transit-detail-list > div { grid-template-columns: minmax(105px, 1fr) auto; }.source-notes { margin: 0 18px 16px; padding-top: 15px; display: grid; grid-template-columns: minmax(130px,.35fr) minmax(0,1fr); gap: 18px; border-top: 1px solid var(--line); }.source-notes > div { display: grid; gap: 5px; }.source-notes span { color: var(--muted); font-size: 8px; }.source-notes strong { color: var(--ink); font-size: 9px; line-height: 1.5; }
.fact-protection-note { margin-bottom: 15px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; color: #355f4d; background: #edf8f2; border: 1px solid #d5ebdf; border-radius: 9px; }.fact-protection-note strong { font-size: 9px; white-space: nowrap; }.fact-protection-note span { font-size: 8px; line-height: 1.45; }
.policy-form-panel { max-width: 1000px; padding: 21px; }.policy-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }.policy-field-wide { grid-column: 1 / -1; }.policy-field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 9px; font-weight: 700; }.policy-field input, .policy-field select, .policy-field textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; font-size: 10px; }.policy-field textarea { resize: vertical; }.policy-field input:focus, .policy-field select:focus, .policy-field textarea:focus { border-color: #9e94eb; box-shadow: 0 0 0 3px rgba(103,88,232,.08); }.field-error { display: block; margin-top: 5px; color: var(--red); font-size: 8px; }.policy-table { min-width: 1220px; }.toolbar-title { margin: 5px 0 0; color: var(--ink); font-size: 13px; }
.compact-summary { grid-template-columns: repeat(3, 1fr); }
.quality-overview { margin-bottom: 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.quality-overview article { min-height: 105px; padding: 15px 17px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }.quality-overview article.is-risk { border-color: #efcaca; background: #fffafa; }.quality-overview span { color: var(--muted); font-size: 8px; }.quality-overview strong { margin: auto 0 3px; color: var(--ink); font-size: 20px; }.quality-overview small { color: #929aa7; font-size: 8px; }
.quality-issue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.quality-issue { overflow: hidden; border-top: 3px solid #9aa3b2; }.quality-issue.quality-risk { border-top-color: var(--red); }.quality-issue.quality-warning { border-top-color: var(--amber); }.quality-issue header { min-height: 78px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.quality-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; }.quality-issue h2 { margin: 5px 0 0; color: var(--ink); font-size: 14px; }.quality-issue header > strong { color: var(--ink); font-size: 24px; }.quality-issue > p { margin: 0; padding: 13px 17px; color: var(--muted); border-bottom: 1px solid #f0f1f4; font-size: 8px; line-height: 1.55; }.quality-issue ul { margin: 0; padding: 4px 17px 11px; list-style: none; }.quality-issue li + li { border-top: 1px solid #f0f1f4; }.quality-issue li a { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; }.quality-issue li strong { color: var(--ink); font-size: 8px; }.quality-issue li span { max-width: 70%; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.quality-action { margin: 0 17px 15px; display: inline-block; color: var(--violet); font-size: 8px; font-weight: 750; text-decoration: none; }
.dictionary-summary { grid-template-columns: repeat(3,1fr); }.dictionary-panel { overflow: hidden; }.dictionary-list article { min-height: 116px; padding: 15px 18px; display: grid; grid-template-columns: minmax(190px,.45fr) 1fr 150px; align-items: start; gap: 22px; border-bottom: 1px solid var(--line); }.dictionary-list article:last-child { border: 0; }.dictionary-field-name code { display: inline-block; padding: 5px 7px; color: #4f46a8; background: #efedff; border-radius: 5px; font-size: 9px; font-weight: 750; }.dictionary-field-name span { display: block; margin-top: 7px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 7px; }.dictionary-list article > div:nth-child(2) > strong { color: var(--ink); font-size: 10px; }.dictionary-list p { margin: 6px 0 0; color: #697386; font-size: 8px; line-height: 1.5; }.dictionary-list article > div:nth-child(2) > small { display: block; margin-top: 9px; color: #8b641e; font-size: 8px; line-height: 1.5; }.dictionary-state { text-align: right; }.dictionary-state > small { display: block; margin-top: 7px; color: var(--muted); font-size: 7px; }

.auth-body { background: #f3f4f7; }
.login-page { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; padding: clamp(24px, 5vh, 56px) 20px 24px; display: grid; grid-template-rows: 1fr auto; place-items: center; background: radial-gradient(circle at 50% 0, rgba(103,88,232,.08), transparent 34%), #f3f4f7; }
.login-page::before { position: absolute; z-index: -1; width: 560px; height: 560px; left: 50%; top: 50%; content: ""; border: 1px solid rgba(103,88,232,.055); border-radius: 50%; box-shadow: 0 0 0 90px rgba(103,88,232,.02), 0 0 0 180px rgba(103,88,232,.012); transform: translate(-50%, -50%); }
.login-card { width: min(480px, 100%); padding: 38px 40px 34px; background: rgba(255,255,255,.97); border: 1px solid #e0e3e9; border-radius: 18px; box-shadow: 0 24px 70px rgba(24,32,51,.11), 0 2px 8px rgba(24,32,51,.04); }
.login-card-top { padding-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eceef2; }
.login-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }.login-logo { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--violet); border-radius: 11px; box-shadow: 0 8px 20px rgba(103,88,232,.22); }.login-logo svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }.login-brand strong { display: block; font-size: 14px; letter-spacing: .18em; line-height: 1; }.login-brand small { display: block; margin-top: 6px; color: #8a92a0; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.login-security { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: #287252; background: #edf8f2; border: 1px solid #d7eee1; border-radius: 999px; font-size: 8px; font-weight: 750; white-space: nowrap; }.login-security svg { width: 13px; height: 13px; }
.login-heading { margin: 31px 0 26px; }.login-heading > span { color: var(--violet); font-size: 8px; font-weight: 850; letter-spacing: .15em; }.login-heading h1 { margin: 8px 0 8px; color: var(--ink); font-size: 30px; letter-spacing: -.04em; line-height: 1.1; }.login-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.login-form label { display: block; margin: 17px 0 8px; color: #344054; font-size: 11px; font-weight: 700; }.field-wrap { position: relative; }.field-wrap > svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; color: #8992a0; transform: translateY(-50%); }.field-wrap input { width: 100%; height: 52px; padding: 0 88px 0 45px; color: var(--ink); background: #fff; border: 1px solid #d7dbe3; border-radius: 10px; outline: none; font-size: 14px; transition: border-color .15s, box-shadow .15s; }.field-wrap input:hover { border-color: #c5cad4; }.field-wrap input:focus { border-color: #8f84eb; box-shadow: 0 0 0 4px rgba(103,88,232,.09); }.password-toggle { position: absolute; right: 9px; top: 9px; height: 34px; padding: 0 8px; color: var(--violet); background: none; border: 0; border-radius: 7px; font-size: 9px; font-weight: 750; }.password-toggle:hover { background: var(--violet-soft); }.login-submit { width: 100%; min-height: 52px; margin-top: 24px; justify-content: space-between; padding: 0 18px; font-size: 12px; }.login-submit span { font-size: 17px; }.login-help { margin-top: 25px; padding-top: 21px; border-top: 1px solid #eceef2; text-align: center; }.login-help span, .login-help small { display: block; }.login-help span { color: #596476; font-size: 10px; }.login-help small { margin-top: 5px; color: #9299a6; font-size: 9px; }
.login-page-footer { align-self: end; padding-top: 24px; display: flex; align-items: center; gap: 9px; color: #9299a6; font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }.login-page-footer i { width: 3px; height: 3px; background: #b6bbc5; border-radius: 50%; }
.form-alert { margin: 0 0 18px; padding: 11px 12px; color: #9d3f3f; background: var(--red-soft); border: 1px solid #f3d1d1; border-radius: 8px; }.form-alert strong, .form-alert span { display: block; }.form-alert strong { font-size: 9px; }.form-alert span { margin-top: 4px; font-size: 8px; line-height: 1.45; }.form-alert ul { margin: 5px 0 0; padding-left: 16px; }

.centered-state { min-height: 100vh; padding: 25px; display: grid; place-items: center; background: #f4f5f8; }.state-card { width: min(430px, 100%); padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); text-align: center; }.state-icon { width: 44px; height: 44px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; font-weight: 850; }.state-icon-danger { color: var(--red); background: var(--red-soft); }.state-card h1 { margin: 0 0 10px; color: var(--ink); font-size: 21px; }.state-card p { margin: 0 0 22px; color: var(--muted); font-size: 10px; line-height: 1.6; }.inline-state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.inline-state > span { color: #d7d9e2; font-size: 70px; font-weight: 850; letter-spacing: -.08em; }.inline-state h1 { margin: -5px 0 8px; color: var(--ink); font-size: 22px; }.inline-state p { margin: 0 0 18px; color: var(--muted); font-size: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 2400px) and (max-resolution: 1.25dppx) {
    html:not([data-ui-scale]), html[data-ui-scale="auto"] { --ui-zoom: 1.3; }
    html:not([data-ui-scale]) .content-shell, html[data-ui-scale="auto"] .content-shell { max-width: 2100px; }
}

html[data-ui-scale="large"] .content-shell { max-width: 2100px; }

@media (max-width: 1180px) {
    .sidebar { width: 230px; }.workspace { margin-left: 230px; }
    .dashboard-grid-primary, .dashboard-grid-secondary, .analytics-grid { grid-template-columns: 1fr; }
    .fact-card-grid { grid-template-columns: repeat(3, 1fr); }.planning-detail-grid { grid-template-columns: 1fr; }
    .supplier-grid { grid-template-columns: repeat(2, 1fr); }
    .global-search { width: 190px; }
    .procurement-flow { overflow-x: auto; grid-template-columns: 210px 25px 210px 25px 210px 25px 210px; }
}

@media (max-width: 920px) {
    html { --ui-zoom: 1 !important; }
    .sidebar { width: min(300px, calc(100vw - 52px)); max-width: none; visibility: hidden; pointer-events: none; box-shadow: 18px 0 42px rgba(8,13,22,.24); transform: translate3d(-100%,0,0); transition: transform .2s ease, visibility 0s linear .2s; will-change: transform; }.sidebar.is-open { visibility: visible; pointer-events: auto; transform: translate3d(0,0,0); transition-delay: 0s; }.sidebar-close { display: block; }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 45; display: block; visibility: hidden; opacity: 0; background: rgba(8,13,22,.55); border: 0; transition: opacity .2s ease, visibility 0s linear .2s; }.sidebar-overlay.is-visible { visibility: visible; opacity: 1; transition-delay: 0s; }
    .workspace { width: 100%; margin-left: 0; }.mobile-menu { display: block; }.topbar-left { gap: 12px; }.display-scale-button { display: none; }
    .kpi-grid, .mini-kpi-grid { grid-template-columns: repeat(2, 1fr); }.summary-strip { grid-template-columns: repeat(3, 1fr); }.summary-strip > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }.summary-strip > div:nth-child(5) { border-top: 1px solid var(--line); }
    .settings-grid, .security-grid { grid-template-columns: 1fr; }
    .quality-issue-grid { grid-template-columns: 1fr; }.dictionary-list article { grid-template-columns: 170px 1fr; }.dictionary-state { grid-column: 2; text-align: left; }
}

@media (min-width: 921px) {
    .sidebar { visibility: visible; pointer-events: auto; transform: none; }
    .sidebar-overlay, .sidebar-overlay.is-visible { display: none; }
}

@media (max-width: 680px) {
    .topbar { height: 66px; padding: 0 13px; }.breadcrumb { display: none; }.global-search { display: none; }.user-menu-button { min-width: 0; }.user-meta, .user-menu-button > svg { display: none; }.notification-button { width: 36px; height: 36px; }.content-shell { padding: 23px 13px 40px; }
    .page-heading-row { display: block; }.heading-actions { margin-top: 17px; flex-wrap: wrap; }.heading-actions .primary-button, .heading-actions .secondary-button { flex: 1; }
    .prototype-note { align-items: flex-start; }.prototype-note p { line-height: 1.5; }
    .kpi-grid, .mini-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.kpi-card { min-height: 130px; padding: 14px; }.kpi-card > strong { font-size: 20px; }
    .summary-strip, .orders-summary { grid-template-columns: 1fr 1fr; }.summary-strip > div { min-height: 76px; }.summary-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.summary-strip > div:nth-child(4) { border-left: 1px solid var(--line); }.summary-strip > div:nth-child(5) { border-left: 0; }
    .dashboard-grid { gap: 10px; }.panel-head { padding: 14px; }.bar-chart { gap: 8px; padding-left: 15px; padding-right: 15px; }
    .table-toolbar { align-items: stretch; flex-direction: column; }.table-tabs { overflow-x: auto; }.table-search { width: 100%; }.supplier-grid { grid-template-columns: 1fr; }.supplier-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }.supplier-search { min-width: 0; }
    .profile-details { grid-template-columns: 1fr; }.profile-hero { align-items: flex-start; flex-wrap: wrap; }.message-stack { top: 75px; right: 15px; }
    .planning-gate-note { grid-template-columns: 1fr; }.planning-gate-note > span { justify-self: start; }.planning-gate-note a { white-space: normal; }.item-readiness-card { grid-template-columns: 1fr; }.item-readiness-card > div { align-items: flex-start; flex-direction: column; }.fact-card-grid { grid-template-columns: 1fr 1fr; }.policy-form-grid, .quality-overview, .transit-detail-list, .source-notes { grid-template-columns: 1fr; }.fact-protection-note { align-items: flex-start; flex-direction: column; }.dictionary-list article { grid-template-columns: 1fr; }.dictionary-state { grid-column: 1; }.change-list article { grid-template-columns: 1fr; gap: 5px; padding: 10px 0; }
    .login-page { padding: 18px 14px; }.login-card { padding: 31px 28px 29px; }.login-heading { margin-top: 27px; }
}

@media (max-width: 430px) {
    .kpi-grid, .mini-kpi-grid, .fact-card-grid { grid-template-columns: 1fr; }.summary-strip, .orders-summary { grid-template-columns: 1fr; }.summary-strip > div + div, .summary-strip > div:nth-child(n) { border-top: 1px solid var(--line); border-left: 0; }.heading-actions { align-items: stretch; flex-direction: column; }.heading-actions .prototype-pill, .heading-actions .data-freshness { align-self: flex-start; }.login-card { padding: 27px 21px 25px; border-radius: 15px; }.login-card-top { align-items: flex-start; flex-direction: column; gap: 15px; }.login-heading h1 { font-size: 27px; }.login-page-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}