:root{--primary: #1B3A5C;--primary-light: #2A5A8C;--primary-dark: #0F2440;--accent-green: #10B981;--accent-red: #EF4444;--accent-yellow: #F59E0B;--accent-blue: #3B82F6;--bg-main: #F7F8FC;--bg-card: #FFFFFF;--bg-sidebar: #1B3A5C;--text-primary: #1F2937;--text-secondary: #6B7280;--text-white: #FFFFFF;--border: #E5E7EB;--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--radius: 10px;--sidebar-width: 260px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px}body{font-family:Be Vietnam Pro,sans-serif;background:var(--bg-main);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-family:Lexend,sans-serif;font-weight:600;line-height:1.3}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit;font-size:.9rem}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);color:var(--text-white);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:width .3s ease;overflow-x:hidden}.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-logo .logo-title{font-family:Lexend,sans-serif;font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:.5px}.sidebar-logo .logo-subtitle{font-size:.72rem;color:#fff9;margin-top:2px}.sidebar-user{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-user .user-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#fff;flex-shrink:0;overflow:hidden}.sidebar-user .user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.sidebar-user .user-info .user-name{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.sidebar-user .user-info .user-role{font-size:.72rem;color:#fff9}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#ffffffbf;font-size:.875rem;font-weight:500;transition:all .2s;border-left:3px solid transparent;cursor:pointer}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item.active{background:#ffffff1f;color:#fff;border-left-color:var(--accent-blue)}.nav-item .nav-icon{width:18px;height:18px;flex-shrink:0}.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}.logout-btn{display:flex;align-items:center;gap:10px;color:#ffffffb3;font-size:.875rem;padding:8px 0;background:none;border:none;width:100%;transition:color .2s}.logout-btn:hover{color:var(--accent-red)}.main-wrapper{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s ease}.header{position:sticky;top:0;z-index:50;background:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}.header-breadcrumb{font-size:.875rem;color:var(--text-secondary)}.header-breadcrumb span{color:var(--text-primary);font-weight:500}.header-right{display:flex;align-items:center;gap:12px}.header-icon-btn{background:none;border:none;padding:6px;border-radius:8px;color:var(--text-secondary);position:relative;transition:background .2s,color .2s}.header-icon-btn:hover{background:var(--bg-main);color:var(--text-primary)}.badge-red{position:absolute;top:2px;right:2px;width:16px;height:16px;background:var(--accent-red);border-radius:50%;font-size:.6rem;color:#fff;display:flex;align-items:center;justify-content:center}.header-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.85rem;overflow:hidden}.header-avatar img{width:100%;height:100%;object-fit:cover}.dropdown-wrapper{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);min-width:160px;z-index:200;overflow:hidden}.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:.875rem;color:var(--text-primary);cursor:pointer;transition:background .15s}.dropdown-item:hover{background:var(--bg-main)}.dropdown-item.danger{color:var(--accent-red)}.page-content{padding:24px;flex:1}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-title{font-size:1.5rem;color:var(--primary)}.page-subtitle{font-size:.875rem;color:var(--text-secondary);margin-top:4px}.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border)}.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.card-body{padding:20px}.card-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:18px 20px;display:flex;align-items:center;gap:16px;border-left:4px solid;transition:box-shadow .2s,transform .2s}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.stat-card-content{flex:1}.stat-card-value{font-family:Lexend,sans-serif;font-size:1.8rem;font-weight:700;line-height:1;color:var(--text-primary)}.stat-card-title{font-size:.8rem;color:var(--text-secondary);margin-top:4px}.stat-card-subtitle{font-size:.75rem;color:var(--text-secondary);margin-top:2px}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f9fafb;border-bottom:2px solid var(--border)}thead th{padding:10px 14px;text-align:left;font-weight:600;color:var(--text-secondary);font-size:.8rem;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}thead th:hover{color:var(--primary)}tbody tr{border-bottom:1px solid var(--border);transition:background .15s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f9fafb}tbody tr:nth-child(2n){background:#fafafa}tbody tr:nth-child(2n):hover{background:#f3f4f6}td{padding:10px 14px;color:var(--text-primary);vertical-align:middle}.table-footer{padding:10px 14px;background:#f9fafb;border-top:2px solid var(--border);font-size:.85rem;color:var(--text-secondary);font-weight:500}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.875rem;font-weight:500;border:none;transition:all .2s;cursor:pointer;white-space:nowrap}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}.btn-success{background:var(--accent-green);color:#fff}.btn-success:hover{opacity:.9}.btn-danger{background:var(--accent-red);color:#fff}.btn-danger:hover{opacity:.9}.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-main);color:var(--text-primary)}.btn-sm{padding:5px 10px;font-size:.8rem}.btn-icon{padding:6px;border-radius:6px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:.85rem;font-weight:500;color:var(--text-primary);margin-bottom:6px}.form-label.required:after{content:" *";color:var(--accent-red)}.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:.875rem;color:var(--text-primary);background:#fff;transition:border-color .2s,box-shadow .2s;outline:none}.form-control:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px #2a5a8c1a}textarea.form-control{resize:vertical;min-height:80px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease}.modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0003;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}.modal-lg{max-width:720px}.modal-xl{max-width:900px}.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.1rem;font-weight:600;color:var(--primary)}.modal-body{padding:20px 24px}.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap}.badge-gray{background:#f3f4f6;color:#6b7280}.badge-yellow{background:#fef3c7;color:#d97706}.badge-green{background:#d1fae5;color:#065f46}.badge-red{background:#fee2e2;color:#dc2626}.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-orange{background:#ffedd5;color:#c2410c}.diff-simple{background:#dbeafe;color:#1d4ed8}.diff-normal{background:#f3f4f6;color:#374151}.diff-complex{background:#ffedd5;color:#c2410c}.diff-very_complex{background:#fee2e2;color:#dc2626}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow-md);background:#fff;border-left:4px solid;min-width:280px;max-width:380px;font-size:.875rem;animation:slideInRight .3s ease}.toast-success{border-left-color:var(--accent-green)}.toast-error{border-left-color:var(--accent-red)}.toast-warning{border-left-color:var(--accent-yellow)}.toast-info{border-left-color:var(--accent-blue)}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}.skeleton-line{height:14px;margin-bottom:8px}.skeleton-line.short{width:60%}.skeleton-line.medium{width:80%}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.toolbar-left{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.toolbar-right{display:flex;align-items:center;gap:10px}.filter-select{padding:7px 12px;border:1px solid var(--border);border-radius:8px;font-size:.875rem;background:#fff;color:var(--text-primary);cursor:pointer;outline:none}.filter-select:focus{border-color:var(--primary-light)}.overdue-text{color:var(--accent-red)!important;font-weight:500}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.85rem;flex-shrink:0}.action-btns{display:flex;gap:6px;align-items:center}.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px}.tab{padding:10px 20px;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}.tab:hover{color:var(--primary)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.empty-state{text-align:center;padding:48px 20px;color:var(--text-secondary)}.empty-state svg{width:48px;height:48px;opacity:.4;margin-bottom:12px}.empty-state p{font-size:.875rem}.rank-1{background:linear-gradient(135deg,#fef3c7,#fde68a)}.rank-2{background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}.rank-3{background:linear-gradient(135deg,#ffedd5,#fed7aa)}.profile-header{display:flex;align-items:center;gap:24px;padding:24px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius);color:#fff;margin-bottom:20px}.profile-avatar-large{width:96px;height:96px;border-radius:50%;border:3px solid rgba(255,255,255,.3);object-fit:cover;background:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;position:relative}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;cursor:pointer}.profile-avatar-large:hover .upload-overlay{opacity:1}.confirm-dialog{background:#fff;border-radius:12px;padding:24px;max-width:400px;width:100%;box-shadow:0 20px 60px #0003}.confirm-dialog h3{margin-bottom:8px}.confirm-dialog p{color:var(--text-secondary);font-size:.875rem;margin-bottom:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media (min-width: 769px) and (max-width: 1024px){:root{--sidebar-width: 60px}.sidebar-logo .logo-title,.sidebar-logo .logo-subtitle,.sidebar-user .user-info,.nav-item span,.logout-btn span{display:none}.nav-item{justify-content:center;padding:12px}.sidebar-user{justify-content:center}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){:root{--sidebar-width: 0px}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0);width:260px}.main-wrapper{margin-left:0}.stat-grid{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}.page-content{padding:16px}}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{font-size:1rem;font-weight:600;color:var(--primary);display:flex;align-items:center;gap:8px}.user-cell{display:flex;align-items:center;gap:10px}.period-toggle{display:flex;background:var(--bg-main);border-radius:8px;padding:3px;gap:2px}.period-btn{padding:5px 14px;border-radius:6px;font-size:.8rem;font-weight:500;border:none;background:transparent;color:var(--text-secondary);transition:all .2s}.period-btn.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px}.progress-fill{height:100%;border-radius:3px;transition:width .3s ease}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.info-item label{display:block;font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.info-item .value{font-size:.9rem;color:var(--text-primary)}html,body{overflow-x:hidden}*{-webkit-overflow-scrolling:touch}#hamburger-btn,.task-card-list{display:none}.task-table-wrap{display:block}.overview-card-list{display:none}.overview-table-wrap{display:block}@media (min-width: 769px) and (max-width: 1024px){.nav-item{position:relative}.nav-item:hover:after{content:attr(data-label);position:absolute;left:100%;top:50%;transform:translateY(-50%);background:#000c;color:#fff;padding:4px 10px;border-radius:6px;font-size:.8rem;white-space:nowrap;margin-left:8px;z-index:200;pointer-events:none}}@media (max-width: 768px){#hamburger-btn{display:flex!important}.header{padding:0 12px;height:56px}.header-breadcrumb{font-size:.8rem}.sidebar{position:fixed!important;top:0;left:0;height:100vh!important;width:280px!important;z-index:9999!important;transform:translate(-100%);transition:transform .3s ease!important;overflow-x:hidden;overflow-y:auto}.sidebar.open{transform:translate(0)!important}.sidebar-logo .logo-title,.sidebar-logo .logo-subtitle,.sidebar-user .user-info{display:block!important}.nav-item span,.logout-btn span{display:inline!important}.nav-item{justify-content:flex-start!important;padding:10px 20px!important}.sidebar-user{justify-content:flex-start!important}.page-content{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.page-header{flex-direction:column;align-items:flex-start;gap:10px}input,select,textarea{font-size:16px!important}.form-row{grid-template-columns:1fr;gap:0}.stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}.stat-card{padding:12px 14px;gap:10px}.stat-card-value{font-size:1.4rem}.stat-card-icon{width:38px;height:38px;font-size:1.1rem}.info-grid{grid-template-columns:1fr}.tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap;flex-shrink:0}.col-hide-mobile{display:none!important}.modal-overlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important}.modal,.modal-lg,.modal-xl{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;animation:slideUp .22s ease}.modal form{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.modal-header{flex-shrink:0!important;position:sticky;top:0;z-index:2;background:#fff!important;border-radius:0!important;border-bottom:1px solid var(--border)}.modal-body{flex:1!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;min-height:0;padding-bottom:8px}.modal-footer{flex-shrink:0!important;position:sticky;bottom:0;z-index:2;background:#fff!important;border-top:1px solid var(--border);padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}.dashboard-main-grid,.profile-info-grid{grid-template-columns:1fr!important}.profile-header{flex-direction:column;align-items:center;text-align:center;gap:14px}.profile-header>div:last-child{width:100%;justify-content:center}.task-table-wrap{display:none}.task-card-list{display:flex;flex-direction:column;gap:8px;padding:10px 12px}.task-card{background:#fff;border-radius:10px;border:1px solid var(--border);box-shadow:0 1px 4px #0000000f;padding:12px 14px}.task-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}.task-card-badges{display:flex;gap:5px;flex-wrap:wrap}.task-card-title{font-weight:600;font-size:.875rem;color:var(--text-primary);margin-bottom:4px;cursor:pointer;color:var(--primary)}.task-card-meta{font-size:.78rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:2px}.task-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.overview-table-wrap{display:none}.overview-card-list{display:flex;flex-direction:column;gap:8px;padding:10px 12px}.overview-card{background:#fff;border-radius:10px;border:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s}.overview-card:active{background:#f9fafb}.overview-card-body{flex:1;min-width:0}.overview-card-name{font-weight:600;font-size:.875rem;color:var(--text-primary)}.overview-card-sub{font-size:.75rem;color:var(--text-secondary);margin-top:2px}.overview-card-stats{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}.overview-stat-chip{font-size:.75rem;padding:2px 8px;border-radius:12px;background:#f3f4f6;color:var(--text-secondary);white-space:nowrap}.sidebar{padding-top:env(safe-area-inset-top)}}