:root{--color-brand: #1A56A0;--color-brand-light: #2563EB;--color-brand-dark: #0F3460;--color-brand-50: #EFF6FF;--color-brand-100: #DBEAFE;--color-brand-200: #BFDBFE;--color-green: #0E9F6E;--color-green-light: #D1FAE5;--color-green-dark: #065F46;--color-yellow: #D97706;--color-yellow-light: #FEF3C7;--color-yellow-dark: #92400E;--color-red: #DC2626;--color-red-light: #FEE2E2;--color-red-dark: #991B1B;--color-purple: #7C3AED;--color-purple-light: #EDE9FE;--color-purple-dark: #5B21B6;--color-white: #FFFFFF;--color-bg: #F8FAFC;--color-surface: #FFFFFF;--color-surface-hover: #F1F5F9;--color-border: #E2E8F0;--color-border-focus: #1A56A0;--color-text-primary: #0F172A;--color-text-secondary: #475569;--color-text-muted: #94A3B8;--color-text-inverse: #FFFFFF;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);--shadow-brand: 0 4px 14px rgba(26, 86, 160, .25);--shadow-card-hover: 0 8px 25px rgba(26, 86, 160, .12);--font-ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--sidebar-width: 280px;--sidebar-collapsed: 72px;--header-height: 64px;--chat-max-width: 720px;--right-panel-width: 340px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-ui);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background-color:var(--color-bg);line-height:1.6;min-height:100vh}#root{min-height:100vh}a{color:var(--color-brand);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-brand-light)}img{max-width:100%;display:block}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.app-layout{display:flex;min-height:100vh}.app-main{flex:1;margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--transition-base)}.page-content{flex:1;padding:var(--space-6);max-width:100%;overflow-x:hidden}.customer-strip{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:var(--color-white);border-bottom:1px solid var(--color-border);gap:var(--space-4);flex-wrap:wrap}.customer-strip-info{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;min-width:0}.customer-strip-name{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-strip-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.action-buttons{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;flex-wrap:wrap}.action-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);color:var(--color-text-secondary);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap}.action-btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-brand-200)}.action-btn.active{background:var(--color-brand-50);color:var(--color-brand);border-color:var(--color-brand)}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--color-white);border-right:1px solid var(--color-border);display:flex;flex-direction:column;z-index:100;transition:width var(--transition-base);overflow:hidden}.sidebar-header{padding:var(--space-5) var(--space-5);display:flex;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--color-border);min-height:var(--header-height)}.sidebar-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--color-brand),var(--color-brand-light));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-white);font-weight:var(--font-weight-bold);font-size:var(--text-sm);flex-shrink:0}.sidebar-brand{display:flex;flex-direction:column}.sidebar-brand-name{font-size:var(--text-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1.2}.sidebar-brand-subtitle{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--font-weight-medium)}.sidebar-user{padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--color-border)}.sidebar-user-avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--color-brand-100);display:flex;align-items:center;justify-content:center;color:var(--color-brand);font-weight:var(--font-weight-semibold);font-size:var(--text-sm);flex-shrink:0}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:capitalize}.sidebar-section-label{padding:var(--space-4) var(--space-5) var(--space-2);font-size:.6875rem;font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}.sidebar-nav{flex:1;overflow-y:auto;padding:var(--space-2) 0}.sidebar-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);margin:1px var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-decoration:none;position:relative}.sidebar-nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.sidebar-nav-item.active{background:var(--color-brand-50);color:var(--color-brand);font-weight:var(--font-weight-semibold)}.sidebar-nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--color-brand);border-radius:0 var(--radius-full) var(--radius-full) 0}.customer-list-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);cursor:pointer;transition:all var(--transition-fast);border-left:3px solid transparent}.customer-list-item:hover{background:var(--color-surface-hover)}.customer-list-item.active{background:var(--color-brand-50);border-left-color:var(--color-brand)}.customer-list-item.implemented{opacity:.5}.health-dot{width:10px;height:10px;border-radius:var(--radius-full);flex-shrink:0;position:relative}.health-dot.green{background:var(--color-green)}.health-dot.yellow{background:var(--color-yellow)}.health-dot.red{background:var(--color-red);animation:pulse-red 2s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 #dc262666}50%{box-shadow:0 0 0 6px #dc262600}}.customer-list-name{flex:1;font-size:var(--text-sm);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-list-meta{display:flex;align-items:center;gap:var(--space-2)}.phase-badge{font-size:.625rem;font-weight:var(--font-weight-semibold);padding:2px 6px;border-radius:var(--radius-full);background:var(--color-brand-100);color:var(--color-brand)}.recording-indicator{width:8px;height:8px;border-radius:var(--radius-full)}.recording-indicator.recorded{background:var(--color-green)}.recording-indicator.pending{background:var(--color-yellow)}.recording-indicator.missed{background:var(--color-red)}.page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:var(--color-white);border-bottom:1px solid var(--color-border);min-height:var(--header-height)}.page-header-title{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.page-header-actions{display:flex;align-items:center;gap:var(--space-3)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.stat-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-base);position:relative;overflow:hidden}.stat-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px}.stat-card.brand:before{background:var(--color-brand)}.stat-card.green:before{background:var(--color-green)}.stat-card.yellow:before{background:var(--color-yellow)}.stat-card.red:before{background:var(--color-red)}.stat-card.purple:before{background:var(--color-purple)}.stat-card-label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.stat-card-value{font-size:var(--text-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);line-height:1.1}.stat-card-change{font-size:var(--text-xs);font-weight:var(--font-weight-medium);margin-top:var(--space-1)}.stat-card-change.positive{color:var(--color-green)}.stat-card-change.negative{color:var(--color-red)}.card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.card-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.card-body{padding:var(--space-5)}.customer-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);border-left:4px solid transparent;padding:var(--space-5);cursor:pointer;transition:all var(--transition-base);position:relative}.customer-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.customer-card.health-green{border-left-color:var(--color-green)}.customer-card.health-yellow{border-left-color:var(--color-yellow)}.customer-card.health-red{border-left-color:var(--color-red)}.customer-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.customer-card-name{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.customer-card-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-top:var(--space-3)}.customer-card-stat{font-size:var(--text-xs);color:var(--color-text-secondary)}.customer-card-stat-value{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.health-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.health-badge.green{background:var(--color-green-light);color:var(--color-green-dark)}.health-badge.yellow{background:var(--color-yellow-light);color:var(--color-yellow-dark)}.health-badge.red{background:var(--color-red-light);color:var(--color-red-dark)}.health-gauge{width:120px;height:120px;position:relative;margin:0 auto}.health-gauge-circle{width:100%;height:100%;border-radius:var(--radius-full);background:conic-gradient(var(--gauge-color, var(--color-brand)) var(--gauge-percent, 0%),var(--color-border) var(--gauge-percent, 0%));display:flex;align-items:center;justify-content:center}.health-gauge-inner{width:85%;height:85%;border-radius:var(--radius-full);background:var(--color-white);display:flex;flex-direction:column;align-items:center;justify-content:center}.health-gauge-score{font-size:var(--text-2xl);font-weight:var(--font-weight-extrabold);line-height:1}.health-gauge-label{font-size:.625rem;color:var(--color-text-muted);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.06em}.chat-container{display:flex;flex-direction:column;height:calc(100vh - var(--header-height) - 200px);min-height:400px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}.chat-message{display:flex;gap:var(--space-3);max-width:85%;animation:message-in .3s ease-out}@keyframes message-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{align-self:flex-end;flex-direction:row-reverse}.chat-message.agent{align-self:flex-start}.chat-avatar{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--font-weight-bold);flex-shrink:0}.chat-avatar.user-avatar{background:var(--color-brand-100);color:var(--color-brand)}.chat-avatar.agent-avatar{background:linear-gradient(135deg,var(--color-brand),var(--color-brand-light));color:var(--color-white)}.chat-bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.6}.chat-message.user .chat-bubble{background:var(--color-brand);color:var(--color-white);border-bottom-right-radius:var(--radius-sm)}.chat-message.agent .chat-bubble{background:var(--color-bg);color:var(--color-text-primary);border-bottom-left-radius:var(--radius-sm)}.chat-bubble-label{font-size:.625rem;font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1);opacity:.7;text-transform:uppercase;letter-spacing:.05em}.chat-bubble-internal{display:flex;align-items:center;gap:var(--space-1);font-size:.625rem;color:var(--color-text-muted);margin-top:var(--space-1)}.chat-input-area{padding:var(--space-4);border-top:1px solid var(--color-border);background:var(--color-white)}.chat-input-wrapper{display:flex;align-items:flex-end;gap:var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);transition:border-color var(--transition-fast)}.chat-input-wrapper:focus-within{border-color:var(--color-brand);box-shadow:0 0 0 3px #1a56a01a}.chat-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-primary);resize:none;min-height:20px;max-height:120px}.chat-input::placeholder{color:var(--color-text-muted)}.quick-prompts{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border)}.quick-prompts-group{display:flex;flex-wrap:wrap;gap:var(--space-2)}.quick-prompt-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid;font-family:var(--font-ui);font-size:var(--text-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.quick-prompt-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.quick-prompt-btn.blue{border-color:var(--color-brand-200);background:var(--color-brand-50);color:var(--color-brand)}.quick-prompt-btn.blue:hover{background:var(--color-brand-100)}.quick-prompt-btn.green{border-color:var(--color-green-light);background:#f0fdf4;color:var(--color-green-dark)}.quick-prompt-btn.green:hover{background:var(--color-green-light)}.quick-prompt-btn.gray{border-color:var(--color-border);background:var(--color-bg);color:var(--color-text-secondary)}.quick-prompt-btn.gray:hover{background:var(--color-surface-hover)}.quick-prompt-btn.purple{border-color:var(--color-purple-light);background:#f5f3ff;color:var(--color-purple)}.quick-prompt-btn.purple:hover{background:var(--color-purple-light)}.quick-prompt-btn.red{border-color:var(--color-red-light);background:#fff5f5;color:var(--color-red)}.quick-prompt-btn.red:hover{background:var(--color-red-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);border:none;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-decoration:none}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--color-brand);color:var(--color-white);box-shadow:var(--shadow-brand)}.btn-primary:hover{background:var(--color-brand-light);box-shadow:0 6px 20px #1a56a04d}.btn-secondary{background:var(--color-white);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted)}.btn-danger{background:var(--color-red);color:var(--color-white)}.btn-danger:hover{background:var(--color-red-dark)}.btn-success{background:var(--color-green);color:var(--color-white)}.btn-success:hover{background:var(--color-green-dark)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{padding:var(--space-3) var(--space-8);font-size:var(--text-base)}.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-md)}.btn-icon.sm{width:28px;height:28px}.form-group{margin-bottom:var(--space-5)}.form-label{display:block;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-2)}.form-label .required{color:var(--color-red);margin-left:2px}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-white);transition:all var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px #1a56a01a}.form-input::placeholder{color:var(--color-text-muted)}.form-textarea{min-height:100px;resize:vertical}.form-select{-webkit-appearance:none;-moz-appearance:none;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='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:.6875rem;font-weight:var(--font-weight-semibold);white-space:nowrap}.badge.brand{background:var(--color-brand-100);color:var(--color-brand)}.badge.green{background:var(--color-green-light);color:var(--color-green-dark)}.badge.yellow{background:var(--color-yellow-light);color:var(--color-yellow-dark)}.badge.red{background:var(--color-red-light);color:var(--color-red-dark)}.badge.purple{background:var(--color-purple-light);color:var(--color-purple-dark)}.badge.gray{background:var(--color-bg);color:var(--color-text-secondary)}.action-buttons{display:flex;gap:var(--space-2)}.action-btn{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-white);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.action-btn:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted);color:var(--color-text-primary);transform:translateY(-1px)}.customer-strip{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-4)}.customer-strip-info{display:flex;align-items:center;gap:var(--space-4)}.customer-strip-name{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.customer-strip-meta{display:flex;align-items:center;gap:var(--space-3)}.right-panel{width:var(--right-panel-width);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow-y:auto;max-height:calc(100vh - var(--header-height) - 200px)}.right-panel-section{padding:var(--space-4);border-bottom:1px solid var(--color-border)}.right-panel-section:last-child{border-bottom:none}.right-panel-section-title{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)}.asana-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.asana-stat{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-md);text-align:center}.asana-stat-value{font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.asana-stat-label{font-size:.625rem;color:var(--color-text-muted);font-weight:var(--font-weight-medium)}.alert-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-md);margin-bottom:var(--space-2);border-left:3px solid transparent}.alert-item.critical{border-left-color:var(--color-red);background:var(--color-red-light)}.alert-item.warning{border-left-color:var(--color-yellow);background:var(--color-yellow-light)}.alert-item.info{border-left-color:var(--color-brand)}.alert-item-text{flex:1;font-size:var(--text-xs);color:var(--color-text-secondary);line-height:1.5}.alert-item-time{font-size:.625rem;color:var(--color-text-muted);white-space:nowrap}.portal-layout{display:grid;grid-template-columns:1fr var(--right-panel-width);gap:var(--space-4);align-items:flex-start}.portal-main{display:flex;flex-direction:column;gap:var(--space-4)}.settings-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-6);min-height:calc(100vh - var(--header-height) - 48px)}.settings-nav{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);height:fit-content;position:sticky;top:var(--space-6)}.settings-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:all var(--transition-fast)}.settings-nav-item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.settings-nav-item.active{background:var(--color-brand-50);color:var(--color-brand);font-weight:var(--font-weight-semibold)}.settings-panel{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16);text-align:center;color:var(--color-text-muted)}.empty-state-icon{width:64px;height:64px;margin-bottom:var(--space-4);opacity:.4}.empty-state-title{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2);color:var(--color-text-secondary)}.empty-state-desc{font-size:var(--text-sm);max-width:360px}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-brand-50) 0%,var(--color-white) 50%,var(--color-brand-100) 100%)}.login-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-xl);text-align:center;max-width:420px;width:100%}.login-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--color-brand),var(--color-brand-light));border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;color:var(--color-white);font-weight:var(--font-weight-extrabold);font-size:var(--text-xl);margin:0 auto var(--space-6)}.login-title{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-2)}.login-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}.login-btn{width:100%;padding:var(--space-3) var(--space-6);display:flex;align-items:center;justify-content:center;gap:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-white);font-family:var(--font-ui);font-size:var(--text-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast)}.login-btn:hover{background:var(--color-surface-hover);box-shadow:var(--shadow-md)}.login-footer{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-muted)}.mono{font-family:var(--font-mono)}.divider{height:1px;background:var(--color-border);margin:var(--space-4) 0}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.w-full{width:100%}.text-center{text-align:center}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-muted{color:var(--color-text-muted)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:1200px){.portal-layout{grid-template-columns:1fr}.right-panel{width:100%;max-height:none}}@media(max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.app-main{margin-left:0}.settings-layout{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}