.notification-bell{position:relative;display:flex;align-items:center;justify-content:center}.notification-bell-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--radius, 8px);background:transparent;color:var(--muted-foreground, #8b8b92);cursor:pointer;transition:all var(--transition-fast, 150ms ease);outline:none}.notification-bell-btn:hover{background:var(--muted, #2e2e33);color:var(--foreground, #f8fafc)}.notification-bell-btn:focus-visible{box-shadow:0 0 0 2px var(--ring, rgba(255, 255, 255, 0.3))}.notification-bell-btn svg{width:18px;height:18px;margin-top:2px}.notification-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;text-align:center;color:var(--primary-foreground, #1e1e1e);background:var(--destructive, #ef4444);border-radius:8px;transform:scale(1);transition:transform var(--transition-fast, 150ms ease)}.notification-badge.hidden{transform:scale(0);pointer-events:none}.notification-item{display:flex;gap:12px;padding:12px;border-radius:var(--radius, 8px);background:transparent;cursor:pointer;transition:background var(--transition-fast, 150ms ease)}.notification-item:hover{background:var(--muted, #2e2e33)}.notification-item.unread{background:var(--primary-muted, rgba(204, 255, 0, 0.08))}.notification-item.unread:hover{background:rgba(204,255,0,0.12)}.notification-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius, 8px);background:var(--muted, #2e2e33);color:var(--muted-foreground, #8b8b92)}.notification-icon svg{width:18px;height:18px}.notification-content{flex:1;min-width:0}.notification-title{font-size:13px;font-weight:500;color:var(--foreground, #f8fafc);margin:0 0 4px;line-height:1.4}.notification-body{font-size:12px;color:var(--muted-foreground, #8b8b92);margin:0 0 6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-time{font-size:11px;color:var(--muted-foreground, #8b8b92);opacity:0.7}.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--muted-foreground, #8b8b92)}.notification-empty svg{width:48px;height:48px;margin-bottom:16px;opacity:0.4}.notification-empty p{margin:0;font-size:13px}.notification-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:10000018;display:flex;align-items:center;justify-content:center;animation:notification-fade-in 150ms ease-out}@keyframes notification-fade-in{from{opacity:0}to{opacity:1}}.notification-modal-content{background:var(--background, #1e1e1e);border:1px solid var(--border, rgba(255, 255, 255, 0.08));border-radius:var(--radius-lg, 12px);width:90%;max-width:420px;max-height:85vh;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,0.4);animation:notification-modal-slide-in 200ms ease-out}.notification-modal-backdrop{display:none}.notification-modal-body{padding:32px 24px 24px;text-align:center;overflow:auto;max-height:calc(85vh - 80px)}@keyframes notification-modal-slide-in{from{opacity:0;transform:scale(0.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.share-workflow-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:10000018;display:flex;align-items:center;justify-content:center;animation:notification-fade-in 150ms ease-out}.share-workflow-dialog{background:var(--background, #1e1e1e);border:1px solid var(--border, rgba(255, 255, 255, 0.08));border-radius:var(--radius-lg, 12px);width:90%;max-width:420px;box-shadow:0 16px 48px rgba(0,0,0,0.4);animation:notification-modal-slide-in 200ms ease-out;overflow:hidden}.share-workflow-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border, rgba(255, 255, 255, 0.08))}.share-workflow-dialog-header h3{margin:0;font-size:15px;font-weight:600;color:var(--foreground, #f8fafc)}.share-workflow-dialog-body{padding:20px}.share-workflow-dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border, rgba(255, 255, 255, 0.08));background:var(--surface, #262626)}.shared-workflow-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:10000020;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-normal, 200ms ease)}.shared-workflow-overlay.visible{opacity:1;pointer-events:auto}.shared-workflow-card{background:var(--background, #1e1e1e);border:1px solid var(--border, rgba(255, 255, 255, 0.08));border-radius:var(--radius-lg, 12px);width:90%;max-width:400px;padding:24px;box-shadow:0 24px 64px rgba(0,0,0,0.5);text-align:center;animation:shared-card-bounce-in 400ms cubic-bezier(0.34,1.56,0.64,1)}@keyframes shared-card-bounce-in{from{opacity:0;transform:scale(0.8) translateY(20px)}60%{opacity:1;transform:scale(1.02) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.shared-workflow-card-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--primary-muted, rgba(204, 255, 0, 0.12));display:flex;align-items:center;justify-content:center;color:var(--primary, #ccff00)}.shared-workflow-card-icon svg{width:28px;height:28px}.shared-workflow-card h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--foreground, #f8fafc)}.shared-workflow-card p{margin:0 0 20px;font-size:13px;color:var(--muted-foreground, #8b8b92);line-height:1.5}.shared-workflow-card-actions{display:flex;gap:12px;justify-content:center}.shared-workflow-card-actions button{padding:10px 20px;border-radius:var(--radius, 8px);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all var(--transition-fast, 150ms ease)}.shared-workflow-card-actions .btn-accept{background:var(--primary, #ccff00);color:var(--primary-foreground, #1e1e1e)}.shared-workflow-card-actions .btn-accept:hover{background:var(--primary-hover, #b8e600)}.shared-workflow-card-actions .btn-reject{background:var(--secondary, #242428);color:var(--foreground, #f8fafc);border-color:var(--border, rgba(255, 255, 255, 0.08))}.shared-workflow-card-actions .btn-reject:hover{background:var(--muted, #2e2e33)}.readonly-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--warning-light, rgba(245, 158, 11, 0.15));border:1px solid var(--warning, #f59e0b);border-radius:var(--radius, 8px);margin-bottom:16px}.readonly-banner svg{flex-shrink:0;width:18px;height:18px;color:var(--warning, #f59e0b)}.readonly-banner span{font-size:13px;color:var(--foreground, #f8fafc)}.badge-readonly{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:500;color:var(--warning, #f59e0b);background:var(--warning-light, rgba(245, 158, 11, 0.15));border-radius:var(--radius-sm, 6px)}.badge-readonly svg{width:12px;height:12px}.shared-by{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground, #8b8b92);margin-top:8px}.shared-by-avatar{width:20px;height:20px;border-radius:50%;background:var(--muted, #2e2e33);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--foreground, #f8fafc);text-transform:uppercase}.shared-by-name{font-weight:500;color:var(--foreground, #f8fafc)}.notification-panel-dialog{max-width:600px}.theme-light .notification-panel{box-shadow:-8px 0 32px rgba(0,0,0,0.1)}.theme-light .notification-item.unread{background:rgba(51,90,245,0.08)}.theme-light .notification-item.unread:hover{background:rgba(51,90,245,0.12)}.theme-light .shared-workflow-overlay{background:rgba(0,0,0,0.4)}.theme-light .shared-workflow-card{box-shadow:0 24px 64px rgba(0,0,0,0.15)}.theme-light .shared-workflow-card-icon{background:rgba(51,90,245,0.1);color:var(--primary, #335AF5)}@media (max-width: 480px){.notification-panel{border-left:none}.shared-workflow-card{width:95%;padding:20px 16px}.shared-workflow-card-actions{flex-direction:column}.shared-workflow-card-actions button{width:100%}}@keyframes notification-slide-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes notification-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.notification-badge.pulse{animation:notification-pulse 300ms ease-in-out}