:root {
  --primary: #ee4d2d;
  --primary-dark: #d33d20;
  --primary-light: #fff5f3;
  --accent: #f69113;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-soft: #f8f8f8;
  --surface-raised: #ffffff;
  --text: #1a1a1a;
  --text-light: #555555;
  --text-muted: #999999;
  --text-inverse: #ffffff;
  --border: #ebebeb;
  --border-dark: #d0d0d0;
  --success: #26aa99;
  --danger: #e53935;
  --warning: #f59e0b;
  --info: #2196f3;
  --shadow: 0 10px 30px rgba(24, 24, 27, .055);
}

:root[data-theme="dark"] {
  --primary: #ff6748;
  --primary-dark: #ee4d2d;
  --primary-light: rgba(255, 103, 72, 0.14);
  --bg: #0f141d;
  --surface: #151b26;
  --surface-soft: #1d2532;
  --surface-raised: #202938;
  --text: #f4f7fb;
  --text-light: #c0cad8;
  --text-muted: #8793a4;
  --border: #2c3544;
  --border-dark: #465264;
  --shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
p { margin: 0; }

.app-shell {
  width: min(100%, 1440px);
  height: 100vh;
  margin: 0 auto;
  padding: 18px 22px 20px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--text-inverse); background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 20px rgba(238, 77, 45, .25);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-wrap h1 { font-size: 22px; letter-spacing: -.4px; }
.brand-wrap p { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 9px; }

.compact-field {
  height: 42px; min-width: 138px; padding: 5px 10px 5px 12px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px;
}
.compact-field span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.compact-field input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-weight: 600; font-size: 13px; }

