:root {
  --bg: #f4f6f1;
  --surface: #ffffff;
  --ink: #4d1723;
  --muted: #6c7873;
  --line: #e3e9e6;
  --green: #7b2637;
  --green-deep: #541724;
  --mint: #b94d63;
  --nav: #351018;
  --nav-soft: #581b2a;
  --blue: #4f83ff;
  --violet: #8d71ef;
  --coral: #f06c61;
  --amber: #e9aa42;
  --shadow: 0 12px 34px rgba(18, 42, 32, 0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; }
button, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 248px; display: flex; flex-direction: column; background: linear-gradient(180deg, #4b1521 0%, #270b11 100%); color: #f3e5e8; padding: 20px 18px 18px; box-shadow: 8px 0 28px rgba(35, 6, 12, .16); }
.brand { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 0 7px 23px; color: inherit; text-decoration: none; }
.brand-logo-panel { height: 55px; padding: 7px 10px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brand-logo-panel img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand-product { color: #d88798; font-size: 8px; font-weight: 700; letter-spacing: .26em; text-align: right; text-transform: uppercase; }
.nav-list { display: flex; flex-direction: column; gap: 5px; }
.nav-label { padding: 0 13px; margin: 0 0 6px; color: #597064; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 20px; }
.nav-item { position: relative; width: 100%; height: 43px; border: 0; background: transparent; color: #84998f; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 9px; cursor: pointer; text-align: left; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-item:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.nav-item.active { color: #ecfff6; background: linear-gradient(90deg, rgba(40, 194, 136, .18), rgba(25, 88, 64, .12)); }
.nav-item.active::before { content: ""; position: absolute; left: -18px; width: 3px; height: 24px; background: var(--mint); border-radius: 0 3px 3px 0; box-shadow: 0 0 14px rgba(66, 215, 158, .7); }
.nav-item .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-item em, .nav-item b { margin-left: auto; font-style: normal; font-size: 9px; padding: 3px 6px; border-radius: 10px; }
.nav-item em { color: #ffb7af; background: rgba(240, 108, 97, .14); }
.nav-item b { color: #8aefc2; background: rgba(66, 215, 158, .13); letter-spacing: .05em; }
.sparkle-icon { color: var(--mint); font-size: 18px; text-align: center; }
.sidebar-status { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 14px 12px; border: 1px solid #193027; background: rgba(21, 43, 34, .45); border-radius: 10px; }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status strong { font-size: 10px; color: #afc2b8; }
.sidebar-status small { color: #587064; font-size: 9px; margin-top: 3px; }
.status-orbit { width: 22px; height: 22px; border: 1px solid #1e5843; display: grid; place-items: center; border-radius: 50%; }
.status-orbit span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.profile { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: transparent; border: 0; padding: 20px 7px 4px; text-align: left; color: #aec1b7; cursor: pointer; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #315849, #183a2d); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #c8ffdf; }
.profile strong, .profile small { display: block; }
.profile strong { font-size: 10px; }
.profile small { font-size: 8px; color: #5f776b; margin-top: 3px; }
.profile-more { color: #4f695d; letter-spacing: 1px; }
.main-content { min-height: 100vh; margin-left: 248px; }
.topbar { position: sticky; top: 0; z-index: 15; height: 67px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, .88); border-bottom: 1px solid rgba(218, 227, 222, .8); backdrop-filter: blur(16px); }
.breadcrumb { display: flex; gap: 9px; align-items: center; font-size: 11px; color: #8a9691; }
.breadcrumb b { color: #ccd3d0; font-weight: 400; }
.breadcrumb strong { color: #47554f; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.period-control, .icon-button, .tour-launch, .secondary-button { border: 1px solid var(--line); background: #fff; border-radius: 8px; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; font-size: 10px; font-weight: 600; }
.period-control .icon { width: 15px; }
.icon-button { width: 36px; padding: 0; justify-content: center; position: relative; }
.icon-button .icon { width: 16px; }
.icon-button i { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); border: 1px solid white; }
.tour-launch { background: #0f2019; color: #d8eee3; border-color: #0f2019; padding: 0 14px; }
.tour-launch span { color: var(--mint); font-size: 8px; }
.mobile-menu { display: none; }
.dashboard { padding: 31px 34px 22px; max-width: 1540px; margin: 0 auto; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { display: flex; gap: 7px; align-items: center; font-size: 8px; color: var(--green); font-weight: 800; letter-spacing: .17em; }
.eyebrow b { margin-left: 8px; padding: 3px 6px; border-radius: 7px; background: #edf5d3; color: #688d10; font-size: 7px; letter-spacing: .08em; }
.eyebrow span { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(66, 215, 158, .12); }
h1, h2, h3, p { margin: 0; }
.dashboard-heading h1 { font: 800 29px/1.2 "Manrope"; letter-spacing: -.04em; margin: 7px 0 5px; }
.dashboard-heading p { color: var(--muted); font-size: 11px; }
.heading-actions { display: flex; gap: 9px; }
.secondary-button .icon { width: 14px; }
.ai-primary { height: 38px; border: 0; border-radius: 8px; color: #effff7; padding: 0 17px; background: linear-gradient(135deg, #0d8e64, #096d4f); box-shadow: 0 7px 17px rgba(13, 142, 100, .23); display: flex; gap: 9px; align-items: center; position: relative; cursor: pointer; font-size: 10px; font-weight: 700; overflow: hidden; }
.ai-primary::after { content: ""; position: absolute; width: 65px; height: 65px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; right: -30px; }
.ai-primary i { width: 6px; height: 6px; border-radius: 50%; background: #89f1c4; box-shadow: 0 0 7px #89f1c4; }
.ai-glyph { font-size: 15px; color: #aaf4d1; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 14px; }
.kpi-card { min-width: 0; position: relative; height: 151px; background: var(--surface); border: 1px solid #e5ebe8; border-radius: 11px; padding: 15px 16px; box-shadow: 0 3px 12px rgba(27, 50, 41, .025); overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66,215,158,.2), transparent); opacity: 0; }
.kpi-card:hover::after { opacity: 1; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kpi-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; }
.kpi-icon .icon { width: 15px; height: 15px; }
.kpi-icon.mint { color: #08835b; background: #e3f8ef; }
.kpi-icon.blue { color: var(--blue); background: #edf2ff; }
.kpi-icon.violet { color: var(--violet); background: #f1edff; }
.kpi-icon.coral { color: var(--coral); background: #fff0ed; }
.trend { font-size: 8px; font-weight: 700; border-radius: 10px; padding: 4px 7px; }
.trend.positive { color: #07865c; background: #e9f8f2; }
.trend.neutral { color: #59746a; background: #f0f4f2; }
.trend.negative { color: #d95c53; background: #fff0ee; }
.kpi-card > p { color: #67746e; font-size: 10px; font-weight: 600; margin-bottom: 3px; }
.kpi-card h2 { font: 700 23px/1.2 "Manrope"; letter-spacing: -.04em; }
.kpi-card h2 small { font-size: 12px; color: #63736c; }
.kpi-foot { display: block; color: #8b9692; font-size: 8px; margin-top: 11px; }
.mini-bars { position: absolute; right: 16px; bottom: 32px; width: 74px; height: 31px; display: flex; align-items: flex-end; gap: 4px; }
.mini-bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(#48d99f, #dff8ef); }
.progress-row { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.progress-row > span { flex: 1; background: #edf1ef; height: 4px; border-radius: 3px; overflow: hidden; }
.progress-row i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #82a7ff); }
.progress-row b { font-size: 8px; color: #687770; }
.target-line { position: relative; height: 4px; background: #edf0ef; border-radius: 3px; margin-top: 15px; }
.target-line span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #9b7cff, #b9a8ff); }
.target-line i { position: absolute; top: -3px; width: 1px; height: 10px; background: #3d4c45; }
.risk-breakdown { display: flex; gap: 12px; margin-top: 9px; color: #69766f; font-size: 8px; }
.risk-breakdown i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; }
.risk-breakdown .critical { background: var(--coral); }
.risk-breakdown .high { background: var(--amber); }
.insight-banner { min-height: 74px; display: grid; grid-template-columns: 45px 1fr auto auto; gap: 14px; align-items: center; border: 1px solid #bfe5d5; border-radius: 11px; padding: 12px 15px; background: linear-gradient(100deg, #effaf5 0%, #f8fcfa 55%, #f1f8f5 100%); position: relative; overflow: hidden; margin-bottom: 14px; }
.insight-banner::after { content: ""; position: absolute; right: 20%; top: -90px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(66,215,158,.09), transparent 68%); }
.insight-symbol { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #d9ffec; font-size: 19px; position: relative; background: linear-gradient(145deg, #11986b, #086747); box-shadow: 0 5px 14px rgba(12, 116, 83, .2); }
.insight-symbol i { position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: #76e6b4; border: 2px solid #effaf5; }
.insight-copy > div { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.insight-copy b { font-size: 8px; color: #0a8b61; letter-spacing: .13em; }
.insight-copy span { font-size: 7px; color: #5f8073; background: #ddf3ea; border-radius: 8px; padding: 3px 6px; }
.insight-copy p { color: #50615a; font-size: 10px; line-height: 1.45; }
.insight-copy strong { color: #17362a; }
.impact-pill { border-left: 1px solid #d0e8de; padding: 1px 21px; }
.impact-pill small, .impact-pill strong { display: block; white-space: nowrap; }
.impact-pill small { color: #799087; font-size: 8px; }
.impact-pill strong { font: 700 15px "Manrope"; color: #0b7755; margin-top: 4px; }
.insight-action { border: 1px solid #badfd0; border-radius: 7px; background: rgba(255,255,255,.75); height: 32px; padding: 0 12px; color: #136f52; font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.insight-action span { margin-left: 5px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .85fr); gap: 14px; }
.panel { background: #fff; border: 1px solid #e2e9e6; border-radius: 11px; box-shadow: 0 3px 14px rgba(15, 40, 30, .03); overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; padding: 17px 18px 0; }
.panel-heading h3 { font: 700 12px/1.3 "Manrope"; letter-spacing: -.02em; }
.panel-heading p { color: #89948f; font-size: 8px; margin-top: 4px; }
.chart-legend { display: flex; align-items: center; gap: 11px; font-size: 8px; color: #728079; }
.chart-legend span { display: flex; align-items: center; gap: 4px; }
.chart-legend i { width: 12px; height: 2px; display: inline-block; }
.chart-legend .actual { background: var(--green); }
.chart-legend .forecast { background: var(--blue); border-top: 1px dashed white; }
.chart-legend button, .more-button { height: 25px; border: 1px solid #e6ebe9; background: #fff; border-radius: 6px; color: #68766f; font-size: 8px; cursor: pointer; }
.chart-legend button { padding: 0 8px; }
.more-button { width: 28px; }
.chart-large { height: 211px; margin: 0 8px; }
.forecast-note { height: 49px; border-top: 1px solid #eef2f0; display: flex; align-items: center; gap: 9px; padding: 0 18px; background: #fbfcfb; }
.forecast-note .icon { width: 18px; color: var(--green); }
.forecast-note p { display: flex; flex-direction: column; }
.forecast-note strong { font-size: 8px; color: #3d5148; }
.forecast-note small { color: #89958f; font-size: 7px; margin-top: 3px; }
.forecast-note button { margin-left: auto; border: 0; background: transparent; color: var(--green); font-size: 8px; font-weight: 700; cursor: pointer; }
.donut-wrap { position: relative; height: 184px; }
.chart-donut { width: 100%; height: 100%; }
.donut-center { pointer-events: none; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); text-align: center; }
.donut-center strong, .donut-center span { display: block; }
.donut-center strong { font: 700 15px "Manrope"; }
.donut-center span { color: #8a9691; font-size: 7px; margin-top: 3px; }
.mix-list { padding: 0 18px 13px; display: grid; gap: 8px; }
.mix-list > div { display: flex; justify-content: space-between; color: #63716a; font-size: 8px; }
.mix-list i { display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin-right: 6px; }
.mix-list strong { color: #405048; }
.risk-map-panel { min-height: 294px; }
.chart-medium { height: 237px; margin: 0 5px; }
.live-label { font-size: 7px; color: #688078; letter-spacing: .08em; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; margin-right: 3px; box-shadow: 0 0 6px var(--mint); }
.exceptions-panel { min-height: 294px; }
.table-heading { padding-bottom: 13px; border-bottom: 1px solid #edf1ef; }
.text-button { border: 0; background: transparent; color: var(--green); font-size: 8px; font-weight: 700; cursor: pointer; }
.text-button span { margin-left: 5px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: #929d98; background: #fafcfa; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; text-align: left; height: 29px; padding: 0 12px; }
td { height: 62px; border-top: 1px solid #edf1ef; padding: 0 12px; font-size: 8px; color: #65736c; vertical-align: middle; }
td:first-child { display: flex; align-items: center; gap: 8px; min-width: 175px; }
td strong, td small { display: block; white-space: nowrap; }
td strong { color: #31433a; font-size: 8px; }
td small { color: #95a09b; font-size: 7px; margin-top: 3px; }
.product-avatar { flex: 0 0 29px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; font-weight: 700; }
.product-avatar.pet { background: #e7f8f1; color: #198861; }
.product-avatar.cap { background: #edf2ff; color: #547fe7; }
.product-avatar.film { background: #f5efff; color: #8767d4; }
.stock-bar { width: 72px; height: 3px; background: #edf1ef; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.stock-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f08b65, #edbd6b); }
.risk-tag { display: inline-block; padding: 4px 7px; border-radius: 9px; font-weight: 700; font-size: 7px; }
.risk-tag.critical { background: #ffedea; color: #d9554d; }
.risk-tag.high { background: #fff4df; color: #c8861d; }
td:last-child button { border: 0; width: 24px; height: 24px; border-radius: 6px; background: #f2f6f4; color: #718079; cursor: pointer; }
.dashboard-footer { display: flex; justify-content: space-between; color: #98a39e; font-size: 8px; padding: 16px 2px 0; }
.module-view { padding: 31px 34px 24px; max-width: 1540px; margin: 0 auto; }
.module-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.module-header h1 { font: 800 28px/1.2 "Manrope"; letter-spacing: -.04em; margin: 7px 0 5px; }
.module-header > div > p { color: var(--muted); font-size: 11px; }
.module-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 14px; }
.module-kpis article { min-height: 104px; padding: 15px 17px; background: white; border: 1px solid #e2e9e6; border-radius: 11px; box-shadow: 0 3px 12px rgba(27, 50, 41, .025); position: relative; overflow: hidden; }
.module-kpis article::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #0a607c; opacity: .18; }
.module-kpis .positive-card::after { background: #a9d423; opacity: 1; }
.module-kpis .warning-card::after { background: #efae43; opacity: 1; }
.module-kpis span, .module-kpis strong, .module-kpis small { display: block; }
.module-kpis span { color: #738079; font-size: 9px; font-weight: 600; }
.module-kpis strong { font: 700 21px "Manrope"; color: #15384a; margin: 7px 0 4px; }
.module-kpis small { color: #929d98; font-size: 8px; }
.module-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.portfolio-grid, .inventory-module-grid, .imports-bottom-grid, .planning-bottom-grid { grid-template-columns: 1.45fr 1fr; }
.module-panel { background: white; border: 1px solid #e2e9e6; border-radius: 11px; box-shadow: 0 3px 14px rgba(15, 40, 30, .03); overflow: hidden; }
.module-panel-head { min-height: 63px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid #edf1ef; }
.module-panel-head h2 { font: 700 12px/1.3 "Manrope"; color: #17384a; }
.module-panel-head p { color: #89948f; font-size: 8px; margin-top: 4px; }
.model-badge { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 8px; background: #eef6d8; color: #6b9213; font-size: 7px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.cluster-map { height: 272px; position: relative; background: radial-gradient(circle at 50% 50%, rgba(169,212,35,.08), transparent 42%), linear-gradient(#fbfcfa, #fff); overflow: hidden; }
.cluster { position: absolute; z-index: 2; display: grid; place-items: center; align-content: center; border-radius: 50%; text-align: center; border: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 24px rgba(7,48,67,.12), inset 0 0 0 6px rgba(255,255,255,.18); }
.cluster strong, .cluster span, .cluster small { display: block; }
.cluster strong { font: 700 14px "Manrope"; }
.cluster span { font-size: 8px; margin-top: 2px; }
.cluster small { font-size: 7px; opacity: .67; margin-top: 3px; }
.cluster-main { width: 132px; height: 132px; left: 38%; top: 61px; color: #13364a; background: rgba(175,214,37,.82); }
.cluster-airless { width: 106px; height: 106px; left: 14%; top: 36px; color: white; background: rgba(10,96,124,.87); }
.cluster-treatment { width: 91px; height: 91px; right: 14%; top: 24px; color: white; background: rgba(85,167,160,.88); }
.cluster-collapsible { width: 102px; height: 102px; right: 19%; bottom: 18px; color: #503b13; background: rgba(241,189,91,.85); }
.cluster-link { position: absolute; z-index: 1; height: 1px; transform-origin: left; border-top: 1px dashed #b6c3bd; }
.link-one { width: 120px; left: 30%; top: 95px; transform: rotate(11deg); }
.link-two { width: 126px; left: 55%; top: 104px; transform: rotate(-18deg); }
.link-three { width: 109px; left: 53%; top: 167px; transform: rotate(24deg); }
.attribute-legend { height: 38px; display: flex; justify-content: center; align-items: center; gap: 18px; border-top: 1px solid #edf1ef; color: #718078; font-size: 8px; }
.attribute-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #a9d423; }
.attribute-legend span:nth-child(2) i { background: #0a607c; }.attribute-legend span:nth-child(3) i { background: #55a7a0; }.attribute-legend span:nth-child(4) i { background: #f1bd5b; }
.substitution-list { padding: 0 18px; }
.substitution-list > div { min-height: 87px; display: grid; grid-template-columns: 29px 1fr 20px 1fr; gap: 8px; align-items: center; border-bottom: 1px solid #edf1ef; }
.substitution-list > div:last-child { border-bottom: 0; }
.substitution-list p strong, .substitution-list p small { display: block; }
.substitution-list p strong { color: #31433a; font-size: 8px; }
.substitution-list p small { color: #929d98; font-size: 7px; margin-top: 4px; }
.arrow-match { width: 20px; height: 20px; display: grid; place-items: center; color: #789f15; background: #f0f6dd; border-radius: 50%; }
.technical-table-panel { margin-bottom: 14px; }
.filter-button { height: 27px; padding: 0 9px; border: 1px solid #dfe7e3; background: #fff; border-radius: 7px; color: #65746d; font-size: 8px; }
.simple-table { padding-bottom: 4px; }
.simple-row { min-height: 52px; display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr .6fr; gap: 12px; align-items: center; padding: 0 18px; border-top: 1px solid #edf1ef; color: #63716a; font-size: 8px; }
.simple-row span b, .simple-row span small { display: block; }.simple-row span small { color: #96a19c; font-size: 7px; margin-top: 3px; }
.simple-head { min-height: 31px; background: #fafcfa; color: #929d98; font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
.score { width: 34px; padding: 4px 6px; border-radius: 8px; text-align: center; }.score-high { color: #668e12; background: #eff7dc; }.score-mid { color: #b67a17; background: #fff2dc; }
.coverage-scale { display: flex; align-items: center; gap: 5px; color: #8c9893; font-size: 7px; }.coverage-scale i { width: 9px; height: 5px; border-radius: 3px; background: #f3a095; }.coverage-scale i:nth-of-type(2) { background: #b5d95a; }
.coverage-table { padding: 8px 18px 15px; }
.coverage-table > div { min-height: 45px; display: grid; grid-template-columns: 1.35fr repeat(3,.75fr) .7fr; gap: 8px; align-items: center; border-bottom: 1px solid #edf1ef; color: #65736c; font-size: 8px; }
.coverage-table .coverage-head { min-height: 27px; color: #98a29e; font-size: 7px; text-transform: uppercase; }
.coverage-table b { color: #31453b; }.coverage-table em { font-style: normal; color: #557313; font-weight: 700; }
.heat { width: fit-content; padding: 5px 7px; border-radius: 7px; }.critical-heat { color: #ca584f; background: #ffefec; }.warning-heat { color: #bd7a14; background: #fff3df; }.optimal-heat { color: #668c16; background: #eff7da; }.excess-heat { color: #2e7285; background: #e8f4f7; }
.alert-count { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #d95b52; background: #fff0ed; font-size: 8px; font-weight: 700; }
.decision-list { padding: 4px 18px 13px; }.decision { min-height: 71px; display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid #edf1ef; }.decision > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #f3f6f4; font-size: 7px; font-weight: 700; }.decision p strong,.decision p small { display:block; }.decision p strong { color:#31443b;font-size:8px; }.decision p small { color:#929d98;font-size:7px;margin-top:4px; }.decision > b { font-size:8px; }.critical-decision > b { color:#d45b52; }.warning-decision > b { color:#bd7a14; }.excess-decision > b { color:#2e7285; }
.inventory-bars-panel { margin-bottom: 14px; }.inventory-bars { padding: 6px 18px 15px; }.inventory-bars > div { min-height: 43px; display: grid; grid-template-columns: 120px 1fr 70px; gap: 10px; align-items: center; font-size: 8px; }.inventory-bars b { color:#405148; }.inventory-bars > div > span { height: 10px; display: flex; overflow: hidden; border-radius: 5px; background:#edf1ef; }.inventory-bars i { height:100%; }.inventory-bars .available { background:#a9d423; }.inventory-bars .committed { background:#0a607c; }.inventory-bars .transit { background:#55a7a0; }.inventory-bars small { text-align:right;color:#7a8882; }
.shipment-panel { margin-bottom: 14px; }.shipment-timeline { padding: 10px 18px 17px; }.timeline-axis { display:grid;grid-template-columns:repeat(4,1fr);margin-left:175px;color:#97a29d;font-size:7px;border-bottom:1px solid #dfe7e3;padding-bottom:7px; }.shipment-row { min-height:65px;position:relative;border-bottom:1px solid #edf1ef;margin-left:0; }.shipment-row p { position:absolute;left:0;top:15px;width:160px; }.shipment-row p b,.shipment-row p small { display:block; }.shipment-row p b { color:#31443b;font-size:8px; }.shipment-row p small { color:#929d98;font-size:7px;margin-top:4px; }.shipment-bar { position:absolute;top:20px;height:24px;padding:6px 9px;border-radius:7px;color:#fff;font-size:7px;text-align:center; }.shipment-green { background:#789f15; }.shipment-blue { background:#0a607c; }.shipment-teal { background:#55a7a0; }.shipment-amber { background:#d79a39; }.coverage-marker { position:absolute;top:46px;font-style:normal;font-size:6px;color:#d85c54;white-space:nowrap; }.coverage-marker::before { content:"";position:absolute;left:0;bottom:12px;height:30px;border-left:1px dashed #e1847e; }
.consolidation-visual { display:flex;align-items:center;justify-content:center;gap:10px;padding:23px 16px 13px; }.consolidation-visual > div { min-width:88px;padding:11px;border:1px solid #dfe8e4;border-radius:9px;text-align:center; }.consolidation-visual b,.consolidation-visual span { display:block; }.consolidation-visual b { color:#31443b;font-size:9px; }.consolidation-visual div span { color:#89958f;font-size:7px;margin-top:3px; }.consolidation-visual > span { color:#8a9691; }.consolidation-visual .combined-order { background:#eff7dd;border-color:#cfe69b; }.consolidation-visual .combined-order span { color:#6c9216;font-weight:700; }.consolidation-copy { padding:0 20px 17px;color:#68766f;font-size:8px;line-height:1.55;text-align:center; }.risk-items { padding:7px 18px 12px; }.risk-items > div { min-height:58px;display:grid;grid-template-columns:9px 1fr;gap:9px;align-items:center;border-bottom:1px solid #edf1ef; }.risk-dot { width:7px;height:7px;border-radius:50%; }.critical-dot { background:#f06c61; }.warning-dot { background:#efae43; }.good-dot { background:#a9d423; }.risk-items strong,.risk-items small { display:block; }.risk-items strong { color:#34463d;font-size:8px; }.risk-items small { color:#929d98;font-size:7px;margin-top:4px; }
.planning-flow { min-height:77px;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;padding:10px 16px;background:linear-gradient(90deg,#f1f7df,#f8fbf1);border:1px solid #dbe9b8;border-radius:11px; }.planning-flow > div { display:flex;align-items:center;gap:9px; }.planning-flow > div > span { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#fff;color:#739b16;font-size:9px;font-weight:700;box-shadow:0 3px 9px rgba(80,110,18,.09); }.planning-flow p strong,.planning-flow p small { display:block;white-space:nowrap; }.planning-flow p strong { color:#30463a;font-size:8px; }.planning-flow p small { color:#839087;font-size:7px;margin-top:3px; }.planning-flow > b { color:#9cad8e;font-weight:400; }.planning-flow .flow-result > span { color:white;background:#789f15; }
.monthly-plan-panel { margin-bottom:14px; }.plan-table { overflow-x:auto; }.plan-row { min-width:900px;min-height:62px;display:grid;grid-template-columns:1.6fr .7fr .8fr .5fr .9fr .8fr;gap:12px;align-items:center;padding:0 18px;border-top:1px solid #edf1ef;color:#63716a;font-size:8px; }.plan-row span b,.plan-row span small { display:block; }.plan-row span b { color:#31443b; }.plan-row span small { color:#929d98;font-size:7px;margin-top:4px; }.plan-head { min-height:30px;background:#fafcfa;color:#939e99;font-size:7px;text-transform:uppercase;letter-spacing:.05em; }.negative-number { color:#d95b52; }.positive-number { color:#6d9515; }.impact-metrics { min-height:115px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:15px; }.impact-metrics > div { text-align:center;border-right:1px solid #e8eeeb; }.impact-metrics > div:last-child { border-right:0; }.impact-metrics strong,.impact-metrics span { display:block; }.impact-metrics strong { font:700 18px "Manrope";color:#6c9414; }.impact-metrics span { color:#839087;font-size:7px;margin-top:5px; }.assumption-card ul { margin:13px 18px 17px;padding-left:16px;color:#66756e;font-size:8px;line-height:1.9; }
.report-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }.report-grid article { min-height:210px;padding:22px;background:#fff;border:1px solid #e2e9e6;border-radius:12px;box-shadow:var(--shadow); }.report-icon { width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#eef6d9;color:#729916;font-size:18px; }.report-grid h2 { font:700 13px "Manrope";margin-top:22px;color:#17384a; }.report-grid p { color:#7e8b85;font-size:9px;line-height:1.55;margin-top:7px; }.report-grid button { height:31px;margin-top:22px;padding:0 10px;border:1px solid #dfe7e3;border-radius:7px;background:white;color:#5f7f18;font-size:8px;font-weight:700; }
.icon svg { width: 100%; height: 100%; display: block; }
.ai-drawer { position: fixed; z-index: 80; right: 0; top: 0; bottom: 0; width: min(455px, 96vw); background: #f8faf9; box-shadow: -20px 0 60px rgba(4, 20, 13, .19); transform: translateX(105%); transition: transform .38s cubic-bezier(.22,.85,.32,1); display: flex; flex-direction: column; }
.ai-drawer.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(3, 13, 9, .4); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.ai-drawer-head { min-height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; color: #eefcf6; background: radial-gradient(circle at 30% 10%, #174d39, transparent 48%), linear-gradient(135deg, #07140f, #0b241a); }
.ai-title { display: flex; align-items: center; gap: 12px; }
.ai-orb { position: relative; width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #1aa274, #0b6649); box-shadow: 0 0 0 1px rgba(127,232,187,.25), 0 8px 20px rgba(0,0,0,.2); color: #b2f8d9; font-size: 19px; }
.ai-orb i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #5ee2a8; border: 2px solid #0b1f17; }
.ai-title h2 { font: 700 15px "Manrope"; }
.ai-title p { font-size: 8px; color: #81a997; margin-top: 4px; }
.ai-title p i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-right: 5px; }
.ai-drawer-head > button { color: #8eb09f; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); width: 31px; height: 31px; border-radius: 8px; font-size: 21px; cursor: pointer; }
.ai-context { min-height: 42px; padding: 9px 20px; border-bottom: 1px solid #e4eae7; display: flex; align-items: center; gap: 7px; background: #fff; }
.ai-context span { color: #8c9893; font-size: 8px; margin-right: 3px; }
.ai-context b { padding: 4px 7px; border-radius: 8px; background: #edf6f2; color: #3a6c58; font-size: 7px; font-weight: 600; }
.ai-conversation { flex: 1; padding: 22px 20px; overflow-y: auto; }
.assistant-message { display: grid; grid-template-columns: 30px 1fr; gap: 9px; margin-bottom: 18px; }
.message-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #123d2d; color: #86e8ba; font-size: 13px; }
.assistant-message > div > p, .user-message p { padding: 11px 13px; font-size: 10px; line-height: 1.55; border-radius: 3px 12px 12px 12px; }
.assistant-message > div > p { background: white; border: 1px solid #e2e9e6; color: #41514a; }
.quick-prompts { display: grid; gap: 6px; margin-top: 9px; }
.quick-prompts button { border: 1px solid #d9e6e0; border-radius: 8px; background: #f9fcfa; color: #2c6951; min-height: 34px; padding: 7px 10px; text-align: left; font-size: 9px; cursor: pointer; }
.quick-prompts button:hover { border-color: #6fcaa4; background: #f0faf6; }
.user-message { display: flex; justify-content: flex-end; margin: 15px 0; }
.user-message p { max-width: 85%; background: #176f52; color: white; border-radius: 12px 3px 12px 12px; }
.ai-loading { display: flex; gap: 4px; align-items: center; height: 35px; }
.ai-loading i { width: 6px; height: 6px; border-radius: 50%; background: #79b79d; animation: pulse 1s infinite alternate; }
.ai-loading i:nth-child(2) { animation-delay: .2s; }
.ai-loading i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .25; transform: translateY(-3px); } }
.analysis-card { background: white; border: 1px solid #dfe8e4; border-radius: 12px; padding: 13px; box-shadow: var(--shadow); }
.analysis-card > b { display: block; font: 700 12px/1.4 "Manrope"; color: #173f30; }
.analysis-card > p { color: #66756e; font-size: 9px; line-height: 1.55; margin: 6px 0 12px; }
.analysis-card.direct-answer { width: fit-content; min-width: 170px; max-width: 100%; padding: 12px 14px; }
.analysis-card.direct-answer > b { font: 700 11px/1.45 "Manrope"; color: #124c38; }
.analysis-group { border-top: 1px solid #edf1ef; padding: 10px 0; }
.analysis-group:first-of-type { border-top: 0; }
.analysis-group h4 { margin: 0 0 4px; font-size: 9px; color: #253a31; }
.analysis-group p { color: #728079; font-size: 8px; line-height: 1.45; }
.analysis-group span { display: inline-block; color: #0b815b; background: #e8f7f0; padding: 4px 6px; border-radius: 7px; font-size: 7px; font-weight: 700; margin-top: 6px; }
.analysis-action { display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 7px 0; border-top: 1px solid #edf1ef; font-size: 8px; }
.analysis-action em { font-style: normal; padding: 3px 5px; height: fit-content; border-radius: 6px; color: #b65f20; background: #fff0df; }
.analysis-action strong { display: block; font-size: 8px; color: #36483f; }
.analysis-action small { display: block; color: #8a9691; font-size: 7px; margin-top: 2px; }
.analysis-source { display: flex; gap: 5px; align-items: center; margin-top: 10px; font-size: 7px; color: #85928c; }
.analysis-source i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.ai-composer { margin: 0; padding: 12px 18px 15px; background: white; border-top: 1px solid #e2e9e6; display: grid; grid-template-columns: 1fr 36px; gap: 8px; }
.ai-composer textarea { resize: none; min-height: 40px; max-height: 100px; border: 1px solid #dce5e1; border-radius: 9px; padding: 11px; outline: none; font-size: 10px; color: #33463d; }
.ai-composer textarea:focus { border-color: #6ec5a0; box-shadow: 0 0 0 3px rgba(66,215,158,.1); }
.ai-composer > button { height: 40px; width: 36px; border: 0; border-radius: 9px; color: white; background: #0c7956; cursor: pointer; font-size: 17px; }
.ai-composer small { grid-column: 1 / 3; text-align: center; color: #9aa49f; font-size: 7px; }
.tour-overlay { position: fixed; z-index: 100; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.tour-overlay.active { opacity: 1; pointer-events: auto; }
.tour-scrim { position: absolute; inset: 0; background: transparent; }
.tour-focus { position: relative !important; z-index: 99 !important; pointer-events: none !important; box-shadow: 0 0 0 4px rgba(175, 214, 37, .98), 0 0 0 9999px rgba(3, 18, 26, .72), 0 18px 60px rgba(0,0,0,.42) !important; border-radius: 12px; }
.tour-tooltip { position: fixed; z-index: 105; width: min(390px, calc(100vw - 28px)); padding: 18px; border-radius: 13px; color: #dae9e2; background: linear-gradient(145deg, #0b3345, #061f2d); border: 1px solid rgba(175,214,37,.35); box-shadow: 0 22px 58px rgba(0,0,0,.42); }
.tour-progress { display: flex; align-items: center; gap: 9px; color: #738e81; font-size: 8px; }
.tour-progress > div { height: 3px; flex: 1; border-radius: 3px; background: #1d382d; overflow: hidden; }
.tour-progress i { display: block; height: 100%; background: var(--mint); transition: width .3s; }
.tour-kicker { color: var(--mint); font-size: 7px; font-weight: 700; letter-spacing: .16em; margin-top: 16px; }
.tour-tooltip h3 { font: 700 17px/1.3 "Manrope"; color: white; margin: 7px 0; }
.tour-tooltip p { color: #9ab1a6; font-size: 10px; line-height: 1.55; }
.tour-explanation { display: grid; gap: 7px; margin-top: 14px; }
.tour-explanation > div { padding: 10px 11px; border-radius: 9px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.tour-explanation span { display: block; color: #afd625; font-size: 7px; font-weight: 800; letter-spacing: .12em; margin-bottom: 4px; }
.tour-explanation p { color: #c4d3cc; font-size: 9px; line-height: 1.45; }
.tour-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; }
.tour-controls button { border: 0; background: transparent; color: #769084; font-size: 9px; cursor: pointer; }
.tour-controls > div { display: flex; gap: 6px; }
#tour-prev { width: 33px; height: 31px; border: 1px solid #29483a; border-radius: 7px; }
#tour-next { min-width: 145px; height: 34px; padding: 0 13px; border-radius: 8px; color: #102f40; background: #afd625; font-weight: 800; box-shadow: 0 7px 18px rgba(175,214,37,.18); }
.tour-subtitle { position: fixed; z-index: 106; bottom: 26px; left: 50%; transform: translateX(-50%); min-width: min(650px, calc(100vw - 30px)); padding: 12px 18px; color: white; text-align: center; background: rgba(5, 15, 11, .91); border: 1px solid rgba(121, 226, 180, .25); border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.tour-subtitle span { color: var(--mint); font-size: 7px; letter-spacing: .18em; font-weight: 700; }
.tour-subtitle p { font: 500 12px/1.4 "Manrope"; margin-top: 4px; }
.toast { position: fixed; z-index: 120; right: 23px; bottom: 22px; display: flex; gap: 10px; align-items: center; background: #102b20; color: white; border: 1px solid #24553f; border-radius: 10px; padding: 12px 16px; transform: translateY(130%); transition: transform .3s; box-shadow: 0 15px 30px rgba(4,20,13,.22); }
.toast.show { transform: translateY(0); }
.toast > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #1f9e70; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 9px; }
.toast small { font-size: 7px; color: #86a496; margin-top: 3px; }
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
  .mix-panel { grid-row: auto; }
  .module-kpis { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid, .inventory-module-grid, .imports-bottom-grid, .planning-bottom-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-105%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-menu { display: block; border: 0; background: transparent; }
  .topbar { padding: 0 15px; }
  .breadcrumb, .period-control { display: none; }
  .dashboard { padding: 22px 15px; }
  .module-view { padding: 22px 15px; }
  .module-header { align-items:flex-start; }
  .module-header h1 { font-size:23px; }
  .module-kpis { grid-template-columns:1fr; }
  .simple-row { min-width:720px; }
  .technical-table-panel { overflow-x:auto; }
  .planning-flow { align-items:flex-start;justify-content:flex-start;overflow-x:auto; }
  .report-grid { grid-template-columns:1fr; }
  .dashboard-heading { align-items: flex-start; gap: 15px; }
  .dashboard-heading h1 { font-size: 24px; }
  .secondary-button { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { height: 145px; }
  .insight-banner { grid-template-columns: 40px 1fr; }
  .impact-pill { grid-column: 2; border-left: 0; padding: 0; }
  .insight-action { grid-column: 2; width: fit-content; }
  .chart-legend { display: none; }
  .dashboard-footer { flex-direction: column; gap: 5px; }
  .tour-launch { font-size: 0; width: 38px; padding: 0; justify-content: center; }
  .tour-launch span { font-size: 10px; }
  .tour-tooltip { max-height: calc(100vh - 110px); overflow-y: auto; }
}