:root{--primary:#2f6fed;--primary-2:#3a7bf0;--primary-3:#4c8df5;--primary-4:#5b9bf7;--primary-dark:#2356c4;--primary-grad:linear-gradient(180deg, #3a7bf0, #2f6fed);--bg:#fff;--bg-soft:#f5f7fa;--bg-soft-2:#eef1f6;--card:#fff;--card-soft:#f2f5f9;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#131722;--text-2:#4b5563;--text-3:#8b96a5;--ok-bg:#e3f6ec;--ok-fg:#06603a;--warn-bg:#fdf1d9;--warn-fg:#92580a;--err-bg:#fde9e7;--err-fg:#a11c10;--info-bg:#e2f2fd;--info-fg:#075d92;--green:#12a76b;--amber:#e89b1c;--red:#d92d20;--radius-sm:10px;--radius:14px;--radius-lg:20px;--radius-pill:999px;--shadow:0 1px 2px 0 #1317220d, 0 2px 8px 0 #1317220a;--shadow-lg:0 8px 24px 0 #1317221a, 0 2px 6px 0 #1317220d;--font-heading:"Bricolage Grotesque", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;--font-body:"Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--container:1120px;--nav-h:64px}@media (prefers-color-scheme:dark){:root{--primary:#5b9bf7;--primary-2:#4c8df5;--primary-3:#3a7bf0;--primary-4:#2f6fed;--primary-dark:#7bb0fa;--primary-grad:linear-gradient(180deg, #4c8df5, #2f6fed);--bg:#0d1117;--bg-soft:#12171f;--bg-soft-2:#161c26;--card:#121720;--card-soft:#1a212c;--border:#252d3a;--border-strong:#384152;--text:#e8edf4;--text-2:#a4b0c1;--text-3:#6b7789;--ok-bg:#12a76b29;--ok-fg:#63d6a5;--warn-bg:#e89b1c29;--warn-fg:#f2c46d;--err-bg:#d92d2029;--err-fg:#f49a8f;--info-bg:#5b9bf729;--info-fg:#9cc2fa;--green:#34c98d;--amber:#e8b34a;--red:#f26a5e;--shadow:0 1px 2px 0 #0000004d;--shadow-lg:0 10px 28px 0 #00000073}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html,body{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:15px;line-height:1.55;transition:background-color .25s,color .25s}#app{flex-direction:column;min-height:100vh;display:flex}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-offset:2px;outline:3px solid #2f6fed73}.navbar{z-index:100;pointer-events:none;padding:0 20px;position:fixed;top:12px;left:0;right:0}.navbar-inner{pointer-events:auto;height:var(--nav-h);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);max-width:1080px;box-shadow:var(--shadow);align-items:center;gap:12px;margin:0 auto;padding:0 8px 0 18px;display:flex}.brand{font-family:var(--font-heading);color:var(--text);white-space:nowrap;letter-spacing:-.3px;align-items:baseline;gap:6px;font-size:16px;font-weight:700;display:flex}.brand .accent{color:var(--primary)}.brand small{color:var(--text-2);font-size:12px;font-weight:400}.nav-links{scrollbar-width:none;flex:1;gap:2px;display:flex;overflow-x:auto}.nav-links::-webkit-scrollbar{display:none}.nav-links a{color:var(--text-2);border-radius:var(--radius-pill);white-space:nowrap;padding:7px 13px;font-size:14px;font-weight:500;text-decoration:none;transition:background-color .18s,color .18s}.nav-links a.router-link-active{background:var(--bg-soft-2);color:var(--text);font-weight:600}.nav-links a:not(.router-link-active):hover{background:var(--bg-soft);color:var(--text)}.nav-user{white-space:nowrap;border-left:1px solid var(--border);align-items:center;gap:8px;padding-left:10px;display:flex}.avatar{background:var(--primary-grad);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:13px;font-weight:600;display:flex}.nav-user-name{color:var(--text);font-size:13px;font-weight:600}.role-chip,.status-chip{letter-spacing:.2px;white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600}.role-chip{background:var(--info-bg);color:var(--info-fg)}.role-chip.admin{background:var(--warn-bg);color:var(--warn-fg)}.role-chip.finance{background:var(--ok-bg);color:var(--ok-fg)}.status-chip.pending{background:var(--warn-bg);color:var(--warn-fg)}.status-chip.active{background:var(--ok-bg);color:var(--ok-fg)}.status-chip.banned{background:var(--err-bg);color:var(--err-fg)}.container{max-width:var(--container);padding:calc(var(--nav-h) + 56px) 24px 96px;width:100%;margin:0 auto}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px;display:flex}.page-title{font-family:var(--font-heading);letter-spacing:-1px;font-size:36px;font-weight:700;line-height:1.15}.page-sub{color:var(--text-2);margin-top:8px;font-size:14px}.grid{gap:14px;display:grid}.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card-title{font-family:var(--font-heading);letter-spacing:-.2px;margin-bottom:14px;font-size:16px;font-weight:600}.card-title .sub{color:var(--text-2);font-size:13px;font-weight:400}.btn{background:var(--card);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;font-size:14px;font-weight:600;font-family:var(--font-body);box-shadow:var(--shadow);justify-content:center;align-items:center;gap:7px;padding:9px 20px;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s,transform .12s,box-shadow .18s;display:inline-flex}.btn:hover{background:var(--bg-soft);border-color:var(--text-3);color:var(--text);text-decoration:none}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}.btn.primary:hover{background:var(--text-2);border-color:var(--text-2);color:var(--bg)}.btn.cta{background:var(--primary-grad);color:#fff;border-color:#0000;box-shadow:0 2px 10px #2f6fed47}.btn.cta:hover{background:var(--primary-dark);color:#fff;border-color:#0000}.btn.danger{background:var(--err-bg);color:var(--err-fg);border-color:#0000}.btn.danger:hover{background:var(--err-fg);border-color:var(--err-fg);color:#fff}.btn.success{background:var(--ok-bg);color:var(--ok-fg);border-color:#0000}.btn.success:hover{background:var(--ok-fg);border-color:var(--ok-fg);color:#fff}.btn.ghost{border-color:var(--border-strong);color:var(--text-2);box-shadow:none;background:0 0}.btn.ghost:hover{background:var(--bg-soft);border-color:var(--text-3);color:var(--text)}.btn.sm{padding:6px 13px;font-size:13px}.btn.lg{padding:13px 28px;font-size:15px}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn:disabled:active{transform:none}.btn.block{width:100%}.field{margin-bottom:16px}.field label{color:var(--text);margin-bottom:7px;font-size:13px;font-weight:600;display:block}.field input,.field select,.field textarea{border:1px solid var(--border-strong);width:100%;font-size:14px;font-family:var(--font-body);background:var(--card);color:var(--text);border-radius:12px;padding:10px 14px;transition:border-color .18s,box-shadow .18s}.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2f6fed29}.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--bg-soft);color:var(--text-3);cursor:not-allowed}.field textarea{resize:vertical;min-height:82px}.hint{color:var(--text-2);margin-top:4px;font-size:12px}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=640px){.form-row{grid-template-columns:1fr}}input[type=checkbox],input[type=radio]{accent-color:var(--primary);cursor:pointer;width:16px;height:16px}input[type=file]{color:var(--text-2);font-size:13px}input[type=file]::file-selector-button{background:var(--bg-soft);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-body);border-radius:10px;margin-right:10px;padding:7px 14px}input[type=file]::file-selector-button:hover{background:var(--bg-soft-2)}.auth-wrap{background:radial-gradient(90% 70% at 80% 0%, #2f6fed1a 0%, transparent 60%), linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{width:100%;max-width:420px}.auth-logo{text-align:center;margin-bottom:30px}.auth-logo .big{font-family:var(--font-heading);letter-spacing:-.8px;color:var(--text);font-size:28px;font-weight:700}.auth-logo .big .accent{color:var(--primary)}.auth-logo .en{color:var(--text-2);letter-spacing:.3px;margin-top:6px;font-size:13px}.auth-tip{text-align:center;color:var(--text-2);margin-top:18px;font-size:13px;line-height:1.8}.auth-tip a{color:var(--primary);font-weight:600;text-decoration:none}.auth-tip a:hover{text-decoration:underline}.badge{letter-spacing:.2px;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.badge.submitted{background:var(--warn-bg);color:var(--warn-fg)}.badge.approved{background:var(--info-bg);color:var(--info-fg)}.badge.paid{background:var(--ok-bg);color:var(--ok-fg)}.badge.rejected{background:var(--err-bg);color:var(--err-fg)}.list-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:inherit;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .12s;display:flex}.list-item:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-3);color:inherit;text-decoration:none;transform:translateY(-1px)}.list-item .amount{font-family:var(--font-heading);letter-spacing:-.3px;white-space:nowrap;font-size:17px;font-weight:700}.list-item .amount.paid{color:var(--green)}.list-item .amount.rejected{color:var(--red)}.list-item .title{font-size:15px;font-weight:600}.list-item .meta{color:var(--text-2);flex-wrap:wrap;gap:10px;margin-top:5px;font-size:12px;display:flex}.kpi-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;display:grid}.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:box-shadow .18s,transform .12s}.kpi:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.kpi .v{font-family:var(--font-heading);letter-spacing:-1px;font-size:28px;font-weight:700;line-height:1.1}.kpi .l{color:var(--text-2);margin-top:6px;font-size:13px;font-weight:500}.table-wrap{overflow-x:auto}table.data{border-collapse:collapse;width:100%;font-size:14px}table.data th,table.data td{text-align:left;border-bottom:1px solid var(--border);padding:12px 14px}table.data th{background:var(--bg-soft);color:var(--text-2);white-space:nowrap;font-size:13px;font-weight:600}table.data tr:hover td{background:var(--bg-soft)}table.data tr:last-child td{border-bottom:none}.detail-grid{grid-template-columns:1fr 1fr;gap:14px 24px;display:grid}@media (width<=640px){.detail-grid{grid-template-columns:1fr}}.detail-item .k{color:var(--text-2);font-size:12px;font-weight:500}.detail-item .v{word-break:break-all;margin-top:3px;font-size:15px;font-weight:600}.receipt-img{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-soft);max-width:100%;max-height:400px;margin-top:10px;display:block}.cat-bar{border-radius:6px;height:18px;margin-bottom:12px;display:flex;overflow:hidden}.cat-legend{flex-direction:column;gap:6px;display:flex}.cat-legend-row{align-items:center;gap:8px;font-size:13px;display:flex}.cat-swatch{border-radius:3px;flex-shrink:0;width:10px;height:10px}.cat-name{flex:1}.cat-amount{color:var(--text-2)}.cat-pct{text-align:right;width:44px;color:var(--text-2)}@media (prefers-color-scheme:dark){.cat-bar-seg,.cat-swatch{filter:saturate(.72)brightness(1.15)}}.modal-mask{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d111780;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:var(--card);border-radius:var(--radius);width:100%;max-width:560px;max-height:86vh;box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:26px;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-title{font-family:var(--font-heading);letter-spacing:-.3px;font-size:18px;font-weight:700}.alert{border-radius:12px;margin-bottom:16px;padding:12px 16px;font-size:13px;font-weight:500}.alert.error{background:var(--err-bg);color:var(--err-fg)}.alert.success{background:var(--ok-bg);color:var(--ok-fg)}.alert.info{background:var(--info-bg);color:var(--info-fg)}.timeline{padding-left:24px;position:relative}.timeline:before{content:"";background:var(--border);width:2px;position:absolute;top:6px;bottom:6px;left:7px}.timeline .tl-item{padding-bottom:20px;position:relative}.timeline .tl-item:before{content:"";background:var(--card);border:2px solid var(--border-strong);border-radius:50%;width:14px;height:14px;position:absolute;top:5px;left:-24px}.timeline .tl-item.done:before{background:var(--green);border-color:var(--green)}.timeline .tl-item.done .tl-title{color:var(--green)}.timeline .tl-item.pending:before{border-color:var(--amber)}.timeline .tl-title{font-size:14px;font-weight:600}.timeline .tl-time{color:var(--text-2);margin-top:2px;font-size:12px}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:24px;display:flex}.tabs button{border:1px solid var(--border-strong);background:var(--card);color:var(--text-2);cursor:pointer;border-radius:var(--radius-pill);font-size:14px;font-weight:600;font-family:var(--font-body);padding:8px 16px;transition:all .18s}.tabs button:hover{border-color:var(--primary-3);color:var(--text)}.tabs button.active{background:var(--text);border-color:var(--text);color:var(--bg)}.muted{color:var(--text-2)}.small{font-size:12px}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb16{margin-bottom:16px}.empty{text-align:center;color:var(--text-2);padding:56px 16px;font-size:14px}.loading{text-align:center;color:var(--text-2);padding:48px}.spinner{border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.grow{flex:1}@media (width<=900px){.navbar{padding:0 12px;top:8px}.page-title{font-size:30px}.container{padding-top:calc(var(--nav-h) + 44px)}}@media (width<=767px){.navbar-inner{border-radius:12px;gap:8px;padding:0 6px 0 14px}.brand small,.nav-user-name,.nav-user .status-chip{display:none}.nav-links{flex-basis:100%;order:3;padding-top:6px;padding-bottom:6px}.nav-links a{padding:13px 11px;font-size:13px}.navbar-inner{flex-wrap:wrap;height:auto;padding-top:4px;padding-bottom:4px}.container{padding:calc(var(--nav-h) + 40px) 14px 64px}.page-title{font-size:26px}.page-head{margin-bottom:24px}.kpi .v{font-size:23px}.list-item{padding:13px}.btn.sm{padding:13px 16px}.tabs button{padding:12px 16px}.card{padding:17px}table.data th,table.data td{padding:10px;font-size:12px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}