.btn, .icon-btn {
  border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, background .15s ease, opacity .15s ease, border-color .15s ease;
}
.btn:active, .icon-btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn { min-height: 42px; padding: 0 15px; border-radius: 9px; font-size: 13px; font-weight: 700; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { color: #fff; background: var(--primary); box-shadow: 0 7px 16px rgba(238, 77, 45, .18); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: #fff; background: var(--danger); box-shadow: 0 7px 16px rgba(229, 57, 53, .18); }
.btn-danger:hover { background: #c62828; }
.btn-wide { width: 100%; margin-top: 4px; }
.icon-btn { width: 42px; height: 42px; border-radius: 9px; color: var(--text-light); border: 1px solid var(--border); background: var(--surface); }
.icon-btn:hover { border-color: var(--border-dark); background: var(--surface-soft); }
.icon-btn svg { width: 19px; height: 19px; }

.stats-grid { display: grid; grid-template-columns: 1.18fr 1.18fr repeat(4, 1fr); gap: 10px; }
.stat-card {
  min-height: 82px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
}
.stat-card span { color: var(--text-light); font-size: 12px; font-weight: 600; }
.stat-card strong { grid-column: 2; grid-row: 1 / 3; font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; letter-spacing: -1px; }
.stat-card small { color: var(--text-muted); font-size: 11px; }
.stat-total { background: linear-gradient(135deg, var(--primary), #ff7659); border-color: transparent; color: #fff; }
.stat-total span, .stat-total small, .stat-total strong { color: #fff; }
.stat-month { background: var(--primary-light); border-color: rgba(238, 77, 45, .22); }
.stat-month strong { color: var(--primary); }

.workspace { min-height: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 14px; }
.card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); min-height: 0; }
.entry-panel { padding: 17px; display: flex; flex-direction: column; overflow: hidden; }
.card-head.compact h2, .records-toolbar h2 { font-size: 16px; }
.card-head.compact p, .records-toolbar p { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

.segmented { margin-top: 14px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 9px; background: var(--surface-soft); }
.segment { height: 34px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 12px; }
.segment.active { color: var(--primary); background: var(--surface); box-shadow: 0 3px 10px rgba(0, 0, 0, .06); }
.tab-panel { display: none; min-height: 0; flex: 1; }
.tab-panel.active { display: flex; flex-direction: column; }
#singleForm { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
#bulkTab { padding-top: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--text-light); font-size: 12px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface-soft);
  outline: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input { height: 41px; padding: 0 12px; }
.field textarea { min-height: 170px; flex: 1; padding: 11px 12px; resize: none; line-height: 1.65; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.field input:focus, .field textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
.grow-field { flex: 1; min-height: 0; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carrier-preview { height: 41px; border-radius: 8px; display: grid; place-items: center; border: 1px dashed var(--border-dark); font-weight: 800; font-size: 12px; letter-spacing: .5px; background: var(--surface-soft); }
.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; color: var(--text-muted); }
.input-with-icon input { padding-left: 38px; }
.helper { color: var(--text-muted); font-size: 11px; }
.helper.center { text-align: center; }
.duplicate-alert { padding: 9px 10px; border-radius: 8px; display: flex; gap: 9px; align-items: flex-start; color: var(--danger); background: rgba(229, 57, 53, .08); border: 1px solid rgba(229, 57, 53, .2); }
.duplicate-alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.duplicate-alert strong { display: block; font-size: 12px; }
.duplicate-alert span { display: block; color: var(--text-light); font-size: 11px; margin-top: 1px; }
.hidden { display: none !important; }
.paste-hint { margin: 9px 0 8px; color: var(--text-muted); font-size: 11px; display: flex; align-items: center; gap: 7px; }
.paste-hint svg { width: 16px; height: 16px; }
.bulk-result { margin-top: 9px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); font-size: 12px; }
.bulk-result strong { color: var(--success); }
.bulk-result .bad { color: var(--danger); }
.bulk-result .warn { color: var(--warning); }

.records-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.records-toolbar { padding: 15px 17px 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
.search-box { position: relative; width: min(390px, 46%); }
.search-box svg { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--text-muted); }
.search-box input { width: 100%; height: 40px; padding: 0 62px 0 39px; border: 1px solid var(--border); border-radius: 9px; outline: 0; color: var(--text); background: var(--surface-soft); }
.search-box input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
.search-box kbd { position: absolute; right: 9px; top: 9px; padding: 2px 6px; border: 1px solid var(--border); border-bottom-color: var(--border-dark); border-radius: 5px; color: var(--text-muted); background: var(--surface); font-size: 10px; font-family: inherit; }
.table-wrap { min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; color: var(--text-muted); background: var(--surface-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; }
td { font-size: 13px; }
tbody tr:hover td { background: var(--surface-soft); }
.col-no { width: 58px; text-align: center; }
.col-qty { width: 76px; text-align: center; }
.col-carrier { width: 95px; }
.col-date { width: 120px; }
.col-action { width: 52px; }
td:nth-child(1), td:nth-child(3) { text-align: center; }
.tracking-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.carrier-spx { color: #ee4d2d; background: rgba(238, 77, 45, .11); }
.carrier-jnt { color: #e53935; background: rgba(229, 57, 53, .11); }
.carrier-jne { color: #1976d2; background: rgba(33, 150, 243, .11); }
.carrier-other { color: var(--text-muted); background: var(--surface-soft); }
.delete-btn { width: 30px; height: 30px; border: 0; border-radius: 7px; cursor: pointer; display: grid; place-items: center; color: var(--text-muted); background: transparent; }
.delete-btn:hover { color: var(--danger); background: rgba(229, 57, 53, .08); }
.delete-btn svg { width: 16px; height: 16px; }
.state-cell { padding: 48px 20px; text-align: center !important; color: var(--text-muted); }
.records-footer { min-height: 41px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.records-footer > span:first-child { color: var(--text-light); font-weight: 700; }

.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.toast { width: min(360px, calc(100vw - 40px)); padding: 11px 13px; border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: 9px; color: var(--text); background: var(--surface-raised); box-shadow: 0 14px 35px rgba(0, 0, 0, .15); animation: toast-in .2s ease; }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast strong { display: block; font-size: 12px; }
.toast span { color: var(--text-light); font-size: 11px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; }
  .workspace { grid-template-columns: 320px minmax(650px, 1fr); overflow-x: auto; }
  .stats-grid { grid-template-columns: repeat(6, minmax(140px, 1fr)); overflow-x: auto; }
}

@media (max-width: 760px) {
  .app-shell { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; flex-wrap: wrap; }
  .compact-field { flex: 1; }
  .workspace { display: flex; flex-direction: column; overflow: visible; }
  .records-panel { min-height: 520px; }
  .search-box { width: 100%; }
  .records-toolbar { align-items: flex-start; flex-direction: column; }
}

/* Auto-paste result details */
.bulk-result.has-warning { border-color: rgba(245, 158, 11, .35); }
.bulk-result-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.bulk-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-light); font-size: 11px; }
.bulk-detail b { display: block; margin-bottom: 3px; color: var(--text); }
.bulk-detail ul { margin: 4px 0 0; padding-left: 17px; }
.bulk-detail li + li { margin-top: 2px; }
.bulk-detail small { display: block; margin-top: 4px; color: var(--text-muted); }
.warning-detail b { color: var(--warning); }
.invalid-detail b { color: var(--danger); }

/* Table stays as plain text until a cell is clicked */
.editable-cell { min-width: 72px; }
.editable-cell.editing { padding-top: 5px; padding-bottom: 5px; background: var(--surface-soft); }
.inline-editor {
  width: 100%; min-width: 88px; height: 30px; margin: 0; padding: 0 8px;
  border: 1px solid var(--primary); border-radius: 6px; outline: 0;
  color: var(--text); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light);
  font-size: 13px; font-weight: 600;
}
.qty-cell .inline-editor { min-width: 54px; text-align: center; }
.editable-cell[data-field="tracking_number"] .inline-editor { min-width: 210px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.editable-cell[data-field="packing_date"] .inline-editor { min-width: 132px; }
.editable-cell.saving .inline-editor { opacity: .6; cursor: wait; }

/* Import Excel */
.btn-secondary { color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.btn-secondary:hover { background: var(--surface-soft); border-color: var(--border-dark); }
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 15, .66); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1; width: min(1040px, calc(100vw - 40px)); max-height: min(850px, calc(100vh - 40px));
  overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 26px 80px rgba(0,0,0,.32);
}
.modal-head { padding: 17px 19px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 19px; }
.modal-head p { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.modal-close { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--text-muted); background: var(--surface); }
.modal-close:hover { color: var(--text); background: var(--surface-soft); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { min-height: 0; overflow: auto; padding: 18px 19px 20px; }
.import-step { display: flex; flex-direction: column; gap: 14px; }
.import-dropzone {
  min-height: 235px; padding: 28px; border: 1.5px dashed var(--border-dark); border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--surface-soft); transition: border-color .15s, background .15s, transform .15s;
}
.import-dropzone:hover, .import-dropzone.dragging { border-color: var(--primary); background: var(--primary-light); transform: translateY(-1px); }
.import-drop-icon { width: 52px; height: 52px; margin-bottom: 13px; border-radius: 14px; display: grid; place-items: center; color: var(--primary); background: var(--primary-light); }
.import-drop-icon svg { width: 25px; height: 25px; }
.import-dropzone strong { max-width: 620px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; overflow-wrap: anywhere; }
.import-dropzone small { margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.import-main-btn { width: 100%; min-height: 44px; }
.import-file-info { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.import-file-info strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.import-file-info span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.text-btn { border: 0; padding: 5px 0; cursor: pointer; color: var(--primary); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.import-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.import-summary-grid > div { padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.import-summary-grid span { color: var(--text-muted); font-size: 11px; }
.import-summary-grid strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; }
.import-selection-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.check-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-light); font-size: 12px; font-weight: 600; }
.check-label input, .import-date-check { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.import-selection-head > span { color: var(--text-muted); font-size: 11px; }
.import-date-list-wrap { max-height: min(430px, 48vh); overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.import-date-table { min-width: 830px; }
.import-date-table th, .import-date-table td { padding: 9px 10px; }
.import-date-table th:first-child, .import-date-table td:first-child { width: 42px; text-align: center; }
.import-date-table td { font-size: 12px; }
.import-date-table td:nth-child(n+3):nth-child(-n+8) { text-align: center; }
.import-existing { min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--warning); background: rgba(245,158,11,.12); font-size: 11px; font-weight: 800; }
.import-issue { color: var(--text-muted); font-size: 11px !important; }
.import-issue.has-issue { color: var(--warning); }
.import-result { padding: 11px 13px; border: 1px solid rgba(38,170,153,.25); border-radius: 9px; background: rgba(38,170,153,.08); }
.import-result strong { display: block; color: var(--success); font-size: 13px; }
.import-result span { display: block; margin-top: 2px; color: var(--text-light); font-size: 12px; }
.import-result ul { max-height: 130px; overflow: auto; margin: 8px 0 0; padding-left: 18px; color: var(--text-light); font-size: 11px; }
.import-result li + li { margin-top: 3px; }

@media (max-width: 980px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .import-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .modal { padding: 8px; }
  .modal-card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 11px; }
  .modal-head, .modal-body { padding-left: 14px; padding-right: 14px; }
  .import-summary-grid { grid-template-columns: 1fr 1fr; }
  .import-dropzone { min-height: 200px; padding: 22px 16px; }
}

/* Reset data */
.reset-modal-card { width: min(620px, calc(100vw - 40px)); }
.reset-form { display: flex; flex-direction: column; gap: 13px; }
.reset-warning {
  padding: 12px; border: 1px solid rgba(229, 57, 53, .25); border-radius: 10px;
  display: flex; align-items: flex-start; gap: 10px; background: rgba(229, 57, 53, .07);
}
.reset-warning-icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  color: var(--danger); background: rgba(229, 57, 53, .12);
}
.reset-warning-icon svg { width: 20px; height: 20px; }
.reset-warning strong { display: block; font-size: 13px; }
.reset-warning small { display: block; margin-top: 2px; color: var(--text-light); font-size: 11px; }
.reset-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.reset-scope-card {
  min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  display: flex; align-items: flex-start; gap: 8px; background: var(--surface);
}
.reset-scope-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.reset-scope-card input { margin: 3px 0 0; accent-color: var(--primary); }
.reset-scope-card b, .reset-scope-card small { display: block; }
.reset-scope-card b { font-size: 12px; }
.reset-scope-card small { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; line-height: 1.35; }
.reset-scope-danger:has(input:checked) { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229, 57, 53, .1); }
.reset-scope-summary {
  padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-light); background: var(--surface-soft); font-size: 12px;
}
.reset-scope-summary.danger { color: var(--danger); border-color: rgba(229,57,53,.24); background: rgba(229,57,53,.06); font-weight: 700; }

@media (max-width: 620px) {
  .reset-modal-card { width: calc(100vw - 16px); }
  .reset-scope-grid { grid-template-columns: 1fr; }
}

/* Viewer & admin access modes */
.viewer-mode .admin-only { display: none !important; }
.viewer-mode .workspace { grid-template-columns: minmax(0, 1fr); }
.viewer-mode .records-panel { width: 100%; }
.viewer-mode .table-wrap table { min-width: 760px; }

.role-pill {
  min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--surface); color: var(--text-light); font-size: 12px; font-weight: 700;
}
.role-pill svg { width: 17px; height: 17px; }
.role-pill.role-admin { color: var(--success); border-color: rgba(38, 170, 153, .28); background: rgba(38, 170, 153, .08); }
.role-pill.role-viewer { color: var(--info); border-color: rgba(33, 150, 243, .25); background: rgba(33, 150, 243, .07); }
.auth-btn { min-width: 88px; }

.login-modal-card { width: min(460px, calc(100vw - 40px)); }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-mode-note {
  padding: 11px 12px; border: 1px solid rgba(33, 150, 243, .22); border-radius: 10px;
  display: flex; align-items: flex-start; gap: 10px; background: rgba(33, 150, 243, .07);
}
.login-mode-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: var(--info); background: rgba(33, 150, 243, .12); }
.login-mode-icon svg { width: 19px; height: 19px; }
.login-mode-note strong { display: block; font-size: 13px; }
.login-mode-note small { display: block; margin-top: 2px; color: var(--text-light); font-size: 11px; }
.login-config-warning {
  padding: 10px 11px; border: 1px solid rgba(245, 158, 11, .28); border-radius: 9px;
  color: var(--warning); background: rgba(245, 158, 11, .08);
}
.login-config-warning strong, .login-config-warning span { display: block; }
.login-config-warning strong { font-size: 12px; }
.login-config-warning span { margin-top: 2px; color: var(--text-light); font-size: 11px; }
.login-config-warning code { padding: 1px 4px; border-radius: 4px; color: var(--text); background: var(--surface-soft); }
.password-field { position: relative; }
.password-field input { padding-right: 78px; }
.password-field button {
  position: absolute; right: 7px; top: 6px; height: 29px; padding: 0 9px; border: 0; border-radius: 6px;
  cursor: pointer; color: var(--primary); background: var(--primary-light); font-size: 11px; font-weight: 700;
}
.login-error { padding: 9px 10px; border: 1px solid rgba(229, 57, 53, .22); border-radius: 8px; color: var(--danger); background: rgba(229, 57, 53, .08); font-size: 12px; }

@media (max-width: 1180px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .role-pill { order: 2; }
}

@media (max-width: 760px) {
  .role-pill, .auth-btn { flex: 1; }
  .role-pill { justify-content: center; }
  .viewer-mode .table-wrap table { min-width: 690px; }
}

/* Statistics dashboard */
.statistics-modal-card { width: min(1180px, calc(100vw - 40px)); }
.statistics-body { display: flex; flex-direction: column; gap: 14px; }
.statistics-toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft);
}
.statistics-mode, .statistics-metric {
  height: 40px; padding: 3px; display: inline-flex; gap: 3px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface);
}
.statistics-mode-btn, .statistics-metric-btn {
  min-width: 94px; padding: 0 12px; border: 0; border-radius: 7px; cursor: pointer;
  color: var(--text-muted); background: transparent; font-size: 12px; font-weight: 700;
}
.statistics-mode-btn.active, .statistics-metric-btn.active { color: var(--primary); background: var(--primary-light); }
.statistics-metric { margin-left: auto; }
.statistics-filter { display: flex; flex-direction: column; gap: 4px; }
.statistics-filter span { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.statistics-filter select, .statistics-filter input {
  height: 40px; min-width: 128px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px;
  outline: 0; color: var(--text); background: var(--surface); font-weight: 700; font-size: 12px;
}
.statistics-filter select:focus, .statistics-filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.statistics-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.statistics-summary-card {
  min-height: 92px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; background: var(--surface);
}
.statistics-summary-card > span { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.statistics-summary-card > strong {
  grid-column: 2; grid-row: 1 / 3; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 25px; letter-spacing: -.6px;
}
.statistics-summary-card > small { max-width: 190px; color: var(--text-muted); font-size: 10.5px; line-height: 1.35; }
.statistics-summary-card small.change-up { color: var(--success); }
.statistics-summary-card small.change-down { color: var(--danger); }
.statistics-summary-card small.change-flat { color: var(--text-muted); }

.statistics-chart-card, .statistics-breakdown-card, .statistics-insight-card {
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
}
.statistics-chart-card { padding: 15px 16px 10px; }
.statistics-chart-head, .statistics-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.statistics-chart-head h3, .statistics-section-head h3 { font-size: 14px; }
.statistics-chart-head p, .statistics-section-head p { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.statistics-legend { display: flex; align-items: center; gap: 7px; color: var(--text-light); font-size: 11px; }
.statistics-legend span { width: 20px; height: 3px; border-radius: 99px; background: var(--primary); }
.statistics-chart { position: relative; min-height: 300px; margin-top: 7px; }
.statistics-chart-svg { width: 100%; height: 300px; overflow: visible; display: block; }
.statistics-grid-line { stroke: var(--border); stroke-width: 1; }
.statistics-axis-text { fill: var(--text-muted); font-family: "DM Sans", sans-serif; font-size: 11px; }
.statistics-line { fill: none; stroke: var(--primary); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.statistics-point { fill: var(--surface); stroke: var(--primary); stroke-width: 3; cursor: help; }
.statistics-point:hover { r: 7; }
.statistics-loading { min-height: 300px; display: grid; place-items: center; color: var(--text-muted); font-size: 12px; }
.statistics-loading.statistics-error { color: var(--danger); }
.statistics-empty-overlay {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); background: var(--surface-raised); font-size: 11px;
}

.statistics-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 10px; }
.statistics-breakdown-card, .statistics-insight-card { padding: 14px 15px; }
.statistics-carriers { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.statistics-carrier-row { min-width: 0; }
.statistics-carrier-meta { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.statistics-carrier-meta span { color: var(--text-light); font-weight: 700; }
.statistics-carrier-meta strong { font-size: 11px; }
.statistics-carrier-meta small { margin-left: 4px; color: var(--text-muted); font-weight: 500; }
.statistics-progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.statistics-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .25s ease; }
.statistics-insight-content { margin-top: 12px; display: flex; align-items: flex-start; gap: 11px; }
.statistics-insight-icon {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
  color: var(--text-muted); background: var(--surface-soft); font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; font-weight: 800;
}
.statistics-insight-icon.insight-up { color: var(--success); background: rgba(38, 170, 153, .1); }
.statistics-insight-icon.insight-down { color: var(--danger); background: rgba(229, 57, 53, .09); }
.statistics-insight-content strong { display: block; font-size: 13px; }
.statistics-insight-content p { margin-top: 3px; color: var(--text-light); font-size: 11px; }
.statistics-insight-content small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 10.5px; }

@media (max-width: 900px) {
  .statistics-summary-grid { grid-template-columns: 1fr 1fr; }
  .statistics-bottom-grid { grid-template-columns: 1fr; }
  .statistics-metric { margin-left: 0; }
}

@media (max-width: 620px) {
  .statistics-modal-card { width: calc(100vw - 16px); }
  .statistics-toolbar { align-items: stretch; }
  .statistics-mode, .statistics-metric { width: 100%; }
  .statistics-mode-btn, .statistics-metric-btn { flex: 1; min-width: 0; }
  .statistics-filter { flex: 1; }
  .statistics-filter select, .statistics-filter input { width: 100%; min-width: 0; }
  .statistics-summary-grid { grid-template-columns: 1fr; }
  .statistics-summary-card { min-height: 78px; }
  .statistics-chart-card { padding-left: 8px; padding-right: 8px; }
  .statistics-chart-head { padding: 0 7px; align-items: flex-start; }
  .statistics-chart { min-height: 270px; overflow-x: auto; }
  .statistics-chart-svg { min-width: 720px; height: 270px; }
  .statistics-carriers { grid-template-columns: 1fr; }
}


/* Mobile compact layout update v8 */
@media (max-width: 760px) {
  body { overflow: auto; }
  .app-shell {
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 14px;
    gap: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .brand-wrap {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .brand-wrap h1 { font-size: 18px; }
  .brand-wrap p { font-size: 12px; }

  .top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }

  .top-actions > * {
    min-width: 0;
    width: 100%;
  }

  .compact-field,
  .btn,
  .role-pill,
  .auth-btn {
    min-height: 44px;
  }

  .compact-field {
    padding: 6px 10px 6px 12px;
    gap: 8px;
  }

  .compact-field span { font-size: 10px; }
  .compact-field input { font-size: 12px; }

  #statisticsBtn,
  #exportBtn,
  #importBtn,
  #resetBtn {
    justify-content: center;
  }

  #resetBtn {
    grid-column: 1 / -1;
  }

  .role-pill {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .auth-btn {
    grid-column: 1 / 2;
  }

  #themeBtn {
    grid-column: 2 / 3;
    width: 44px;
    justify-self: end;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .stat-card {
    min-height: 76px;
    padding: 11px 12px;
  }

  .stat-card strong {
    font-size: 24px;
    letter-spacing: -.8px;
  }

  .stat-card span,
  .stat-card small {
    white-space: normal;
  }

  .workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }

  .entry-panel,
  .records-panel {
    width: 100%;
  }

  .entry-panel { padding: 15px; }

  .records-panel {
    min-height: 0;
  }

  .records-toolbar {
    padding: 14px 14px 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .search-box {
    width: 100%;
  }

  .table-wrap {
    overflow: visible;
    padding: 10px 12px 12px;
  }

  .viewer-mode .table-wrap table,
  .table-wrap table {
    min-width: 0;
    width: 100%;
  }

  .table-wrap thead {
    display: none;
  }

  .table-wrap tbody {
    display: grid;
    gap: 10px;
  }

  .table-wrap tbody tr {
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
  }

  .table-wrap tbody tr:hover td {
    background: transparent;
  }

  .table-wrap td {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 0;
    border: 0;
    text-align: left !important;
    white-space: normal;
    background: transparent !important;
  }

  .table-wrap td + td {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(128, 138, 153, .18);
  }

  .table-wrap td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
  }

  .table-wrap td strong,
  .table-wrap td .cell-value,
  .table-wrap td .tracking-text {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .table-wrap td .badge {
    justify-self: start;
  }

  .table-wrap td[data-label="Aksi"] {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .table-wrap td[data-label="Aksi"]::before {
    display: none;
  }

  .table-wrap .delete-btn {
    width: 100%;
    height: 38px;
    border: 1px dashed rgba(229, 57, 53, .22);
    border-radius: 9px;
    background: rgba(229, 57, 53, .04);
  }

  .table-wrap .state-cell {
    display: block;
    padding: 28px 10px !important;
    text-align: center !important;
    border: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .table-wrap .state-cell::before {
    display: none;
  }

  .records-footer {
    min-height: 0;
    padding: 10px 12px 12px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .two-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .app-shell { padding: 12px; }
  .top-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 10px 11px; }
  .stat-card strong { font-size: 22px; }
  .table-wrap td {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
  }
}

/* Update V10: clean date fields, export dialog, and OTP password reset */
.compact-field input[type="date"]::-webkit-calendar-picker-indicator,
.compact-field input[type="month"]::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.compact-field input[type="date"],
.compact-field input[type="month"] {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.export-modal-card { width: min(580px, calc(100vw - 40px)); }
.export-form { display: flex; flex-direction: column; gap: 13px; }
.export-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.export-scope-card {
  min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  display: flex; align-items: flex-start; gap: 9px; background: var(--surface);
}
.export-scope-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.export-scope-card input { margin: 3px 0 0; accent-color: var(--primary); }
.export-scope-card b, .export-scope-card small { display: block; }
.export-scope-card b { font-size: 12px; }
.export-scope-card small { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; line-height: 1.35; }
.export-scope-summary {
  padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-light); background: var(--surface-soft); font-size: 12px;
}

.login-help-row { margin-top: -4px; display: flex; justify-content: flex-end; }
.login-help-row .text-btn:disabled { cursor: not-allowed; opacity: .45; }
.forgot-modal-card { width: min(500px, calc(100vw - 40px)); }
.forgot-step { display: flex; flex-direction: column; gap: 13px; }
.otp-sent-note {
  padding: 11px 12px; border: 1px solid rgba(38,170,153,.25); border-radius: 10px;
  color: var(--success); background: rgba(38,170,153,.08);
}
.otp-sent-note strong, .otp-sent-note span { display: block; }
.otp-sent-note strong { font-size: 13px; }
.otp-sent-note span { margin-top: 2px; color: var(--text-light); font-size: 11px; }
.otp-input {
  text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px !important;
  font-weight: 800; letter-spacing: 7px;
}
.forgot-resend { align-self: center; }
.forgot-success { padding: 8px 0 2px; text-align: center; }
.forgot-success > span {
  width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: var(--success); font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 800;
}
.forgot-success strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; }
.forgot-success p { margin: 6px auto 15px; max-width: 340px; color: var(--text-muted); font-size: 12px; }

@media (max-width: 620px) {
  .export-modal-card, .forgot-modal-card { width: calc(100vw - 16px); }
  .export-scope-grid { grid-template-columns: 1fr; }
}


/* V12: forgot password only inside Login Admin; reset flow stays public */
.login-help-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}
.login-help-row .text-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 760px) {
  #loginBtn { min-width: 0; }
}


/* V14: verify OTP before showing new password fields */
.otp-verified-note {
  border-color: rgba(38,170,153,.32);
  background: rgba(38,170,153,.1);
}


/* V15: dense all-visible mobile dashboard */
.mobile-role-badge,
.mobile-date { display: none; }

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
    gap: 9px;
  }

  .topbar { gap: 9px; }

  .brand-wrap {
    position: relative;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding-right: 58px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .brand-mark svg { width: 21px; height: 21px; }
  .brand-wrap h1 { font-size: 17px; }
  .brand-wrap p { margin-top: 1px; font-size: 10.5px; line-height: 1.3; }

  .mobile-role-badge {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 50px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 800;
  }

  .mobile-role-badge.role-admin {
    color: var(--success);
    border-color: rgba(38,170,153,.28);
    background: rgba(38,170,153,.08);
  }

  .mobile-role-badge.role-viewer {
    color: var(--info);
    border-color: rgba(33,150,243,.25);
    background: rgba(33,150,243,.07);
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .top-actions > * { width: 100%; min-width: 0; }

  .date-field {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .month-field {
    grid-column: 3 / 5;
    grid-row: 1;
  }

  #statisticsBtn {
    grid-column: 5;
    grid-row: 1;
  }

  #importBtn { grid-column: 1; grid-row: 2; }
  #exportBtn { grid-column: 2; grid-row: 2; }
  #resetBtn { grid-column: 3; grid-row: 2; }
  .auth-btn { grid-column: 4; grid-row: 2; }
  #themeBtn { grid-column: 5; grid-row: 2; }

  .viewer-mode #exportBtn { grid-column: 1 / 3; }
  .viewer-mode .auth-btn { grid-column: 3 / 5; }

  .top-actions .role-pill { display: none !important; }

  .compact-field,
  .top-actions .btn,
  .top-actions .icon-btn {
    min-height: 38px;
    height: 38px;
    border-radius: 8px;
  }

  .compact-field {
    padding: 4px 7px 4px 9px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
  }

  .compact-field span { font-size: 8.5px; }
  .compact-field input { font-size: 11px; min-width: 0; }

  .top-actions .btn {
    padding: 0 3px;
    gap: 4px;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .top-actions .btn svg { width: 14px; height: 14px; }
  #statisticsBtn { font-size: 0; }
  #statisticsBtn svg { width: 17px; height: 17px; }
  #themeBtn { width: 100%; justify-self: stretch; }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .stat-total,
  .stat-month {
    grid-column: span 2;
    min-height: 67px;
    padding: 9px 11px;
  }

  .stat-total strong,
  .stat-month strong { font-size: 23px; }

  .stat-card:nth-child(n+3) {
    min-height: 58px;
    padding: 8px 7px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }

  .stat-card:nth-child(n+3) span {
    font-size: 9.5px;
    line-height: 1;
  }

  .stat-card:nth-child(n+3) strong {
    align-self: flex-end;
    font-size: 21px;
    line-height: 1;
  }

  .stat-card:nth-child(n+3) small { display: none; }

  .workspace { gap: 9px; }

  .entry-panel {
    padding: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 8px 10px;
  }

  .entry-panel .card-head.compact { grid-column: 1; }
  .entry-panel .card-head.compact h2 { font-size: 14px; }
  .entry-panel .card-head.compact p { font-size: 9.5px; margin-top: 1px; }

  .entry-panel > .segmented {
    grid-column: 2;
    margin: 0;
    height: 34px;
  }

  .entry-panel > .tab-panel {
    grid-column: 1 / -1;
    width: 100%;
  }

  .segment { height: 28px; font-size: 10px; }

  #singleForm {
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) 58px 76px;
    gap: 7px;
    align-items: end;
  }

  #singleForm .single-meta-fields { display: contents; }
  #singleForm .single-order-field { grid-column: 1; grid-row: 1; }
  #singleForm .single-meta-fields > .field:first-child { grid-column: 2; grid-row: 1; }
  #singleForm .single-meta-fields > .field:last-child { grid-column: 3; grid-row: 1; }
  #singleForm .single-tracking-field { grid-column: 1 / 3; grid-row: 2; }
  #singleForm #singleSubmit { grid-column: 3; grid-row: 2; margin: 0; height: 38px; min-height: 38px; padding: 0 6px; font-size: 10px; }
  #singleForm .single-duplicate-alert,
  #singleForm .single-helper { grid-column: 1 / -1; }

  #singleForm .field { gap: 3px; }
  #singleForm .field > span { font-size: 9.5px; }
  #singleForm .field input,
  #singleForm .carrier-preview { height: 38px; }
  #singleForm .field input { padding: 0 9px; font-size: 11px; }
  #singleForm .input-with-icon input { padding-left: 31px; }
  #singleForm .input-with-icon svg { left: 8px; top: 10px; width: 16px; height: 16px; }
  #singleForm .carrier-preview { font-size: 9px; }
  #singleForm .single-helper { display: none; }

  #bulkTab { padding-top: 0; }
  #bulkTab .field textarea { min-height: 105px; max-height: 150px; }
  #bulkTab .paste-hint { margin: 6px 0; font-size: 9.5px; }
  #bulkSubmit { min-height: 38px; }

  .records-toolbar {
    padding: 10px 11px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .records-toolbar h2 { font-size: 14px; }
  .records-toolbar p { margin-top: 1px; font-size: 9.5px; white-space: nowrap; }
  .search-box { width: 100%; }
  .search-box input { height: 36px; padding: 0 31px 0 34px; font-size: 11px; }
  .search-box svg { left: 10px; top: 9px; width: 17px; height: 17px; }
  .search-box kbd { display: none; }

  .table-wrap {
    padding: 0;
    overflow: hidden;
  }

  .viewer-mode .table-wrap table,
  .table-wrap table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table-wrap thead { display: table-header-group; }
  .table-wrap tbody { display: table-row-group; }
  .table-wrap tbody tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .table-wrap th,
  .table-wrap td {
    display: table-cell;
    height: 36px;
    padding: 6px 3px;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    background: transparent !important;
  }

  .table-wrap th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 31px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: var(--surface-soft) !important;
    font-size: 7.7px;
    letter-spacing: 0;
  }

  .table-wrap td { font-size: 10px; }
  .table-wrap td::before { display: none; }
  .table-wrap tbody tr:hover td { background: var(--surface-soft) !important; }

  .admin-mode .table-wrap th:nth-child(1),
  .admin-mode .table-wrap td:nth-child(1) { width: 6%; text-align: center !important; }
  .admin-mode .table-wrap th:nth-child(2),
  .admin-mode .table-wrap td:nth-child(2) { width: 14%; }
  .admin-mode .table-wrap th:nth-child(3),
  .admin-mode .table-wrap td:nth-child(3) { width: 7%; text-align: center !important; }
  .admin-mode .table-wrap th:nth-child(4),
  .admin-mode .table-wrap td:nth-child(4) { width: 34%; }
  .admin-mode .table-wrap th:nth-child(5),
  .admin-mode .table-wrap td:nth-child(5) { width: 11%; }
  .admin-mode .table-wrap th:nth-child(6),
  .admin-mode .table-wrap td:nth-child(6) { width: 19%; }
  .admin-mode .table-wrap th:nth-child(7),
  .admin-mode .table-wrap td:nth-child(7) { width: 9%; text-align: center !important; }

  .viewer-mode .table-wrap th:nth-child(1),
  .viewer-mode .table-wrap td:nth-child(1) { width: 6%; text-align: center !important; }
  .viewer-mode .table-wrap th:nth-child(2),
  .viewer-mode .table-wrap td:nth-child(2) { width: 15%; }
  .viewer-mode .table-wrap th:nth-child(3),
  .viewer-mode .table-wrap td:nth-child(3) { width: 7%; text-align: center !important; }
  .viewer-mode .table-wrap th:nth-child(4),
  .viewer-mode .table-wrap td:nth-child(4) { width: 38%; }
  .viewer-mode .table-wrap th:nth-child(5),
  .viewer-mode .table-wrap td:nth-child(5) { width: 12%; }
  .viewer-mode .table-wrap th:nth-child(6),
  .viewer-mode .table-wrap td:nth-child(6) { width: 22%; }

  .table-wrap .tracking-text {
    display: block;
    width: 100%;
    font-size: 8.5px;
    letter-spacing: -.25px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-wrap .order-code-text { font-size: 10px; }
  .table-wrap .badge {
    min-width: 35px;
    height: 19px;
    padding: 0 4px;
    font-size: 8.5px;
  }

  .desktop-date { display: none !important; }
  .mobile-date { display: inline !important; font-size: 9px; }

  .table-wrap .delete-btn {
    width: 27px;
    height: 27px;
    margin: 0 auto;
    border: 0;
    border-radius: 6px;
    background: transparent;
  }

  .table-wrap .delete-btn svg { width: 14px; height: 14px; }

  .table-wrap .editable-cell.editing { padding: 3px 2px; }
  .table-wrap .inline-editor,
  .table-wrap .editable-cell[data-field="tracking_number"] .inline-editor,
  .table-wrap .editable-cell[data-field="packing_date"] .inline-editor {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 4px;
    font-size: 9px;
  }

  .table-wrap .state-cell {
    display: table-cell;
    height: 110px;
    padding: 20px 8px !important;
    text-align: center !important;
  }

  .records-footer {
    min-height: 32px;
    padding: 0 10px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 9px;
  }

  .records-footer > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .app-shell { padding: 8px; }
  .top-actions { gap: 5px; }
  .top-actions .btn { font-size: 8.7px; }
  .compact-field input { font-size: 10px; }
  .stats-grid { gap: 5px; }
  .stat-total, .stat-month { padding: 8px 9px; }
  .stat-card:nth-child(n+3) { padding: 7px 6px; }
  .entry-panel { grid-template-columns: minmax(0, 1fr) 132px; }
  #singleForm { grid-template-columns: minmax(0, 1.25fr) 52px 68px; gap: 6px; }
  .records-toolbar { grid-template-columns: 104px minmax(0, 1fr); }
  .table-wrap th { font-size: 7px; }
  .table-wrap td { padding-left: 2px; padding-right: 2px; font-size: 9px; }
  .table-wrap .tracking-text { font-size: 7.7px; }
  .table-wrap .mobile-date { font-size: 8.2px; }
}