*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#0d1117;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.demo-wrapper{width:100%;max-width:520px;display:flex;flex-direction:column;gap:1rem}.demo-trust-banner{display:flex;align-items:center;gap:0.5rem;padding:0.625rem 1rem;background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.25);border-radius:8px;color:#67e8f9;font-size:0.75rem}.demo-trust-banner i{font-size:1rem;flex-shrink:0}.demo-exit-link{margin-left:auto;color:#94a3b8;text-decoration:none;font-size:0.75rem;transition:color 0.2s}.demo-exit-link:hover{color:#67e8f9}.extension-frame{background:#151b23;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.06)}.view{display:none}.view.active{display:block}.ext-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-bottom:1px solid rgba(255,255,255,0.06)}.ext-header-left,.ext-header-right{display:flex;align-items:center;gap:0.5rem;min-width:60px}.ext-header-right{justify-content:flex-end}.ext-logo{font-size:1.5rem;font-weight:700;color:#22d3ee;letter-spacing:-0.5px}.ext-icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#94a3b8;cursor:pointer;border-radius:6px;transition:background 0.2s,color 0.2s}.ext-icon-btn:hover{background:rgba(255,255,255,0.08);color:white}.ext-icon-btn i{font-size:1.25rem}.ext-profile-btn{position:relative}.pro-badge{position:absolute;bottom:-2px;right:-4px;font-size:0.5rem;font-weight:700;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1e293b;padding:1px 4px;border-radius:3px;letter-spacing:0.5px}.settings-header,.updates-header{justify-content:flex-start;gap:0.75rem}.settings-title,.updates-title{font-size:1.125rem;font-weight:600;color:white}.ext-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.06)}.ext-tab{flex:1;padding:0.875rem 1rem;background:transparent;border:none;color:#64748b;font-size:0.8125rem;font-weight:500;cursor:pointer;transition:color 0.2s;position:relative}.ext-tab:hover{color:#94a3b8}.ext-tab.active{color:#22d3ee}.ext-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#22d3ee}.ext-content{padding:1.25rem}.tab-panel{display:none}.tab-panel.active{display:block}.input-section{margin-bottom:1rem}.input-label{display:block;font-size:0.8125rem;font-weight:500;color:white;margin-bottom:0.5rem}.input-sublabel{color:#64748b;font-weight:400}.ext-input{width:100%;padding:0.75rem 1rem;background:#1e2530;border:1px solid rgba(255,255,255,0.08);border-radius:6px;color:white;font-size:0.875rem;font-family:inherit;transition:border-color 0.2s,box-shadow 0.2s}.ext-input::placeholder{color:#475569}.ext-input:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,0.1)}.button-section{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem}.ext-btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1rem;border:none;border-radius:6px;font-size:0.875rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity 0.2s,transform 0.1s}.ext-btn:hover{opacity:0.9}.ext-btn:active{transform:scale(0.98)}.ext-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}.ext-btn-primary{background:linear-gradient(135deg,#06b6d4,#0891b2);color:white}.ext-btn-secondary{background:#2d3748;color:white;justify-content:space-between}.ext-btn-accent{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:white}.ext-btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:white}.ext-btn-sm{padding:0.5rem 0.75rem;font-size:0.75rem}.toggle-status{font-size:0.75rem;font-weight:700;padding:0.25rem 0.625rem;border-radius:4px;letter-spacing:0.5px}.toggle-status.off{background:rgba(239,68,68,0.2);color:#f87171}.toggle-status.on{background:rgba(16,185,129,0.2);color:#34d399}.users-section{border-top:1px solid rgba(255,255,255,0.06);padding-top:1.25rem}.section-title{font-size:0.875rem;font-weight:600;color:white;margin-bottom:0.75rem}.tracked-users-list{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;min-height:40px}.tracked-user{display:flex;align-items:center;justify-content:space-between;padding:0.625rem 0.875rem;background:#1e2530;border-radius:6px;border:1px solid rgba(255,255,255,0.06)}.tracked-user-info{display:flex;align-items:center;gap:0.625rem}.tracked-user-avatar{width:28px;height:28px;background:linear-gradient(135deg,#22d3ee,#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.75rem;font-weight:600}.tracked-user-name{font-size:0.8125rem;font-weight:500;color:white}.tracked-user-remove{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:4px;transition:background 0.2s,color 0.2s}.tracked-user-remove:hover{background:rgba(239,68,68,0.15);color:#f87171}.placeholder-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;color:#475569}.placeholder-content i{font-size:3rem;margin-bottom:0.75rem}.placeholder-content p{font-size:0.9375rem;font-weight:500}.placeholder-note{font-size:0.75rem;margin-top:0.25rem}.settings-content{padding:0.5rem 0}.settings-group{padding:0.5rem 0}.settings-group-title{font-size:0.6875rem;font-weight:600;color:#22d3ee;letter-spacing:0.5px;padding:0.5rem 1rem}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1rem;background:transparent;transition:background 0.2s}.settings-row:hover{background:rgba(255,255,255,0.02)}.settings-label{font-size:0.8125rem;font-weight:500;color:white}.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:#374151;border-radius:24px;transition:background 0.2s}.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:transform 0.2s}.toggle-switch input:checked+.toggle-slider{background:#10b981}.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}.updates-content{padding:1rem}.updates-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.ext-select{padding:0.5rem 0.75rem;background:#1e2530;border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:white;font-size:0.75rem;font-family:inherit;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}.ext-select:focus{outline:none;border-color:#22d3ee}.updates-list{display:flex;flex-direction:column;gap:0.5rem;max-height:300px;overflow-y:auto}.updates-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;color:#475569}.updates-empty i{font-size:2rem;margin-bottom:0.5rem}.update-item{padding:0.875rem;background:#1e2530;border-radius:8px;border:1px solid rgba(255,255,255,0.06);border-left:3px solid #22d3ee}.update-item-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.375rem}.update-item-title{font-size:0.8125rem;font-weight:600;color:white}.update-item-time{font-size:0.6875rem;color:#64748b}.update-item-body{font-size:0.75rem;color:#94a3b8}.update-item-detail{font-size:0.75rem;color:#22d3ee;margin-top:0.375rem}.update-item-remove{position:absolute;top:0.5rem;right:0.5rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:4px}.demo-hint{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;color:#64748b;font-size:0.75rem;text-align:center}.demo-hint i{font-size:1rem;animation:bounce 2s infinite}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.demo-hint.hidden{display:none}.notification-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:0.75rem;z-index:9999;pointer-events:none}.notification{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem;background:#1e293b;border:1px solid rgba(255,255,255,0.1);border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.3);min-width:280px;max-width:360px;animation:slideIn 0.3s ease-out forwards;pointer-events:auto}.notification.dismissing{animation:slideOut 0.3s ease-out forwards}@keyframes slideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}.notification-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#22d3ee,#06b6d4);border-radius:8px;color:white;font-size:1.125rem;flex-shrink:0}.notification-icon.success{background:linear-gradient(135deg,#10b981,#059669)}.notification-icon.info{background:linear-gradient(135deg,#3b82f6,#2563eb)}.notification-icon.friend{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.notification-content{flex:1;min-width:0}.notification-title{font-size:0.8125rem;font-weight:600;color:white;margin-bottom:0.25rem}.notification-body{font-size:0.75rem;color:#94a3b8;line-height:1.4}.notification-badge{position:absolute;top:-6px;left:-6px;font-size:0.5rem;font-weight:700;background:#22d3ee;color:#0f172a;padding:2px 6px;border-radius:4px;letter-spacing:0.5px}@media (max-width:560px){body{padding:0.5rem}.demo-wrapper{max-width:100%}.extension-frame{border-radius:0}.notification-container{left:0.75rem;right:0.75rem;bottom:0.75rem}.notification{min-width:auto;max-width:none}}@media (prefers-reduced-motion:reduce){.notification{animation:none;opacity:1;transform:none}.notification.dismissing{animation:none;opacity:0}.demo-hint i{animation:none}}