:root{--primary:#0284c7;--primary-hover:#0369a1;--primary-light:rgba(2,132,199,0.1);--sidebar-bg:#0f172a;--sidebar-hover:#1e293b;--bg-base:#f8fafc;--card-bg:#ffffff;--input-bg:#ffffff;--hover-bg:#f1f5f9;--text-main:#1e293b;--text-sub:#64748b;--text-muted:#94a3b8;--text-light:#f1f5f9;--border-color:#e2e8f0;--divider-color:#f1f5f9;--success:#10b981;--success-light:#d1fae5;--success-hover:#059669;--warning:#f59e0b;--warning-light:#fef3c7;--warning-hover:#d97706;--danger:#ef4444;--danger-light:#fee2e2;--danger-hover:#dc2626;--info:#3b82f6;--info-light:#dbeafe;--shadow-xs:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-sm:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;--text-3xl:24px;--text-4xl:30px;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);--breakpoint-xs:375px;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px}*{margin:0;padding:0;box-sizing:border-box}.svg-inline--fa{font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa,svg{display:inline-block}svg{max-width:1em;max-height:1em}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:var(--text-base);line-height:1.5;color:var(--text-main);background-color:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-sub)}.card{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);padding:var(--space-lg);margin-bottom:var(--space-lg)}.card-header{margin-bottom:var(--space-md)}.card-header,.header{display:flex;justify-content:space-between;align-items:center}.header{padding:0 var(--space-lg);height:64px;background:var(--card-bg);border-bottom:1px solid var(--border-color)}.card-title{font-size:var(--text-lg);font-weight:700;color:var(--text-main)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;text-decoration:none;line-height:1.5}.btn:focus{outline:2px solid var(--primary);outline-offset:2px}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-outline{background-color:transparent;border-color:var(--border-color);color:var(--text-main)}.btn-outline:hover{background-color:var(--bg-base);border-color:var(--text-sub)}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{background-color:var(--danger-hover)}.btn-danger-light{background-color:var(--danger-light);color:var(--danger)}.btn-success-light{background-color:var(--success-light);color:var(--success)}.status-tag{display:inline-block;padding:4px 10px;border-radius:20px;font-size:var(--text-xs);font-weight:600}.status-pending{background-color:var(--warning-light);color:#d97706}.status-success{background-color:var(--success-light);color:var(--success)}.status-danger{background-color:var(--danger-light);color:var(--danger)}.status-info{background-color:var(--info-light);color:var(--info)}.badge{background:var(--danger);color:white;font-size:11px;padding:2px 6px;border-radius:10px;margin-left:auto;font-weight:600}.badge-warning{background:var(--warning)}.table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg)}.table-wrapper table{min-width:800px}.data-table{width:100%;border-collapse:separate;border-spacing:0}.sticky-header th{position:-webkit-sticky;position:sticky;top:0;z-index:10;background:var(--bg-base);padding:var(--space-md);font-size:var(--text-sm);font-weight:600;color:var(--text-sub);border-bottom:2px solid var(--border-color);white-space:nowrap}.sticky-header th.sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sticky-header th.sortable:hover{background:#f1f5f9}.sort-indicator{display:inline-flex;align-items:center;font-size:12px;transition:transform .2s}.table-row td{padding:var(--space-md);font-size:var(--text-base);color:var(--text-main);border-bottom:1px solid var(--border-color);background:var(--card-bg);transition:background .15s}.table-row.striped td{background:#f8fafc}.table-row.hoverable:hover td{background:#f1f5f9}.table-row.hoverable{cursor:pointer}.data-table.compact td,.data-table.compact th{padding:8px 12px}.skeleton-cell{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.table-empty{padding:48px 24px;text-align:center;color:var(--text-muted)}.table-empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.input-wrapper{position:relative;margin-bottom:var(--space-md)}.input-wrapper.full-width{width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:var(--text-base);color:var(--text-muted);pointer-events:none;transition:all .2s ease;background:var(--card-bg);padding:0 4px}.input-label.float{top:0;transform:translateY(-50%);font-size:var(--text-xs);color:var(--primary)}.input-container{position:relative;display:flex;align-items:center}.input{flex:1 1;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--text-base);background:var(--input-bg);color:var(--text-main);transition:all var(--transition-base)}.input.has-icon{padding-left:40px}.input:focus{outline:none;box-shadow:0 0 0 3px var(--primary-light)}.input-container.focused .input,.input:focus{border-color:var(--primary)}.input-container.error .input{border-color:var(--danger)}.input-container.error .input:focus{box-shadow:0 0 0 3px var(--danger-light)}.input-icon{position:absolute;left:12px;color:var(--text-muted);font-size:14px;transition:color .2s}.input-container.focused .input-icon{color:var(--primary)}.input-error-icon{position:absolute;right:12px;color:var(--danger);font-size:14px}.input-helper{color:var(--text-sub)}.input-error-msg,.input-helper{display:block;margin-top:4px;font-size:var(--text-sm)}.input-error-msg{color:var(--danger)}.select-wrapper{position:relative;margin-bottom:var(--space-md)}.select-trigger{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--input-bg);cursor:pointer;transition:all var(--transition-base)}.select-trigger:hover:not(.disabled){border-color:var(--text-sub)}.select-trigger.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.select-trigger.error{border-color:var(--danger)}.select-trigger.disabled{opacity:.5;cursor:not-allowed;background:var(--bg-base)}.select-value{font-size:var(--text-base);color:var(--text-main)}.select-arrow,.select-value.placeholder{color:var(--text-muted)}.select-arrow{font-size:12px;transition:transform .2s}.select-arrow.rotate{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:200px;overflow-y:auto;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown)}.select-option{padding:var(--space-sm) var(--space-md);font-size:var(--text-base);color:var(--text-main);cursor:pointer;transition:background var(--transition-fast)}.select-option:hover:not(.disabled):not(.selected){background:var(--bg-base)}.select-option.selected{background:var(--primary-light);color:var(--primary);font-weight:600}.select-option.disabled{opacity:.5;cursor:not-allowed}.switch-label{font-size:var(--text-base);color:var(--text-main)}.switch{position:relative;border:none;border-radius:9999px;background:var(--border-color);cursor:pointer;transition:background var(--transition-base);flex-shrink:0}.switch.checked{background:var(--primary)}.switch.disabled{opacity:.5;cursor:not-allowed}.switch-dot{position:absolute;left:2px;top:50%;transform:translateY(-50%);border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--transition-base)}.switch.checked .switch-dot{transform:translateY(-50%) translateX(calc(100% + 8px))}.select{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--text-base);background:var(--input-bg);color:var(--text-main);cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-slow) ease}.page-transition{animation:pageSlideIn .3s cubic-bezier(.4,0,.2,1)}@keyframes pageSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card-hover{transition:all var(--transition-base)}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.btn:active:not(:disabled){transform:scale(.97)}.list-enter{animation:listSlideIn .3s ease}@keyframes listSlideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.text-main{color:var(--text-main)}.text-sub{color:var(--text-sub)}.text-muted{color:var(--text-muted)}.text-primary{color:var(--primary)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}@media (max-width:768px){.container{padding:0 12px}}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:24px;gap:24px;margin-bottom:24px}@media (max-width:1024px){.kpi-grid{grid-template-columns:repeat(2,1fr);gap:16px}}@media (max-width:640px){.kpi-grid{grid-template-columns:1fr;gap:12px}}.chart-grid{display:grid;grid-template-columns:2fr 1fr;grid-gap:24px;gap:24px;margin-bottom:24px}@media (max-width:1024px){.chart-grid{grid-template-columns:1fr}}@media (max-width:768px){.hide-mobile{display:none!important}}@media (min-width:769px){.hide-desktop{display:none!important}}.mobile-only{display:none}@media (max-width:768px){.mobile-only{display:block}}@media (hover:none) and (pointer:coarse){.btn{min-height:44px;min-width:44px}.table-wrapper td{padding:12px 8px}}@media (max-width:768px){.btn{min-height:44px;min-width:44px;padding:12px 20px}.btn-sm{min-height:36px;min-width:36px;padding:8px 16px}.input,.select,select{min-height:48px;font-size:16px}main{padding:16px!important}}