:root {
    --ink: #18231f;
    --forest: #173f35;
    --forest-2: #235849;
    --sage: #dce9df;
    --cream: #f4f1e9;
    --paper: #fffef9;
    --line: #deddd5;
    --muted: #69736d;
    --coral: #e86f51;
    --coral-soft: #fde8e1;
    --amber: #d9962c;
    --amber-soft: #fff1d6;
    --green: #28745e;
    --green-soft: #e2f1e9;
    --red: #bd4d3a;
    --red-soft: #fbe7e2;
    --blue-soft: #e4edf2;
    --shadow: 0 18px 45px rgba(23, 39, 32, .08);
    --radius: 18px;
    --sidebar: 248px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--cream); }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at 85% 0%, rgba(220, 233, 223, .55), transparent 28rem),
        var(--cream);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 30px 22px 22px;
    display: flex;
    flex-direction: column;
    color: #eef6f1;
    background:
        radial-gradient(circle at 20% 80%, rgba(75, 128, 106, .28), transparent 16rem),
        #142b24;
    z-index: 20;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
    width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 41px;
    color: #173f35; background: #d6e7da; border-radius: 12px 12px 12px 3px;
    font-size: 13px; font-weight: 900; letter-spacing: -.04em;
}
.brand strong { display: block; font-size: 18px; line-height: 1.1; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 4px; color: #93aa9f; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.brand-light .brand-mark { background: #e6f0e8; }

.nav-list { margin-top: 44px; display: grid; gap: 5px; }
.nav-item {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 45px; padding: 0 13px; color: #a9bcb3; border-radius: 11px;
    transition: .18s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: rgba(218, 234, 221, .11); }
.nav-item.active::after {
    content: ""; position: absolute; right: -22px; width: 4px; height: 23px;
    background: #d5e7da; border-radius: 4px 0 0 4px;
}
.nav-number {
    width: 24px; color: #658176; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px; letter-spacing: .04em;
}
.nav-item.active .nav-number { color: #a9c9bb; }

.sidebar-foot { margin-top: auto; padding: 16px 13px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot p { margin: 10px 0 0; color: #7f988d; font-size: 11px; }
.environment { display: flex; align-items: center; gap: 8px; color: #bdd0c7; font-size: 11px; }
.environment span { width: 7px; height: 7px; background: #7ed19f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(126,209,159,.1); }

.workspace { min-width: 0; }
.topbar {
    min-height: 86px; padding: 18px clamp(20px, 4vw, 52px);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    border-bottom: 1px solid rgba(39, 61, 50, .1); background: rgba(244, 241, 233, .82);
    backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 15;
}
.topbar h1 { margin: 2px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: #758078; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.light { color: #b5c9c0; }
.top-actions { display: flex; align-items: center; gap: 11px; }
.user-chip { padding: 6px 10px 6px 6px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.55); border-radius: 12px; }
.user-chip .avatar { width: 33px; height: 33px; display: grid; place-items: center; color: #fff; background: var(--forest); border-radius: 9px; font-weight: 800; }
.user-chip strong, .user-chip small { display: block; white-space: nowrap; }
.user-chip strong { font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 10px; }
.inline-form { display: inline; margin: 0; }
.icon-button, .menu-button { border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.55); border-radius: 10px; cursor: pointer; }
.icon-button { width: 38px; height: 38px; }
.menu-button { display: none; width: 40px; height: 40px; }

.content { padding: 34px clamp(20px, 4vw, 52px) 60px; max-width: 1660px; margin: 0 auto; }
.alert {
    margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 10px;
    border: 1px solid #d7d7ce; background: #fff; border-radius: 12px; box-shadow: var(--shadow);
}
.alert > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.alert.success { border-color: #bcd8c7; background: #f1f9f4; }
.alert.success > span { color: #fff; background: var(--green); }
.alert.error { border-color: #edc4ba; background: #fff3ef; }
.alert.error > span { color: #fff; background: var(--red); }
.alert.warning { border-color: #efd6a8; background: #fff8ea; }
.alert.warning > span { color: #fff; background: var(--amber); }

.button {
    min-height: 41px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border: 1px solid transparent; border-radius: 10px; font-weight: 750; font-size: 12px; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { color: #fff; background: var(--forest); box-shadow: 0 10px 20px rgba(23,63,53,.15); }
.button.primary:hover:not(:disabled) { background: #205548; }
.button.secondary { color: var(--forest); background: var(--sage); border-color: #c8ddcf; }
.button.ghost { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.48); }
.button.light { color: var(--forest); background: #f5faf6; }
.button.coral { color: #fff; background: var(--coral); box-shadow: 0 10px 20px rgba(232,111,81,.22); }
.button.wide { width: 100%; }

.hero-strip {
    position: relative; overflow: hidden; min-height: 172px; padding: 34px 38px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    color: #edf6f1; background:
        linear-gradient(105deg, rgba(20,62,51,.98), rgba(35,88,73,.93)),
        #173f35;
    border-radius: 23px; box-shadow: 0 22px 50px rgba(23,63,53,.16);
}
.hero-strip::after {
    content: ""; position: absolute; width: 290px; height: 290px; right: 11%; top: -190px;
    border: 45px solid rgba(255,255,255,.05); border-radius: 50%;
}
.hero-strip > * { position: relative; z-index: 1; }
.hero-strip h2 { max-width: 770px; margin: 9px 0 7px; font-family: Georgia, serif; font-size: clamp(25px, 3vw, 39px); font-weight: 400; letter-spacing: -.04em; }
.hero-strip p:not(.eyebrow) { margin: 0; color: #b7cec4; }

.kpi-grid { margin: 20px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-card { min-height: 145px; padding: 21px; background: rgba(255,254,249,.82); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(24,35,31,.035); }
.kpi-card.accent { background: var(--coral-soft); border-color: #efcfc6; }
.kpi-label { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.kpi-card > strong { display: block; margin-top: 8px; font-family: Georgia, serif; font-size: 35px; font-weight: 400; line-height: 1; }
.kpi-card > strong.money { font-size: 30px; }
.kpi-card p { margin: 8px 0 10px; color: var(--muted); font-size: 11px; }
.trend { padding: 4px 7px; border-radius: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.trend.danger { color: var(--red); background: rgba(189,77,58,.1); }
.trend.success { color: var(--green); background: var(--green-soft); }
.trend.warning { color: #936116; background: var(--amber-soft); }
.trend.neutral { color: #62726b; background: #edf0ed; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .43fr); gap: 18px; margin: 18px 0; }
.span-2 { min-width: 0; }
.panel { padding: 22px; background: rgba(255,254,249,.88); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(25,42,34,.04); }
.panel-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-head h3 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -.025em; }
.text-link, .row-action { color: var(--forest-2); font-weight: 800; font-size: 11px; }
.ai-chip { padding: 5px 8px; color: #6f631d; background: #f5edc7; border-radius: 7px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

.risk-list { display: grid; }
.risk-row {
    min-height: 78px; padding: 11px 2px; display: grid; grid-template-columns: 54px minmax(200px, 1fr) minmax(130px, .55fr) 125px 20px; align-items: center; gap: 13px;
    border-top: 1px solid #e8e6df; transition: background .15s ease;
}
.risk-row:first-child { border-top: 0; }
.risk-row:hover { background: rgba(220,233,223,.25); }
.risk-main > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.risk-main p, .risk-parts span, .risk-parts small, .risk-date small { margin: 2px 0 0; display: block; color: var(--muted); font-size: 10px; }
.risk-parts span { color: var(--red); font-weight: 800; }
.risk-date { text-align: right; }
.risk-date strong { display: block; font-size: 11px; }
.arrow { color: #8b9791; font-size: 17px; }

.badge { width: fit-content; padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.success { color: #28745e; background: var(--green-soft); }
.badge.danger { color: var(--red); background: var(--red-soft); }
.badge.warning { color: #986815; background: var(--amber-soft); }
.badge.neutral { color: #66716c; background: #ebeeeb; }

.readiness-ring {
    --value: 0; width: 76px; height: 76px; position: relative; display: grid; place-items: center;
    background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), #e4e6e2 0);
    border-radius: 50%;
}
.readiness-ring::after { content: ""; position: absolute; inset: 7px; background: var(--paper); border-radius: 50%; }
.readiness-ring span { position: relative; z-index: 1; font-size: 15px; font-weight: 900; }
.readiness-ring.small { width: 46px; height: 46px; }
.readiness-ring.small::after { inset: 5px; }
.readiness-ring.small span { font-size: 11px; }
.readiness-ring.good { --ring-color: var(--green); }
.readiness-ring.warn { --ring-color: var(--amber); }
.readiness-ring.bad { --ring-color: var(--coral); }

.decision-panel { background: linear-gradient(165deg, #f0eee3, #fffef9); }
.decision-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 12px 12px 12px 3px; font-size: 20px; }
.decision-panel h4 { margin: 17px 0 8px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.decision-panel > p { color: var(--muted); font-size: 12px; }
.decision-stats { margin: 18px 0; padding: 14px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.decision-stats span + span { padding-left: 15px; border-left: 1px solid var(--line); }
.decision-stats small, .decision-stats strong { display: block; }
.decision-stats small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.decision-stats strong { margin-top: 4px; font-size: 20px; }

.legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.dot.good { background: var(--green); }
.dot.bad { background: var(--coral); }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 10px 0; overflow-x: auto; }
.timeline-item { min-width: 180px; padding: 6px 12px; display: grid; grid-template-columns: 37px 18px minmax(90px, 1fr) auto; align-items: center; gap: 5px; }
.timeline-date { font-family: Georgia, serif; font-size: 22px; }
.timeline-date small, .timeline-copy small { display: block; color: var(--muted); font-family: Inter, sans-serif; font-size: 8px; white-space: nowrap; }
.timeline-line { height: 2px; background: #dedfd9; }
.timeline-line::before { content: ""; display: block; width: 7px; height: 7px; transform: translateY(-2.5px); background: var(--coral); border-radius: 50%; }
.timeline-item.good .timeline-line::before { background: var(--green); }
.timeline-copy strong { font-size: 11px; }
.timeline-item > b { color: var(--coral); font-size: 11px; }
.timeline-item.good > b { color: var(--green); }

.empty-state { min-height: 110px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: var(--ink); margin-bottom: 3px; }

.section-intro { margin: 5px 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-intro h2 { margin: 7px 0 5px; font-family: Georgia, serif; font-size: clamp(26px, 3vw, 37px); font-weight: 400; letter-spacing: -.04em; }
.section-intro p:not(.eyebrow) { max-width: 690px; margin: 0; color: var(--muted); }
.filter-pills { display: flex; padding: 4px; background: #e8e6de; border-radius: 10px; }
.filter-pills button { padding: 7px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; }
.filter-pills button.active { color: var(--ink); background: var(--paper); box-shadow: 0 3px 10px rgba(0,0,0,.05); font-weight: 800; }

.manage-panel {
    margin: 0 0 16px; background: rgba(255,254,249,.82); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 9px 25px rgba(25,42,34,.025);
}
.manage-panel summary {
    min-height: 62px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between;
    gap: 15px; list-style: none; cursor: pointer;
}
.manage-panel summary::-webkit-details-marker { display: none; }
.manage-panel summary strong, .manage-panel summary small { display: block; }
.manage-panel summary strong { font-size: 12px; }
.manage-panel summary small { color: var(--muted); font-size: 9px; }
.manage-panel summary b { width: 30px; height: 30px; display: grid; place-items: center; color: var(--forest); background: var(--sage); border-radius: 8px; font-size: 18px; transition: transform .15s; }
.manage-panel[open] summary b { transform: rotate(45deg); }
.data-form { padding: 17px; display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); align-items: end; gap: 12px; border-top: 1px solid var(--line); }
.data-form.compact { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
.data-form label { color: #56625c; font-size: 9px; font-weight: 800; }
.data-form label input, .data-form label select, .data-form label textarea { margin-top: 5px; }
.data-form .form-wide { grid-column: 1 / -1; }
.data-form .check-label { min-height: 42px; display: flex; align-items: center; gap: 8px; }
.data-form .check-label input { width: 16px; min-height: 16px; margin: 0; }
.master-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.table-panel { padding: 4px 18px 12px; }
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 14px 12px 10px; color: #78817c; text-align: left; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 12px; border-top: 1px solid #e9e7df; vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(220,233,223,.2); }
.cell-note { margin-top: 3px; display: block; color: var(--muted); font-size: 9px; font-weight: 500; }
.progress-label { display: flex; align-items: center; gap: 9px; }
.progress-label > span { width: 75px; height: 5px; overflow: hidden; background: #e5e6e2; border-radius: 99px; }
.progress-label i { height: 100%; display: block; background: var(--green); border-radius: 99px; }
.progress-label strong { font-size: 11px; }
.text-danger { color: var(--red) !important; }
.text-success { color: var(--green) !important; }
.muted-row { opacity: .62; }

.order-hero {
    padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px;
    background: linear-gradient(120deg, rgba(255,254,249,.95), rgba(230,239,231,.8));
    border: 1px solid var(--line); border-radius: 20px;
}
.order-identity, .order-readiness { display: flex; align-items: center; gap: 18px; }
.product-code { width: 66px; height: 66px; display: grid; place-items: center; color: #fff; background: var(--forest); border-radius: 17px 17px 17px 5px; font-family: Georgia, serif; font-size: 29px; }
.order-identity h2 { margin: 3px 0; font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.order-identity p:not(.eyebrow) { margin: 0; color: var(--muted); }
.order-readiness small, .order-readiness strong, .order-readiness span { display: block; }
.order-readiness small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.order-readiness strong { margin-top: 3px; font-size: 15px; }
.order-readiness span { color: var(--red); font-size: 10px; }

.milestone-strip { margin: 14px 0 18px; padding: 17px 23px; display: grid; grid-template-columns: repeat(3, auto 1fr) auto; align-items: center; gap: 11px; background: rgba(255,254,249,.62); border: 1px solid var(--line); border-radius: 14px; }
.milestone-strip > div { display: grid; grid-template-columns: 27px auto; column-gap: 9px; }
.milestone-strip div > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: #87918c; background: #e8e9e5; border-radius: 50%; font-size: 10px; font-weight: 900; }
.milestone-strip div.done > span { color: #fff; background: var(--green); }
.milestone-strip div.active > span { color: #fff; background: var(--coral); box-shadow: 0 0 0 5px var(--coral-soft); }
.milestone-strip small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.milestone-strip strong { font-size: 10px; }
.milestone-strip > i { height: 1px; background: #d8dbd7; }

.bom-table { min-width: 940px; }
.bom-table td { padding-top: 12px; padding-bottom: 12px; }
.row-danger { background: rgba(253,232,225,.32); }
.tree-code { padding-left: calc(var(--level) * 18px); display: flex; gap: 6px; }
.tree-code > span { color: #9ca59f; font-family: monospace; }
.type-tag { padding: 4px 7px; color: #59665f; background: #edf0ed; border-radius: 5px; font-size: 9px; }
.make-pill { padding: 4px 7px; color: #936116; background: var(--amber-soft); border-radius: 5px; font-size: 9px; white-space: nowrap; }

.action-panel { display: flex; flex-direction: column; gap: 9px; }
.action-panel .panel-head { margin-bottom: 4px; }
.action-panel form { margin: 0; }
.action-summary { padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 10px; }
.action-summary > span { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; border-radius: 8px; font-weight: 900; }
.action-summary strong, .action-summary small { display: block; }
.action-summary small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.action-summary.danger { background: var(--red-soft); }
.action-summary.danger > span { background: var(--red); }
.action-summary.success { background: var(--green-soft); }
.action-summary.success > span { background: var(--green); }
.partial-box { margin-top: auto; padding: 16px; background: #efeee7; border-radius: 12px; }
.partial-box > strong { display: block; margin: 4px 0 1px; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.partial-box > span { color: var(--muted); font-size: 10px; }
.split-bar, .stock-bar { height: 6px; margin-top: 11px; overflow: hidden; background: #d9ddd8; border-radius: 99px; }
.split-bar i, .stock-bar i { height: 100%; display: block; background: var(--coral); border-radius: 99px; }
.stock-bar i { background: var(--green); }

.crisis-card {
    margin-top: 18px; padding: 26px 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
    color: #eaf3ee; background:
        radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 14rem),
        #2c3531;
    border-radius: 19px;
}
.crisis-card h3 { margin: 5px 0; font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.crisis-card p:not(.eyebrow) { max-width: 640px; margin: 0; color: #aebbb5; }
.crisis-form { min-width: 420px; display: flex; align-items: flex-end; gap: 9px; }
.crisis-form label { flex: 1; color: #bdc8c3; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.crisis-form input { margin-top: 5px; }

input, select, textarea {
    width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #fff;
    border: 1px solid #d5d7d2; border-radius: 9px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #7ba293; box-shadow: 0 0 0 3px rgba(56,117,94,.1); }
.form-stack { display: grid; gap: 13px; }
.form-stack label { color: #56625c; font-size: 10px; font-weight: 800; }
.form-stack label input { margin-top: 5px; }
.fine-print { margin: 2px 0 0; color: var(--muted); font-size: 9px; }

.matrix-tag { width: fit-content; padding: 4px 7px; display: inline-block; color: var(--forest); background: var(--sage); border-radius: 6px; font-size: 10px; font-weight: 900; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; }
.product-card { padding: 20px; background: rgba(255,254,249,.88); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.025); }
.product-card.finished { color: #eef5f1; background: var(--forest); border-color: var(--forest); }
.product-card.semi { background: #e7eee8; border-color: #d0ddd3; }
.product-card-head { display: flex; align-items: center; justify-content: space-between; }
.product-card-head > span:first-child { font-family: Georgia, serif; font-size: 26px; }
.product-card.finished .matrix-tag { color: #dce9df; background: rgba(255,255,255,.13); }
.product-card h3 { min-height: 40px; margin: 14px 0 3px; font-size: 14px; }
.product-card p { margin: 0; color: var(--muted); font-size: 10px; }
.product-card.finished p, .product-card.finished small, .product-card.finished dt { color: #a9c2b7; }
.product-card dl { margin: 18px 0 14px; padding: 12px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(120,130,124,.22); border-bottom: 1px solid rgba(120,130,124,.22); }
.product-card dl div + div { padding-left: 10px; border-left: 1px solid rgba(120,130,124,.22); }
.product-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.product-card dd { margin: 2px 0 0; font-weight: 800; }
.product-card > small { color: var(--muted); font-size: 9px; }

.po-board { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 14px; }
.po-card { padding: 20px; background: rgba(255,254,249,.9); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.03); transition: .18s; }
.po-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.po-card.overdue { border-color: #edc2b7; box-shadow: inset 3px 0 var(--coral); }
.po-top, .po-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.po-top > span:first-child { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; }
.po-card h3 { margin: 16px 0 4px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.po-card > p { min-height: 35px; margin: 0; color: var(--muted); font-size: 10px; }
.po-dates { margin: 15px 0; padding: 13px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.po-dates span + span { padding-left: 13px; border-left: 1px solid var(--line); }
.po-dates small, .po-dates strong { display: block; }
.po-dates small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.po-dates strong { margin-top: 3px; font-size: 11px; }
.po-foot { color: var(--muted); font-size: 10px; }

.po-detail-hero { padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; color: #edf6f1; background: var(--forest); border-radius: 20px; }
.po-detail-hero.overdue { background: #7c392e; }
.po-detail-hero h2 { margin: 5px 0; font-family: Georgia, serif; font-size: 31px; font-weight: 400; }
.po-detail-hero p { margin: 0; color: #aec5bb; }
.po-detail-hero > div:last-child { display: grid; justify-items: end; }
.po-detail-hero > div:last-child > small { margin-top: 12px; color: #aec5bb; font-size: 9px; text-transform: uppercase; }
.po-detail-hero > div:last-child > strong { font-size: 17px; }
.tracking-result { margin-top: 16px; padding: 15px; display: flex; align-items: center; gap: 12px; background: #f0efe8; border-radius: 12px; }
.tracking-result > span { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: #8b948f; border-radius: 10px; }
.tracking-result.success { background: var(--green-soft); }
.tracking-result.success > span { background: var(--green); }
.tracking-result small, .tracking-result strong { display: block; }
.tracking-result small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.tracking-result p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }

.supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 14px; }
.supplier-card { padding: 20px; background: rgba(255,254,249,.9); border: 1px solid var(--line); border-radius: 16px; }
.supplier-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; }
.supplier-logo { width: 44px; height: 44px; display: grid; place-items: center; color: var(--forest); background: var(--sage); border-radius: 12px; font-family: Georgia, serif; font-size: 17px; text-transform: uppercase; }
.supplier-head h3 { margin: 0; font-size: 13px; }
.supplier-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.score { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.score.good { color: var(--green); background: var(--green-soft); }
.score.warn { color: #996714; background: var(--amber-soft); }
.supplier-metrics { margin: 17px 0; padding: 13px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.supplier-metrics span + span { padding-left: 10px; border-left: 1px solid var(--line); }
.supplier-metrics small, .supplier-metrics strong { display: block; }
.supplier-metrics small { color: var(--muted); font-size: 8px; }
.supplier-metrics strong { margin-top: 3px; font-size: 12px; }
.supplier-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }

.email-list { padding-top: 5px; padding-bottom: 5px; }
.email-row { border-top: 1px solid #e7e5de; }
.email-row:first-child { border-top: 0; }
.email-row summary { padding: 15px 5px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.email-row summary::-webkit-details-marker { display: none; }
.mail-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--forest); background: var(--sage); border-radius: 9px; }
.email-row summary strong, .email-row summary small { display: block; }
.email-row summary small { color: var(--muted); font-size: 9px; }
.email-row pre { margin: 0 48px 16px; padding: 16px; color: #3e4b45; background: #f0efe8; border-radius: 10px; font-family: inherit; font-size: 11px; white-space: pre-wrap; }

.decision-hero { padding: 27px 31px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 20px; color: #fff; border-radius: 20px; }
.decision-hero.green { background: var(--green); }
.decision-hero.yellow { background: #9b6b22; }
.decision-hero.red { background: #843d32; }
.decision-hero h2 { margin: 4px 0; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.decision-hero p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.7); }
.traffic-light { padding: 9px; display: grid; gap: 5px; background: rgba(0,0,0,.2); border-radius: 99px; }
.traffic-light span { width: 13px; height: 13px; background: rgba(255,255,255,.2); border-radius: 50%; }
.decision-hero.red .traffic-light span:first-child { background: #ff8670; box-shadow: 0 0 14px #ff8670; }
.decision-hero.yellow .traffic-light span:nth-child(2) { background: #ffd166; box-shadow: 0 0 14px #ffd166; }
.decision-hero.green .traffic-light span:last-child { background: #8fe3b4; box-shadow: 0 0 14px #8fe3b4; }
.decision-date { display: grid; justify-items: end; }
.decision-date small { color: rgba(255,255,255,.65); font-size: 9px; text-transform: uppercase; }
.decision-date strong { font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.decision-date span { font-size: 9px; opacity: .65; }
.simulation-kpis { margin: 14px 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.simulation-kpis article { padding: 16px 18px; background: rgba(255,254,249,.78); border: 1px solid var(--line); border-radius: 13px; }
.simulation-kpis small, .simulation-kpis strong { display: block; }
.simulation-kpis small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.simulation-kpis strong { margin-top: 4px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.score-inline { padding: 4px 7px; color: var(--green); background: var(--green-soft); border-radius: 6px; font-size: 10px; }
.reason-text { color: var(--red); font-size: 9px; }
.batch-card { padding: 15px; background: #f0efe8; border-radius: 11px; }
.batch-card + .batch-card { margin-top: 9px; }
.batch-card.first { color: #eef6f1; background: var(--forest); }
.batch-card span, .batch-card strong, .batch-card p { display: block; }
.batch-card span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.batch-card strong { margin-top: 4px; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.batch-card p { margin: 0; color: var(--muted); font-size: 9px; }
.batch-card.first p { color: #a9c4b8; }
.expedite-list { display: grid; }
.expedite-list > div:not(.empty-state) { padding: 12px 2px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 11px; border-top: 1px solid #e7e5de; }
.expedite-list > div:first-child { border-top: 0; }
.expedite-list p { margin: 0; }
.expedite-list p strong, .expedite-list p small { display: block; }
.expedite-list p small, .expedite-list > div > span:last-child { color: var(--muted); font-size: 9px; }
.approval-bar { margin-top: 18px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #eaf3ee; background: #2c3531; border-radius: 15px; }
.approval-bar strong, .approval-bar span { display: block; }
.approval-bar span { color: #aebbb5; font-size: 10px; }

.login-body { min-height: 100vh; background: #ebe8df; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .92fr) 1.08fr; }
.login-story {
    position: relative; overflow: hidden; padding: clamp(30px, 5vw, 65px);
    display: flex; flex-direction: column; color: #eef6f1;
    background:
        radial-gradient(circle at 68% 75%, rgba(101,159,134,.26), transparent 20rem),
        linear-gradient(140deg, #102a22, #1f4d40);
}
.login-story::before, .login-story::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.login-story::before { width: 430px; height: 430px; right: -190px; top: 11%; }
.login-story::after { width: 270px; height: 270px; right: -80px; top: 25%; }
.story-copy { position: relative; z-index: 1; margin: auto 0; }
.story-copy h1 { margin: 12px 0 18px; font-family: Georgia, serif; font-size: clamp(42px, 6vw, 77px); line-height: .98; font-weight: 400; letter-spacing: -.06em; }
.story-copy h1 em { color: #f39a7e; font-weight: 400; }
.story-copy > p:last-child { max-width: 480px; color: #a8c2b7; font-size: 15px; }
.story-metric { position: relative; z-index: 1; width: fit-content; padding: 14px 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; backdrop-filter: blur(10px); }
.story-metric span, .story-metric strong, .story-metric small { display: block; }
.story-metric span { color: #9fbbb0; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.story-metric strong { margin: 3px 0; font-size: 13px; }
.story-metric small { color: #91aaa0; font-size: 9px; }
.login-panel { padding: 40px; display: grid; place-items: center; }
.login-card { width: min(410px, 100%); padding: 36px; background: rgba(255,254,249,.82); border: 1px solid #d9d7cf; border-radius: 21px; box-shadow: 0 25px 60px rgba(23,39,32,.09); }
.login-card h2 { margin: 8px 0 5px; font-family: Georgia, serif; font-size: 31px; font-weight: 400; letter-spacing: -.04em; }
.muted { color: var(--muted); }
.login-card > .muted { margin: 0 0 24px; font-size: 11px; }
.demo-accounts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.demo-accounts summary { color: var(--ink); cursor: pointer; font-weight: 800; }
.demo-accounts p { margin: 8px 0 3px; }
.demo-accounts button { padding: 0; color: var(--forest-2); background: none; border: 0; cursor: pointer; font-weight: 800; font-size: 10px; }

.modal-backdrop { display: none; }

@media (max-width: 1180px) {
    :root { --sidebar: 220px; }
    .kpi-grid, .simulation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
    .po-board, .supplier-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
    .risk-row { grid-template-columns: 50px minmax(180px, 1fr) 125px 20px; }
    .risk-parts { display: none; }
}

@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; left: 0; transform: translateX(-102%); width: 260px; transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.18); }
    body.menu-open .sidebar { transform: translateX(0); }
    body.menu-open .modal-backdrop { position: fixed; inset: 0; display: block; background: rgba(8,20,15,.42); z-index: 19; }
    .menu-button { display: block; }
    .topbar { min-height: 76px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .crisis-card { align-items: stretch; flex-direction: column; }
    .crisis-form { min-width: 0; }
    .product-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
    .login-shell { grid-template-columns: 1fr; }
    .login-story { min-height: 440px; }
    .login-panel { padding: 25px; }
    .milestone-strip { grid-template-columns: repeat(2, 1fr); }
    .milestone-strip > i { display: none; }
    .decision-hero { grid-template-columns: 45px 1fr; }
    .decision-date { grid-column: 2; justify-items: start; }
    .data-form { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 650px) {
    .content { padding-top: 22px; }
    .topbar { gap: 10px; }
    .topbar .eyebrow, .user-chip > span:not(.avatar) { display: none; }
    .topbar h1 { font-size: 20px; }
    .hero-strip { min-height: 220px; padding: 27px; align-items: flex-start; flex-direction: column; }
    .hero-strip .button { margin-top: auto; }
    .kpi-grid, .simulation-kpis, .product-grid, .po-board, .supplier-grid { grid-template-columns: 1fr; }
    .risk-row { grid-template-columns: 47px 1fr 20px; }
    .risk-date { display: none; }
    .timeline { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
    .section-intro { align-items: flex-start; flex-direction: column; }
    .filter-pills { width: 100%; }
    .filter-pills button { flex: 1; }
    .order-hero, .po-detail-hero { align-items: flex-start; flex-direction: column; }
    .order-readiness { width: 100%; padding-top: 15px; border-top: 1px solid var(--line); }
    .product-code { width: 54px; height: 54px; font-size: 23px; }
    .order-identity h2 { font-size: 23px; }
    .milestone-strip { padding: 15px; }
    .crisis-form { display: grid; }
    .crisis-form label, .crisis-form .button { width: 100%; }
    .decision-hero { padding: 23px; }
    .decision-hero h2 { font-size: 24px; }
    .approval-bar { align-items: stretch; flex-direction: column; }
    .approval-bar .button { width: 100%; }
    .login-story { min-height: 390px; padding: 32px 25px; }
    .story-copy h1 { font-size: 47px; }
    .login-panel { padding: 18px; }
    .login-card { padding: 26px 22px; }
    .master-grid { grid-template-columns: 1fr; }
    .data-form, .data-form.compact { grid-template-columns: 1fr; }
    .data-form .form-wide { grid-column: auto; }
}

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