.view-state{border:1px solid var(--color-gray-200);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);flex-direction:column;text-align:center;padding:var(--spacing-xl)}.view-state.compact{padding:var(--spacing-md)}.view-state-title{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.view-state-description{margin:0;font-size:var(--font-size-sm);color:var(--text-secondary)}.view-state-spinner{width:24px;height:24px;border-radius:50%;border:2px solid var(--color-gray-200);border-top-color:var(--text-secondary);animation:view-state-spin .8s linear infinite}@keyframes view-state-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.view-state-action{min-width:120px}.view-state-error{border-color:#ea433547;background:#ea43350f;color:var(--text-primary);align-items:flex-start;text-align:left}.view-state-error .view-state-title{color:var(--color-red-dark)}.view-state-error .view-state-description{color:var(--text-secondary)}.view-state-error-copy{width:100%;display:flex;flex-direction:column;gap:4px}.view-state-error-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}@media(max-width:640px){.view-state{padding:var(--spacing-lg)}.view-state-error-actions{width:100%}.view-state-error-actions .view-state-action{flex:1;min-width:0}}.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-primary);color:var(--text-primary)}.header{background:var(--bg-secondary);color:var(--text-primary);padding:1.5rem;text-align:center;border-bottom:1px solid var(--color-gray-200);box-shadow:var(--shadow-sm)}.header h1{font-size:1.8rem;margin-bottom:.5rem}.main{flex:1;padding:2rem 1rem;display:flex;align-items:center;justify-content:center}.loading{font-size:1.2rem;color:var(--text-secondary);text-align:center;padding:2rem}.app-state{width:min(100%,440px);margin:auto}.placeholder{text-align:center;padding:2rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200);box-shadow:var(--shadow-md)}.placeholder p{margin:.5rem 0;font-size:1.1rem;color:var(--text-secondary)}:root{--primary-blue: #6f86b7;--dark-blue: #5f739e;--light-blue: #d9e0ef;--accent-blue: #8198c4;--white: #ffffff;--off-white: #f3f4f6;--light-gray: #e2e4e8;--gray: #666d77;--dark-gray: #2a2f36;--success: #34a853;--warning: #fbbc04;--error: #ea4335;--color-blue-light: rgba(111, 134, 183, .16);--color-blue: var(--primary-blue);--color-blue-dark: var(--dark-blue);--color-green-light: rgba(52, 168, 83, .12);--color-green: var(--success);--color-green-dark: var(--success);--color-orange-light: rgba(251, 188, 4, .12);--color-orange: var(--warning);--color-orange-dark: var(--warning);--color-purple-light: rgba(129, 152, 196, .12);--color-purple: var(--accent-blue);--color-purple-dark: var(--dark-blue);--color-pink-light: rgba(111, 134, 183, .1);--color-pink: var(--light-blue);--color-pink-dark: var(--dark-blue);--color-red-light: rgba(234, 67, 53, .1);--color-red: var(--error);--color-red-dark: var(--error);--color-white: var(--white);--color-gray-50: var(--off-white);--color-gray-100: var(--off-white);--color-gray-200: var(--light-gray);--color-gray-300: var(--light-gray);--color-gray-400: var(--gray);--color-gray-500: var(--gray);--color-gray-600: var(--gray);--color-gray-700: var(--dark-gray);--color-gray-800: var(--dark-gray);--color-gray-900: var(--dark-gray);--color-primary: var(--primary-blue);--color-success: var(--success);--color-warning: var(--warning);--color-error: var(--error);--color-info: var(--accent-blue);--bg-primary: var(--white);--bg-secondary: var(--white);--bg-card: var(--white);--text-primary: var(--dark-gray);--text-secondary: var(--gray);--text-tertiary: rgba(102, 109, 119, .8);--text-white: var(--white);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);--shadow-md: 0 4px 10px rgba(17, 24, 39, .06);--shadow-lg: 0 8px 18px rgba(17, 24, 39, .08);--shadow-xl: 0 14px 28px rgba(17, 24, 39, .1);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 30px;--font-size-4xl: 36px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease-in-out;--transition-base: .2s ease-in-out;--transition-slow: .3s ease-in-out;--role-tab-bar-height: 84px;--role-tab-safe-area-bottom: env(safe-area-inset-bottom, 0px);--role-tab-content-offset: calc(var(--role-tab-bar-height) + var(--role-tab-safe-area-bottom) + var(--spacing-lg));--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-popover: 1060;--z-modal-backdrop: 1080;--z-modal: 1090;--z-tooltip: 1100}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-md);line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-md{font-size:var(--font-size-md)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.card{background:var(--bg-card);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-sm{padding:var(--spacing-md);border-radius:var(--radius-md)}.card-lg{padding:var(--spacing-xl);border-radius:var(--radius-xl)}.stat-card{--stat-accent: #6f86b7;--stat-tint: rgba(111, 134, 183, .08);--stat-border: rgba(111, 134, 183, .22);position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--stat-border);border-radius:var(--radius-xl);padding:18px;min-height:156px;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),border-color var(--transition-base);display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-card>*{position:relative;z-index:1}.stat-card:hover{box-shadow:var(--shadow-md);border-color:var(--stat-accent)}.stat-card-blue{--stat-accent: #6f86b7;--stat-tint: rgba(111, 134, 183, .1);--stat-border: rgba(111, 134, 183, .24)}.stat-card-green{--stat-accent: var(--success);--stat-tint: rgba(52, 168, 83, .08);--stat-border: rgba(52, 168, 83, .2)}.stat-card-orange{--stat-accent: var(--warning);--stat-tint: rgba(251, 188, 4, .08);--stat-border: rgba(251, 188, 4, .2)}.stat-card-purple{--stat-accent: #8198c4;--stat-tint: rgba(129, 152, 196, .08);--stat-border: rgba(129, 152, 196, .2)}.stat-card-pink{--stat-accent: #8fa3cb;--stat-tint: rgba(143, 163, 203, .08);--stat-border: rgba(143, 163, 203, .2)}.stat-card-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px;color:var(--text-secondary);box-shadow:none;border:1px solid var(--color-gray-200)}.stat-card-icon.blue{background:#6f86b71f}.stat-card-icon.green{background:#34a8531f}.stat-card-icon.orange{background:#fbbc0424}.stat-card-icon.purple{background:#8198c424}.stat-card-icon.pink{background:#8fa3cb24}.stat-card-label{font-size:var(--font-size-sm);color:var(--text-secondary);text-transform:none;letter-spacing:0;font-weight:var(--font-weight-semibold);margin-bottom:2px}.stat-card-value{font-size:clamp(2rem,5vw,3.1rem);font-weight:var(--font-weight-bold);color:var(--text-primary);line-height:1.05}.stat-card-subtitle{margin-top:auto;font-size:var(--font-size-md);color:var(--text-secondary)}@media(max-width:768px){.stat-card{min-height:162px;padding:var(--spacing-md)}.stat-card-icon{width:52px;height:52px;font-size:24px;border-radius:16px}.stat-card-subtitle{font-size:var(--font-size-md)}}.progress-bar{width:100%;height:8px;background:var(--color-gray-200);border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:var(--color-green);border-radius:var(--radius-full);transition:width var(--transition-slow)}.progress-bar-dual{display:flex;height:100%}.progress-bar-dual .progress-primary{background:var(--color-green);transition:width var(--transition-slow)}.progress-bar-dual .progress-secondary{background:var(--color-blue);transition:width var(--transition-slow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);border:1px solid transparent;cursor:pointer;transition:all var(--transition-base);text-decoration:none;min-height:44px}.btn-primary{background:#2f3742;color:var(--text-white);border-color:#2f3742}.btn-primary:hover:not(:disabled){background:#232a33;border-color:#232a33}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--color-gray-200)}.btn-secondary:hover:not(:disabled){background:var(--off-white);border-color:var(--color-gray-300)}.btn-success{background:var(--color-success);color:var(--text-white)}.btn-success:hover{background:var(--color-green-dark)}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);min-height:36px}.btn-lg{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg);min-height:52px}.btn:disabled{opacity:.5;cursor:not-allowed}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--color-gray-200);display:flex;justify-content:space-around;padding:var(--spacing-sm) 0;z-index:var(--z-fixed);box-shadow:0 -2px 10px #0000000d}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);color:var(--text-tertiary);text-decoration:none;font-size:var(--font-size-xs);transition:color var(--transition-fast);flex:1;max-width:80px}.bottom-nav-item.active{color:var(--color-primary)}.bottom-nav-icon{font-size:var(--font-size-2xl)}.user-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg)}.user-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-blue);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-white);overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-info{flex:1}.user-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:2px}.user-role{font-size:var(--font-size-sm);color:var(--text-secondary)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}@media(max-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}.container{width:min(100%,980px);margin:0 auto;padding:var(--spacing-md);padding-bottom:var(--spacing-xl)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.badge-success{background:var(--color-green-light);color:var(--color-green-dark)}.badge-warning{background:var(--color-orange-light);color:var(--color-orange-dark)}.badge-error{background:var(--color-red-light);color:var(--color-red-dark)}.badge-info{background:var(--color-blue-light);color:var(--color-blue-dark)}html,body,#root{width:100%;min-height:100%}body{margin:0;padding:0;min-height:100dvh;overflow-x:hidden;background:var(--bg-primary)}#root{display:flex;flex-direction:column}