:root{--bg: #f4f4f8;--card: #ffffff;--text: #16161d;--text-dim: #6b6b76;--border: #e3e3ea;--accent: #7c5cff;--accent-2: #ff5c8a;--accent-grad: linear-gradient(135deg, #7c5cff, #ff5c8a);--error-bg: #fdecec;--error-text: #b3261e;--radius: 16px;--shadow: 0 4px 24px rgb(20 20 40 / 7%)}@media(prefers-color-scheme:dark){:root{--bg: #101018;--card: #1a1a24;--text: #f1f1f6;--text-dim: #9a9aa8;--border: #2a2a38;--error-bg: #3a1d1d;--error-text: #ffb3ac;--shadow: 0 4px 24px rgb(0 0 0 / 35%)}}*{box-sizing:border-box;margin:0}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.app{max-width:560px;margin:0 auto;padding:20px 16px 8px;display:flex;flex-direction:column;min-height:100dvh}main{flex:1}.header{text-align:center;padding:12px 0 20px}.logo{display:inline-flex;align-items:center;gap:10px}.logo-mark{width:40px;height:40px}.logo h1{font-size:1.7rem;letter-spacing:-.02em}.logo h1 span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin-top:6px;color:var(--text-dim);font-size:.92rem}.ios-hint{display:flex;align-items:center;gap:8px;background:var(--card);border:1px dashed var(--accent);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;font-size:.88rem}.ios-hint p{flex:1}.share-glyph{display:inline-block;transform:rotate(-90deg)}.hint-close{background:none;border:none;color:var(--text-dim);font-size:1rem;padding:4px 8px;cursor:pointer}.input-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}.input-row{display:flex;gap:8px}#url-input{flex:1;font-size:1rem;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);min-width:0}#url-input:focus{outline:none;border-color:var(--accent)}.btn-primary,.btn-secondary{font-size:1rem;font-weight:600;border:none;border-radius:12px;padding:13px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}.btn-primary{background:var(--accent-grad);color:#fff}.btn-primary:disabled{opacity:.6}.btn-primary:active{transform:scale(.985)}.btn-secondary{background:var(--bg);color:var(--accent);border:1.5px solid var(--border)}.btn-link{background:none;border:none;color:var(--accent);font-size:.88rem;cursor:pointer;padding:4px}.platforms{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chip{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;color:#fff;opacity:.9}.chip-yt{background:#f03}.chip-ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.chip-fb{background:#1877f2}.chip-tt{background:#010101;border:1px solid #444}.chip-x{background:#14171a;border:1px solid #444}.status{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.92rem;display:flex;align-items:center;gap:10px}.status-loading{background:var(--card);color:var(--text-dim);box-shadow:var(--shadow)}.status-error{background:var(--error-bg);color:var(--error-text)}.spinner{width:18px;height:18px;flex:none;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result{margin-top:16px}.result-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.result-media{position:relative;background:#000}.result-media img{display:block;width:100%;max-height:320px;object-fit:contain}.duration{position:absolute;right:10px;bottom:10px;background:#000000bf;color:#fff;font-size:.78rem;padding:2px 8px;border-radius:6px}.result-body{padding:16px}.badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--accent);border-radius:6px;padding:3px 8px;margin-bottom:8px}.badge-youtube{background:#f03}.badge-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.badge-facebook{background:#1877f2}.badge-tiktok{background:#010101}.badge-twitter{background:#14171a}.result-title{font-size:1.05rem;line-height:1.35}.result-author{color:var(--text-dim);font-size:.88rem;margin-top:4px}.result-body h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:16px 0 8px}.format-list{display:flex;flex-direction:column;gap:8px}.format-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);font-weight:500;transition:border-color .15s}.format-row:active{border-color:var(--accent);background:var(--bg)}.format-label{flex:1}.format-meta{color:var(--text-dim);font-size:.85rem}.format-dl{color:var(--accent);font-size:1.1rem}.save-hint{margin-top:14px;font-size:.8rem;color:var(--text-dim);line-height:1.45}.history{margin-top:24px}.history-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}.history-head h2{font-size:.95rem}.history ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.history-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;cursor:pointer;color:var(--text);font-family:inherit}.history-item img,.history-thumb-fallback{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--bg)}.history-text{min-width:0;display:flex;flex-direction:column;gap:2px}.history-title{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-sub{font-size:.78rem;color:var(--text-dim)}.footer{text-align:center;color:var(--text-dim);font-size:.75rem;padding:24px 8px 12px;line-height:1.5}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:max(24px,env(safe-area-inset-top));background:var(--bg);z-index:100}.login-card{width:100%;max-width:360px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.login-logo{width:52px;height:52px}.login-title{font-size:1.5rem;letter-spacing:-.02em}.login-title span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.login-sub{color:var(--text-dim);font-size:.9rem;margin-bottom:4px}#login-password{width:100%;font-size:1rem;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text)}#login-password:focus{outline:none;border-color:var(--accent)}.login-remember{display:flex;align-items:center;gap:8px;align-self:flex-start;font-size:.88rem;color:var(--text-dim);cursor:pointer}.login-remember input{width:16px;height:16px;accent-color:var(--accent)}.login-card .btn-primary{width:100%}.login-error{color:var(--error-text);background:var(--error-bg);border-radius:10px;padding:8px 12px;font-size:.85rem;width:100%}.header{position:relative}.logout-btn{position:absolute;top:0;right:0;background:var(--card);color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}.logout-btn:active{transform:scale(.97)}