@layer page, design;
@layer page {

:root {
  --ink: #142238;
  --muted: #66758a;
  --line: #dfe6ef;
  --soft: #f4f7fb;
  --white: #fff;
  --navy: #10243f;
  --navy-2: #17395f;
  --blue: #2d73d5;
  --blue-2: #195bbb;
  --cyan: #24a7c4;
  --green: #198a63;
  --amber: #b97a15;
  --danger: #c3414d;
  --shadow: 0 16px 45px rgba(18, 38, 66, .09);
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #eef3f8;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  line-height: 1.55;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(45,115,213,.25); outline-offset: 2px; }
.shell { width: min(1320px, calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(219,228,239,.9);
}
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--navy); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg,var(--navy),var(--blue)); font-size: 21px; font-weight: 900; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { font-size: 17px; letter-spacing: .03em; }
.brand small { margin-top: 4px; color: #718096; font-size: 9px; letter-spacing: .22em; }
.header-actions, .heading-actions, .result-actions { display: flex; align-items: center; gap: 9px; }
button { border: 0; }
.primary-btn, .secondary-btn, .ghost-btn, .text-btn, .icon-btn {
  border-radius: 10px; transition: .18s ease; font-weight: 750;
}
.primary-btn { background: linear-gradient(135deg,var(--blue),var(--blue-2)); color: #fff; box-shadow: 0 9px 22px rgba(45,115,213,.22); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(45,115,213,.3); }
.primary-btn.compact { padding: 11px 17px; }
.secondary-btn { padding: 11px 15px; color: var(--blue-2); background: #eaf2fd; border: 1px solid #cfe0f6; }
.secondary-btn:hover { background: #dfeafa; }
.ghost-btn { padding: 10px 14px; color: #40536b; background: #fff; border: 1px solid var(--line); }
.ghost-btn:hover { border-color: #afbdd0; color: var(--navy); }
.text-btn { padding: 9px 6px; color: var(--blue-2); background: transparent; }
.text-btn:hover { color: var(--navy); }
.text-btn.danger { color: var(--danger); }
.icon-btn { width: 38px; height: 38px; color: #4f6178; background: #f6f8fb; border: 1px solid var(--line); font-size: 18px; }
.icon-btn:hover { color: var(--blue); background: #edf4fe; }
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg,#0d2039 0%,#173d66 64%,#176a8b 100%); }
.hero::before, .hero::after { content:""; position:absolute; border-radius:50%; filter: blur(3px); opacity:.22; }
.hero::before { width: 480px; height: 480px; right:-110px; top:-270px; background: #58d1e8; }
.hero::after { width: 260px; height:260px; right:23%; bottom:-180px; background:#4b8ff2; }
.hero-grid { position: relative; z-index: 1; min-height: 390px; display:grid; grid-template-columns: 1.25fr .75fr; align-items:center; gap:60px; padding: 64px 0; }
.eyebrow, .section-number { margin:0 0 8px; color:#64cfe4; font-size:12px; font-weight:850; letter-spacing:.15em; }
.hero h1 { margin:0; font-size:clamp(34px,4vw,58px); line-height:1.16; letter-spacing:-.045em; }
.hero h1 span { color:#74d3e7; }
.hero-copy { max-width:760px; margin:24px 0 0; color:#d9e6f4; font-size:17px; }
.hero-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.hero-pills span { padding:7px 11px; border:1px solid rgba(255,255,255,.22); border-radius:99px; background:rgba(255,255,255,.08); color:#e8f1fb; font-size:12px; font-weight:700; }
.load-summary-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
}
.load-summary-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -96px;
  top: -108px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  pointer-events: none;
}
.load-summary-head { position: relative; z-index: 1; }
.load-summary-kicker {
  display: block;
  color: #8fd9e8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
}
.load-summary-head h2 {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.03em;
}
.load-summary-head p {
  margin: 8px 0 0;
  color: #c8d8e8;
  font-size: 12px;
  line-height: 1.65;
}
.load-summary-main {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding: 20px 0 18px;
  border-top: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.load-summary-main > span {
  display: block;
  color: #b9ccdf;
  font-size: 11px;
  font-weight: 750;
}
.load-summary-main > strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  color: #fff;
}
.load-summary-main b {
  font-size: 39px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.load-summary-main small {
  color: #9fd7e4;
  font-size: 13px;
  font-weight: 800;
}
.load-summary-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
}
.load-summary-grid > div {
  min-width: 0;
  padding: 0 15px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.load-summary-grid > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.load-summary-grid > div:last-child { padding-right: 0; }
.load-summary-grid span {
  display: block;
  color: #aebfd2;
  font-size: 10px;
  font-weight: 750;
}
.load-summary-grid strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  color: #fff;
  white-space: nowrap;
}
.load-summary-grid b {
  font-size: 22px;
  font-weight: 820;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.load-summary-grid small {
  color: #aec2d6;
  font-size: 10px;
  font-weight: 750;
}
.load-summary-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.11);
  color: #b8c9db;
  font-size: 10.5px;
  line-height: 1.55;
}
.load-summary-note i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-top: 4px;
  border-radius: 50%;
  background: #58cbe2;
  box-shadow: 0 0 0 5px rgba(88,203,226,.11);
}
.workspace { padding:34px 0 70px; }
.panel { background:#fff; border:1px solid #e1e8f0; border-radius:var(--radius); box-shadow: var(--shadow); }
.mode-panel { padding:22px 26px; margin-bottom:22px; }
.panel-heading { margin-bottom:20px; }
.inline-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.panel h2 { margin:0; color:var(--navy); font-size:22px; letter-spacing:-.025em; }
.mode-description { margin: -6px 0 0; color:var(--muted); }
.segmented { display:flex; padding:4px; border-radius:12px; background:#edf2f7; }
.seg-btn { min-width:126px; padding:10px 17px; border-radius:9px; color:#64748a; background:transparent; font-weight:800; }
.seg-btn.active { color:#fff; background:var(--navy); box-shadow:0 5px 15px rgba(16,36,63,.2); }
.main-grid { display:grid; grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr); gap:22px; align-items:start; }
.left-column, .right-column { display:grid; gap:22px; }
.cargo-panel, .option-panel, .result-panel { padding:25px; }
.quick-presets { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.quick-presets button { padding:8px 11px; border-radius:9px; border:1px dashed #b7c7da; background:#f8fafc; color:#54677e; font-size:12px; font-weight:750; }
.quick-presets button:hover { color:var(--blue-2); border-color:#78a5df; background:#f0f6ff; }
.cargo-list { display:grid; gap:10px; }
.cargo-card { position:relative; display:grid; grid-template-columns:6px 1fr auto; gap:14px; align-items:center; padding:16px 14px 16px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:.18s ease; }
.cargo-card:hover { border-color:#b8cae1; box-shadow:0 8px 18px rgba(20,34,56,.06); }
.cargo-color { align-self:stretch; border-radius:6px; min-height:58px; }
.cargo-main strong { display:block; color:var(--navy); font-size:15px; }
.cargo-main p { margin:5px 0 0; color:#65768b; font-size:12px; }
.cargo-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cargo-meta span { padding:3px 7px; border-radius:7px; color:#53677f; background:#f2f5f9; font-size:10px; font-weight:700; }
.cargo-card-actions { display:flex; gap:5px; }
.mini-btn { width:32px; height:32px; border-radius:8px; background:#f5f7fa; color:#69798d; font-weight:800; }
.mini-btn:hover { background:#e9f1fc; color:var(--blue); }
.mini-btn.delete:hover { background:#fff0f1; color:var(--danger); }
.empty-state { display:grid; place-items:center; text-align:center; min-height:260px; padding:30px; border:1px dashed #c9d6e5; border-radius:16px; background:#f8fafc; }
.empty-state.hidden { display:none; }
.empty-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:12px; border-radius:15px; background:#e8f1fc; color:var(--blue); font-size:28px; }
.empty-state strong { color:var(--navy); }
.empty-state p { margin:5px 0 16px; color:var(--muted); font-size:13px; }
.cargo-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.cargo-summary div { padding:12px; border-radius:12px; background:#f4f7fa; }
.cargo-summary span { display:block; color:#7a899c; font-size:10px; }
.cargo-summary strong { display:block; margin-top:4px; color:var(--navy); font-size:13px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.span-2 { grid-column:span 2; }
.field { display:grid; gap:7px; }
.field > span { color:#506176; font-size:12px; font-weight:800; }
.field input, .field select, .settings-table input { width:100%; min-height:44px; padding:10px 12px; border:1px solid #cfdae7; border-radius:10px; color:var(--ink); background:#fff; }
.field input:hover, .field select:hover { border-color:#9eb3cc; }
.toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.toggle-row { position:relative; display:flex; gap:11px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:13px; cursor:pointer; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-ui { position:relative; flex:0 0 auto; width:38px; height:22px; border-radius:99px; background:#c6d1de; transition:.2s; }
.toggle-ui::after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:.2s; }
.toggle-row input:checked + .toggle-ui { background:var(--blue); }
.toggle-row input:checked + .toggle-ui::after { transform:translateX(16px); }
.toggle-row strong, .toggle-row small { display:block; }
.toggle-row strong { color:var(--navy); font-size:12px; }
.toggle-row small { margin-top:3px; color:#718196; font-size:10px; line-height:1.4; }
.range-field { margin-top:18px; }
.range-field div { display:flex; align-items:center; justify-content:space-between; color:#53657b; font-size:12px; font-weight:750; }
.range-field input { width:100%; accent-color:var(--blue); }
.run-btn { width:100%; display:grid; place-items:center; gap:1px; margin-top:21px; padding:15px; }
.run-btn small { opacity:.75; font-size:10px; font-weight:600; }
.result-panel { min-height:760px; position:sticky; top:94px; }
.result-heading { margin-bottom:18px; }
.result-placeholder { min-height:640px; display:grid; place-content:center; justify-items:center; text-align:center; color:var(--muted); }
.result-placeholder strong { margin-top:22px; color:var(--navy); }
.result-placeholder p { margin:7px 0 0; max-width:360px; font-size:13px; }
.hidden { display:none; }
.result-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.result-overview div { padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.result-overview span { display:block; color:#7a899c; font-size:10px; }
.result-overview strong { display:block; margin-top:3px; color:var(--navy); font-size:14px; }
.plan-summary { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; margin-top:12px; padding:13px 14px; border:1px solid #cfe0f5; border-radius:12px; background:#f5f9ff; }
.plan-summary strong { color:var(--blue); font-size:12px; }
.plan-summary span { color:var(--navy); font-size:14px; font-weight:800; }
.plan-summary small { grid-column:2; color:var(--muted); font-size:10px; }
.warning-box { margin-top:13px; padding:12px 14px; border:1px solid #f0c7cc; border-radius:11px; color:#963741; background:#fff5f6; font-size:12px; }
.bin-cards { display:grid; gap:9px; margin-top:14px; }
.bin-card { display:grid; grid-template-columns:minmax(120px,.7fr) 1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:13px; }
.bin-card.active { border-color:#79a6df; background:#f5f9ff; }
.bin-card h3 { margin:0; font-size:13px; color:var(--navy); }
.bin-card p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.bin-card > div:first-child > small { display:block; margin-top:4px; color:#496782; font-size:10px; font-weight:700; }
.progress-pair { display:grid; gap:6px; }
.progress-line { display:grid; grid-template-columns:46px 1fr 38px; align-items:center; gap:7px; font-size:9px; color:#758499; }
.progress-track { height:6px; border-radius:99px; background:#e7edf4; overflow:hidden; }
.progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.select-bin-btn { padding:7px 10px; border-radius:8px; color:var(--blue-2); background:#e9f2fd; font-size:10px; font-weight:800; }
.viewer-wrap { margin-top:15px; border:1px solid #d8e2ed; border-radius:15px; overflow:hidden; background:#edf3f8; }
.viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px; border-bottom:1px solid #d7e1ec; background:#fff; }
.bin-tabs, .view-buttons { display:flex; gap:5px; flex-wrap:wrap; }
.bin-tabs button, .view-buttons button { padding:6px 8px; border-radius:7px; color:#5f7188; background:#f2f5f8; font-size:9px; font-weight:800; }
.bin-tabs button.active, .view-buttons button:hover { color:#fff; background:var(--navy); }
.canvas-shell { position:relative; min-height:440px; background:radial-gradient(circle at 50% 35%,#f8fbfe 0%,#eaf1f7 60%,#dde8f1 100%); overflow:hidden; }
#loadCanvas { display:block; width:100%; height:440px; touch-action:none; }
.canvas-hint { position:absolute; left:11px; bottom:9px; padding:5px 8px; border-radius:7px; color:#51657d; background:rgba(255,255,255,.84); font-size:9px; pointer-events:none; }
.box-tooltip { position:absolute; min-width:145px; padding:9px 10px; border-radius:9px; color:#fff; background:rgba(13,32,57,.94); box-shadow:0 7px 18px rgba(0,0,0,.2); font-size:10px; pointer-events:none; }
.box-tooltip strong { display:block; font-size:11px; }
.box-tooltip span { display:block; margin-top:3px; color:#d8e4f0; }
.legend { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.legend span { display:flex; align-items:center; gap:5px; color:#5f7187; font-size:9px; }
.legend i { width:10px; height:10px; border-radius:3px; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.info-grid article { padding:22px; border:1px solid #dfe7ef; border-radius:17px; background:#fff; }
.info-grid article > span { color:#2a77d6; font-size:12px; font-weight:900; }
.info-grid h3 { margin:8px 0 7px; color:var(--navy); font-size:16px; }
.info-grid p { margin:0; color:var(--muted); font-size:12px; }
.notice-panel { display:flex; gap:22px; align-items:flex-start; margin-top:18px; padding:20px 22px; border-radius:15px; color:#4f6178; background:#e4ebf3; }
.notice-panel strong { flex:0 0 auto; color:var(--navy); }
.notice-panel p { margin:0; font-size:12px; }
footer { color:#cad6e4; background:#0e2038; }
.footer-inner { min-height:130px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner strong { color:#fff; }
.footer-inner p { margin:4px 0 0; font-size:11px; }
.modal { width:min(620px,calc(100% - 26px)); padding:0; border:0; border-radius:20px; box-shadow:0 30px 90px rgba(8,24,44,.3); }
.modal::backdrop { background:rgba(8,22,39,.56); backdrop-filter:blur(4px); }
.wide-modal { width:min(980px,calc(100% - 26px)); }
.modal-head, .modal-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 23px; }
.modal-head { border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; color:var(--navy); font-size:21px; }
.close-btn { width:38px; height:38px; border-radius:10px; color:#6d7d91; background:#f1f4f8; font-size:24px; line-height:1; }
.modal-body { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:22px 23px; }
.modal-foot { border-top:1px solid var(--line); background:#f8fafc; }
.check-line { display:flex; gap:9px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; color:#506276; font-size:12px; }
.settings-tabs { display:flex; gap:6px; padding:15px 22px 0; }
.settings-tabs button { padding:8px 14px; border-radius:8px; color:#61738a; background:#eff3f7; font-weight:800; }
.settings-tabs button.active { color:#fff; background:var(--navy); }
.settings-table-wrap { max-height:480px; overflow:auto; padding:14px 22px; }
.settings-table { width:100%; border-collapse:collapse; font-size:11px; }
.settings-table th { position:sticky; top:0; z-index:1; padding:9px; color:#66788e; background:#f1f5f8; }
.settings-table td { padding:7px; border-bottom:1px solid #e7edf3; }
.settings-table input { min-height:36px; padding:7px 8px; border-radius:7px; font-size:11px; }
.settings-note { margin:0 22px 12px; color:#7a899b; font-size:10px; }
.split-foot { align-items:center; }
.split-foot > div { display:flex; gap:8px; }
@media (max-width:1080px) {
  .main-grid { grid-template-columns:1fr; }
  .result-panel { position:static; min-height:0; }
  .result-placeholder { min-height:440px; }
  .hero-grid { grid-template-columns:1fr; gap:35px; }
  .load-summary-card { max-width: 720px; }
  .load-summary-main b { font-size: 36px; }
}
@media (max-width:760px) {
  .shell { width:min(100% - 24px,1320px); }
  .site-header { position:relative; }
  .header-inner { height:64px; }
  .header-actions .ghost-btn { display:none; }
  .hero-grid { min-height:auto; padding:42px 0; }
  .hero h1 { font-size:34px; }
  .hero-copy { font-size:14px; }
  .load-summary-card { padding: 22px; }
  .load-summary-head h2 { font-size: 20px; }
  .load-summary-main { margin-top: 18px; padding: 17px 0 15px; }
  .load-summary-main b { font-size: 32px; }
  .load-summary-grid > div { padding-inline: 11px; }
  .load-summary-grid b { font-size: 19px; }
  .load-summary-note { margin-top: 17px; }
  .workspace { padding-top:18px; }
  .mode-panel, .cargo-panel, .option-panel, .result-panel { padding:18px; border-radius:16px; }
  .inline-heading { align-items:flex-start; }
  .mode-panel .inline-heading { display:grid; }
  .segmented { width:100%; }
  .seg-btn { flex:1; min-width:0; }
  .cargo-summary, .result-overview { grid-template-columns:1fr 1fr; }
  .form-grid, .toggle-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .bin-card { grid-template-columns:1fr; }
  .viewer-toolbar { align-items:flex-start; flex-direction:column; }
  .info-grid { grid-template-columns:1fr; }
  .notice-panel, .footer-inner { flex-direction:column; }
  .footer-inner { align-items:flex-start; justify-content:center; }
  .modal-body { grid-template-columns:1fr; }
  .heading-actions .text-btn { display:none; }
  #loadCanvas { height:380px; }
  .canvas-shell { min-height:380px; }
}
@media print {
  .site-header, .hero, .left-column, .info-grid, .notice-panel, footer, .result-actions, .viewer-toolbar, .canvas-hint { display:none; }
  body { background:#fff; }
  .shell { width:100%; }
  .workspace { padding:0; }
  .main-grid { display:block; }
  .result-panel { border:0; box-shadow:none; padding:0; }
  .canvas-shell { background:#fff; }
}

body { font-size:15px; line-height:1.65; }
.panel { border-color:#d9e3ee; box-shadow:0 10px 30px rgba(18,38,66,.07); }
.panel-heading { margin-bottom:16px; }
.panel h2 { font-size:23px; line-height:1.3; }
.section-number { margin-bottom:6px; font-size:12px; }

.guide-panel { margin-bottom:18px; padding:22px 24px; }
.guide-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:17px; }
.guide-heading h2 { margin:0; color:var(--navy); font-size:22px; letter-spacing:-.025em; }
.guide-heading > p { max-width:570px; margin:0; color:#5d6f84; font-size:13px; line-height:1.65; }
.guide-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.guide-steps article { display:grid; grid-template-columns:32px 1fr; gap:11px; align-items:start; min-height:116px; padding:15px; border:1px solid #dfe7f0; border-radius:13px; background:#f8fafc; }
.guide-steps b { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--navy); font-size:13px; }
.guide-steps strong { display:block; color:var(--navy); font-size:14px; line-height:1.4; }
.guide-steps p { margin:5px 0 0; color:#607287; font-size:12px; line-height:1.55; }

.mode-panel { padding:16px 20px; margin-bottom:18px; }
.mode-panel .panel-heading { margin-bottom:7px; }
.mode-description { margin:0; color:#5c6f85; font-size:13px; line-height:1.6; }
.segmented { padding:3px; border-radius:10px; }
.seg-btn { min-width:112px; min-height:34px; padding:6px 14px; border-radius:8px; font-size:13px; line-height:1.25; }
.seg-btn.active { box-shadow:0 3px 10px rgba(16,36,63,.18); }

.cargo-panel, .option-panel, .result-panel { padding:22px; }
.quick-presets { margin-bottom:15px; }
.quick-presets button { padding:7px 10px; font-size:12px; line-height:1.35; }
.cargo-card { padding:14px 13px 14px 11px; }
.cargo-main strong { font-size:15px; }
.cargo-main p { font-size:13px; line-height:1.5; }
.cargo-meta span { font-size:11px; }
.cargo-summary span, .result-overview span { font-size:11px; }
.cargo-summary strong, .result-overview strong { font-size:15px; }
.field { gap:6px; }
.field > span { color:#42566e; font-size:13px; }
.field input, .field select, .settings-table input { min-height:42px; padding:9px 11px; border-color:#c7d4e2; font-size:14px; }
.toggle-row { padding:12px; }
.toggle-row strong { font-size:13px; }
.toggle-row small { font-size:11px; }
.range-field div { font-size:13px; }
.run-btn { margin-top:18px; padding:14px; }
.run-btn > span { font-size:15px; }
.run-btn small { font-size:11px; }

.result-panel { min-height:0; }
.result-heading { margin-bottom:15px; }
.result-placeholder { min-height:230px; padding:38px 28px; place-content:center; border:1px dashed #c6d5e5; border-radius:15px; background:#f7f9fc; color:#61748b; }
.result-placeholder strong { margin:0; max-width:470px; color:var(--navy); font-size:20px; line-height:1.45; }
.result-placeholder p { max-width:500px; margin:10px 0 0; font-size:14px; line-height:1.65; }
.result-overview div { padding:13px; }
.plan-summary strong { font-size:13px; }
.plan-summary span { font-size:15px; }
.plan-summary small { font-size:11px; }
.bin-card h3 { font-size:14px; }
.bin-card p, .bin-card > div:first-child > small { font-size:11px; line-height:1.5; }
.progress-line { grid-template-columns:48px 1fr 42px; font-size:10px; }
.select-bin-btn, .bin-tabs button, .view-buttons button { font-size:11px; }
.bin-tabs button, .view-buttons button { padding:6px 9px; }
.legend span { font-size:11px; }

.quote-link { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,#168b70,#0d735d); text-decoration:none; font-weight:800; transition:.18s ease; box-shadow:0 8px 20px rgba(18,128,100,.2); }
.quote-link:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(18,128,100,.28); }
.header-quote { min-height:40px; padding:9px 14px; font-size:13px; white-space:nowrap; }
.quote-connect { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 22px; align-items:center; margin-top:18px; padding:20px 21px; border-radius:16px; color:#e6f1f6; background:linear-gradient(125deg,#10243f,#15536b); }
.quote-connect > div { min-width:0; }
.quote-kicker { display:block; margin-bottom:5px; color:#6dd3d6; font-size:10px; font-weight:900; letter-spacing:.12em; }
.quote-connect strong { display:block; color:#fff; font-size:17px; line-height:1.45; }
.quote-connect p { margin:6px 0 0; color:#c9d9e6; font-size:12px; line-height:1.6; }
.quote-main { min-height:46px; padding:11px 17px; font-size:13px; white-space:nowrap; }
.quote-connect small { grid-column:1 / -1; color:#b8cbd9; font-size:11px; line-height:1.5; }
.quote-connect small.success { color:#93ead0; font-weight:750; }

.info-grid article { padding:20px; }
.info-grid h3 { font-size:17px; }
.info-grid p, .notice-panel p { font-size:13px; line-height:1.65; }
.settings-tabs button { padding:6px 12px; font-size:12px; }

@media (max-width:1080px) {
  .result-placeholder { min-height:210px; }
  .guide-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .header-inner { gap:10px; }
  .header-actions { gap:6px; }
  #runTopBtn { display:none; }
  .header-quote { min-height:38px; padding:8px 10px; font-size:12px; }
  .guide-panel { padding:18px; }
  .guide-heading { display:block; }
  .guide-heading > p { margin-top:8px; }
  .guide-steps { grid-template-columns:1fr; }
  .guide-steps article { min-height:0; }
  .mode-panel, .cargo-panel, .option-panel, .result-panel { padding:17px; }
  .seg-btn { min-height:32px; padding:5px 9px; font-size:12px; }
  .result-placeholder { min-height:190px; padding:30px 18px; }
  .result-placeholder strong { font-size:18px; }
  .result-placeholder p { font-size:13px; }
  .quote-connect { grid-template-columns:1fr; padding:18px; }
  .quote-main { width:100%; }
  .quote-connect small { grid-column:auto; }
}
@media (max-width:420px) {
  .brand small { display:none; }
  .brand-mark { width:34px; height:34px; }
  .header-quote { padding:8px 9px; }
}

:root { --radius: 14px; }
body { font-size:14px; line-height:1.55; }
.shell { width:min(1240px,calc(100% - 32px)); }
.header-inner { height:62px; }
.brand-mark { width:34px; height:34px; border-radius:9px; font-size:18px; }
.brand strong { font-size:15px; }
.hero-grid { min-height:250px; grid-template-columns:1.35fr .65fr; gap:38px; padding:38px 0; }
.hero h1 { font-size:clamp(30px,3.2vw,45px); }
.hero-copy { margin-top:15px; font-size:14px; line-height:1.6; }
.hero-pills { margin-top:17px; gap:6px; }
.hero-pills span { padding:5px 9px; font-size:11px; }
.hero-metrics { gap:8px; }
.hero-metrics div { min-height:78px; padding:14px; border-radius:12px; }
.hero-metrics strong { margin-top:6px; font-size:21px; }
.hero-metrics span,.hero-metrics small { font-size:10px; }
.workspace { padding:20px 0 48px; }
.panel { border-radius:14px; box-shadow:0 7px 22px rgba(18,38,66,.06); }
.panel h2 { font-size:20px; }
.panel-heading { margin-bottom:13px; }
.section-number { margin-bottom:3px; font-size:10px; letter-spacing:.12em; }

.guide-panel { margin-bottom:12px; padding:16px 18px; border:1px solid #b9d2ed; background:linear-gradient(180deg,#f8fbff,#f2f7fd); }
.guide-heading { align-items:center; gap:20px; margin-bottom:11px; }
.guide-heading h2 { font-size:19px; }
.guide-heading > p { max-width:650px; color:#405873; font-size:12px; line-height:1.5; }
.guide-steps { gap:7px; }
.guide-steps article { grid-template-columns:25px 1fr; gap:8px; min-height:72px; padding:10px; border-radius:10px; background:#fff; }
.guide-steps b { width:24px; height:24px; border-radius:7px; font-size:11px; }
.guide-steps strong { font-size:12px; }
.guide-steps p { margin-top:3px; font-size:11px; line-height:1.4; }

.mode-panel { margin-bottom:12px; padding:12px 16px; }
.mode-panel .panel-heading { margin-bottom:4px; }
.mode-description { font-size:12px; line-height:1.45; }
.segmented { padding:2px; border-radius:8px; }
.seg-btn { min-width:82px; min-height:28px; padding:4px 9px; border-radius:6px; font-size:11px; line-height:1; }
.seg-btn.active { box-shadow:0 2px 7px rgba(16,36,63,.16); }

.main-grid { grid-template-columns:minmax(390px,.9fr) minmax(520px,1.1fr); gap:14px; }
.left-column,.right-column { gap:14px; }
.cargo-panel,.option-panel,.result-panel { padding:17px; }
.quick-presets { gap:5px; margin-bottom:11px; }
.quick-presets button { padding:5px 8px; border-radius:7px; font-size:11px; }
.cargo-list { gap:7px; }
.cargo-card { grid-template-columns:4px 1fr auto; gap:10px; padding:10px; border-radius:10px; }
.cargo-color { min-height:48px; }
.cargo-main strong { font-size:13px; }
.cargo-main p { margin-top:3px; font-size:12px; }
.cargo-meta { margin-top:5px; }
.cargo-meta span { padding:2px 6px; font-size:10px; }
.mini-btn { width:28px; height:28px; border-radius:7px; }
.empty-state { min-height:150px; padding:20px; border-radius:11px; }
.empty-icon { width:38px; height:38px; margin-bottom:8px; border-radius:10px; font-size:20px; }
.cargo-summary { gap:6px; margin-top:11px; }
.cargo-summary div,.result-overview div { padding:9px; border-radius:9px; }
.cargo-summary span,.result-overview span { color:#53667d; font-size:11px; }
.cargo-summary strong,.result-overview strong { margin-top:2px; font-size:14px; }

.form-grid { gap:9px; }
.field { gap:4px; }
.field > span { color:#324a66; font-size:12px; }
.field input,.field select,.settings-table input { min-height:36px; padding:7px 9px; border-radius:7px; font-size:13px; }
.toggle-grid { gap:7px; margin-top:11px; }
.toggle-row { gap:8px; padding:9px; border-radius:9px; }
.toggle-ui { width:34px; height:20px; }
.toggle-ui::after { width:14px; height:14px; }
.toggle-row input:checked + .toggle-ui::after { transform:translateX(14px); }
.toggle-row strong { font-size:12px; }
.toggle-row small { font-size:10px; }
.range-field { margin-top:12px; }
.range-field div { font-size:12px; }
.run-btn { margin-top:13px; padding:11px; border-radius:9px; }
.run-btn > span { font-size:14px; }
.quote-inline { display:flex; align-items:center; justify-content:center; min-height:38px; margin-top:8px; border:1px solid #90caba; border-radius:9px; color:#0c7059; background:#f0fbf7; text-decoration:none; font-size:12px; font-weight:850; }
.quote-inline:hover { background:#e4f7f0; }

.result-panel { min-height:0; top:76px; }
.result-heading { margin-bottom:8px; }
.result-placeholder { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 20px; border:0; background:transparent; text-align:center; }
.result-placeholder::before,.result-placeholder::after { content:none; display:none; }
.result-placeholder img,.result-placeholder svg,.result-placeholder canvas,.result-placeholder picture,.result-placeholder .empty-illustration,.result-placeholder .result-image { display:none; }
.result-placeholder strong { margin:0; max-width:520px; font-size:17px; line-height:1.45; }
.result-placeholder p { max-width:550px; margin:7px 0 0; font-size:12px; line-height:1.55; }
.result-overview { gap:6px; }
.plan-summary { margin-top:8px; padding:10px 11px; border-radius:9px; }
.plan-summary strong { font-size:11px; }
.plan-summary span { font-size:13px; }
.plan-summary small { font-size:10px; }
.bin-cards { gap:6px; margin-top:9px; }
.bin-card { gap:9px; padding:9px 10px; border-radius:9px; }
.bin-card h3 { font-size:13px; }
.bin-card p,.bin-card > div:first-child > small { font-size:10px; }
.viewer-wrap { margin-top:10px; border-radius:10px; }
.viewer-toolbar { padding:6px; }
.bin-tabs button,.view-buttons button { padding:5px 7px; border-radius:6px; font-size:10px; }
.canvas-shell { min-height:360px; }
#loadCanvas { height:360px; }
.legend { margin-top:8px; }
.legend span { font-size:10px; }
.quote-connect { margin-top:11px; padding:15px 16px; border-radius:11px; }
.quote-connect strong { font-size:15px; }
.quote-connect p { font-size:11px; }
.quote-main { min-height:40px; padding:9px 13px; font-size:12px; }

.settings-tabs { gap:4px; padding:10px 16px 0; }
.settings-tabs button { min-height:27px; padding:4px 10px; border-radius:6px; font-size:11px; }
.settings-table-wrap { max-height:470px; padding:9px 16px; }
.settings-table { font-size:13px; table-layout:fixed; }
.settings-table th { padding:7px 6px; color:#334b67; font-size:12px; white-space:nowrap; }
.settings-table td { padding:5px 6px; }
.settings-table th:first-child,.settings-table td:first-child { width:22%; }
.settings-table input { min-height:32px; padding:5px 6px; font-size:12px; }
.settings-note { margin:0 16px 9px; font-size:11px; }

@media (max-width:1080px) {
  .hero-grid { min-height:230px; }
  .guide-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-placeholder { min-height:170px; }
}
@media (max-width:760px) {
  .shell { width:min(100% - 20px,1240px); }
  .hero-grid { padding:28px 0; }
  .hero h1 { font-size:29px; }
  .guide-panel { padding:13px; }
  .guide-heading { display:block; }
  .guide-heading > p { margin-top:5px; }
  .guide-steps { grid-template-columns:1fr; }
  .guide-steps article { min-height:0; }
  .mode-panel,.cargo-panel,.option-panel,.result-panel { padding:13px; }
  .mode-panel .inline-heading { display:flex; align-items:center; }
  .segmented { width:auto; }
  .seg-btn { flex:none; min-width:70px; min-height:27px; padding:4px 7px; font-size:10px; }
  .result-placeholder { min-height:145px; padding:24px 10px; }
  .result-placeholder strong { font-size:15px; }
  .canvas-shell,#loadCanvas { min-height:310px; height:310px; }
}

.file-upload-tools{margin:12px 0 14px;padding:14px;border:1px solid #d8e4f3;border-radius:14px;background:#f7faff}
.file-upload-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.file-upload-copy strong{display:block;font-size:14px;color:#1a3150}.file-upload-copy span{display:block;margin-top:4px;color:#697a91;font-size:12px;line-height:1.55}
.file-upload-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.file-upload-actions a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid #cbd9eb;border-radius:9px;background:#fff;color:#315a8f;font-size:12px;font-weight:750;text-decoration:none}
.file-guide{margin-top:10px;border-top:1px solid #e0e8f3;padding-top:10px}.file-guide summary{cursor:pointer;color:#405a78;font-size:12px;font-weight:750}.file-guide ul{margin:8px 0 0;padding-left:18px;color:#66788f;font-size:12px;line-height:1.75}.file-guide code{padding:2px 5px;border-radius:5px;background:#eaf1fb;color:#244e80;font-family:inherit;font-weight:700}
.file-import-status{display:none;margin-top:10px;padding:10px 12px;border-radius:9px;background:#eaf3ff;color:#28578b;font-size:12px;line-height:1.55}.file-import-status.show{display:block}.file-import-status.error{background:#fff0f1;color:#a5313e}.file-import-status.success{background:#eaf8f2;color:#167251}
.route-block{margin-bottom:14px;padding:14px;border:1px solid #dbe5f1;border-radius:14px;background:#fbfcfe}.route-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.route-head strong{font-size:14px;color:#1c3350}.route-head small{color:#74849a;font-size:11px;line-height:1.5;text-align:right}.route-grid{display:grid;gap:8px;align-items:end}.route-row-top{grid-template-columns:170px minmax(0,1fr) 42px}.route-row-bottom{grid-template-columns:minmax(0,1.45fr) 104px minmax(180px,.75fr);margin-top:9px}.route-grid .field span{font-size:11px}.route-swap{width:42px;height:40px;border:1px solid #d3dfed;border-radius:9px;background:#fff;color:#345a84;font-size:17px}.route-swap:hover{background:#edf4fd}.address-search-btn{height:40px;min-height:40px;padding:0 14px;border:1px solid #2b5cdb;border-radius:9px;background:#2b5cdb;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}.address-search-btn:hover{background:#1f49bd}.address-field input[readonly]{cursor:pointer;background:#fff;color:#1c3350}.route-note{display:block;margin-top:9px;color:#74849a;font-size:11px;line-height:1.5}
.result-overview div:nth-child(3) strong,.result-overview div:nth-child(4) strong{color:#1f5d9f}.plan-summary em{display:block;margin-top:7px;color:#4d6582;font-size:12px;font-style:normal;font-weight:650}
.canvas-shell{overflow:hidden;background:linear-gradient(180deg,#f8fbff 0%,#eef4fa 100%)}#loadCanvas{background:transparent}.canvas-hint{background:rgba(255,255,255,.94);box-shadow:0 4px 16px rgba(23,44,72,.08)}
.viewer-diagnostic{display:none;margin:9px 0 0;padding:9px 11px;border-radius:9px;background:#fff4e8;color:#8a581a;font-size:11px}.viewer-diagnostic.show{display:block}
@media(max-width:920px){.route-row-top{grid-template-columns:150px minmax(0,1fr) 42px}.route-row-bottom{grid-template-columns:minmax(0,1fr) 104px}.route-detail-field{grid-column:1/-1}.route-head{display:block}.route-head small{display:block;margin-top:4px;text-align:left}}
@media(max-width:620px){.file-upload-row{display:block}.file-upload-actions{margin-top:10px;display:grid;grid-template-columns:1fr 1fr}.file-upload-actions .secondary-btn,.file-upload-actions a{width:100%;justify-content:center}.route-row-top,.route-row-bottom{grid-template-columns:1fr}.route-grid .field,.route-detail-field{grid-column:1/-1}.route-swap{width:100%;height:36px}.address-search-btn{width:100%}.result-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-shell,#loadCanvas{height:300px;min-height:300px}}

:root{--kb-navy:#16284a;--kb-navy2:#0f1f3d;--kb-blue:#2b5cdb;--kb-blue2:#1f49bd;--kb-line:#e3e9f1;--kb-ink:#13203a;--kb-max:1200px}
html{scroll-padding-top:82px;-webkit-text-size-adjust:100%}
body.lock{overflow:hidden}
a{-webkit-tap-highlight-color:transparent}
.skip-link{position:fixed;left:16px;top:12px;z-index:5000;transform:translateY(-140%);padding:11px 15px;border-radius:10px;background:#fff;color:var(--kb-navy);font-size:14px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.2);transition:transform .2s;text-decoration:none}.skip-link:focus{transform:translateY(0)}
.container{width:min(var(--kb-max),calc(100% - 48px));margin:0 auto}
.header{height:68px;position:sticky;top:0;z-index:1000;background:rgba(22,40,74,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);padding-top:env(safe-area-inset-top)}
.header .header-inner{height:100%;display:flex;align-items:center;gap:34px;justify-content:flex-start}
.header .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#fff;text-decoration:none}
.header .brand-symbol{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;padding:2px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:#fff;overflow:hidden}
.header .brand-symbol svg{display:block;width:100%;height:100%}
.header .brand-copy{display:flex;align-items:center;line-height:1}
.header .brand-copy strong{display:block;color:#fff;font-size:15px;font-weight:850;letter-spacing:.015em;white-space:nowrap}
.header .nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}
.header .nav>a{color:#dde6f4;text-decoration:none;transition:.2s;white-space:nowrap}.header .nav>a:hover{color:#fff}
.header .header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.header-link{padding:9px 12px;color:#cdddf2;font-size:13.5px;font-weight:600;text-decoration:none;transition:.2s}.header-link:hover{color:#fff}
.header-btn{height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:11px;background:var(--kb-blue);color:#fff;font-size:13.5px;font-weight:700;box-shadow:0 10px 24px rgba(43,92,219,.34);text-decoration:none;transition:.2s}.header-btn:hover{background:var(--kb-blue2);transform:translateY(-1px)}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:transparent;color:#fff}
.menu-btn span,.menu-btn span::after,.menu-btn span::before{display:block;width:19px;height:2px;background:#fff;border-radius:2px;position:relative;margin:auto;transition:.2s}.menu-btn span::after,.menu-btn span::before{content:"";position:absolute;left:0}.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}.menu-btn[aria-expanded="true"] span{background:transparent}.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;z-index:999;max-height:calc(100dvh - 68px - env(safe-area-inset-top));overflow:auto;padding:14px 22px calc(24px + env(safe-area-inset-bottom));background:var(--kb-navy);color:#fff;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px rgba(3,15,34,.3)}.mobile-nav.open{display:block}
.mobile-nav>a,.mobile-nav>button,.mobile-nav-group>a{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;text-align:left;text-decoration:none;font-weight:600;font-size:15px}.mobile-nav a.active{color:#aecdff}.mobile-nav a.active span{font-size:10px;color:#aecdff}
.mobile-nav-group{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-nav-label{display:block;padding:10px 4px 6px;color:#9fb5d6;font-size:10px;font-weight:800;letter-spacing:.14em}.mobile-nav-group>a{min-height:44px;border-bottom:0;padding:10px 4px 10px 14px;font-size:13.5px}.mobile-nav-group>a::before{content:"";width:5px;height:5px;margin-right:2px;border-radius:50%;background:#7fa9eb;flex:0 0 auto}.mobile-nav-group>a span{margin-left:auto}.mobile-quote{margin-top:10px;padding:0 15px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:var(--kb-blue)}
.nav-dropdown{position:relative;display:flex;align-items:center;height:68px}.nav-dropdown-toggle{height:68px;min-height:0;display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:#dde6f4;font-size:14px;font-weight:600;white-space:nowrap}.nav-dropdown-toggle::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}.nav-dropdown.active .nav-dropdown-toggle,.nav-dropdown:focus-within .nav-dropdown-toggle,.nav-dropdown:hover .nav-dropdown-toggle{color:#fff}.nav-dropdown:focus-within .nav-dropdown-toggle::after,.nav-dropdown:hover .nav-dropdown-toggle::after{transform:rotate(225deg) translate(-2px,-2px)}
.nav-dropdown-menu{position:absolute;z-index:1200;top:58px;left:50%;width:230px;padding:10px;border:1px solid rgba(22,40,74,.1);border-radius:15px;background:#fff;color:var(--kb-ink);box-shadow:0 22px 52px rgba(8,23,51,.22);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.nav-dropdown-menu::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:#fff;border-left:1px solid rgba(22,40,74,.1);border-top:1px solid rgba(22,40,74,.1);transform:translateX(-50%) rotate(45deg)}.nav-dropdown-menu small{display:block;padding:7px 10px 8px;color:#8997ab;font-size:9.5px;font-weight:800;letter-spacing:.14em}.nav-dropdown-menu a{position:relative;z-index:1;display:block;padding:12px 13px;border-radius:10px;color:#293956;text-decoration:none;font-size:13.5px;font-weight:700;line-height:1.35;transition:.18s}.nav-dropdown-menu a span{display:block;margin-top:4px;color:#8693a7;font-size:11px;font-weight:500;line-height:1.45}.nav-dropdown-menu a.active,.nav-dropdown-menu a:hover{background:#eef3fb;color:var(--kb-blue)}
.tools-nav-dropdown .tools-dropdown-menu{width:600px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:12px;max-height:calc(100vh - 82px);overflow:auto;overscroll-behavior:contain}.tools-nav-dropdown .tools-dropdown-menu>small{grid-column:1/-1;padding:6px 10px 9px}.tools-nav-dropdown .tools-dropdown-menu>a{min-width:0;padding:10px 12px}
.planner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px;padding:11px 14px;border:1px solid #d9e3ee;border-radius:12px;background:#fff;box-shadow:0 7px 22px rgba(18,38,66,.05)}.planner-toolbar-copy{min-width:0}.planner-toolbar-copy strong{display:block;color:var(--navy);font-size:13px}.planner-toolbar-copy span{display:block;margin-top:2px;color:#68798e;font-size:11px}.planner-toolbar-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.planner-toolbar .ghost-btn,.planner-toolbar .primary-btn{min-height:36px;padding:7px 11px;font-size:12px;border-radius:8px}
@media(max-width:1180px){.tools-nav-dropdown .tools-dropdown-menu{width:540px}.header .nav{gap:20px}}
@media(max-width:1020px){.header .header-actions,.header .nav{display:none}.menu-btn{display:block}.planner-toolbar{margin-top:0}}
@media(max-width:760px){
  html{scroll-padding-top:70px}.container{width:min(100% - 30px,var(--kb-max))}.header{height:62px}.mobile-nav{top:62px;max-height:calc(100dvh - 62px - env(safe-area-inset-top))}.header .header-inner{height:100%;gap:16px}.header .brand-symbol{width:28px;height:28px;flex-basis:28px}.header .brand-copy strong{font-size:14px}.shell{width:min(100% - 24px,1240px)}
  .hero-grid{grid-template-columns:1fr;padding:28px 0 24px;gap:18px}.hero h1{font-size:clamp(27px,8vw,32px);line-height:1.24}.hero h1 br{display:none}.hero-copy{margin-top:11px;font-size:13px;line-height:1.62}.hero-pills{margin-top:13px}.hero-pills span{font-size:10px}.hero-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hero-metrics div{min-height:66px;padding:10px 7px;text-align:center}.hero-metrics span{font-size:9px}.hero-metrics strong{font-size:18px}.hero-metrics small{display:block;margin:3px 0 0;font-size:8px}
  .workspace{padding:12px 0 34px}.planner-toolbar{display:grid;grid-template-columns:1fr;margin-bottom:10px;padding:12px}.planner-toolbar-copy span{font-size:10px}.planner-toolbar-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.planner-toolbar-actions #runTopBtn{display:block;grid-column:1/-1}.planner-toolbar .ghost-btn,.planner-toolbar .primary-btn{width:100%;min-height:40px}
  .guide-panel{padding:12px}.guide-heading{display:block;margin-bottom:9px}.guide-heading h2{font-size:18px}.guide-heading>p{margin-top:5px;font-size:11px}.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.guide-steps article{grid-template-columns:22px 1fr;gap:7px;padding:9px;min-height:88px}.guide-steps b{width:21px;height:21px;font-size:10px}.guide-steps strong{font-size:11px}.guide-steps p{font-size:10px;line-height:1.35}
  .mode-panel .inline-heading{display:flex;align-items:center;gap:10px}.mode-panel .panel-heading>div:first-child{min-width:0}.mode-panel h2{font-size:18px}.segmented{margin-left:auto;flex:0 0 auto}.seg-btn{min-width:64px;min-height:29px;padding:4px 6px;font-size:10px}.mode-description{font-size:11px}
  .main-grid{grid-template-columns:1fr;gap:10px}.left-column,.right-column{gap:10px}.mode-panel,.cargo-panel,.option-panel,.result-panel{padding:12px}.panel-heading{margin-bottom:10px}.panel h2{font-size:18px}.inline-heading{gap:8px}.heading-actions{gap:5px}.heading-actions .secondary-btn{padding:8px 10px;font-size:11px}.quick-presets{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.quick-presets::-webkit-scrollbar{display:none}.quick-presets button{flex:0 0 auto;white-space:nowrap}.cargo-card{grid-template-columns:4px minmax(0,1fr) auto;gap:8px;padding:9px}.cargo-card-actions{flex-direction:column}.cargo-summary,.result-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid,.toggle-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.field input,.field select{font-size:16px}.toggle-row{align-items:center}.result-panel{position:static}.result-placeholder{min-height:130px;padding:20px 8px}.result-actions{gap:4px}.icon-btn{width:36px;height:36px}.bin-card{grid-template-columns:1fr}.viewer-toolbar{display:block;overflow:hidden}.bin-tabs,.view-buttons{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.bin-tabs::-webkit-scrollbar,.view-buttons::-webkit-scrollbar{display:none}.bin-tabs button,.view-buttons button{flex:0 0 auto}.canvas-shell,#loadCanvas{min-height:280px;height:280px}.canvas-hint{max-width:calc(100% - 16px);font-size:8px}.quote-connect{grid-template-columns:1fr;padding:14px}.quote-main{width:100%}.info-grid{grid-template-columns:1fr;gap:9px}.info-grid article{padding:15px}.notice-panel{display:block;padding:15px}.notice-panel strong{display:block;margin-bottom:5px}.footer-inner{min-height:110px;align-items:flex-start;justify-content:center;flex-direction:column;padding:24px 0}
  .modal,.wide-modal{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.modal form{height:100%;display:flex;flex-direction:column}.modal-head{padding:14px 16px;flex:0 0 auto}.modal-body{grid-template-columns:1fr;padding:14px 16px;overflow:auto}.modal-foot{padding:12px 16px;flex:0 0 auto}.settings-tabs{padding:10px 12px 0;overflow-x:auto}.settings-tabs button{flex:0 0 auto}.settings-table-wrap{max-height:none;flex:1;padding:8px 12px;overflow:auto}.settings-table{min-width:780px}.settings-note{margin:0 12px 8px}
}
@media(max-width:460px){.container{width:min(100% - 24px,var(--kb-max))}.guide-steps{grid-template-columns:1fr}.guide-steps article{min-height:0}.hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-panel .inline-heading{align-items:flex-start}.segmented{margin-left:0}.cargo-panel .inline-heading{align-items:flex-start}.heading-actions{flex-direction:column;align-items:stretch}.heading-actions .text-btn{display:block;padding:5px;font-size:10px}.heading-actions .secondary-btn{padding:7px 8px}.result-placeholder strong{font-size:14px}.result-placeholder p{font-size:11px}}
@media print{.header,.mobile-nav,.planner-toolbar{display:none}}

.main-grid,.left-column,.right-column,.panel,.form-grid,.toggle-grid,.route-grid,.field{min-width:0}
.field input,.field select{min-width:0;max-width:100%}
@media(max-width:760px){.main-grid,.left-column,.right-column,.panel{width:100%;max-width:100%}.route-block,.file-upload-tools{max-width:100%;overflow:hidden}}

.option-panel{overflow:visible}
.option-panel>.panel-heading{margin-bottom:11px}
.route-block{margin:0 0 12px;padding:0;border:1px solid #d5e1ef;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 5px 16px rgba(23,45,77,.045)}
.route-head{display:block;margin:0;padding:10px 12px;background:linear-gradient(135deg,#3978ea,#2b5cdb);color:#fff}
.route-head strong{display:block;color:#fff;font-size:13px;line-height:1.35}
.route-head small{display:block;margin-top:3px;color:rgba(255,255,255,.82);font-size:10px;line-height:1.45;text-align:left}
.route-body{padding:11px;background:#fff}
.route-direction-band{padding:10px;border:1px solid #dce6f2;border-radius:9px;background:#f8faff}
.route-direction-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px}
.route-direction-copy>span{color:#243b5a;font-size:11px;font-weight:800;white-space:nowrap}
.route-direction-copy>small{min-width:0;color:#72839a;font-size:9.5px;line-height:1.4;text-align:right;overflow-wrap:anywhere}
.route-direction-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.route-direction-tabs button{width:100%;min-width:0;min-height:34px;padding:0 7px;border:1px solid #cdd9e8;border-radius:7px;background:#fff;color:#51647d;font-size:11px;font-weight:750;white-space:nowrap;box-shadow:none}
.route-direction-tabs button:hover{border-color:#8daee0;background:#f2f6fd;color:#264f86}
.route-direction-tabs button.active{border-color:#2b5cdb;background:#2b5cdb;color:#fff;box-shadow:0 5px 12px rgba(43,92,219,.2)}
.route-input-line{margin-top:9px;padding:10px;border:1px solid #dce5ef;border-radius:9px;background:#fff}
.route-line-title{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.route-line-title>b{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:#eaf1ff;color:#2b5cdb;font-size:10px}
.route-line-title>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;flex:1}
.route-line-title strong{color:#233a58;font-size:11px;white-space:nowrap}
.route-line-title small{min-width:0;color:#8491a3;font-size:9.5px;line-height:1.35;text-align:right;overflow-wrap:anywhere}
.route-input-line>input,.address-search-row input{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid #cbd7e5;border-radius:7px;background:#fff;color:#18304f;font-size:12px;outline:none}
.route-input-line>input:focus,.address-search-row input:focus{border-color:#2b5cdb;box-shadow:0 0 0 3px rgba(43,92,219,.1)}
.address-search-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:6px}
.address-search-row input[readonly]{cursor:pointer;background:#fff}
.address-search-btn{width:72px;height:38px;min-height:38px;padding:0 8px;border-radius:7px;font-size:11px}
.route-detail-input{margin-top:6px}
.route-swap{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:29px;min-height:29px;margin:7px 0 0;border:1px dashed #c5d4e6;border-radius:7px;background:#f8faff;color:#436181;font-size:10px;font-weight:750}
.route-swap:hover{border-color:#8eadd3;background:#edf4fd;color:#234e7f}
.route-note{display:block;margin-top:8px;padding:0 2px;color:#7b899b;font-size:9.5px;line-height:1.5}
.option-panel>.form-grid{grid-template-columns:1fr;gap:8px;margin-top:0}
.option-panel>.form-grid .span-2{grid-column:auto}
.option-panel>.form-grid .field span{font-size:11px}
.option-panel>.form-grid .field select{min-height:38px;height:38px;padding:0 10px;font-size:12px}
.option-panel>.toggle-grid{grid-template-columns:1fr;gap:7px;margin-top:9px}
.option-panel>.toggle-grid .toggle-row{min-height:50px;padding:9px 10px;border-radius:9px}
.option-panel>.toggle-grid .toggle-row strong{font-size:11px}
.option-panel>.toggle-grid .toggle-row small{font-size:9.5px;line-height:1.4}
.option-panel>.range-field{margin-top:9px;padding:10px;border-radius:9px}
.option-panel>.range-field>div span,.option-panel>.range-field>div strong{font-size:11px}
.option-panel .run-btn{margin-top:10px}
@media(max-width:760px){
  .route-head{padding:11px}
  .route-body{padding:10px}
  .route-direction-copy{display:block}
  .route-direction-copy>small{display:block;margin-top:3px;text-align:left}
  .route-direction-tabs button{min-height:38px;font-size:12px}
  .route-input-line{padding:10px}
  .route-line-title>span{display:block}
  .route-line-title small{display:block;margin-top:2px;text-align:left}
  .address-search-row{grid-template-columns:minmax(0,1fr) 78px}
  .address-search-btn{width:78px}
  .route-input-line>input,.address-search-row input{height:42px;font-size:16px}
  .option-panel>.form-grid .field select{height:42px;min-height:42px;font-size:16px}
}
@media(max-width:380px){
  .route-direction-tabs{gap:4px}
  .route-direction-tabs button{padding:0 4px;font-size:11px}
  .address-search-row{grid-template-columns:1fr}
  .address-search-btn{width:100%}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main-grid{grid-template-columns:minmax(390px,.78fr) minmax(620px,1.22fr);gap:20px}
.cargo-heading-actions{display:flex;align-items:center;gap:8px}.cargo-reset-btn{min-height:36px;padding:7px 9px;border-radius:8px;background:#fff5f6;border:1px solid #f4d7da;font-size:11px;font-weight:800}.cargo-reset-btn:hover{background:#ffecee;color:#a82935}
.cargo-list-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin:13px 0 9px}.cargo-search-wrap input{width:100%;height:38px;padding:8px 11px 8px 34px;border:1px solid #d8e1eb;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2372869d' stroke-width='1.7'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3.5 3.5'/%3E%3C/svg%3E") 10px center/15px no-repeat;color:#152a43;font-size:12px}.cargo-list-count{color:#718197;font-size:10px;white-space:nowrap}.cargo-list-toggle{height:34px;padding:0 10px;border:1px solid #cfdaE7;border-radius:8px;background:#f7f9fc;color:#37516d;font-size:10px;font-weight:800;white-space:nowrap}.cargo-list{max-height:510px;overflow:auto;padding-right:3px;overscroll-behavior:contain}.cargo-list::-webkit-scrollbar{width:7px}.cargo-list::-webkit-scrollbar-thumb{border-radius:10px;background:#cbd7e4}.compact-cargo-card{grid-template-columns:26px 4px minmax(0,1fr) auto;gap:9px;padding:10px 10px;border-radius:11px}.cargo-sequence{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#edf3fa;color:#365879;font-size:10px;font-weight:850}.compact-cargo-card .cargo-color{min-height:45px;border-radius:4px}.cargo-title-row{display:flex;align-items:center;justify-content:space-between;gap:9px}.cargo-title-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cargo-title-row>span{flex:0 0 auto;color:#31577b;background:#edf4fb;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:800}.compact-cargo-card .cargo-main p{margin-top:3px}.compact-cargo-card .cargo-meta{margin-top:5px}.compact-cargo-card .cargo-meta span{padding:2px 6px;font-size:9px}.compact-cargo-card .cargo-card-actions{display:grid;grid-template-columns:repeat(3,auto);gap:4px}.compact-cargo-card .mini-btn{width:auto;height:28px;padding:0 7px;font-size:9px}.cargo-no-result{padding:28px;border:1px dashed #cad6e4;border-radius:11px;background:#f8fafc;color:#718197;text-align:center;font-size:12px}
.result-panel{padding:0;overflow:visible;background:transparent;border:0;box-shadow:none}.result-heading{padding:0 2px 10px;margin-bottom:0}.result-heading .result-actions{display:flex}.planner-sim-card,.item-detail-card{overflow:hidden;border:1px solid #dfe6ee;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,35,60,.08)}.planner-sim-card{margin-bottom:14px}.planner-sim-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:16px 20px;border-bottom:1px solid #e8edf3}.planner-sim-head strong{display:block;color:#132944;font-size:17px}.planner-sim-head small{display:block;margin-top:3px;color:#7b899a;font-size:10px}.selected-bin-badge{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 15px;border-radius:999px;background:#3779ed;color:#fff;font-size:12px;font-weight:850;white-space:nowrap}.planner-bin-tabs{padding:10px 18px 0;overflow-x:auto;flex-wrap:nowrap}.planner-bin-tabs.single{display:none}.planner-bin-tabs button{flex:0 0 auto}.planner-viewer{margin:14px 18px 0;border:0;border-radius:14px;background:#f2f6fb}.planner-viewer .viewer-toolbar{border:0;background:transparent;padding:10px 12px 0}.viewer-label{color:#5f7186;font-size:10px;font-weight:850}.planner-viewer .canvas-shell{border-radius:12px;background:linear-gradient(180deg,#f2f6fb,#edf3f9)}.planner-viewer #loadCanvas{height:380px}.planner-legend{padding:8px 20px 0;margin:0}.utilization-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 20px 10px}.utilization-item{min-width:0}.utilization-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#5d6f85;font-size:11px}.utilization-copy span{min-width:0}.utilization-copy b{color:#3c526d;font-weight:700}.utilization-copy strong{color:#233c5a;font-size:13px}.wide-progress{height:8px;margin-top:7px;border-radius:999px;background:#e4eaf1;overflow:hidden}.wide-progress i{display:block;height:100%;border-radius:inherit;transition:width .35s ease}.wide-progress.volume i{background:#3c7bf0}.wide-progress.weight i{background:#169668}.result-status-stack{display:grid;gap:8px;padding:4px 20px 20px}.result-status{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:8px;padding:10px 13px;border-radius:11px;font-size:11px;line-height:1.55}.result-status b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px}.result-status.success{color:#08763e;background:#eafaf2}.result-status.success b{background:#c9f3dc}.result-status.warning{color:#966017;background:#fff6dd}.result-status.warning b{background:#ffe7aa}.result-status.info{color:#3269bf;background:#eaf1ff}.result-status.info b{background:#cfddff}.planner-sim-card>.warning-box{margin:0 20px 20px}.item-detail-card{margin-top:14px}.item-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e8edf3}.item-detail-head strong{display:block;color:#142a45;font-size:16px}.item-detail-head small{display:block;margin-top:3px;color:#8190a3;font-size:10px}.item-detail-head>span{padding:5px 9px;border-radius:999px;background:#eef4fb;color:#3f5f80;font-size:10px;font-weight:800}.item-detail-table-wrap{overflow-x:auto;padding:10px 20px 18px}.item-detail-table{width:100%;border-collapse:collapse;min-width:600px}.item-detail-table th,.item-detail-table td{padding:10px 8px;border-bottom:1px solid #edf1f5;text-align:right;font-size:11px;white-space:nowrap}.item-detail-table th{color:#8191a6;font-size:9px;font-weight:850}.item-detail-table th:first-child,.item-detail-table td:first-child{text-align:left}.item-name{display:inline-flex;align-items:center;gap:7px;color:#19324f;font-weight:750}.item-name i{width:9px;height:9px;border-radius:4px}.loaded-ratio{color:#07823f}.empty-detail{text-align:center;color:#8290a2;padding:24px}.quote-connect{margin-top:14px}
@media(max-width:1160px){.main-grid{grid-template-columns:1fr}.result-panel{position:static}.cargo-list{max-height:430px}.planner-viewer #loadCanvas{height:390px}}
@media(max-width:720px){.cargo-heading-actions{margin-left:auto}.cargo-reset-btn{padding:6px 7px}.cargo-list-tools{grid-template-columns:1fr auto}.cargo-list-count{grid-column:1/2}.cargo-list-toggle{grid-column:2/3;grid-row:2}.cargo-list{max-height:430px}.compact-cargo-card{grid-template-columns:24px 4px minmax(0,1fr)}.compact-cargo-card .cargo-card-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.compact-cargo-card .mini-btn{height:31px}.planner-sim-head{padding:14px}.planner-sim-head strong{font-size:15px}.selected-bin-badge{min-height:31px;padding:0 11px;font-size:10px}.planner-viewer{margin:10px 10px 0}.planner-viewer #loadCanvas{height:310px;min-height:310px}.utilization-grid{grid-template-columns:1fr;padding:14px}.result-status-stack{padding:2px 14px 14px}.planner-sim-card>.warning-box{margin:0 14px 14px}.item-detail-head{padding:14px}.item-detail-table-wrap{padding:8px 10px 14px}.result-heading{padding:0 2px 8px}}
@media(max-width:430px){.cargo-panel .inline-heading{align-items:center}.cargo-heading-actions{flex-direction:row}.cargo-heading-actions .secondary-btn{white-space:nowrap}.compact-cargo-card .cargo-main p{font-size:10px}.planner-sim-head{align-items:flex-start}.selected-bin-badge{max-width:46%;overflow:hidden;text-overflow:ellipsis}.planner-viewer #loadCanvas{height:270px;min-height:270px}.view-buttons{max-width:100%}.result-status{grid-template-columns:18px 1fr;padding:9px 10px;font-size:10px}.result-status b{width:18px;height:18px}.item-detail-head{align-items:flex-start}}

@media (max-width:760px){
  .hero-grid{gap:20px}
  .hero-metrics{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .hero-metrics>div{
    min-width:0;
    min-height:88px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;
    align-items:end;
    padding:14px 14px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    background:rgba(8,28,52,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(4,15,30,.12);
    text-align:left;
    backdrop-filter:blur(10px);
  }
  .hero-metrics>div>span{
    grid-column:1/-1;
    display:block;
    margin:0;
    color:#d3e2f0;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  .hero-metrics>div>strong{
    min-width:0;
    display:block;
    margin:9px 0 0;
    color:#fff;
    font-size:clamp(22px,6.8vw,28px);
    line-height:1;
    font-weight:850;
    letter-spacing:-.045em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-metrics>div>small{
    display:block;
    align-self:end;
    margin:0 0 1px 6px;
    color:#a9bfd4;
    font-size:10px;
    line-height:1;
    font-weight:750;
    white-space:nowrap;
  }
}
@media (max-width:360px){
  .hero-metrics{gap:8px}
  .hero-metrics>div{min-height:82px;padding:12px 11px 10px}
  .hero-metrics>div>strong{font-size:21px}
  .hero-metrics>div>small{font-size:9px;margin-left:4px}
}

.canvas-shell{background:linear-gradient(180deg,#f7faff 0%,#eaf1f8 100%)}
#loadCanvas{display:block;width:100%;touch-action:none}
.canvas-hint{font-weight:700;color:#50677f;background:rgba(255,255,255,.93);border:1px solid rgba(72,101,132,.13)}
@media(max-width:620px){.canvas-hint{font-size:8px;line-height:1.35}}

.result-panel{background:#fff}
#resultPlaceholder.result-placeholder{
  min-height:235px;
  padding:38px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:15px;
  box-shadow:0 8px 24px rgba(25,48,78,.045);
  text-align:center;
}
#resultPlaceholder.result-placeholder strong{
  max-width:620px;
  margin:0;
  color:#162b47;
  font-size:19px;
  line-height:1.45;
  word-break:keep-all;
  text-wrap:balance;
}
#resultPlaceholder.result-placeholder p{
  max-width:620px;
  margin:10px 0 0;
  color:#667a92;
  font-size:13px;
  line-height:1.7;
  word-break:keep-all;
  text-wrap:pretty;
}
.cargo-heading-actions{display:flex;align-items:center;gap:8px}
.cargo-heading-actions .cargo-action-btn{
  width:108px;
  min-width:108px;
  height:38px;
  min-height:38px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.cargo-heading-actions .cargo-reset-btn{border:1px solid #d7e0eb;background:#fff;color:#60738a}
.cargo-heading-actions .cargo-reset-btn:hover{border-color:#b7c5d5;background:#f5f8fb;color:#263e5b}
.cargo-heading-actions .cargo-add-btn{border:1px solid #2b5cdb;background:#2b5cdb;color:#fff}
.cargo-heading-actions .cargo-add-btn:hover{background:#1f49bd}
.cargo-card-actions{min-width:84px}
.canvas-shell{background:#f2f6fc}
#loadCanvas{background:#f2f6fc}
.viewer-diagnostic{display:none}
@media(max-width:760px){
  #resultPlaceholder.result-placeholder{min-height:190px;padding:30px 18px}
  #resultPlaceholder.result-placeholder strong{font-size:17px}
  #resultPlaceholder.result-placeholder p{font-size:12px;line-height:1.65}
}
@media(max-width:460px){
  .cargo-panel .inline-heading{display:block}
  .cargo-heading-actions{width:100%;margin-top:10px;flex-direction:row}
  .cargo-heading-actions .cargo-action-btn{flex:1 1 0;width:auto;min-width:0}
}

.file-upload-tools{margin-top:2px;margin-bottom:12px}
.file-upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.file-upload-copy{min-width:0}
.file-upload-copy strong{display:block;color:#162a45;font-size:15px;font-weight:850;line-height:1.4;word-break:keep-all}
.file-upload-copy span{display:block;margin-top:7px;color:#63758d;font-size:12px;line-height:1.72;word-break:keep-all}
.file-upload-copy b{color:#2b5cdb}
.file-upload-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.file-upload-actions .secondary-btn,.file-upload-actions a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.quick-presets{margin-top:0}

.cargo-modal-body{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:18px 22px 16px}
.cargo-modal-body .cargo-name-field{grid-column:1/-1}
.cargo-modal-body .cargo-dimension-field{grid-column:span 2}
.cargo-modal-body .cargo-quantity-field,.cargo-modal-body .cargo-weight-field{grid-column:span 2}
.cargo-modal-body .cargo-stack-field,.cargo-modal-body .cargo-rotation-field{grid-column:span 3}
.cargo-modal-body .field span{font-size:12px;font-weight:800;color:#7c8da7}
.cargo-modal-body .field input,.cargo-modal-body .field select{height:48px;border-radius:14px;font-size:16px;background:#f8faff}
.cargo-dialog-summary{grid-column:1/-1;color:#7184a0;font-size:13px;line-height:1.5;padding:2px 2px 0}
#cargoDialog .modal-head .section-number{display:none}
#cargoDialog .modal-head h2{font-size:22px}

@media(max-width:720px){
  .file-upload-row{grid-template-columns:1fr;gap:12px}
  .file-upload-actions{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
  .file-upload-actions .secondary-btn,.file-upload-actions a{width:100%}
  .cargo-modal-body{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}
  .cargo-modal-body .cargo-name-field{grid-column:1/-1}
  .cargo-modal-body .cargo-dimension-field,.cargo-modal-body .cargo-quantity-field,.cargo-modal-body .cargo-weight-field{grid-column:span 1}
  .cargo-modal-body .cargo-stack-field,.cargo-modal-body .cargo-rotation-field{grid-column:span 1}
}
@media(max-width:430px){
  .file-upload-actions{grid-template-columns:1fr}
  .cargo-modal-body .cargo-dimension-field:nth-of-type(4){grid-column:1/-1}
  .cargo-modal-body .cargo-stack-field,.cargo-modal-body .cargo-rotation-field{grid-column:1/-1}
}

:root{--v17-border:#dbe4ef;--v17-ink:#132a45;--v17-muted:#687c94;--v17-blue:#2b5cdb}
body{font-size:15px;line-height:1.62}
.panel{border-color:#dde6f0}
.panel h2{font-size:21px;letter-spacing:-.03em}
.section-number{font-size:11px}
.mode-description,.guide-heading>p,.guide-steps p{font-size:13px;line-height:1.7}
.main-grid{grid-template-columns:minmax(410px,.82fr) minmax(650px,1.18fr);gap:22px}
.cargo-panel,.option-panel{padding:20px}
.cargo-panel .panel-heading{margin-bottom:14px}
.quick-presets{margin:0 0 13px;gap:7px}
.quick-presets button{min-height:34px;padding:6px 10px;font-size:11px;border-style:solid;background:#f8fafc}

.file-upload-tools{margin:0 0 14px;padding:15px 16px;border:1px solid #d9e4f2;border-radius:13px;background:#f6f9fe}
.file-upload-row{display:block}
.file-upload-copy strong{font-size:15px;line-height:1.4;color:var(--v17-ink)}
.file-upload-copy span{max-width:100%;margin-top:5px;font-size:12px;line-height:1.7;color:#60748d;word-break:keep-all}
.file-upload-actions{display:flex;justify-content:flex-start;gap:7px;margin-top:11px}
.file-upload-actions .secondary-btn,.file-upload-actions a{width:auto;min-width:0;min-height:34px;height:34px;padding:0 11px;border-radius:8px;font-size:11px;font-weight:800;line-height:1;white-space:nowrap}
.file-upload-actions .secondary-btn{background:#eaf2ff;border-color:#c7d9f5;color:#2458a7}
.file-upload-actions a{background:#fff;border-color:#cfdbe9;color:#375777}
.file-guide{margin-top:10px;padding-top:10px}
.file-guide summary{font-size:11px}
.file-guide li{font-size:11px;line-height:1.65}

.cargo-list-tools{margin-top:12px}
.compact-cargo-card{padding:12px;border-radius:12px}
.cargo-title-row strong{font-size:13px}
.compact-cargo-card .cargo-main p{font-size:11px;line-height:1.5}
.compact-cargo-card .cargo-meta span{font-size:9.5px;padding:3px 6px}
.cargo-summary{gap:8px;margin-top:13px}
.cargo-summary div{padding:11px;background:#f7f9fc}
.cargo-summary span{font-size:11px}.cargo-summary strong{font-size:15px}

.option-panel .field>span,.range-field span{font-size:12px;font-weight:800}
.field input,.field select{min-height:42px;font-size:14px;border-radius:9px}
.toggle-row{padding:12px}.toggle-row strong{font-size:12px}.toggle-row small{font-size:10.5px;line-height:1.55}
.run-btn{min-height:58px}.run-btn span{font-size:14px}.run-btn small{font-size:10px}

.result-panel{padding:0;background:transparent;border:0;box-shadow:none}
.result-heading{margin:0 0 12px;padding:0 2px}
.result-heading h2{font-size:24px}
.result-actions .icon-btn{width:42px;height:42px;background:#fff;border:1px solid var(--v17-border)}
#resultPlaceholder.result-placeholder{min-height:300px;padding:46px 36px;border:1px solid var(--v17-border);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(18,44,76,.07)}
#resultPlaceholder.result-placeholder strong{font-size:24px;line-height:1.45}
#resultPlaceholder.result-placeholder p{max-width:690px;font-size:14px;line-height:1.85;color:#70839a}

.result-content{display:grid;gap:14px}
.result-summary-card,.planner-sim-card,.item-detail-card{border:1px solid var(--v17-border);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(18,44,76,.07);overflow:hidden}
.result-summary-card{padding:18px}
.plan-summary{display:block;margin:0 0 13px;padding:16px 17px;border:1px solid #cfe0f8;border-radius:13px;background:linear-gradient(135deg,#f1f6ff,#f8fbff)}
.plan-summary strong{display:block;margin:0 0 5px;color:var(--v17-blue);font-size:12px;letter-spacing:.01em}
.plan-summary span{display:block;color:var(--v17-ink);font-size:19px;line-height:1.45;font-weight:850}
.plan-summary small{display:block;margin-top:6px;color:#6d8097;font-size:11px;line-height:1.55}
.result-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.result-overview div{min-width:0;padding:14px 13px;border:1px solid #e1e8f0;border-radius:13px;background:#f8fafc}
.result-overview span{font-size:11px;font-weight:750;color:#6c8098}
.result-overview strong{margin-top:6px;font-size:20px;line-height:1.2;color:#18314f}

.planner-sim-card{margin:0}
.planner-sim-head{min-height:72px;padding:17px 19px}
.planner-sim-head strong{font-size:18px}.planner-sim-head small{font-size:11px;line-height:1.55}
.selected-bin-badge{min-height:36px;padding:0 14px;font-size:11px}
.planner-viewer{margin:13px 14px 0;border-radius:14px}
.planner-viewer .viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 6px}
.viewer-label{font-size:11px}
.view-buttons button{min-height:30px;padding:0 9px;font-size:10px}
.planner-viewer #loadCanvas{height:420px;min-height:420px}
.planner-legend{padding:10px 18px 0}
.legend span{font-size:10px}
.utilization-grid{padding:18px;gap:18px}
.utilization-copy{font-size:12px}.utilization-copy strong{font-size:15px}
.wide-progress{height:9px}
.result-status-stack{padding:0 18px 18px;gap:9px}
.result-status{padding:12px 14px;font-size:12px;line-height:1.65}
.item-detail-head{padding:17px 18px}.item-detail-head strong{font-size:17px}.item-detail-head small{font-size:11px}
.item-detail-table-wrap{padding:10px 16px 18px}
.item-detail-table th{font-size:10px}.item-detail-table td{font-size:12px;padding:11px 8px}
.quote-connect{border-radius:16px;padding:18px}.quote-connect strong{font-size:16px}.quote-connect p,.quote-connect small{font-size:11px;line-height:1.65}

@media(max-width:1160px){.main-grid{grid-template-columns:1fr}.planner-viewer #loadCanvas{height:390px;min-height:390px}}
@media(max-width:720px){
 body{font-size:14px}.cargo-panel,.option-panel{padding:16px}
 .file-upload-actions{display:flex;flex-wrap:wrap}.file-upload-actions .secondary-btn,.file-upload-actions a{flex:0 0 auto;height:34px}
 .result-heading h2{font-size:21px}.result-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
 #resultPlaceholder.result-placeholder{min-height:230px;padding:34px 20px}
 #resultPlaceholder.result-placeholder strong{font-size:20px}#resultPlaceholder.result-placeholder p{font-size:13px;line-height:1.75}
 .result-summary-card{padding:13px}.plan-summary{padding:14px}.plan-summary span{font-size:17px}
 .planner-sim-head{padding:14px}.planner-viewer{margin:10px 10px 0}.planner-viewer #loadCanvas{height:310px;min-height:310px}
 .utilization-grid{grid-template-columns:1fr;padding:14px}.result-status-stack{padding:0 14px 14px}
}
@media(max-width:430px){
 .file-upload-actions .secondary-btn,.file-upload-actions a{width:100%;justify-content:center}
 .result-overview strong{font-size:18px}.planner-viewer #loadCanvas{height:280px;min-height:280px}
 .planner-viewer .viewer-toolbar{display:block}.view-buttons{margin-top:7px}
}

.mode-utility-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mode-utility-btn{min-height:32px;padding:6px 11px;border:1px solid #d6e0eb;border-radius:8px;background:#f8fafc;color:#53677f;font-size:11px;font-weight:800}
.mode-utility-btn:hover{border-color:#9db8da;background:#eef5ff;color:#235a9d}

.cargo-panel .file-upload-tools{margin:16px 0 0;padding:14px 15px;border:1px solid #d9e4f2;border-radius:13px;background:#f6f9fe}
.cargo-panel .cargo-summary + .file-upload-tools{margin-top:16px}
.file-upload-copy span{word-break:keep-all;overflow-wrap:break-word}

.result-panel.panel{
  min-height:0;
  padding:22px;
  background:#fff;
  border:1px solid #e1e8f0;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(18,44,76,.07);
  overflow:hidden;
}
.result-panel .result-heading{margin:0 0 18px;padding:0}
.result-panel .result-heading h2{font-size:22px}
.result-panel #resultPlaceholder.result-placeholder{
  min-height:270px;
  padding:38px 28px;
  border:1px solid #e4eaf1;
  border-radius:15px;
  background:#f8fafc;
  box-shadow:none;
}
#resultPlaceholder.hidden,#resultPlaceholder[hidden]{display:none}
#resultContent.hidden,#resultContent[hidden]{display:none}
.result-panel .result-content{gap:14px}
.result-panel .result-summary-card,.result-panel .planner-sim-card,.result-panel .item-detail-card{
  box-shadow:none;
  border-color:#e1e8f0;
}
@media(max-width:720px){
  .result-panel.panel{padding:15px;border-radius:15px}
  .result-panel .result-heading{margin-bottom:14px}
  .result-panel .result-heading h2{font-size:19px}
  .result-panel #resultPlaceholder.result-placeholder{min-height:210px;padding:28px 17px}
  .mode-utility-actions{margin-top:11px}
  .mode-utility-btn{flex:1 1 0;justify-content:center}
}

.guide-panel{padding:24px 26px}
.guide-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.guide-heading h2{font-size:22px;line-height:1.25}
.guide-heading .guide-one-line{flex:1;max-width:none;margin:0;text-align:right;color:#5c7089;font-size:13px;line-height:1.5;white-space:nowrap}
.readable-guide-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.readable-guide-steps article{position:relative;display:block;min-height:128px;padding:20px 18px 18px;border:1px solid #d9e4f0;border-radius:16px;background:linear-gradient(180deg,#fff 0%,#f7faff 100%);box-shadow:0 5px 16px rgba(20,45,78,.055)}
.readable-guide-steps b{display:grid;place-items:center;width:34px;height:34px;margin-bottom:15px;border-radius:10px;background:#e8f1ff;color:#2b5cdb;font-size:14px;font-weight:900}
.readable-guide-steps strong{display:block;color:#142b48;font-size:15px;line-height:1.35;font-weight:850;letter-spacing:-.02em}
.readable-guide-steps p{margin:7px 0 0;color:#64768d;font-size:12px;line-height:1.6;word-break:keep-all}
.tool-mode-strip{margin-bottom:16px;padding:0;border:0;background:transparent;box-shadow:none}
.tool-mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tool-mode-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:10px 16px;border:1px solid #d7e2ee;border-radius:14px;background:#fff;color:#4b6079;text-align:center;text-decoration:none;box-shadow:0 5px 15px rgba(16,42,74,.055);transition:.18s ease}
.tool-mode-btn:hover{border-color:#8fb1df;background:#f6f9ff;color:#224f88;transform:translateY(-1px)}
.tool-mode-btn.active{border-color:#193d69;background:#183b66;color:#fff;box-shadow:0 9px 22px rgba(20,55,96,.18)}
.tool-mode-btn span{font-size:14px;font-weight:850;white-space:nowrap}
.tool-mode-btn small{font-size:10px;font-weight:700;opacity:.72;white-space:nowrap}
@media(max-width:900px){
  .guide-heading{display:block}.guide-heading .guide-one-line{margin-top:8px;text-align:left;white-space:normal}
  .readable-guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .guide-panel{padding:18px}.guide-heading h2{font-size:20px}.guide-heading .guide-one-line{font-size:12px;line-height:1.65}
  .readable-guide-steps{grid-template-columns:1fr;gap:9px}
  .readable-guide-steps article{display:grid;grid-template-columns:40px 1fr;gap:11px;min-height:0;padding:15px}
  .readable-guide-steps b{margin:0}.readable-guide-steps p{font-size:11px}
  .tool-mode-buttons{grid-template-columns:1fr;gap:8px}.tool-mode-btn{min-height:48px;justify-content:flex-start;padding:10px 15px}
}

.tool-mode-strip{
  display:flex;align-items:center;width:max-content;max-width:100%;
  margin:0 0 14px;padding:4px;border:1px solid #dbe4ee;border-radius:11px;
  background:#fff;box-shadow:0 5px 16px rgba(18,43,74,.06);overflow-x:auto;
}
.tool-mode-buttons{display:flex;gap:3px;width:auto;min-width:max-content}
.tool-mode-btn{
  min-width:0;min-height:34px;padding:7px 15px;border:0;border-radius:8px;
  background:transparent;box-shadow:none;color:#60738a;font-size:12px;font-weight:850;
  line-height:1;white-space:nowrap;transform:none;
}
.tool-mode-btn:hover{background:#f0f5fb;color:#214d7e;transform:none}
.tool-mode-btn.active{background:#2f75df;color:#fff;box-shadow:0 4px 10px rgba(47,117,223,.22)}
.tool-mode-btn span,.tool-mode-btn small{display:contents}

.simple-calculator-panel{margin-bottom:18px;padding:22px;border:1px solid #dfe7ef;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(18,44,76,.07)}
.simple-calc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.simple-calc-head h2{margin:3px 0 0;color:#122944;font-size:23px;line-height:1.25}
.simple-calc-head p:not(.section-number){max-width:720px;margin:8px 0 0;color:#65768b;font-size:13px;line-height:1.65}
.simple-head-actions{display:flex;gap:8px;flex:0 0 auto}
.simple-head-actions button{min-height:36px;padding:8px 13px;font-size:12px}
.simple-calc-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:16px;align-items:start}
.simple-input-card,.simple-result-card{min-width:0;border:1px solid #dfe7ef;border-radius:15px;background:#fbfcfe;overflow:hidden}
.simple-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e5ebf2;background:#fff}
.simple-card-head strong{color:#17304e;font-size:15px}.simple-card-head span{color:#8290a2;font-size:10px}
.simple-table-head,.simple-row{display:grid;grid-template-columns:minmax(105px,1.3fr) repeat(3,minmax(66px,.8fr)) minmax(58px,.65fr) minmax(78px,.85fr) 32px;gap:7px;align-items:center}
.simple-table-head{padding:10px 13px 6px;color:#75869b;font-size:9px;font-weight:850;text-align:center}
.simple-table-head span:first-child{text-align:left}
.simple-rows{display:grid;gap:8px;padding:7px 13px 13px}
.simple-row{padding:9px;border:1px solid #e0e7ef;border-radius:11px;background:#fff}
.simple-row input{width:100%;min-width:0;height:37px;padding:0 9px;border:1px solid #cfd9e5;border-radius:8px;background:#fff;color:#18304f;font-size:12px;outline:none}
.simple-row input:focus{border-color:#2b5cdb;box-shadow:0 0 0 3px rgba(43,92,219,.09)}
.simple-remove-btn{width:31px;height:31px;border-radius:8px;background:#eef2f7;color:#6b7b8f;font-size:16px}.simple-remove-btn:hover{background:#ffecec;color:#be3443}
.simple-calc-run{width:calc(100% - 26px);margin:0 13px 14px;min-height:43px}
.simple-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 14px 8px}
.simple-summary-grid>div{position:relative;min-height:75px;padding:12px;border:1px solid #e0e8f1;border-radius:12px;background:#fff}
.simple-summary-grid span{display:block;color:#73849a;font-size:10px;font-weight:750}.simple-summary-grid strong{display:inline-block;margin-top:7px;color:#183554;font-size:21px;line-height:1}.simple-summary-grid small{margin-left:5px;color:#8493a5;font-size:10px}
.simple-metric-list{display:grid;gap:7px;padding:6px 14px 10px}
.simple-metric-list>div{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;padding:10px 12px;border:1px solid #e1e8f0;border-radius:10px;background:#fff}
.simple-metric-list span{color:#4f647d;font-size:11px;font-weight:750}.simple-metric-list strong{color:#173758;font-size:13px}.simple-metric-list small{grid-column:1/-1;color:#8694a5;font-size:9px}
.simple-recommend-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}
.simple-recommend-grid>div{padding:12px;border-radius:12px;background:#eef5ff}
.simple-recommend-grid span{display:block;color:#56718f;font-size:10px;font-weight:750}.simple-recommend-grid strong{display:block;margin-top:5px;color:#1b4f8d;font-size:15px;line-height:1.35}.simple-recommend-grid small{display:block;margin-top:5px;color:#74879d;font-size:9px;line-height:1.5}
.simple-formula-note{margin:0;padding:11px 14px;border-top:1px solid #e5ebf2;color:#748499;font-size:9px;line-height:1.6;background:#fff}
body.simple-mode .hero-pills span:nth-child(n+3){display:none}

@media(max-width:900px){
  .simple-calc-grid{grid-template-columns:1fr}.simple-calc-head{display:block}.simple-head-actions{margin-top:13px}
}
@media(max-width:680px){
  .tool-mode-strip{width:100%;margin-bottom:10px}.tool-mode-buttons{width:100%;min-width:0}.tool-mode-btn{flex:1 1 0;padding:7px 8px;font-size:11px}
  .simple-calculator-panel{padding:14px;border-radius:15px}.simple-calc-head h2{font-size:20px}.simple-calc-head p:not(.section-number){font-size:12px}.simple-head-actions button{flex:1 1 0}
  .simple-table-head{display:none}.simple-rows{padding:10px}.simple-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:11px}.simple-row input:first-child{grid-column:1/-1}.simple-remove-btn{grid-column:1/-1;width:100%;height:34px;font-size:12px}.simple-remove-btn::after{content:' 품목 삭제'}
  .simple-row input{height:42px;font-size:16px}.simple-summary-grid{padding:10px 10px 6px}.simple-metric-list{padding:5px 10px 9px}.simple-recommend-grid{grid-template-columns:1fr;padding:0 10px 10px}.simple-calc-run{width:calc(100% - 20px);margin:0 10px 11px}
}

.simple-table-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  padding:0 13px 13px;
}
.simple-table-actions button{
  width:auto;min-width:82px;min-height:32px;height:32px;
  margin:0;padding:0 13px;border-radius:8px;
  font-size:11px;font-weight:850;line-height:1;
}
.simple-table-actions #simpleCalcBtn{background:#2f75df;color:#fff}
.simple-table-actions #simpleResetBtn{background:#fff;color:#5c7088;border:1px solid #d5e0ec}
.simple-head-actions #simpleAddBtn{min-height:32px;height:32px;padding:0 12px;font-size:11px;border-radius:8px}

body.container-planner-mode #optionTitle::before{content:''}
body.container-planner-mode .quote-inline,
body.container-planner-mode #quoteConnect{display:none}
body.container-planner-mode .option-panel{border-color:#dce5ef}
body.container-planner-mode .planner-sim-head{background:#fff}
body.container-planner-mode .selected-bin-badge{background:#2f75df}
body.container-planner-mode .result-summary-card{border-color:#dce5ef}
body.container-planner-mode .planner-viewer .canvas-shell{background:linear-gradient(180deg,#f4f7fb 0%,#edf3f9 100%)}

.container-mode-note{
  display:none;margin:10px 0 0;padding:10px 12px;border:1px solid #dce7f4;border-radius:10px;
  background:#f6f9fd;color:#5d7189;font-size:10px;line-height:1.55;
}
body.container-planner-mode .container-mode-note{display:block}

@media(max-width:680px){
  .simple-table-actions{justify-content:stretch;padding:0 10px 11px}
  .simple-table-actions button{flex:1 1 0;min-width:0;height:34px}
}

.tool-mode-strip{
  width:min(660px,100%);
  max-width:100%;
  margin:0 auto 18px;
  padding:5px;
  border:1px solid #cfdbea;
  border-radius:13px;
  background:#fff;
  box-shadow:0 8px 22px rgba(20,49,82,.09);
  overflow:visible;
}
.tool-mode-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  width:100%;
  min-width:0;
}
.tool-mode-btn{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:0 24px;
  border-radius:9px;
  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
}
.tool-mode-btn.active{
  background:#2f75df;
  color:#fff;
  box-shadow:0 5px 13px rgba(47,117,223,.25);
}
@media(max-width:680px){
  .tool-mode-strip{width:100%;margin-bottom:14px;padding:4px}
  .tool-mode-btn{min-height:40px;padding:0 8px;font-size:12px}
}
@media(max-width:390px){
  .tool-mode-btn{font-size:11px;letter-spacing:-.03em}
}

}