:root{--color-bg:#f5f5f7;--color-surface:#fff;--color-text:#1a1a1a;--color-text-secondary:#6b7280;--color-text-tertiary:#9ca3af;--color-border:#e5e7eb;--color-primary:#4a7cff;--color-primary-hover:#3a6aee;--color-primary-light:#ebf0ff;--color-success:#4ecb71;--color-success-light:#eafbef;--color-warning:#ffb84d;--color-warning-light:#fff6e5;--color-danger:#ff6b6b;--color-danger-light:#ffeded;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f;--transition-fast:.15s ease;--transition-base:.3s ease;--transition-slow:.5s ease;--sidebar-width:240px;--bottomnav-height:64px;--header-height:0px;--z-sticky:90;--z-nav:100;--z-modal:500;--z-toast:501;--z-confirm:502}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-text);background-color:var(--color-bg);min-height:100vh;line-height:1.6}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}ul,ol{list-style:none}.u-mt-sm{margin-top:var(--spacing-sm)}.u-mt-md{margin-top:var(--spacing-md)}.u-mt-lg{margin-top:var(--spacing-lg)}.u-text-xs{font-size:var(--font-size-xs)}.u-center-actions{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);justify-content:center;display:flex}.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);white-space:nowrap;padding:.625rem 1.25rem;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #4a7cff4d}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#e55a5a}.btn-sm{font-size:var(--font-size-xs);padding:.375rem .75rem}.btn-icon{border-radius:var(--radius-sm);padding:.5rem}.btn-icon:hover{background:var(--color-bg)}.btn-ghost{border-radius:var(--radius-sm);color:var(--color-text-secondary);background:0 0;padding:.375rem}.btn-ghost:hover{background:var(--color-bg);color:var(--color-text)}.form-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.form-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.form-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:.625rem .875rem}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4a7cff26}.form-input::placeholder{color:var(--color-text-tertiary)}.form-select{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;outline:none;padding:.625rem 2rem .625rem .875rem}.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4a7cff26}.form-checkbox{align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:var(--font-size-sm);display:flex}.form-checkbox input[type=checkbox]{width:1.125rem;height:1.125rem;accent-color:var(--color-primary);cursor:pointer}.badge{border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);align-items:center;padding:.125rem .5rem;display:inline-flex}.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}.badge-success{background:var(--color-success-light);color:var(--color-success)}.badge-warning{background:var(--color-warning-light);color:#b8860b}.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}.page{padding:var(--spacing-lg);max-width:1200px;animation:fadeIn var(--transition-base);margin:0 auto}.page-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.page-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);animation:fadeIn var(--transition-fast);padding:var(--spacing-md);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;animation:slideUp var(--transition-base);overflow-y:auto}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.modal-body{padding:var(--spacing-lg)}.modal-footer{justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex}.toggle-group{background:var(--color-bg);border-radius:var(--radius-full);border:1px solid var(--color-border);flex-wrap:wrap;max-width:100%;padding:3px;display:inline-flex}.toggle-btn{border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);white-space:nowrap;transition:all var(--transition-fast);flex-shrink:1;padding:.5rem 1rem}.toggle-btn.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}@media (max-width:767px){.toggle-btn{font-size:var(--font-size-xs);padding:.375rem .625rem}}.state-panel{width:100%;padding:var(--spacing-2xl) var(--spacing-md)}.empty-state{padding:var(--spacing-2xl);color:var(--color-text-tertiary);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--spacing-md);opacity:.5;color:var(--color-text-tertiary);display:inline-flex}.empty-state-text{font-size:var(--font-size-sm)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}@media (max-width:767px){.page{padding:var(--spacing-md);padding-bottom:calc(var(--bottomnav-height) + var(--spacing-xl) + env(safe-area-inset-bottom))}.page-title{font-size:var(--font-size-xl)}.modal{max-width:100%;margin:var(--spacing-md)}}@media (min-width:768px) and (max-width:1023px){.page{padding:var(--spacing-lg)}}.error-boundary{justify-content:center;align-items:center;gap:var(--spacing-md);min-height:50vh;color:var(--color-text-secondary);text-align:center;padding:var(--spacing-xl);flex-direction:column;display:flex}.error-boundary-icon{opacity:.5;font-size:3rem}.error-boundary-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text)}.error-boundary-desc{font-size:var(--font-size-sm)}.page-loader{height:100%;min-height:50vh;color:var(--color-text-secondary);justify-content:center;align-items:center;display:flex}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);z-index:var(--z-nav);transition:transform var(--transition-base);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-logo{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex}.sidebar-logo-icon{font-size:1.5rem}.sidebar-logo-text{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text);letter-spacing:-.02em}.sidebar-nav{padding:var(--spacing-md);gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.sidebar-link{align-items:center;gap:var(--spacing-md);padding:.75rem var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:all var(--transition-fast);display:flex}.sidebar-link:hover{background:var(--color-bg);color:var(--color-text)}.sidebar-link--active{background:var(--color-primary-light);color:var(--color-primary);font-weight:var(--font-weight-semibold)}.sidebar-link--active:hover{background:var(--color-primary-light);color:var(--color-primary)}.sidebar-link-icon{text-align:center;width:1.5rem;font-size:1.25rem}.sidebar-link-label{white-space:nowrap}.sidebar-footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);gap:var(--spacing-sm);flex-direction:column;display:flex}.sidebar-user{align-items:center;gap:var(--spacing-sm);min-width:0;color:var(--color-text-secondary);display:flex}.sidebar-user-text{flex-direction:column;min-width:0;line-height:1.3;display:flex}.sidebar-user-text span{text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-sm);color:var(--color-text);overflow:hidden}.sidebar-user-text small{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.sidebar-logout{align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-sm);transition:background var(--transition-fast), color var(--transition-fast);padding:.5rem;display:inline-flex}.sidebar-logout:hover{background:var(--color-bg);color:var(--color-text)}.sidebar-version{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}@media (max-width:767px){.sidebar{pointer-events:none;transform:translate(-100%)}}.bottom-nav{height:var(--bottomnav-height);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:var(--z-nav);padding-bottom:env(safe-area-inset-bottom);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--color-text-tertiary);transition:color var(--transition-fast);flex-direction:column;align-items:center;gap:2px;min-width:60px;display:flex}.bottom-nav-item--active{color:var(--color-primary)}.bottom-nav-icon{font-size:1.375rem;line-height:1}.bottom-nav-label{font-size:.625rem;font-weight:var(--font-weight-medium);letter-spacing:.01em}@media (min-width:768px){.bottom-nav{display:none}}.toast{bottom:calc(var(--bottomnav-height) + var(--spacing-lg) + env(safe-area-inset-bottom));right:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);max-width:360px;z-index:var(--z-toast);cursor:pointer;animation:toastIn var(--transition-base) ease;padding:.75rem 1rem;display:flex;position:fixed}.toast--success{background:var(--color-success);color:#fff}.toast--error{background:var(--color-danger);color:#fff}.toast--info{background:var(--color-primary);color:#fff}.toast-message{flex:1;line-height:1.4}.toast-close{color:inherit;opacity:.8;font-size:var(--font-size-xs);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (min-width:768px){.toast{bottom:var(--spacing-xl);right:var(--spacing-xl)}}.confirm-overlay{z-index:var(--z-confirm)}.confirm-dialog{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);width:100%;max-width:360px;animation:slideUp var(--transition-base)}.confirm-message{font-size:var(--font-size-base);color:var(--color-text);margin-bottom:var(--spacing-xl);text-align:center;line-height:1.5}.confirm-actions{justify-content:flex-end;gap:var(--spacing-sm);display:flex}.layout{min-height:100vh;display:flex}.layout-main{flex:1;min-width:0;overflow-x:hidden}.mobile-account-bar{display:none}@media (min-width:768px){.layout-main{margin-left:var(--sidebar-width)}}@media (max-width:767px){.layout{flex-direction:column}.mobile-account-bar{z-index:var(--z-sticky);height:52px;padding:0 var(--spacing-md);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.mobile-account-user{align-items:center;gap:var(--spacing-xs);min-width:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);display:inline-flex}.mobile-account-user span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layout-main{margin-left:0}}