@font-face { font-family: "DM Sans"; src: local("Segoe UI"), local("Arial"); font-display: swap; }
@font-face { font-family: "Manrope"; src: local("Segoe UI Variable Display"), local("Segoe UI"); font-display: swap; }

:root {
  --ink: #17231f;
  --muted: #6f7974;
  --muted-2: #9aa29e;
  --paper: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #f8f8f5;
  --line: #e7e8e3;
  --wine: #6f1736;
  --wine-2: #8c294a;
  --wine-soft: #f6eaf0;
  --green: #1f614d;
  --green-2: #2f7a62;
  --green-soft: #e8f4ef;
  --gold: #b88738;
  --gold-soft: #fbf2df;
  --orange: #bd6536;
  --red: #b94242;
  --blue: #3c6394;
  --shadow: 0 1px 2px rgba(21,35,31,.03), 0 8px 28px rgba(28,38,34,.055);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 252px; padding: 0 14px 18px;
  display: flex; flex-direction: column; background: #13211c; color: #dbe4df; overflow-y: auto;
}
.brand-block { height: 78px; padding: 0 8px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(208,169,99,.55); border-radius: 10px; color: #f4e4c5; font: 800 15px/1 Manrope; letter-spacing: -.8px; }
.brand-mark span { color: #c9974d; margin: 0 1px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { color: white; font: 700 16px Manrope; letter-spacing: -.3px; }
.brand-copy small { color: #92a19b; margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .85px; }
.mobile-close { display: none; margin-left: auto; border: 0; background: transparent; color: white; font-size: 26px; }
.workspace-switcher { margin: 14px 0 12px; padding: 10px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }
.workspace-avatar { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; background: #f3ebd9; color: var(--wine); font: 800 10px Manrope; }
.workspace-switcher > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.workspace-switcher strong { color: #f7f8f7; font-size: 11px; white-space: nowrap; }
.workspace-switcher small { color: #84938d; font-size: 9.5px; margin-top: 2px; }
.workspace-switcher > span { color: #798881; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { margin: 17px 10px 6px; color: #64756d; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.nav-item { position: relative; height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; color: #9eada7; text-align: left; font-size: 12px; font-weight: 500; transition: .16s ease; }
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.active { color: #fff; background: rgba(255,255,255,.095); box-shadow: inset 2px 0 #c99850; }
.nav-item svg { width: 17px; height: 17px; color: #83928c; }
.nav-item.active svg { color: #dcbd89; }
.nav-item em, .nav-item i { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.1); color: #b5c0bc; font-size: 9px; font-style: normal; }
.nav-item i { min-width: 7px; width: 7px; height: 7px; padding: 0; background: #db9a56; color: transparent; }
.sidebar-footer { margin-top: auto; padding-top: 24px; }
.system-health { margin: 0 8px 10px; display: flex; align-items: flex-start; gap: 8px; }
.system-health > span { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #57b58e; box-shadow: 0 0 0 4px rgba(87,181,142,.09); }
.system-health div { display: flex; flex-direction: column; }
.system-health strong { color: #aebbb6; font-size: 9.5px; }
.system-health small { margin-top: 2px; color: #61736a; font-size: 8.5px; }
.help-card { width: 100%; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(201,152,80,.15); border-radius: 10px; background: linear-gradient(135deg,rgba(201,152,80,.1),rgba(255,255,255,.025)); text-align: left; }
.help-card > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(201,152,80,.13); color: #d9b679; }
.help-card div { display: flex; flex-direction: column; }
.help-card strong { color: #d8dfdc; font-size: 10px; }
.help-card small { margin-top: 2px; color: #75867e; font-size: 8.5px; }

.main-shell { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 30; height: 72px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.91); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions, .breadcrumbs, .profile-button, .search-button, .period-control { display: flex; align-items: center; }
.menu-button { display: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.menu-button svg { width: 16px; height: 16px; }
.breadcrumbs { gap: 10px; font-size: 11px; }
.breadcrumbs span { color: var(--muted-2); }
.breadcrumbs b { color: #ccd1cd; }
.breadcrumbs strong { color: #4e5b55; font-weight: 600; }
.topbar-actions { gap: 10px; }
.search-button { width: 265px; height: 38px; padding: 0 10px; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fafaf8; color: #8c9590; font-size: 10.5px; }
.search-button svg { width: 15px; }
.search-button > span:nth-child(2) { overflow: hidden; white-space: nowrap; }
kbd { margin-left: auto; padding: 2px 6px; border: 1px solid #dde1dd; border-bottom-width: 2px; border-radius: 4px; background: white; color: #919994; font-size: 8.5px; }
.period-control { height: 38px; padding: 0 10px; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #59655f; font-size: 10px; }
.period-control svg { width: 14px; color: #7c8982; }
.period-control b { margin-left: 3px; color: #a6ada9; }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; }
.icon-button svg { width: 16px; color: #64716b; }
.icon-button i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: var(--wine-2); }
.profile-button { gap: 8px; height: 42px; padding: 0 4px 0 0; border: 0; background: transparent; text-align: left; }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e9eee9; color: var(--green); font: 700 10px Manrope; }
.profile-button > span:nth-child(2) { display: flex; flex-direction: column; }
.profile-button strong { font-size: 10.5px; }
.profile-button small { margin-top: 2px; color: var(--muted-2); font-size: 8.5px; }
.profile-button b { color: #a4ada8; }

.page { max-width: 1600px; margin: 0 auto; padding: 26px 30px 44px; }
.page-head { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.eyebrow { margin-bottom: 6px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 1.45px; text-transform: uppercase; }
.page-head h1 { margin: 0; color: #1a2521; font: 700 25px/1.2 Manrope; letter-spacing: -.65px; }
.page-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.head-actions { display: flex; gap: 8px; }
.btn { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #43504a; font-size: 10.5px; font-weight: 600; box-shadow: 0 1px 1px rgba(20,34,29,.025); }
.btn:hover { border-color: #d3d8d4; background: #fbfcfa; }
.btn svg { width: 14px; }
.btn-primary { border-color: var(--green); background: var(--green); color: white; }
.btn-primary:hover { border-color: #164d3c; background: #164d3c; }
.btn-wine { border-color: var(--wine); background: var(--wine); color: white; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-sm { height: 30px; padding: 0 9px; font-size: 9px; }

.demo-notice { margin-bottom: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #eadcc1; border-radius: 10px; background: #fffaf0; color: #7e612f; font-size: 9.5px; }
.demo-notice span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #f2e5c9; font-weight: 800; }
.demo-notice b { font-weight: 700; }
.demo-notice button { margin-left: auto; border: 0; background: transparent; color: #97753d; font-size: 9px; font-weight: 700; }

.kpi-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.kpi-card { position: relative; min-height: 128px; padding: 15px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9.5px; font-weight: 600; }
.kpi-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--green); }
.kpi-icon svg { width: 14px; }
.kpi-value { margin-top: 15px; font: 700 23px/1 Manrope; letter-spacing: -.7px; }
.kpi-meta { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 9px; }
.trend { padding: 2px 5px; border-radius: 5px; font-size: 8.5px; font-weight: 700; }
.trend.up { background: var(--green-soft); color: var(--green-2); }
.trend.down { background: #faeaea; color: var(--red); }
.trend.neutral { background: var(--gold-soft); color: #916a29; }
.kpi-progress { height: 3px; margin-top: 11px; overflow: hidden; border-radius: 3px; background: #edf0ec; }
.kpi-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.grid-2 { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,.8fr); gap: 12px; margin-bottom: 12px; }
.grid-2.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-head { min-height: 54px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef0ec; }
.panel-title h2 { margin: 0; font: 700 12px Manrope; letter-spacing: -.2px; }
.panel-title p { margin: 3px 0 0; color: var(--muted-2); font-size: 8.5px; }
.panel-actions { display: flex; align-items: center; gap: 6px; }
.text-link { padding: 0; border: 0; background: transparent; color: var(--green); font-size: 9px; font-weight: 700; }
.panel-body { padding: 15px; }
.chart-wrap { position: relative; height: 226px; }
.chart-legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 8px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.line-chart text { fill: #9aa39e; font: 8px DM Sans; }
.chart-grid { stroke: #edf0ec; stroke-width: 1; }
.area-fill { fill: url(#areaGradient); opacity: .75; }
.line-main { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.line-target { fill: none; stroke: #c7b089; stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart-dot { fill: white; stroke: var(--green); stroke-width: 2; }
.chart-tooltip { position: absolute; left: 61%; top: 18px; padding: 7px 9px; border: 1px solid #e1e4e0; border-radius: 7px; background: white; box-shadow: 0 5px 14px rgba(20,33,29,.1); font-size: 8.5px; }
.chart-tooltip strong { display: block; margin-top: 2px; font-size: 11px; }

.health-list { display: flex; flex-direction: column; }
.health-row { padding: 11px 15px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #f0f1ee; }
.health-row:last-child { border-bottom: 0; }
.health-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.health-icon svg { width: 14px; }
.health-icon.good { color: var(--green); background: var(--green-soft); }
.health-icon.warn { color: var(--orange); background: #fdf0e9; }
.health-icon.bad { color: var(--red); background: #faeaea; }
.health-copy { min-width: 0; }
.health-copy strong { display: block; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-copy small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.health-value { text-align: right; font: 700 11px Manrope; }
.health-value small { display: block; margin-top: 2px; color: var(--muted-2); font: 400 7.5px DM Sans; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 34px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #fbfbf9; color: #8d9691; text-align: left; font-size: 8px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; white-space: nowrap; }
.data-table td { height: 51px; padding: 8px 13px; border-bottom: 1px solid #f0f1ee; color: #44504a; font-size: 9.5px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: .14s; }
.data-table tbody tr:hover { background: #fbfcfa; }
.cell-primary { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-weight: 600; }
.cell-primary small { color: var(--muted-2); font-size: 8px; font-weight: 400; }
.money { font-weight: 700; color: #26332e; white-space: nowrap; }
.muted { color: var(--muted-2); }
.tag, .status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; background: #f1f3f0; color: #65706b; font-size: 8px; font-weight: 700; white-space: nowrap; }
.status:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.green { background: var(--green-soft); color: var(--green-2); }
.status.gold { background: var(--gold-soft); color: #9c712a; }
.status.red { background: #fbe8e8; color: var(--red); }
.status.blue { background: #eaf0f8; color: var(--blue); }
.status.grey { background: #f0f1ef; color: #77817c; }
.channel-pill { display: inline-flex; padding: 3px 6px; border: 1px solid #e4e7e3; border-radius: 5px; color: #66716b; font-size: 8px; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.mini-action { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #e5e8e4; border-radius: 7px; background: white; }
.mini-action:hover { border-color: #ccd3ce; }
.mini-action svg { width: 12px; color: #6d7973; }

.filterbar { margin-bottom: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.filter-search { position: relative; min-width: 220px; flex: 1; }
.filter-search svg { position: absolute; left: 10px; top: 10px; width: 14px; color: #929b96; }
.filter-search input, .filter-select, .field input, .field select, .field textarea { width: 100%; height: 34px; border: 1px solid #e4e7e3; border-radius: 8px; background: #fbfbf9; color: #43504a; outline: 0; font-size: 9.5px; }
.filter-search input { padding: 0 10px 0 31px; }
.filter-search input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #9cb7ab; box-shadow: 0 0 0 3px rgba(31,97,77,.08); background: white; }
.filter-select { width: auto; min-width: 125px; padding: 0 28px 0 9px; }
.view-toggle { display: flex; margin-left: 2px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-toggle button { width: 33px; height: 32px; display: grid; place-items: center; border: 0; border-right: 1px solid var(--line); background: white; }
.view-toggle button:last-child { border: 0; }
.view-toggle button.active { background: #eff4f1; color: var(--green); }
.view-toggle svg { width: 13px; }

.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.product-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); transition: .18s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(28,38,34,.09); }
.product-img { height: 190px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 65%,#ebe9df 0,#f8f7f2 42%,#fbfbf8 75%); }
.product-img img { display: block; width: auto; height: 170px; max-width: 88%; object-fit: contain; mix-blend-mode: multiply; }
.product-img .img-fallback { width: 46px; height: 126px; border: 3px solid #a89e91; border-radius: 9px 9px 14px 14px; background: linear-gradient(90deg,#f3eee3,#fff,#eee7da); position: relative; }
.product-img .img-fallback:before { content:""; position:absolute; top:-25px; left:12px; width:16px; height:26px; border:3px solid #a89e91; border-bottom:0; border-radius:3px 3px 0 0; }
.product-card .stock-flag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.product-info { padding: 12px 13px 13px; }
.product-brand { color: var(--gold); font-size: 7.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.product-info h3 { min-height: 30px; margin: 4px 0 7px; font: 700 10.5px/1.4 Manrope; }
.product-meta { display: flex; gap: 5px; flex-wrap: wrap; color: var(--muted-2); font-size: 7.5px; }
.product-meta span { padding: 3px 5px; border-radius: 5px; background: #f4f5f2; }
.product-bottom { margin-top: 11px; padding-top: 9px; display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid #eff0ed; }
.product-price { display: flex; flex-direction: column; }
.product-price small { color: var(--muted-2); font-size: 7px; }
.product-price strong { margin-top: 2px; font: 700 11px Manrope; }
.stock-count { text-align: right; color: var(--muted); font-size: 7.5px; }
.stock-count strong { display: block; color: var(--green); font-size: 9px; }

.tabs { display: flex; gap: 3px; margin-bottom: 12px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 10px; background: white; }
.tab { height: 31px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 600; }
.tab.active { background: #eef3f0; color: var(--green); }
.metric-strip { margin-bottom: 12px; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: 12px; background: white; }
.metric-strip > div { padding: 13px 15px; border-right: 1px solid var(--line); }
.metric-strip > div:last-child { border: 0; }
.metric-strip span { display: block; color: var(--muted-2); font-size: 8px; }
.metric-strip strong { display: block; margin-top: 5px; font: 700 14px Manrope; }
.metric-strip small { display: block; margin-top: 3px; color: var(--muted); font-size: 7.5px; }

.progress { width: 100%; height: 5px; overflow: hidden; border-radius: 4px; background: #edf0ed; }
.progress span { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.progress.gold span { background: var(--gold); }
.progress.red span { background: var(--red); }
.progress.blue span { background: var(--blue); }
.donut { --value: 75; --color: var(--green); width: 96px; height: 96px; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--color) calc(var(--value)*1%),#edf0ec 0); }
.donut:after { content:""; position:absolute; inset:10px; border-radius:50%; background:white; }
.donut div { position: relative; z-index: 1; text-align: center; }
.donut strong { display:block; font: 700 16px Manrope; }
.donut small { color:var(--muted-2); font-size:7px; }

.brand-bars { display: flex; flex-direction: column; gap: 12px; }
.brand-bar-row { display: grid; grid-template-columns: 100px minmax(100px,1fr) 65px; align-items: center; gap: 10px; }
.brand-bar-row label { font-size: 8.5px; font-weight: 600; }
.brand-bar-row .bar { height: 7px; overflow: hidden; border-radius: 4px; background: #f0f1ee; }
.brand-bar-row .bar span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--green),#76a593); }
.brand-bar-row strong { text-align:right; font-size: 8.5px; }

.exception-list { display:flex; flex-direction:column; }
.exception { padding: 11px 14px; display:flex; gap:10px; align-items:flex-start; border-bottom:1px solid #f0f1ee; }
.exception:last-child { border:0; }
.exception > span { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:#faece8; color:var(--red); }
.exception > span svg { width:12px; }
.exception > div { min-width:0; flex:1; }
.exception strong { display:block; font-size:9px; }
.exception p { margin:3px 0 0; color:var(--muted); font-size:8px; line-height:1.4; }
.exception button { border:0; background:transparent; color:var(--green); font-size:8px; font-weight:700; }

.pipeline { display:grid; grid-template-columns:repeat(4,minmax(200px,1fr)); gap:10px; overflow-x:auto; }
.pipeline-col { min-width:200px; padding:10px; border-radius:11px; background:#f5f6f3; }
.pipeline-head { margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:700; }
.pipeline-head span { min-width:18px; height:18px; display:grid; place-items:center; border-radius:6px; background:white; color:var(--muted); font-size:8px; }
.deal-card { margin-bottom:7px; padding:10px; border:1px solid #e7e9e6; border-radius:9px; background:white; box-shadow:0 2px 8px rgba(20,34,29,.035); }
.deal-card:last-child { margin:0; }
.deal-card strong { display:block; font-size:9px; }
.deal-card p { margin:4px 0 7px; color:var(--muted); font-size:8px; }
.deal-foot { display:flex; justify-content:space-between; color:var(--muted-2); font-size:7.5px; }
.deal-foot b { color:var(--ink); }

.shipment-card { padding:15px; }
.shipment-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.shipment-id { display:flex; gap:9px; }
.country-flag { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:#f3f4f1; font-size:16px; }
.shipment-id strong { display:block; font-size:10px; }
.shipment-id small { display:block; margin-top:3px; color:var(--muted-2); font-size:7.5px; }
.shipment-meta { margin:14px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.shipment-meta span { color:var(--muted-2); font-size:7px; }
.shipment-meta strong { display:block; margin-top:3px; color:#39463f; font-size:8.5px; }
.milestone { margin-top:9px; display:flex; justify-content:space-between; color:var(--muted-2); font-size:7px; }

.recon-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:12px; }
.bank-row { padding:12px 14px; display:grid; grid-template-columns:73px minmax(150px,1fr) 90px minmax(150px,1fr) 32px; align-items:center; gap:9px; border-bottom:1px solid #f0f1ee; }
.bank-row:last-child { border:0; }
.bank-row.selected { background:#fbf7ef; }
.bank-date { color:var(--muted); font-size:8px; }
.bank-description strong { display:block; font-size:9px; }
.bank-description small { display:block; margin-top:2px; color:var(--muted-2); font-size:7px; }
.bank-amount { text-align:right; font-weight:700; font-size:9px; }
.bank-amount.credit { color:var(--green); }
.bank-match { min-width:0; }
.bank-match strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:8px; }
.bank-match small { margin-top:3px; display:flex; align-items:center; gap:4px; color:var(--muted-2); font-size:7px; }
.confidence { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:7px; font-weight:800; }
.confidence.low { background:var(--gold-soft); color:#946c29; }
.recon-summary { padding:16px; }
.balance-pair { margin-bottom:13px; display:flex; align-items:center; justify-content:space-between; }
.balance-pair span { color:var(--muted); font-size:8px; }
.balance-pair strong { font:700 11px Manrope; }
.balance-difference { margin:14px -16px -16px; padding:13px 16px; display:flex; justify-content:space-between; background:#f4f7f5; border-radius:0 0 13px 13px; }
.balance-difference span { color:var(--green); font-size:8px; font-weight:700; }
.balance-difference strong { color:var(--green); font:700 13px Manrope; }

.pnl-table { display:flex; flex-direction:column; }
.pnl-row { padding:9px 0; display:grid; grid-template-columns:1fr 100px 78px; gap:10px; border-bottom:1px solid #f0f1ee; font-size:8.5px; }
.pnl-row:last-child { border:0; }
.pnl-row strong, .pnl-row b { text-align:right; }
.pnl-row.total { font-weight:700; color:var(--ink); }
.pnl-row.subtotal { padding-top:12px; font-weight:700; border-top:1px solid #dfe3df; }
.pnl-row span:last-child { text-align:right; color:var(--muted-2); }

.tax-summary { display:grid; grid-template-columns:repeat(4,1fr); }
.tax-summary > div { padding:14px; border-right:1px solid var(--line); }
.tax-summary > div:last-child { border:0; }
.tax-summary span { display:block; color:var(--muted-2); font-size:8px; }
.tax-summary strong { display:block; margin-top:5px; font:700 14px Manrope; }
.tax-summary small { display:block; margin-top:3px; font-size:7px; color:var(--muted); }
.compliance-timeline { padding:15px; display:flex; flex-direction:column; }
.timeline-item { position:relative; min-height:53px; padding-left:28px; }
.timeline-item:before { content:""; position:absolute; left:8px; top:12px; bottom:-8px; width:1px; background:#dfe4e0; }
.timeline-item:last-child:before { display:none; }
.timeline-item > span { position:absolute; left:2px; top:2px; width:13px; height:13px; border:3px solid white; border-radius:50%; background:var(--green); box-shadow:0 0 0 1px #bad0c7; }
.timeline-item.warn > span { background:var(--gold); box-shadow:0 0 0 1px #e7d3af; }
.timeline-item strong { display:block; font-size:8.5px; }
.timeline-item small { display:block; margin-top:3px; color:var(--muted-2); font-size:7.5px; }

.campaign-card { padding:14px; }
.campaign-head { display:flex; align-items:flex-start; justify-content:space-between; }
.campaign-head > div strong { display:block; font-size:10px; }
.campaign-head > div small { display:block; margin-top:3px; color:var(--muted-2); font-size:7.5px; }
.campaign-numbers { margin:14px 0 11px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.campaign-numbers span { display:block; color:var(--muted-2); font-size:7px; }
.campaign-numbers strong { display:block; margin-top:3px; font-size:9px; }
.campaign-footer { margin-top:8px; display:flex; justify-content:space-between; color:var(--muted-2); font-size:7px; }

.report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.report-card { padding:13px; border:1px solid var(--line); border-radius:11px; background:white; transition:.15s; }
.report-card:hover { border-color:#bdcbc4; transform:translateY(-1px); }
.report-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#edf3f0; color:var(--green); }
.report-icon svg { width:14px; }
.report-card h3 { margin:11px 0 4px; font:700 9.5px Manrope; }
.report-card p { min-height:29px; margin:0; color:var(--muted); font-size:7.5px; line-height:1.45; }
.report-foot { margin-top:11px; padding-top:9px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eff1ee; color:var(--muted-2); font-size:7px; }
.report-foot button { border:0; background:transparent; color:var(--green); font-size:8px; font-weight:700; }
.org-tree { padding:16px; }
.org-level { display:flex; justify-content:center; gap:10px; position:relative; }
.org-level + .org-level { margin-top:28px; }
.org-level + .org-level:before { content:""; position:absolute; top:-18px; left:15%; right:15%; height:1px; background:#dfe4e0; }
.org-node { min-width:120px; padding:10px; border:1px solid var(--line); border-radius:9px; background:white; text-align:center; position:relative; }
.org-level + .org-level .org-node:before { content:""; position:absolute; top:-18px; left:50%; width:1px; height:18px; background:#dfe4e0; }
.org-node.primary { border-color:#9ebcaf; background:#eef5f1; }
.org-node strong { display:block; font-size:8.5px; }
.org-node small { display:block; margin-top:3px; color:var(--muted-2); font-size:7px; }

.auth-hero { margin-bottom:12px; padding:24px; display:grid; grid-template-columns:1.3fr .7fr; gap:24px; border-radius:16px; color:white; background:radial-gradient(circle at 85% 20%,rgba(211,166,91,.22),transparent 28%),linear-gradient(135deg,#152a23,#1b4538); box-shadow:0 15px 45px rgba(19,45,36,.16); }
.auth-hero .eyebrow { color:#d9b776; }
.auth-hero h1 { max-width:620px; margin:0; font:700 27px/1.23 Manrope; letter-spacing:-.8px; }
.auth-hero p { max-width:650px; margin:9px 0 17px; color:#b8c8c2; font-size:10px; line-height:1.6; }
.auth-hero .btn { border-color:#e1c58f; background:#e1c58f; color:#23382f; }
.auth-visual { display:grid; place-items:center; }
.seal { width:150px; height:150px; display:grid; place-items:center; border:1px solid rgba(224,195,139,.5); border-radius:50%; position:relative; }
.seal:before,.seal:after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(224,195,139,.35); }
.seal:before { inset:11px; }.seal:after { inset:25px; }
.seal-core { position:relative; z-index:1; width:67px; height:67px; display:grid; place-items:center; border-radius:50%; background:rgba(224,195,139,.12); color:#e4ca99; }
.seal-core svg { width:31px; }
.verify-panel { padding:18px; }
.verify-box { display:grid; grid-template-columns:1fr auto; gap:7px; }
.verify-box input { height:43px; padding:0 12px; border:1px solid var(--line); border-radius:9px; outline:0; text-transform:uppercase; letter-spacing:1.5px; font:600 11px Manrope; }
.verify-box .btn { height:43px; }
.verification-result { margin-top:13px; padding:13px; display:none; border-radius:10px; background:var(--green-soft); }
.verification-result.show { display:block; }
.verification-result.warning { background:var(--gold-soft); }
.verify-heading { display:flex; align-items:center; gap:9px; }
.verify-heading > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:white; }
.verify-heading svg { width:15px; }
.verify-heading strong { display:block; font-size:10px; }
.verify-heading small { display:block; margin-top:2px; color:var(--muted); font-size:7.5px; }
.verify-details { margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.verify-details span { display:block; color:var(--muted); font-size:7px; }
.verify-details strong { display:block; margin-top:3px; font-size:8px; }
.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.control-card { padding:14px; border:1px solid var(--line); border-radius:11px; background:white; }
.control-card > span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#eef3f0; color:var(--green); }
.control-card svg { width:14px; }
.control-card h3 { margin:11px 0 4px; font:700 9.5px Manrope; }
.control-card p { margin:0; color:var(--muted); font-size:7.8px; line-height:1.5; }

.role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.role-card { padding:13px; border:1px solid var(--line); border-radius:10px; background:white; }
.role-avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#ecefece8; color:var(--green); font:700 9px Manrope; }
.role-card h3 { margin:9px 0 3px; font-size:9.5px; }
.role-card p { min-height:24px; margin:0; color:var(--muted); font-size:7.5px; line-height:1.45; }
.role-card footer { margin-top:10px; padding-top:8px; display:flex; justify-content:space-between; border-top:1px solid #eef0ed; color:var(--muted-2); font-size:7px; }
.integration-list { display:grid; grid-template-columns:repeat(2,1fr); }
.integration { padding:13px 15px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.integration:nth-child(even) { border-right:0; }
.integration-logo { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#f1f3f0; font:800 9px Manrope; }
.integration strong { display:block; font-size:9px; }
.integration small { display:block; margin-top:2px; color:var(--muted-2); font-size:7px; }
.toggle { width:30px; height:17px; padding:2px; border:0; border-radius:15px; background:#d9dedb; }
.toggle:after { content:""; width:13px; height:13px; display:block; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.16); }
.toggle.on { background:var(--green); }
.toggle.on:after { margin-left:13px; }
.toggle:disabled { opacity:.7; cursor:not-allowed; }

.modal-root { position:fixed; inset:0; z-index:100; pointer-events:none; }
.modal-root.open { pointer-events:auto; }
.modal-backdrop { position:absolute; inset:0; background:rgba(13,24,20,.48); backdrop-filter:blur(2px); animation:fade .16s ease; }
.modal { position:absolute; top:0; right:0; width:min(540px,100%); height:100%; overflow-y:auto; background:white; box-shadow:-15px 0 50px rgba(10,20,16,.14); animation:slide .22s ease; }
.modal-header { position:sticky; top:0; z-index:2; padding:18px 20px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); backdrop-filter:blur(10px); }
.modal-header h2 { margin:0; font:700 16px Manrope; }
.modal-header p { margin:4px 0 0; color:var(--muted); font-size:8.5px; }
.modal-close { width:31px; height:31px; border:1px solid var(--line); border-radius:8px; background:white; font-size:18px; }
.modal-body { padding:20px; }
.modal-footer { position:sticky; bottom:0; padding:12px 20px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); background:white; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field.full { grid-column:1/-1; }
.field label { color:#58635e; font-size:8px; font-weight:700; }
.field input,.field select { padding:0 10px; }
.field textarea { height:72px; padding:9px 10px; resize:vertical; }
.form-section-title { grid-column:1/-1; margin-top:7px; padding-bottom:7px; border-bottom:1px solid var(--line); font-size:9px; font-weight:800; }
.line-items { grid-column:1/-1; overflow:hidden; border:1px solid var(--line); border-radius:9px; }
.line-item { padding:8px; display:grid; grid-template-columns:1fr 55px 80px 26px; gap:6px; border-bottom:1px solid var(--line); }
.line-item:last-child { border:0; }
.line-item input,.line-item select { width:100%; height:30px; border:1px solid var(--line); border-radius:6px; background:#fbfbf9; font-size:8px; }
.line-item input { padding:0 7px; }
.line-item button { border:0; background:transparent; color:var(--red); }
.form-total { grid-column:1/-1; padding:12px; display:flex; justify-content:space-between; border-radius:9px; background:#f4f6f3; }
.form-total span { color:var(--muted); font-size:9px; }
.form-total strong { font:700 13px Manrope; }

.command-palette { position:fixed; inset:0; z-index:90; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; background:rgba(14,25,21,.42); backdrop-filter:blur(3px); }
.command-palette.open { display:flex; }
.palette-panel { width:min(580px,calc(100% - 30px)); overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:14px; background:white; box-shadow:0 28px 80px rgba(8,18,14,.28); animation:pop .15s ease; }
.palette-search { height:56px; padding:0 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.palette-search svg { width:17px; color:var(--muted); }
.palette-search input { flex:1; height:100%; border:0; outline:0; font-size:12px; }
.palette-results { max-height:390px; overflow-y:auto; padding:8px; }
.palette-group-title { margin:7px 8px; color:var(--muted-2); font-size:7.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; }
.palette-item { width:100%; padding:9px; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:9px; border:0; border-radius:8px; background:white; text-align:left; }
.palette-item:hover { background:#f4f6f3; }
.palette-item > span:first-child { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#edf2ef; color:var(--green); }
.palette-item svg { width:14px; }
.palette-item strong { display:block; font-size:9px; }
.palette-item small { display:block; margin-top:2px; color:var(--muted-2); font-size:7px; }
.palette-item > span:last-child { color:var(--muted-2); font-size:7px; }

.toast-stack { position:fixed; z-index:150; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { min-width:280px; padding:12px 13px; display:grid; grid-template-columns:28px 1fr; gap:9px; border:1px solid #dbe6e0; border-radius:10px; background:white; box-shadow:0 13px 35px rgba(11,25,20,.15); animation:toastIn .2s ease; }
.toast > span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--green-soft); color:var(--green); }
.toast svg { width:13px; }
.toast strong { display:block; font-size:9px; }
.toast small { display:block; margin-top:3px; color:var(--muted); font-size:7.5px; }
.empty-state { padding:38px 20px; text-align:center; color:var(--muted); }
.empty-state span { width:42px; height:42px; margin:0 auto 10px; display:grid; place-items:center; border-radius:11px; background:#f0f3f0; }
.empty-state svg { width:18px; }
.empty-state strong { display:block; color:var(--ink); font-size:10px; }
.empty-state p { margin:5px 0 0; font-size:8px; }

.present-button { height:38px; padding:0 12px; display:flex; align-items:center; gap:7px; border:1px solid #c5a468; border-radius:9px; background:linear-gradient(135deg,#173f32,#245c49); color:white; font:700 8px Manrope; letter-spacing:.2px; box-shadow:0 5px 14px rgba(24,68,52,.16); }
.present-button:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(24,68,52,.22); }
.present-button svg { width:14px; color:#e7cc98; }

.brand-intel-grid { margin-bottom:12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.brand-intel-card { min-height:218px; padding:15px; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:13px; background:linear-gradient(160deg,#fff 62%,#f0f4f1); cursor:pointer; transition:.18s ease; }
.brand-intel-card:hover { transform:translateY(-2px); border-color:#b9cbbf; box-shadow:0 12px 28px rgba(21,48,38,.08); }
.brand-intel-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:13px; }
.brand-monogram { width:38px; height:38px; display:grid; place-items:center; border:1px solid #dce5df; border-radius:11px; background:#edf3ef; color:var(--green); font:800 10px Manrope; letter-spacing:.5px; }
.brand-intel-card h2 { margin:4px 0 4px; font:700 13px Manrope; }
.brand-intel-card > p { min-height:25px; margin:0; color:var(--muted); font-size:7.5px; line-height:1.45; }
.brand-intel-numbers { margin-top:12px; padding:10px 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e5eae6; border-bottom:1px solid #e5eae6; }
.brand-intel-numbers > div { padding:0 7px; border-right:1px solid #e5eae6; }
.brand-intel-numbers > div:first-child { padding-left:0; }
.brand-intel-numbers > div:last-child { border:0; }
.brand-intel-numbers span { display:block; color:var(--muted-2); font-size:6.5px; }
.brand-intel-numbers strong { display:block; margin-top:3px; font-size:9px; }
.brand-thumb-row { height:42px; margin-top:9px; display:flex; align-items:end; }
.brand-thumb-row img { width:30px; height:40px; margin-right:-5px; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(24,35,30,.12)); }
.brand-thumb-row > span { margin-left:auto; align-self:center; color:var(--green); font-size:7px; font-weight:800; }
.brand-modal-hero { min-height:150px; padding:17px; display:grid; grid-template-columns:1fr 180px; gap:15px; overflow:hidden; border-radius:13px; background:linear-gradient(135deg,#173b30,#235b48); color:white; }
.brand-modal-hero h2 { margin:5px 0; font:700 22px Manrope; }
.brand-modal-hero p { max-width:300px; margin:0; color:#cbdad4; font-size:8.5px; line-height:1.6; }
.brand-modal-bottles { display:flex; align-items:end; justify-content:center; }
.brand-modal-bottles img { width:51px; height:122px; margin:0 -5px; object-fit:contain; filter:drop-shadow(0 7px 6px rgba(0,0,0,.22)); }
.brand-modal-metrics { margin:12px 0 0; grid-template-columns:repeat(4,1fr); }

.ai-banner { margin-bottom:12px; padding:13px 15px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; border:1px solid #d8e6df; border-radius:12px; background:linear-gradient(135deg,#eef6f2,#f8f5ea); }
.ai-banner > span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--green); color:#f1d9aa; }
.ai-banner svg { width:18px; }
.ai-banner strong { display:block; font-size:10px; }
.ai-banner p { margin:3px 0 0; color:var(--muted); font-size:8px; }
.ai-banner em { padding:5px 8px; border:1px solid #c8d9d0; border-radius:20px; color:var(--green); font-size:7px; font-style:normal; font-weight:800; letter-spacing:.8px; }
.ai-layout { margin-bottom:12px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr); gap:12px; align-items:start; }
.ai-workbench,.ai-controls { overflow:hidden; }
.ai-prompt-grid { padding:13px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; border-bottom:1px solid var(--line); background:#fafbf9; }
.ai-prompt-grid button { min-height:86px; padding:10px; border:1px solid var(--line); border-radius:10px; background:white; text-align:left; transition:.15s ease; }
.ai-prompt-grid button:hover,.ai-prompt-grid button.selected { border-color:#88ac9b; background:#eef5f1; }
.ai-prompt-grid button > span { width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:#edf3ef; color:var(--green); }
.ai-prompt-grid svg { width:13px; }
.ai-prompt-grid strong,.ai-prompt-grid small { display:block; }
.ai-prompt-grid strong { margin-top:8px; font-size:8px; line-height:1.35; }
.ai-prompt-grid small { margin-top:3px; color:var(--muted-2); font-size:6.5px; }
.ai-response { padding:16px; }
.ai-response-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ai-response-head span { color:var(--green); font-size:6.5px; font-weight:800; letter-spacing:.8px; }
.ai-response-head h3 { margin:4px 0 0; font:700 14px Manrope; }
.ai-response-head em { max-width:190px; color:var(--muted); font-size:7px; font-style:normal; text-align:right; }
.ai-evidence-list { margin-top:12px; display:grid; gap:7px; }
.ai-evidence-list article { padding:10px; display:grid; grid-template-columns:24px 1fr auto; gap:9px; align-items:center; border:1px solid #e4eae6; border-radius:9px; }
.ai-evidence-list article > b { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:#edf3ef; color:var(--green); font-size:8px; }
.ai-evidence-list strong { display:block; font-size:8.5px; }
.ai-evidence-list p { margin:2px 0; color:var(--muted); font-size:7.5px; line-height:1.45; }
.ai-evidence-list small { color:#6e786f; font-size:6.8px; }
.ai-evidence-list button { display:flex; align-items:center; gap:4px; border:0; background:transparent; color:var(--green); font-size:6.5px; font-weight:800; }
.ai-evidence-list button svg { width:10px; }
.ai-response > footer { margin-top:12px; padding-top:10px; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted-2); font-size:7px; }
.ai-response > footer span { display:flex; align-items:center; gap:5px; }
.ai-response > footer svg { width:11px; }

.decision-hero { margin-bottom:12px; padding:22px; display:grid; grid-template-columns:1fr 190px; gap:20px; align-items:center; border-radius:14px; background:linear-gradient(135deg,#132f27,#235745); color:white; }
.decision-hero h2 { max-width:720px; margin:5px 0 8px; font:700 19px/1.35 Manrope; }
.decision-hero p { max-width:760px; margin:0; color:#c9d9d2; font-size:9px; line-height:1.65; }
.decision-score { padding:18px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(255,255,255,.06); text-align:center; }
.decision-score strong { display:block; color:#e2c184; font:750 38px Manrope; }
.decision-score span,.decision-score small { display:block; }
.decision-score span { font-size:9px; font-weight:700; }
.decision-score small { margin-top:5px; color:#aebfb8; font-size:7px; line-height:1.45; }
.benchmark-table { min-width:930px; }
.benchmark-table th:first-child { width:135px; }
.benchmark-table td { vertical-align:top; line-height:1.5; }
.compare-highlight { border-left:2px solid #a6c4b5; background:#f0f6f2; color:#1d4939; font-weight:650; }
.roadmap-grid { padding:14px; display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.roadmap-card { min-height:170px; padding:13px; position:relative; border:1px solid var(--line); border-radius:11px; background:linear-gradient(150deg,#fff,#f7f9f7); }
.roadmap-card > span { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:var(--green); color:white; font:800 9px Manrope; }
.roadmap-card > small { position:absolute; top:16px; right:12px; color:var(--green); font-size:7px; font-weight:800; }
.roadmap-card h3 { margin:13px 0 5px; font-size:9px; }
.roadmap-card p { margin:0; color:var(--muted); font-size:7.5px; line-height:1.55; }
.roadmap-card footer { position:absolute; left:13px; right:13px; bottom:11px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted-2); font-size:6.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

.presentation-tour { position:fixed; z-index:140; left:252px; right:18px; bottom:14px; min-height:78px; padding:17px 16px 13px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; border:1px solid rgba(224,195,139,.5); border-radius:13px; background:rgba(17,43,34,.97); color:white; box-shadow:0 20px 55px rgba(10,22,17,.28); transform:translateY(130%); opacity:0; pointer-events:none; transition:.22s ease; backdrop-filter:blur(12px); }
.presentation-tour.open { transform:none; opacity:1; pointer-events:auto; }
.tour-progress { position:absolute; top:0; left:0; right:0; height:3px; overflow:hidden; border-radius:13px 13px 0 0; background:rgba(255,255,255,.11); }
.tour-progress span { height:100%; display:block; background:#dfbf82; transition:.2s ease; }
.tour-copy > span { display:block; color:#dfbf82; font-size:6.5px; font-weight:800; letter-spacing:1px; }
.tour-copy strong { display:block; margin-top:3px; font:700 11px Manrope; }
.tour-copy small { display:block; margin-top:3px; color:#c2d1cb; font-size:7.5px; }
.tour-actions { display:flex; align-items:center; gap:7px; }
.tour-actions .btn:not(.btn-primary) { border-color:rgba(255,255,255,.2); background:transparent; color:white; }
.tour-outline { display:grid; gap:7px; }
.tour-outline > div { padding:9px; display:grid; grid-template-columns:28px 1fr; gap:9px; border:1px solid var(--line); border-radius:9px; }
.tour-outline > div > span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#edf3ef; color:var(--green); font-weight:800; }
.tour-outline p { margin:0; }
.tour-outline strong,.tour-outline small { display:block; }
.tour-outline strong { font-size:8.5px; }
.tour-outline small { margin-top:3px; color:var(--muted); font-size:7.2px; line-height:1.45; }

@keyframes fade { from { opacity:0 } to { opacity:1 } }
@keyframes slide { from { transform:translateX(35px); opacity:.7 } to { transform:none; opacity:1 } }
@keyframes pop { from { transform:translateY(-7px) scale(.99); opacity:.7 } to { transform:none; opacity:1 } }
@keyframes toastIn { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } }

@media (min-width: 1200px) {
  .data-table td { font-size:10.5px; }
  .data-table th { font-size:9px; }
  .panel-title h2 { font-size:13px; }
  .panel-title p { font-size:9.5px; }
  .health-copy strong { font-size:10.5px; }
  .health-copy small { font-size:9px; }
  .kpi-head { font-size:10.5px; }
  .kpi-meta { font-size:9.5px; }
  .demo-notice { font-size:10.5px; }
}

@media print {
  body * { visibility:hidden !important; }
  .modal,.modal * { visibility:visible !important; }
  .modal { position:absolute; left:0; top:0; width:100%; height:auto; overflow:visible; box-shadow:none; }
  .modal-backdrop,.modal-close,.modal-footer { display:none !important; }
  .modal-body { padding:0; }
}

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .role-grid { grid-template-columns:repeat(2,1fr); }
  .topbar { padding:0 20px; }
  .page { padding-left:20px; padding-right:20px; }
  .search-button { width:190px; }
  .profile-button > span:nth-child(2), .profile-button b { display:none; }
  .brand-intel-grid { grid-template-columns:repeat(3,1fr); }
  .roadmap-grid { grid-template-columns:repeat(3,1fr); }
  .roadmap-card { min-height:160px; }
}
@media (max-width: 920px) {
  .sidebar { transform:translateX(-100%); transition:.22s ease; box-shadow:12px 0 40px rgba(7,18,13,.18); }
  .sidebar.open { transform:translateX(0); }
  .mobile-close,.menu-button { display:grid; place-items:center; }
  .main-shell { margin-left:0; }
  .breadcrumbs span,.breadcrumbs b { display:none; }
  .grid-2,.grid-2.equal,.recon-layout,.auth-hero { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .metric-strip { grid-template-columns:repeat(3,1fr); }
  .metric-strip > div:nth-child(3) { border-right:0; }
  .metric-strip > div:nth-child(n+4) { border-top:1px solid var(--line); }
  .presentation-tour { left:12px; right:12px; }
  .ai-layout { grid-template-columns:1fr; }
  .ai-prompt-grid { grid-template-columns:repeat(2,1fr); }
  .brand-intel-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px) {
  .topbar { height:62px; padding:0 12px; }
  .topbar-actions { gap:6px; }
  .search-button { width:38px; justify-content:center; }
  .search-button > span:nth-child(2),.search-button kbd,.period-control,.profile-button,#notification-button { display:none; }
  .page { padding:18px 12px 32px; }
  .page-head { flex-direction:column; margin-bottom:16px; }
  .page-head h1 { font-size:21px; }
  .head-actions { width:100%; }
  .head-actions .btn { min-width:0; flex:1; padding:0 8px; font-size:9px; }
  .kpi-grid,.grid-3,.product-grid,.report-grid,.control-grid,.role-grid { grid-template-columns:1fr; }
  .kpi-card { min-height:116px; }
  .product-img { height:230px; }
  .product-img img { height: 210px; }
  .filterbar { flex-wrap:wrap; }
  .filter-search { min-width:100%; }
  .filter-select { flex:1; }
  .tax-summary { grid-template-columns:repeat(2,1fr); }
  .tax-summary > div:nth-child(2) { border-right:0; }
  .tax-summary > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .metric-strip { grid-template-columns:repeat(2,1fr); }
  .metric-strip > div:nth-child(2n) { border-right:0; }
  .metric-strip > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .bank-row { grid-template-columns:60px 1fr 80px; }
  .bank-match,.confidence { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .field.full,.form-section-title,.line-items,.form-total { grid-column:1; }
  .shipment-meta { grid-template-columns:repeat(2,1fr); }
  .verify-details { grid-template-columns:repeat(2,1fr); }
  .integration-list { grid-template-columns:1fr; }
  .integration { border-right:0; }
  .org-level { flex-wrap:wrap; }
  .org-level + .org-level:before,.org-level + .org-level .org-node:before { display:none; }
  .present-button { width:38px; padding:0; justify-content:center; }
  .present-button > span:last-child { display:none; }
  .brand-intel-grid,.ai-prompt-grid,.roadmap-grid { grid-template-columns:1fr; }
  .brand-modal-hero,.decision-hero { grid-template-columns:1fr; }
  .brand-modal-bottles { min-height:110px; }
  .brand-modal-metrics { grid-template-columns:repeat(2,1fr); }
  .decision-score { display:none; }
  .presentation-tour { grid-template-columns:1fr; gap:10px; }
  .tour-actions { justify-content:flex-end; }
  .tour-copy small { line-height:1.4; }
  .ai-evidence-list article { grid-template-columns:24px 1fr; }
  .ai-evidence-list article button { grid-column:2; padding:0; }
}