:root {
  --background: #f4f7fb;
  --surface: #fff;
  --ink: #142439;
  --muted: #506078;
  --line: #dce5ef;
  --line-soft: #e9eef5;
  --primary: #1d55c5;
  --primary-dark: #1745a3;
  --navy: #132339;
  --sidebar-text: #bdcadd;
  --teal: #11695e;
  --amber: #855507;
  --radius: 14px;
  --shadow: 0 1px 2px #16365b0a;
  font-family: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--background);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .53; }
a { color: var(--primary-dark); }
svg { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.3; }
:focus-visible { outline: 3px solid #5e92f3; outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 9; padding: 8px 14px; transform: translateY(-150%); background: white; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.app-shell { --sidebar-width: 220px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--navy); color: white; display: flex; flex-direction: column; z-index: 5; padding: 25px 14px 14px; }
.brand { display: flex; align-items: center; gap: 11px; width: 100%; padding: 0 9px 23px; border: 0; border-bottom: 1px solid #ffffff18; color: white; background: transparent; text-align: left; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #eaf6ff; background: linear-gradient(145deg, #3775e5, #204fbc); box-shadow: inset 0 1px 1px #ffffff35; }
.brand strong { display: block; font-size: 17px; letter-spacing: .035em; font-weight: 760; }
.brand small { display: block; margin-top: 1px; color: #aebed4; font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.nav-groups { display: grid; gap: 20px; padding-top: 20px; overflow-y: auto; }
.nav-group { display: grid; gap: 3px; }
.nav-label { color: #9fb1cb; font-size: 11px; letter-spacing: .075em; font-weight: 650; padding: 0 12px 5px; }
.nav-link { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; color: var(--sidebar-text); background: transparent; padding: 9px 11px; text-align: left; min-height: 39px; width: 100%; }
.nav-link:hover { background: #ffffff10; color: white; }
.nav-link.nav-active { color: #fff; background: #284775; font-weight: 700; box-shadow: inset 3px 0 #78a8ff; }
.sidebar-footer { margin-top: auto; padding-top: 12px; }
.sidebar-demo { display: flex; gap: 8px; align-items: center; margin: 4px 4px 6px; padding: 8px 9px; border: 1px solid #6e8fb935; border-radius: 9px; color: #cfdef3; font-size: 12px; }
.demo-dot, .demo-pill > span { background: #71c9b4; width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
.reset-link { min-height: 33px; font-size: 12px; }
.main-shell { margin-left: var(--sidebar-width); min-width: 0; }
.topbar { height: 65px; position: sticky; top: 0; z-index: 4; background: #fffffffa; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 clamp(14px, 3vw, 34px); }
.crumb, .topbar-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.crumb { color: var(--muted); font-size: 13px; }
.crumb [aria-current] { color: var(--ink); font-weight: 700; }
.demo-pill { display: inline-flex; gap: 6px; align-items: center; border-radius: 20px; border: 1px solid #cfe7df; background: #eef8f5; padding: 4px 9px; color: #28685c; font-size: 11px; font-weight: 700; }
.demo-pill > span { background: #328879; width: 6px; height: 6px; flex-basis: 6px; }
.profile-wrap { position: relative; }
.profile { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 3px 6px; }
.profile:hover { background: #f2f6fc; border-color: var(--line-soft); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #214d9f; background: #e9f0ff; font-weight: 750; }
.profile-text strong, .profile-text small { display: block; line-height: 1.25; }
.profile-text strong { font-size: 12px; }
.profile-text small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.profile-menu { position: absolute; right: 0; top: calc(100% + 9px); min-width: 155px; padding: 5px; z-index: 8; }
.profile-menu button { width: 100%; border: 0; border-radius: 8px; background: transparent; text-align: left; padding: 8px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.profile-menu button:hover { background: #eef4ff; }
.mobile-menu, .mobile-overlay { display: none !important; }

.page-content { max-width: 1560px; margin: 0 auto; padding: 27px clamp(14px, 3vw, 34px) 42px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 21px; }
.page-heading h1 { font-size: clamp(24px, 2.7vw, 34px); font-weight: 770; letter-spacing: -.032em; }
.page-heading p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.page-actions, .actions, .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.page-content > .panel + .panel, .page-content > .notice + .panel, .page-content > .panel + .split { margin-top: 15px; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stack > * { min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 15px; align-items: start; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 9px; }
.kv { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 7px 13px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv > div:has(> dt, > dd) { display: contents; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 17px 13px; }
.panel-header h2, .section-title { font-size: 16px; font-weight: 750; }
.panel-header h3 { font-size: 14px; font-weight: 730; }
.panel-header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.panel-body { padding: 0 17px 16px; }
.panel > .panel-body:first-child { padding-top: 16px; }
.subtle, .muted { color: var(--muted); }
.subtle { font-size: 12px; }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.mono, .num, .amount { font-variant-numeric: tabular-nums; }
.num { text-align: right !important; }
.amount { font-weight: 730; white-space: nowrap; }
.btn, .icon-btn, .text-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.btn { min-height: 36px; padding: 7px 12px; border: 1px solid transparent; border-radius: 8px; font-weight: 650; line-height: 1.3; white-space: nowrap; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 2px 4px #285ab025; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { background: white; border-color: #cedaea; color: var(--ink); }
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: #eef4fe; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--primary-dark); }
.btn-danger { border-color: #f0c7c8; color: #9e2e35; background: #fff4f4; }
.btn-danger:hover:not(:disabled) { background: #ffe6e6; }
.btn-small, .btn-sm { min-height: 29px; padding: 4px 8px; font-size: 12px; }
.icon-btn { min-height: 32px; min-width: 32px; padding: 4px; border: 0; border-radius: 7px; background: transparent; color: inherit; }
.icon-btn:hover { background: #526b8a14; }
.text-link { border: 0; background: transparent; color: var(--primary-dark); font-size: 12px; font-weight: 700; padding: 3px 0; text-align: left; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-weight: 650; font-size: 12px; }
.input, input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { min-width: 0; max-width: 100%; min-height: 37px; border: 1px solid #cdd8e6; border-radius: 8px; padding: 7px 9px; background: #fff; color: var(--ink); }
.input { width: 100%; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #617189; }
select { cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
.notice { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #f6f8fb; color: #3e506a; font-size: 12px; }
.notice svg { margin-top: 2px; }
.notice-amber, .notice.warning { background: #fff7e9; border-color: #f0dbb8; color: #754508; }
.notice-green, .notice.success { background: #edf8f4; border-color: #cde8dd; color: #186352; }
.notice-blue, .notice.info { background: #eff5ff; border-color: #d3e3fb; color: #254e91; }
.notice-red, .notice.error { background: #fff1f1; border-color: #f3cdd0; color: #922b35; }
.badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; min-height: 21px; padding: 2px 7px; background: #edf1f6; border: 1px solid #dee6ef; color: #495c75; font-size: 11px; border-radius: 20px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.badge-green, .badge-success { color: #146656; background: #e8f5ef; border-color: #cbe8da; }
.badge-amber, .badge-warning { color: #80500a; background: #fff3dc; border-color: #f1deb7; }
.badge-blue, .badge-info { color: #245098; background: #eaf1ff; border-color: #d5e3fa; }
.badge-purple { color: #634895; background: #f1ebfb; border-color: #e2d5f5; }
.badge-red, .badge-danger { color: #9e3139; background: #ffeded; border-color: #f1cace; }
.table-wrap { overflow-x: auto; min-width: 0; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.data-table th, .data-table td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table th:first-child, .data-table td:first-child { padding-left: 17px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 17px; }
.data-table th { background: #f5f8fc; color: #4b5f79; font-size: 11px; font-weight: 750; white-space: nowrap; letter-spacing: .018em; }
.data-table tbody tr:hover { background: #f7faff; }
.data-table tbody tr.is-selected, .data-table tbody tr:has([aria-pressed=true]) { background: #eef5ff; }
.data-table tr:last-child td { border-bottom: none; }
.table-wrap:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.data-table small { color: var(--muted); }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f3f6fb; width: fit-content; }
.segmented button { border: 0; background: transparent; padding: 5px 9px; border-radius: 6px; color: var(--muted); }
.segmented .is-current, .segmented .active, .segmented [aria-pressed=true] { background: white; color: var(--primary-dark); box-shadow: 0 1px 3px #18385b1d; font-weight: 700; }
.flow { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.flow-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: #f1f5fa; color: var(--muted); font-size: 12px; }
.flow-step.is-current { background: #e9f1ff; color: #1e50a5; font-weight: 700; }
.flow-step.is-done { background: #ebf8f2; color: #186556; }
.empty { min-height: 135px; padding: 22px 12px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #4973b1; background: #eef4fc; }
.empty p { color: var(--muted); font-size: 12px; max-width: 420px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.metric { padding: 14px 15px 13px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.metric-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.tone-teal { color: #197567; background: #e9f6f1; }
.tone-amber { color: #a05e10; background: #fff2de; }
.tone-blue { color: #2d5db0; background: #eaf1ff; }
.tone-slate { color: #4d6384; background: #eef3f9; }
.metric-count { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { font-weight: 760; font-variant-numeric: tabular-nums; font-size: clamp(16px, 2.2vw, 25px); letter-spacing: -.025em; margin-top: 2px; white-space: nowrap; }
.workflow-strip { padding: 14px 15px 15px; background: linear-gradient(115deg, #f3f7ff 2%, #fff 78%); margin-bottom: 15px; }
.workflow-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.workflow-heading h2 { font-size: 15px; font-weight: 750; }
.workflow-heading span { color: var(--muted); font-size: 11px; }
.overview-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.overview-step { display: flex; gap: 8px; align-items: center; text-align: left; background: #fff; border: 1px solid #dce6f4; border-radius: 10px; padding: 9px; min-width: 0; }
.overview-step:hover { border-color: #9eb9e9; background: #f7faff; }
.step-icon { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #eaf1ff; color: #325eb0; }
.overview-step strong, .overview-step small { display: block; }
.overview-step strong { font-size: 13px; }
.overview-step small { color: var(--muted); font-size: 11px; margin-top: 1px; }
.overview-step > svg { margin-left: auto; color: #496b9e; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(255px, 1fr); gap: 15px; align-items: start; }
.bank-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bank-dot { width: 9px; height: 9px; border-radius: 50%; background: #7d97bb; }
.bank-sino { background: #cb344c; }
.bank-bb { background: #5567c3; }
.bank-ctbc { background: #087d68; }
.bank-hn { background: #cf5263; }
.bank-esun { background: #2a9278; }
.bank-kh { background: #e29027; }
.side-list { display: grid; gap: 6px; }
.side-item, .activity-item { display: flex; align-items: center; gap: 8px; text-align: left; min-width: 0; }
.side-item { width: 100%; border: 1px solid #e7edf5; border-radius: 8px; padding: 7px 9px; background: #f8fafd; justify-content: space-between; }
.side-item:hover { background: #eef4ff; }
.side-item strong, .side-item small, .activity-item strong, .activity-item small { display: block; }
.side-item strong, .activity-item strong { font-size: 12px; }
.side-item small, .activity-item small, .compact-empty { color: var(--muted); font-size: 11px; }
.activity-item { padding: 4px 0; }
.activity-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; background: #edf3fd; color: #4c6fa4; border-radius: 7px; }
.compact-empty { padding: 6px 0; display: flex; align-items: center; gap: 6px; }

.search-layout, .admin-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: 15px; align-items: start; }
.search-compose { display: flex; gap: 7px; align-items: flex-end; }
.search-compose .field { flex: 1 1 135px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.search-prompt, .chip { border: 1px solid #d7e3f3; border-radius: 20px; background: #f4f8ff; padding: 5px 10px; color: #305484; font-size: 12px; text-align: left; }
.search-prompt:hover { background: #eaf2ff; border-color: #a9c2e8; }
.search-message { padding: 9px 12px; border-radius: 10px; background: #eaf2ff; color: #254b86; max-width: 100%; overflow-wrap: anywhere; }
.match-list { display: grid; gap: 8px; }
.match-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: #fbfdff; }
.match-main { min-width: 0; overflow-wrap: anywhere; }
.match-amount { font-size: 16px; font-variant-numeric: tabular-nums; }
.match-evidence, .match-fee { font-size: 12px; margin-top: 3px; }
.match-evidence { color: #345b92; }
.match-fee { color: var(--amber); font-weight: 650; }
.coverage-list, .detail-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.coverage-list li { border-bottom: 1px solid var(--line-soft); padding: 4px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.coverage-list li:last-child { border: 0; }
.suffix-form { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 440px); gap: 10px 14px; align-items: start; }
.suffix-form .actions { grid-column: 2; }
.suffix-list { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.suffix-list li { display: flex; align-items: center; gap: 5px; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 15px; background: #0f233d75; }
.dialog { width: min(100%, 420px); box-shadow: 0 12px 40px #14243955; }
.dialog .actions { justify-content: flex-end; }
.toast-region { position: fixed; bottom: 16px; right: 16px; z-index: 10; max-width: min(430px, calc(100vw - 32px)); }
.toast { padding: 8px 9px 8px 12px; background: #fff; border: 1px solid #cce5dd; border-radius: 10px; box-shadow: 0 5px 16px #253f5724; display: flex; align-items: center; gap: 8px; color: #1e6557; }
.toast-error { border-color: #efd0d2; color: #9b2d39; }
.toast .icon-btn { margin-left: auto; }

.login-screen { min-height: 100svh; display: grid; place-items: center; padding: 18px; background: radial-gradient(ellipse at 50% 0, #e8f1ff, #f5f8fc 55%); }
.login-card { width: min(100%, 404px); padding: 27px 29px; box-shadow: 0 9px 28px #24457212; }
.login-icon { display: grid; place-items: center; width: 51px; height: 51px; color: #2b5cb2; background: #eaf1ff; border-radius: 14px; margin-bottom: 14px; }
.login-card h1 { font-size: 26px; }
.login-card p { color: var(--muted); margin: 6px 0 16px; }
.login-card .btn { width: 100%; }
.login-return { margin-top: 10px; }

@media (max-width: 1160px) {
  .overview-step small { display: none; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); }
}
@media (max-width: 930px) {
  .app-shell { --sidebar-width: 176px; }
  .sidebar { padding-right: 9px; padding-left: 9px; }
  .dashboard-grid, .search-layout, .admin-layout, .split { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-value { font-size: clamp(13px, 2vw, 22px); }
}
@media (max-width: 700px) {
  .sidebar { width: min(250px, 78vw); transform: translateX(-100%); transition: transform .18s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .main-shell { margin-left: 0; }
  .mobile-menu { display: inline-flex !important; }
  .menu-open .mobile-overlay { display: block !important; position: fixed; inset: 0; border: 0; background: #14243955; z-index: 4; }
  .topbar { height: 55px; }
  .crumb, .topbar-right { gap: 6px; }
  .crumb-home, .crumb > svg, .profile-text { display: none !important; }
  .page-content { padding-top: 18px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-value { font-size: 20px; }
  .dashboard-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 440px) {
  .suffix-form { grid-template-columns: minmax(0, 1fr); }
  .suffix-form .actions { grid-column: 1; }
  .overview-steps { grid-template-columns: minmax(0, 1fr); }
  .overview-step small { display: block; }
  .search-compose { flex-wrap: wrap; }
  .workflow-heading { flex-wrap: wrap; gap: 3px 8px; }
  .panel-header { padding-right: 11px; padding-left: 11px; }
  .panel-body { padding-right: 11px; padding-left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}