:root{--glass-blur: 20px;--glass-saturate: 1.7;--radius-sm: 12px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--transition-smooth: cubic-bezier(.4, 0, .2, 1)}:root,[data-theme=light]{--bg-primary: #f2f2f7;--bg-gradient: radial-gradient(ellipse 80% 60% at 50% 0%, #dbeafe 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, #fdf2f8 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 0% 90%, #f0fdf4 0%, transparent 50%);--glass-bg: rgba(255, 255, 255, .55);--glass-bg-hover: rgba(255, 255, 255, .72);--glass-bg-pressed: rgba(255, 255, 255, .85);--glass-border: rgba(255, 255, 255, .6);--glass-border-strong: rgba(255, 255, 255, .8);--glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .3) 40%, transparent 60% );--glass-card-edge: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .7) 80%, transparent 100% );--glass-top-line: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .8) 20%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .8) 80%, transparent 100% );--text-primary: #1d1d1f;--text-secondary: rgba(0, 0, 0, .55);--text-tertiary: rgba(0, 0, 0, .35);--accent: #007AFF;--accent-glow: rgba(0, 122, 255, .25);--accent-hover: #0056CC;--danger: #FF3B30;--danger-glass: rgba(255, 59, 48, .1);--danger-hover: rgba(255, 59, 48, .25);--input-bg: rgba(0, 0, 0, .04);--input-border: rgba(0, 0, 0, .08);--input-focus-border: var(--accent);--input-focus-glow: var(--accent-glow);--overlay-bg: rgba(0, 0, 0, .35);--card-shadow: 0 4px 24px rgba(0, 0, 0, .08), 0 0 0 1px rgba(255,255,255,.5) inset;--card-shadow-hover: 0 8px 32px rgba(0, 0, 0, .12), 0 0 0 1px rgba(255,255,255,.6) inset;--mesh-glass: rgba(255, 255, 255, .12);--mesh-border: rgba(255, 255, 255, .2);--card-bg: rgba(255, 255, 255, .55);--card-border: rgba(255, 255, 255, .5);--btn-glass: rgba(0, 0, 0, .04);--btn-glass-hover: rgba(0, 0, 0, .08);--btn-glass-border: rgba(0, 0, 0, .08);--toggle-bg: rgba(0, 0, 0, .06);--toggle-border: rgba(0, 0, 0, .1);--empty-state-bg: rgba(255, 255, 255, .4);--login-card-bg: rgba(255, 255, 255, .65);--modal-card-bg: rgba(255, 255, 255, .7)}[data-theme=dark]{--bg-primary: #000000;--bg-gradient: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 30, 40, .6) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(30, 20, 35, .4) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 0% 90%, rgba(20, 30, 35, .4) 0%, transparent 50%);--glass-bg: rgba(255, 255, 255, .08);--glass-bg-hover: rgba(255, 255, 255, .12);--glass-bg-pressed: rgba(255, 255, 255, .18);--glass-border: rgba(255, 255, 255, .12);--glass-border-strong: rgba(255, 255, 255, .2);--glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 40%, transparent 60% );--glass-card-edge: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .1) 80%, transparent 100% );--glass-top-line: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .15) 80%, transparent 100% );--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .55);--text-tertiary: rgba(255, 255, 255, .35);--accent: #0A84FF;--accent-glow: rgba(10, 132, 255, .35);--accent-hover: #409CFF;--danger: #FF453A;--danger-glass: rgba(255, 69, 58, .15);--danger-hover: rgba(255, 69, 58, .3);--input-bg: rgba(120, 120, 128, .16);--input-border: rgba(255, 255, 255, .1);--input-focus-border: var(--accent);--input-focus-glow: var(--accent-glow);--overlay-bg: rgba(0, 0, 0, .6);--card-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255,255,255,.06) inset;--card-shadow-hover: 0 12px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255,255,255,.1) inset;--mesh-glass: rgba(255, 255, 255, .03);--mesh-border: rgba(255, 255, 255, .06);--card-bg: rgba(255, 255, 255, .08);--card-border: rgba(255, 255, 255, .08);--btn-glass: rgba(120, 120, 128, .16);--btn-glass-hover: rgba(120, 120, 128, .24);--btn-glass-border: rgba(255, 255, 255, .1);--toggle-bg: rgba(255, 255, 255, .08);--toggle-border: rgba(255, 255, 255, .15);--empty-state-bg: rgba(255, 255, 255, .06);--login-card-bg: rgba(255, 255, 255, .08);--modal-card-bg: rgba(255, 255, 255, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{overscroll-behavior:none;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;background:var(--bg-primary)}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden;transition:background .4s ease,color .4s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.hidden{display:none!important}.bg-mesh{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-mesh:before{content:"";position:absolute;width:120vmax;height:120vmax;top:-10vmax;left:-10vmax;background:var(--bg-gradient);transition:background .6s ease}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);position:relative;overflow:hidden;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}.glass-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--glass-highlight);pointer-events:none;z-index:1}.glass-panel:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--glass-top-line);z-index:2}.glass-btn{background:var(--btn-glass);border:1px solid var(--btn-glass-border);border-radius:var(--radius-full);padding:.55rem 1.2rem;color:var(--text-primary);font-size:.85rem;font-weight:500;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s var(--transition-smooth);white-space:nowrap;position:relative;overflow:hidden}.glass-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none}.glass-btn:hover{background:var(--btn-glass-hover)}.glass-btn:active{transform:scale(.97)}.glass-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.glass-btn.primary{background:var(--accent);border-color:transparent;font-weight:600;color:#fff}.glass-btn.primary:hover{box-shadow:0 2px 16px var(--accent-glow);background:var(--accent-hover);transform:translateY(-1px)}.glass-btn.danger{background:var(--danger-glass);border-color:#ff3b3033;color:var(--danger)}.glass-btn.danger:hover{background:var(--danger-hover);border-color:transparent;color:#fff}.glass-input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:.75rem 1rem;color:var(--text-primary);font-size:.95rem;font-family:inherit;width:100%;outline:none;transition:all .25s ease}.glass-input::placeholder{color:var(--text-tertiary)}.glass-input:focus{background:var(--glass-bg-hover);border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-glow)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes spinFast{to{transform:rotate(360deg)}}.animate-in{animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both}.animate-scale{animation:scaleIn .4s cubic-bezier(.16,1,.3,1) both}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;position:relative;z-index:1;padding:2rem;gap:1.5rem}.login-card{width:100%;max-width:420px;padding:3rem 2.5rem;text-align:center;animation:scaleIn .5s cubic-bezier(.16,1,.3,1);background:var(--login-card-bg)}.login-card .logo-favicon{width:56px;height:56px;margin:0 auto 1.5rem}.login-card h1{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.5rem}.login-form{display:flex;flex-direction:column;gap:1rem;text-align:left}.login-form .subtitle{font-size:.95rem;color:var(--text-secondary);margin-bottom:2.5rem;line-height:1.5}.login-form .label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:.35rem}.login-form .input-group{display:flex;flex-direction:column;gap:.35rem}.login-form .password-field{position:relative}.login-form .password-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:.25rem;display:flex;align-items:center;transition:color .2s;z-index:2}.login-form .password-toggle:hover{color:var(--text-secondary)}.login-btn{width:100%;padding:.85rem;border-radius:var(--radius-md);border:none;background:var(--accent);color:#fff;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s var(--transition-smooth);margin-top:.5rem;position:relative;overflow:hidden}.login-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}.login-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow)}.login-btn:active:not(:disabled){transform:scale(.98)}.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-error{color:var(--danger);font-size:.85rem;text-align:center;margin-top:.5rem;min-height:20px}.app-layout{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 2rem 6rem;min-height:100vh;min-height:100dvh;gap:1.25rem}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;max-width:1200px}.top-bar-controls{display:flex;align-items:center;gap:.75rem;flex-shrink:0;margin-left:1rem}.logo-lockup{display:flex;align-items:center;gap:.6rem}.logo-text h1{font-size:1.1rem;font-weight:700;letter-spacing:-.03em;line-height:1.2}.logo-text .tagline{font-size:.72rem;color:var(--text-tertiary);font-weight:400}.theme-toggle-wrapper{display:flex;align-items:center;gap:.5rem}.theme-toggle-label{font-size:.8rem;color:var(--text-secondary);font-weight:500;-webkit-user-select:none;user-select:none}.theme-toggle{width:48px;height:28px;border-radius:var(--radius-full);background:var(--toggle-bg);border:1px solid var(--toggle-border);cursor:pointer;position:relative;transition:background .3s ease,border-color .3s ease;display:flex;align-items:center;padding:3px}.theme-toggle .toggle-thumb{width:22px;height:22px;border-radius:50%;background:var(--text-primary);transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s ease;box-shadow:0 1px 4px #0003;display:flex;align-items:center;justify-content:center}[data-theme=dark] .theme-toggle .toggle-thumb{transform:translate(20px)}.sun-icon{color:#fff}.logout-glass{font-size:.82rem;color:var(--danger)}.logout-glass:hover{background:var(--danger-glass);border-color:#ff3b3040}.hero{text-align:center;max-width:600px;padding:1rem 0 0;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both;animation-delay:.05s}.hero h2{font-size:2rem;font-weight:700;letter-spacing:-.04em;margin-bottom:.4rem;line-height:1.2}.hero p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.add-form-panel{width:100%;max-width:600px;padding:1.5rem;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both;animation-delay:.12s}.add-form-panel form{display:flex;flex-direction:column;gap:.75rem}.add-row{display:flex;gap:.75rem}.add-row .input-group:first-child{flex:1.2}.add-row .input-group:last-child{flex:2}.add-submit-wrapper{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.2rem}.form-status{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-height:24px}.form-status .error-text{color:var(--danger);font-size:.85rem}.controls-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;width:100%;max-width:1200px;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both;animation-delay:.22s}.search-wrapper{flex:1;min-width:200px;max-width:380px;position:relative}.search-icon-pos{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none;z-index:2}.search-input{border-radius:var(--radius-full);padding:.6rem 1rem .6rem 2.75rem}.view-toggles{display:flex;gap:4px;background:#7878801a;border-radius:var(--radius-full);padding:3px 4px}.view-toggles button{padding:.4rem .8rem;border-radius:var(--radius-full);font-size:.8rem}.view-toggles button.active{background:var(--accent);border-color:transparent;color:#fff}.view-toggles button.active:hover{background:var(--accent-hover)}.filter-tabs{display:flex;gap:6px;flex-wrap:wrap;width:100%;max-width:1200px;animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both;animation-delay:.28s}.filter-tab{font-size:.82rem;padding:.45rem 1rem;color:var(--text-secondary)}.filter-tab .count{background:#78788026;padding:2px 7px;border-radius:var(--radius-full);font-size:.72rem;font-weight:600;margin-left:5px}.filter-tab.active{background:var(--accent);border-color:transparent;color:#fff}.filter-tab.active .count{background:#fff3}.websites-section{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:.75rem}.websites-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.website-card{position:relative;border-radius:var(--radius-md);overflow:hidden;transition:all .3s var(--transition-smooth);animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) both;background:var(--card-bg);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--card-border)}.website-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;z-index:1}.website-card:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--glass-card-edge);z-index:2}.website-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--card-shadow-hover)}.card-link-area{display:flex;flex-direction:column;text-decoration:none;color:inherit}.card-preview{width:100%;height:140px;background-size:cover;background-position:top center;background-repeat:no-repeat;background-color:var(--input-bg);position:relative}.card-preview:after{content:"";position:absolute;bottom:0;left:0;right:0;height:45px;background:linear-gradient(to top,var(--card-bg),transparent)}.card-info{padding:.75rem 1rem 2.5rem;display:flex;flex-direction:column;gap:.15rem;position:relative}.card-title{font-size:.95rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-url{font-size:.75rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-delete{position:absolute;bottom:8px;right:8px;width:30px;height:30px;border-radius:var(--radius-full);background:#7878801f;border:1px solid rgba(120,120,128,.15);color:var(--danger);opacity:0;transform:scale(.8);transition:all .2s ease;z-index:5;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.website-card:hover .card-delete{opacity:1;transform:scale(1)}.card-delete:hover{background:var(--danger-hover)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 2px 12px #ff3b304d}.list-view .websites-grid{grid-template-columns:1fr}.list-view .website-card{display:flex!important;flex-direction:row!important;height:82px}.list-view .card-link-area{flex-direction:row;align-items:center}.list-view .card-preview{width:130px;height:100%;background-position:center;flex-shrink:0}.list-view .card-preview:after{display:none}.list-view .card-info{padding:.6rem 1rem;justify-content:center;flex:1}.list-view .card-delete{opacity:1;transform:translateY(50%);bottom:50%;right:12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:var(--text-tertiary)}.empty-state .empty-icon{margin-bottom:1rem;opacity:.4}.empty-state h3{font-size:1.05rem;font-weight:600;color:var(--text-secondary);margin-bottom:.35rem}.empty-state p{font-size:.88rem;max-width:300px;line-height:1.5}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4000;background:var(--overlay-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:2rem;animation:overlayIn .2s ease}.modal-card{width:100%;max-width:380px;padding:2rem;text-align:center;animation:modalIn .3s cubic-bezier(.16,1,.3,1);background:var(--modal-card-bg)}.modal-icon-box{width:48px;height:48px;margin:0 auto 1rem;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.modal-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;letter-spacing:-.02em}.modal-card p{color:var(--text-secondary);font-size:.88rem;line-height:1.5;margin-bottom:1.5rem}.modal-actions{display:flex;gap:.75rem;justify-content:center}.modal-actions .glass-btn{flex:1;max-width:130px}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spinFast .7s linear infinite}.loader-light{width:18px;height:18px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--text-primary);border-radius:50%;animation:spinFast .7s linear infinite}.loading-screen{display:flex;justify-content:center;align-items:center;min-height:100dvh;position:relative;z-index:1}@media (max-width: 768px){body{padding:0}.app-layout{padding:1rem 1rem 7rem;gap:1rem}.top-bar{padding:0;flex-wrap:wrap}.top-bar-controls{gap:.5rem;margin-left:auto}.theme-toggle-label{display:none}.logo-text h1{font-size:1rem}.logo-text .tagline{display:none}.hero h2{font-size:1.5rem}.hero p{font-size:.88rem}.add-row,.add-submit-wrapper{flex-direction:column}.add-submit-wrapper .glass-btn.primary{width:100%}.controls-bar{flex-direction:column;align-items:stretch}.search-wrapper{max-width:none}.view-toggles{align-self:flex-end}.filter-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem}.filter-tab{flex-shrink:0}.websites-grid{grid-template-columns:1fr}.logout-glass{padding:.5rem .9rem;font-size:.78rem}.modal-overlay{padding:1rem}.modal-card{padding:1.5rem}.card-delete{opacity:1;transform:scale(1)}}@media (max-width: 420px){.app-layout{padding:.75rem .75rem 6rem}.login-card{padding:2rem 1.5rem}.login-card h1{font-size:1.5rem}.add-form-panel{padding:1.25rem}.hero h2{font-size:1.3rem}}