:root{--color-primary-50: #eff6ff;--color-primary-100: #dbeafe;--color-primary-200: #bfdbfe;--color-primary-300: #93c5fd;--color-primary-400: #60a5fa;--color-primary-500: #3b82f6;--color-primary-600: #2563eb;--color-primary-700: #1d4ed8;--color-primary-800: #1e40af;--color-primary-900: #1e3a8a;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-success-50: #ecfdf5;--color-success-500: #10b981;--color-success-600: #059669;--color-warning-50: #fffbeb;--color-warning-500: #f59e0b;--color-warning-600: #d97706;--color-danger-50: #fef2f2;--color-danger-500: #ef4444;--color-danger-600: #dc2626;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--sidebar-width: 240px;--header-height: 0px;--content-padding: var(--space-6);--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-gray-800);background-color:var(--color-gray-50);min-width:1024px;min-height:768px;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-gray-900)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-md)}h6{font-size:var(--font-size-base)}p{margin-bottom:var(--space-4);color:var(--color-gray-600)}small{font-size:var(--font-size-xs);color:var(--color-gray-500)}a{color:var(--color-primary-600);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-700)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary-600);color:#fff;border-color:var(--color-primary-600)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700);border-color:var(--color-primary-700)}.btn-secondary{background-color:#fff;color:var(--color-gray-700);border-color:var(--color-gray-300)}.btn-secondary:hover:not(:disabled){background-color:var(--color-gray-50);border-color:var(--color-gray-400)}.btn-danger{background-color:var(--color-danger-500);color:#fff;border-color:var(--color-danger-500)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger-600);border-color:var(--color-danger-600)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--font-size-md)}.input{display:block;width:100%;padding:var(--space-2) var(--space-3);font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-gray-800);background-color:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.input:disabled{background-color:var(--color-gray-100);cursor:not-allowed}.input-error{border-color:var(--color-danger-500)}.input-error:focus{box-shadow:0 0 0 3px var(--color-danger-50)}.label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-700)}.form-group{margin-bottom:var(--space-4)}.error-text{margin-top:var(--space-1);font-size:var(--font-size-xs);color:var(--color-danger-500)}.card{background-color:#fff;border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-gray-100)}.card-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-900)}.table-container{overflow-x:auto;border:1px solid var(--color-gray-200);border-radius:var(--radius-lg)}table{width:100%;border-collapse:collapse;font-size:var(--font-size-base)}thead{background-color:var(--color-gray-50)}th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-600);border-bottom:1px solid var(--color-gray-200);white-space:nowrap}td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-gray-100);color:var(--color-gray-700)}tbody tr:hover{background-color:var(--color-gray-50)}tbody tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:9999px}.badge-success{background-color:var(--color-success-50);color:var(--color-success-600)}.badge-warning{background-color:var(--color-warning-50);color:var(--color-warning-600)}.badge-danger{background-color:var(--color-danger-50);color:var(--color-danger-600)}.badge-neutral{background-color:var(--color-gray-100);color:var(--color-gray-600)}.app-layout-top{display:flex;flex-direction:column;min-height:100vh}.app-topbar{position:sticky;top:0;z-index:100;background-color:#fff;border-bottom:1px solid var(--color-gray-200);box-shadow:0 1px 3px #0000000d}.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);height:56px;max-width:1400px;margin:0 auto;width:100%}.topbar-logo{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.topbar-logo-icon{width:32px;height:32px;background-color:var(--color-primary-600);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--font-weight-bold);font-size:var(--font-size-md)}.topbar-logo-img{width:32px;height:32px;border-radius:var(--radius-md);object-fit:contain}.topbar-logo-text{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-gray-900)}.topbar-logo-text-skeleton{display:inline-block;width:120px;height:.95rem;border-radius:var(--radius-sm, 4px);background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;animation:topbar-logo-skeleton-pulse 1.2s ease-in-out infinite}@keyframes topbar-logo-skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.topbar-logo-text-group{display:flex;flex-direction:column;line-height:1.2}.topbar-logo-subtitle{font-size:.65rem;color:#6b7280;font-weight:400}.topbar-nav-desktop{display:flex;align-items:center;gap:var(--space-1);overflow-x:auto;flex:1;justify-content:center}.topbar-nav-item{display:flex;align-items:center;gap:4px;padding:6px 10px;font-size:.8125rem;font-weight:var(--font-weight-medium);color:var(--color-gray-600);border-radius:var(--radius-md);text-decoration:none;transition:all var(--transition-fast);white-space:nowrap}.topbar-nav-item:hover{background-color:var(--color-gray-100);color:var(--color-gray-800)}.topbar-nav-item.active{background-color:var(--color-primary-50);color:var(--color-primary-700)}.topbar-nav-icon{font-size:1rem}.topbar-nav-label{display:inline}.topbar-right{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}.topbar-hamburger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-md);color:var(--color-gray-700)}.topbar-hamburger:hover{background-color:var(--color-gray-100)}.topbar-nav-mobile{display:none;flex-direction:column;padding:var(--space-2) var(--space-4) var(--space-4);border-top:1px solid var(--color-gray-100);background-color:#fff}.topbar-nav-item-mobile{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-gray-600);border-radius:var(--radius-md);text-decoration:none}.topbar-nav-item-mobile:hover{background-color:var(--color-gray-100);color:var(--color-gray-800)}.topbar-nav-item-mobile.active{background-color:var(--color-primary-50);color:var(--color-primary-700)}.app-content-top{flex:1;padding:var(--content-padding);background-color:var(--color-gray-50);max-width:1400px;margin:0 auto;width:100%}@media(max-width:768px){.topbar-nav-desktop{display:none}.topbar-hamburger{display:block}.topbar-nav-mobile{display:flex}.topbar-nav-label{display:none}.app-content-top{padding:var(--space-3)}}@media(min-width:769px)and (max-width:1024px){.topbar-nav-label{display:none}.topbar-nav-item{padding:6px 8px}}.app-layout{display:flex;flex-direction:column;min-height:100vh}.app-sidebar{display:none}.app-content{margin-left:0;flex:1;min-height:100vh;padding:var(--content-padding);background-color:var(--color-gray-50)}.sidebar-nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--color-gray-400);transition:color var(--transition-fast)}.sidebar-footer{padding:var(--space-4) var(--space-4);border-top:1px solid var(--color-gray-100)}.connectivity-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.connectivity-indicator.online{background-color:var(--color-success-50);color:var(--color-success-600)}.connectivity-indicator.offline{background-color:var(--color-danger-50);color:var(--color-danger-600)}.connectivity-dot{width:8px;height:8px;border-radius:50%}.connectivity-dot.online{background-color:var(--color-success-500);animation:pulse-green 2s infinite}.connectivity-dot.offline{background-color:var(--color-danger-500)}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.5}}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.page-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--color-gray-900)}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-gray-500)}.text-success{color:var(--color-success-600)}.text-danger{color:var(--color-danger-600)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}@media(min-width:1440px){.app-content{padding:var(--space-8)}}@media(min-width:1920px){.app-content{max-width:1600px}}.loading-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);color:var(--color-gray-500)}.loading-state-message{font-size:var(--font-size-base);color:var(--color-gray-500)}.empty-state{text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-gray-600)}.empty-state-icon{display:flex;justify-content:center;margin-bottom:var(--space-3);font-size:2.5rem;color:var(--color-gray-300)}.empty-state-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-800);margin-bottom:var(--space-1)}.empty-state-hint{font-size:var(--font-size-sm);color:var(--color-gray-500)}.toolbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}.page-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4)}.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 var(--space-4)}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}.list-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2)}@media(max-width:768px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}}.mt-1{margin-top:var(--space-1)}.mt-3{margin-top:var(--space-3)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-3{margin-bottom:var(--space-3)}.ml-2{margin-left:var(--space-2)}.gap-3{gap:var(--space-3)}.justify-center{justify-content:center}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.fw-medium{font-weight:var(--font-weight-medium)}.fw-semibold{font-weight:var(--font-weight-semibold)}.text-hint{font-size:var(--font-size-xs);color:var(--color-gray-500)}.text-secondary{font-size:var(--font-size-sm);color:var(--color-gray-600)}.w-50{width:50px}.min-w-70{min-width:70px}.min-w-80{min-width:80px}.min-w-100{min-width:100px}.min-w-120{min-width:120px}.min-w-160{min-width:160px}.min-w-200{min-width:200px}.user-menu{position:relative;flex-shrink:0}.user-menu-trigger{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;border-radius:50%;transition:box-shadow var(--transition-fast)}.user-menu-trigger:hover{box-shadow:0 0 0 3px var(--color-primary-100)}.user-menu-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}.user-menu-avatar-initials{background-color:var(--color-primary-600);color:#fff;font-weight:var(--font-weight-semibold);font-size:.8125rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase}.user-menu-avatar-lg{width:44px;height:44px;border-radius:50%;object-fit:cover;font-size:1rem;flex-shrink:0}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:#fff;border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-2);z-index:100}.user-menu-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-3)}.user-menu-identity{min-width:0}.user-menu-name{font-weight:var(--font-weight-semibold);color:var(--color-gray-900);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-email{color:var(--color-gray-500);font-size:var(--font-size-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-divider{height:1px;background:var(--color-gray-200);margin:var(--space-1) 0}.user-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:8px 10px;background:none;border:none;text-align:left;font-size:var(--font-size-sm);color:var(--color-gray-700);border-radius:var(--radius-md);cursor:pointer}.user-menu-item:hover{background-color:var(--color-gray-100)}.user-menu-item-danger{color:var(--color-danger-600)}.user-menu-item-danger:hover{background-color:var(--color-danger-50)}.user-menu-item-icon{display:inline-flex}.sync-banner{border-bottom:1px solid transparent;font-size:var(--font-size-sm)}.sync-banner.offline{background-color:var(--color-danger-50);border-bottom-color:var(--color-danger-500);color:var(--color-danger-600)}.sync-banner.pending{background-color:var(--color-warning-50);border-bottom-color:var(--color-warning-500);color:var(--color-warning-600)}.sync-banner-inner{display:flex;align-items:center;gap:var(--space-2);max-width:1400px;margin:0 auto;width:100%;padding:7px var(--space-4)}.sync-banner-icon{flex-shrink:0}.sync-banner-message{flex:1;min-width:0}.sync-banner-meta{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;font-size:var(--font-size-xs);opacity:.9}.sync-banner-pending{font-weight:var(--font-weight-semibold)}