* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1f2933; background: #f3f6f8; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; background: #1f2933; color: white; padding: 24px 16px; overflow-y: auto; }
.brand { font-weight: 900; font-size: 28px; margin: 0 10px 26px; letter-spacing: 0; color: #f8fafc; }
.side-nav { display: grid; gap: 14px; }
.nav-group { display: grid; gap: 5px; }
.nav-group-title { display: flex; align-items: center; gap: 10px; padding: 0 10px 5px; color: #b8c3d2; font-size: 15px; font-weight: 900; letter-spacing: 0; }
.nav-group-title svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-group-collapsible { display: grid; }
.nav-group-collapsible summary { cursor: pointer; list-style: none; user-select: none; }
.nav-group-collapsible summary::-webkit-details-marker { display: none; }
.nav-group-collapsible[open] summary { display: flex; }
.nav-group-collapsible a { display: flex; width: 100%; }
.nav-group-collapsible .nav-chevron { margin-left: auto; width: 15px; height: 15px; transition: transform 0.16s ease; }
.nav-group-collapsible[open] .nav-chevron { transform: rotate(90deg); }
nav a { position: relative; color: #d7dee8; text-decoration: none; padding: 10px 12px 10px 40px; border-radius: 8px; font-size: 16px; font-weight: 800; line-height: 1.22; }
nav a:hover { background: #344252; color: white; }
nav a.active { background: #e8f0ff; color: #1264a3; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
nav a.active::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: #1264a3; }
.main { margin-left: 244px; padding: 24px; }
.login-main { margin-left: 0; min-height: 100vh; display: grid; place-items: center; }
.login-panel, .panel { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; max-width: 520px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.page-actions form { margin: 0; }
h1 { margin: 0; font-size: 24px; }
.search, .toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar input[type="date"] { width: 170px; }
.toolbar select { width: 150px; }
.shipping-import-toolbar { justify-content: flex-start; }
.shipping-import-toolbar input[type="file"] { width: 260px; flex: 0 0 260px; }
.filter-panel { display: flex; gap: 10px; align-items: end; flex-wrap: nowrap; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.filter-date { flex: 0 0 140px; }
.filter-status { flex: 0 0 128px; }
.filter-channel { flex: 0 0 142px; }
.filter-phone { flex: 0 0 132px; }
.filter-keyword { flex: 1 1 240px; min-width: 220px; }
.filter-actions { flex: 0 0 176px; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
input, select, textarea { width: 100%; border: 1px solid #cfd6df; border-radius: 6px; padding: 9px 10px; font: inherit; background: white; }
button, .button { border: 0; background: #1264a3; color: white; padding: 9px 14px; border-radius: 6px; text-decoration: none; cursor: pointer; white-space: nowrap; }
button:hover, .button:hover { background: #0f558c; }
.button.secondary { background: #eef2f6; color: #334155; border: 1px solid #d8dee6; }
.button.secondary:hover { background: #e2e8f0; }
.button.warning, button.warning { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.button.warning:hover, button.warning:hover { background: #ffedd5; color: #9a3412; }
.sms-toggle-form { margin: 0; }
.sms-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 142px; height: 38px; padding: 0 13px; border-radius: 999px; background: #eef2f6; color: #475569; border: 1px solid #d8dee6; font-weight: 800; }
.sms-toggle:hover { background: #e2e8f0; color: #334155; }
.sms-toggle.active { background: #ecfdf3; color: #15803d; border-color: #bbf7d0; }
.sms-toggle.active:hover { background: #dcfce7; color: #166534; }
.sms-toggle svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sms-config-button { display: inline-flex; align-items: center; gap: 8px; min-width: 118px; height: 38px; padding: 0 13px; border-radius: 999px; background: #eef2f6; color: #475569; border: 1px solid #d8dee6; font-weight: 800; }
.sms-config-button:hover { background: #e2e8f0; color: #334155; }
.sms-config-button svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sms-config-modal { width: min(520px, 100%); align-items: stretch; justify-items: stretch; text-align: left; }
.sms-config-modal h2 { text-align: center; }
.sms-config-modal p { text-align: center; }
.sms-channel-list { display: grid; gap: 10px; width: 100%; margin: 4px 0; }
.sms-channel-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fbfdff; }
.sms-channel-row span { display: grid; gap: 3px; }
.sms-channel-row small { color: #667085; font-weight: 700; }
.sms-channel-row input { width: 20px; height: 20px; flex: 0 0 auto; }
.form { display: grid; gap: 14px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px; }
.form.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form.compact { width: 360px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.full { grid-column: 1 / -1; }
.helper { padding: 10px; background: #f1f5f9; border-radius: 6px; color: #475569; }
.ok-text { color: #166534; background: #ecfdf3; }
.error-text { color: #991b1b; background: #fef2f2; }
.table-shell { overflow: auto; border: 1px solid #e3e8ef; border-radius: 8px; background: white; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; font-size: 14px; }
.orders-table { min-width: 1720px; table-layout: fixed; }
th, td { border-bottom: 1px solid #edf0f3; padding: 12px 12px; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
th { background: #f8fafc; font-weight: 800; color: #334155; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
tbody tr:hover { background: #f8fbff; }
tbody tr:last-child td { border-bottom: 0; }
.col-id { width: 88px; color: #475569; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; }
.col-channel { width: 66px; font-weight: 700; }
.col-date { width: 132px; white-space: nowrap; }
.col-status { width: 82px; }
.col-grade { width: 72px; }
.col-name { width: 92px; font-weight: 700; }
.col-phone { width: 124px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-address { width: 460px; color: #344054; }
.col-remark { width: 520px; font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.col-qty { width: 64px; text-align: center; font-weight: 800; }
.col-express { width: 64px; text-align: center; white-space: nowrap; }
.col-tracking { width: 168px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-actions { width: 72px; text-align: center; }
.date-edit-form { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.date-text { font-weight: 800; font-variant-numeric: tabular-nums; }
.icon-edit-date { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; border-radius: 6px; background: #eef2f6; color: #475569; font-size: 12px; line-height: 1; }
.icon-edit-date:hover { background: #dbeafe; color: #1264a3; }
.native-date-input { position: absolute; right: 0; bottom: -2px; width: 22px; height: 22px; opacity: 0; pointer-events: none; }
.danger-link { opacity: 0; pointer-events: none; background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; padding: 5px 8px; font-size: 12px; }
.pending-row:hover .danger-link { opacity: 1; pointer-events: auto; }
.danger-link:hover { background: #fecaca; color: #991b1b; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; background: #eef2ff; color: #3730a3; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.status-pending { background: #fff7ed; color: #c2410c; }
.status-printed { background: #eff6ff; color: #1d4ed8; }
.status-shipped { background: #ecfdf3; color: #166534; }
.status-shipped-sms { background: #fee2e2; color: #b91c1c; }
.status-cancelled { background: #f1f5f9; color: #64748b; }
.status-shipped_cancelled { background: #b91c1c; color: white; }
.status-unsold { background: #f1f5f9; color: #64748b; }
.status-sold { background: #eff6ff; color: #1d4ed8; }
.status-redeemed, .status-order_created { background: #ecfdf3; color: #166534; }
.status-void { background: #fee2e2; color: #b91c1c; }
.shipped-cancelled-row td { background: #fef2f2; color: #991b1b; }
.shipped-cancelled-row:hover td { background: #fee2e2; }
.compact-table { max-width: 760px; }
.number-cell { font-weight: 800; font-variant-numeric: tabular-nums; }
.grade-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.grade-premium { background: #fff7ed; color: #c2410c; }
.grade-welfare { background: #ecfdf3; color: #166534; }
.grade-unknown { background: #f1f5f9; color: #64748b; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.tabs a { text-decoration: none; color: #334155; background: white; border: 1px solid #d8dee6; padding: 8px 10px; border-radius: 6px; }
.tabs a.active { color: white; background: #1264a3; border-color: #1264a3; }
.messages { margin-bottom: 14px; display: grid; gap: 8px; }
.message { padding: 10px 12px; border-radius: 6px; }
.message.success { background: #ecfdf3; color: #166534; }
.message.error { background: #fef2f2; color: #991b1b; }
.result-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(3px); }
.result-modal { position: relative; width: min(440px, 100%); display: grid; justify-items: center; gap: 12px; padding: 30px 30px 26px; border-radius: 12px; background: white; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22); border: 1px solid #e5e7eb; text-align: center; }
.result-modal-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 999px; font-size: 28px; font-weight: 900; }
.result-modal.success .result-modal-icon { background: #ecfdf3; color: #15803d; }
.result-modal.error .result-modal-icon { background: #fef2f2; color: #b91c1c; }
.result-modal h2 { margin: 2px 0 0; font-size: 22px; color: #1f2933; }
.result-modal p { margin: 0; color: #475569; line-height: 1.7; font-weight: 700; }
.result-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1; }
.result-modal-close:hover { background: #e2e8f0; color: #334155; }
.result-modal-ok { margin-top: 4px; min-width: 120px; height: 40px; font-weight: 800; }
.muted { color: #667085; }
.api-key { display: block; padding: 12px; background: #f1f5f9; border-radius: 6px; word-break: break-all; }
.admin-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(520px, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.admin-panel { max-width: none; display: grid; gap: 14px; }
.admin-panel h2 { margin: 0; font-size: 18px; }
.wide-panel { overflow: auto; }
.field-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.check-row input, .check-list input { width: auto; }
.check-list { display: flex; flex-wrap: wrap; gap: 8px; }
.check-list label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #d8dee6; border-radius: 6px; background: #f8fafc; font-weight: 700; }
.check-list.inline { min-width: 280px; }
.user-permission-list { display: grid; gap: 10px; min-width: 760px; }
.permission-row { display: grid; grid-template-columns: 150px 100px minmax(320px, 1fr) 210px auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfdff; }
.reset-password { gap: 5px; font-size: 13px; }
.channel-admin-panel { grid-column: 1 / -1; }
.channel-create-row, .channel-row { display: grid; grid-template-columns: 220px minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 12px; align-items: end; }
.channel-create-row { padding: 12px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfdff; }
.channel-list { display: grid; gap: 10px; min-width: 760px; }
.channel-row { padding: 12px; border: 1px solid #edf0f3; border-radius: 8px; background: #fff; }
.channel-row > div { align-self: center; display: grid; gap: 4px; }
.crab-card-redeem-panel { max-width: none; margin-bottom: 16px; }
.crab-card-redeem-panel h2 { margin: 0 0 12px; font-size: 18px; }
.crab-card-redeem-form { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.crab-card-redeem-form button { height: 40px; }
.list-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.list-summary p { margin: 0; }
.pagination { display: inline-flex; gap: 8px; align-items: center; }
.pagination .button { min-width: 72px; text-align: center; }
.pagination .disabled { pointer-events: none; opacity: 0.45; }
.redemption-table { min-width: 1500px; }
.platform-cookie-panel { grid-column: 1 / -1; }
.platform-cookie-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.cookie-upload-row { flex: 1 1 680px; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 360px) auto; gap: 12px; align-items: end; padding: 12px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfdff; }
.cookie-upload-row p { margin: 4px 0 0; }
.cookie-check-result { display: grid; gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid #d8dee6; }
.cookie-check-result.ok { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.cookie-check-result.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cookie-shop-list { display: grid; gap: 8px; color: #334155; }
.cookie-shop-row { display: grid; grid-template-columns: 70px minmax(220px, 1fr) 110px 70px 180px 100px; gap: 10px; align-items: center; padding: 10px; border-radius: 6px; background: rgba(255,255,255,0.78); }
.cookie-shop-row.head { background: #f8fafc; color: #475569; font-weight: 800; }
.platform-sync-note { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfdff; font-weight: 700; }
.order-platform-note { margin: -6px 0 14px; }
.platform-shop-table { display: grid; gap: 10px; padding-top: 4px; }
.platform-shop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.platform-shop-head h3 { margin: 0; font-size: 16px; }
.empty-row { padding: 14px; border: 1px dashed #d8dee6; border-radius: 8px; background: #fbfdff; color: #667085; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 18px; margin-bottom: 18px; }
.metric-card { min-height: 138px; border-radius: 8px; padding: 28px 30px; display: grid; align-content: center; gap: 10px; border: 1px solid rgba(15, 23, 42, 0.04); }
.metric-blue { background: #eaf8fd; }
.metric-yellow { background: #fff3c4; }
.metric-lavender { background: #f1f2fc; }
.metric-red { background: #ffe1df; }
.metric-title { font-size: 18px; color: #27313f; }
.metric-title.accent { color: #ff5b57; }
.metric-value { font-size: 64px; line-height: 0.95; font-weight: 800; color: #2f3847; letter-spacing: 0; }
.metric-value.accent { color: #fa5a57; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.dashboard-grid.compact { grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); }
.chart-card, .panel-list { background: white; border-radius: 8px; border: 1px solid #edf0f3; padding: 22px 24px; min-height: 380px; overflow: hidden; }
.chart-card.tint-green { background: #edfbf8; }
.chart-card.tint-red { background: #ffe2e0; }
.chart-card h2, .panel-list h2 { margin: 0 0 12px; font-size: 18px; color: #1f2933; }
.legend { display: inline-flex; align-items: center; gap: 8px; color: #667085; font-size: 14px; margin-bottom: 8px; }
.legend span { width: 9px; height: 9px; border-radius: 999px; background: #2f73f6; display: inline-block; }
.line-chart { height: 300px; width: 100%; }
.line-chart svg { width: 100%; height: 100%; overflow: visible; }
.gridline { stroke: rgba(148, 163, 184, 0.25); stroke-width: 1; }
.trend-line { fill: none; stroke: #2f73f6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.point { fill: #2f73f6; }
.axis-label, .date-label { fill: #8a94a6; font-size: 13px; }
.value-label { fill: #2f73f6; font-size: 12px; text-anchor: middle; }
.list-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf0f3; color: #334155; }
.list-row:last-child { border-bottom: 0; }
.spec-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.spec-cloud span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; background: #f1f5f9; color: #334155; }
.spec-cloud b { color: #1264a3; }
.stock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-width: 980px; margin: 14px 0; }
.summary-card { background: white; border: 1px solid #e3e8ef; border-radius: 8px; padding: 16px 18px; display: grid; gap: 8px; }
.summary-card span { color: #667085; font-weight: 700; }
.summary-card strong { font-size: 30px; line-height: 1; color: #1f2933; }
.summary-card.date-card strong { font-size: 24px; }
.stock-grade-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.source-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border: 1px solid #d8dee6; border-radius: 8px; background: #fff; }
.source-tabs a { min-width: 92px; text-align: center; text-decoration: none; color: #475569; padding: 8px 12px; border-radius: 6px; font-weight: 800; }
.source-tabs a:hover { background: #eef2f6; color: #334155; }
.source-tabs a.active { background: #1264a3; color: white; }
.grade-summary-item { display: inline-flex; align-items: center; gap: 10px; background: white; border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px 12px; color: #475569; }
.grade-summary-item strong { color: #1f2933; }
.stock-sex-female td { background: #fff7ed; }
.stock-sex-male td { background: #eff6ff; }
.stock-sex-female:hover td { background: #ffedd5; }
.stock-sex-male:hover td { background: #dbeafe; }
.reconciliation-layout { display: grid; grid-template-columns: minmax(760px, 1fr) 320px; gap: 18px; align-items: start; }
.reconciliation-main { min-width: 0; }
.reconciliation-toolbar { align-items: center; }
.reconciliation-table { min-width: 820px; font-size: 12px; }
.reconciliation-table th, .reconciliation-table td { padding: 6px 8px; line-height: 1.18; }
.reconciliation-table .grade-pill { min-width: 54px; padding: 3px 7px; font-size: 11px; }
.reconciliation-table .zero-row td { background: white; }
.reconciliation-table .zero-row:hover td { background: white; }
.money-input { width: 78px; padding: 5px 6px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.reconciliation-side { display: grid; gap: 14px; position: sticky; top: 18px; }
.reconciliation-card { margin: 0; }
.reconciliation-card p { margin: 0; }
.reconciliation-panel { max-width: none; display: grid; gap: 12px; }
.reconciliation-panel h2 { margin: 0; font-size: 18px; }
.settlement-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #edf0f3; color: #475569; }
.settlement-row strong { color: #1f2933; font-size: 18px; font-variant-numeric: tabular-nums; }
.settlement-row.total { margin-top: 4px; padding: 12px; border: 0; border-radius: 8px; background: #1264a3; color: white; font-weight: 900; }
.settlement-row.total strong { color: white; font-size: 24px; }
.reconciliation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reconciliation-actions .button, .reconciliation-actions button { height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-weight: 900; }
.reconciliation-save { font-weight: 900; }
.confirm-button { grid-column: 1 / -1; background: #15803d; }
.confirm-button:hover { background: #166534; }
.confirm-stamp { justify-self: end; width: fit-content; margin-top: 8px; padding: 6px 12px; border: 2px solid #15803d; border-radius: 999px; color: #15803d; font-weight: 900; transform: rotate(-8deg); }
.confirm-stamp.small { display: inline-block; margin-top: 6px; padding: 3px 8px; font-size: 12px; }
.print-body { background: #f3f6f8; color: #1f2933; }
.print-page { max-width: 1280px; margin: 0 auto; padding: 22px; }
.print-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.print-head h1 { font-size: 26px; }
.print-head p { margin: 5px 0 0; color: #667085; font-weight: 800; }
.print-layout { display: grid; grid-template-columns: minmax(720px, 1fr) 260px; gap: 12px; align-items: stretch; }
.print-table-card, .print-card { background: white; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.print-table-card { overflow: hidden; }
.reconciliation-print-table { min-width: 0; font-size: 10px; }
.reconciliation-print-table th, .reconciliation-print-table td { padding: 4px 6px; line-height: 1.08; }
.reconciliation-print-table tr.zero-row td { background: white; }
.print-side { display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; height: 100%; }
.print-card { padding: 14px 16px; }
.print-card span { color: #667085; font-weight: 900; }
.print-card strong { display: block; margin-top: 5px; font-size: 34px; line-height: 1; }
.print-card strong.print-status { font-size: 26px; }
.print-card p { margin: 7px 0 0; color: #667085; font-size: 15px; font-weight: 800; }
.print-cost-card { display: grid; align-content: start; }
.print-cost-card h2 { margin: 0 0 6px; font-size: 18px; }
.print-cost-card div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #edf0f3; }
.print-cost-card b { font-size: 15px; font-variant-numeric: tabular-nums; }
.print-cost-card .total { margin-top: 6px; padding: 9px 10px; border: 0; border-radius: 8px; background: #1264a3; color: white; }
.print-cost-card .total span, .print-cost-card .total b { color: white; }
@media print {
  .print-head button { display: none; }
  .print-body { background: white; }
  .print-page { max-width: none; padding: 0; }
  .print-table-card, .print-card { box-shadow: none; }
}
@media (max-width: 900px) {
  .sidebar { position: static; width: auto; }
  .main { margin-left: 0; padding: 14px; }
  .form.grid { grid-template-columns: 1fr; }
  .filter-panel { display: grid; grid-template-columns: 1fr; }
  .filter-keyword { grid-column: auto; }
  .metric-grid, .dashboard-grid, .dashboard-grid.compact, .admin-grid, .stock-summary, .reconciliation-layout { grid-template-columns: 1fr; }
  .page-head { align-items: stretch; flex-direction: column; }
}