:root {
  --ink: #17202b;
  --muted: #6f7a88;
  --line: #dfe5e4;
  --soft: #f3f6f4;
  --paper: #ffffff;
  --green: #176b52;
  --green-2: #2f8a69;
  --mint: #dff3e9;
  --navy: #172537;
  --blue: #2e63d1;
  --amber: #d99a28;
  --purple: #7d5bd6;
  --shadow: 0 14px 40px rgba(24, 45, 38, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); background: #edf1ef; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.demo-ribbon { height: 30px; display: flex; align-items: center; justify-content: center; background: #bde9d5; color: #114d3c; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.app-shell { min-height: calc(100vh - 30px); display: grid; grid-template-columns: 252px 1fr; max-width: 1680px; margin: 0 auto; background: #f8faf9; box-shadow: 0 0 60px rgba(24, 45, 38, .08); }
.sidebar { background: var(--navy); color: #fff; padding: 28px 18px 20px; display: flex; flex-direction: column; min-height: calc(100vh - 30px); position: sticky; top: 0; align-self: start; }
.brand { display: flex; gap: 12px; align-items: center; color: white; text-decoration: none; padding: 0 8px 32px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-family: "Space Grotesk"; background: var(--green-2); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Space Grotesk"; font-size: 17px; }
.brand small { color: #9eabb9; font-size: 11px; margin-top: 3px; }
nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #acb7c4; display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 13px 14px; text-align: left; font-weight: 600; }
.nav-item span { font-size: 10px; color: #718092; letter-spacing: .08em; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.09); }
.nav-item.active span { color: #74d6b2; }
.sidebar-note { margin-top: auto; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 14px; padding: 13px; display: flex; gap: 10px; align-items: center; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5ee4ad; box-shadow: 0 0 0 5px rgba(94,228,173,.12); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 12px; }.sidebar-note small { color: #8fa0b1; font-size: 10px; margin-top: 3px; }
main { min-width: 0; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 20px 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.76); backdrop-filter: blur(16px); }
.topbar h1 { font-family: "Space Grotesk"; font-size: 26px; margin: 2px 0 0; }.eyebrow { margin: 0; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; color: var(--green-2); font-weight: 800; }.eyebrow.dark { color: #718079; }
.profile { display: flex; gap: 10px; align-items: center; }.profile > span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green); font-weight: 700; }.profile strong,.profile small { display: block; }.profile strong { font-size: 12px; }.profile small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.mobile-menu { display: none; border: 0; background: #eef3f1; border-radius: 10px; padding: 8px 11px; font-size: 18px; }
.view { display: none; padding: 30px 34px 44px; animation: enter .28s ease; }.view.active { display: block; }@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.hero { min-height: 316px; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; background: linear-gradient(125deg, #174c3f, #1c6f54); color: white; box-shadow: var(--shadow); }
.hero-copy { padding: 44px; position: relative; z-index: 2; }.hero h2 { font-family: "Space Grotesk"; font-size: clamp(32px, 3.4vw, 50px); max-width: 640px; line-height: 1.03; margin: 20px 0 14px; letter-spacing: -.035em; }.hero p { max-width: 570px; color: #d0e5dd; font-size: 15px; line-height: 1.65; margin: 0 0 24px; }
.pill { display: inline-flex; border-radius: 99px; padding: 7px 12px; background: var(--soft); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .04em; }.pill.light { background: rgba(255,255,255,.12); color: #c8f4e2; }
.primary { border: 0; border-radius: 12px; padding: 13px 18px; background: white; color: var(--green); font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.12); }.primary span { margin-left: 12px; }.primary.wide { width: 100%; color: white; background: var(--green); margin-top: 20px; }
.hero-visual { position: relative; min-height: 300px; background: radial-gradient(circle at 65% 45%, rgba(154,255,212,.22), transparent 45%); }.hero-visual:before { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 38px 38px; }
.warehouse-card { position: absolute; width: 112px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); box-shadow: 0 12px 35px rgba(0,0,0,.14); }.warehouse-card span,.warehouse-card small { display:block; }.warehouse-card span { font-size: 10px; color: #bce6d6; font-weight: 800; }.warehouse-card strong { font-family: "Space Grotesk"; font-size: 28px; }.warehouse-card small { color: #c9ddd6; font-size: 10px; }.card-a { left: 12%; top: 20%; }.card-c { right: 12%; top: 33%; }.card-f { left: 33%; bottom: 12%; }.route-line { position: absolute; width: 55%; height: 40%; left: 23%; top: 30%; border: 2px dashed rgba(157,249,211,.35); border-radius: 50%; transform: rotate(-12deg); }
.section-heading,.result-summary,.consolidation-toolbar { display: flex; justify-content: space-between; align-items: end; margin: 30px 2px 16px; }.section-heading h3,.result-summary h3,.consolidation-toolbar h3,.panel h3 { font-family: "Space Grotesk"; font-size: 20px; margin: 4px 0 0; }.updated,.result-summary > span { color: var(--muted); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.metric-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 18px; box-shadow: 0 7px 20px rgba(20,40,34,.035); }.metric-card p { color: var(--muted); font-size: 12px; margin: 13px 0 4px; }.metric-card > strong { font-family: "Space Grotesk"; font-size: 30px; }.metric-card small { display: block; color: var(--muted); margin-top: 8px; font-size: 10px; }.metric-card small b { color: var(--green-2); }.metric-icon { width: 36px; height: 36px; border-radius: 11px; display:grid;place-items:center;font-size:10px;font-weight:800; }.metric-icon.blue { background:#e6edff;color:var(--blue);}.metric-icon.green {background:#e2f4eb;color:var(--green)}.metric-icon.amber{background:#fff2d8;color:#a66d09}.metric-icon.purple{background:#efe9ff;color:var(--purple)}
.overview-grid { display:grid;grid-template-columns:1.12fr .88fr;gap:14px;margin-top:14px; }.panel { background: white; border:1px solid var(--line); border-radius:17px; padding:20px;box-shadow:0 7px 20px rgba(20,40,34,.035);}.panel-head{display:flex;justify-content:space-between;align-items:start}.zone-bars{display:grid;gap:14px;margin-top:22px}.zone-row{display:grid;grid-template-columns:55px 1fr 40px;gap:12px;align-items:center;font-size:12px}.zone-row strong{font-size:12px}.bar{height:9px;background:#edf1ef;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#5bb590);border-radius:99px}.zone-row em{font-style:normal;color:var(--muted);text-align:right}.action-row{display:grid;grid-template-columns:34px 1fr 20px;gap:12px;align-items:center;width:100%;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;padding:15px 2px}.action-row:first-of-type{margin-top:10px}.action-number{height:30px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--green);font-weight:800}.action-row strong,.action-row small{display:block}.action-row strong{font-size:12px}.action-row small{color:var(--muted);font-size:10px;margin-top:3px}.action-row b{color:var(--green)}
.intro-card { min-height: 185px; border-radius:22px;padding:32px 34px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(125deg,#e4f5ed,#f6faf8);border:1px solid #cfe6dc}.intro-card h2{font-family:"Space Grotesk";font-size:32px;margin:15px 0 8px}.intro-card p{color:var(--muted);max-width:700px;line-height:1.6;margin:0}.mini-stat{text-align:center;min-width:145px;padding:20px;background:white;border:1px solid #dce7e2;border-radius:17px}.mini-stat span{display:block;font:700 36px "Space Grotesk";color:var(--green)}.mini-stat small{color:var(--muted)}
.search-card { background:white;border:1px solid var(--line);border-radius:17px;margin-top:18px;padding:20px}.search-card label,.form-panel label,.consolidation-toolbar label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:8px}.search-wrap{display:flex;align-items:center;border:1px solid #cfd9d5;border-radius:12px;padding:0 13px;transition:.2s}.search-wrap:focus-within{border-color:var(--green-2);box-shadow:0 0 0 3px rgba(47,138,105,.1)}.search-wrap input{border:0;outline:0;flex:1;padding:13px;background:transparent}.search-wrap button{border:0;background:transparent;color:var(--green);font-size:11px;font-weight:700}.quick-search{display:flex;gap:7px;align-items:center;margin-top:12px;font-size:10px;color:var(--muted)}.quick-search button{border:1px solid var(--line);border-radius:99px;background:#f8faf9;padding:6px 10px;font-size:10px;color:#526057}
.table-card{background:white;border:1px solid var(--line);border-radius:17px;overflow:hidden}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;padding:13px 16px;background:#f3f6f4;color:#6d776f;font-size:10px;text-transform:uppercase;letter-spacing:.06em}td{padding:15px 16px;border-top:1px solid #edf0ef;font-size:12px}td strong{font-family:"Space Grotesk"}.storage-tag,.status-tag{display:inline-flex;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:700}.storage-tag.rack{background:#e7edff;color:#315bac}.storage-tag.floor{background:#fff0da;color:#a6660d}.status-tag.good{background:#e1f4ea;color:#217357}.status-tag.review{background:#ffe7e6;color:#a94742}.empty-table{text-align:center;color:var(--muted);padding:45px}
.putaway-intro{background:linear-gradient(125deg,#e8efff,#f7f9fd);border-color:#d8e1f2}.flow-badge{display:flex;gap:7px;align-items:center;color:#657185;font-size:11px;background:white;border-radius:14px;border:1px solid #dce3ef;padding:14px}.flow-badge span{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#dfe8fc;color:#315bac;font-weight:800}.flow-badge b{color:#9ba6b5}.workflow-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;margin-top:18px}.step-label{font-size:10px;color:var(--green-2);font-weight:800;letter-spacing:.12em}.form-panel select,.form-panel input,.consolidation-toolbar select{width:100%;border:1px solid #d5ddda;border-radius:11px;padding:12px;background:white;outline:0}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.input-grid label{position:relative}.input-grid i{position:absolute;right:12px;bottom:13px;color:var(--muted);font-style:normal;font-size:11px}.recommendation-panel{min-height:330px;background:linear-gradient(145deg,#194d40,#237459);color:white;border:0}.empty-state{height:285px;display:grid;place-content:center;text-align:center;color:#cbe4da}.empty-state span{font-size:36px}.empty-state h3{color:white}.empty-state p{font-size:12px}.rec-head{display:flex;justify-content:space-between;align-items:start}.rec-head .pill{background:rgba(255,255,255,.12);color:#c8f4e2}.rec-location{font:700 44px "Space Grotesk";margin:24px 0 4px}.rec-sub{color:#b8d7cb;font-size:12px}.rec-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:25px}.rec-details div{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px}.rec-details span,.rec-details strong{display:block}.rec-details span{font-size:9px;color:#a9ccbf;text-transform:uppercase}.rec-details strong{font-size:13px;margin-top:5px}.instruction{margin-top:18px;padding:14px;background:rgba(255,255,255,.1);border-radius:12px;font-size:12px;line-height:1.55}.logic-note{margin-top:18px;display:flex;gap:22px;align-items:center}.logic-note span{font-weight:800;color:var(--green);white-space:nowrap}.logic-note p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.consolidation-intro{background:linear-gradient(125deg,#fff5df,#fffaf0);border-color:#f0dfbc}.consolidation-toolbar label{display:flex;align-items:center;gap:10px;margin:0}.consolidation-toolbar select{width:auto;padding:9px}.task-list{display:grid;gap:12px}.task-card{background:white;border:1px solid var(--line);border-radius:17px;padding:19px;display:grid;grid-template-columns:1.2fr .8fr auto;gap:18px;align-items:center}.task-sku strong,.task-sku small{display:block}.task-sku strong{font:700 17px "Space Grotesk"}.task-sku small{color:var(--muted);font-size:10px;margin-top:5px}.move-flow{display:flex;align-items:center;gap:11px}.location-chip{border:1px solid #d7dfdc;border-radius:11px;padding:9px 11px}.location-chip span,.location-chip strong{display:block}.location-chip span{font-size:9px;color:var(--muted)}.location-chip strong{font-size:12px;margin-top:3px}.move-flow b{color:var(--green-2)}.preview-task{border:1px solid #b9dacd;background:#edfaf4;color:var(--green);border-radius:11px;padding:10px 14px;font-weight:800;font-size:11px}.preview-task.done{background:var(--green);color:white}.outcome-card{margin-top:18px;display:flex;justify-content:space-between;align-items:center;background:#eef8f3}.outcome-card div span,.outcome-card div strong,.outcome-card div small{display:block}.outcome-card div span{font-size:10px;color:var(--muted);text-transform:uppercase}.outcome-card div strong{font:700 26px "Space Grotesk";color:var(--green);margin:4px 0}.outcome-card p{max-width:600px;color:var(--muted);font-size:11px;line-height:1.55}.no-tasks{padding:42px;text-align:center;color:var(--muted);background:white;border:1px solid var(--line);border-radius:17px}
#toast{position:fixed;right:22px;bottom:22px;transform:translateY(20px);opacity:0;pointer-events:none;background:var(--navy);color:white;padding:12px 16px;border-radius:11px;font-size:12px;box-shadow:var(--shadow);transition:.25s}#toast.show{opacity:1;transform:translateY(0)}
@media (max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-visual{display:none}.overview-grid{grid-template-columns:1fr}.task-card{grid-template-columns:1fr auto}.move-flow{grid-row:2}.profile div{display:none}}
@media (max-width:760px){.demo-ribbon{font-size:9px}.app-shell{display:block}.sidebar{position:fixed;z-index:20;inset:30px auto 0 0;width:250px;transform:translateX(-102%);transition:.25s;box-shadow:14px 0 30px rgba(0,0,0,.2)}.sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.topbar{height:84px;padding:14px 18px;gap:12px}.topbar>div:nth-child(2){flex:1}.topbar h1{font-size:20px}.profile{display:none}.view{padding:18px 14px 32px}.hero{min-height:auto}.hero-copy{padding:27px 23px}.hero h2{font-size:34px}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:14px}.metric-card>strong{font-size:24px}.intro-card{display:block;padding:24px}.intro-card h2{font-size:27px}.mini-stat{margin-top:18px;width:100%}.workflow-grid{grid-template-columns:1fr}.flow-badge{margin-top:18px;justify-content:center}.input-grid{grid-template-columns:1fr}.task-card{grid-template-columns:1fr}.move-flow{grid-row:auto;flex-wrap:wrap}.outcome-card{display:block}.consolidation-toolbar{display:block}.consolidation-toolbar label{margin-top:12px}.section-heading{align-items:start}.updated{display:none}.logic-note{display:block}.logic-note p{margin-top:8px}}
@media (max-width:430px){.metric-grid{grid-template-columns:1fr}.hero h2{font-size:30px}.rec-details{grid-template-columns:1fr}.rec-location{font-size:36px}}