:root {
  --navy: #31465f;
  --navy-soft: #526b86;
  --blue: #0a7cff;
  --blue-soft: #4aa3ff;
  --blue-pale: #eaf4ff;
  --green: #20a10e;
  --orange: #6fa9e8;
  --red: #f20b34;
  --amber: #ffc20a;
  --ink: #1d1d1f;
  --muted: #111827;
  --line: #d8e0ea;
  --bg: #f5f7fb;
  --panel: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button { cursor: pointer; }

.sidebar { position: fixed; inset: 72px auto 0 0; width: 236px; background: #fff; color: var(--ink); padding: 18px 15px 15px; display: flex; flex-direction: column; z-index: 8; border-right: 1px solid #e5eaf1; box-shadow: 5px 0 24px #42638a08; }
.brand { min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 9px; color: var(--ink); letter-spacing: .4px; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-size: 18px; }
.brand small { color: #111827; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: linear-gradient(135deg,var(--blue),var(--blue-soft)); border-radius: 12px; box-shadow: 0 8px 18px #007aff2c; font-weight: 800; }
.tiered-nav { margin-top: 0; display: grid; gap: 5px; overflow-y: auto; }
.tiered-nav details { border-radius: 10px; }
.tiered-nav summary { list-style: none; padding: 11px 10px; display: grid; grid-template-columns: 32px 1fr 14px; gap: 9px; align-items: center; border-radius: 11px; color: #3a3a3c; font-size: 15px; font-weight: 700; cursor: pointer; }
.tiered-nav summary::-webkit-details-marker { display: none; }
.tiered-nav summary:hover, .tiered-nav details[open] > summary { background: #eef7ff; color: var(--blue); }
.tiered-nav summary i { font-style: normal; color: #111827; transition: .2s; }
.tiered-nav details[open] summary i { transform: rotate(180deg); }
.menu-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; }
.menu-icon.mint,.menu-icon.peach,.menu-icon.sky,.menu-icon.lilac,.menu-icon.rose,.menu-icon.sand,.menu-icon.neutral { background:#eaf5ff;color:var(--blue); }
.submenu { margin: 3px 0 6px 45px; display: grid; gap: 2px; padding-left: 10px; border-left: 1px solid #dce7f2; }
.submenu button { border: 0; background: transparent; color: #111827; padding: 8px 10px; text-align: left; border-radius: 8px; font-size: 14px; }
.submenu button:hover { color: var(--blue); background: #f2f8ff; }
.submenu button.active { color: var(--blue); background: #eaf5ff; font-weight: 800; }
.sidebar-profile { margin-top: auto; border-top: 1px solid #e5ebe8; padding: 14px 7px 2px; display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; }
.sidebar-profile > span { width: 32px; height: 32px; display:grid;place-items:center;border-radius:10px;background:#f1e8dd;color:#956c4d;font-size:11px;font-weight:800; }
.sidebar-profile div { display:grid;gap:2px; }.sidebar-profile strong{font-size:11px}.sidebar-profile small{font-size:9px;color:#111827}.sidebar-profile i{font-style:normal;color:#111827;font-size:11px}

main { margin-left: 236px; min-height: 100vh; padding: 96px 30px 38px; }
.app-top-strip { position: fixed; top:0; left:0; right:0; height:72px; z-index:12; background:#fff; border-bottom:1px solid #e4e9f2; box-shadow:0 3px 18px #4b63a00d; display:grid; grid-template-columns:236px 1fr auto; align-items:center; }
.top-brand { height:72px; display:flex; align-items:center; gap:11px; padding:0 24px; border-right:1px solid #e5eaf1; color:var(--ink); }
.top-brand > span:last-child { display:grid; gap:1px; }
.top-brand strong { font-size:18px; letter-spacing:.4px; }
.top-brand small { color:#111827; font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; }
.top-strip-title { min-width:0; }
.top-strip-title span { color:#6b7280; font-size:13px; }
.top-strip-title strong { font-size:15px; }
.top-strip-actions { display:flex; align-items:center; height:72px; }
.db-status-chip { height:72px; min-width:148px; border-left:1px solid #eef1f5; display:flex; align-items:center; gap:10px; padding:0 16px; background:#fff; }
.db-status-chip > span { width:10px; height:10px; border-radius:50%; background:#9ca3af; box-shadow:0 0 0 4px #9ca3af22; }
.db-status-chip strong,.db-status-chip small { display:block; }
.db-status-chip strong { font-size:12px; color:#1d1d1f; }
.db-status-chip small { margin-top:2px; font-size:11px; color:#111827; white-space:nowrap; }
.db-status-chip.connected > span { background:var(--green); box-shadow:0 0 0 4px #20a10e22; }
.db-status-chip.saving > span { background:var(--amber); box-shadow:0 0 0 4px #ffc20a33; }
.db-status-chip.offline > span { background:#f20b34; box-shadow:0 0 0 4px #f20b3422; }
.top-icon-button { width:56px; height:72px; border:0; border-left:1px solid #eef1f5; background:#fff; color:#111827; font-size:18px; display:grid; place-items:center; }
.top-icon-button:hover { background:#f7fbff; transform:none; }
.top-user-chip { height:72px; min-width:170px; border:0; border-left:1px solid #eef1f5; display:flex; align-items:center; gap:10px; padding:0 18px; background:#fff; text-align:left; }
.top-user-chip > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-soft)); color:#fff; font-size:12px; font-weight:850; box-shadow:0 5px 14px #0a7cff26; }
.top-user-chip strong,.top-user-chip small { display:block; }
.top-user-chip strong { font-size:13px; color:#1d1d1f; }
.top-user-chip small { margin-top:2px; font-size:11px; color:#6b7280; }
.top-user-chip:hover { background:#f7fbff; transform:none; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.eyebrow { color: var(--muted); font-size: 14px; margin-bottom: 5px; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.5px; }
h2 { margin: 0; font-size: 20px; }
p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.header-actions { display: flex; gap: 9px; }
.account-chip { display:flex; align-items:center; gap:10px; min-width: 190px; padding:9px 12px; border:1px solid #dce6f2; border-radius:13px; background:#fff; box-shadow:0 4px 16px #16314b08; }
.account-chip > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--blue); color:white; font-weight:800; font-size:13px; }
.account-chip strong,.account-chip small { display:block; }
.account-chip strong { font-size:13px; color:#1d1d1f; }
.account-chip small { margin-top:2px; color:#1d1d1f; font-size:11px; }
.button { height: 36px; border-radius: 8px; padding: 0 14px; border: 1px solid var(--line); background: white; color: var(--ink); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.button.primary { color: white; border-color: var(--blue); background: var(--blue); font-weight: 700; }
.button.small { height: 32px; padding: 0 12px; font-size: 13px; }
.button:hover { transform: translateY(-1px); }

.container-strip { margin-top: 18px; background: #e9f1fb; border: 1px solid #d2e1f4; border-radius: 9px; padding: 10px 14px; display: flex; justify-content: space-between; color: #3f5872; font-size: 12px; }
.container-strip > div { display: flex; gap: 16px; align-items: center; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #24a46d22; }
.scheme-id { color: #6d8093; }

.shipment-hero { margin-top:0; display:grid; grid-template-columns: minmax(320px,.85fr) minmax(760px,2.15fr); gap:14px; align-items:stretch; }
.shipment-record,.shipment-fields { background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px 18px; box-shadow:0 5px 18px #16314b0a; }
.shipment-record > div { display:flex; align-items:center; gap:10px; }
.shipment-record strong { font-size:18px; }
.record-no-input { width:220px; border:0; outline:0; color:#111827; background:transparent; font-size:18px; font-weight:850; letter-spacing:.1px; }
.record-no-input:focus { background:#f4f8ff; box-shadow:0 0 0 3px #0a7cff12; border-radius:8px; padding:5px 7px; margin:-5px -7px; }
.shipment-record em { font-style:normal; color:var(--blue); background:#eaf4ff; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:800; }
.shipment-record p { color:#111827; font-size:13px; margin-top:10px; }
.shipment-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:end; }
.shipment-actions { display:flex; align-items:end; gap:9px; padding-bottom:0; }
.shipment-actions #save-plan { height:36px; white-space:nowrap; }
.shipment-fields label,.shipment-form label { display:grid; gap:6px; color:#111827; font-size:12px; font-weight:750; }
.shipment-fields input,.shipment-fields select,.shipment-form input { width:100%; height:36px; border:1px solid #d6e0eb; border-radius:9px; padding:0 10px; color:#111827; background:#fff; outline:0; }
.shipment-section-cards { margin-top:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; box-shadow:0 5px 18px #16314b0a; }
.shipment-card { min-height:58px; border:0; border-right:1px solid #e8edf3; background:#fff; border-radius:0; padding:12px 18px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; cursor:pointer; box-shadow:none; }
.shipment-card:last-child { border-right:0; }
.shipment-card.active { background:#f2f8ff; box-shadow:inset 0 -3px 0 var(--blue); }
.shipment-card strong,.shipment-card small { display:block; }
.shipment-card strong { color:#111827; font-size:15px; font-weight:850; }
.shipment-card small { color:#52606f; font-size:12px; margin-top:3px; line-height:1.25; }
.shipment-card-icon { display:none; }
.shipment-card-icon.blue { background:linear-gradient(135deg,#65c7ff,#0a7cff); }
.shipment-card-icon.green { background:linear-gradient(135deg,#7bdd8a,#20a10e); }
.shipment-card-icon.amber { background:linear-gradient(135deg,#ffd966,#ffae1a); }
.shipment-card-icon.pink { background:linear-gradient(135deg,#ff8aa4,#f20b55); }
.shipment-step-title { margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; box-shadow:0 5px 18px #16314b0a; }
.shipment-step-title strong { display:block; color:#111827; font-size:17px; font-weight:850; }
.shipment-step-title span { display:block; color:#52606f; font-size:13px; margin-top:4px; }
#loading-page.detail-mode #shipment-mode-note:empty { display:none; }
.shipment-tab-content { margin-top:14px; }
#loading-page.detail-mode .container-strip { display:none; }
#loading-page.planning-mode .shipment-section-cards,
#loading-page.planning-mode .shipment-step-title,
#loading-page.planning-mode [data-shipment-content="shipping"],
#loading-page.planning-mode [data-shipment-content="customs"],
#loading-page.planning-mode [data-shipment-content="files"],
#loading-page.planning-mode [data-shipment-content="exportCustoms"],
#loading-page.planning-mode [data-shipment-content="importCustoms"],
#loading-page.planning-mode #back-shipment-list,
#loading-page.planning-mode #production-order { display:none; }
#loading-page.planning-mode .shipment-hero { grid-template-columns:minmax(320px,.85fr) minmax(760px,2.15fr); }
.shipment-form { padding:16px 18px 18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.file-list { padding:12px 18px 18px; display:grid; gap:9px; }
.file-list div { border:1px solid #e3eaf3; border-radius:12px; padding:11px 12px; display:flex; justify-content:space-between; align-items:center; background:#fbfdff; }
.file-list strong { font-size:13px; }
.file-list span { color:#b78300; background:#fff8dc; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:750; }
.customs-workflow { padding:0 18px 16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.customs-workflow div { border:1px solid #e3eaf3; background:#fbfdff; border-radius:12px; padding:13px 14px; display:grid; gap:5px; }
.customs-workflow strong { color:#111827; font-size:14px; }
.customs-workflow span { color:#111827; font-size:12px; line-height:1.45; }
.customs-table { padding:0 18px 18px; }
.timeline-line { display:flex; gap:8px; align-items:center; line-height:1.45; }
.timeline-line strong { min-width:30px; color:#111827; font-size:12px; }
.timeline-line span { color:#111827; font-size:12px; }
.hover-tip { position:fixed; z-index:80; max-width:420px; min-width:260px; padding:10px 12px; border-radius:6px; background:#2b2b2bcc; color:#fff; box-shadow:0 10px 28px #0b172544; font-size:12px; line-height:1.45; pointer-events:none; }
.hover-tip.hidden { display:none; }
.hover-tip div { display:grid; grid-template-columns:74px minmax(0,1fr); gap:10px; padding:3px 0; align-items:start; }
.hover-tip strong { color:#fff; font-size:12px; font-weight:800; }
.hover-tip span { color:#fff; font-size:12px; text-align:right; word-break:break-word; }
.hover-tip .muted-text { color:#d7d7d7; }
.hover-cargo-lines { display:grid !important; grid-template-columns:1fr !important; gap:4px !important; padding:0 !important; }
.hover-cargo-lines p { margin:0; display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:12px; align-items:center; }
.hover-cargo-lines p strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hover-cargo-lines p span { text-align:right; white-space:nowrap; color:#fff; }
.shipment-list-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:20px 22px; box-shadow:0 5px 18px #16314b0a; }
.shipment-list-hero h1 { color:#111827; font-size:27px; line-height:1.15; }
.shipment-list-hero p { color:#111827; font-size:14px; margin-top:8px; }
.shipment-list-stats { margin-top:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.shipment-list-stat { background:#fff; border:1px solid #e1e9f4; border-radius:15px; padding:17px 20px; box-shadow:0 6px 20px #405f5710; }
.shipment-list-stat span { display:block; color:#111827; font-size:13px; font-weight:700; }
.shipment-list-stat strong { display:block; color:var(--blue); font-size:28px; line-height:1; margin-top:9px; }
.shipment-list-panel { margin-top:14px; }
.shipment-list-panel .master-table th:nth-child(1), .shipment-list-panel .master-table td:nth-child(1) { min-width:170px; }
.shipment-list-panel .master-table th:nth-child(2), .shipment-list-panel .master-table td:nth-child(2) { min-width:105px; }
.shipment-list-panel .master-table th:nth-child(3), .shipment-list-panel .master-table td:nth-child(3) { min-width:145px; }
.shipment-list-panel .master-table th:nth-child(4), .shipment-list-panel .master-table td:nth-child(4) { min-width:150px; }
.shipment-list-panel .master-table th:nth-child(5), .shipment-list-panel .master-table td:nth-child(5) { min-width:170px; }
.shipment-list-panel .master-table th:nth-child(6), .shipment-list-panel .master-table td:nth-child(6) { min-width:145px; }
.shipment-list-panel .master-table th:nth-child(7), .shipment-list-panel .master-table td:nth-child(7) { min-width:95px; }
.shipment-list-panel .master-table th:nth-child(8), .shipment-list-panel .master-table td:nth-child(8) { min-width:150px; }
.shipment-list-panel [data-shipment-tip] { cursor:default; }
.shipment-list-panel [data-shipment-tip]:hover { background:#f7fbff; }
.shipment-status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; color:#111827; background:#eef5ff; }
.shipment-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.shipment-status.ready { background:#fff8dc; color:#9c7000; }
.shipment-status.ready::before { background:#f0ad00; }
.shipment-status.confirmed { background:#fff8dc; color:#9c7000; }
.shipment-status.confirmed::before { background:#f0ad00; }
.shipment-status.done { background:#edf9f3; color:#18754d; }
.shipment-status.done::before { background:var(--green); }
.cargo-summary { display:flex; flex-wrap:wrap; gap:6px; min-width:240px; max-width:390px; }
.cargo-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; background:#eef6ff; color:#1d1d1f; padding:5px 8px; font-size:12px; font-weight:750; }
.cargo-chip em { font-style:normal; color:var(--blue); font-size:11px; font-weight:850; }
.cargo-more { display:inline-flex; align-items:center; border-radius:999px; background:#f3f5f8; color:#4d5e70; padding:5px 8px; font-size:12px; font-weight:800; }
.file-progress { display:inline-flex; border-radius:999px; padding:6px 10px; background:#f3f5f8; color:#52606f; font-size:12px; font-weight:800; }
.file-progress.ready { background:#fff7e8; color:#94600c; }
.file-progress.done { background:#edf9f3; color:#18754d; }
.muted-text { color:#697a8c; }
.shipment-row-actions { display:flex; gap:8px; align-items:center; }
.shipment-row-actions button { height:30px; border:1px solid var(--blue); border-radius:8px; color:var(--blue); background:#fff; padding:0 10px; font-weight:750; cursor:pointer; }
.template-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:18px 20px; box-shadow:0 5px 18px #16314b0a; }
.template-hero h1 { font-size:26px; }
.template-hero p { color:#111827; font-size:14px; }
.template-grid { margin-top:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.template-card { padding:18px; display:grid; gap:12px; }
.template-card div { display:grid; gap:6px; }
.template-card strong { font-size:16px; }
.template-card span { color:var(--blue); background:#eaf4ff; border-radius:999px; padding:5px 9px; width:max-content; font-size:12px; font-weight:800; }
.template-card p { color:#111827; font-size:13px; }
.template-card em { font-style:normal; color:#b78300; background:#fff8dc; border-radius:999px; padding:6px 10px; width:max-content; font-size:12px; font-weight:800; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 15px; min-width: 0; box-shadow: 0 3px 12px #16314b0a; }
.metric-top { display: flex; justify-content: space-between; align-items: flex-start; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { font-size: 24px; font-weight: 800; margin: 6px 0 9px; letter-spacing: -.5px; }
.metric-value small { font-size: 12px; color: var(--muted); font-weight: 500; }
.metric-badge { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-pale); color: var(--blue); }
.progress { height: 6px; border-radius: 8px; background: #e9eef4; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.metric-foot { margin-top: 8px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.metric.warning .metric-badge { color: var(--red); background: #fff0f1; }
.metric.warning .progress > i { background: var(--red); }

.workspace-grid { display: grid; grid-template-columns: minmax(640px, 1fr) minmax(520px, 1fr); gap: 14px; margin-top: 14px; }
.bottom-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 14px; margin-top: 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 3px 12px #16314b0a; overflow: hidden; }
.panel-header { padding: 15px 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e8edf3; }
.panel-header.compact { border: 0; padding-bottom: 8px; }
.pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; background: #eef3f8; color: #60758a; font-size: 11px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: #111827; font-weight: 700; text-align: left; padding: 10px 9px; background: #f8fafc; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 10px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.products-panel th:nth-child(1), .products-panel td:nth-child(1) { width: 225px; }
.products-panel th:nth-child(2), .products-panel td:nth-child(2) { width: 170px; }
.products-panel th:nth-child(3), .products-panel td:nth-child(3) { width: 125px; }
.products-panel th:nth-child(4), .products-panel td:nth-child(4) { width: 105px; }
.products-panel th:nth-child(5), .products-panel td:nth-child(5) { width: 100px; }
.product-cell { display: flex; gap: 9px; min-width: 195px; align-items: center; }
.color-dot { width: 9px; height: 32px; border-radius: 8px; flex: 0 0 auto; }
.product-cell strong { display: block; font-size: 12px; }
.product-cell small { display: block; color: var(--muted); margin-top: 3px; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.package-type-mini { display: inline-flex; margin-left: 5px; padding: 1px 6px; border-radius: 99px; background: #eaf4ff; color: var(--blue); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.count-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.count-control button { border: 0; width: 28px; height: 30px; background: #f5f8fb; color: #53708c; }
.count-control input { width: 48px; height: 30px; border: 0; text-align: center; outline: 0; font-weight: 700; }
.loading-qty { white-space: nowrap; }
.loading-qty strong, .loading-qty small { display: inline; }
.loading-qty small { margin-left: 4px; color: #111827; }
.remove-product { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #9a6570; background: #fff1f3; }
.special-cargo { margin: 12px 15px; padding: 11px 13px; border-radius: 9px; background: #f6f2ff; display: flex; justify-content: space-between; align-items: center; }
.special-cargo > div { display: flex; align-items: center; gap: 10px; }
.special-cargo > div:last-child { display: grid; text-align: right; gap: 2px; }
.special-cargo small { display: block; color: var(--muted); margin-top: 3px; font-size: 11px; }
.special-icon { width: 28px; height: 28px; border-radius: 8px; background: #e9ddff; color: #754bc2; display: grid; place-items: center; }
.height-note { margin: 0 15px 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; background: #edf9f3; color: #18754d; }
.lock-note { margin: 0 15px 12px; padding: 10px 12px; border-radius: 9px; background:#fff7e8; color:#8a5c05; font-size:13px; font-weight:700; }
.shipment-locked .count-control,
.shipment-locked .remove-product { opacity:.65; }
.button:disabled,
.count-control button:disabled,
.count-control input:disabled,
.remove-product:disabled { cursor:not-allowed; opacity:.6; }

/* 产品资料 */
.page-intro { font-size: 13px; margin-top: 6px; }
.product-topbar { align-items: flex-end; }
.product-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 0; }
.product-stat { min-height: 112px; background: white; border: 1px solid #e5eaf1; border-radius: 14px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; box-shadow: 0 6px 20px #405f5710; text-align:left; cursor:pointer; }
.product-stat.active { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue), 0 8px 24px #0a7cff14; }
.product-stat .stat-copy { min-width: 0; display: block; flex: 1 1 auto; }
.product-stat .stat-icon { width: 58px; height: 58px; border-radius: 50%; display:grid;place-items:center; flex: 0 0 58px; box-shadow: 0 10px 22px #16314b18; }
.product-stat .stat-icon svg { width: 28px; height: 28px; fill:none !important; stroke:#fff !important; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.product-stat .stat-icon svg * { fill:none !important; stroke:#fff !important; }
.product-stat small { display:block; color: #111827; font-size: 14px; font-weight: 650; white-space: nowrap; }
.product-stat strong { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:28px;margin-top:6px;letter-spacing:-.7px;line-height:1; }
.product-stat em{font-style:normal;font-size:11px;color:#111827;background:#f2f5f8;border-radius:99px;padding:4px 8px;margin-left:8px;vertical-align:5px;font-weight:750;letter-spacing:0}
.product-stat.stat-green strong{color:var(--green)}
.product-stat.stat-red strong{color:var(--red)}
.product-stat.stat-amber strong{color:#d39a00}
.product-stat.stat-blue strong{color:var(--blue)}
.product-stat.stat-green .stat-icon{background:linear-gradient(135deg,#7bdd8a,#20a10e)}
.product-stat.stat-red .stat-icon{background:linear-gradient(135deg,#ff8aa4,#f20b55)}
.product-stat.stat-amber .stat-icon{background:linear-gradient(135deg,#ffd966,#ffae1a)}
.product-stat.stat-blue .stat-icon{background:linear-gradient(135deg,#65c7ff,#0a7cff)}
.product-master-grid { display: block; margin-top: 14px; }
.master-list-panel { border-radius: 14px; }
.product-detail-panel { display: none; }
.product-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; padding: 14px 18px; border-bottom: 1px solid #e8edf3; background: linear-gradient(180deg,#fff,#fbfdff); }
.product-flow button { min-height: 68px; border: 1px solid #e4ebf4; background: #fff; border-radius: 12px; padding: 11px 12px; text-align: left; color: #3a3a3c; box-shadow: 0 3px 12px #1b35500a; }
.product-flow button strong,.product-flow button small { display:block; }
.product-flow button strong { font-size: 14px; font-weight: 750; }
.product-flow button small { margin-top: 6px; color: #2f343a; font-size: 11px; line-height: 1.35; }
.product-flow button.active { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue), 0 4px 14px #0a7cff14; }
.product-flow button.active strong { color: var(--blue); }
.master-toolbar { padding: 15px 18px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #e8edf3; flex-wrap: wrap; background:#fff; }
.master-toolbar .search-box { margin-bottom: 0; }
.master-search { width: min(360px,42vw); height: 38px; background:#fff; border:1px solid #cfd8e6; border-radius: 8px; }
.master-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #0a7cff12; }
.master-search input { height: 100%; padding: 0; }
.search-button { min-width: 78px; height: 38px; }
.toolbar-select { height:38px; display:inline-flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #cfd8e6; border-radius:8px; background:#fff; color:#111827; font-size:13px; font-weight:700; margin-left:auto; }
.toolbar-select select { height:32px; min-width:116px; border:0; outline:0; color:#111827; background:#fff; font-weight:700; }
.table-actions { display: inline-flex; gap: 0; margin-left: 6px; height: 38px; align-items: stretch; }
.table-actions .button { height: 38px; padding: 0 15px; color: var(--blue); border-color: var(--blue); background: white; border-radius: 0; margin-left: -1px; }
.table-actions .button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.table-actions .button:last-child { border-radius: 0 7px 7px 0; }
.table-actions .button:hover { background:#f2f8ff; transform:none; position:relative; z-index:1; }
.table-actions .danger-action { color: var(--blue); border-color: var(--blue); }
.table-actions .danger-action:hover { background:#f2f8ff; }
.hidden-action { opacity:.45; pointer-events:none; }
.filter-chips { display:flex;gap:6px;padding:4px;background:#f2f5f8;border-radius:12px; }
.filter-chips button { border:0;background:transparent;color:#6e6e73;padding:8px 13px;border-radius:9px;font-size:14px; }
.filter-chips button.selected { background:white;color:var(--blue);font-weight:800;box-shadow:0 2px 8px #4c665f12; }
.master-table-wrap { min-height: 430px; overflow:auto; }
.master-table th { padding: 12px 14px; background:#f7f8fa;color:#1d1d1f;font-size:13px;letter-spacing:.1px;font-weight:750; }
.master-table td { padding: 12px 14px; font-size: 13px; color: #1d1d1f; }
.master-table th:nth-child(3), .master-table td:nth-child(3) { min-width: 260px; }
.master-table th:nth-child(4), .master-table td:nth-child(4) { min-width: 150px; }
.master-table th:nth-child(5), .master-table td:nth-child(5) { min-width: 190px; }
.master-table tbody tr { cursor:pointer;transition:.15s; }
.master-table tbody tr:hover { background:#f7fbff; }.master-table tbody tr.selected { background:#fff; box-shadow:none; }
.empty-table { padding:34px 20px; text-align:center; color:#1d1d1f; font-size:14px; }
.sku-cell { display:flex;align-items:center;gap:12px;min-width:210px; }.product-thumb { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:13px;color:white;background:linear-gradient(135deg,var(--blue),var(--blue-soft));flex:0 0 auto;box-shadow:inset 0 -8px 14px #0000000e; }
.sku-cell strong,.sku-cell small{display:block}.sku-cell small{color:#2f343a;font-size:12px;margin-top:3px}.base-name strong{display:block;font-size:14px}.base-name small{display:block;color:#2f343a;font-size:12px;margin-top:3px}
.category-tag,.status-tag,.package-tag { display:inline-flex;align-items:center;border-radius:99px;padding:5px 9px;font-size:12px;white-space:nowrap; }.category-tag{background:#f2f5f8;color:#1d1d1f}.status-tag{background:#eaf8e8;color:var(--green)}.package-tag{background:#eaf4ff;color:var(--blue);margin-right:4px;margin-bottom:3px}.status-dot-mini{width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px}
.muted-text { color:#1d1d1f; }
.customs-tag { display:inline-flex;align-items:center;border-radius:99px;padding:5px 9px;font-size:12px;white-space:nowrap; }
.customs-tag.ready { background:#eaf8e8;color:var(--green); }
.customs-tag.missing { background:#fff8dc;color:#b78300; }
.row-arrow { width:30px;height:30px;border:0;border-radius:9px;background:#f1f5f9;color:#6e6e73; font-size: 20px; }
.table-footer { padding:14px 18px;display:flex;justify-content:space-between;color:#2f343a;font-size:13px;border-top:1px solid #e8edf3; }
.product-detail-panel { position:sticky;top:20px; }
.detail-hero { padding:22px;background:linear-gradient(135deg,#eaf5ff,#fbfdff);border-bottom:1px solid #dce8f5; }
.detail-head { display:flex;gap:14px;align-items:center; }.detail-head .product-thumb{width:54px;height:54px;border-radius:16px;font-size:15px}.detail-head h2{font-size:22px}.detail-head p{font-size:14px}.detail-code{margin-top:16px;display:flex;justify-content:space-between;align-items:center;padding:11px 13px;background:#ffffffbf;border:1px solid #dce8f5;border-radius:12px;font-size:14px}.detail-code code{font-size:15px;color:var(--blue);font-weight:800}
.detail-section { padding:18px 20px;border-bottom:1px solid #e8edf3; }.detail-section:last-child{border:0}.detail-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.detail-section-title strong{font-size:17px}.detail-section-title button{border:0;background:transparent;color:var(--blue);font-size:14px;font-weight:700}
.package-flow { display:grid;gap:10px; }.package-card{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;border:1px solid #dfe8f2;border-radius:13px;padding:12px 13px;background:#fff}.package-card.pending{border-style:dashed;background:#fafcff}.package-type{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eaf5ff;color:var(--blue);font-size:14px;font-weight:800}.package-card strong,.package-card small{display:block}.package-card strong{font-size:15px}.package-card small{font-size:12px;color:#8e8e93;margin-top:4px}.package-card > span:last-child{font-size:14px;color:#4f6f91;text-align:right;font-weight:700}.package-link{height:10px;border-left:1px dashed #c4d3e2;margin:-10px 0 -10px 33px}
.use-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}.use-tags i{font-style:normal;font-size:11px;color:var(--blue);background:#eaf5ff;padding:3px 7px;border-radius:99px}
.unit-policy{display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-policy>div{padding:13px 12px;border-radius:13px;background:#f4f8fc}.unit-policy small,.unit-policy strong{display:block}.unit-policy small{font-size:13px;color:#6e6e73}.unit-policy strong{font-size:17px;color:#1d1d1f;margin-top:5px}.unit-policy>span{display:none}.conversion-example{margin-top:12px;padding:12px 13px;border-radius:12px;background:#eaf5ff;color:#235f9e;font-size:14px;line-height:1.65}
.spec-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.spec-item{padding:12px 13px;background:#f7f9fb;border-radius:11px}.spec-item small,.spec-item strong{display:block}.spec-item small{color:#6e6e73;font-size:13px}.spec-item strong{font-size:15px;margin-top:4px}.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px}.detail-actions .button{padding:11px;font-size:14px}

.viewer-header { padding-bottom: 11px; }
.view-controls { display: flex; padding: 3px; background: #edf2f7; border-radius: 8px; }
.view-controls button { border: 0; padding: 6px 10px; background: transparent; border-radius: 6px; color: #64778b; font-size: 11px; }
.view-controls button.selected { background: white; color: var(--blue); font-weight: 700; box-shadow: 0 1px 4px #1c355522; }
.canvas-shell { height: 443px; position: relative; background: radial-gradient(circle at 52% 35%, #ffffff, #f0f4f8); }
#container-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
#container-canvas:active { cursor: grabbing; }
.door-label { position: absolute; right: 14px; bottom: 12px; border-radius: 99px; background: #172536d9; color: white; padding: 6px 10px; font-size: 11px; pointer-events: none; }
.door-label:empty { display: none; }
.tooltip { position: absolute; pointer-events: none; padding: 8px 10px; background: #14263cef; color: white; border-radius: 7px; font-size: 11px; line-height: 1.5; box-shadow: 0 5px 15px #10203044; }
.hidden { display: none; }
.legend { min-height: 42px; padding: 10px 14px; border-top: 1px solid #e8edf3; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #53677c; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }

.lane-ruler { margin: 3px 18px 5px 62px; display: flex; justify-content: space-between; color: #8a98a8; font-size: 10px; }
.lane-layout { padding: 3px 18px 18px; display: grid; gap: 8px; }
.floor-map { position: relative; height: 184px; border: 1px solid #cfd9e4; border-radius: 10px; overflow: hidden; background:
  linear-gradient(90deg, rgba(151,166,184,.16) 1px, transparent 1px) 0 0 / 8.47% 100%,
  linear-gradient(0deg, rgba(151,166,184,.16) 1px, transparent 1px) 0 0 / 100% 20%,
  #f7f9fb; }
.floor-map::before { content: "柜位"; position: absolute; left: 10px; top: 8px; color: #6d7f91; font-size: 11px; z-index: 1; }
.floor-map::after { content: "柜门"; position: absolute; right: 10px; bottom: 8px; color: #6d7f91; font-size: 11px; z-index: 1; }
.floor-pallet { position: absolute; min-width: 24px; min-height: 24px; border: 1px solid #fff9; box-shadow: inset 0 0 0 1px #17314b33; display: grid; place-items: center; color: #172536; font-size: 11px; font-weight: 800; overflow: hidden; }
.lane { display: grid; grid-template-columns: 36px 1fr 62px; align-items: center; gap: 8px; }
.lane > strong { font-size: 11px; color: #60758a; }
.lane-track { height: 42px; border: 1px solid #cfd9e4; background: #f7f9fb; display: flex; overflow: hidden; border-radius: 6px; }
.lane-pallet { height: 100%; min-width: 24px; border-right: 2px solid #fff9; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #172536; }
.lane-length { font-size: 11px; text-align: right; color: #64778b; }

.warning-panel #warnings { padding: 3px 17px 15px; display: grid; gap: 8px; }
.warning-item { padding: 10px 11px; border-radius: 8px; display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; font-size: 12px; }
.warning-item strong { display: block; margin-bottom: 2px; }
.warning-item small { color: inherit; opacity: .78; }
.warning-item.danger { background: #fff0f1; color: #9e2732; }
.warning-item.ok { background: #edf9f3; color: #16734b; }
.warning-item.caution { background: #fff7e8; color: #94600c; }

.toast { position: fixed; right: 24px; bottom: 24px; transform: translateY(30px); opacity: 0; transition: .25s; background: #15283e; color: white; padding: 12px 16px; border-radius: 9px; box-shadow: 0 10px 30px #0e1d3044; font-size: 13px; z-index: 20; }
.toast.show { transform: translateY(0); opacity: 1; }
.account-modal-card { width:min(620px, calc(100vw - 36px)); }
.account-role-list { padding:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.account-role-list button { border:1px solid #dbe5f1; border-radius:14px; background:#fff; padding:16px 14px; display:grid; gap:8px; justify-items:start; text-align:left; color:#111827; }
.account-role-list button:hover,.account-role-list button.active { border-color:var(--blue); background:#f2f8ff; }
.account-role-list span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-soft)); font-weight:850; }
.account-role-list strong { font-size:15px; }
.account-role-list small { color:#111827; line-height:1.45; }
body[data-role="viewer"] .write-disabled { opacity:.48; cursor:not-allowed; }
.login-card { width:min(430px, calc(100vw - 36px)); padding:24px; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.login-brand strong,.login-brand small { display:block; }
.login-brand strong { font-size:21px; color:#111827; }
.login-brand small { color:#52606f; margin-top:3px; }
.login-form { display:grid; gap:13px; }
.login-form label { display:grid; gap:6px; color:#111827; font-size:13px; font-weight:750; }
.login-form input { height:40px; border:1px solid #d6e0eb; border-radius:9px; padding:0 11px; color:#111827; outline:0; }
.login-error { min-height:20px; margin:0; color:#f20b34; font-size:13px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 45; background: #0d1e3128; display: flex; justify-content: flex-end; backdrop-filter: blur(2px); }
.drawer-backdrop.hidden { display:none; }
.drawer-card { width: min(760px, calc(100vw - 260px)); min-width: 620px; height: 100%; background: #fff; box-shadow: -18px 0 50px #1020332a; display:flex; flex-direction:column; }
.drawer-header { padding: 22px 24px 16px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #e8edf3; }
.drawer-body { padding: 18px 24px 24px; overflow-y:auto; }
.drawer-sku { padding: 14px 16px; border:1px solid #dfe8f3; border-radius:14px; background:linear-gradient(135deg,#f8fbff,#fff); display:grid; gap:5px; margin-bottom:14px; }
.drawer-sku span { color:var(--blue); font-size:13px; font-weight:800; }
.drawer-sku strong { font-size:18px; color:#1d1d1f; }
.drawer-grid { display:grid; gap:12px; }
.drawer-section { border:1px solid #e3eaf3; border-radius:14px; padding:15px 16px; background:#fff; }
.drawer-section h3 { margin:0 0 12px; font-size:15px; scroll-margin-top: 18px; }
.drawer-section dl { margin:0; display:grid; grid-template-columns:92px 1fr; gap:9px 12px; }
.drawer-section dt { color:#1d1d1f; font-size:12px; font-weight:650; }
.drawer-section dd { margin:0; color:#1d1d1f; font-size:13px; font-weight:650; }
.drawer-packages { display:flex; flex-wrap:wrap; gap:8px; }
.drawer-packages span { border:1px solid #dce9f8; background:#f5fbff; border-radius:999px; padding:7px 10px; color:#346d9f; font-size:12px; }
.drawer-packages b { color:var(--blue); margin-right:6px; }
.drawer-actions { margin-top:16px; display:flex; gap:10px; }
.coming-soon { padding:12px 13px; border-radius:10px; background:#f5f9ff; color:#1d1d1f; font-size:13px; line-height:1.55; }
.drawer-hint { margin: -4px 0 12px; color:#1d1d1f; font-size:12px; }
.package-sku-table,.package-edit-table { border:1px solid #e3eaf3; border-radius:12px; overflow:auto; }
.package-sku-head,.package-sku-row { display:grid; grid-template-columns:1.2fr .55fr .9fr .9fr 1fr .9fr .65fr; gap:8px; align-items:center; min-width: 860px; }
.package-sku-head { background:#f7f9fc; color:#1d1d1f; font-size:12px; font-weight:800; padding:9px 10px; border-bottom:1px solid #e3eaf3; }
.package-sku-row { padding:10px; border-bottom:1px solid #eef2f6; font-size:12px; }
.package-sku-row span { color:#1d1d1f; }
.package-sku-row:last-child { border-bottom:0; }
.package-sku-row strong { color:var(--blue); }
.package-edit-head,.package-edit-row { display:grid; grid-template-columns:82px 64px 150px 128px 72px 64px 64px 64px 80px 150px; gap:8px; align-items:center; min-width: 980px; }
.package-edit-head { padding:9px 10px; background:#f7f9fc; color:#1d1d1f; font-size:11px; font-weight:800; border-bottom:1px solid #e3eaf3; }
.package-edit-row { padding:8px 10px; border-bottom:1px solid #eef2f6; }
.package-edit-row:last-child { border-bottom:0; }
.package-edit-row input { width:100%; height:34px; border:1px solid #d6e0eb; border-radius:7px; padding:0 8px; outline:0; font-size:12px; }
.package-edit-row input:focus { border-color:var(--blue); box-shadow:0 0 0 2px #0a7cff12; }
.package-edit-row input::placeholder, .drawer-form-grid input::placeholder, .master-search input::placeholder { color:#6b7280; opacity:1; }
.drawer-form { display:grid; gap:12px; }
.drawer-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.drawer-form-grid label { display:grid; gap:6px; color:#1d1d1f; font-size:12px; font-weight:650; }
.drawer-form-grid input { height:36px; border:1px solid #d6e0eb; border-radius:8px; padding:0 10px; outline:0; color:#1d1d1f; background:#fff; }
.drawer-form-grid input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #0a7cff12; }
.drawer-form-grid input[readonly] { background:#f5f7fa; color:#737a84; }
.sku-change-line { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.sku-change-line .button { height:36px; white-space:nowrap; color:var(--blue); border-color:var(--blue); background:#fff; }

.editor-form { display:grid; gap:14px; max-width: 1120px; margin:0 auto; }
.editor-topbar { position: sticky; top: 0; z-index: 6; margin:-6px 0 2px; padding:14px 0 12px; display:flex; justify-content:space-between; gap:16px; align-items:center; background:var(--bg); }
.editor-topbar h1 { font-size:26px; margin-top:5px; }
.text-back { border:0; background:transparent; color:var(--blue); padding:0; font-size:14px; font-weight:750; }
.editor-actions { display:flex; gap:9px; align-items:center; }
.editor-section { border:1px solid #e3eaf3; border-radius:16px; background:#fff; padding:18px; box-shadow:0 4px 16px #16314b08; scroll-margin-top: 86px; }
.editor-section h3 { margin:0 0 14px; font-size:17px; }
.editor-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.editor-form-grid label,.package-card-grid label,.form-field { display:grid; gap:7px; color:#1d1d1f; font-size:12px; font-weight:700; }
.editor-form-grid input,.package-card-grid input,.editor-form-grid select,.package-card-grid select { width:100%; height:38px; border:1px solid #d6e0eb; border-radius:9px; padding:0 11px; outline:0; color:#1d1d1f; background:#fff; }
.editor-form-grid select,.package-card-grid select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%); background-position:calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px; }
.editor-form-grid input:focus,.package-card-grid input:focus,.editor-form-grid select:focus,.package-card-grid select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #0a7cff12; }
.editor-form-grid input[readonly] { background:#f5f7fa; color:#737a84; }
.wide-field { grid-column: span 2; }
.check-pill-row { display:flex; flex-wrap:wrap; gap:8px; min-height:38px; align-items:center; }
.check-pill { display:inline-flex !important; gap:0 !important; }
.check-pill input { position:absolute; opacity:0; pointer-events:none; }
.check-pill span { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 13px; border:1px solid #cfd8e6; border-radius:999px; color:#1d1d1f; background:#fff; font-size:13px; font-weight:750; }
.check-pill input:checked + span { border-color:var(--blue); color:var(--blue); background:#eaf4ff; box-shadow:0 0 0 3px #0a7cff10; }
.package-card-list { display:grid; gap:12px; }
.package-edit-card { border:1px solid #dde7f2; border-radius:15px; padding:14px; background:linear-gradient(180deg,#fff,#fbfdff); }
.package-edit-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.package-edit-card-head strong { font-size:15px; }
.package-edit-card-head span { font-size:12px; color:#1d1d1f; background:#eaf4ff; border-radius:999px; padding:5px 9px; }
.package-card-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.package-card-grid .wide { grid-column: span 2; }

body,
button,
input,
th,
td,
p,
small,
label,
dt,
dd,
.eyebrow,
.submenu button,
.product-flow button,
.product-flow button small,
.table-footer,
.drawer-hint,
.form-note {
  color: #111827;
}

.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: #0d1e31a8; display: grid; place-items: center; padding: 22px; backdrop-filter: blur(3px); }
.modal-backdrop.hidden { display: none; }
.modal-card { width: min(820px, 96vw); max-height: 88vh; overflow: hidden; background: white; border-radius: 14px; box-shadow: 0 30px 80px #07152666; }
.confirm-card { width:min(460px,92vw); padding:22px; }
.confirm-card h2 { color:#111827; font-size:22px; margin-bottom:12px; }
.confirm-card p { color:#1d1d1f; font-size:14px; line-height:1.65; margin:6px 0; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 19px 21px 13px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: #eff3f7; color: #526a81; font-size: 22px; }
.modal-tabs { display: flex; gap: 4px; padding: 0 21px; border-bottom: 1px solid var(--line); }
.modal-tabs button { border: 0; background: transparent; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid transparent; }
.modal-tabs button.active { color: var(--blue); border-color: var(--blue); font-weight: 700; }
.modal-body { padding: 17px 21px 21px; max-height: 62vh; overflow-y: auto; }
.search-box { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; margin-bottom: 12px; color: #7890a6; }
.search-box input { width: 100%; border: 0; outline: 0; padding: 10px 0; }
.library-list { display: grid; gap: 8px; }
.library-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; border: 1px solid #e3e9f0; border-radius: 10px; padding: 11px 12px; }
.library-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.library-product .color-dot { height: 38px; }
.library-product strong, .library-product small { display: block; }
.library-product small, .library-spec { color: var(--muted); font-size: 11px; margin-top: 3px; }
.library-item button[disabled] { opacity: .55; cursor: default; background: #edf3f8; border-color: #edf3f8; color: #60758a; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-grid label { display: grid; gap: 6px; color: #52677d; font-size: 12px; }
.form-grid input { border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; outline: 0; }
.form-grid input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2877e51a; }
.form-section-title { grid-column: span 1; margin-top: 4px; color: var(--ink); font-weight: 800; font-size: 13px; }
.form-note { margin-top: 13px; padding: 10px 11px; color: #5f7489; background: #f2f6fa; border-radius: 8px; font-size: 11px; }
.modal-actions { margin-top: 17px; display: flex; justify-content: flex-end; gap: 9px; }
.package-modal-card{width:min(680px,96vw)}.usage-fieldset{margin:16px 0 0;border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;gap:15px;flex-wrap:wrap}.usage-fieldset legend{padding:0 6px;color:#687b90;font-size:11px}.usage-fieldset label{display:flex;align-items:center;gap:5px;color:#526a84;font-size:11px}.usage-fieldset input{accent-color:var(--blue)}

@media (max-width: 1200px) {
  .workspace-grid, .bottom-grid, .product-master-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .shipment-hero, .shipment-section-cards, .customs-workflow, .shipment-list-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #loading-page.planning-mode .shipment-hero { grid-template-columns:1fr; }
  .shipment-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shipment-actions #save-plan { justify-self:start; }
  .shipment-actions { grid-column:1 / -1; }
  .product-detail-panel { position:static; }
  .drawer-card { width: min(860px, 96vw); min-width: 0; }
  .package-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .sidebar { width: 62px; inset:72px auto 0 0; padding-inline: 8px; }
  .brand > span:last-child, .top-brand > span:last-child, .tiered-nav summary span:not(.menu-icon), .tiered-nav summary i, .submenu, .sidebar-profile div, .sidebar-profile i { display:none; }
  .tiered-nav summary { grid-template-columns:1fr;padding:8px; }.menu-icon{margin:auto}.sidebar-profile{grid-template-columns:1fr}.sidebar-profile>span{margin:auto}
  main { margin-left: 62px; padding: 92px 17px 17px; }
  .app-top-strip { grid-template-columns:62px 1fr auto; height:72px; }
  .top-brand { height:72px; padding:0 12px; justify-content:center; }
  .top-strip-title span { display:none; }
  .top-strip-title { padding:0 12px; }
  .top-icon-button { width:42px; height:72px; }
  .top-user-chip { height:72px; min-width:0; padding:0 10px; }
  .top-user-chip div { display:none; }
  .topbar { align-items: flex-start; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .metrics { grid-template-columns: 1fr; }
  .product-stats { grid-template-columns:1fr; }
  .shipment-hero, .shipment-section-cards, .shipment-fields, .shipment-form, .customs-workflow, .shipment-list-stats { grid-template-columns:1fr; }
  .shipment-list-hero { align-items:flex-start; flex-direction:column; }
  .shipment-actions { flex-wrap:wrap; }
  .master-toolbar { align-items:stretch;flex-direction:column; }.master-search{width:100%}.filter-chips{align-self:flex-start}
  .container-strip, .scheme-id { display: none; }
  .product-flow { grid-template-columns:1fr; }
  .drawer-card { width:100vw; min-width:0; }
  .drawer-header { padding:18px 18px 12px; }
  .drawer-body { padding:14px 16px 18px; }
  .drawer-form-grid { grid-template-columns:1fr; }
  .editor-topbar { align-items:flex-start; flex-direction:column; }
  .editor-actions { width:100%; }
  .editor-actions .button { flex:1; }
  .editor-form-grid,.package-card-grid { grid-template-columns:1fr; }
  .package-card-grid .wide { grid-column:auto; }
}