*{margin:0;padding:0;box-sizing:border-box}html{background:linear-gradient(135deg,#667eea,#764ba2);background-color:#444;background-attachment:fixed;overscroll-behavior:none;overflow-y:hidden;min-height:100dvh}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;background:transparent;overflow-y:hidden;overscroll-behavior:none;position:fixed;top:0;left:0;width:100%;height:100dvh}#root{width:100%;height:100dvh;color:#fff;margin:0 auto;padding:0 2rem 2rem;text-align:center;max-width:500px;overflow-y:hidden;overscroll-behavior:none}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--card-bg: rgba(255, 255, 255, .95);--card-shadow: 0 8px 32px rgba(0, 0, 0, .1);--text-primary: #2d3748;--text-secondary: #718096;--border-radius: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}.notice{background:#00000040;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.1);padding:10px;text-align:center;color:#ffffffe6;font-size:13px;line-height:1.2rem;border-radius:8px;transition:all .6s ease-in-out;overflow:hidden;max-height:200px;cursor:pointer;position:relative}.notice-progress-bar{position:absolute;bottom:0;left:0;height:2px;background:#ffffff80;width:100%;animation:progress 8s linear forwards}@keyframes progress{0%{width:100%}to{width:0%}}.notice b{background:#22111126;border:1px solid rgba(255,255,255,.2);border-radius:4px;box-shadow:0 1px #0003;color:#fff;display:inline-block;font-family:monospace;font-size:11px;font-weight:600;padding:0 5px;margin:0 1px;vertical-align:middle}.notice.fade-in+*+.fade-in{margin-top:30px}.notice.fade-in+*+.fade-in .main-container{height:calc(100dvh - 210px)}.notice+.login-container{margin-top:10px}.fade-in{opacity:1;animation:fadeIn .5s ease}.fade-out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-bottom-width:0;margin:0}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-radius:50%;border-top-color:#646cff;animation:spin 1s ease-in-out infinite;margin:40vh auto}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{position:fixed;top:90px;right:0;border-radius:5px;transform:translate(10%) translateY(0);z-index:-1;pointer-events:none;opacity:0;transition:all .3s cubic-bezier(.68,-.55,.27,1.55)}.toast-container.visible{opacity:1;z-index:1000;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translate(-5%) translateY(0)}.toast{background:#0009;color:#fff;padding:12px 24px;border-radius:5px;font-size:14px;font-weight:500;box-shadow:0 4px 15px #0003;border:1px solid rgba(255,255,255,.1);pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:200px;justify-content:center}.toast.error{background:#dc26264d;border-color:#dc26264d;color:#fff}.toast.message,.toast.green{background:#10b9814d;border-color:#10b9814d;color:#fff}.icon-wrapper{display:inline-block;margin-bottom:24px;animation:float 3s ease-in-out infinite}h1{color:#fff;font-size:48px;font-weight:700;margin-bottom:16px;text-shadow:0 4px 8px rgba(0,0,0,.2);animation:fadeInUp .8s ease-out .2s both}.card{width:100%;padding:2em;background-color:#000000a6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 4px 6px #0000004d;margin-top:20px}input{display:block;width:100%;padding:10px;margin:10px 0;border-radius:4px;border:1px solid #333;background:#2a2a2a;color:#fff;font-size:16px}button{margin-top:10px;width:100%;padding:10px;font-size:16px;font-weight:700;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.auth-toggle{background:none;border:none;color:#888;font-size:14px;margin-top:15px;text-decoration:underline;cursor:pointer}.auth-toggle:hover{color:#aaa}.user-badge{background:#333;padding:5px 10px;border-radius:12px;font-size:14px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0;flex-direction:row;color:#fff;width:100%;max-width:468px;margin:0 auto}.app-header svg{width:24px;height:24px;position:relative;top:-2px;margin-right:2px}.app-header h2{cursor:pointer;font-size:20px;top:0;position:relative;line-height:1;display:flex;align-items:center}.user-profile-container{position:relative;display:flex;align-items:center;gap:10px;border:none;right:0;pointer-events:auto}.user-initials{width:32px;height:32px;border-radius:50%;background-color:#404683;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:12px;cursor:pointer;border:2px solid white;transition:background-color .2s}.user-initials:hover{background-color:#3c4280}.user-profile-container .logout-btn{display:none;position:absolute;right:0;top:100%;width:auto;padding:8px 12px;background:#282b4f;border-radius:4px;font-size:14px;white-space:nowrap;z-index:10;margin-top:5px}.user-profile-container:hover .logout-btn,.logout-btn:hover{display:block}.sticky-header-container{position:fixed;top:0;left:0;width:100%;z-index:900;margin:0;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;border-bottom:1px solid rgba(255,255,255,.1);transition:all .3s ease;pointer-events:auto}.notice{margin-bottom:5px;font-size:12px}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:85vh;margin-top:-60px}.login-container+*+.toast-container{margin-top:-60px}.login-container svg{position:relative;top:10px}.main-container{display:flex;flex-direction:column;gap:20px;height:100dvh;width:100%;margin:0 auto}.send-card{position:fixed;bottom:50px;left:50%;transform:translate(-50%);width:calc(100% - 32px);max-width:500px;margin:0;padding:6px 6px 6px 24px;border-radius:32px;display:flex;align-items:center;gap:12px;z-index:1000;background:#1e234699;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0006}.send-card textarea{flex:1;background:transparent;border:none;color:#e3e3e3;padding:12px 0;border-radius:0;resize:none;font-size:16px;font-family:Inter,sans-serif;height:48px;line-height:24px;margin:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.send-card textarea::placeholder{color:#8e918f}.send-card textarea:focus{outline:none;background:transparent}.send-btn{background:transparent;width:48px;height:48px;border-radius:50%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:none;flex-shrink:0;transition:all .2s ease}.send-btn:hover:not(:disabled){background:#ffffff1a;transform:none;box-shadow:none}.send-btn:disabled{background:transparent;cursor:not-allowed;opacity:.3}.send-btn svg{width:24px;height:24px;fill:#fff;transform:translate(2px)}.encryption-note{display:none}.clips-list{text-align:left;flex:1;overflow-y:auto;height:100%;max-height:none;background:transparent;padding:110px 10px 160px;mask-image:linear-gradient(to bottom,black calc(100% - 180px),transparent calc(100% - 60px));-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 180px),transparent calc(100% - 60px));scrollbar-width:none;-ms-overflow-style:none}.clips-list::-webkit-scrollbar{display:none}.clip-item{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:20px 0 5px 10px;margin-bottom:0;transition:background-color .2s,border-color .2s;animation:fadeIn .3s ease}.clip-item:nth-last-child(2){border-bottom:1px transparent}.clip-content{white-space:pre-wrap;word-break:break-word;margin-bottom:10px;font-size:15px;line-height:1.6;color:#fff;font-weight:400}.clip-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#fff9;font-weight:500;margin-top:8px}.copy-btn{background:transparent;width:32px;height:32px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#cbd5e0;transition:all .2s}.copy-btn:hover{background:#ffffff1a;color:#fff}.copy-btn svg{width:16px;height:16px}.clip-count{font-size:18px;font-weight:700}.remember-me-container{text-align:left;margin:10px 0}.remember-me-label{color:#ccc;font-size:14px;display:flex;align-items:center;gap:8px;justify-content:center}#remember-me{width:20px;height:20px}.card h2{margin-bottom:20px;color:#888}.clips-list h3{padding-left:5px;margin-bottom:15px;color:#fff}.link-btn{cursor:pointer;padding:0;font-size:12px;position:fixed;bottom:12px;left:0;width:100%;text-align:center;color:#ffffff80;z-index:900;transition:color .2s}.link-btn span:hover{color:#fffc;text-decoration:underline}.empty-state{color:#666;font-style:italic;text-align:center;padding:40px 0}.legal-modal h2{margin-bottom:40px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 900px){body{min-height:100dvh}#root{padding:1rem;padding-top:80px}.main-container{height:calc(100dvh - 135px)}.card{padding:1.5em}.send-card{padding:6px 6px 6px 24px;border-radius:32px;bottom:50px;background:#1e234699;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.send-btn{width:48px;height:48px;font-size:16px;padding:0;margin-top:0;background:transparent;box-shadow:none;border-radius:50%}.send-btn svg{width:24px;height:24px}.clips-list{height:100%;max-height:none;overflow-y:auto;padding-bottom:160px;padding-top:2px;mask-image:linear-gradient(to bottom,black calc(100% - 180px),transparent calc(100% - 60px));-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 180px),transparent calc(100% - 60px))}.clip-content{font-size:16px;line-height:1.6}header{flex-direction:row;gap:0}.app-header{flex-direction:row;justify-content:space-between;max-width:100%}.sticky-header-container{padding:1.5rem 1rem}.user-badge{background:#333;padding:5px 10px;border-radius:12px;font-size:14px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0;flex-direction:row;color:#fff;width:100%;max-width:468px;margin:0 auto}.app-header svg{position:relative;top:-2px;margin-right:2px}.app-header h2{cursor:pointer;font-size:20px;position:relative;margin:0;display:flex;align-items:center}.user-profile-container{position:relative;display:flex;align-items:center;gap:10px;border:none;right:0}.user-initials{width:32px;height:32px;border-radius:50%;background-color:#404683;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:12px;cursor:pointer;border:2px solid white;transition:background-color .2s}.user-initials:hover{background-color:#282b4f}}.legal-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.legal-modal{background:#222;padding:30px;border-radius:8px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 10px 25px #00000080}.close-btn{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;color:#888;cursor:pointer;width:auto;padding:0 10px}.close-btn:hover{color:#fff}.legal-section{margin-bottom:20px;text-align:left}.legal-section h3{border-bottom:1px solid #444;padding-bottom:5px;margin-bottom:10px}