@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;color:#1e293b;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}a{font-weight:500;color:#3b82f6;text-decoration:none;transition:color .3s ease}a:hover{color:#1d4ed8}button{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;cursor:pointer;padding:0;margin:0}input{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;outline:none;padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:600;line-height:1.3;color:#1e293b}p{line-height:1.6;color:#64748b}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}::selection{background:#3b82f633;color:#1e293b}:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}*{backface-visibility:hidden;-webkit-backface-visibility:hidden}@media (prefers-reduced-motion: no-preference){*{transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#f8fafc,#e2e8f0);min-height:100vh;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:32px 0}.hero-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:80px 20px 60px;text-align:center;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,0 1000,100 1000,0"/></svg>');background-size:cover;pointer-events:none}.hero-content{max-width:800px;margin:0 auto;position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}.user-info{display:flex;align-items:center;gap:16px;color:#fff;font-weight:500}.logout-btn{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 16px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logout-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-1px)}.logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}.logo svg{color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.logo h1{font-size:3.5rem;font-weight:700;letter-spacing:-2px;text-shadow:0 4px 8px rgba(0,0,0,.2);margin:0}.hero-subtitle{font-size:1.25rem;font-weight:400;opacity:.9;max-width:600px;margin:0 auto;line-height:1.6}.container{max-width:1200px;margin:-40px auto 0;padding:0 20px;flex:1;position:relative;z-index:2}.main-card{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a,0 8px 16px #0000001a;padding:40px;margin-bottom:40px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-header{text-align:center;margin-bottom:40px}.card-header h2{font-size:2.25rem;font-weight:600;color:#1e293b;margin-bottom:12px;letter-spacing:-1px}.card-header p{font-size:1.125rem;color:#64748b;font-weight:400}.form{width:100%}.input-group{display:flex;gap:12px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:16px;padding:8px;transition:all .3s ease;position:relative}.input-group:focus-within{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a;background:#fff}.input-icon{display:flex;align-items:center;padding:0 16px;color:#64748b;transition:color .3s ease}.input-group:focus-within .input-icon{color:#3b82f6}.url-input{flex:1;border:none;background:transparent;padding:20px 0;font-size:1.125rem;color:#1e293b;outline:none;font-weight:400}.url-input::placeholder{color:#94a3b8}.submit-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:12px;padding:20px 32px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px #3b82f64d;white-space:nowrap}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #3b82f666}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.urls-section{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a,0 8px 16px #0000001a;padding:40px;border:1px solid rgba(255,255,255,.2);margin-bottom:40px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}.section-header h2{font-size:2rem;font-weight:600;color:#1e293b;margin:0}.stats{display:flex;gap:24px;flex-wrap:wrap}.stat-item{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:12px;font-size:.875rem;font-weight:600;color:#475569;border:1px solid #e2e8f0}.stat-item svg{color:#64748b}.urls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.url-card{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:16px;padding:24px;transition:all .3s ease;position:relative;overflow:hidden}.url-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:16px 16px 0 0}.url-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0000001a,0 4px 16px #0000001a;border-color:#cbd5e1}.url-content{position:relative;z-index:1}.url-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:16px}.url-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.url-title svg{color:#64748b;flex-shrink:0}.url-domain{font-size:.875rem;color:#475569;font-weight:500;word-break:break-all}.click-count{display:flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-radius:8px;font-size:.75rem;font-weight:600;color:#1e40af;border:1px solid #bfdbfe;white-space:nowrap}.click-count svg{color:#3b82f6}.short-url-section{margin-top:16px}.short-url-container{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:12px;transition:all .3s ease}.short-url-container:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:#cbd5e1}.short-url-link{flex:1;color:#3b82f6;text-decoration:none;font-weight:600;font-size:1.125rem;transition:color .3s ease;word-break:break-all}.short-url-link:hover{color:#1d4ed8}.copy-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.copy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.copy-btn.copied{background:linear-gradient(135deg,#10b981,#059669);animation:pulse .5s ease-in-out}.empty-state{text-align:center;padding:60px 20px;color:#64748b;grid-column:1 / -1}.empty-state svg{margin-bottom:24px;opacity:.5}.empty-state h3{font-size:1.5rem;font-weight:600;color:#475569;margin-bottom:8px}.empty-state p{font-size:1.125rem;color:#64748b}@media (max-width: 768px){.hero-section{padding:60px 20px 40px}.hero-content{flex-direction:column;text-align:center}.logo h1{font-size:2.5rem}.hero-subtitle{font-size:1.125rem}.container{padding:0 16px;margin-top:-20px}.main-card,.urls-section{padding:24px;border-radius:16px}.card-header h2{font-size:1.875rem}.input-group{flex-direction:column;gap:0}.input-icon,.url-input{padding:16px}.submit-btn{margin:8px;justify-content:center}.section-header{flex-direction:column;align-items:flex-start;gap:16px}.stats{align-self:stretch;justify-content:space-between}.urls-grid{grid-template-columns:1fr}.url-header,.short-url-container{flex-direction:column;gap:12px}.copy-btn{align-self:stretch;justify-content:center}}@media (max-width: 480px){.logo{flex-direction:column;gap:8px}.logo h1{font-size:2rem}.hero-subtitle{font-size:1rem}.main-card,.urls-section{padding:20px;margin-bottom:20px}.card-header h2,.section-header h2{font-size:1.5rem}.stats{flex-direction:column;gap:8px}.stat-item{justify-content:center}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative}.auth-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.1) 0%,transparent 70%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.auth-card{background:#fff;border-radius:24px;box-shadow:0 32px 64px #0003,0 16px 32px #0000001a;padding:48px;width:100%;max-width:440px;position:relative;z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.auth-header{text-align:center;margin-bottom:40px}.auth-icon{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:#fff;box-shadow:0 8px 24px #667eea4d}.auth-icon svg{stroke:currentColor;fill:none}.auth-header h2{font-size:2rem;font-weight:700;color:#1e293b;margin-bottom:8px;letter-spacing:-.5px}.auth-header p{font-size:1rem;color:#64748b;font-weight:400;line-height:1.5}.auth-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:.875rem;font-weight:600;color:#374151;letter-spacing:.025em}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:16px;color:#9ca3af;z-index:1;transition:color .3s ease;display:flex;align-items:center;justify-content:center}.form-input{width:100%;padding:16px 16px 16px 50px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fafafa;color:#1f2937;font-weight:400}.form-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fff}.form-input:focus+.input-icon,.input-wrapper:focus-within .input-icon{color:#667eea}.password-toggle{position:absolute;right:16px;background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:6px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:#667eea;background:#667eea1a}.error-message{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fee2e2,#fecaca);color:#dc2626;padding:12px 16px;border-radius:12px;font-size:.875rem;font-weight:500;border:1px solid #fca5a5}.auth-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:16px 24px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px #667eea4d;position:relative;overflow:hidden}.auth-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.auth-button:hover:before{left:100%}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #667eea66}.auth-button:active{transform:translateY(0)}.auth-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.auth-footer{text-align:center;margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb}.auth-footer p{color:#6b7280;font-size:.875rem;margin:0}.auth-switch-btn{background:none;border:none;color:#667eea;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .3s ease;padding:2px 4px;border-radius:4px}.auth-switch-btn:hover{color:#4f46e5;background:#667eea1a}@media (max-width: 480px){.auth-card{padding:32px 24px;margin:20px}.auth-header h2{font-size:1.75rem}.auth-icon{width:64px;height:64px}.form-input{padding:14px 14px 14px 44px}.input-icon{left:14px}.password-toggle{right:14px}}.navbar{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:0;box-shadow:0 4px 20px #0000001a;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navbar-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:80px;position:relative}.navbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}.brand-icon{width:48px;height:48px;background:#ffffff26;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.brand-icon svg{stroke:currentColor;fill:none}.brand-title{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.5px;color:#fff}.navbar-menu{display:flex;align-items:center;gap:24px}.user-profile{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#ffffff1a;border-radius:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.user-avatar{width:36px;height:36px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.user-email{font-size:.875rem;font-weight:500;color:#fff;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar-actions{display:flex;align-items:center;gap:16px}.menu-toggle{display:none;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:8px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-toggle:hover{background:#fff3;border-color:#ffffff4d}.logout-btn{display:flex;align-items:center;gap:8px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 20px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logout-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 16px #0003}.logout-btn:active{transform:translateY(0)}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-top:none;border-radius:0 0 16px 16px;padding:20px;display:none;flex-direction:column;gap:16px;box-shadow:0 8px 32px #0000001a}.mobile-user-info{display:flex;align-items:center;gap:12px;padding:12px;background:#667eea1a;border-radius:12px;color:#374151}.mobile-user-info .user-avatar{background:#667eea33;color:#667eea}.mobile-user-info .user-email{color:#374151;font-weight:600}.mobile-logout-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;padding:14px 20px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;justify-content:center}.mobile-logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #ef44444d}@media (max-width: 768px){.navbar-container{padding:0 16px;height:70px}.brand-icon{width:40px;height:40px}.brand-title{font-size:1.25rem}.user-profile,.logout-btn{display:none}.menu-toggle,.mobile-menu{display:flex}.user-email{max-width:150px}}@media (max-width: 480px){.navbar-container{padding:0 12px;height:64px}.brand-icon{width:36px;height:36px}.brand-title{font-size:1.125rem}.mobile-menu{padding:16px}}.analytics-container{background:#fff;border-radius:20px;box-shadow:0 8px 32px #00000014;padding:32px;margin-bottom:32px;border:1px solid #e5e7eb}.analytics-header{text-align:center;margin-bottom:40px}.analytics-header h2{font-size:2rem;font-weight:700;color:#1f2937;margin-bottom:8px;letter-spacing:-.5px}.analytics-header p{font-size:1rem;color:#6b7280;font-weight:400}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}.stat-card{background:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;box-shadow:0 4px 16px #0000000d;border:2px solid transparent;transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:16px 16px 0 0}.stat-card.primary:before{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-card.secondary:before{background:linear-gradient(135deg,#f093fb,#f5576c)}.stat-card.success:before{background:linear-gradient(135deg,#4facfe,#00f2fe)}.stat-card.warning:before{background:linear-gradient(135deg,#fad0c4,#ffd1ff)}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001f}.stat-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.stat-icon svg{stroke:currentColor;fill:none}.stat-card.primary .stat-icon{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-card.secondary .stat-icon{background:linear-gradient(135deg,#f093fb,#f5576c)}.stat-card.success .stat-icon{background:linear-gradient(135deg,#4facfe,#00f2fe)}.stat-card.warning .stat-icon{background:linear-gradient(135deg,#fad0c4,#ffd1ff);color:#8b5cf6}.stat-content{flex:1}.stat-number{font-size:2rem;font-weight:700;color:#1f2937;line-height:1;margin-bottom:4px}.stat-label{font-size:.875rem;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.analytics-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin-bottom:40px}.analytics-section{background:#f8fafc;border-radius:16px;padding:24px;border:1px solid #e5e7eb}.analytics-section h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin-bottom:20px;display:flex;align-items:center;gap:8px}.top-urls{display:flex;flex-direction:column;gap:12px}.top-url-item{display:flex;align-items:center;gap:16px;background:#fff;padding:16px;border-radius:12px;border:1px solid #e5e7eb;transition:all .3s ease}.top-url-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000014;border-color:#d1d5db}.url-rank{width:32px;height:32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}.url-title{font-size:.875rem;font-weight:600;color:#1f2937;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.url-short{font-size:.75rem;color:#6b7280;font-family:Courier New,monospace}.url-clicks{text-align:right;flex-shrink:0}.clicks-number{font-size:1.125rem;font-weight:700;color:#1f2937;display:block}.clicks-label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.recent-activity{display:flex;flex-direction:column;gap:12px}.activity-item{display:flex;align-items:center;gap:12px;background:#fff;padding:16px;border-radius:12px;border:1px solid #e5e7eb;transition:all .3s ease}.activity-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000014;border-color:#d1d5db}.activity-icon{width:36px;height:36px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.activity-content{flex:1;min-width:0}.activity-title{font-size:.875rem;font-weight:600;color:#1f2937;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-time{font-size:.75rem;color:#6b7280}.activity-clicks{font-size:.875rem;font-weight:600;color:#6b7280;flex-shrink:0}.click-chart{display:flex;flex-direction:column;gap:16px}.chart-bar{display:flex;flex-direction:column;gap:8px}.bar-info{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.bar-label{font-weight:500;color:#374151;font-family:Courier New,monospace}.bar-value{font-weight:700;color:#1f2937}.bar-container{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.bar-fill{height:100%;border-radius:4px;transition:width .8s ease}.empty-state{text-align:center;padding:40px 20px;color:#9ca3af}.empty-state svg{margin-bottom:16px;opacity:.5}.empty-state p{font-size:.875rem;color:#6b7280;margin:0}@media (max-width: 768px){.analytics-container{padding:24px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.stat-card{padding:20px}.stat-icon{width:48px;height:48px}.stat-number{font-size:1.5rem}.analytics-content{grid-template-columns:1fr;gap:24px}.analytics-section{padding:20px}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}.top-url-item,.activity-item{padding:12px}.analytics-header h2{font-size:1.5rem}}.url-shortener{background:#fff;border-radius:20px;box-shadow:0 8px 32px #00000014;padding:40px;margin-bottom:32px;margin-top:32px;border:1px solid #e5e7eb;position:relative;overflow:hidden}.url-shortener:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px 20px 0 0}.shortener-header{text-align:center;margin-bottom:40px}.shortener-header h2{font-size:2.25rem;font-weight:700;color:#1f2937;margin-bottom:12px;letter-spacing:-.5px}.shortener-header p{font-size:1.125rem;color:#6b7280;font-weight:400}.shortener-form{max-width:600px;margin:0 auto}.input-container{position:relative}.input-wrapper{display:flex;align-items:center;background:#f8fafc;border:2px solid #e5e7eb;border-radius:16px;padding:8px;transition:all .3s ease;gap:12px}.input-wrapper:focus-within{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fff}.input-icon{display:flex;align-items:center;justify-content:center;padding:0 16px;color:#6b7280;transition:color .3s ease}.input-icon svg{stroke:currentColor;fill:none}.input-wrapper:focus-within .input-icon{color:#667eea}.url-input{flex:1;border:none;background:transparent;padding:20px 0;font-size:1.125rem;color:#1f2937;outline:none;font-weight:400;min-width:0}.url-input::placeholder{color:#9ca3af}.shorten-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:20px 32px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px #667eea4d;white-space:nowrap;flex-shrink:0}.shorten-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #667eea66}.shorten-btn:active{transform:translateY(0)}.shorten-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.password-section{margin-top:24px;padding:24px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;transition:all .3s ease}.password-toggle{margin-bottom:20px}.toggle-container{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:1rem;font-weight:500;color:#374151;transition:color .3s ease}.toggle-container:hover{color:#667eea}.toggle-checkbox{display:none}.toggle-slider{position:relative;width:52px;height:28px;background:#d1d5db;border-radius:20px;transition:all .3s ease;cursor:pointer}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-checkbox:checked+.toggle-slider{background:linear-gradient(135deg,#667eea,#764ba2)}.toggle-checkbox:checked+.toggle-slider:before{transform:translate(24px)}.toggle-label{display:flex;align-items:center;gap:8px;font-weight:500;color:#374151;transition:color .3s ease}.toggle-label svg{stroke:currentColor;fill:none;transition:stroke .3s ease}.toggle-checkbox:checked~.toggle-label{color:#667eea}.password-input-container{animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.password-input{width:100%;padding:16px 20px;font-size:1rem;border:2px solid #e5e7eb;border-radius:12px;background:#fff;color:#1f2937;outline:none;transition:all .3s ease;font-weight:400;margin-bottom:12px}.password-input::placeholder{color:#9ca3af}.password-input:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.password-hint{display:flex;align-items:center;gap:8px;font-size:.875rem;color:#6b7280;font-weight:400;line-height:1.5}.password-hint svg{stroke:currentColor;fill:none;flex-shrink:0}.success-message{margin-top:32px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:16px;padding:24px;display:flex;align-items:flex-start;gap:16px;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-icon{width:48px;height:48px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px #10b9814d}.success-content{flex:1}.success-content h3{font-size:1.125rem;font-weight:600;color:#065f46;margin-bottom:12px}.shortened-url-container{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #a7f3d0;border-radius:12px;padding:16px}.shortened-url{flex:1;font-family:Courier New,monospace;font-size:1rem;color:#1f2937;font-weight:500;word-break:break-all}.copy-success-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}.copy-success-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}@media (max-width: 768px){.url-shortener{padding:32px 24px;margin-bottom:24px}.shortener-header h2{font-size:1.875rem}.shortener-header p{font-size:1rem}.input-wrapper{flex-direction:column;gap:16px;padding:16px}.input-icon{padding:0;align-self:flex-start}.url-input{width:100%;padding:16px 0}.shorten-btn{width:100%;justify-content:center;padding:16px}.shortened-url-container{flex-direction:column;gap:12px;align-items:stretch}.copy-success-btn{justify-content:center}}@media (max-width: 480px){.url-shortener{padding:24px 16px}.shortener-header h2{font-size:1.5rem}.success-message{padding:20px;flex-direction:column;text-align:center}.success-icon{align-self:center}}.url-list{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:24px;box-shadow:0 10px 40px #00000014;padding:40px;border:1px solid #e2e8f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.list-header h2{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-.5px}.list-stats{display:flex;gap:16px;flex-wrap:wrap}.stat-badge{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;font-size:.875rem;font-weight:600;color:#fff;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease}.stat-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.stat-badge svg{color:#ffffffe6}.urls-container{position:relative}.empty-state{text-align:center;padding:80px 20px;color:#6b7280}.empty-icon{margin-bottom:24px;opacity:.3}.empty-state h3{font-size:1.5rem;font-weight:600;color:#374151;margin-bottom:8px}.empty-state p{font-size:1rem;color:#6b7280;margin:0}.urls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:28px}.url-card{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:20px;padding:28px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:24px;box-shadow:0 4px 20px #0000000d}.url-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#f5576c);border-radius:20px 20px 0 0}.url-card:after{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(102,126,234,.03) 0%,transparent 70%);pointer-events:none;transition:all .4s ease}.url-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px #0000001f;border-color:#c7d2fe}.url-card:hover:after{top:-20%;right:-20%}.url-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.url-info{flex:1;min-width:0}.original-url{display:flex;align-items:center;gap:8px;font-size:.875rem;color:#4b5563;margin-bottom:4px}.original-url svg{stroke:currentColor;fill:none;flex-shrink:0}.url-domain{font-weight:500;color:#374151;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lock-indicator{display:flex;align-items:center;justify-content:center;padding:4px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:6px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px #f59e0b4d;transition:all .3s ease}.lock-indicator:hover{transform:scale(1.1);box-shadow:0 4px 12px #f59e0b66}.lock-indicator svg{stroke:currentColor;fill:none}.url-meta{display:flex;align-items:center;gap:12px;padding-left:16px}.url-date{font-size:.75rem;color:#64748b;font-weight:500;background:#f8fafc;padding:4px 8px;border-radius:6px}.url-stats{flex-shrink:0}.click-count{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#10b981,#059669);border-radius:12px;font-size:.875rem;font-weight:600;color:#fff;box-shadow:0 4px 15px #10b9814d;white-space:nowrap;transition:all .3s ease}.click-count:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.click-count svg{color:#ffffffe6}.short-url-section{position:relative;display:flex;flex-direction:column;gap:20px}.short-url-container{display:flex;align-items:center;gap:16px;padding:20px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px solid #e2e8f0;border-radius:16px;transition:all .3s ease;position:relative;overflow:hidden}.short-url-container:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea0d,#764ba20d);opacity:0;transition:opacity .3s ease}.short-url-container:hover:before{opacity:1}.short-url-container:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:#c7d2fe;transform:translateY(-2px)}.short-url-actions{display:flex;gap:14px;align-items:center;justify-content:flex-start;padding:16px 20px;background:linear-gradient(135deg,#fff,#f8fafc);border-radius:14px;border:1px solid #e2e8f0;box-shadow:0 2px 8px #0000000a;transition:all .3s ease;position:relative;overflow:hidden}.short-url-actions:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-1px);border-color:#c7d2fe;background:linear-gradient(135deg,#fff,#f1f5f9)}.short-url-actions:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#667eea,#764ba2,#8b5cf6);border-radius:14px 14px 0 0;opacity:0;transition:opacity .3s ease}.short-url-actions:hover:before{opacity:1}.short-url-actions:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(102,126,234,.02) 0%,transparent 50%);pointer-events:none;opacity:0;transition:opacity .3s ease}.short-url-actions:hover:after{opacity:1}.short-url-link{flex:1;color:#667eea;text-decoration:none;font-weight:700;font-size:1.1rem;transition:all .3s ease;word-break:break-all;display:flex;align-items:center;gap:12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1}.short-url-link:hover{transform:translate(4px)}.short-url-link svg{color:#667eea}.copy-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;flex-shrink:0;box-shadow:0 4px 15px #667eea4d;position:relative;overflow:hidden}.copy-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.copy-btn:hover:before{left:100%}.copy-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.copy-btn.copied{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 15px #10b9814d;animation:successPulse .6s ease-out}.short-url-actions .qr-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;color:#fff;padding:12px;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;cursor:pointer;box-shadow:0 4px 15px #8b5cf64d;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-width:44px;height:44px}.short-url-actions .qr-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.short-url-actions .qr-btn:hover:before{left:100%}.short-url-actions .qr-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #8b5cf666}.short-url-actions .qr-btn svg{width:20px;height:20px;transition:transform .3s ease}.short-url-actions .qr-btn:hover svg{transform:scale(1.1)}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media (max-width: 768px){.url-list{padding:28px}.list-header{flex-direction:column;align-items:flex-start}.list-header h2{font-size:2rem}.list-stats{align-self:stretch;justify-content:space-between}.urls-grid{grid-template-columns:1fr;gap:24px}.url-card{padding:24px}.url-header{flex-direction:column;gap:16px}.url-stats{align-self:flex-start}.short-url-container{flex-direction:column;gap:16px;align-items:stretch}.short-url-actions{display:flex;gap:12px;justify-content:center;padding:14px 16px;flex-wrap:wrap}.copy-btn{justify-content:center;flex:1}.short-url-actions .qr-btn{flex:0 0 auto}}@media (max-width: 480px){.url-list{padding:24px}.list-header h2{font-size:1.75rem}.stat-badge{font-size:.8125rem;padding:10px 16px}.url-card{padding:20px}.empty-state{padding:60px 20px}.empty-state h3{font-size:1.25rem}.urls-grid{grid-template-columns:1fr}}.url-card.disabled{opacity:.7;border-color:#fca5a5;background:linear-gradient(135deg,#fef2f2,#fecaca)}.url-card.disabled:before{background:linear-gradient(90deg,#ef4444,#dc2626,#b91c1c,#991b1b)}.status-indicator{font-size:1.2rem;font-weight:700;flex-shrink:0;margin-left:8px;transition:all .3s ease}.status-indicator.active{color:#10b981;animation:pulse 2s infinite}.status-indicator.inactive{color:#ef4444;opacity:.7}.password-attempts{font-size:.75rem;color:#dc2626;font-weight:600;background:#fef2f2;padding:4px 8px;border-radius:6px;border:1px solid #fecaca}.disabled-warning{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#fef2f2,#fecaca);border:1px solid #fca5a5;border-radius:12px;color:#dc2626;font-size:.875rem;font-weight:600;margin-top:-8px}.disabled-warning svg{color:#dc2626;flex-shrink:0}.toggle-btn{display:flex;align-items:center;justify-content:center;padding:12px;border:none;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:relative;overflow:hidden;min-width:44px;height:44px}.toggle-btn.active{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef44444d}.toggle-btn.inactive{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b9814d}.toggle-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.toggle-btn:hover:before{left:100%}.toggle-btn:hover{transform:translateY(-3px)}.toggle-btn.active:hover{box-shadow:0 8px 25px #ef444466}.toggle-btn.inactive:hover{box-shadow:0 8px 25px #10b98166}.toggle-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.reset-btn{display:flex;align-items:center;justify-content:center;padding:12px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;box-shadow:0 4px 15px #f59e0b4d;position:relative;overflow:hidden;min-width:44px;height:44px}.reset-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.reset-btn:hover:before{left:100%}.reset-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #f59e0b66}.reset-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){.short-url-actions{flex-wrap:wrap;gap:8px}.toggle-btn,.reset-btn{padding:10px}}@media (max-width: 480px){.url-meta{flex-direction:column;align-items:flex-start;gap:8px;padding-left:12px}.disabled-warning{font-size:.8125rem;padding:10px 12px}.short-url-actions{justify-content:space-between;padding:12px;gap:8px}.toggle-btn,.reset-btn,.short-url-actions .qr-btn{padding:8px;min-width:36px;height:36px}}.qr-code-container{display:flex;align-items:center;justify-content:center;position:relative}.qr-canvas-small{border-radius:12px;box-shadow:0 4px 15px #0000001a}.qr-loading-small{display:flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:12px;color:#6b7280;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.qr-error-small{display:flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:12px;color:#dc2626;background:#fef2f2;border-radius:12px;border:1px solid #fecaca}.qr-modal-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#667eeacc,#764ba2cc);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .4s ease-out}.qr-modal{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:24px;padding:0;max-width:450px;width:95%;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;animation:modalSlideIn .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.2);position:relative}.qr-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#f5576c);border-radius:24px 24px 0 0}.qr-modal-header{display:flex;align-items:center;justify-content:space-between;padding:28px 32px 24px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#f8fafc,#f1f5f9);position:relative}.qr-modal-header h3{margin:0;font-size:24px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:12px}.qr-modal-header h3:before{content:"";width:32px;height:32px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:8px;display:flex;align-items:center;justify-content:center;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='5' height='5'/%3E%3Crect x='3' y='16' width='5' height='5'/%3E%3Crect x='16' y='3' width='5' height='5'/%3E%3Crect x='11' y='11' width='2' height='2'/%3E%3C/svg%3E") no-repeat center;-webkit-mask-size:18px 18px;mask-size:18px 18px}.close-btn{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:1px solid #e2e8f0;cursor:pointer;padding:8px;border-radius:12px;color:#6b7280;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:linear-gradient(135deg,#e2e8f0,#d1d5db);color:#374151;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.qr-modal-content{padding:32px}.qr-canvas-container{display:flex;align-items:center;justify-content:center;margin-bottom:28px;min-height:240px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;border:2px solid #e2e8f0;position:relative;overflow:hidden}.qr-canvas-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.05) 0%,transparent 70%);pointer-events:none}.qr-canvas{border-radius:16px;box-shadow:0 8px 32px #0000001f;position:relative;z-index:1;background:#fff;padding:8px}.qr-loading{display:flex;align-items:center;justify-content:center;width:240px;height:240px;font-size:16px;color:#667eea;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;border:2px dashed #c7d2fe;font-weight:500}.qr-error{display:flex;align-items:center;justify-content:center;width:240px;height:240px;font-size:16px;color:#dc2626;background:#fef2f2;border-radius:16px;border:2px dashed #fecaca;text-align:center;padding:20px;font-weight:500}.qr-url-display{margin-bottom:32px;text-align:center;padding:20px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:16px;border:1px solid #e2e8f0}.qr-url-display p{margin:0;font-size:16px;color:#64748b;word-break:break-all;line-height:1.5}.qr-url-display strong{color:#1e293b;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.qr-actions{display:flex;justify-content:center;gap:12px}.download-btn{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #667eea4d;position:relative;overflow:hidden}.download-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.download-btn:hover:before{left:100%}.download-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.download-btn:active{transform:translateY(-1px)}.qr-btn{display:flex;align-items:center;justify-content:center;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;padding:8px;cursor:pointer;transition:all .2s;color:#6b7280;min-width:36px;height:36px}.qr-btn:hover{background:#e5e7eb;color:#374151;transform:translateY(-1px)}.qr-btn:active{transform:translateY(0)}.qr-btn svg{width:18px;height:18px}@keyframes fadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-40px) scale(.9);filter:blur(10px)}50%{opacity:.5;transform:translateY(-20px) scale(.95);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0px)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pulseGlow{0%,to{box-shadow:0 4px 15px #667eea4d}50%{box-shadow:0 8px 25px #667eea80}}@media (max-width: 768px){.qr-modal{margin:24px;width:calc(100% - 48px)}.qr-modal-header{padding:24px 24px 20px}.qr-modal-header h3{font-size:20px}.qr-modal-content{padding:24px}.qr-canvas-container{min-height:200px}.qr-loading,.qr-error{width:200px;height:200px}.qr-url-display{margin-bottom:24px;padding:16px}.qr-url-display p{font-size:14px}.download-btn{padding:14px 20px;font-size:14px}}@media (max-width: 480px){.qr-modal{margin:20px;width:calc(100% - 40px)}.qr-modal-header{padding:20px 20px 16px}.qr-modal-header h3{font-size:18px}.qr-modal-content{padding:20px}.qr-canvas-container{min-height:180px}.qr-loading,.qr-error{width:180px;height:180px;font-size:14px}.qr-url-display{margin-bottom:20px;padding:14px}.qr-url-display p{font-size:13px}.download-btn{padding:12px 18px;font-size:14px}}@media (prefers-color-scheme: dark){.qr-modal{background:linear-gradient(135deg,#1f2937,#111827);color:#f9fafb;border-color:#ffffff1a}.qr-modal-header{background:linear-gradient(135deg,#111827,#0f172a);border-bottom-color:#374151}.qr-modal-header h3{background:linear-gradient(135deg,#8b5cf6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:linear-gradient(135deg,#374151,#4b5563);border-color:#4b5563;color:#9ca3af}.close-btn:hover{background:linear-gradient(135deg,#4b5563,#6b7280);color:#f3f4f6}.qr-canvas-container{background:linear-gradient(135deg,#111827,#0f172a);border-color:#374151}.qr-loading{background:linear-gradient(135deg,#111827,#0f172a);border-color:#374151;color:#9ca3af}.qr-url-display{background:linear-gradient(135deg,#111827,#0f172a);border-color:#374151}.qr-url-display p{color:#9ca3af}.qr-url-display strong{background:linear-gradient(135deg,#8b5cf6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}}