:root {
  --ink: #172033;
  --muted: #75809a;
  --line: #e8ecf3;
  --paper: #f6f8fb;
  --surface: #ffffff;
  --navy: #14233b;
  --blue: #246bfd;
  --blue-weak: #eaf1ff;
  --teal: #0f9b83;
  --teal-weak: #e8f8f4;
  --orange: #e8862e;
  --orange-weak: #fff4e8;
  --red: #da5252;
  --red-weak: #fff0f0;
  --purple: #775eda;
  --shadow: 0 12px 32px rgba(29, 45, 78, .08);
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.12fr) minmax(520px, .88fr); background: #fff; }
.login-hero { color: white; padding: clamp(34px, 5vw, 84px); position: relative; overflow: hidden; background: linear-gradient(145deg, #10203b 0%, #1c4378 55%, #236cf4 140%); }
.login-hero:before, .login-hero:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); }
.login-hero:before { width: 720px; height: 720px; right: -290px; top: 120px; }
.login-hero:after { width: 430px; height: 430px; right: -80px; top: 265px; }
.login-hero > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: white; font-size: 15px; background: linear-gradient(135deg, #4687ff, #5dd5c4); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.login-hero h1 { max-width: 670px; margin: 106px 0 20px; font-size: clamp(34px, 4.2vw, 61px); line-height: 1.17; letter-spacing: -1.8px; }
.login-hero p { max-width: 550px; color: #cbd9ed; font-size: 17px; line-height: 1.9; }
.hero-points { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 48px; }
.hero-points span { border: 1px solid rgba(255,255,255,.24); padding: 9px 13px; border-radius: 99px; font-size: 13px; color: #e6efff; background: rgba(255,255,255,.05); }
.login-card { padding: clamp(28px, 5vw, 72px); align-self: center; max-width: 610px; width: 100%; }
.login-card h2 { margin: 0; font-size: 27px; }
.login-card > p { color: var(--muted); margin: 9px 0 30px; }
.login-form { display: grid; gap: 14px; margin-bottom: 22px; }
.login-form label { display: grid; gap: 7px; color: #3f4b63; font-size: 12px; font-weight: 650; }
.login-form input { width: 100%; height: 46px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; outline: none; background: #fff; }
.login-form input:focus { border-color: #73a2ff; box-shadow: 0 0 0 3px rgba(36,107,253,.1); }
.login-form .btn { width: 100%; height: 46px; justify-content: center; margin-top: 2px; }
.password-logout { width: 100%; justify-content: center; }
.service-error-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(145deg,#eef4ff,#f7fafc); }
.service-error-card { width: min(520px,100%); padding: 34px; border: 1px solid #dce4ef; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.service-error-card .brand { color: #25334a; }
.service-error-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-top: 34px; color: #b26727; border-radius: 16px; background: #fff2e5; }
.service-error-card h1 { margin: 18px 0 8px; font-size: 27px; }
.service-error-card > p { margin: 0; color: #68758a; line-height: 1.7; }
.service-checks { display: grid; gap: 9px; margin: 22px 0; padding: 16px; border-radius: 12px; background: #f6f8fb; color: #56647a; font-size: 13px; }
.service-checks span:before { content: "•"; margin-right: 8px; color: #4778cf; }
.service-error-card .btn { width: 100%; justify-content: center; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 15px; color: #99a2b3; font-size: 11px; }
.login-divider:before, .login-divider:after { content: ''; height: 1px; flex: 1; background: var(--line); }
.role-grid { display: grid; gap: 11px; }
.role-choice { width: 100%; text-align: left; display: flex; gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--line); background: #fff; border-radius: 14px; color: var(--ink); transition: .18s ease; }
.role-choice:hover { transform: translateY(-2px); border-color: #a8c5ff; box-shadow: 0 8px 20px rgba(36,107,253,.1); }
.role-avatar, .avatar { display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; color: #2162dc; background: #e9f1ff; }
.role-avatar { width: 40px; height: 40px; border-radius: 12px; }
.role-choice strong { display: block; font-size: 14px; }
.role-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.demo-tip { margin-top: 25px; padding: 12px 14px; border-radius: 10px; background: #f5f7fb; color: #64708a; font-size: 12px; line-height: 1.6; }
.approval-warning { display: grid; gap: 4px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid #f4c9a3; border-radius: 11px; background: #fff8ef; color: #7d4b1b; line-height: 1.55; }
.approval-warning b { font-size: 14px; }
.approval-warning span { font-size: 13px; }
.blocked-action { border-color: #f0d3b6; background: #fffaf4; }
.btn:disabled { cursor: not-allowed; opacity: .55; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 242px; flex: 0 0 auto; color: #b8c6de; background: var(--navy); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 10; }
.sidebar .brand { color: white; padding: 28px 23px 25px; }
.workspace { padding: 0 12px; margin-bottom: 18px; }
.workspace-label { padding: 0 11px; margin-bottom: 8px; color: #6f85a9; font-size: 10px; letter-spacing: 1px; }
.workspace-user { display: flex; gap: 10px; padding: 10px; align-items: center; border-radius: 10px; background: rgba(255,255,255,.06); }
.avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.workspace-user strong, .workspace-user small { display: block; font-size: 12px; }
.workspace-user small { color: #7f95b7; margin-top: 1px; }
.side-nav { display: grid; gap: 3px; padding: 0 12px; }
.nav-item { display: flex; align-items: center; gap: 12px; color: #b4c1d7; width: 100%; padding: 11px; text-align: left; border: 0; background: transparent; border-radius: 9px; font-size: 13px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: #274264; }
.nav-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; }
.nav-count { margin-left: auto; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 7px; color: #fff; background: #ed6b5c; font-size: 10px; }
.sidebar-bottom { margin-top: auto; padding: 15px 12px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.reset-btn { width: 100%; display: flex; align-items: center; gap: 10px; color: #91a5c6; border: 0; background: transparent; padding: 9px 11px; text-align: left; font-size: 12px; border-radius: 8px; }
.reset-btn:hover { color: white; background: rgba(255,255,255,.05); }
.account-name { display: block; margin: 4px 0 0 42px; color: var(--muted); font-family: "DM Mono", monospace; }
.account-status { margin-left: 6px; font-size: 11px; color: #919aaa; }
.account-status.active { color: #168369; }
.table-actions { display: flex; gap: 9px; white-space: nowrap; }
.temporary-password { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid #cbdcff; border-radius: 12px; background: #f3f7ff; }
.temporary-password code { flex: 1; overflow-wrap: anywhere; color: #174eaf; font-size: 15px; font-weight: 700; }
.main { width: calc(100% - 242px); margin-left: 242px; min-height: 100vh; }
.topbar { height: 76px; display: flex; padding: 0 36px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); position: sticky; top: 0; z-index: 8; backdrop-filter: blur(12px); }
.breadcrumb { color: #8791a6; font-size: 12px; }
.breadcrumb b { color: #42506b; font-weight: 600; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; color: #53617a; border: 1px solid var(--line); background: #fff; border-radius: 10px; }
.icon-btn:hover { color: var(--blue); border-color: #afc9ff; }
.dot { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ef665d; border: 1px solid white; }
.mobile-menu { display: none; }
.content { max-width: 1440px; margin: 0 auto; padding: 31px 36px 54px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; gap: 15px; }
.page-head h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.page-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.page-head-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 5px rgba(17,31,59,.015); }
.card-pad { padding: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 17px; }
.stat-card { min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 3px 8px rgba(22,36,64,.025); }
.stat-card .stat-top { display: flex; justify-content: space-between; align-items: center; color: #75809a; font-size: 12px; }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.stat-icon.blue { color: #266cf7; background: #edf3ff; } .stat-icon.orange { color: #dd7d22; background: #fff2e6; } .stat-icon.teal { color: #099780; background: #e9f9f5; } .stat-icon.purple { color: #765dd7; background: #f0edff; }
.stat-num { margin: 14px 0 3px; color: #1e2a40; font-weight: 700; font-size: 24px; letter-spacing: -.5px; }
.stat-sub { color: #92a0b6; font-family: "DM Mono", monospace; font-size: 11px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, .88fr); gap: 17px; }
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px 14px; }
.section-head h3 { margin: 0; font-size: 15px; }
.section-head span, .section-head button { color: var(--muted); font-size: 12px; }
.link-btn { color: var(--blue)!important; padding: 0; background: transparent; border: 0; }
.chart-wrap { padding: 0 20px 20px; }
.chart-meta { display: flex; justify-content: space-between; color: #78849a; font-size: 11px; }
.bar-chart { height: 190px; margin: 12px 0; padding: 15px 4px 0; display: flex; align-items: end; gap: 8%; border-bottom: 1px solid #e5eaf2; background: linear-gradient(to top, transparent 24%, #f2f4f8 25%, transparent 26%, transparent 49%, #f2f4f8 50%, transparent 51%, transparent 74%, #f2f4f8 75%, transparent 76%); }
.bar { width: 11%; min-width: 16px; border-radius: 5px 5px 0 0; background: linear-gradient(#79a7ff, #316ef2); position: relative; transition: height .4s; }
.bar:after { content: attr(data-month); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); color: #8c98ad; font-size: 10px; white-space: nowrap; }
.task-list { padding: 0 20px 10px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #f0f2f6; }
.task-row:first-child { border-top: 0; }
.task-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: 13px; color: #3680f8; background: #ecf3ff; }
.task-copy { flex: 1; min-width: 0; } .task-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .task-copy small { display: block; color: #8995aa; margin-top: 3px; font-size: 11px; }
.amount { color: #26334b; font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; white-space: nowrap; }

.toolbar { display: flex; align-items: center; gap: 9px; padding: 15px 19px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.desk-tabs { display: flex; gap: 7px; margin-bottom: 12px; padding: 5px; width: fit-content; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.desk-tabs button { min-height: 38px; padding: 8px 13px; color: #69758b; border: 0; border-radius: 8px; background: transparent; font-size: 12px; }
.desk-tabs button.active { color: #205fcf; background: #edf4ff; font-weight: 600; }
.desk-tabs span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 4px; padding: 0 5px; border-radius: 10px; color: inherit; background: rgba(65,105,170,.1); font-size: 10px; }
.search { position: relative; min-width: 205px; flex: 1; }
.search input { width: 100%; padding: 9px 10px 9px 32px; border: 1px solid var(--line); outline: none; border-radius: 8px; color: var(--ink); background: #fff; font-size: 12px; }
.search input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #80aaff; box-shadow: 0 0 0 3px #eaf1ff; }
.search svg { position: absolute; left: 10px; top: 10px; color: #8894a8; }
.select-sm { border: 1px solid var(--line); background: #fff; padding: 8px 28px 8px 10px; color: #5b6880; outline: none; border-radius: 8px; font-size: 12px; }
.table-scroll { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
thead th { color: #7d889f; background: #fbfcfe; font-size: 11px; font-weight: 500; text-align: left; letter-spacing: .1px; }
th, td { padding: 13px 19px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
tbody tr { transition: background .15s; } tbody tr:hover { background: #f9fbff; }
td { color: #4e5b72; font-size: 12px; }
.doc-id { color: #265fc9; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; }
.owner { display: flex; align-items: center; gap: 7px; } .owner .avatar { width: 25px; height: 25px; font-size: 10px; border-radius: 7px; }
.status { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; padding: 3px 7px; border-radius: 6px; font-size: 11px; }
.status:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.pendingFinance, .status.financeReview { color: #b97024; background: #fff4e7; }
.status.presidentPending { color: #5e50be; background: #f0eeff; }
.status.paymentPending { color: #137f9a; background: #e9f8fb; }
.status.completed { color: #168369; background: #e7f7f1; }
.status.returned { color: #d16b29; background: #fff0e5; }
.status.rejected { color: #cc4b51; background: #fff0f0; }
.status.draft { color: #69758a; background: #f1f3f6; }
.status.small { font-size: 10px; padding: 2px 6px; }
.row-action { border: 0; color: var(--blue); padding: 5px 0; background: transparent; font-size: 12px; }

.btn { min-height: 36px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 1px solid transparent; padding: 8px 13px; border-radius: 8px; background: white; color: #526078; font-size: 12px; font-weight: 500; transition: .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 4px 10px rgba(36,107,253,.18); }
.btn.primary:hover { background: #155ce8; }
.btn.secondary { border-color: #cfd7e4; background: white; }
.btn.danger { color: #c8434a; border-color: #f0bfc2; background: #fff; }
.btn.success { color: white; background: #119d83; border-color: #119d83; }
.btn.warning { color: #c66a20; border-color: #f1c49e; background: #fff; }
.btn.xs { min-height: 29px; padding: 5px 9px; border-radius: 7px; font-size: 11px; }
.empty { padding: 48px 20px; text-align: center; color: #8894a9; font-size: 13px; }

.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.detail-header { padding: 21px; }
.back-btn { display: inline-flex; gap: 6px; padding: 0; margin-bottom: 16px; border: 0; color: #6e7a90; background: transparent; font-size: 12px; }
.detail-title-row { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.detail-title-row h2 { margin: 0; font-size: 20px; letter-spacing: -.25px; }
.detail-title-row p { margin: 6px 0 0; color: #8791a5; font-size: 12px; }
.detail-amount { margin-top: 18px; color: #1b2a44; font-family: "DM Mono", monospace; font-size: 28px; font-weight: 500; }
.detail-sub { display: flex; gap: 16px; color: #8490a4; font-size: 11px; margin-top: 5px; }
.detail-section { margin-top: 17px; padding: 20px; }
.detail-section h3 { margin: 0 0 16px; font-size: 14px; }
.expense { border: 1px solid #e8edf4; border-radius: 10px; padding: 14px; margin-top: 10px; }
.expense:first-of-type { margin-top: 0; }
.expense-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.expense-top b { font-size: 13px; } .expense-top .amount { font-size: 13px; }
.expense-info { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: #738097; font-size: 11px; }
.expense-note { color: #526078; margin-top: 9px; font-size: 12px; }
.attachment { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; border: 1px solid #dce9ff; padding: 5px 8px; color: #3265bb; background: #f6f9ff; border-radius: 6px; font-size: 11px; }
.diff-box { margin-top: 12px; padding: 11px; border-left: 3px solid #e99236; color: #695c50; background: #fffaf4; font-size: 11px; line-height: 1.7; }
.diff-value { font-family: "DM Mono", monospace; font-weight: 500; }
.timeline { padding: 4px 0 1px 2px; }
.timeline-item { display: grid; grid-template-columns: 22px 1fr; position: relative; min-height: 65px; }
.timeline-item:not(:last-child):before { content: ""; position: absolute; left: 7px; top: 17px; bottom: -2px; width: 1px; background: #dce3ee; }
.time-dot { width: 14px; height: 14px; margin-top: 2px; border: 3px solid #e7efff; border-radius: 50%; background: #3779f6; z-index: 1; }
.time-dot.finance { background: #df8a32; border-color: #fff1e4; }.time-dot.success { background: #10a184; border-color: #e1f8f1; }.time-dot.return { background: #d86b2f; border-color: #fff0e7; }.time-dot.danger { background: #d85456; border-color: #ffeded; }
.timeline-item strong { display: block; font-size: 12px; }.timeline-item p { color: #69758b; margin: 4px 0; line-height: 1.55; font-size: 11px; }.timeline-item time { color: #a0a9b8; font-family: "DM Mono", monospace; font-size: 10px; }
.side-card { padding: 18px; }.side-card h3 { margin: 0 0 12px; font-size: 13px; }.info-row { display: flex; justify-content: space-between; gap: 11px; padding: 10px 0; border-top: 1px solid #eff2f6; color: #7a879c; font-size: 11px; }.info-row b { max-width: 58%; color: #42506a; font-weight: 500; text-align: right; }.action-panel { margin-top: 17px; padding: 17px; border: 1px solid #dce9ff; background: linear-gradient(135deg,#f9fbff,#eff5ff); border-radius: 12px; }.action-panel h3 { margin: 0; font-size: 13px; }.action-panel p { margin: 7px 0 13px; color: #68758e; font-size: 11px; line-height: 1.6; }.action-stack { display: grid; gap: 8px; }.action-stack .btn { width: 100%; }

.form-shell { max-width: 1000px; }.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }.form-grid.three { grid-template-columns: repeat(3,1fr); }.field { display: grid; gap: 6px; }.field.full { grid-column: 1 / -1; }.field label { color: #566278; font-size: 12px; font-weight: 500; }.required { color: #df5555; }.field input, .field select, .field textarea { width: 100%; outline: none; border: 1px solid #dce2ec; padding: 9px 10px; border-radius: 8px; color: #2e3b52; background: white; font-size: 12px; transition: .15s; }.field textarea { resize: vertical; min-height: 65px; }.help { color: #9aa5b6; font-size: 10px; line-height: 1.5; }
.form-card { padding: 21px; }.form-card + .form-card { margin-top: 15px; }.form-card h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; font-size: 14px; }.form-card h3 small { color: #9ba5b4; font-size: 11px; font-weight: 400; }.expense-form { position: relative; padding: 17px; margin-top: 13px; border: 1px solid #e4e9f1; border-radius: 11px; background: #fcfdff; }.expense-form:first-of-type { margin-top: 0; }.expense-index { position: absolute; top: -10px; left: 12px; padding: 2px 7px; color: #55647d; background: #edf1f7; border-radius: 4px; font-size: 10px; }.remove-expense { position: absolute; top: 9px; right: 10px; border: 0; color: #a47777; background: transparent; font-size: 11px; }
.form-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 15px; }.form-steps span { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: #71809a; border: 1px solid #e1e7f0; background: #fff; border-radius: 9px; font-size: 11px; }.form-steps i { width: 21px; height: 21px; display: grid; place-items: center; font-style: normal; border-radius: 50%; color: #62718d; background: #edf1f7; }.form-steps .active { color: #245fc8; border-color: #bcd1fb; background: #f5f8ff; }.form-steps .active i { color: white; background: var(--blue); }
.voucher-field { display: grid; gap: 8px; margin-top: 16px; }.voucher-field > label { color: #566278; font-size: 12px; font-weight: 500; }.voucher-main-button { width: 100%; min-height: 76px; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 11px; padding: 13px 15px; text-align: left; color: #2f5ea8; border: 1px solid #a9c6fa; background: linear-gradient(135deg,#f8fbff,#eef5ff); border-radius: 11px; }.voucher-main-button > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 11px; }.voucher-main-button b, .voucher-main-button small { display: block; }.voucher-main-button b { color: #2a4776; font-size: 13px; }.voucher-main-button small { margin-top: 3px; color: #7485a0; font-size: 11px; }.voucher-added { min-height: 66px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #19836e; border: 1px solid #a9dcca; background: #f0fbf7; border-radius: 10px; }.voucher-added > span { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: #17a287; border-radius: 10px; }.voucher-added div { flex: 1; min-width: 0; }.voucher-added b, .voucher-added small { display: block; }.voucher-added b { font-size: 12px; }.voucher-added small { margin-top: 2px; overflow: hidden; color: #65847c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.voucher-added button { padding: 6px 8px; color: #1b806c; border: 1px solid #a8d7cb; background: white; border-radius: 7px; font-size: 11px; }.voucher-help { margin: 0; color: #8994a7; font-size: 10px; }
.upload-box { display: flex; min-height: 86px; gap: 12px; align-items: center; padding: 13px; border: 1px dashed #b7c8e3; border-radius: 9px; color: #6d7e96; background: #f9fbff; }.upload-box.uploaded { color: #23816e; border-style: solid; border-color: #a5dacc; background: #f2fbf8; }.upload-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #4d83e7; background: #e9f1ff; border-radius: 9px; }.upload-copy { flex: 1; font-size: 11px; line-height: 1.55; }.upload-copy b { display: block; color: #536178; font-size: 12px; }.file-input { display: none; }.upload-link { color: #246bfd; border: 0; background: transparent; padding: 0; font-size: 11px; }.ocr-result { display: flex; gap: 7px; align-items: center; margin-top: 9px; padding: 8px 10px; color: #43726b; background: #eaf9f5; border-radius: 7px; font-size: 11px; }.ocr-chip { padding: 2px 5px; color: #13866f; background: #d7f3eb; border-radius: 4px; font-size: 10px; }
.form-foot { position: sticky; bottom: 12px; display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; padding: 14px 16px; border: 1px solid #dbe4f3; background: rgba(255,255,255,.94); border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: blur(9px); }.form-total { color: #637087; font-size: 12px; }.form-total b { display: block; color: #21304a; margin-top: 2px; font-family: "DM Mono", monospace; font-size: 20px; }.form-foot-actions { display: flex; gap: 8px; align-items: center; }
.preview-list { display: grid; gap: 9px; }.preview-row { display: grid; grid-template-columns: 28px 1.3fr .8fr .7fr; align-items: center; padding: 12px; border-radius: 9px; background: #f8faff; font-size: 12px; }.preview-row small { display: block; color: #8792a5; margin-top: 3px; font-size: 10px; }.preview-num { color: #6083c7; font-family: "DM Mono", monospace; }.preview-voucher { color: #118872; font-size: 11px; }

.notice-list { overflow: hidden; }.notice { display: grid; grid-template-columns: 37px 1fr auto; gap: 12px; align-items: start; padding: 17px 20px; border-top: 1px solid #edf0f5; }.notice:first-child { border-top: 0; }.notice.unread { background: #fbfdff; }.notice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #2770f5; background: #eaf1ff; }.notice-icon.returned { color: #dc7a2a; background: #fff1e3; }.notice-icon.completed { color: #119d83; background: #e7f8f2; }.notice strong { display: block; font-size: 13px; }.notice p { margin: 5px 0 0; color: #6e7a91; line-height: 1.6; font-size: 12px; }.notice time { color: #98a2b2; font-family: "DM Mono", monospace; font-size: 10px; white-space: nowrap; }
.report-controls { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 0 17px; }.report-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.mini-stat { padding: 15px; border: 1px solid #e5eaf1; border-radius: 10px; }.mini-stat small { display: block; color: #8590a4; font-size: 11px; }.mini-stat b { display: block; margin-top: 7px; color: #27354d; font-family: "DM Mono", monospace; font-size: 18px; }.breakdown { display: grid; gap: 12px; }.break-row { display: grid; grid-template-columns: 78px 1fr 74px; align-items: center; gap: 10px; color: #5e6a80; font-size: 12px; }.bar-bg { height: 8px; overflow: hidden; background: #eef2f7; border-radius: 10px; }.bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg,#4f8dff,#2968ed); }.break-row b { color: #34415a; font-family: "DM Mono", monospace; font-size: 11px; text-align: right; }
.status-fill { background: linear-gradient(90deg,#75a6ff,#4f82e7); }
.empty.compact { padding: 20px 10px; }
.report-error { display: grid; gap: 8px; max-width: 560px; margin: 0 auto; text-align: center; color: #657188; }
.report-error b { color: #3e4b61; font-size: 16px; }
.report-error span { line-height: 1.65; font-size: 13px; }
.report-error .btn { justify-self: center; margin-top: 6px; }
.report-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 17px; }.switch { appearance: none; width: 32px; height: 18px; border: 0; border-radius: 20px; position: relative; background: #cbd3df; vertical-align: middle; }.switch:before { content:""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background:white; transition:.15s; }.switch:checked { background: #24a88e; }.switch:checked:before { left:17px; }.category-list { padding: 0 17px 14px; }.category-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #f0f2f6; color: #526078; font-size: 12px; }.tag { padding: 3px 6px; color: #647189; background: #f2f4f7; border-radius: 4px; font-size: 10px; }
.system-health { display: grid; grid-template-columns: minmax(260px,2fr) repeat(4,minmax(90px,.7fr)); gap: 12px; align-items: center; margin-bottom: 17px; padding: 15px 18px; border: 1px solid #cfe7df; border-radius: 12px; background: linear-gradient(110deg,#f5fbf9,#fff); box-shadow: var(--shadow); }
.system-health > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.system-health > div:first-child { grid-template-columns: auto 1fr; }
.system-health b { color: #263750; font-size: 14px; }
.system-health small { grid-column: 2; color: var(--muted); font-size: 10px; }
.system-health > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; padding-left: 13px; border-left: 1px solid #e1ebe7; }
.system-health > div:not(:first-child) b { font-size: 18px; }
.system-health > div:not(:first-child) small { grid-column: auto; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: #25aa8d; box-shadow: 0 0 0 4px #dff4ed; }
.audit-card { margin-top: 17px; }
.audit-list { padding: 0 17px 14px; }
.audit-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #eef1f5; }
.audit-list b,.audit-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-list b { color: #3a4860; font-size: 12px; }
.audit-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.audit-list code { max-width: 180px; overflow: hidden; color: #758097; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.audit-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--blue); border-radius: 8px; background: #eef4ff; }

.mobile-report-list, .mobile-guide { display: none; }
.mobile-report-card { width: 100%; padding: 0; text-align: left; color: var(--ink); border: 1px solid #e1e7f0; background: white; border-radius: 13px; overflow: hidden; }.mobile-report-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px 9px; }.mobile-report-main { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 14px 13px; }.mobile-report-main b, .mobile-report-main small { display: block; }.mobile-report-main b { font-size: 13px; }.mobile-report-main small { margin-top: 4px; color: #8290a6; font-size: 11px; }.mobile-report-main .amount { font-size: 14px; }.mobile-report-action { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; color: #2867d5; background: #f6f9ff; border-top: 1px solid #e7eefb; font-size: 12px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(14,27,49,.43); animation: fade .15s ease; }.modal { width: min(510px, 100%); max-height: min(760px, 90vh); overflow: auto; border-radius: 15px; background:white; box-shadow: 0 25px 60px rgba(10,22,45,.25); animation: up .2s ease; }.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }.modal-head h3 { margin: 0; font-size: 16px; }.modal-close { color: #7c8799; border: 0; background: transparent; font-size: 22px; }.modal-body { padding: 20px; }.modal-note { padding: 10px; margin-bottom: 14px; color: #66738a; background: #f5f8fc; border-radius: 8px; font-size: 11px; line-height: 1.6; }.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding: 15px 20px; border-top: 1px solid var(--line); }.confirm-text { color:#5d6a80; font-size: 13px; line-height:1.75; }
.install-steps { display: grid; gap: 12px; }
.install-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; padding: 12px; border-radius: 11px; background: #f6f8fb; }
.install-steps i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: var(--blue); font-style: normal; font-weight: 700; }
.install-steps b, .install-steps small { display: block; }
.install-steps b { font-size: 13px; }
.install-steps small { margin-top: 4px; color: #69768b; font-size: 12px; line-height: 1.6; }
.upload-modal .modal-head p { margin: 3px 0 0; color: #8995a8; font-size: 11px; }.upload-choice-list { display: grid; gap: 10px; }.upload-choice { width: 100%; display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 11px; padding: 13px; text-align: left; color: #40506a; border: 1px solid #dfe5ee; background: white; border-radius: 12px; }.upload-choice:hover { border-color: #9dbdf7; background: #f8fbff; }.upload-choice-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }.upload-choice-icon.camera { color: #2168e5; background: #e9f1ff; }.upload-choice-icon.gallery { color: #118c74; background: #e7f8f3; }.upload-choice b, .upload-choice small { display: block; }.upload-choice b { font-size: 14px; }.upload-choice small { margin-top: 3px; color: #8793a7; font-size: 11px; }.upload-pdf-choice { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #5f6d84; border: 0; background: transparent; font-size: 12px; }.upload-modal-foot .btn { width: 100%; }
.toast { position: fixed; z-index: 70; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 9px; max-width: 360px; padding: 12px 15px; color: #e5fff8; background: #173b3b; border-radius: 10px; box-shadow: 0 12px 28px rgba(15,34,43,.24); font-size: 12px; animation: toast .25s ease; }.toast.error { color: #fff; background: #703c43; }
.mobile-nav { display: none; }

@keyframes fade { from { opacity:0 } to { opacity:1 } } @keyframes up { from { opacity:0; transform:translateY(9px) } to { opacity:1; transform:translateY(0) } } @keyframes toast { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }

@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2,1fr); } .grid-2, .report-layout, .admin-grid { grid-template-columns: 1fr; }.report-layout aside { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; }.report-layout aside .action-panel { margin-top: 0; }.login-shell { grid-template-columns: 1fr; }.login-hero { min-height: 390px; }.login-hero h1 { margin-top: 68px; }.login-card { margin: 0 auto; }.sidebar { width: 208px; }.main { width: calc(100% - 208px); margin-left: 208px; }.content { padding: 26px; }.topbar { padding: 0 26px; } }
@media (max-width: 700px) {
  body { background: #f3f6fa; }
  .sidebar { display: none; }
  .main { width: 100%; margin: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar { height: 56px; padding: 0 15px; }
  .breadcrumb { display: none; }
  .mobile-menu { display:grid; }
  .icon-btn, .modal-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; }
  .mobile-drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: end; background: rgba(14,27,49,.46); animation: fade .15s ease; }
  .mobile-drawer { width: 100%; max-height: 88vh; overflow: auto; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -18px 45px rgba(16,31,55,.2); animation: up .2s ease; }
  .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 16px 13px; border-bottom: 1px solid var(--line); }
  .mobile-drawer-head .workspace-user { min-width: 0; padding: 0; background: transparent; }
  .mobile-drawer-head .workspace-user strong { color: #29364d; font-size: 14px; }
  .mobile-drawer-head .workspace-user small { color: #748198; font-size: 12px; }
  .mobile-drawer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; }
  .drawer-nav-item { position: relative; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #4d5c73; text-align: left; border: 1px solid #e2e7ef; border-radius: 12px; background: #fff; font-size: 13px; }
  .drawer-nav-item.active { color: #205fcf; border-color: #b9cdf4; background: #f2f7ff; font-weight: 600; }
  .drawer-nav-item .nav-count { position: absolute; top: 6px; right: 7px; }
  .mobile-drawer-actions { display: grid; gap: 5px; padding: 4px 14px 0; border-top: 1px solid var(--line); }
  .mobile-drawer-actions .reset-btn { min-height: 46px; color: #52627a; font-size: 13px; }
  .mobile-drawer-actions .reset-btn:hover { color: #255fbf; background: #f1f6ff; }
  .content { padding: 14px 12px 34px; }
  .mobile-guide { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: start; margin-bottom: 14px; padding: 12px; color: #385b86; border: 1px solid #cfe0fb; background: #f1f7ff; border-radius: 12px; }
  .mobile-guide-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #276ae8; background: white; border-radius: 9px; }
  .mobile-guide b { display: block; font-size: 13px; }
  .mobile-guide p { margin: 3px 0 0; color: #637a99; font-size: 12px; line-height: 1.55; }
  .mobile-guide button { min-height: 44px; align-self: center; padding: 7px 8px; color: #2867d5; border: 0; background: transparent; font-size: 12px; white-space: nowrap; }
  .page-head { display: block; margin-bottom: 16px; }
  .page-head h1 { font-size: 23px; line-height: 1.35; }
  .page-head p { margin-top: 5px; font-size: 13px; line-height: 1.6; }
  .page-head-actions { width: 100%; margin-top: 12px; }
  .page-head-actions .btn { flex: 1; min-height: 46px; font-size: 14px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 112px; padding: 13px; }
  .stat-card .stat-top { font-size: 12px; }
  .stat-num { margin-top: 10px; font-size: 20px; }
  .grid-2 { gap: 13px; }
  .card { border-radius: 13px; }
  .card-pad, .detail-section, .detail-header, .form-card { padding: 15px; }
  .section-head { padding: 16px 15px 12px; }
  .section-head h3 { font-size: 15px; }
  .section-head .link-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 8px; }
  .toolbar { display: grid; grid-template-columns: 1fr; padding: 12px; }
  .search { min-width: 100%; }
  .search input, .select-sm { min-height: 44px; font-size: 14px; }
  .desktop-report-table { display: none; }
  .mobile-report-list { display: grid; gap: 11px; padding: 0 11px 12px; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; gap: 13px; }
  .field.full { grid-column: auto; }
  .field label, .voucher-field > label { font-size: 14px; }
  .field input, .field select, .field textarea { min-height: 48px; padding: 11px 12px; border-radius: 10px; font-size: 16px; }
  .form-steps { gap: 5px; }
  .form-steps span { justify-content: center; gap: 4px; padding: 9px 4px; font-size: 10px; text-align: center; }
  .form-steps i { width: 20px; height: 20px; flex: 0 0 auto; }
  .form-card h3 { align-items: center; font-size: 16px; }
  .form-card h3 small { display: none; }
  .form-card h3 .btn { min-height: 44px; font-size: 13px; }
  .expense-form { padding: 48px 13px 14px; margin-top: 18px; border-radius: 13px; }
  .expense-index { top: -11px; padding: 4px 8px; font-size: 11px; }
  .remove-expense { top: 6px; min-height: 44px; padding: 8px 10px; }
  .voucher-main-button { min-height: 82px; padding: 13px; }
  .voucher-main-button b { font-size: 15px; }
  .voucher-main-button small { font-size: 12px; line-height: 1.5; }
  .voucher-added { min-height: 72px; }
  .ocr-result { display: grid; grid-template-columns: auto 1fr; padding: 11px; font-size: 12px; line-height: 1.55; }
  .ocr-result .upload-link { grid-column: 1 / -1; min-height: 44px; border-top: 1px solid #cfeae3; font-size: 13px; }
  .form-foot { bottom: calc(70px + env(safe-area-inset-bottom)); align-items: center; margin: 15px -3px 0; padding: 10px 11px; border-radius: 13px; }
  .form-total { font-size: 11px; }
  .form-total b { font-size: 18px; }
  .form-foot-actions .btn.secondary { display: none; }
  .form-foot-actions .btn { min-height: 48px; padding: 9px 13px; font-size: 14px; }
  .report-layout aside { display: block; }
  .report-layout aside .action-panel { margin-top: 15px; }
  .detail-title-row { display: block; }
  .back-btn, .row-action, .upload-link, .voucher-added button, .attachment { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 10px; }
  .detail-title-row > .status { margin-top: 10px; }
  .detail-amount { font-size: 25px; }
  .detail-sub { gap: 9px; flex-wrap: wrap; font-size: 12px; line-height: 1.6; }
  .expense-info { display: grid; gap: 5px; font-size: 12px; }
  .timeline-item strong { font-size: 13px; }
  .timeline-item p { font-size: 12px; }
  .preview-row { grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; }
  .preview-row .preview-voucher { display:block; grid-column: 2 / -1; grid-row: 2; overflow-wrap: anywhere; line-height: 1.5; }
  .preview-row .amount { grid-column: 3; grid-row: 1; }
  .notice { grid-template-columns: 38px 1fr; padding: 15px; }
  .notice strong { font-size: 14px; }
  .notice p { font-size: 13px; }
  .notice time { grid-column: 2; }
  .report-controls { display: grid; grid-template-columns: 1fr; }
  .desk-tabs { width: 100%; }
  .desk-tabs button { flex: 1; min-height: 46px; padding: 8px; }
  .report-controls .select-sm { width: 100%; }
  .report-summary { grid-template-columns: 1fr; }
  .break-row { grid-template-columns: 72px 1fr 70px; gap: 7px; }
  .admin-grid .table-scroll { overflow: visible; }
  .admin-grid table { min-width: 0; display: block; padding: 0 11px 12px; }
  .admin-grid thead { display: none; }
  .admin-grid tbody, .admin-grid tr { display: block; }
  .admin-grid tr { margin-bottom: 10px; padding: 11px 13px; border: 1px solid #e1e7ef; background: white; border-radius: 12px; }
  .admin-grid td { display: grid; grid-template-columns: 88px 1fr; align-items: center; min-height: 36px; padding: 6px 0; border: 0; font-size: 12px; }
  .admin-grid td:before { color: #8793a6; }
  .admin-grid td:nth-child(1):before { content: "姓名"; }
  .admin-grid td:nth-child(2):before { content: "角色"; }
  .admin-grid td:nth-child(3):before { content: "职位"; }
  .admin-grid td:nth-child(4):before { content: "默认银行卡"; }
  .admin-grid td:nth-child(5):before { content: "账号状态"; }
  .admin-grid td:nth-child(5) label { min-height: 44px; display: flex; align-items: center; }
  .admin-grid .switch { width: 44px; height: 24px; flex: 0 0 44px; }
  .admin-grid .switch:before { width: 18px; height: 18px; }
  .admin-grid .switch:checked:before { left: 23px; }
  .system-health { grid-template-columns: repeat(2,1fr); padding: 13px; }
  .system-health > div:first-child { grid-column: 1 / -1; }
  .system-health > div:not(:first-child) { padding: 8px 0 0; border-top: 1px solid #e1ebe7; border-left: 0; }
  .audit-list article { grid-template-columns: 32px 1fr; }
  .audit-list code { display: none; }
  .btn { min-height: 44px; font-size: 13px; }
  .action-stack .btn { min-height: 48px; font-size: 14px; }
  .upload-backdrop { align-items: end; padding: 0; }
  .upload-modal { width: 100%; max-height: 82vh; border-radius: 20px 20px 0 0; animation: up .22s ease; }
  .upload-modal .modal-head { padding: 18px 18px 14px; }
  .upload-choice-list { padding: 14px; }
  .upload-choice { min-height: 76px; padding: 13px; }
  .upload-choice b { font-size: 16px; }
  .upload-choice small { font-size: 12px; line-height: 1.5; }
  .upload-pdf-choice { min-height: 46px; }
  .upload-modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .mobile-nav { display: flex; justify-content: space-around; position: fixed; z-index: 15; min-height: 68px; left: 0; right:0; bottom:0; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #dfe5ee; background: rgba(255,255,255,.98); box-shadow: 0 -8px 24px rgba(24,42,72,.07); backdrop-filter: blur(10px); }
  .mobile-nav button { display: grid; gap: 3px; place-items: center; flex: 1; min-height: 62px; color: #7c899f; padding: 7px 0; border: 0; background: transparent; font-size: 11px; }
  .mobile-nav button.active { color: var(--blue); font-weight: 600; }
  .mobile-nav svg { width:20px; height:20px; }
  .login-hero { min-height: 310px; padding: 26px 22px; }
  .login-hero h1 { margin-top: 48px; font-size: 34px; }
  .login-hero p { font-size: 14px; }
  .hero-points { margin-top: 23px; }
  .login-card { padding: 28px 18px; }
  .login-card h2 { font-size: 23px; }
  .role-choice { min-height: 70px; }
}