:root{--color-primary:#409eff;--color-primary-light:#66b1ff;--color-primary-dark:#3a8ee6;--color-success:#67c23a;--color-success-bg:#f0f9eb;--color-warning:#e6a23c;--color-warning-bg:#fdf6ec;--color-danger:#f56c6c;--color-danger-bg:#fef0f0;--color-info:#909399;--color-info-bg:#f4f4f5;--color-bg:#fff;--color-bg-secondary:#f5f7fa;--color-bg-hover:#f0f2f5;--color-bg-active:#ecf5ff;--color-text:#303133;--color-text-secondary:#909399;--color-text-placeholder:#c0c4cc;--color-border:#dcdfe6;--color-border-light:#e4e7ed;--spacing-xs:6px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:32px;--spacing-xl:48px;--spacing-2xl:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-size-xs:13px;--font-size-sm:15px;--font-size-base:17px;--font-size-lg:22px;--font-size-xl:32px;--font-size-2xl:40px;--breakpoint-mobile:768px;--breakpoint-tablet:1200px;--sidebar-width:240px;--sidebar-collapsed-width:64px;--mobile-nav-height:64px;--content-max-width:min(90vw, 1800px);--page-padding:var(--spacing-lg);--page-padding-mobile:var(--spacing-xs);--touch-target-min:44px;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px);--safe-area-right:env(safe-area-inset-right,0px);--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--transition-fast:.2s;--z-nav:100;--z-loading:10;--z-loading-fullscreen:9999;--z-drawer:1000;--z-dialog:1000;--z-popover:1005;--z-message-box:1010}*,:before,:after{box-sizing:border-box;margin:0}body{min-height:100vh;color:var(--color-text);background:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;line-height:1.6}#app{min-height:100vh}a{color:var(--color-primary);text-decoration:none}button{cursor:pointer}select{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;padding:var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23909399' d='M6 8.825c-.2 0-.4-.075-.55-.225l-3-3a.776.776 0 0 1 0-1.1.776.776 0 0 1 1.1 0L6 6.95 8.45 4.5a.776.776 0 0 1 1.1 0 .776.776 0 0 1 0 1.1l-3 3c-.15.15-.35.225-.55.225Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-sm) center;font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);min-height:var(--touch-target-min);background-size:12px}select:hover{border-color:var(--color-text-placeholder)}select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px rgba(64,158,255,.2)}select:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-placeholder);cursor:not-allowed}select option{padding:var(--spacing-sm);background:var(--color-bg);color:var(--color-text)}input,textarea{font-size:var(--font-size-base);padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);min-height:var(--touch-target-min);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);font-family:inherit}input:hover,textarea:hover{border-color:var(--color-text-placeholder)}input:focus,textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px rgba(64,158,255,.2)}input:disabled,textarea:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-placeholder);cursor:not-allowed}input::-webkit-input-placeholder{color:var(--color-text-placeholder)}input::-moz-placeholder{color:var(--color-text-placeholder)}input::-ms-input-placeholder{color:var(--color-text-placeholder)}input::placeholder{color:var(--color-text-placeholder)}textarea::-webkit-input-placeholder{color:var(--color-text-placeholder)}textarea::-moz-placeholder{color:var(--color-text-placeholder)}textarea::-ms-input-placeholder{color:var(--color-text-placeholder)}textarea::placeholder{color:var(--color-text-placeholder)}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-fast);min-height:var(--touch-target-min);display:inline-flex}.btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-light);border-color:var(--color-primary-light)}.btn-danger{color:var(--color-danger);border-color:var(--color-danger)}.btn-danger:hover{background:var(--color-danger);color:#fff}.btn-success{color:var(--color-success);border-color:var(--color-success)}.btn-success:hover{background:var(--color-success);color:#fff}.btn-small{padding:2px var(--spacing-sm);font-size:var(--font-size-sm);min-height:32px}.table-wrapper{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.data-table{border-collapse:collapse;background:var(--color-bg);width:100%;min-width:600px}.data-table th,.data-table td{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border-light);text-align:left;white-space:nowrap}.data-table th{background:var(--color-bg-secondary);color:var(--color-text);font-weight:600;font-size:var(--font-size-sm)}.data-table tbody tr:hover{background:var(--color-bg-hover)}.data-table .empty{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-xl)}.tag{padding:2px var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);align-items:center;gap:4px;font-weight:500;display:inline-flex}.tag-pending{color:var(--color-warning);background:#fdf6ec}.tag-settled{color:var(--color-success);background:#f0f9eb}.modal-mask{z-index:1000;padding:var(--spacing-md);background:rgba(0,0,0,.5);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal{background:var(--color-bg);border-radius:var(--radius-md);width:100%;max-width:720px;max-height:90vh;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;overflow-y:auto}.modal-large{max-width:720px}.modal-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border-light);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.modal-header h3{color:var(--color-text);font-size:var(--font-size-lg);margin:0}.modal-close{color:var(--color-text-secondary);font-size:var(--font-size-xl);padding:var(--spacing-xs);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;line-height:1}.modal-close:hover{background:var(--color-bg-hover);color:var(--color-text)}.modal-body{padding:var(--spacing-lg);flex:1;overflow-y:auto}.modal-footer{gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border-light);flex-shrink:0;justify-content:flex-end;display:flex}.form-group{margin-bottom:var(--spacing-md)}.form-group label{margin-bottom:var(--spacing-xs);color:var(--color-text-secondary);font-weight:500;font-size:var(--font-size-sm);display:block}.form-group input,.form-group select,.form-group textarea{width:100%}.form-actions{gap:var(--spacing-sm);margin-top:var(--spacing-lg);justify-content:flex-end;display:flex}.page-container{padding:var(--page-padding);max-width:var(--content-max-width);margin:0 auto}.page-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.page-header h2{color:var(--color-text);margin:0}@media (max-width:767px){.modal-mask{align-items:flex-end;padding:0}.modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:100%;max-height:85vh}.modal-header{padding:var(--spacing-sm) var(--spacing-md)}.modal-body{padding:var(--spacing-md)}.modal-footer{padding:var(--spacing-sm) var(--spacing-md);flex-direction:column}.modal-footer .btn{justify-content:center;width:100%}.page-container{padding:var(--page-padding-mobile)}.page-header{flex-wrap:nowrap}.form-actions{flex-direction:column}.form-actions .btn{justify-content:center;width:100%}}.app-root{min-height:100vh}.offline-bar{z-index:99999;background:var(--color-danger);color:#fff;text-align:center;font-size:var(--font-size-sm);padding:8px;padding-top:calc(8px + var(--safe-area-top));position:fixed;top:0;left:0;right:0}