:root{--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-success: #059669;--color-success-bg: #ecfdf5;--color-warning: #d97706;--color-warning-bg: #fffbeb;--color-danger: #dc2626;--color-danger-bg: #fef2f2;--color-info: #0ea5e9;--color-gray-50: #f8fafc;--color-gray-100: #f1f5f9;--color-gray-200: #e2e8f0;--color-gray-300: #cbd5e1;--color-gray-400: #94a3b8;--color-gray-500: #64748b;--color-gray-600: #475569;--color-gray-700: #334155;--color-gray-800: #1e293b;--color-gray-900: #0f172a;--bg-page: var(--color-gray-50);--bg-surface: #ffffff;--bg-card: #ffffff;--border-light: var(--color-gray-200);--border-medium: var(--color-gray-300);--text-primary: var(--color-gray-800);--text-secondary: var(--color-gray-500);--text-muted: var(--color-gray-400);--text-inverse: #ffffff;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.06);--shadow-lg: 0 8px 24px rgba(0,0,0,.08);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--transition-fast: .15s ease;--transition-normal: .25s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,sans-serif;background:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-size:var(--text-base);line-height:1.5}a{color:var(--color-brand-600);text-decoration:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:4px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f0f4ff,#e8f0fe 40%,#f1f5f9);padding:var(--space-6)}.login-box{background:var(--bg-surface);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8);width:100%;max-width:380px;box-shadow:var(--shadow-lg);border:1px solid var(--border-light)}.login-box .logo{text-align:center;margin-bottom:var(--space-8)}.login-box .logo h1{font-size:var(--text-xl);font-weight:700;color:var(--color-brand-700);margin-bottom:var(--space-1);letter-spacing:-.3px}.login-box .logo p{color:var(--text-muted);font-size:var(--text-sm)}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-2);font-weight:500}.form-group input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-gray-50);border:1.5px solid var(--border-light);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-group input:focus{border-color:var(--color-brand-400);box-shadow:0 0 0 3px var(--color-brand-100);background:#fff}.form-group input::placeholder{color:var(--text-muted)}.btn-primary{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-brand-600);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);margin-top:var(--space-2);letter-spacing:.5px}.btn-primary:hover{background:var(--color-brand-700)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-error{color:var(--color-danger);font-size:var(--text-sm);text-align:center;margin-top:var(--space-3);min-height:20px}.login-hint{text-align:center;margin-top:var(--space-6);color:var(--text-muted);font-size:var(--text-xs);cursor:pointer}.form-remember{margin-bottom:var(--space-2)}.remember-label{display:flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer}.remember-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-brand-600)}.layout{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-page)}.navbar{background:#fff;border-bottom:1px solid var(--border-light);padding:0 var(--space-4);height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.navbar .nav-left{display:flex;align-items:center;gap:var(--space-3)}.navbar .nav-tabs{display:flex;gap:2px}.navbar .nav-tab{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);border:none;background:none;font-weight:500}.navbar .nav-tab:hover{color:var(--color-brand-600);background:var(--color-brand-50)}.navbar .nav-tab.active{color:var(--color-brand-700);background:var(--color-brand-50);font-weight:600}.navbar .nav-right{display:flex;align-items:center;gap:var(--space-3)}.navbar .user-info{color:var(--text-secondary);font-size:var(--text-sm)}.navbar .btn-logout{padding:var(--space-1) var(--space-3);background:var(--color-danger-bg);color:var(--color-danger);border:1px solid rgba(220,38,38,.15);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast)}.navbar .btn-logout:hover{background:var(--color-danger);color:#fff}.line-selector{display:flex;align-items:center;gap:var(--space-2)}.line-selector label{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap}.line-selector select{padding:var(--space-1) var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);background:#fff;outline:none;cursor:pointer}.main-content{flex:1;padding:var(--space-4);max-width:768px;margin:0 auto;width:100%}.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-5)}.kpi-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);transition:box-shadow var(--transition-fast);position:relative;overflow:hidden}.kpi-card:active{box-shadow:var(--shadow-md)}.kpi-card:after{content:"";position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;opacity:.1}.kpi-card.blue:after{background:var(--color-brand-500)}.kpi-card.green:after{background:var(--color-success)}.kpi-card.orange:after{background:var(--color-warning)}.kpi-card.purple:after{background:#7c3aed}.kpi-card.cyan:after{background:var(--color-info)}.kpi-card.red:after{background:var(--color-danger)}.kpi-card .kpi-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-1);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.kpi-card .kpi-value{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);letter-spacing:-1px;line-height:1.1}.kpi-card .kpi-change{font-size:var(--text-xs);margin-top:var(--space-2);display:flex;align-items:center;gap:2px;color:var(--text-muted)}.chart-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-bottom:var(--space-5)}.chart-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid var(--border-light)}.chart-card .chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.chart-card .chart-title{font-size:var(--text-base);font-weight:600;color:var(--text-primary)}.chart-card .chart-subtitle{font-size:var(--text-xs);color:var(--text-muted)}.chart-container{width:100%;height:260px}.chart-container.tall{height:320px}.chart-card.full-width{grid-column:1 / -1}.table-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid var(--border-light)}.table-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.table-header h3{font-size:var(--text-base);font-weight:600;color:var(--text-primary)}.table-filters{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}.table-filters select,.table-filters input{padding:var(--space-2) var(--space-3);background:var(--color-gray-50);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--text-sm);outline:none}.table-filters select:focus,.table-filters input:focus{border-color:var(--color-brand-400)}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{text-align:left;padding:var(--space-3) var(--space-4);color:var(--text-secondary);font-weight:600;font-size:var(--text-xs);letter-spacing:.3px;border-bottom:2px solid var(--border-light);white-space:nowrap;text-transform:uppercase}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-gray-100);color:var(--text-primary);white-space:nowrap}.data-table tbody tr:hover{background:var(--color-brand-50)}.data-table .amount{font-weight:600;color:var(--color-brand-600)}.data-table .profit{color:var(--color-success)}.data-table .loss{color:var(--color-danger)}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-light)}.pagination .page-info{color:var(--text-secondary);font-size:var(--text-sm)}.pagination .page-btns{display:flex;gap:var(--space-2)}.pagination .page-btn{padding:var(--space-2) var(--space-3);background:var(--color-gray-50);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.pagination .page-btn:hover{border-color:var(--color-brand-300);color:var(--color-brand-600)}.pagination .page-btn:disabled{opacity:.3;cursor:not-allowed}.pagination .page-btn.active{background:var(--color-brand-600);color:#fff;border-color:var(--color-brand-600)}.mobile-nav{display:none}@media (max-width: 768px){.navbar{padding:0 var(--space-3)}.navbar .nav-tabs{display:none}.main-content{padding:var(--space-3) var(--space-3) calc(60px + env(safe-area-inset-bottom,16px));max-width:100%}.line-selector select{font-size:12px;padding:4px 6px;max-width:120px}.mobile-nav{display:flex!important;position:fixed;bottom:0;left:0;right:0;background:#ffffffeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-light);padding:var(--space-2) 0;padding-bottom:max(var(--space-2),env(safe-area-inset-bottom));z-index:100}.mobile-nav .m-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-muted);font-size:10px;cursor:pointer;padding:var(--space-1);transition:color var(--transition-fast);border:none;background:none;font-weight:500}.mobile-nav .m-nav-item.active{color:var(--color-brand-600);font-weight:600}.kpi-grid{grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-4)}.kpi-card{padding:var(--space-3)}.kpi-card .kpi-value{font-size:var(--text-xl)}.chart-grid{gap:var(--space-3)}.chart-container{height:240px}.login-box{padding:var(--space-8) var(--space-6)}.login-box .logo h1{font-size:var(--text-lg)}}.loading-overlay{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-size:var(--text-sm)}.loading-spinner{width:28px;height:28px;border:3px solid var(--border-light);border-top-color:var(--color-brand-500);border-radius:50%;animation:spin .7s linear infinite;margin-right:var(--space-3)}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:var(--space-10) var(--space-5);color:var(--text-muted)}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:all .25s ease-out}.slide-enter-from{opacity:0;transform:translateY(8px)}.slide-leave-to{opacity:0;transform:translateY(-8px)}