@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap";:root{--primary:#fdbcb4;--primary-dark:#f5a69d;--secondary:#add8e6;--secondary-dark:#8bc4d6;--cta:#22c55e;--cta-dark:#16a34a;--accent-purple:#e6e6fa;--accent-mint:#98ff98;--accent-lavender:#e6e6fa;--accent-yellow:#fff3a0;--accent-peach:#ffd6c0;--bg:#fff;--bg-cream:#fff9f5;--bg-blob-1:#98ff98;--bg-blob-2:#e6e6fa;--bg-blob-3:#fdbcb4;--text:#2d3748;--text-muted:#64748b;--border:#e2e8f0;--shadow-color:45, 55, 72;--transition:.15s;--transition-slow:.3s;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}input,textarea{-webkit-user-select:text;user-select:text}html{overflow:-moz-scrollbars-none;scrollbar-width:none}html::-webkit-scrollbar{display:none}html,body,#root{background:var(--bg-cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;width:100%;min-height:100vh;color:var(--text);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;font-family:Nunito,sans-serif;line-height:1.6}h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;font-family:Fredoka,sans-serif;font-weight:600;line-height:1.2}h1{letter-spacing:-.025em}a{color:var(--cta);text-decoration:none}a:hover{color:var(--cta-dark)}input,button,textarea,select{font-family:inherit}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}:where(button,a):not(:disabled):active{transition-duration:50ms}button:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.7)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (hover:none){.clay-card:hover,.hero-card:hover,.hero-feature:hover,.meta-tag:hover,.stat-item:hover,.history-item:hover,.btn-download:hover,.btn-primary:hover,.btn-analyze:hover,.btn-logout-header:hover,.btn-cancel:hover,.btn-modal-close:hover,.btn-edit:hover,.btn-change-password:hover,.btn-save:hover,.btn-back-home:hover,.btn-logout:hover,.btn-view:hover,.btn-delete:hover,.btn-page:hover,.btn-clear:hover,.btn-link:hover,.modal-close:hover,.form-group input:hover,.card-form .url-textarea:hover,.card-form .btn-analyze:hover,.password-toggle:hover,.logo-link:hover .logo-icon,.user-info:hover,.btn-logout-header:hover,.result-header-note:hover,.how-step:hover{transform:none!important}}@keyframes float{0%,to{transform:translate(0)rotate(0)}33%{transform:translate(10px,-15px)rotate(5deg)}66%{transform:translate(-8px,12px)rotate(-3deg)}}@keyframes float-slow{0%,to{transform:translate(0)scale(1)}50%{transform:translateY(-20px)scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loading-spinner{border:4px solid var(--text);border-top-color:var(--cta);border-radius:50%;width:48px;height:48px;margin:100px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{border:3px solid var(--text);color:#991b1b;max-width:600px;box-shadow:4px 4px 0 var(--text);text-align:center;background:#fee2e2;border-radius:12px;justify-content:center;align-items:center;gap:10px;margin:20px auto;padding:14px 18px;font-weight:600;animation:.4s ease-out shake;display:flex}.btn-primary{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700;transition:all .15s}.btn-primary:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.login-page{min-height:100vh;display:flex}.login-left{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:var(--text);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:hidden}.login-brand{text-align:center;z-index:1;margin-bottom:60px}.brand-icon{background:var(--bg);border:3px solid var(--text);width:80px;height:80px;color:var(--text);box-shadow:6px 6px 0 var(--text);border-radius:24px;justify-content:center;align-items:center;margin:0 auto 16px;display:flex}.brand-icon svg{width:40px;height:40px}.brand-logo{letter-spacing:-.025em;color:var(--text);margin-bottom:8px;font-size:48px;font-weight:700}.brand-tagline{color:var(--text);opacity:.85;font-size:18px;font-weight:600}.login-features{z-index:1;flex-direction:column;gap:20px;display:flex}.feature-item{background:var(--bg);border:3px solid var(--text);box-shadow:4px 4px 0 var(--text);border-radius:16px;align-items:center;gap:16px;padding:16px 24px;font-size:16px;font-weight:600;display:flex}.feature-icon{border:2px solid var(--text);width:40px;height:40px;color:var(--text);box-shadow:2px 2px 0 var(--text);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.feature-icon-blue{background:var(--secondary)}.feature-icon-yellow{background:var(--accent-yellow)}.feature-icon-mint{background:var(--accent-mint)}.feature-item:hover .feature-icon{box-shadow:1px 1px 0 var(--text);transform:translate(1px,1px)}.blob{opacity:.4;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation:12s ease-in-out infinite float;position:absolute}.blob-1{background:var(--accent-mint);width:300px;height:300px;animation-delay:0s;top:-50px;right:-50px}.blob-2{background:var(--accent-purple);width:200px;height:200px;animation-duration:14s;animation-delay:-4s;bottom:50px;left:-30px}.blob-3{background:var(--bg);opacity:.25;width:160px;height:160px;animation-duration:16s;animation-delay:-8s;top:40%;right:20%}.login-right{background:var(--bg-cream);flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.login-card{background:var(--bg);border:3px solid var(--text);width:100%;max-width:420px;box-shadow:8px 8px 0 var(--text);border-radius:24px;padding:40px;animation:.5s ease-out slideUp}.login-title{color:var(--text);margin-bottom:8px;font-size:28px;font-weight:700}.login-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:15px}.login-form{flex-direction:column;gap:20px;display:flex}.form-group label{color:var(--text);font-size:14px;font-weight:600}.form-group input:disabled{cursor:not-allowed;opacity:.7;background:var(--bg-cream)}.password-input{position:relative}.password-input input{width:100%;padding-right:48px}.password-toggle{background:var(--bg-cream);border:2px solid var(--text);width:36px;height:36px;color:var(--text-muted);cursor:pointer;box-shadow:2px 2px 0 var(--text);border-radius:10px;justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.password-toggle:hover{color:var(--text);background:var(--accent-mint);box-shadow:1px 1px 0 var(--text);transform:translateY(-50%)translate(1px,1px)}.password-toggle:active{box-shadow:0 0 0 var(--text);transform:translateY(-50%)translate(2px,2px)}.form-error{border:3px solid var(--text);color:#dc2626;box-shadow:4px 4px 0 var(--text);background:#fee2e2;border-radius:12px;align-items:center;gap:10px;padding:14px 16px;font-size:14px;font-weight:600;animation:.4s ease-out shake;display:flex}.form-error svg{color:#dc2626;flex-shrink:0}.btn-primary{background:var(--cta);color:#fff;border:3px solid var(--text);cursor:pointer;height:52px;box-shadow:4px 4px 0 var(--text);letter-spacing:.01em;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-family:Fredoka,sans-serif;font-size:16px;font-weight:700;transition:all .15s;display:inline-flex}.btn-primary:hover:not(:disabled){box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.btn-primary:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(4px,4px)}.btn-primary:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.7)}.btn-spinner-white{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin;display:inline-block}.login-switch{text-align:center;color:var(--text-muted);margin-top:24px;font-size:14px}.btn-link{color:var(--cta);cursor:pointer;background:0 0;border:none;margin-left:4px;padding:0;font-size:14px;font-weight:700}.btn-link:hover{color:var(--cta-dark)}@media screen and (width<=768px){.login-page{flex-direction:column}.login-left{min-height:auto;padding:32px 24px}.login-brand{margin-bottom:0}.brand-icon{border-radius:20px;width:64px;height:64px}.brand-icon svg{width:32px;height:32px}.brand-logo{font-size:32px}.brand-tagline{font-size:15px}.login-features{display:none}.blob{opacity:.2;animation:none}.blob-1{width:160px;height:160px}.blob-2{width:120px;height:120px}.blob-3{display:none}.login-right{padding:24px 20px 32px}.login-card{max-width:100%;box-shadow:6px 6px 0 var(--text);border-radius:20px;padding:28px 22px}.login-title{font-size:24px}.login-subtitle{margin-bottom:24px;font-size:14px}.form-group input{height:48px;font-size:16px}.btn-primary{height:50px;font-size:15px}}.avatar{object-fit:cover;border:2px solid var(--text);border-radius:50%}.avatar-fallback{background:var(--primary);color:var(--text);justify-content:center;align-items:center;display:flex}.profile-page{min-height:100vh;padding-top:88px}.profile-header{z-index:100;pointer-events:none;padding:0 24px;position:fixed;top:16px;left:0;right:0}.header-inner{background:var(--bg);border:3px solid var(--text);box-shadow:6px 6px 0 var(--text);pointer-events:auto;border-radius:20px;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:14px 24px;transition:box-shadow .2s;display:flex}.logo-link{color:var(--text);flex-shrink:0;align-items:center;gap:10px;text-decoration:none;display:flex}.btn-back-home{background:var(--bg);border:3px solid var(--text);color:var(--text);cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;align-items:center;gap:6px;padding:8px 16px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.btn-back-home:hover{box-shadow:1px 1px 0 var(--text);background:var(--accent-mint);transform:translate(2px,2px)}.btn-back-home:active{box-shadow:0 0 0 var(--text);transform:translate(3px,3px)}.profile-main{flex-direction:column;gap:20px;max-width:680px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(20px,4vw,32px) 48px;display:flex}.profile-card{background:var(--bg);border:3px solid var(--text);box-shadow:10px 10px 0 var(--text);border-radius:28px;margin-bottom:0;animation:.4s ease-out slideUp;overflow:hidden}.profile-card-header{background:linear-gradient(180deg, var(--primary) 0%, var(--bg) 100%);border-bottom:3px solid var(--text);text-align:center;flex-direction:column;align-items:center;gap:18px;padding:clamp(36px,5vw,56px) clamp(24px,4vw,40px) clamp(28px,4vw,40px);display:flex;position:relative}.profile-card-header:before{content:"";background:var(--accent-mint);opacity:.4;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;width:140px;height:140px;animation:10s ease-in-out infinite float-slow;position:absolute;top:-40px;right:-40px}.profile-card-header:after{content:"";background:var(--accent-purple);opacity:.4;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;width:100px;height:100px;animation:12s ease-in-out -5s infinite float-slow;position:absolute;bottom:-30px;left:-30px}.profile-card-header>*{z-index:1;position:relative}.profile-info{flex-direction:column;align-items:center;gap:8px;display:flex}.profile-name{color:var(--text);letter-spacing:-.02em;margin:0;font-size:clamp(22px,3vw,28px);font-weight:700}.profile-email{color:var(--text-muted);margin:0;font-size:clamp(13px,1.4vw,15px);font-weight:600}.admin-badge{background:var(--cta);color:#fff;border:2px solid var(--text);box-shadow:2px 2px 0 var(--text);border-radius:20px;align-items:center;gap:4px;margin-top:4px;padding:6px 14px;font-size:12px;font-weight:700;display:inline-flex}.profile-actions{gap:14px;padding:clamp(20px,3vw,32px);display:flex}.btn-edit,.btn-change-password{border:3px solid var(--text);cursor:pointer;box-shadow:4px 4px 0 var(--text);border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;min-height:56px;padding:16px 24px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:flex}.btn-edit{background:var(--primary);color:var(--text)}.btn-change-password{background:var(--accent-lavender);color:var(--text)}.btn-edit:hover,.btn-change-password:hover{box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.btn-edit:active:not(:disabled),.btn-change-password:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(4px,4px)}.profile-form{flex-direction:column;gap:20px;padding:clamp(20px,3vw,32px);display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text);align-items:center;gap:6px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:700;display:inline-flex}.form-group input{border:3px solid var(--text);background:var(--bg);height:52px;color:var(--text);border-radius:14px;outline:none;padding:0 18px;font-family:inherit;font-size:15px;transition:all .15s}.form-group input::placeholder{color:var(--text-muted)}.form-group input:hover:not(:focus){border-color:var(--primary-dark)}.form-group input:focus{box-shadow:4px 4px 0 var(--primary);background:var(--bg);transform:translate(-2px,-2px)}.divider{background:var(--text);border-radius:2px;height:3px;margin:8px 0}.divider-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:12px;margin:4px 0;font-size:13px;font-weight:700;display:flex}.divider-label:before,.divider-label:after{content:"";background:var(--border);border-radius:2px;flex:1;height:3px}.success-msg{background:var(--accent-mint);border:3px solid var(--text);color:#16a34a;box-shadow:4px 4px 0 var(--text);border-radius:12px;align-items:center;gap:10px;padding:14px 16px;font-size:14px;font-weight:600;animation:.3s ease-out slideUp;display:flex}.success-msg svg{color:#16a34a;flex-shrink:0}.error-msg{border:3px solid var(--text);color:#991b1b;box-shadow:4px 4px 0 var(--text);text-align:left;background:#fee2e2;border-radius:12px;align-items:center;gap:10px;max-width:600px;margin:20px auto;padding:14px 18px;font-weight:600;animation:.4s ease-out shake;display:flex}.error-msg svg{color:#dc2626;flex-shrink:0}.form-actions{gap:12px;display:flex}.btn-cancel{background:var(--bg-cream);border:3px solid var(--text);height:52px;color:var(--text);cursor:pointer;box-shadow:4px 4px 0 var(--text);border-radius:14px;flex:1;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s}.btn-save{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;height:52px;box-shadow:4px 4px 0 var(--text);border-radius:14px;flex:1;justify-content:center;align-items:center;gap:8px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:inline-flex}.btn-save:hover{box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.btn-save:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(4px,4px)}.btn-save:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.7)}.danger-zone{justify-content:center;padding:8px 0;animation:.4s ease-out .1s both slideUp;display:flex}.btn-logout{border:3px solid var(--text);color:#dc2626;cursor:pointer;box-shadow:5px 5px 0 var(--text);background:#fee2e2;border-radius:16px;justify-content:center;align-items:center;gap:8px;min-width:200px;min-height:56px;padding:16px 36px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:flex}.btn-logout:hover{box-shadow:2px 2px 0 var(--text);background:#fecaca;transform:translate(3px,3px)}.btn-logout:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(5px,5px)}@media screen and (width>=769px) and (width<=1023px){.profile-main{max-width:560px}.profile-card{box-shadow:8px 8px 0 var(--text)}}@media screen and (width<=768px){.profile-page{padding-top:80px}.profile-header{padding:0 12px;top:12px}.header-inner{flex-wrap:nowrap;gap:8px;padding:10px 14px}.nav-links{display:none}.btn-back-home{padding:6px 12px;font-size:13px}.logo-icon{width:36px;height:36px}.logo-icon svg{width:20px;height:20px}.logo-text{font-size:18px}.profile-main{margin:0 auto;padding:12px 16px 32px}.profile-card{box-shadow:6px 6px 0 var(--text);border-radius:22px}.profile-card-header{padding:28px 20px 22px}.profile-card-header:before,.profile-card-header:after{opacity:.3;animation:none}.profile-name{font-size:20px}.profile-email{font-size:13px}.profile-actions{flex-direction:column;gap:12px;padding:18px}.btn-edit,.btn-change-password{height:48px;padding:14px 20px;font-size:14px}.form-actions{flex-direction:column-reverse;gap:10px}.btn-cancel,.btn-save{width:100%;height:48px}.form-group input{height:48px;font-size:16px}.btn-logout{width:100%;max-width:320px;height:48px}}.layout-page{min-height:100vh}.layout-header{z-index:100;pointer-events:none;padding:0 24px;position:fixed;top:16px;left:0;right:0}.header-inner{background:var(--bg);border:3px solid var(--text);box-shadow:6px 6px 0 var(--text);pointer-events:auto;border-radius:20px;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:14px 24px;transition:box-shadow .2s,transform .2s;display:flex;position:relative}.header-inner:hover{box-shadow:8px 8px 0 var(--text)}.logo-link{flex-shrink:0;align-items:center;gap:10px;text-decoration:none;display:flex}.logo-icon{background:var(--primary);border:3px solid var(--text);width:40px;height:40px;box-shadow:3px 3px 0 var(--text);color:var(--text);border-radius:12px;justify-content:center;align-items:center;font-size:20px;transition:all .15s;display:flex}.logo-icon svg{width:22px;height:22px}.logo-link:hover .logo-icon{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.logo-text{color:var(--text);letter-spacing:-.01em;font-family:Fredoka,sans-serif;font-size:20px;font-weight:700}.nav-links{background:var(--bg-cream);border:3px solid var(--text);box-shadow:3px 3px 0 var(--text);border-radius:999px;gap:4px;padding:4px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.nav-links a{color:var(--text-muted);white-space:nowrap;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700;text-decoration:none;transition:all .15s}.nav-links a:hover{color:var(--text);background:var(--bg)}.nav-links a.active{color:var(--text);background:var(--accent-mint);box-shadow:inset 0 -2px 0 var(--text)}.header-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.user-info{border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 6px;text-decoration:none;transition:all .15s;display:flex}.user-info:hover{border-color:var(--text);background:var(--bg-cream);box-shadow:2px 2px 0 var(--text);transform:translate(-1px,-1px)}.user-info:active{box-shadow:0 0 0 var(--text);transform:translate(1px,1px)}.user-email{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:140px;font-size:14px;font-weight:600;overflow:hidden}.btn-logout-header{background:var(--bg);border:3px solid var(--text);width:40px;height:40px;color:var(--text);cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.btn-logout-header:hover{color:#dc2626;box-shadow:1px 1px 0 var(--text);background:#fee2e2;transform:translate(2px,2px)}.btn-logout-header:active{box-shadow:0 0 0 var(--text);transform:translate(3px,3px)}.avatar{border:2px solid var(--text);background:var(--bg-cream);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%;transition:opacity .2s;display:block}.avatar-fallback{background:var(--accent-purple)}.avatar svg{color:var(--text-muted);width:60%;height:60%}@media screen and (width<=768px){.layout-header{padding:0 12px;top:12px}.header-inner{gap:10px;padding:10px 14px}.nav-links,.user-email{display:none}.user-info{box-shadow:none;background:0 0;border:none;padding:0}.user-info:hover{box-shadow:none;background:0 0;border:none;transform:none}.btn-logout-header{width:44px;height:44px}.logo-text{font-size:18px}.logo-icon{width:36px;height:36px}.logo-icon svg{width:20px;height:20px}}.btn-menu-toggle{background:var(--bg);border:3px solid var(--text);width:40px;height:40px;color:var(--text);cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:none}.btn-menu-toggle:hover{background:var(--accent-mint);box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-menu-toggle:active{box-shadow:0 0 0 var(--text);transform:translate(3px,3px)}.mobile-menu-overlay{z-index:99;-webkit-backdrop-filter:blur();backdrop-filter:blur();pointer-events:none;background:#2d374800;transition:background .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s;position:fixed;inset:0}.mobile-menu-overlay.open{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;background:#2d374873}.mobile-menu{background:var(--bg);border:3px solid var(--text);max-width:380px;box-shadow:6px 6px 0 var(--text);z-index:100;opacity:0;pointer-events:none;border-radius:24px;margin:0 auto;padding:20px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s;position:fixed;top:76px;left:12px;right:12px;transform:translateY(-12px)scale(.96)}.mobile-menu-overlay.open .mobile-menu{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.mobile-menu-header{background:var(--bg-cream);border:3px solid var(--text);box-shadow:3px 3px 0 var(--text);border-radius:16px;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;display:flex}.mobile-menu-user{flex-direction:column;min-width:0;display:flex}.mobile-menu-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;overflow:hidden}.mobile-menu-email{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.mobile-menu-nav{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.mobile-menu-item{background:var(--bg-cream);border:3px solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--text);border-radius:14px;align-items:center;gap:14px;min-height:52px;padding:14px 16px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;text-decoration:none;transition:all .15s;display:flex}.mobile-menu-item:hover,.mobile-menu-item:focus-visible{background:var(--accent-mint);box-shadow:1px 1px 0 var(--text);color:var(--text);transform:translate(2px,2px)}.mobile-menu-item.active{background:var(--accent-mint);box-shadow:inset 0 -3px 0 var(--text)}.mobile-menu-icon{background:var(--bg);border:2px solid var(--text);width:32px;height:32px;color:var(--text);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mobile-menu-footer{border-top:3px dashed var(--border);padding-top:12px}.mobile-menu-logout{border:3px solid var(--text);color:#dc2626;cursor:pointer;width:100%;box-shadow:3px 3px 0 var(--text);background:#fee2e2;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:52px;padding:14px 20px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:flex}.mobile-menu-logout:hover{box-shadow:1px 1px 0 var(--text);background:#fecaca;transform:translate(2px,2px)}.mobile-menu-logout:active{box-shadow:0 0 0 var(--text);transform:translate(3px,3px)}@media screen and (width<=768px){.btn-menu-toggle{display:inline-flex}.nav-links,.user-info,.btn-logout-header{display:none}}@media screen and (width>=769px){.btn-menu-toggle{display:none!important}}.error-boundary{justify-content:center;align-items:center;min-height:400px;padding:20px;display:flex}.error-boundary-card{background:var(--bg);border:3px solid var(--text);text-align:center;max-width:400px;box-shadow:6px 6px 0 var(--text);border-radius:16px;padding:40px}.error-icon{color:#ef4444;margin-bottom:16px}.error-boundary-card h2{margin-bottom:8px;font-size:20px;font-weight:700}.error-message{color:var(--text-muted);margin-bottom:20px;font-size:14px}.btn-retry{background:var(--cta);border:3px solid var(--text);cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;transition:all .15s;display:inline-flex}.btn-retry:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.home-page{min-height:100vh;padding-top:88px}.home-main{max-width:1280px;margin:0 auto;padding:24px 32px 48px}.hero-section{align-items:center;gap:96px;margin-bottom:64px;padding:48px 0;animation:.5s ease-out slideUp;display:flex;position:relative}.hero-left{flex-direction:column;flex:1.1;gap:24px;min-width:0;display:flex}.hero-badge{background:var(--accent-mint);border:3px solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--text);cursor:default;border-radius:24px;align-items:center;gap:8px;margin-bottom:16px;padding:8px 18px;font-size:14px;font-weight:900;transition:all .15s;display:inline-flex}.hero-badge:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.badge-dot{background:var(--cta);border-radius:50%;width:8px;height:8px}.hero-title{color:var(--text);letter-spacing:-.035em;align-items:baseline;gap:4px;margin-bottom:8px;font-size:clamp(48px,7vw,88px);font-weight:700;line-height:1.05;display:flex}.hero-highlight{color:var(--cta);text-shadow:4px 4px 0 var(--text);padding:0 4px;display:inline-block;position:relative}.hero-highlight:before{content:"";background:var(--accent-mint);border:2px solid var(--text);z-index:-1;border-radius:4px;height:14px;position:absolute;bottom:6px;left:-2px;right:-2px;transform:rotate(-1.5deg)}.hero-desc{color:var(--text-muted);max-width:540px;margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.6}.hero-buttons{gap:16px;display:flex}.btn-hero-primary{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;box-shadow:4px 4px 0 var(--text);border-radius:16px;align-items:center;gap:8px;padding:16px 28px;font-size:16px;font-weight:700;transition:all .15s;display:inline-flex}.btn-hero-primary:hover{box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.btn-hero-secondary{background:var(--secondary);border:3px solid var(--text);color:var(--text);cursor:pointer;box-shadow:4px 4px 0 var(--text);border-radius:16px;padding:16px 28px;font-size:16px;font-weight:700;transition:all .15s}.btn-hero-secondary:hover{box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.arrow{font-size:18px}.hero-right{flex:1;justify-content:center;align-items:center;min-width:0;min-height:520px;display:flex;position:relative}.hero-blob{z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation:8s ease-in-out infinite float-slow;position:absolute}.hero-blob-1{background:var(--accent-mint);opacity:.5;width:180px;height:180px;animation-delay:0s;top:0;left:0}.hero-blob-2{background:var(--accent-purple);opacity:.6;width:140px;height:140px;animation-duration:10s;animation-delay:-4s;bottom:20px;right:0}.hero-blob-3{background:var(--accent-yellow);opacity:.7;width:90px;height:90px;animation-duration:12s;animation-delay:-7s;top:50%;right:5%}.hero-floating-card{background:var(--bg);border:3px solid var(--text);box-shadow:4px 4px 0 var(--text);z-index:2;border-radius:16px;align-items:center;gap:10px;padding:12px 16px;font-family:Fredoka,sans-serif;font-size:13px;font-weight:700;animation:6s ease-in-out infinite float-slow;display:flex;position:absolute}.hero-floating-card-1{background:var(--accent-mint);animation-delay:0s;top:8%;right:-8px}.hero-floating-card-2{background:var(--accent-yellow);animation-delay:-3s;bottom:10%;left:-16px}.hero-floating-icon{background:var(--bg);border:2px solid var(--text);width:28px;height:28px;color:var(--text);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.hero-floating-icon svg{width:16px;height:16px}.hero-features{flex-wrap:wrap;gap:12px;margin-top:4px;display:flex}.hero-feature{background:var(--bg);border:3px solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--text);border-radius:999px;align-items:center;gap:8px;padding:8px 16px 8px 8px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:inline-flex}.hero-feature:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.hero-feature-icon{border:2px solid var(--text);width:24px;height:24px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;display:flex}.hero-feature-icon-blue{background:var(--secondary)}.hero-feature-icon-mint{background:var(--accent-mint)}.hero-feature-icon-purple{background:var(--accent-purple)}.hero-card{z-index:1;background:var(--bg);border:3px solid var(--text);width:100%;max-width:540px;box-shadow:10px 10px 0 var(--text);border-radius:28px;padding:44px 40px;position:relative}.card-content{flex-direction:column;gap:20px;display:flex}.card-input-group{align-items:center;gap:12px;display:flex}.card-input-icon{background:var(--secondary);border:2px solid var(--text);width:44px;height:44px;color:var(--text);box-shadow:2px 2px 0 var(--text);border-radius:12px;justify-content:center;align-items:center;font-size:16px;display:flex}.card-input-info{flex-direction:column;display:flex}.card-input-title{color:var(--text);font-family:Fredoka,sans-serif;font-size:15px;font-weight:700}.card-input-sub{color:var(--text-muted);font-size:12px}.card-form{flex-direction:column;gap:12px;display:flex}.card-form .url-textarea{border:3px solid var(--text);background:var(--bg-cream);resize:none;scrollbar-width:thin;scrollbar-color:var(--border) transparent;width:100%;height:72px;color:var(--text);word-break:break-all;border-radius:14px;outline:none;padding:12px 16px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:600;line-height:1.5;transition:all .15s;overflow-y:auto}.card-form .url-textarea::-webkit-scrollbar{width:6px}.card-form .url-textarea::-webkit-scrollbar-track{background:0 0}.card-form .url-textarea::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.card-form .url-textarea::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.card-form .url-textarea::placeholder{color:var(--text-muted);font-weight:500}.card-form .url-textarea:hover:not(:focus):not(:disabled){border-color:var(--primary-dark)}.card-form .url-textarea:focus{box-shadow:4px 4px 0 var(--primary);background:var(--bg);transform:translate(-2px,-2px)}.card-form .url-textarea:disabled{cursor:not-allowed;opacity:.7}.btn-analyze{justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}.btn-arrow{transition:transform .15s;display:inline-block}.btn-analyze:hover:not(:disabled) .btn-arrow{transform:translate(3px)}.btn-spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}.card-form .btn-analyze{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;height:50px;box-shadow:4px 4px 0 var(--text);letter-spacing:.01em;border-radius:12px;justify-content:center;align-items:center;gap:8px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;transition:all .15s;display:inline-flex;position:relative}.card-form .btn-analyze:hover:not(:disabled){box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.card-form .btn-analyze:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(4px,4px)}.card-form .btn-analyze:disabled{cursor:not-allowed;opacity:.55;filter:saturate(.7);box-shadow:4px 4px 0 var(--text);transform:none}.result-card{background:var(--bg);border:3px solid var(--text);box-shadow:8px 8px 0 var(--text);border-radius:24px;margin-bottom:24px;animation:.5s cubic-bezier(.34,1.56,.64,1) both resultIn;overflow:hidden}@keyframes resultIn{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.result-header{border-bottom:3px solid var(--text);background:var(--accent-purple);align-items:center;gap:10px;padding:18px 24px;display:flex}.result-header h3{color:var(--text);align-items:center;gap:8px;font-size:18px;font-weight:600;display:inline-flex}.result-header h3:before{content:"";background:var(--cta);border:2px solid var(--text);border-radius:50%;flex-shrink:0;width:10px;height:10px}.result-header-note{background:var(--accent-mint)}.result-header-video{background:var(--accent-purple)}.result-body{padding:24px}.video-left,.video-right{flex-direction:column;display:flex}.download-title{color:var(--text);margin-bottom:12px;font-size:16px;font-weight:600}@media screen and (width>=1024px){.result-body{grid-template-columns:1fr 1fr;gap:24px;display:grid}.video-left{min-width:0}.video-right{border-left:3px solid var(--text);min-width:0;padding-left:24px}.cover-img{max-height:400px}}.video-preview{border:3px solid var(--text);border-radius:16px;margin-bottom:20px;position:relative;overflow:hidden}.cover-img{object-fit:cover;width:100%;max-height:400px;display:block}.play-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--bg);opacity:0;background:#2d374873;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.play-overlay>*{background:var(--cta);border:3px solid var(--bg);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;padding:14px;transition:transform .2s;display:flex;transform:scale(.85);box-shadow:4px 4px #0000004d}.video-preview:hover .play-overlay{opacity:1}.video-preview:hover .play-overlay>*{transform:scale(1)}.video-desc{color:var(--text);border-bottom:3px solid var(--text);margin-bottom:16px;padding-bottom:16px;font-size:16px;line-height:1.6}.video-meta{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.meta-tag{background:var(--accent-mint);border:3px solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--text);cursor:default;border-radius:12px;align-items:center;gap:4px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.meta-tag:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.video-stats{gap:12px;margin-bottom:20px;display:flex}.stat-item{background:var(--primary);border:3px solid var(--text);color:var(--text);box-shadow:3px 3px 0 var(--text);cursor:default;border-radius:12px;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.stat-item:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.stat-item svg{color:var(--cta)}.download-actions{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.btn-download{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;box-shadow:4px 4px 0 var(--text);border-radius:16px;align-items:center;gap:10px;padding:14px 16px;font-size:14px;font-weight:700;transition:all .15s;display:flex}.btn-download:hover{box-shadow:2px 2px 0 var(--text);transform:translate(2px,2px)}.download-info{flex-direction:column;align-items:flex-start;display:flex}.download-quality{font-weight:700}.download-size{opacity:.9;font-size:12px;font-weight:600}.note-images{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px;display:grid}.note-item{border:3px solid var(--text);border-radius:16px;overflow:hidden}.note-img,.note-video{object-fit:cover;width:100%;height:200px;display:block}.live-photo{position:relative}.live-photo .note-img{object-fit:cover;width:100%;height:200px}.live-photo .live-video{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.live-photo:hover .live-video{opacity:1}.live-photo:hover .note-img{opacity:0}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#2d37488c;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg);border:3px solid var(--text);width:100%;max-width:420px;box-shadow:8px 8px 0 var(--text);border-radius:24px;animation:.3s cubic-bezier(.34,1.56,.64,1) modalIn;overflow:hidden}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-header{border-bottom:3px solid var(--text);background:var(--primary);border-radius:21px 21px 0 0;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.modal-header h3{color:var(--text);align-items:center;gap:8px;font-size:18px;font-weight:600;display:inline-flex}.modal-header h3:before{content:"";background:var(--cta);border:2px solid var(--text);border-radius:50%;width:8px;height:8px}.modal-close{background:var(--bg);border:2px solid var(--text);cursor:pointer;width:32px;height:32px;color:var(--text);box-shadow:2px 2px 0 var(--text);border-radius:10px;justify-content:center;align-items:center;transition:all .15s;display:flex}.modal-close:hover{color:#dc2626;box-shadow:1px 1px 0 var(--text);background:#fee2e2;transform:translate(1px,1px)}.modal-close:active{box-shadow:0 0 0 var(--text);transform:translate(2px,2px)}.modal-body{padding:24px}.modal-details{background:var(--bg-cream);border:2px solid var(--text);border-radius:8px;margin-bottom:24px;overflow:hidden}.detail-row{border-bottom:2px solid var(--text);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.detail-row:last-child{border-bottom:none}.detail-label{color:var(--text-muted);font-size:14px;font-weight:600}.detail-value{color:var(--text);font-size:14px;font-weight:700}.modal-progress{margin-bottom:24px}.progress-bar{background:var(--bg-cream);border:2px solid var(--text);border-radius:8px;height:14px;margin-bottom:12px;position:relative;overflow:hidden}.progress-fill{background:var(--cta);border-radius:6px;height:100%;transition:width .3s ease-out;position:relative;overflow:hidden}.progress-fill:not(.done):not(.error):not(.cancelled):after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff59 50%,#0000 100%);animation:1.4s ease-in-out infinite progressShine;position:absolute;inset:0}@keyframes progressShine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-fill.done{background:var(--secondary)}.progress-fill.error{background:#ef4444}.progress-fill.cancelled{background:#94a3b8}.progress-text{color:var(--text);font-size:14px;font-weight:700}.modal-actions{justify-content:flex-end;display:flex}.btn-cancel{border:3px solid var(--text);color:#dc2626;cursor:pointer;box-shadow:3px 3px 0 var(--text);background:#fee2e2;border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700;transition:all .15s}.btn-cancel:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-modal-close{background:var(--cta);border:3px solid var(--text);color:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;padding:12px 24px;font-size:14px;font-weight:700;transition:all .15s}.btn-modal-close:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.live-photo-tip{text-align:center;color:var(--text-muted);margin-bottom:20px;font-size:14px}.live-photo-actions{flex-direction:column;gap:12px;display:flex}@media screen and (width<=768px){.home-page{padding-top:76px}.home-main{padding:20px 16px 32px}.hero-section{flex-direction:column;gap:32px;margin-bottom:32px;padding:8px 0 24px}.hero-left{text-align:left;gap:16px}.hero-badge{padding:6px 14px;font-size:13px}.hero-title{margin-bottom:4px;font-size:44px;line-height:1.05}.hero-highlight{text-shadow:3px 3px 0 var(--text)}.hero-desc{font-size:15px;line-height:1.5}.hero-features{gap:8px}.hero-feature{padding:6px 12px 6px 6px;font-size:13px}.hero-feature-icon{width:22px;height:22px}.hero-right{width:100%;min-height:auto}.hero-floating-card{display:none}.hero-blob-1{width:100px;height:100px;top:-10px;left:-10px}.hero-blob-2{width:80px;height:80px;bottom:-10px;right:0}.hero-blob-3{display:none}.hero-card{max-width:100%;box-shadow:6px 6px 0 var(--text);border-radius:22px;padding:24px 18px}.card-input-group{gap:10px}.card-input-icon{width:40px;height:40px}.card-input-title{font-size:14px}.card-input-sub{font-size:11px}.card-form .url-textarea{border-radius:12px;padding:12px 14px;font-size:14px}.card-form .btn-analyze{height:48px;font-size:14px}.result-card{box-shadow:6px 6px 0 var(--text);border-radius:20px;margin-bottom:16px}.result-header{padding:14px 18px}.result-header h3{font-size:16px}.result-body{padding:16px}.video-desc{margin-bottom:12px;padding-bottom:12px;font-size:14px}.meta-tag{padding:6px 10px;font-size:12px}.stat-item{padding:8px 12px;font-size:13px}.note-images{grid-template-columns:repeat(2,1fr);gap:8px}.note-img,.note-video,.live-photo .note-img{height:140px}.download-actions{grid-template-columns:1fr;gap:10px}.btn-download{padding:12px 14px;font-size:13px}.video-stats{flex-wrap:wrap;gap:8px}.video-right{border-top:3px dashed var(--border);margin-top:20px;padding-top:20px}.modal-overlay{align-items:flex-end;padding:0}.modal-card{max-width:100%;box-shadow:0 -8px 0 var(--text);border-radius:24px 24px 0 0;max-height:90vh;animation:.35s cubic-bezier(.34,1.56,.64,1) modalSheetIn;overflow-y:auto}@keyframes modalSheetIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{position:relative}.modal-header:after{content:"";background:var(--text);opacity:.3;border-radius:2px;width:40px;height:4px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.modal-body{padding:20px 18px}.modal-details{border-radius:12px}.detail-row{padding:12px 14px}.modal-progress{margin-bottom:20px}.modal-actions{flex-direction:column-reverse}.btn-cancel,.btn-modal-close{width:100%;height:48px;padding:12px 20px}}@media screen and (width>=769px) and (width<=1023px){.home-main{padding:24px 24px 40px}.hero-section{gap:56px;padding:32px 0}.hero-title{font-size:60px}.hero-floating-card-1{top:4%;right:-4px}.hero-floating-card-2{bottom:6%;left:-8px}.how-grid{gap:20px}}.how-section{background:var(--bg);border:3px solid var(--text);box-shadow:8px 8px 0 var(--text);border-radius:28px;margin:24px 0 32px;padding:48px 32px;animation:.5s ease-out .1s both slideUp;position:relative;overflow:hidden}.how-section:before{content:"";background:var(--accent-mint);opacity:.3;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;width:200px;height:200px;animation:10s ease-in-out infinite float-slow;position:absolute;top:-60px;right:-60px}.how-header{text-align:center;z-index:1;margin-bottom:40px;position:relative}.how-title{color:var(--text);letter-spacing:-.02em;margin-bottom:8px;font-size:clamp(24px,3vw,32px)}.how-subtitle{color:var(--text-muted);font-size:16px}.how-grid{z-index:1;grid-template-columns:repeat(3,1fr);gap:32px;display:grid;position:relative}.how-step{background:var(--bg-cream);border:3px solid var(--text);text-align:center;box-shadow:4px 4px 0 var(--text);border-radius:20px;padding:28px 24px;transition:all .15s;position:relative}.how-step:hover{box-shadow:6px 6px 0 var(--text);background:var(--bg);transform:translate(-2px,-2px)}.how-step-num{background:var(--cta);border:3px solid var(--text);color:#fff;width:36px;height:36px;box-shadow:2px 2px 0 var(--text);border-radius:50%;justify-content:center;align-items:center;font-family:Fredoka,sans-serif;font-size:16px;font-weight:700;display:flex;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.how-step-icon{border:3px solid var(--text);width:56px;height:56px;color:var(--text);box-shadow:3px 3px 0 var(--text);border-radius:16px;justify-content:center;align-items:center;margin:16px auto;display:flex}.how-step-icon-blue{background:var(--secondary)}.how-step-icon-mint{background:var(--accent-mint)}.how-step-icon-purple{background:var(--accent-purple)}.how-step h3{color:var(--text);margin-bottom:6px;font-size:18px;font-weight:700}.how-step p{color:var(--text-muted);font-size:14px;line-height:1.5}@media screen and (width<=768px){.how-section{box-shadow:6px 6px 0 var(--text);border-radius:20px;margin:16px 0 24px;padding:32px 20px}.how-section:before{width:120px;height:120px;top:-30px;right:-30px}.how-header{margin-bottom:32px}.how-title{font-size:22px}.how-subtitle{font-size:14px}.how-grid{grid-template-columns:1fr;gap:40px}.how-step{box-shadow:3px 3px 0 var(--text);padding:24px 18px}.how-step-icon{width:48px;height:48px;margin:12px auto}.how-step h3{font-size:16px}.how-step p{font-size:13px}}.history-page{min-height:100vh;padding-top:88px}.history-main{max-width:1100px;margin:0 auto;padding:24px 32px 48px}.history-page-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;animation:.4s ease-out slideUp;display:flex}.history-page-header h2{color:var(--text);letter-spacing:-.02em;align-items:center;gap:12px;font-size:clamp(26px,3vw,34px);display:inline-flex}.history-page-header h2:before{content:"";background:var(--cta);border:3px solid var(--text);border-radius:50%;flex-shrink:0;width:12px;height:12px}.btn-clear{border:3px solid var(--text);color:#dc2626;cursor:pointer;box-shadow:3px 3px 0 var(--text);white-space:nowrap;background:#fee2e2;border-radius:14px;align-items:center;gap:8px;padding:12px 20px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.btn-clear:hover{box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-clear:active:not(:disabled){box-shadow:0 0 0 var(--text);transform:translate(3px,3px)}.empty-state{background:var(--bg);border:3px solid var(--text);box-shadow:10px 10px 0 var(--text);text-align:center;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:clamp(48px,8vw,96px) 24px;animation:.4s ease-out slideUp;display:flex;position:relative;overflow:hidden}.empty-state:before{content:"";background:var(--accent-mint);opacity:.3;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;width:240px;height:240px;animation:10s ease-in-out infinite float-slow;position:absolute;top:-80px;right:-80px}.empty-state:after{content:"";background:var(--accent-purple);opacity:.3;z-index:0;pointer-events:none;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;width:180px;height:180px;animation:12s ease-in-out -5s infinite float-slow;position:absolute;bottom:-60px;left:-60px}.empty-state-icon{background:var(--accent-mint);border:3px solid var(--text);width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);color:var(--text);box-shadow:5px 5px 0 var(--text);z-index:1;border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;animation:4s ease-in-out infinite float-slow;display:flex;position:relative}.empty-state-icon svg{width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px)}.empty-state h3{color:var(--text);z-index:1;font-family:Fredoka,sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:700;position:relative}.empty-state p{color:var(--text-muted);z-index:1;margin-bottom:20px;font-size:15px;position:relative}.empty-state .btn-primary{z-index:1;margin-top:12px;position:relative}.history-list{flex-direction:column;gap:14px;animation:.4s ease-out slideUp;display:flex}.history-item{background:var(--bg);border:3px solid var(--text);box-shadow:5px 5px 0 var(--text);border-radius:18px;align-items:center;gap:18px;padding:16px;transition:all .15s;animation:.4s ease-out both slideUp;display:flex}.history-item:first-child{animation-delay:20ms}.history-item:nth-child(2){animation-delay:40ms}.history-item:nth-child(3){animation-delay:60ms}.history-item:nth-child(4){animation-delay:80ms}.history-item:nth-child(5){animation-delay:.1s}.history-item:nth-child(6){animation-delay:.12s}.history-item:nth-child(7){animation-delay:.14s}.history-item:nth-child(8){animation-delay:.16s}.history-item:nth-child(n+9){animation-delay:.18s}.history-item:hover{box-shadow:2px 2px 0 var(--text);transform:translate(3px,3px)}.history-cover{border:3px solid var(--text);width:clamp(80px,8vw,120px);height:clamp(80px,8vw,120px);box-shadow:2px 2px 0 var(--text);border-radius:14px;flex-shrink:0;overflow:hidden}.history-cover img{object-fit:cover;width:100%;height:100%;display:block}.cover-placeholder{background:var(--bg-cream);width:100%;height:100%;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.cover-placeholder svg{width:clamp(28px,4vw,40px);height:clamp(28px,4vw,40px)}.history-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.history-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.005em;font-family:Fredoka,sans-serif;font-size:clamp(15px,1.4vw,17px);font-weight:700;overflow:hidden}.history-author{color:var(--text-muted);align-items:center;gap:6px;font-size:clamp(13px,1.1vw,14px);font-weight:600;display:inline-flex}.history-author:before{content:"";background:var(--secondary);border:1.5px solid var(--text);border-radius:50%;flex-shrink:0;width:6px;height:6px}.history-time{color:var(--text-muted);align-items:center;gap:4px;font-size:12px;display:inline-flex}.history-actions{flex-shrink:0;gap:10px;display:flex}.btn-view{background:var(--secondary);border:3px solid var(--text);width:44px;height:44px;color:var(--text);box-shadow:3px 3px 0 var(--text);border-radius:12px;justify-content:center;align-items:center;text-decoration:none;transition:all .15s;display:flex}.btn-view:hover{background:var(--secondary-dark);box-shadow:0 0 0 var(--text);color:var(--text);transform:translate(3px,3px)}.btn-delete{background:var(--bg);border:3px solid var(--text);color:#dc2626;cursor:pointer;width:44px;height:44px;box-shadow:3px 3px 0 var(--text);border-radius:12px;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn-delete:hover{box-shadow:0 0 0 var(--text);background:#fee2e2;transform:translate(3px,3px)}.pagination{justify-content:center;align-items:center;gap:16px;margin-top:40px;animation:.4s ease-out .1s both slideUp;display:flex}.btn-page{background:var(--bg);border:3px solid var(--text);color:var(--text);cursor:pointer;box-shadow:3px 3px 0 var(--text);border-radius:12px;min-width:110px;padding:12px 24px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:700;transition:all .15s}.btn-page:hover:not(:disabled){box-shadow:1px 1px 0 var(--text);transform:translate(2px,2px)}.btn-page:disabled{opacity:.5;cursor:not-allowed}.page-info{color:var(--text);background:var(--bg-cream);border:3px solid var(--text);box-shadow:2px 2px 0 var(--text);border-radius:999px;padding:8px 18px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:700}@media screen and (width>=769px) and (width<=1023px){.history-main{max-width:720px;padding:20px 24px 40px}.history-cover{width:90px;height:90px}}@media screen and (width<=768px){.history-page{padding-top:76px}.history-main{padding:8px 16px 32px}.history-page-header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}.history-page-header h2{font-size:22px}.btn-clear{align-self:flex-end}.history-item{flex-wrap:wrap;gap:12px;padding:12px}.history-cover{width:72px;height:72px}.history-info{flex:calc(100% - 84px);min-width:0}.history-title{font-size:14px}.history-author,.history-time{font-size:12px}.history-actions{justify-content:flex-end;width:100%;margin-left:0}.btn-view,.btn-delete{width:44px;height:44px}.empty-state{box-shadow:6px 6px 0 var(--text);border-radius:22px;padding:56px 24px}.empty-state:before,.empty-state:after{opacity:.25;animation:none}.empty-state-icon{width:64px;height:64px;box-shadow:3px 3px 0 var(--text);animation:none}.empty-state-icon svg{width:32px;height:32px}.pagination{flex-wrap:wrap;gap:10px}.btn-page{flex:1;min-width:0;height:44px;padding:10px 16px}.page-info{text-align:center;order:-1;width:100%;margin-bottom:4px}}