:root{--color-ok: #059669;--color-ok-bg: #d1fae5;--color-ok-bg-soft: #f0fdf4;--color-ok-border: #bbf7d0;--color-ok-fg: #065f46;--color-warn: #d97706;--color-warn-strong: #b45309;--color-warn-bg: #fef3c7;--color-warn-bg-soft: #fffbeb;--color-warn-border: #fcd34d;--color-warn-border-soft: #fde68a;--color-warn-fg: #92400e;--color-danger: #dc2626;--color-danger-bg: #fee2e2;--color-danger-bg-soft: #fef2f2;--color-danger-border: #fecaca;--color-danger-fg: #991b1b;--color-info: #3b82f6;--color-info-bg: #dbeafe;--color-info-bg-soft: #eff6ff;--color-info-border: #bfdbfe;--color-info-fg: #1e40af;--color-info-bg-subtle: #f0f9ff;--color-info-border-subtle: #bae6fd;--color-info-fg-strong: #075985;--color-running-bg: #ede9fe;--color-running-fg: #5b21b6;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-brand-gradient-from: #667eea;--color-brand-gradient-to: #764ba2;--brand-gradient: linear-gradient( 135deg, var(--color-brand-gradient-from) 0%, var(--color-brand-gradient-to) 100% );--color-text: #111827;--color-text-secondary: #374151;--color-text-tertiary: #4b5563;--color-text-muted: #6b7280;--color-text-placeholder: #9ca3af;--color-surface: #fff;--color-surface-muted: #f8fafc;--color-bg: #f9fafb;--color-bg-subtle: #f3f4f6;--color-border: #e5e7eb;--color-border-strong: #d1d5db;--color-avatar-bg: #e0e7ff;--color-sidebar-line: rgba(255, 255, 255, .1);--color-sidebar-text: rgba(255, 255, 255, .7);--color-sidebar-text-muted: rgba(255, 255, 255, .5);--color-overlay: rgba(0, 0, 0, .4);--focus-ring: 0 0 0 3px rgba(37, 99, 235, .1);--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, .15);--shadow-login-card: 0 20px 60px rgba(0, 0, 0, .3);--shadow-card: 0 1px 3px rgba(0, 0, 0, .05);--font-size-1: 11px;--font-size-2: 12px;--font-size-3: 13px;--font-size-4: 14px;--font-size-5: 16px;--font-size-6: 18px;--font-size-7: 24px;--font-size-8: 28px;--icon-size-sm: 18px;--icon-size-md: 20px;--icon-size-lg: 22px;--icon-size-xl: 48px;--primary: var(--color-primary);--primary-hover: var(--color-primary-hover);--success: var(--color-ok);--warning: var(--color-warn);--danger: var(--color-danger);--info: var(--color-info);--gray-50: var(--color-bg);--gray-100: var(--color-bg-subtle);--gray-200: var(--color-border);--gray-300: var(--color-border-strong);--gray-400: var(--color-text-placeholder);--gray-500: var(--color-text-muted);--gray-600: var(--color-text-tertiary);--gray-700: var(--color-text-secondary);--gray-900: var(--color-text);--sidebar-width: 240px;--header-height: 56px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:var(--font-size-4);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}a{color:var(--color-primary);text-decoration:none}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit;font-size:var(--font-size-4)}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--color-text);color:var(--color-surface);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100}.sidebar-logo{padding:16px 20px;font-size:var(--font-size-5);font-weight:600;border-bottom:1px solid var(--color-sidebar-line)}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.sidebar-nav a{display:flex;align-items:center;padding:10px 20px;color:var(--color-sidebar-text);transition:all .2s}.sidebar-nav a:hover{background:var(--color-sidebar-line);color:var(--color-surface)}.sidebar-nav a.active{background:var(--color-primary);color:var(--color-surface)}.sidebar-nav .nav-icon{margin-right:10px;width:20px;text-align:center}.sidebar-footer{padding:12px 20px;border-top:1px solid var(--color-sidebar-line);font-size:var(--font-size-2);color:var(--color-sidebar-text-muted)}.main-content{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column}.header{height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}.header-title{font-size:var(--font-size-5);font-weight:600}.header-user{display:flex;align-items:center;gap:12px}.header-user .role-badge{background:var(--color-bg-subtle);padding:2px 8px;border-radius:4px;font-size:var(--font-size-2);color:var(--color-text-secondary)}.page-content{padding:24px;flex:1}.card{background:var(--color-surface);border-radius:8px;border:1px solid var(--color-border);padding:20px;margin-bottom:20px}.card-title{font-size:var(--font-size-5);font-weight:600;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--color-border)}th{background:var(--color-bg);font-weight:600;color:var(--color-text-secondary);font-size:var(--font-size-3)}tr:hover{background:var(--color-bg)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:6px;border:1px solid transparent;font-size:var(--font-size-4);font-weight:500;transition:all .2s}.btn-primary{background:var(--color-primary);color:var(--color-surface)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text-secondary);border-color:var(--color-border-strong)}.btn-secondary:hover{background:var(--color-bg)}.btn-danger{background:var(--color-danger);color:var(--color-surface)}.btn-success{background:var(--color-ok);color:var(--color-surface)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:4px 10px;font-size:var(--font-size-3)}.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:6px;font-weight:500;color:var(--color-text-secondary)}.form-input,.form-select,.form-textarea{width:100%;padding:8px 12px;border:1px solid var(--color-border-strong);border-radius:6px;outline:none;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}.form-textarea{min-height:80px;resize:vertical}.status-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:var(--font-size-2);font-weight:500}.status-pending{background:var(--color-warn-bg);color:var(--color-warn-fg)}.status-approved{background:var(--color-info-bg);color:var(--color-info-fg)}.status-executing{background:var(--color-running-bg);color:var(--color-running-fg)}.status-confirmed{background:var(--color-ok-bg);color:var(--color-ok-fg)}.status-rejected,.status-failed{background:var(--color-danger-bg);color:var(--color-danger-fg)}.alert{padding:12px 16px;border-radius:6px;margin-bottom:16px}.alert-error{background:var(--color-danger-bg);color:var(--color-danger-fg);border:1px solid var(--color-danger-border)}.alert-warning{background:var(--color-warn-bg);color:var(--color-warn-fg);border:1px solid var(--color-warn-border-soft)}.alert-info{background:var(--color-info-bg);color:var(--color-info-fg);border:1px solid var(--color-info-border)}.alert-success{background:var(--color-ok-bg);color:var(--color-ok-fg);border:1px solid var(--color-ok-border)}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}.pagination button{padding:6px 12px;border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:4px}.pagination button:disabled{opacity:.5}.pagination .page-info{color:var(--color-text-muted);font-size:var(--font-size-3)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--brand-gradient)}.login-card{background:var(--color-surface);padding:40px;border-radius:12px;box-shadow:var(--shadow-login-card);width:400px}.login-title{font-size:var(--font-size-7);font-weight:700;text-align:center;margin-bottom:8px}.login-subtitle{text-align:center;color:var(--color-text-muted);margin-bottom:32px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}.stat-card{background:var(--color-surface);border-radius:8px;border:1px solid var(--color-border);padding:20px}.stat-label{font-size:var(--font-size-3);color:var(--color-text-muted);margin-bottom:8px}.stat-value{font-size:var(--font-size-8);font-weight:700;color:var(--color-text)}.loading{text-align:center;padding:40px;color:var(--color-text-muted)}.spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.idempotency-notice{background:var(--color-info-bg-subtle);border:1px solid var(--color-info-border-subtle);color:var(--color-info-fg-strong);padding:10px 14px;border-radius:6px;font-size:var(--font-size-3);margin-bottom:16px;display:flex;align-items:center;gap:8px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}.spinner{animation:none!important}}