/* ETA Desk V16 — refined, interface-only visual layer.
   This file intentionally does not alter application requests, upload/signing, or stored data. */
:root {
  --navy: #12243e;
  --navy-light: #203858;
  --primary: #315ec9;
  --primary-hover: #234faf;
  --primary-soft: #edf3ff;
  --ink: #1b2a42;
  --ink-soft: #40516b;
  --muted: #73839a;
  --line: #e5ebf3;
  --surface: #fff;
  --canvas: #f5f7fb;
  --success: #0f9b83;
  --success-soft: #e8f8f2;
  --error: #d65b65;
  --error-soft: #fff0f1;
  --shadow: 0 8px 28px rgba(20, 38, 70, .035);
  --radius: 17px;
}
html { scroll-padding-top: 95px; }
body { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; color: var(--ink); font-size: 13px; line-height: 1.7; }
:where(button, input, select, a, summary):focus-visible { outline: 3px solid rgba(49,94,201,.35); outline-offset: 3px; }
button, input, select { font-family: inherit; }
::selection { background: #d9e7ff; color: #17386d; }

/* App shell and refined navigation */
.sidebar {
  width: 252px;
  padding: 24px 14px 18px;
  background: linear-gradient(168deg, #152943 0%, #14243a 47%, #0f1c2e 100%);
  border-left: 1px solid rgba(255,255,255,.035);
  scrollbar-color: #405473 transparent;
}
.brand { padding: 4px 12px 31px; gap: 11px; }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(145deg, #5378ef, #315fcf); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 24px rgba(33,71,163,.3); }
.brand-symbol { width: 23px; height: 23px; }
.brand-text strong { font-size: 23px; letter-spacing: -.55px; }
.brand-text strong span { color: #bfccfc; }
.brand-text small { margin-top: 4px; font-size: 10px; color: #9bb0cf; letter-spacing: .12px; }
.sidebar-overline { color: #8296b4; font-size: 10px; letter-spacing: .5px; font-weight: 720; padding: 0 13px 10px; }
.sidebar-section { padding-top: 28px; }
.side-nav { gap: 4px; }
.nav-link { position: relative; min-height: 44px; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #bdcbe0; font-size: 12.2px; font-weight: 570; }
.nav-link .ico { height: 17px; width: 17px; color: #91abc9; }
.nav-link:hover { background: rgba(255,255,255,.065); color: #fff; }
.nav-link.active { background: #2e4b80; color: #fff; box-shadow: inset 0 0 0 1px rgba(190,215,255,.07); font-weight: 740; }
.nav-link.active:before { content: ''; position: absolute; right: -14px; top: 10px; bottom: 10px; width: 3px; background: #83aaff; border-radius: 6px 0 0 6px; }
.nav-link.active .ico { color: #f2f5ff; }
.nav-new { color: #b7cbf8; background: rgba(122,164,234,.17); border: 1px solid rgba(122,164,234,.13); border-radius: 5px; padding: 1px 6px; font-size: 9px; }
.sidebar-bottom { padding: 24px 2px 0; }
.sidebar-support { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border: 1px solid rgba(165,190,225,.14); background: rgba(255,255,255,.035); border-radius: 12px; }
.sidebar-support-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #8be0d1; background: rgba(29,188,154,.11); }
.sidebar-support-icon .ico { width: 18px; height: 18px; }
.sidebar-support>div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar-support strong { font-size: 10.6px; color: #e3eaf8; font-weight: 720; }
.sidebar-support span:last-child { font-size: 9.5px; color: #94a8c4; }
.sidebar-footer { padding: 16px 8px 1px; color: #8295b1; font-size: 10px; }

/* Global header & page rhythm */
.topbar { position: sticky; top: 0; z-index: 10; height: 75px; padding: 0 38px; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-bottom: 1px solid #e8edf4; }
.topbar-location { gap: 11px; }
.topbar-location strong { font-weight: 750; color: #213049; font-size: 12.8px; }
.breadcrumb-root { color: #95a1b3; font-size: 11.7px; }
.topbar-actions { gap: 13px; }
.topbar-shortcut { display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #dce6fa; background: #f4f7fe; border-radius: 9px; color: #3759a3; font-size: 11.4px; font-weight: 760; transition: background .15s, transform .15s; }
.topbar-shortcut:hover { background: #e9f0fe; transform: translateY(-1px); }
.mode-pill { padding: 7px 12px; border-color: #d4ece4; background: #effbf6; color: #14836f; font-size: 10.5px; font-weight: 750; }
.mode-pill.mode-live { border-color: #f7dfb4; background: #fff9ec; color: #a56f19; }
.profile-avatar { height: 37px; width: 37px; color: #4768ba; background: #edf3ff; border-radius: 11px; }
.profile-info strong { font-size: 11.6px; color: #26364f; }
.profile-info small { font-size: 9.8px; color: #9aa8ba; }
.content { max-width: 1650px; padding: 31px 38px 12px; }
.page-heading { align-items: flex-end; margin-bottom: 23px; gap: 14px; }
.eyebrow { color: #3664c5; font-size: 10.5px; letter-spacing: .15px; gap: 8px; }
.eyebrow-dot { width: 7px; height: 7px; background: #3f71d7; box-shadow: 0 0 0 4px #eaf1ff; }
.page-heading h1 { font-size: 28px; margin: 4px 0 5px; letter-spacing: -.6px; line-height: 1.55; font-weight: 800; }
.heading-accent { color: #345fc4; }
.page-heading p { color: #8190a5; font-size: 11.8px; line-height: 1.85; }
.heading-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 3px; }
.button { border-radius: 9px; min-height: 41px; padding: 9px 16px; font-size: 11.7px; font-weight: 760; gap: 8px; }
.button .ico { width: 16px; height: 16px; }
.button-primary { color: #fff; background: #315ec9; box-shadow: 0 5px 13px rgba(49,94,201,.14); }
.button-primary:hover { background: #244eaf; box-shadow: 0 8px 19px rgba(49,94,201,.21); }
.button-secondary { border: 1px solid #dce4ef; background: #fff; color: #425570; }
.button-secondary:hover { background: #fafcff; border-color: #bdcbe1; }
.button-white { color: #1b407c; background: #fff; box-shadow: 0 5px 16px rgba(8,32,67,.15); }
.button-white:hover { background: #f5f8ff; }
.button-large { padding: 12px 18px; min-height: 47px; }
.page-footer { font-size: 10.3px; color: #94a1b2; margin-top: 16px; padding-top: 19px; }

/* The operational hero: real context rather than decorative mock invoices */
.workspace-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,.89fr); min-height: 250px; gap: clamp(18px,3vw,55px); overflow: hidden; margin-bottom: 17px; padding: 30px 35px; border-radius: 18px; background: linear-gradient(113deg, #1b3e61 0%, #193457 55%, #192e4e 100%); border: 1px solid #314a68; box-shadow: 0 11px 24px rgba(31,51,81,.095); }
.workspace-hero:before { content: ''; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.045); border-radius: 50%; right: -180px; bottom: -172px; box-shadow: 0 0 0 51px rgba(255,255,255,.022), 0 0 0 105px rgba(255,255,255,.012); pointer-events: none; }
.hero-copy { color: #fff; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-label { display: inline-flex; align-items: center; gap: 8px; color: #bbd2f4; background: rgba(164,200,251,.09); border: 1px solid rgba(186,209,240,.15); padding: 4px 10px; border-radius: 7px; font-size: 10.6px; font-weight: 730; }
.hero-copy h2 { margin: 10px 0 7px; font-size: clamp(23px,2.3vw,30px); line-height: 1.55; font-weight: 800; letter-spacing: -.35px; }
.hero-copy h2 span { color: #c4d7f3; }
.hero-copy p { color: #b4c8e4; max-width: 475px; font-size: 11.3px; margin: 0 0 19px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
.hero-secondary-link { color: #dbe8fd; display: inline-flex; align-items: center; gap: 8px; font-size: 11.7px; font-weight: 720; }
.hero-secondary-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hero-overview { position: relative; z-index: 1; min-width: 0; background: #fff; border: 1px solid rgba(230,237,247,.98); border-radius: 13px; padding: 19px 20px 15px; box-shadow: 0 13px 30px rgba(8,19,35,.13); }
.hero-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; color: #7a879a; font-weight: 740; }
.hero-environment { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; font-size: 9.5px; padding: 4px 9px; font-weight: 740; white-space: nowrap; }
.hero-environment span { width: 6px; height: 6px; border-radius: 100%; background: currentColor; }
.hero-environment.is-test { background: #edf8f5; color: #158b76; }
.hero-environment.is-live { background: #fff4de; color: #af781e; }
.hero-overview-company { display: flex; align-items: center; gap: 11px; margin-top: 16px; min-width: 0; }
.hero-company-avatar { width: 43px; height: 43px; border-radius: 10px; background: #edf3ff; color: #416bc6; display: grid; place-items: center; flex: none; }
.hero-company-avatar .ico { width: 21px; height: 21px; }
.hero-overview-company>div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-overview-company strong { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-overview-company small { color: #8b9aad; font-size: 10px; line-height: 1.5; direction: ltr; text-align: right; }
.hero-overview-divider { height: 1px; background: #eef1f7; margin: 17px 0 12px; }
.hero-overview-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.hero-overview-numbers>div { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid #eaf0f5; }
.hero-overview-numbers>div:last-child { border-left: 0; }
.hero-overview-numbers strong { font-size: 19px; font-weight: 790; font-variant-numeric: tabular-nums; line-height: 1.5; }
.hero-overview-numbers span { font-size: 9.7px; color: #8291a8; }
.hero-manage { display: flex; justify-content: space-between; gap: 9px; color: #3d65b7; font-size: 10.7px; font-weight: 750; margin-top: 12px; }
.hero-manage:hover { color: #204c9c; }
.hero-manage .ico { width: 15px; height: 15px; }

/* High-contrast real metrics */
.metrics-grid { gap: 14px; margin-bottom: 25px; }
.metric-card { position: relative; padding: 19px 20px 20px; border-radius: 13px; background: #fff; border: 1px solid #e5eaf2; box-shadow: 0 4px 17px rgba(24,45,77,.025); overflow: hidden; }
.metric-card:before { content: ''; width: 45px; height: 3px; position: absolute; top: 0; right: 19px; border-radius: 0 0 5px 5px; background: #8c9fdf; }
.metric-card:nth-child(2):before { background: #5c88e6; }
.metric-card:nth-child(3):before { background: #22b496; }
.metric-card:nth-child(4):before { background: #e28c92; }
.metric-top { flex-direction: row-reverse; justify-content: space-between; gap: 9px; }
.metric-label { font-size: 11.8px; color: #62728b; font-weight: 750; text-align: right; }
.metric-icon { height: 41px; width: 41px; border-radius: 10px; }
.metric-icon .ico { width: 18px; height: 18px; }
.metric-indigo { background: #f0edfc; color: #675cbd; }
.metric-blue { background: #edf3ff; color: #3968c1; }
.metric-green { background: #e7f8f3; color: #0e967d; }
.metric-rose { background: #fff0f1; color: #d56877; }
.metric-value { font-size: 31px; margin: 10px 0 2px; text-align: right; direction: ltr; font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; font-weight: 750; color: #20304b; letter-spacing: -.8px; }
.metric-caption { font-size: 10.3px; color: #98a5b6; margin-top: 0; }

/* Editorial dividers instead of stacked, repeated headers */
.section-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 4px 1px 14px; }
.section-caption-top { display: block; color: #5576ae; font-size: 10.1px; font-weight: 770; margin-bottom: 0; }
.section-caption h2 { margin: 0; line-height: 1.65; color: #21324e; font-size: 15.3px; font-weight: 780; }
.section-caption-detail { color: #95a2b3; font-size: 10.5px; padding-bottom: 2px; }
.section-caption-sm { margin-top: 10px; }
.caption-link { color: #406ac0; font-size: 11px; font-weight: 730; display: inline-flex; align-items: center; gap: 5px; }
.caption-link:hover { text-decoration: underline; }
.section-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 17px; }
.section-grid .panel { margin-bottom: 24px; }
.panel { border: 1px solid #e5ebf3; border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 23px; }
.panel-header { padding: 21px 23px 18px; align-items: center; }
.panel-header h2 { color: #22324d; font-size: 14.3px; font-weight: 800; gap: 9px; margin-bottom: 3px; }
.panel-header p { font-size: 10.8px; color: #94a1b3; line-height: 1.8; }
.section-kicker { font-size: 9.8px; color: #5c7ab2; font-weight: 800; }
.title-ico { color: #5579c7; width: 17px; height: 17px; }
.subtle-count { color: #506787; font-size: 10px; background: #f0f4fa; padding: 5px 10px; font-weight: 770; }
.panel-content { padding: 0 23px 24px; }
.active-company { background: #f8faff; border: 1px solid #e8eef8; padding: 14px; border-radius: 10px; }
.company-icon { background: #eaf1ff; color: #4774c9; }
.active-company-text b { font-size: 12.4px; }
.active-company-text span { font-size: 10px; }
.company-tag { background: #e4f7ef; color: #17896f; }
.field-label, .form-field label { font-size: 11.5px; color: #4d5f7c; font-weight: 720; margin-bottom: 7px; }
.select-action-row { gap: 10px; }
.divider-line { background: #e9edf4; }
.quick-list { padding-top: 0; }
.quick-item { padding: 12px 0; gap: 13px; }
.quick-item b { color: #263753; font-size: 11.8px; }
.quick-item small { font-size: 10.1px; color: #96a4b5; }
.quick-icon { border-radius: 10px; width: 40px; height: 40px; }
.quick-arrow { color: #8d9db4; }

/* All input controls get a consistent baseline & breathing room */
input:not([type=file]), select { border: 1px solid #dfe6f0; border-radius: 9px; min-height: 44px; padding: 10px 13px; font-size: 11.7px; color: #2f425d; background: #fff; }
input::placeholder { color: #9eabbc; }
input:focus, select:focus { border-color: #80a3e6; box-shadow: 0 0 0 3px rgba(56,105,210,.1); }
.form-grid { gap: 16px 18px; }
.password-toggle { top: 5px; }

/* Invoice upload — clear single primary action */
.upload-layout { grid-template-columns: minmax(0,1.6fr) minmax(215px,.75fr); border-color: #e8edf5; }
.upload-main { padding: 24px 23px 25px; }
.upload-context { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #edf1f6; }
.upload-context strong { font-size: 12px; }
.context-icon { border-radius: 9px; }
.mode-chip { font-size: 10px; border-radius: 7px; }
.drop-zone { min-height: 218px; border-radius: 12px; border: 1.5px dashed #b9cbee; background: #f9fbff; gap: 7px; }
.drop-zone:hover, .drop-zone.dragging { border-color: #678fe2; background: #f1f6ff; }
.drop-zone.has-file { border-color: #42b99f; background: #f4fbf8; }
.drop-icon { width: 48px; height: 48px; border-radius: 12px; background: #e8f0ff; color: #557dd6; margin-bottom: 5px; }
.drop-zone strong { color: #354969; font-size: 12.8px; }
.drop-zone > span:not(.drop-icon):not(.drop-select) { color: #93a2b7; font-size: 10.8px; }
.drop-select { color: #3766c0; font-size: 11.1px; border-radius: 7px; padding: 7px 16px; margin-top: 4px; }
.upload-bottom { gap: 10px; margin-top: 19px; }
.upload-trust { font-size: 10.4px; color: #8293a9; }
.upload-guide { padding: 27px 23px; gap: 23px; border-color: #eaf0f7; background: #fbfcff; }
.guide-heading { color: #344b6f; font-size: 12px; font-weight: 780; }
.guide-number { background: #e8f1ff; color: #5074c2; border-radius: 8px; width: 27px; height: 27px; }
.guide-step b { color: #324765; font-size: 11.6px; }
.guide-step small { font-size: 10.2px; line-height: 1.9; color: #94a3b5; }

/* Data tables optimized for wide IDs and RTL text */
.result-toolbar { padding: 0 23px 15px; }
.result-count { font-size: 10.7px; }
.utility-link { font-size: 10.1px; background: #f8faff; border-color: #e8edf5; }
.utility-link:hover { background: #edf3ff; }
.data-table th { color: #667a94; font-size: 10.6px; padding: 14px 16px; background: #f7f9fd; border-color: #e6edf5; }
.data-table td { color: #4d607a; font-size: 11.3px; padding: 14px 16px; border-color: #eff2f6; }
.data-table tbody tr:nth-child(even) { background: #fcfdff; }
.data-table tbody tr:hover { background: #f2f7ff; }
.data-table td.cell-company { color: #223650; }
.mono { font-family: 'Consolas', 'Inter', 'Segoe UI', monospace; font-size: 10.5px!important; }
.status-badge { font-size: 10.3px; font-weight: 760; padding: 5px 10px; border-radius: 7px; }
.status-badge.status-good { color: #0e8972; background: #e5f7ee; }
.status-badge.status-bad { color: #c94e5b; background: #fff0f1; }
.status-badge.status-neutral { color: #637891; background: #edf1f7; }
.error-details summary { color: #3161c2; font-weight: 700; }
.error-details pre { border-radius: 10px; padding: 14px; font-size: 10.5px; }
.table-footnote { font-size: 10.5px; color: #778ba5; background: #fafcff; padding: 13px 23px; }
.empty-state { padding: 46px 16px; gap: 9px; }
.empty-state strong { font-size: 13px; }

/* Settings show visually distinct, well-labeled groups */
.settings-form { padding: 0 23px 23px; }
.form-section { padding: 22px 0 27px; border-color: #e9eef5; }
.form-section-heading { margin-bottom: 19px; gap: 12px; }
.form-section-icon { width: 39px; height: 39px; border-radius: 10px; background: #edf3ff; }
.form-section-heading h3 { font-size: 12.7px; color: #273a58; }
.form-section-heading p { font-size: 10.7px; color: #95a3b5; }
.settings-actions { padding-top: 21px; }
.settings-actions>span { font-size: 10.5px; }
.danger-zone { background: #fffcfc; border-color: #f7e9ec; padding: 19px 23px; }
.danger-zone p { font-size: 10.6px; }

/* Reports: clear filtering and export surfaces */
.reports-filters .panel-header { padding-bottom: 17px; }
.filters-form { padding: 0 23px 24px; }
.filters-grid { gap: 15px; }
.filter-submit .button { min-height: 44px; max-height: none; }
.search-field>.ico { top: 13px; }
.reports-dashboard-grid { gap: 17px; }
.status-breakdown { gap: 24px; padding: 9px 25px 27px; }
.donut { width: 166px; height: 166px; background: conic-gradient(#1fb597 0% calc(var(--good)*1%), #e07780 calc(var(--good)*1%) calc((var(--good) + var(--bad))*1%), #dce5f0 calc((var(--good) + var(--bad))*1%) 100%); }
.donut-inner { width: 122px; height: 122px; }
.donut-inner strong { font-family: 'Inter', 'Segoe UI', sans-serif; font-weight: 780; color: #203650; font-size: 28px; }
.donut-inner span { color: #97a6b9; }
.legend { gap: 20px; }
.legend>div { color: #62778e; font-size: 11.2px; }
.legend>div strong { color: #293d58; font-family: 'Inter','Segoe UI',sans-serif; font-size: 12.4px; }
.legend-green { background: #1fb597; }
.legend-red { background: #e07780; }
.legend-gray { background: #dce5f0; }
.export-actions { padding: 0 23px 14px; gap: 11px; }
.export-card { padding: 14px; gap: 12px; border-radius: 10px; background: #fff; }
.export-card:hover { background: #f6f9ff; border-color: #cddcf2; }
.export-card strong { font-size: 11.8px; color: #273958; }
.export-card small { font-size: 10px; }
.export-icon { width: 41px; height: 41px; border-radius: 10px; }
.security-note { margin: 0 23px 23px; border: 1px solid #faecd2; border-radius: 8px; background: #fffbf3; font-size: 10.1px; color: #957338; }
.reports-table-panel .panel-header { padding-bottom: 19px; }

@media(max-width:1320px) {
  .sidebar { width: 234px; }
  .content { padding: 29px 26px 12px; }
  .topbar { padding: 0 26px; }
  .workspace-hero { padding: 27px 28px; grid-template-columns: minmax(0,1fr) minmax(280px,.84fr); gap: 23px; }
  .hero-copy h2 { font-size: 25px; }
  .metric-card { padding: 18px 16px; }
}
@media(max-width:1120px) {
  .section-grid { grid-template-columns: 1fr; }
  .section-grid .panel { margin-bottom: 5px; }
  .quick-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .quick-item { border-bottom: 0; padding: 10px 0; }
  .quick-item .quick-arrow { display: none; }
}
@media(max-width:980px) {
  .sidebar { position: fixed; width: 252px; right: 0; top: 0; height: 100vh; transform: translateX(105%); }
  .topbar { height: 67px; }
  .menu-button { display: grid!important; }
  .workspace-hero { grid-template-columns: minmax(0,1.05fr) minmax(280px,.95fr); padding: 25px; }
  .hero-copy h2 { font-size: 23px; }
}
@media(max-width:760px) {
  .content { padding: 23px 17px 10px; }
  .topbar { padding: 0 18px; }
  .topbar-shortcut { display: none; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 11.4px; }
  .heading-actions { gap: 8px; }
  .workspace-hero { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .hero-copy h2 { font-size: 24px; }
  .hero-overview { width: 100%; }
  .metrics-grid { gap: 11px; }
  .metric-card { padding: 16px; }
  .metric-top { flex-direction: row-reverse; }
  .quick-list { grid-template-columns: 1fr 1fr; }
  .upload-layout { grid-template-columns: 1fr; }
  .upload-guide { border-right: 0; border-top: 1px solid #eaf0f7; }
  .reports-dashboard-grid { grid-template-columns: 1fr; }
  .section-caption-detail { display: none; }
}
@media(max-width:560px) {
  .content { padding: 20px 13px 9px; }
  .topbar { padding: 0 13px; }
  .profile-info { max-width: 119px; }
  .profile-info strong { font-size: 10.4px; }
  .page-heading { gap: 13px; margin: 0 2px 17px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { font-size: 10.8px; }
  .heading-actions { flex-wrap: wrap; width: 100%; }
  .heading-actions .button { flex: 1; padding: 9px 10px; min-height: 40px; font-size: 10.7px; }
  .workspace-hero { padding: 20px; border-radius: 13px; margin-bottom: 14px; }
  .hero-label { font-size: 10px; }
  .hero-copy h2 { font-size: 23px; line-height: 1.5; }
  .hero-copy p { font-size: 10.6px; }
  .hero-actions { gap: 17px; }
  .hero-overview { padding: 15px; }
  .metrics-grid { gap: 9px; }
  .metric-card { padding: 15px 13px; border-radius: 11px; }
  .metric-top { flex-direction: column; align-items: flex-start; gap: 9px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-label { font-size: 10.7px; }
  .metric-value { font-size: 25px; margin: 7px 0 3px; }
  .metric-caption { font-size: 9.6px; }
  .section-caption { margin: 12px 3px 12px; }
  .section-caption h2 { font-size: 13px; }
  .panel-header { padding: 19px 17px 16px; }
  .panel-header h2 { font-size: 13.8px; }
  .panel-header p { font-size: 10.4px; }
  .panel-content { padding: 0 17px 20px; }
  .quick-list { grid-template-columns: 1fr; gap: 0; }
  .quick-item { border-bottom: 1px solid #edf0f5; }
  .upload-main { padding: 19px 17px 21px; }
  .drop-zone { min-height: 205px; }
  .result-toolbar { padding: 0 17px 15px; }
  .settings-form { padding: 0 17px 20px; }
  .danger-zone { padding: 18px 17px; }
  .filters-form { padding: 0 17px 20px; }
  .status-breakdown { padding: 9px 16px 23px; }
  .export-actions { padding: 0 17px 15px; }
  .security-note { margin: 0 17px 17px; }
  .page-footer { gap: 3px; }
}
@media(prefers-reduced-motion:reduce) {
  .button, .nav-link, .topbar-shortcut, .hero-secondary-link { transition: none; }
}
/* Small screens: never let the page title compete with action buttons for width. */
@media(max-width:760px) {
  .page-heading { flex-direction: column; align-items: stretch; }
  .heading-actions { width: 100%; justify-content: flex-start; }
}