:root{--primary: #4F6EF7;--primary-dark: #3B5DE7;--primary-light: #EEF0FF;--success: #22C55E;--success-light: #F0FDF4;--warning: #F59E0B;--warning-light: #FFFBEB;--danger: #EF4444;--danger-light: #FEF2F2;--info: #6366F1;--info-light: #EEF2FF;--bg: #F5F6FA;--bg-secondary: #F8F9FC;--card: #FFFFFF;--text: #1A1A2E;--text-secondary: #6B7280;--text-muted: #9CA3AF;--border: #F0F0F0;--radius: 16px;--radius-sm: 10px;--radius-xs: 8px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04);--shadow: 0 4px 16px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .1);--font-xl: 22px;--font-lg: 18px;--font-md: 15px;--font-sm: 13px;--font-xs: 11px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,PingFang SC,Helvetica Neue,sans-serif;font-size:var(--font-md);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;user-select:none}.page-fade-enter-active,.page-fade-leave-active{transition:opacity .2s ease,transform .2s ease}.page-fade-enter-from{opacity:0;transform:translateY(8px)}.page-fade-leave-to{opacity:0;transform:translateY(-8px)}::-webkit-scrollbar{width:0;height:0}.page-container{min-height:100vh;background:var(--bg)}.page-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;position:sticky;top:0;background:var(--bg);z-index:10}.page-header h2{font-size:var(--font-xl);font-weight:700;color:var(--text)}.page-header .header-actions{display:flex;gap:8px}.page-body{padding:0 16px 100px}.card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-title{font-size:var(--font-md);font-weight:600;color:var(--text)}.card-subtitle{font-size:var(--font-xs);color:var(--text-muted)}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.stat-item{background:var(--card);border-radius:var(--radius);padding:14px 12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px}.stat-item .stat-value{font-size:26px;font-weight:700;line-height:1}.stat-item .stat-label{font-size:var(--font-xs);color:var(--text-muted)}.stat-item .stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.btn-primary{width:100%;height:48px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:var(--font-md);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.btn-primary:active{transform:scale(.97);background:var(--primary-dark)}.btn-primary:disabled{opacity:.5;transform:none}.btn-outline{height:44px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:var(--font-sm);font-weight:500;cursor:pointer;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}.btn-outline:active{background:var(--bg-secondary)}.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:var(--font-xs);font-weight:500}.tag-success{background:var(--success-light);color:var(--success)}.tag-warning{background:var(--warning-light);color:var(--warning)}.tag-danger{background:var(--danger-light);color:var(--danger)}.tag-info{background:var(--info-light);color:var(--info)}.tag-default{background:var(--bg-secondary);color:var(--text-secondary)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);display:flex;padding:6px 0 env(safe-area-inset-bottom,8px);z-index:100;border-top:1px solid var(--border);box-shadow:0 -2px 16px #0000000a}.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:10px;color:var(--text-muted);cursor:pointer;transition:all .2s;position:relative}.bottom-nav .nav-item.active{color:var(--primary)}.bottom-nav .nav-item.active:after{content:"";position:absolute;top:-6px;width:20px;height:3px;border-radius:0 0 3px 3px;background:var(--primary)}.bottom-nav .nav-item .nav-icon{font-size:22px}.bottom-nav .nav-item .nav-badge{position:absolute;top:2px;right:calc(50% - 16px);min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;padding:0 5px;display:flex;align-items:center;justify-content:center}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);position:sticky;top:0;z-index:20}.top-bar .top-title{font-size:var(--font-lg);font-weight:700}.top-bar .top-actions{display:flex;align-items:center;gap:12px}.list-item{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);gap:12px}.list-item:last-child{border-bottom:none}.list-item .list-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:var(--font-md);flex-shrink:0}.list-item .list-content{flex:1;min-width:0}.list-item .list-title{font-size:var(--font-sm);font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .list-desc{font-size:var(--font-xs);color:var(--text-muted);margin-top:2px}.list-item .list-extra{text-align:right;flex-shrink:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0;color:var(--text-muted)}.empty-state .empty-icon{font-size:48px;margin-bottom:12px;opacity:.3}.empty-state .empty-text{font-size:var(--font-sm)}.loading-overlay{display:flex;align-items:center;justify-content:center;padding:32px 0}.loading-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.el-message{border-radius:12px!important;min-width:auto!important}.el-overlay-dialog{display:flex!important;align-items:center!important;justify-content:center!important}.el-dialog{border-radius:var(--radius)!important;margin:auto!important;max-width:92vw!important}.el-dialog__header{padding:16px 16px 0!important}.el-dialog__body{padding:16px!important}.el-dialog__footer{padding:0 16px 16px!important}.el-button{border-radius:var(--radius-xs)!important;font-weight:500!important}.el-button--primary{background:var(--primary)!important;border-color:var(--primary)!important}.el-input__wrapper{border-radius:var(--radius-xs)!important;box-shadow:none!important;border:1.5px solid var(--border)!important}.el-input__wrapper:focus,.el-input__wrapper.is-focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-light)!important}.el-select .el-input__wrapper{border-radius:var(--radius-xs)!important}.el-picker-panel{border-radius:var(--radius)!important}.el-pagination{justify-content:center;flex-wrap:wrap}.el-tag{border-radius:6px!important;font-weight:500!important}.el-tabs__nav-wrap:after{display:none}.el-tabs__item{font-weight:500}.el-tabs__item.is-active{color:var(--primary);font-weight:600}.el-tabs__active-bar{background-color:var(--primary)}@media (min-width: 768px){.page-container,.member-layout .page-body,.admin-layout .page-body{max-width:768px;margin:0 auto;padding:12px 16px 24px!important}.admin-layout .page-body.wide{max-width:1024px}.bottom-nav{position:static!important;border-top:none!important;box-shadow:none!important;padding:0!important;gap:4px!important;flex-wrap:wrap!important}.bottom-nav .nav-item{flex:0 1 auto!important;padding:8px 16px!important;font-size:13px!important;flex-direction:row!important;gap:6px!important}.bottom-nav .nav-item .nav-icon{font-size:18px!important}.bottom-nav .nav-item.active:after{display:none!important}.card:hover,.stat-item:hover,.stat-card:hover,.emp-card:hover,.approval-card:hover,.expense-card:hover,.notify-card:hover,.leave-card:hover,.record-card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-1px)}.stat-grid,.quick-actions,.quick-grid{grid-template-columns:repeat(4,1fr)!important}.form-grid{grid-template-columns:1fr 1fr!important}.clock-hero{padding:40px 32px 32px!important}.clock-time{font-size:64px!important}.clock-btn{height:100px!important}.clock-btn .btn-label{font-size:20px!important}.stat-num{font-size:28px!important}.page-header h2{font-size:24px!important}.el-card{border-radius:var(--radius)!important}.el-table th,.el-table td{padding:12px 10px!important}}@media (max-width: 767px){.el-message{min-width:240px!important;padding:12px 16px!important}.el-dialog{width:92%!important;max-width:92vw!important}.el-table{font-size:var(--font-xs)!important}.el-table th,.el-table td{padding:8px 6px!important}.el-form-item{margin-bottom:14px!important}.el-form-item__label{font-size:var(--font-sm)!important}.el-tabs__item{font-size:13px!important;padding:0 12px!important}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}.table-wrap .el-table{min-width:600px}}