:root {
  --navy: #0b3154;
  --navy-2: #174f78;
  --cyan: #1aa6a7;
  --cyan-soft: #dff7f4;
  --blue-soft: #eaf3fb;
  --bg: #f3f6f8;
  --card: #fff;
  --text: #142332;
  --muted: #647586;
  --border: #dce4e9;
  --green: #137a56;
  --green-soft: #e2f5ec;
  --orange: #a95b0b;
  --orange-soft: #fff0db;
  --red: #b43b3b;
  --red-soft: #fde9e7;
  --shadow: 0 12px 34px rgba(9, 42, 70, .09);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
body.drawer-open { overflow: hidden; }
a { color: var(--navy-2); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(27px, 5vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: clamp(18px, 3vw, 23px); }
.muted { color: var(--muted); line-height: 1.65; }

.app-shell { display: flex; width: 100%; min-height: 100vh; flex-direction: column; background: radial-gradient(circle at 100% 0, #e6f4f3 0, transparent 34%), var(--bg); }
.topbar { position: sticky; top: 0; z-index: 30; display: grid; min-height: 72px; padding: max(10px, env(safe-area-inset-top)) clamp(14px, 3vw, 34px) 10px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: rgba(243, 246, 248, .92); border-bottom: 1px solid rgba(220, 228, 233, .85); backdrop-filter: blur(18px); }
.menu-button { display: grid; width: 44px; height: 44px; padding: 11px; align-content: center; gap: 5px; background: var(--navy); border: 0; border-radius: 13px; cursor: pointer; }
.menu-button span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 9px; }
.topbar-brand { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--text); }
.topbar-brand > span:last-child { display: grid; min-width: 0; }
.topbar-brand small { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.topbar-brand strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.mini-mark, .brand-mark { display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(145deg, var(--navy), var(--cyan)); box-shadow: 0 8px 22px rgba(11,49,84,.2); }
.mini-mark { width: 36px; height: 36px; border-radius: 11px; font-weight: 850; }
.role-badge { padding: 7px 10px; color: var(--navy); background: var(--cyan-soft); border: 1px solid #c6ebe7; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }

.drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; display: flex; width: min(88vw, 350px); padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); overflow: hidden; flex-direction: column; background: #fff; box-shadow: 24px 0 70px rgba(5, 30, 52, .25); transform: translateX(-105%); transition: transform .22s ease; }
.drawer.open { transform: translateX(0); }
.drawer-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(5, 24, 42, .48); backdrop-filter: blur(3px); }
.drawer-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 4px 4px 22px; border-bottom: 1px solid var(--border); }
.brand-mark { width: 52px; height: 52px; margin-bottom: 22px; border-radius: 16px; font-size: 23px; font-weight: 850; }
.brand-mark.small { width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 19px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.icon-button { width: 40px; height: 40px; color: var(--muted); background: transparent; border: 0; border-radius: 12px; font-size: 28px; cursor: pointer; }
.drawer-nav { display: grid; min-height: 0; padding: 20px 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; align-content: start; gap: 7px; }
.drawer-nav a { display: grid; min-height: 68px; padding: 11px 12px; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; color: var(--text); border-radius: 15px; }
.drawer-nav a > span { color: var(--cyan); font-size: 12px; font-weight: 850; }
.drawer-nav a div { display: grid; gap: 3px; }
.drawer-nav a small { color: var(--muted); font-size: 12px; }
.drawer-nav a.active { color: #fff; background: var(--navy); box-shadow: 0 10px 24px rgba(11,49,84,.18); }
.drawer-nav a.active span, .drawer-nav a.active small { color: #c8f0ed; }
.drawer-user { display: grid; margin-top: 10px; padding: 15px 10px; flex: 0 0 auto; grid-template-columns: auto 1fr; align-items: center; gap: 11px; background: var(--blue-soft); border-radius: 15px; }
.drawer-user > div { display: grid; gap: 2px; }
.drawer-user small { color: var(--muted); }
.avatar { display: grid; width: 39px; height: 39px; place-items: center; color: #fff; background: var(--navy-2); border-radius: 50%; font-weight: 800; }
.drawer-password, .drawer-logout { flex: 0 0 auto; }
.drawer-logout button { width: 100%; margin-top: 10px; padding: 12px; color: var(--red); background: transparent; border: 0; cursor: pointer; }

.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(22px, 4vw, 48px) clamp(16px, 4vw, 58px) clamp(54px, 7vw, 88px); flex: 1; }
.page-auth { display: grid; min-height: calc(100vh - 90px); place-items: center; }
.page-heading { display: flex; margin-bottom: clamp(20px, 3vw, 28px); align-items: flex-end; justify-content: space-between; gap: 18px; }
.page-heading > div:first-child { max-width: 780px; }
.page-heading p { margin-bottom: 5px; }
.page-heading .muted { margin-bottom: 0; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.heading-status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.count-badge { display: inline-flex; min-height: 36px; padding: 7px 12px; align-items: center; color: var(--navy); background: var(--blue-soft); border: 1px solid #d2e3f0; border-radius: 999px; font-size: 13px; font-weight: 750; white-space: nowrap; }

.site-footer { display: flex; width: 100%; min-height: 110px; padding: 24px clamp(18px, 4vw, 58px) calc(24px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 20px; color: #c4d2dd; background: #092844; }
.site-footer div { display: grid; gap: 4px; }
.site-footer span, .site-footer small { color: #90a9bb; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metric { position: relative; display: flex; min-height: 128px; padding: 17px; overflow: hidden; flex-direction: column; justify-content: space-between; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric::after { position: absolute; right: -18px; bottom: -28px; width: 80px; height: 80px; content: ""; background: rgba(26,166,167,.12); border-radius: 50%; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { position: relative; z-index: 1; font-size: clamp(20px, 4vw, 29px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.metric.success { background: var(--green-soft); border-color: #c4e7d8; }
.metric.warning { background: var(--orange-soft); border-color: #f0d7b6; }
.metric.danger { background: var(--red-soft); border-color: #efceca; }
.metric.neutral { background: var(--blue-soft); }
.metric small { position: relative; z-index: 1; color: var(--navy-2); font-size: 11px; font-weight: 750; }
.summary-strip { display: flex; min-height: 112px; align-items: center; justify-content: space-between; gap: 18px; }
.summary-strip > span { color: var(--muted); font-size: 13px; }
.summary-strip > strong { color: var(--navy); font-size: clamp(26px, 5vw, 38px); letter-spacing: -.035em; }
.metric-detail-list { display: grid; gap: 9px; }
.metric-detail-row { display: flex; min-height: 76px; padding: 13px 14px; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); background: #f8fafb; border: 1px solid var(--border); border-radius: 14px; }
.metric-detail-row > span { display: grid; min-width: 0; gap: 5px; }
.metric-detail-row small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.metric-detail-money { flex: 0 0 auto; text-align: right; }
.metric-detail-money strong { color: var(--navy); }
.metric-detail-more { margin-top: 14px; }

.section-block { margin-top: clamp(28px, 5vw, 44px); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.section-title > span, .section-title > a { color: var(--muted); font-size: 13px; }
.card-list { display: grid; gap: 11px; }
.receivable-card, .customer-card { display: block; padding: 17px; color: var(--text); background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 5px 19px rgba(21,44,70,.05); }
.card-line, .money-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receivable-card p, .customer-card p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.receivable-card small, .customer-card small { color: var(--muted); }
.money-line { margin: 14px 0 7px; }
.money-line strong { font-size: 19px; }
.money-line span { color: var(--muted); font-size: 13px; }
.service-summaries { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.service-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.service-summary strong { color: var(--text); font-size: 13px; }
.status { display: inline-flex; min-height: 26px; padding: 4px 9px; align-items: center; color: var(--navy-2); background: var(--blue-soft); border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.status-paid { color: var(--green); background: var(--green-soft); }
.status-overdue { color: var(--red); background: var(--red-soft); }
.status-partial, .status-promised { color: var(--orange); background: var(--orange-soft); }
.empty-state { padding: 38px 20px; color: var(--muted); background: rgba(255,255,255,.6); border: 1px dashed #c8d4dc; border-radius: var(--radius); text-align: center; }
.empty-state.compact { padding: 21px; }

.search-form, .export-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-bottom: 20px; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--text); background: #fff; border: 1px solid #cbd7df; border-radius: 12px; outline: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(26,166,167,.13); }
.search-form button { padding: 0 19px; color: #fff; background: var(--navy); border: 0; border-radius: 12px; }

.detail-hero, .confirm-card, .export-card, .notes-card { padding: clamp(19px, 4vw, 30px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-hero h1 { margin-top: 12px; }
.detail-hero > p { color: var(--muted); }
.back-link { display: inline-flex; min-height: 44px; margin: -8px 0 9px; align-items: center; font-size: 14px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; margin: 23px 0 0; }
.info-grid div { min-width: 0; }
.info-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.info-grid dd { margin: 0; overflow-wrap: anywhere; font-weight: 680; }
.amount-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 23px -7px 0; }
.amount-summary > div { display: flex; min-width: 0; padding: 0 11px; flex-direction: column; gap: 5px; border-right: 1px solid var(--border); }
.amount-summary > div:last-child { border: 0; }
.amount-summary span { color: var(--muted); font-size: 12px; }
.amount-summary strong { font-size: clamp(16px, 3vw, 23px); overflow-wrap: anywhere; }
.amount-summary .outstanding strong { color: var(--red); }
.discount-line { margin: 12px 0 0; color: var(--orange); font-size: 13px; }

.button { display: inline-flex; width: 100%; min-height: 49px; padding: 11px 17px; align-items: center; justify-content: center; border: 0; border-radius: 13px; font-weight: 780; cursor: pointer; }
.button.auto { width: auto; }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.button.secondary { color: var(--navy); background: var(--blue-soft); border: 1px solid #d2e3f0; }
.button.tertiary { color: var(--navy); background: #fff; border: 1px solid var(--border); }
.danger-button { color: #fff; background: var(--red); }
.danger-link, .danger-text { color: var(--red); }
.action-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.action-row .button { width: auto; min-width: 150px; }
.stack-form { display: grid; gap: 12px; }
.stack-form p { margin: 0; }
.stack-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 680; }
.stack-form .helptext, .form-help { color: var(--muted); font-size: 12px; line-height: 1.55; }
.stack-form ul.errorlist, .form-error { margin: 0; padding: 10px 12px; color: var(--red); background: var(--red-soft); border-radius: 10px; font-size: 13px; list-style: none; }
.stack-form input[type="checkbox"], .stack-form input[type="radio"] { width: 20px; min-height: 20px; margin-right: 7px; vertical-align: middle; }
.stack-form ul { margin: 0; padding: 0; list-style: none; }
.warning-panel { padding: 13px 14px; color: #75400b; background: var(--orange-soft); border: 1px solid #ebcda7; border-radius: 13px; }
.warning-panel strong { display: block; margin-bottom: 6px; }
.warning-panel ul { margin: 0; padding-left: 18px; }
.warning-panel li + li { margin-top: 5px; }
.auto-period-panel { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 16px; color: var(--navy); background: #edf5f7; border: 1px solid #cfe1e6; border-radius: 14px; }
.auto-period-panel span, .auto-period-panel small { color: var(--muted); }
.auto-period-panel strong { font-size: 1.08rem; }
.validation-note { margin: 16px 0; color: var(--muted); line-height: 1.65; }
.validation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.timeline { display: grid; gap: 10px; }
.timeline-item { padding: 15px 16px; background: #fff; border: 1px solid var(--border); border-radius: 15px; }
.timeline-item p { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.timeline-item a { display: inline-block; margin-right: 14px; font-size: 13px; }
.timeline-item small { display: block; margin-top: 7px; color: var(--muted); }
.timeline-item.voided { opacity: .65; background: #eef1f3; }

dialog { width: min(720px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: hidden; background: #fff; border: 0; border-radius: 24px; box-shadow: 0 28px 90px rgba(5,28,48,.32); }
dialog::backdrop { background: rgba(5,24,42,.58); backdrop-filter: blur(4px); }
.dialog-shell { display: flex; max-height: calc(100vh - 30px); flex-direction: column; }
.dialog-head { display: flex; padding: 18px 20px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 0; }
.dialog-body { padding: 20px; overflow-y: auto; }

.login-card { width: 100%; max-width: 440px; padding: 30px 24px; background: #fff; border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow); }
.login-card .stack-form { margin-top: 24px; }
.security-note { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.confirm-card > p { margin-top: 12px; line-height: 1.7; }
.messages { position: fixed; top: 82px; right: 14px; left: 14px; z-index: 80; max-width: 720px; margin: auto; }
.message { padding: 13px 15px; color: var(--green); background: #f2fff8; border: 1px solid #b8e1cf; border-radius: 13px; box-shadow: var(--shadow); }
.message.error { color: var(--red); background: var(--red-soft); border-color: #ecc8c5; }

.export-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.export-card { display: grid; gap: 14px; }
.export-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.notes-content { color: var(--text); line-height: 1.75; white-space: pre-wrap; }
.read-only-note { display: inline-flex; padding: 7px 10px; color: var(--muted); background: #edf1f3; border-radius: 999px; font-size: 12px; }
.month-nav { display: grid; grid-template-columns: 44px minmax(0, 360px) 44px; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 8px; }
.month-nav > a, .month-nav > span { min-height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; font-size: 1.8rem; text-decoration: none; }
.month-nav .disabled { color: #b7c1ca; background: #f2f5f7; }
.month-nav form { display: flex; gap: 8px; }
.month-nav input { flex: 1; min-width: 0; text-align: center; font-weight: 800; color: var(--navy); }
.month-nav button { width: auto; padding: 0 14px; }
.month-state { width: fit-content; margin: 0 auto 18px; padding: 5px 12px; border-radius: 999px; background: #edf3f8; color: var(--navy); font-size: .86rem; }
.tab-nav { display: flex; gap: 8px; margin: 16px 0; overflow-x: auto; }
.tab-nav a { padding: 10px 16px; border-radius: 999px; background: #edf1f4; color: var(--text); text-decoration: none; white-space: nowrap; }
.tab-nav a.active { background: var(--navy); color: white; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.inline-actions form { margin: 0; }
.danger-outline { border: 1px solid #e86f67; color: #ba2f27; background: #fff; }
.read-only-row { cursor: default; }
.payment-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.payment-row > div { display: grid; gap: 5px; }
.payment-row > div:last-child { text-align: right; }
.payment-row small { color: var(--muted); }
.payment-row.voided { opacity: .62; }

@media (min-width: 720px) {
  .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card-list.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .role-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .topbar-brand small { display: none; }
  .page { padding-top: 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-status { width: 100%; justify-content: space-between; }
  .count-badge { align-self: flex-start; }
  .summary-strip { min-height: 100px; }
  .amount-summary { grid-template-columns: 1fr; gap: 12px; margin-inline: 0; }
  .amount-summary > div { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .amount-summary > div:last-child { padding-bottom: 0; border-bottom: 0; }
  dialog { width: 100vw; max-width: none; max-height: calc(100vh - 24px); margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .dialog-shell { max-height: calc(100vh - 24px); }
  .action-row .button { width: 100%; }
  .validation-actions { grid-template-columns: 1fr; }
  .metric-detail-row { align-items: flex-start; flex-direction: column; }
  .metric-detail-money { width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .receivable-card, .customer-card, .button { transition: transform .15s ease, box-shadow .15s ease; }
  .receivable-card:active, .customer-card:active, .button:active { transform: scale(.987); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}
.drawer-password { display:block; margin:0 18px 10px; padding:10px 14px; border:1px solid rgba(255,255,255,.25); border-radius:10px; color:inherit; text-align:center; font-weight:700; }