.page{animation:pageIn .25s ease}button{transition:transform .08s ease,box-shadow .08s ease}html,body{height:100%;overflow:hidden}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#e0f2fe,#f6f7fb 60%);padding:24px}.login-card{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 15px 40px #0000001f;animation:fadeUp .35s ease}.login-brand{text-align:center;margin-bottom:28px}.brand-logo{font-size:26px;font-weight:900;letter-spacing:.5px}.brand-tagline{margin-top:8px;font-size:14px;color:#6b7280}.login-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:#374151}.login-form input{width:100%;padding:14px;border-radius:14px;border:1px solid #e5e7eb;font-size:15px;outline:none}.login-form input:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf840}.login-button{margin-top:16px;width:100%;padding:14px;border-radius:16px;font-size:16px;font-weight:800;border:none;cursor:pointer;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-error{margin-top:8px;font-size:14px;color:#dc2626;text-align:center}.login-footnote{margin-top:20px;font-size:12px;color:#9ca3af;text-align:center;line-height:1.4}.pin-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#e0f2fe,#f6f7fb 60%);padding:24px}.pin-card{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 15px 40px #0000001f;animation:fadeUp .35s ease}.pin-header{text-align:center;margin-bottom:24px}.pin-logo{font-size:22px;font-weight:900}.brand-boost{margin-left:4px;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.pin-header h1{margin:12px 0 4px;font-size:20px}.pin-sub{font-size:14px;color:#6b7280}.pin-inputs{display:flex;justify-content:space-between;gap:10px;margin:20px 0}.pin-inputs.secondary{margin-top:12px}.pin-inputs input{width:56px;height:64px;border-radius:14px;border:1px solid #e5e7eb;font-size:24px;font-weight:700;text-align:center;outline:none;background:#f9fafb}.pin-inputs input:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf840;background:#fff}.pin-confirm-label{font-size:14px;font-weight:600;color:#374151;margin-top:8px}.pin-error{text-align:center;font-size:14px;color:#dc2626;margin-bottom:12px}.pin-submit{width:100%;padding:14px;border-radius:16px;border:none;font-size:16px;font-weight:800;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;cursor:pointer}.pin-submit:disabled{opacity:.6;cursor:not-allowed}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.pin-user{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 8px}.pin-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #e0f2fe}.pin-user-info{text-align:left}.pin-user-info strong{display:block;font-size:14px;font-weight:700;color:#020617}.pin-user-info span{font-size:12px;color:#64748b}.pin-switch{margin:4px auto 12px;background:none;border:none;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer;padding:0;transition:color .2s ease}.pin-switch:hover{color:#1e40af;text-decoration:underline}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{flex-shrink:0;position:sticky;top:0;z-index:50;background:#ffffffbf;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(229,231,235,.6)}.header-inner{max-width:520px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}.header-brand{font-size:16px;font-weight:800;color:#dc2626;cursor:pointer;display:flex;align-items:center;gap:6px}.header-dropdown{position:relative}.header-user-btn{background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:600;color:#0ea5e9;cursor:pointer;display:flex;align-items:center;gap:6px}.chevron{font-size:10px;color:#6b7280}.dropdown-menu{position:absolute;right:0;top:44px;min-width:160px;background:#fff;border-radius:12px;box-shadow:0 12px 30px #0000001f;padding:6px;z-index:100;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.dropdown-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.dropdown-menu button{background:none;border:none;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;color:#000;cursor:pointer}.dropdown-menu button:hover{background:#f3f4f6}.dropdown-divider{height:1px;background:#e5e7eb;margin:6px 0}.dropdown-menu .danger{color:#dc2626}.dropdown-menu .danger:hover{background:#fee2e2}.app-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:pageIn .25s ease}.app-content::-webkit-scrollbar{width:0}.app-content{scrollbar-width:none}.app-footer{text-align:center;font-size:12px;color:#9ca3af;background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(229,231,235,.6)}.footer-sub{margin-top:1px;font-size:11px;color:#b6bbc6}@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.header-brand{font-size:16px;font-weight:900;cursor:pointer;display:flex;align-items:center;gap:2px}.brand-rising{color:#38bdf8}.brand-boost{background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.creator-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}.creator-grid-item{background:#f9fafb;border-radius:16px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:transform .1s ease,background .15s ease}.creator-grid-item:hover{background:#f3f4f6}.creator-grid-name{font-size:14px;font-weight:700;line-height:1.2}.creator-grid-username{font-size:12px;color:#6b7280}.creator-grid-item{background:#fff;border-radius:18px;padding:16px 10px;box-shadow:0 8px 24px #0000000f;transition:transform .12s ease,box-shadow .12s ease}.creator-grid-item:hover{transform:translateY(-2px);box-shadow:0 12px 30px #00000014}.creator-grid-item:active{transform:scale(.96)}.creator-grid-item{position:relative}.card-live-badge{position:absolute;top:10px;right:10px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;box-shadow:0 4px 10px #ef444459}.card-offline-badge{position:absolute;top:10px;right:10px;background:#e5e7eb;color:#6b7280;font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px}.avatar-ring{display:flex;align-items:center;justify-content:center;padding:3px;border-radius:50%;margin-bottom:8px}.creator-grid-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#fff}@keyframes ringPulse{0%{box-shadow:0 0 #ff004f99}70%{box-shadow:0 0 0 8px #ff004f00}to{box-shadow:0 0 #ff004f00}}.avatar-ring.live{animation:ringPulse 1.6s infinite}.history-header-card{width:100%;max-width:480px;margin-bottom:12px}.history-header-card h1{margin:0;font-size:20px}.history-header-card .hint{font-size:13px;color:#6b7280}.history-list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:14px;padding-bottom:12px}.history-item{background:#fff;border-radius:16px;padding:14px;box-shadow:0 6px 18px #0000000f;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.history-item:active{transform:scale(.96)}.history-item.expired{opacity:.6}.history-header{display:flex;justify-content:space-between;align-items:center}.status{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}.status.pending{background:#fef3c7;color:#92400e}.status.success{background:#dcfce7;color:#166534}.status.expired{background:#fee2e2;color:#991b1b}.history-main{display:flex;justify-content:space-between;align-items:center}.history-media{font-size:13px;font-weight:600;color:#0ea5e9}.history-gift{display:flex;align-items:center;gap:10px;font-size:14px}.gift-icon{width:40px;height:40px;border-radius:10px;background:#f3f4f6;padding:6px;object-fit:contain}.history-sub{font-size:12px;color:#6b7280}.history-message{font-size:14px;color:#374151;background:#f9fafb;padding:10px 12px;border-radius:12px;font-style:italic}.history-footer{display:flex;justify-content:space-between;align-items:center}.history-time{font-size:13px;font-weight:600;color:#dc2626}.history-meta{font-size:11px;color:#9ca3af}.detail-top{width:100%;max-width:480px;display:flex;align-items:center;gap:12px;margin-bottom:12px}.detail-back{width:36px;height:36px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;font-size:18px;cursor:pointer}.detail-card{width:100%;max-width:480px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 8px 20px #0000000f;display:flex;flex-direction:column;gap:14px}.detail-card.expired{opacity:.6}.hero{width:100%;padding:20px 16px;border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:6px}.hero-icon{font-size:30px}.hero-main{font-size:32px;font-weight:800}.hero-text{font-size:13px;font-weight:600}.hero-sub{font-size:12px;color:#6b7280}.hero-pending{background:linear-gradient(135deg,#fff7ed,#ffedd5)}.hero-pending .hero-main{color:#dc2626}.hero-pending .hero-text{color:#92400e}.hero-success{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.hero-success .hero-main{color:#16a34a}.hero-success .hero-text{color:#166534}.detail-status.expired{align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#fee2e2;color:#991b1b}.detail-row{display:flex;justify-content:space-between;font-size:14px}.detail-label{color:#6b7280}.detail-gift{display:flex;align-items:center;gap:12px}.detail-gift img{width:56px;height:56px;border-radius:12px;background:#f3f4f6;padding:6px;object-fit:contain}.detail-sub{font-size:13px;color:#6b7280}.detail-message{background:#f9fafb;padding:12px;border-radius:12px;font-size:14px;font-style:italic}.detail-media-label{font-size:13px;font-weight:700;margin-bottom:6px}.media-preview{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:#000}.media-preview iframe{width:100%;height:100%;border:0}.detail-meta{font-size:12px;color:#9ca3af;text-align:right}.detail-title{width:100%;max-width:480px;text-align:center;margin-bottom:8px}.detail-title h1{font-size:18px;margin:0}.detail-actions{display:flex;gap:10px;margin-top:16px}.detail-actions button{flex:1}.pending-instruction{margin-top:10px;padding:12px;border-radius:14px;background:#fff7ed;font-size:13px;line-height:1.5;text-align:center;color:#92400e}.pending-instruction p{margin:0}.inline-gift{width:18px;height:18px;vertical-align:middle;margin-right:4px}.highlight-gift{font-weight:700;color:#dc2626;white-space:nowrap}.highlight-creator{font-weight:700;color:#2563eb}.highlight-supporter{font-weight:700;color:#16a34a}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:#f6f7fb;color:#111827}.support-page{min-height:100vh;padding:32px 16px;display:flex;flex-direction:column;align-items:center}.creator-card{background:#fff;width:100%;max-width:480px;border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 10px 25px #00000014}.creator-header{display:flex;align-items:center;gap:16px}.creator-meta h2{margin:0;font-size:20px}.creator-meta .username{margin:2px 0 6px;font-size:14px;color:#6b7280}.creator-bio{margin-top:14px;font-size:14px;color:#374151}.live-badge{display:inline-block;background:#ff3b5c;color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}.live-badge.offline{background:#9ca3af}.support-card{background:#fff;width:100%;max-width:480px;border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:0 10px 25px #00000014}.support-card>*{margin-bottom:16px}.support-card>*:last-child{margin-bottom:0}.support-card .hint{font-size:14px;color:#6b7280}label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:6px}input,textarea{width:100%;padding:14px;font-size:15px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;color:#111827}textarea{resize:none;min-height:90px}input::placeholder,textarea::placeholder{color:#9ca3af}input:focus,textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf840}button{width:100%;padding:14px;border-radius:16px;font-size:16px;font-weight:700;border:none;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff;cursor:pointer}button:active{transform:scale(.97)}button.secondary{background:transparent;color:#0ea5e9;border:1px solid #0ea5e9}.select-gift-btn{background:#f3f4f6;color:#111827;min-height:56px;display:flex;align-items:center;justify-content:center}.select-gift-btn.has-selected{background:#ecfeff;border:1px solid #67e8f9}.selected-gift{display:flex;align-items:center;gap:10px}.selected-gift img{width:40px;height:40px;border-radius:10px;background:#fff;padding:4px;object-fit:contain}.selected-gift span{font-size:14px;font-weight:700}.media-tabs.main{display:flex;gap:8px;background:#f3f4f6;padding:6px;border-radius:16px;width:100%;max-width:480px;margin-bottom:12px}.media-tabs.main .media-tab{flex:1;padding:12px 0;border-radius:12px;background:transparent;font-size:11px;font-weight:800}.media-tabs.main .media-tab:first-child{color:#0284c7}.media-tabs.main .media-tab:first-child.active{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#fff}.media-tabs.main .media-tab:last-child{color:#6b7280}.media-tabs.main .media-tab:last-child.active{background:#111827;color:#fff}.soon-badge{margin-left:6px;padding:2px 6px;font-size:10px;font-weight:700;border-radius:999px;background:#fef3c7;color:#92400e}.media-tabs.platform{display:flex;gap:8px}.media-tabs.platform .media-tab{flex:1;padding:10px 0;border-radius:12px;border:1px solid #e5e7eb;font-weight:700}.media-tab.youtube{background:#fee2e2;color:#dc2626;border-color:#fecaca}.media-tab.youtube.active{background:#dc2626;color:#fff}.media-tab.tiktok{background:#e5e7eb;color:#111827;border-color:#d1d5db}.media-tab.tiktok.active{background:#111827;color:#fff}.youtube-preview,.tiktok-video-preview{width:100%;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden}.youtube-preview iframe,.tiktok-video-preview iframe{width:100%;height:100%;border:0}.gift-popup-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:999;padding:16px}.gift-popup{background:#fff;width:100%;max-width:420px;border-radius:18px;padding:16px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 40px #00000040}.gift-popup-header{display:flex;align-items:center;justify-content:space-between;position:relative}.popup-close{all:unset;width:32px;height:32px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;color:#6b7280;cursor:pointer;transition:background .15s ease,transform .1s ease}.popup-close:hover{background:#e5e7eb}.popup-close:active{transform:scale(.9)}.gift-popup-body{overflow-y:auto;margin-top:12px}.gift-popup-body::-webkit-scrollbar{width:0}.gift-popup-body{scrollbar-width:none}.gift-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gift-item{display:flex;gap:10px;padding:12px;background:#f9fafb;border-radius:12px;cursor:pointer}.gift-item img{width:36px;height:36px}.confirm-actions{display:flex;gap:10px}.confirm-actions button{flex:1}.center{text-align:center}.avatar-ring{padding:3px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.avatar-ring.live{background:linear-gradient(45deg,#ff004f,#ff6a00)}.avatar-ring.offline{background:#e5e7eb}.creator-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#fff}.enter-live-btn{margin-top:14px;padding:10px;border-radius:999px;background:#fff;color:#ff004f;font-size:15px;font-weight:800;border:2px solid #ff004f;box-shadow:0 6px 16px #ff004f26;transition:transform .12s ease,background .12s ease}.enter-live-btn:active{transform:scale(.96);background:#fff1f5}.confirm-page{display:flex;align-items:center;justify-content:center;background:#f5f7fb;padding:20px}.confirm-card{width:100%;max-width:380px;background:#fff;border-radius:20px;padding:28px 24px;text-align:center;box-shadow:0 12px 30px #0f172a14;animation:fadeUp .4s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.confirm-card h2{font-size:20px;font-weight:700;margin-bottom:18px;color:#0f172a}.confirm-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:4px solid #e0f2fe}.confirm-card h3{font-size:18px;font-weight:700;color:#020617;margin:4px 0}.confirm-username{font-size:14px;color:#64748b;margin-bottom:8px}.confirm-badges{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#e0f2fe;color:#0284c7}.badge.verified{background:#dcfce7;color:#15803d}.confirm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.confirm-stats div{background:#f8fafc;border-radius:14px;padding:12px 8px}.confirm-stats strong{display:block;font-size:16px;font-weight:700;color:#020617}.confirm-stats span{font-size:12px;color:#64748b}.confirm-bio{font-size:14px;color:#334155;margin:12px 0 20px;line-height:1.5}.confirm-actions{display:flex;gap:12px}.btn-secondary{flex:1;padding:12px;border-radius:14px;font-size:14px;font-weight:600;background:#fff;border:1.5px solid #cbd5f5;color:#1e40af;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{background:#eef2ff}.btn-primary{flex:1;padding:12px;border-radius:14px;font-size:14px;font-weight:600;background:linear-gradient(135deg,#38bdf8,#0ea5e9);border:none;color:#fff;cursor:pointer;box-shadow:0 6px 16px #0ea5e959;transition:all .2s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px #0ea5e973}