/* ═══════════════════════════════════════════════════════
   SparK — asosiy uslub fayli (assets/css/style.css)
   Bo'lingan fayllar shu yerdan ulanadi:
     - side_right.css : chap sidebar + o'ng panel
     - themes.css     : barcha ranglar/mavzular
   ═══════════════════════════════════════════════════════ */
@import url('side_right.css');
@import url('themes.css');

/* ═══════════════════════════════════════
   asosiy komponentlar (header/footer/postlar/tugmalar va h.k.)
   ═══════════════════════════════════════ */

html, body { font-size: 16px;margin:0;padding:0; bottom:10px;align-items:center;justify-content:center;}
a { color:inherit;text-decoration:none; }
.app-logo svg { stroke:var(--accent,#00d4ff);width:22px;height:22px;flex-shrink:0; }
.header-search-wrap { flex:1;max-width:480px;margin:0 auto;display:none; }
.header-search-wrap .search-bar { margin:0; }
.header-actions { display:flex;align-items:center;gap:6px;margin-left:auto; }
.icon-btn { position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--input-bg, #0f1520);border:1px solid var(--border-color, #1f2937);cursor:pointer;transition:background .18s, border-color .18s; }
.icon-btn:hover { background:var(--hover-bg);border-color:var(--accent, #00d4ff); }
.icon-btn svg { width:19px;height:19px;stroke:var(--text-color); }
.icon-btn .badge-dot { position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:20px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f91880,#e0006a);color:#fff;box-shadow:0 0 0 2px var(--header-bg, #0a0e17); }
.header-profile { flex-shrink:0; }
.header-profile-ava { width:36px;height:36px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid var(--border-color, #1f2937); }
.header-profile-ava img { width:100%;height:100%;object-fit:cover; }
.header-profile-ava svg { width:16px;height:16px;stroke:#fff; }
.mobile-bottom-nav { position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-around;background:var(--header-bg, rgba(10,14,23,.9));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border-color, #1f2937);padding:8px 6px calc(6px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav a { display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--secondary-text, #8b96a8);font-size:10px;font-weight:600;padding:4px 10px;border-radius:12px;position:relative;transition:color .15s; }
.mobile-bottom-nav a svg { width:22px;height:22px;stroke:currentColor;stroke-width:2; }
.mobile-bottom-nav a.active { color:var(--accent, #00d4ff); }
.mobile-bottom-nav a .badge-dot { position:absolute;top:-2px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:20px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f91880,#e0006a);color:#fff; }
.mobile-bottom-nav-spacer { height:66px; }

.app-footer-links { max-width:680px;margin:24px auto 90px;align-items:center;justify-content:center;text-align:center;padding:0 16px;font-size:12px;color:var(--secondary-text, #8b96a8); }

.app-footer-links a { color:var(--secondary-text, #8b96a8);margin:0 6px; }
.app-footer-links a:hover { color:var(--accent, #00d4ff); }
.auth-page { min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%, rgba(0,212,255,.10), transparent 45%),
                radial-gradient(circle at 80% 80%, rgba(14,165,233,.10), transparent 45%),
                var(--bg-color, #0a0e17);padding:20px; }
.auth-card { width:100%;max-width:380px;background:var(--card-bg, #121826);border:1px solid var(--border-color, #1f2937);border-radius:24px;padding:32px 26px;box-shadow:0 20px 60px rgba(0,0,0,.35); }
.auth-logo { display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px;font-weight:800;margin-bottom:6px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));-webkit-background-clip:text;background-clip:text;color:transparent; }
.auth-logo svg { stroke:var(--accent,#00d4ff);width:26px;height:26px; }
.auth-subtitle { text-align:center;color:var(--secondary-text,#8b96a8);font-size:13px;margin-bottom:24px; }
.auth-field { margin-bottom:14px; }
.auth-field label { display:block;font-size:12px;font-weight:600;color:var(--secondary-text,#8b96a8);margin-bottom:6px; }
.auth-field input { width:100%;padding:12px 14px;border-radius:12px;background:var(--input-bg, #0f1520);border:1.5px solid var(--border-color, #1f2937);color:var(--text-color);font-size:14px;outline:none;transition:border-color .15s; }
.auth-field input:focus { border-color:var(--accent, #00d4ff); }
.auth-submit { width:100%;padding:13px;border:none;border-radius:14px;margin-top:6px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));color:#04121a;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s, box-shadow .15s;box-shadow:0 8px 24px rgba(0,212,255,.25); }
.auth-submit:hover { transform:translateY(-1px); }
.auth-footer-link { text-align:center;margin-top:18px;font-size:13px;color:var(--secondary-text,#8b96a8); }
.auth-footer-link a { color:var(--accent, #00d4ff);font-weight:600; }
.auth-error { background:rgba(249,24,128,.1);border:1px solid rgba(249,24,128,.3);color:#ff5c9d;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px; }
.menu-icon:hover { background:var(--hover-bg, #f0f2f5); }
.tab:hover { color:var(--text-color, #1a1a2e); }
.post-avatar:hover { transform:scale(1.06); }
.post-images .image-wrapper { overflow:hidden;border-radius:14px; }
.post-images img { transition:transform .3s ease;cursor:pointer; }
.post-images img:hover { transform:scale(1.03); }
.action.liked svg { fill:#f91880;stroke:#f91880; }
.action:hover.liked, .action.liked:hover { background:rgba(249,24,128,.08); }
.premium-badge-icon { display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#f7b733,#fc4a1a);vertical-align:middle;margin-left:3px;box-shadow:0 1px 3px rgba(252,74,26,.4); }
.premium-badge-icon svg { width:11px;height:11px; }
.create-post { background:var(--card-bg, #fff);border-radius:20px;padding:16px;margin-bottom:10px;border:1px solid var(--border-color, #e5e5ea);box-shadow:0 2px 12px rgba(0,0,0,.04); }
.create-post-header { display:flex;gap:12px;align-items:flex-start;margin-bottom:12px; }
.create-post textarea,
.post-textarea { flex:1;border:none;outline:none;resize:none;font-size:15px;line-height:1.5;background:transparent;color:var(--text-color, #1a1a2e);font-family:inherit;min-height:60px;width:100%;padding:4px 0; }
.create-post textarea::placeholder { color:var(--secondary-text, #8e8e93); }
.create-post-actions { display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border-color, #e5e5ea);gap:8px; }
.post-tools { display:flex;gap:4px; }
.tool-btn { width:36px;height:36px;border:none;background:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent,#00d4ff);transition:background .18s; }
.tool-btn:hover { background:rgba(var(--accent-rgb, 0,212,255),.1); }
.tool-btn svg { width:20px;height:20px; }
.submit-btn, .btn-primary { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));color:#fff;border:none;border-radius:24px;padding:9px 22px;font-weight:700;font-size:14px;cursor:pointer;transition:opacity .2s, transform .15s;letter-spacing:-.1px; }
.submit-btn:hover, .btn-primary:hover { opacity:.9;transform:translateY(-1px); }
.submit-btn:disabled { opacity:.45;cursor:not-allowed;transform:none; }
.notification-item:hover { border-color:rgba(var(--accent-rgb, 0,212,255),.3);box-shadow:0 4px 16px rgba(0,212,255,.08);transform:translateY(-1px); }
.empty-state p { font-size:17px;font-weight:600;color:var(--text-color, #1a1a2e);margin-bottom:8px; }
.empty-state small { font-size:14px;opacity:.7; }
.settings-section:hover { box-shadow:0 4px 20px rgba(0,0,0,.06); }
.toggle-slider::before { content:'';position:absolute;width:22px;height:22px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.28s;box-shadow:0 1px 4px rgba(0,0,0,.2); }
input:checked + .toggle-slider::before { transform:translateX(22px); }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select { background:var(--input-bg, #f8f9fa);color:var(--text-color, #1a1a2e);border:1.5px solid var(--border-color, #e5e5ea);border-radius:14px;padding:11px 14px;font-size:15px;width:100%;outline:none;transition:border-color .2s, box-shadow .2s;font-family:inherit; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, textarea:focus { border-color:var(--accent,#00d4ff);box-shadow:0 0 0 3px rgba(var(--accent-rgb, 0,212,255),.12);background:var(--card-bg, #fff); }
.btn, button.btn { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));color:white;border:none;border-radius:24px;padding:11px 24px;font-weight:700;font-size:15px;cursor:pointer;transition:opacity .2s, transform .15s;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.1px; }
.btn:active { transform:translateY(0); }
.btn-outline { background:transparent;border:1.5px solid var(--border-color, #e5e5ea);color:var(--text-color, #1a1a2e); }
.btn-outline:hover { border-color:var(--accent,#00d4ff);color:var(--accent,#00d4ff);background:rgba(var(--accent-rgb, 0,212,255),.06); }
.profile-cover { height:200px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));position:relative;overflow:hidden;border-radius:0 0 24px 24px; }
.profile-cover img { width:100%;height:100%;object-fit:cover; }
.profile-info-block { padding:0 16px 16px;margin-top:-40px;position:relative; }
.profile-avatar-wrap { width:84px;height:84px;border-radius:50%;border:4px solid var(--bg-color, #fff);background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15);margin-bottom:10px; }
.profile-avatar-wrap img { width:100%;height:100%;object-fit:cover; }
.profile-username { font-size:22px;font-weight:800;color:var(--text-color, #1a1a2e);letter-spacing:-.4px;display:flex;align-items:center;gap:6px; }
.profile-handle { font-size:14px;color:var(--secondary-text, #8e8e93);margin-top:2px; }
.stat { cursor:pointer; }
.stat-count { font-size:18px;font-weight:800;color:var(--text-color, #1a1a2e); }
.follow-btn.following:hover { border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.06); }
.profile-tab:hover { color:var(--text-color, #1a1a2e); }
.search-bar { display:flex;align-items:center;gap:10px;background:var(--input-bg, #f0f2f5);border:1.5px solid transparent;border-radius:40px;padding:8px 16px;margin:12px 16px;transition:border-color .2s, box-shadow .2s; }
.search-bar:focus-within { border-color:var(--accent,#00d4ff);box-shadow:0 0 0 3px rgba(var(--accent-rgb, 0,212,255),.1);background:var(--card-bg, #fff); }
.search-bar svg { width:18px;height:18px;stroke:var(--secondary-text);flex-shrink:0; }
.search-bar input { flex:1;border:none;background:transparent;font-size:15px;color:var(--text-color, #1a1a2e);outline:none;padding:0;border-radius:0;box-shadow:none !important; }
.conversation-item { display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .18s;border-radius:16px;margin:2px 8px; }
.conversation-item:hover { background:var(--hover-bg, #f0f2f5); }
.conversation-item.unread .conv-name { font-weight:700; }
.conv-avatar { width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.conv-avatar img { width:100%;height:100%;object-fit:cover; }
.conv-info { flex:1;min-width:0; }
.conv-name { font-size:15px;font-weight:600;color:var(--text-color, #1a1a2e);margin-bottom:3px; }
.conv-last { font-size:13px;color:var(--secondary-text, #8e8e93);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.conv-time { font-size:11px;color:var(--secondary-text, #8e8e93); }
.conv-unread-dot { width:10px;height:10px;border-radius:50%;background:var(--accent,#00d4ff);flex-shrink:0; }
.message-bubble { max-width:72%;padding:10px 14px;border-radius:20px;font-size:14px;line-height:1.5;word-break:break-word; }
.message-bubble.me { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));color:white;border-bottom-right-radius:6px;margin-left:auto; }
.message-bubble.them { background:var(--hover-bg, #f0f2f5);color:var(--text-color, #1a1a2e);border-bottom-left-radius:6px; }
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-color, #e5e5ea);border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--secondary-text, #8e8e93); }
.post:nth-child(2) { animation-delay:.04s; }
.post:nth-child(3) { animation-delay:.08s; }
.post:nth-child(4) { animation-delay:.12s; }
.post:nth-child(5) { animation-delay:.16s; }
* { box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline:2px solid var(--accent,#00d4ff);outline-offset:2px;border-radius:6px; }
button:not(:disabled):active,
.btn:active,
.menu-item:active { transform:scale(.97); }
button, .btn { transition:transform .12s ease, background .15s ease, opacity .15s ease, box-shadow .18s ease; }
.post img, .rxm-ava img, .avatar img { transition:opacity .2s ease; }
.badge { background:linear-gradient(135deg,#f91880,#e0006a);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:auto;min-width:18px;text-align:center;box-shadow:0 2px 6px rgba(249,24,128,.35); }
.spark-content-wrap { animation:sparkFadeIn .28s ease both; }
.spark-push-modal { position:fixed;inset:0;z-index:98000;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s; }
.spark-push-modal.show { opacity:1;pointer-events:all; }
.spark-push-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(10px); }
.spark-push-sheet { position:relative;background:var(--card,#fff);border-radius:28px 28px 0 0;width:100%;max-width:520px;padding:32px 24px 44px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);text-align:center; }
.spark-push-modal.show .spark-push-sheet { transform:translateY(0); }
.spark-push-icon { width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 10px 30px rgba(0,212,255,.45); }
.spark-push-icon svg { width:36px;height:36px;stroke:#fff;stroke-width:2; }
.spark-push-title { font-size:23px;font-weight:800;color:var(--fg,#1a1a2e);margin-bottom:8px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.spark-push-desc { font-size:15px;color:var(--sub,#8e8e93);line-height:1.6;margin-bottom:24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.spark-push-features { display:flex;flex-direction:column;gap:10px;margin-bottom:28px;text-align:left; }
.spark-push-feature { display:flex;align-items:center;gap:13px;background:var(--hover,#f0f2f5);border-radius:14px;padding:11px 15px; }
.spark-push-feature-emoji { font-size:20px;flex-shrink:0;width:32px;text-align:center; }
.spark-push-feature-text { font-size:13px;color:var(--fg,#1a1a2e);font-weight:500;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.spark-push-btn-allow { width:100%;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));color:#fff;border:none;font-size:16px;font-weight:700;cursor:pointer;margin-bottom:10px;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 20px rgba(0,212,255,.45);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:.2px; }
.spark-push-btn-allow:hover { transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,212,255,.55); }
.spark-push-btn-allow:active { transform:scale(.98); }
.spark-push-btn-later { width:100%;padding:14px;border-radius:16px;background:none;border:1.5px solid var(--border,#e5e5ea);color:var(--sub,#8e8e93);font-size:15px;font-weight:600;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;transition:all .15s; }
.spark-push-btn-later:hover { border-color:var(--accent,#00d4ff);color:var(--accent,#00d4ff); }
body.dark .spark-push-sheet { background:#16181c;--card:#16181c;--hover:#222;--fg:#fff;--sub:#71767b;--border:#2f3336; }
:root { --ease-out:cubic-bezier(.2, 0, 0, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--dur-fast:120ms;--dur-normal:200ms;--dur-slow:320ms; }
html { scroll-behavior:smooth; }
#page-transition { position:fixed;inset:0;background:var(--bg-color, #f4f6fb);z-index:9999;pointer-events:none;opacity:0;transition:opacity 180ms var(--ease-smooth); }
#page-transition.leaving { opacity:1; }
#page-transition.entering { opacity:1;animation:ptFadeOut 220ms 40ms var(--ease-out) forwards; }
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale { opacity:0;transition:opacity var(--dur-slow) var(--ease-smooth),
        transform var(--dur-slow) var(--ease-smooth);will-change:opacity, transform; }
.reveal-up { transform:translateY(20px); }
.reveal-left { transform:translateX(-24px); }
.reveal-right { transform:translateX(24px); }
.reveal-scale { transform:scale(.94); }
.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible { opacity:1;transform:none; }
.stagger > *:nth-child(1) { transition-delay:0ms; }
.stagger > *:nth-child(2) { transition-delay:40ms; }
.stagger > *:nth-child(3) { transition-delay:80ms; }
.stagger > *:nth-child(4) { transition-delay:120ms; }
.stagger > *:nth-child(5) { transition-delay:160ms; }
.stagger > *:nth-child(6) { transition-delay:200ms; }
.stagger > *:nth-child(7) { transition-delay:240ms; }
.stagger > *:nth-child(8) { transition-delay:280ms; }
.stagger > *:nth-child(n+9) { transition-delay:320ms; }
.ripple-host { position:relative;overflow:hidden; }
.ripple-wave { position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:rippleAnim 500ms var(--ease-out) forwards;pointer-events:none; }
.btn,
.submit-btn,
.btn-primary,
.follow-btn,
.fab { transition:background var(--dur-normal) var(--ease-smooth),
        color var(--dur-normal) var(--ease-smooth),
        border-color var(--dur-normal) var(--ease-smooth),
        box-shadow var(--dur-normal) var(--ease-smooth),
        transform var(--dur-fast) var(--ease-spring),
        opacity var(--dur-fast) var(--ease-smooth);-webkit-tap-highlight-color:transparent; }
.btn:active,
.submit-btn:active,
.btn-primary:active,
.follow-btn:active { transform:scale(.96) !important; }
.action:active { transform:scale(.88) !important; }
.action.just-liked svg,
.action.just-liked span:first-child { animation:likePop 380ms var(--ease-spring); }
img.spark-img { opacity:0;transition:opacity var(--dur-slow) var(--ease-smooth); }
img.spark-img.loaded { opacity:1; }
.skeleton { background:linear-gradient(
        90deg,
        var(--border-color, #e5e5ea) 25%,
        color-mix(in srgb, var(--border-color, #e5e5ea) 40%, transparent) 50%,
        var(--border-color, #e5e5ea) 75%
    );background-size:600px 100%;animation:shimmer 1.4s infinite linear;border-radius:8px; }
.skeleton-post { background:var(--card-bg, #fff);border:1px solid var(--border-color, #e5e5ea);border-radius:16px;padding:16px;margin-bottom:12px; }
.skeleton-avatar { width:44px;height:44px;border-radius:50%; }
.skeleton-line { height:12px;border-radius:6px;margin-bottom:8px; }
.skeleton-line.short { width:40%; }
.skeleton-line.medium { width:65%; }
.skeleton-line.long { width:90%; }
.skeleton-header { display:flex;gap:12px;align-items:center;margin-bottom:14px; }
.skeleton-header-text { flex:1; }
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:modalOverlayIn var(--dur-normal) var(--ease-smooth) both !important; }
.modal-overlay.closing { animation:modalOverlayOut 180ms var(--ease-smooth) forwards !important; }
.modal-overlay.closing .modal-card { animation:slideDown 180ms var(--ease-smooth) forwards !important; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select { transition:border-color var(--dur-normal) var(--ease-smooth),
        box-shadow var(--dur-normal) var(--ease-smooth),
        background var(--dur-normal) var(--ease-smooth) !important; }
.tab::after { transition:width var(--dur-normal) var(--ease-spring) !important; }
.menu-item, .nav-link { transition:background var(--dur-fast) var(--ease-smooth),
        color var(--dur-fast) var(--ease-smooth),
        transform var(--dur-fast) var(--ease-smooth) !important; }
.menu-item:active, .nav-link:active { transform:scale(.97); }
.post-avatar, .avatar, img[class*="avatar"] { transition:transform var(--dur-normal) var(--ease-spring) !important; }
.post-avatar:hover, .avatar:hover { transform:scale(1.08) !important; }
.count-anim { display:inline-block;transition:transform var(--dur-fast) var(--ease-spring); }
.count-anim.bump { animation:countBump var(--dur-normal) var(--ease-spring); }
.fab:hover { transform:scale(1.1) rotate(8deg) !important;box-shadow:0 10px 32px rgba(0,212,255,.5); }
.fab:active { transform:scale(.94) !important; }
.settings-section, .profile-card, .card { transition:box-shadow var(--dur-normal) var(--ease-smooth),
        transform var(--dur-normal) var(--ease-smooth),
        border-color var(--dur-normal) var(--ease-smooth) !important; }
img { transition:opacity 0.3s ease, transform 0.2s ease; }
body.dark .post:hover { box-shadow:0 4px 20px rgba(0,0,0,.3); }
body:not(.custom-theme)[data-theme="ocean"] { background:#e8f4fd !important;color:#0a2540 !important;--bg-color:#e8f4fd !important;--text-color:#0a2540 !important;--card-bg:#ffffff !important;--border-color:#b3d9f5 !important;--hover-bg:#d0eaf8 !important;--secondary-text:#4a7fa5 !important;--input-bg:#f0f8ff !important;--sidebar-bg:#ffffff !important;--sidebar-text:#0a2540 !important;--sidebar-hover:#daeeff !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#0077b6 !important;--accent2:#00b4d8 !important;--accent-rgb:0,119,182 !important; }
body:not(.custom-theme)[data-theme="forest"] { background:#f0f7f0 !important;color:#1b3a1b !important;--bg-color:#f0f7f0 !important;--text-color:#1b3a1b !important;--card-bg:#ffffff !important;--border-color:#b8d8b8 !important;--hover-bg:#ddefdd !important;--secondary-text:#4a7a4a !important;--input-bg:#f5faf5 !important;--sidebar-bg:#ffffff !important;--sidebar-text:#1b3a1b !important;--sidebar-hover:#ddefdd !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#2e7d32 !important;--accent2:#43a047 !important;--accent-rgb:46,125,50 !important; }
body:not(.custom-theme)[data-theme="sunset"] { background:#fff8f0 !important;color:#3e1f00 !important;--bg-color:#fff8f0 !important;--text-color:#3e1f00 !important;--card-bg:#ffffff !important;--border-color:#ffd7b0 !important;--hover-bg:#ffede0 !important;--secondary-text:#a05020 !important;--input-bg:#fff5ed !important;--sidebar-bg:#ffffff !important;--sidebar-text:#3e1f00 !important;--sidebar-hover:#ffede0 !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#e64a19 !important;--accent2:#ff7043 !important;--accent-rgb:230,74,25 !important; }
body:not(.custom-theme)[data-theme="midnight"] { background:#0d0d1a !important;color:#e0e0ff !important;--bg-color:#0d0d1a !important;--text-color:#e0e0ff !important;--card-bg:#1a1a2e !important;--border-color:#2a2a4a !important;--hover-bg:#1f1f35 !important;--secondary-text:#7070b0 !important;--input-bg:#111125 !important;--sidebar-bg:#1a1a2e !important;--sidebar-text:#e0e0ff !important;--sidebar-hover:#1f1f35 !important;--header-bg:rgba(13,13,26,0.98) !important;--accent:#7c4dff !important;--accent2:#9c6aff !important;--accent-rgb:124,77,255 !important; }
body:not(.custom-theme)[data-theme="rose"] { background:#fff0f5 !important;color:#3a0020 !important;--bg-color:#fff0f5 !important;--text-color:#3a0020 !important;--card-bg:#ffffff !important;--border-color:#ffc0d8 !important;--hover-bg:#ffe0ee !important;--secondary-text:#b05070 !important;--input-bg:#fff5f8 !important;--sidebar-bg:#ffffff !important;--sidebar-text:#3a0020 !important;--sidebar-hover:#ffe0ee !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#e91e8c !important;--accent2:#f06292 !important;--accent-rgb:233,30,140 !important; }
body:not(.custom-theme)[data-theme="lavender"] { background:#f5f0ff !important;color:#2a0050 !important;--bg-color:#f5f0ff !important;--text-color:#2a0050 !important;--card-bg:#ffffff !important;--border-color:#d4b8ff !important;--hover-bg:#ece0ff !important;--secondary-text:#7040a0 !important;--input-bg:#faf5ff !important;--sidebar-bg:#ffffff !important;--sidebar-text:#2a0050 !important;--sidebar-hover:#ece0ff !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#7c3aed !important;--accent2:#9f68ff !important;--accent-rgb:124,58,237 !important; }
body:not(.custom-theme)[data-theme="coffee"] { background:#fdf6f0 !important;color:#2c1a0e !important;--bg-color:#fdf6f0 !important;--text-color:#2c1a0e !important;--card-bg:#ffffff !important;--border-color:#e8cdb0 !important;--hover-bg:#f5e8d8 !important;--secondary-text:#8b5a2b !important;--input-bg:#fdf0e8 !important;--sidebar-bg:#ffffff !important;--sidebar-text:#2c1a0e !important;--sidebar-hover:#f5e8d8 !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#6f4e37 !important;--accent2:#8d6e63 !important;--accent-rgb:111,78,55 !important; }
body:not(.custom-theme)[data-theme="arctic"] { background:#f0faff !important;color:#0a1e30 !important;--bg-color:#f0faff !important;--text-color:#0a1e30 !important;--card-bg:#ffffff !important;--border-color:#b0ddf5 !important;--hover-bg:#ddf0fc !important;--secondary-text:#3a7090 !important;--input-bg:#f5fbff !important;--sidebar-bg:#ffffff !important;--sidebar-text:#0a1e30 !important;--sidebar-hover:#ddf0fc !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#0284c7 !important;--accent2:#38bdf8 !important;--accent-rgb:2,132,199 !important; }
body:not(.custom-theme)[data-theme="mint"] { background:#f0fff8 !important;color:#0a2a1e !important;--bg-color:#f0fff8 !important;--text-color:#0a2a1e !important;--card-bg:#ffffff !important;--border-color:#a8eecb !important;--hover-bg:#d0f5e4 !important;--secondary-text:#2e7a55 !important;--input-bg:#f5fffc !important;--sidebar-bg:#ffffff !important;--sidebar-text:#0a2a1e !important;--sidebar-hover:#d0f5e4 !important;--header-bg:rgba(255,255,255,0.97) !important;--accent:#059669 !important;--accent2:#34d399 !important;--accent-rgb:5,150,105 !important; }
body:not(.custom-theme)[data-theme="aurora"] { background:#060b1e !important;color:#d8f0e8 !important;--bg-color:#060b1e !important;--text-color:#d8f0e8 !important;--card-bg:rgba(10,25,45,0.82) !important;--border-color:rgba(80,200,140,0.22) !important;--hover-bg:rgba(80,200,140,0.08) !important;--secondary-text:#70c0a0 !important;--input-bg:rgba(8,20,38,0.9) !important;--sidebar-bg:rgba(6,14,30,0.97) !important;--sidebar-text:#d8f0e8 !important;--sidebar-hover:rgba(80,200,140,0.1) !important;--header-bg:rgba(6,11,30,0.95) !important;--accent:#00d4aa !important;--accent2:#00e5b0 !important;--accent-rgb:0,212,170 !important; }
body:not(.custom-theme)[data-theme="aurora"]::before { content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(-45deg, #060b1e, #0a1a30, #063320, #0a2240, #1a063a, #060b1e);background-size:400% 400%;animation:aurораGradient 7s ease infinite, auroraShimmer 3s ease-in-out infinite;pointer-events:none; }
body:not(.custom-theme)[data-theme="aurora"] .tabs .tab.active { color:#00d4aa;border-bottom-color:#00d4aa; }
body:not(.custom-theme)[data-theme="aurora"] .fab { background:linear-gradient(135deg, #008060, #00d4aa); }
body:not(.custom-theme)[data-theme="neon"] { background:var(--bg-color);color:var(--text-color);--bg-color:#08080f !important;--text-color:#e8e0ff !important;--card-bg:#11111e !important;--border-color:rgba(190,0,255,0.3) !important;--hover-bg:rgba(190,0,255,0.06) !important;--secondary-text:#9060c0 !important;--input-bg:#0d0d1a !important;--sidebar-bg:#0e0e1c !important;--sidebar-text:#e8e0ff !important;--sidebar-hover:rgba(190,0,255,0.08) !important;--header-bg:rgba(8,8,15,0.98) !important;--accent:#be00ff !important;--accent2:#e040fb !important;--accent-rgb:190,0,255 !important; }
body:not(.custom-theme)[data-theme="neon"] .tabs .tab.active { color:#be00ff;border-bottom-color:#be00ff; }
body:not(.custom-theme)[data-theme="neon"] .fab { background:linear-gradient(135deg, #4a0080, #be00ff);box-shadow:0 0 20px rgba(190,0,255,0.5); }
body:not(.custom-theme)[data-theme="galaxy"] { background:#020610 !important;color:#d0d8f8 !important;--bg-color:#020610 !important;--text-color:#d0d8f8 !important;--card-bg:rgba(8,14,40,0.85) !important;--border-color:rgba(80,110,255,0.22) !important;--hover-bg:rgba(80,110,255,0.07) !important;--secondary-text:#5568c0 !important;--input-bg:rgba(6,10,30,0.92) !important;--sidebar-bg:rgba(4,8,24,0.97) !important;--sidebar-text:#d0d8f8 !important;--sidebar-hover:rgba(80,110,255,0.1) !important;--header-bg:rgba(2,6,16,0.97) !important;--accent:#4070ff !important;--accent2:#7b9fff !important;--accent-rgb:64,112,255 !important; }
body:not(.custom-theme)[data-theme="galaxy"]::before { content:'';position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 30%, rgba(40,30,100,0.6) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(20,60,120,0.5) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 50%, rgba(5,10,40,0.9) 0%, #020610 100%);pointer-events:none; }
body:not(.custom-theme)[data-theme="galaxy"]::after { content:'';position:fixed;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 10% 15%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 8%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 55%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 5%  70%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 80%, #fff 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 65%, rgba(150,180,255,0.9) 0%, transparent 100%),
        radial-gradient(2px 2px at 92% 45%, rgba(200,200,255,0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 90%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 88%, rgba(255,255,255,0.8) 0%, transparent 100%);animation:starTwinkle 1.8s ease-in-out infinite alternate;pointer-events:none; }
body:not(.custom-theme)[data-theme="galaxy"] .tabs .tab.active { color:#6090ff;border-bottom-color:#6090ff; }
body:not(.custom-theme)[data-theme="galaxy"] .fab { background:linear-gradient(135deg, #1a1060, #4070ff);box-shadow:0 0 20px rgba(64,112,255,0.5); }
body:not(.custom-theme)[data-theme="fire"] { background:#0a0303 !important;color:#fce8d5 !important;--bg-color:#0a0303 !important;--text-color:#fce8d5 !important;--card-bg:rgba(25,8,4,0.88) !important;--border-color:rgba(255,80,20,0.25) !important;--hover-bg:rgba(255,80,20,0.08) !important;--secondary-text:#c06040 !important;--input-bg:rgba(20,6,3,0.9) !important;--sidebar-bg:rgba(12,4,2,0.97) !important;--sidebar-text:#fce8d5 !important;--sidebar-hover:rgba(255,80,20,0.1) !important;--header-bg:rgba(10,3,3,0.97) !important;--accent:#ff4500 !important;--accent2:#ff6030 !important;--accent-rgb:255,69,0 !important; }
body:not(.custom-theme)[data-theme="fire"]::before { content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(0deg, #ff4500 0%, #cc2200 15%, #880800 35%, #440200 60%, #0a0303 100%);background-size:100% 300%;animation:fireGradient 2.5s ease-in-out infinite;opacity:0.55;pointer-events:none; }
body:not(.custom-theme)[data-theme="fire"] .tabs .tab.active { color:#ff6030;border-bottom-color:#ff6030; }
body:not(.custom-theme)[data-theme="fire"] .fab { background:linear-gradient(135deg, #880800, #ff4500);box-shadow:0 0 20px rgba(255,69,0,0.5); }
body:not(.custom-theme)[data-theme="candy"] { background:#fdf0ff !important;color:#2d0040 !important;--bg-color:#fdf0ff !important;--text-color:#2d0040 !important;--card-bg:rgba(255,255,255,0.88) !important;--border-color:rgba(200,100,255,0.25) !important;--hover-bg:rgba(200,100,255,0.07) !important;--secondary-text:#a060c0 !important;--input-bg:rgba(255,255,255,0.95) !important;--sidebar-bg:rgba(255,250,255,0.97) !important;--sidebar-text:#2d0040 !important;--sidebar-hover:rgba(200,100,255,0.08) !important;--header-bg:rgba(253,240,255,0.97) !important;--accent:#c060ff !important;--accent2:#e040c0 !important;--accent-rgb:192,96,255 !important; }
body:not(.custom-theme)[data-theme="candy"]::before { content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg, #ffd6ff, #ffc8e8, #c8e8ff, #c8ffd6, #ffffc8, #ffd6ff);background-size:400% 400%;animation:candyGradient 5s ease infinite;opacity:0.7;pointer-events:none; }
body:not(.custom-theme)[data-theme="candy"] .tabs .tab.active { color:#c060ff;border-bottom-color:#c060ff; }
body:not(.custom-theme)[data-theme="candy"] .fab { background:linear-gradient(135deg, #e040c0, #c060ff);box-shadow:0 0 18px rgba(192,96,255,0.4); }
body:not(.custom-theme)[data-theme="storm"] { background:#060810 !important;color:#cdd8f0 !important;--bg-color:#060810 !important;--text-color:#cdd8f0 !important;--card-bg:rgba(12,16,30,0.88) !important;--border-color:rgba(80,120,255,0.2) !important;--hover-bg:rgba(80,120,255,0.06) !important;--secondary-text:#5060a0 !important;--input-bg:rgba(8,12,24,0.92) !important;--sidebar-bg:rgba(6,8,18,0.97) !important;--sidebar-text:#cdd8f0 !important;--sidebar-hover:rgba(80,120,255,0.1) !important;--header-bg:rgba(6,8,16,0.98) !important;--accent:#5080ff !important;--accent2:#7090ff !important;--accent-rgb:80,128,255 !important; }
body:not(.custom-theme)[data-theme="storm"]::before { content:'';position:fixed;inset:0;z-index:-2;background:linear-gradient(170deg, #060810, #0a1030, #0c0820, #060810);background-size:300% 300%;animation:stormShift 5s ease infinite;pointer-events:none; }
body:not(.custom-theme)[data-theme="storm"]::after { content:'';position:fixed;inset:0;z-index:-1;background:rgba(120,160,255,0.9);animation:stormFlash 3s ease-in-out infinite;pointer-events:none; }
body:not(.custom-theme)[data-theme="storm"] .tabs .tab.active { color:#7090ff;border-bottom-color:#7090ff; }
body:not(.custom-theme)[data-theme="storm"] .fab { background:linear-gradient(135deg, #1a2060, #5080ff);box-shadow:0 0 20px rgba(80,128,255,0.5); }
body:not(.custom-theme)[data-theme="wave"] { background:#020b18 !important;color:#d0eeff !important;--bg-color:#020b18 !important;--text-color:#d0eeff !important;--card-bg:rgba(4,20,45,0.85) !important;--border-color:rgba(0,160,255,0.22) !important;--hover-bg:rgba(0,160,255,0.07) !important;--secondary-text:#3080b0 !important;--input-bg:rgba(4,16,36,0.92) !important;--sidebar-bg:rgba(2,10,22,0.97) !important;--sidebar-text:#d0eeff !important;--sidebar-hover:rgba(0,160,255,0.1) !important;--header-bg:rgba(2,10,20,0.98) !important;--accent:#00aaff !important;--accent2:#00d4ff !important;--accent-rgb:0,170,255 !important; }
body:not(.custom-theme)[data-theme="wave"]::before { content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg, #020b18, #00337a, #004d6e, #00667a, #003366, #020b18);background-size:400% 400%;animation:waveGradient 6s ease infinite;pointer-events:none; }
body:not(.custom-theme)[data-theme="wave"] .tabs .tab.active { color:#00aaff;border-bottom-color:#00aaff; }
body:not(.custom-theme)[data-theme="wave"] .fab { background:linear-gradient(135deg, #003080, #00aaff);box-shadow:0 0 20px rgba(0,170,255,0.45); }
.notif-toolbar { display:flex;justify-content:flex-end;padding:10px 16px 0;max-width:680px;margin:0 auto; }
.auth-success { background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#34d399;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px; }
.ban-card { text-align:center;animation:banSlideUp .5s cubic-bezier(.34,1.56,.64,1); }
.ban-icon { width:84px;height:84px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg, rgba(249,24,128,.18), rgba(224,0,106,.18));display:flex;align-items:center;justify-content:center; }
.ban-icon svg { width:42px;height:42px;stroke:#ff5c9d; }
.ban-card h1 { font-size:24px;font-weight:800;margin-bottom:6px;color:var(--text-color); }
.ban-subtitle { color:var(--secondary-text);font-size:14px;margin-bottom:26px; }
.ban-reason-box { background:var(--input-bg);border:1px solid var(--border-color);padding:18px;border-radius:16px;margin-bottom:18px;text-align:left; }
.ban-reason-row { display:flex;gap:12px;align-items:flex-start;margin-bottom:10px; }
.ban-reason-row:last-child { margin-bottom:0; }
.ban-reason-label { font-size:11px;font-weight:700;color:var(--secondary-text);text-transform:uppercase;letter-spacing:.6px;min-width:68px;margin-top:3px; }
.ban-reason-value { font-size:14px;color:var(--text-color);font-weight:500;flex:1; }
.ban-reason-value.danger { color:#ff5c9d; }
.ban-countdown-box { background:linear-gradient(135deg, rgba(251,191,36,.12), rgba(217,119,6,.10));border:1.5px solid rgba(251,191,36,.4);border-radius:16px;padding:18px;margin-bottom:22px; }
.ban-countdown-label { font-size:11px;color:#fbbf24;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px; }
.ban-countdown-timer { font-size:30px;font-weight:800;color:#fbbf24;font-variant-numeric:tabular-nums;letter-spacing:2px; }
.ban-perm-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(249,24,128,.15);color:#ff5c9d;border-radius:30px;padding:10px 22px;font-size:14px;font-weight:700;margin-bottom:18px; }
.ban-support-note { font-size:13px;color:var(--secondary-text);line-height:1.6; }
.post-modal-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.4);backdrop-filter:blur(8px);z-index:250;opacity:0;visibility:hidden;transition:all 0.3s ease; }
.post-modal-overlay.active { opacity:1;visibility:visible; }
.compose-modal { position:fixed;bottom:0;left:0;right:0;background:var(--card-bg);border-radius:28px 28px 0 0;padding:20px;z-index:300;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 -4px 20px rgba(0, 0, 0, 0.15); }
.compose-modal.open { transform:translateY(0); }
.compose-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-color); }
.compose-header h3 { font-size:20px;font-weight:600;color:var(--text-color); }
.close-compose { width:36px;height:36px;background:var(--hover-bg);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.close-compose svg { width:20px;height:20px;stroke:var(--text-color); }
.compose-input textarea { width:100%;padding:14px;border:1px solid var(--border-color);border-radius:18px;font-size:16px;font-family:inherit;resize:none;outline:none;background:var(--bg-color);color:var(--text-color); }
.compose-input textarea:focus { border-color:var(--accent,#00d4ff);background:var(--card-bg); }
.compose-footer { display:flex;justify-content:space-between;align-items:center;margin-top:16px; }
.image-upload-btn { background:var(--hover-bg);border:none;border-radius:30px;padding:10px 18px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--text-color); }
.image-upload-btn svg { width:20px;height:20px; }
.submit-post { background:var(--accent,#00d4ff);color:white;border:none;border-radius:30px;padding:10px 28px;font-weight:600;cursor:pointer; }
.images-preview { display:flex;gap:10px;margin-top:16px;flex-wrap:wrap; }
.preview-item { position:relative;width:80px;height:80px;border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1); }
.preview-item img { width:100%;height:100%;object-fit:cover; }
.remove-image { position:absolute;top:4px;right:4px;background:rgba(0, 0, 0, 0.6);color:white;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center; }
.post-name-wrapper { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.reactions-wrap-idx { position:relative;display:inline-flex;align-items:center; }
.idx-reactions-picker { position:absolute;bottom:calc(100% + 8px);left:0;background:var(--card-bg, #fff);border:1px solid var(--border-color);border-radius:30px;padding:6px 10px;display:flex;gap:4px;z-index:100;box-shadow:0 4px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.15s, visibility 0.15s, transform 0.15s;transform:translateY(6px);white-space:nowrap; }
.reactions-wrap-idx.open .idx-reactions-picker { opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); }
.idx-reaction-opt { font-size:22px;line-height:1;cursor:pointer;padding:3px;border-radius:50%;transition:transform 0.1s;user-select:none; }
.idx-reaction-opt:hover { transform:scale(1.35); }
.reactions-bar-idx { display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 2px; }
.post-menu-btn:hover { background:var(--hover-bg); }
.menu-item.report { color:#f59e0b; }
.menu-item svg { width:18px;height:18px; }
.comments-modal { display:none;position:fixed;bottom:0;left:0;right:0;top:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(8px);z-index:1000;align-items:flex-end;justify-content:center; }
.comments-modal.show { display:flex; }
.comments-modal-content { background:var(--card-bg);width:100%;max-width:600px;height:85vh;border-radius:28px 28px 0 0;display:flex;flex-direction:column;animation:slideUp 0.3s ease; }
.comments-modal-header { display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color); }
.comments-modal-header h3 { font-size:18px;font-weight:600;color:var(--text-color); }
.close-comments-modal { background:none;border:none;font-size:28px;cursor:pointer;color:var(--secondary-text); }
.quoted-comment { background:var(--bg-color);padding:8px 12px;border-radius:12px;margin-bottom:8px;border-left:3px solid var(--accent,#00d4ff);font-size:13px;color:var(--secondary-text); }
.repost-header { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary-text);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color); }
.repost-header svg { width:14px;height:14px; }
.repost-header a { color:var(--secondary-text);text-decoration:none;font-weight:600; }
.repost-header a:hover { color:var(--accent,#00d4ff); }
.repost-original { background:var(--hover-bg);border-radius:16px;padding:12px;margin:8px 0;border:1px solid var(--border-color);cursor:pointer; }
.repost-original:hover { border-color:var(--accent,#00d4ff); }
.repost-original-header { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.repost-original-avatar { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.repost-original-avatar img { width:100%;height:100%;object-fit:cover; }
.repost-original-username { font-weight:600;font-size:13px;color:var(--text-color); }
.repost-original-text { font-size:13px;color:var(--text-color);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.comment-actions { display:flex;gap:16px;margin-top:8px; }
.comment-action { font-size:12px;color:var(--secondary-text);cursor:pointer;transition:color 0.2s; }
.comment-action:hover { color:var(--accent,#00d4ff); }
.comment-action.delete { color:#dc2626; }
.comment-action.delete:hover { color:#b91c1c; }
.comment-form-container { padding:16px;border-top:1px solid var(--border-color); }
.reply-to { background:var(--hover-bg);padding:8px 12px;border-radius:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--secondary-text); }
.cancel-reply { background:none;border:none;font-size:18px;cursor:pointer;color:var(--secondary-text); }
.comment-input-wrapper textarea { flex:1;padding:12px;border:1px solid var(--border-color);border-radius:20px;font-size:14px;font-family:inherit;resize:none;outline:none;background:var(--input-bg);color:var(--text-color); }
.comment-input-wrapper textarea:focus { border-color:var(--accent,#00d4ff); }
.send-comment-btn { background:var(--accent,#00d4ff);color:white;border:none;border-radius:30px;padding:10px 20px;font-weight:600;cursor:pointer;transition:all 0.2s; }
.send-comment-btn:hover { background:#5a6fd6; }
.report-modal { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(8px);z-index:2000;align-items:center;justify-content:center; }
.report-modal.show { display:flex; }
.report-modal-content { background:var(--card-bg);border-radius:28px;width:90%;max-width:400px;overflow:hidden;animation:modalZoom 0.2s ease; }
.report-modal-header { padding:20px;text-align:center;border-bottom:1px solid var(--border-color); }
.report-modal-header h3 { font-size:20px;font-weight:700;color:var(--text-color); }
.report-modal-body { padding:20px; }
.report-reason:focus { border-color:var(--accent,#00d4ff); }
.report-modal-buttons { display:flex;border-top:1px solid var(--border-color); }
.report-modal-buttons button { flex:1;padding:14px;background:none;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.2s; }
.report-modal-buttons button:first-child { color:var(--secondary-text);border-right:1px solid var(--border-color); }
.report-modal-buttons button:first-child:hover { background:var(--hover-bg); }
.report-modal-buttons button:last-child { color:#f59e0b; }
.report-modal-buttons button:last-child:hover { background:rgba(245, 158, 11, 0.1); }
.confirm-modal { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(8px);z-index:2000;align-items:center;justify-content:center; }
.confirm-modal.show { display:flex; }
.confirm-modal-content { background:var(--card-bg);border-radius:28px;width:90%;max-width:340px;overflow:hidden;animation:modalZoom 0.2s ease;text-align:center; }
.confirm-modal-icon { width:60px;height:60px;background:#fee2e2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:24px auto 16px; }
.confirm-modal-icon svg { width:30px;height:30px;stroke:#dc2626; }
.confirm-modal-title { font-size:18px;font-weight:700;color:var(--text-color);margin-bottom:8px; }
.confirm-modal-message { font-size:14px;color:var(--secondary-text);padding:0 20px 20px; }
.confirm-modal-buttons { display:flex;border-top:1px solid var(--border-color); }
.confirm-modal-buttons button { flex:1;padding:14px;background:none;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.2s; }
.confirm-modal-buttons button:first-child { color:var(--secondary-text);border-right:1px solid var(--border-color); }
.confirm-modal-buttons button:first-child:hover { background:var(--hover-bg); }
.confirm-modal-buttons button:last-child { color:#dc2626; }
.confirm-modal-buttons button:last-child:hover { background:#fee2e2; }
.post-limit-modal { position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:none;align-items:center;justify-content:center;animation:fadeIn 0.3s ease; }
.post-limit-overlay { position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.post-limit-content { position:relative;background:var(--card-bg, #fff);border-radius:28px;padding:40px 32px 32px;max-width:400px;width:90%;text-align:center;box-shadow:0 24px 60px rgba(0, 0, 0, 0.3);animation:slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);z-index:10; }
.post-limit-icon { font-size:48px;margin-bottom:12px;display:block; }
.post-limit-content h3 { font-size:22px;font-weight:700;color:var(--text-color, #1a1a2e);margin-bottom:8px; }
.post-limit-content p { font-size:14px;color:var(--secondary-text, #8e8e93);line-height:1.5;margin-bottom:4px; }
.post-limit-timer { font-size:52px;font-weight:800;color:var(--accent,#00d4ff);font-variant-numeric:tabular-nums;margin:12px 0 4px;font-family:'Courier New', monospace;letter-spacing:4px; }
.post-limit-hint { font-size:13px;color:var(--secondary-text, #8e8e93);margin-bottom:20px; }
.post-limit-btn { background:linear-gradient(135deg, var(--accent,#00d4ff) 0%, var(--accent2,#0ea5e9) 100%);color:white;border:none;border-radius:30px;padding:12px 40px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease; }
.post-limit-btn:hover { opacity:0.9;transform:scale(1.02); }
.post-limit-btn:active { transform:scale(0.98); }
body.dark .post-limit-content { background:#16181c; }
body.dark .post-limit-content h3 { color:#fff; }
body.dark .post-limit-content p,
        body.dark .post-limit-hint { color:#71767b; }
.hero { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:40px;padding:60px 40px;margin-bottom:30px;text-align:center;color:white;position:relative;overflow:hidden; }
.hero::before { content:'';position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:rgba(255,255,255,0.1);border-radius:50%; }
.hero::after { content:'';position:absolute;bottom:-30%;left:-20%;width:250px;height:250px;background:rgba(255,255,255,0.08);border-radius:50%; }
.hero-icon { width:100px;height:100px;background:rgba(255,255,255,0.2);border-radius:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3); }
.hero-icon svg { width:50px;height:50px;stroke:white; }
.hero h1 { font-size:48px;font-weight:800;margin-bottom:12px;letter-spacing:-1px; }
.hero p { font-size:18px;opacity:0.9;max-width:500px;margin:0 auto; }
.mission-card { background:var(--card-bg);border-radius:32px;padding:40px;margin-bottom:30px;border:1px solid var(--border-color);text-align:center; }
.mission-icon { width:70px;height:70px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px; }
.mission-icon svg { width:36px;height:36px;stroke:white; }
.mission-title { font-size:28px;font-weight:700;margin-bottom:16px;color:var(--text-color); }
.mission-text { font-size:16px;line-height:1.6;color:var(--secondary-text);max-width:600px;margin:0 auto; }
.features-grid { display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:20px;margin-bottom:30px; }
.feature-card { background:var(--card-bg);border-radius:28px;padding:28px;border:1px solid var(--border-color);transition:transform 0.2s, box-shadow 0.2s; }
.feature-card:hover { transform:translateY(-4px);box-shadow:0 12px 30px rgba(0, 0, 0, 0.08); }
.feature-title { font-size:20px;font-weight:700;margin-bottom:10px;color:var(--text-color); }
.feature-desc { font-size:14px;line-height:1.5;color:var(--secondary-text); }
.premium-guide { background:linear-gradient(135deg, rgba(var(--accent-rgb,0,212,255),0.05), rgba(14,165,233,0.05));border-radius:32px;padding:40px;margin-bottom:30px;border:1px solid var(--border-color); }
.premium-guide-title { font-size:26px;font-weight:700;margin-bottom:28px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);text-align:center; }
.guide-steps { display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:24px; }
.step-card { text-align:center;background:var(--card-bg);border-radius:24px;padding:24px;border:1px solid var(--border-color); }
.step-number { width:48px;height:48px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:20px;margin:0 auto 16px; }
.step-title { font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text-color); }
.step-desc { font-size:13px;color:var(--secondary-text);line-height:1.5; }
.faq-card { background:var(--card-bg);border-radius:32px;padding:40px;border:1px solid var(--border-color); }
.faq-title { font-size:26px;font-weight:700;margin-bottom:28px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);text-align:center; }
.faq-list { display:flex;flex-direction:column;gap:12px; }
.faq-item { border:1px solid var(--border-color);border-radius:20px;overflow:hidden; }
.faq-question { display:flex;justify-content:space-between;align-items:center;padding:18px 24px;cursor:pointer;background:var(--hover-bg);font-weight:500;font-size:15px;color:var(--text-color);transition:background 0.2s; }
.faq-question:hover { background:var(--border-color); }
.faq-arrow { transition:transform 0.3s; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-answer { display:none;padding:20px 24px;font-size:14px;line-height:1.5;color:var(--secondary-text);background:var(--card-bg);border-top:1px solid var(--border-color); }
.faq-item.open .faq-answer { display:block; }
.settings-section:has(> .section-header:only-child):hover,
        .settings-section[onclick]:hover { border-color:var(--accent,#00d4ff);box-shadow:0 4px 20px rgba(0,212,255,.12);transform:translateY(-1px); }
.section-header { display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-color); }
.section-icon { width:40px;height:40px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,212,255,.25); }
.section-icon svg { width:22px;height:22px;stroke:white; }
.section-desc { font-size:13px;color:var(--secondary-text);margin-top:2px; }
.setting-item { display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border-color);gap:16px; }
.setting-item:last-child { border-bottom:none; }
.setting-info { flex:1; }
.setting-label { font-weight:600;font-size:16px;color:var(--text-color);margin-bottom:4px; }
.setting-description { font-size:13px;color:var(--secondary-text); }
.toggle-switch { position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-slider { position:absolute;cursor:pointer;inset:0;background:#d1d5db;transition:0.3s;border-radius:34px;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1; }
.toggle-slider:before { position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:white;transition:0.3s;border-radius:50%; }
input:checked + .toggle-slider { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));background-color:var(--accent,#00d4ff); }
input:checked + .toggle-slider:before { transform:translateX(24px); }
.theme-option { flex:1;min-width:100px;cursor:pointer; }
.theme-option input { display:none; }
.theme-option input:checked + .theme-card { border-color:var(--accent,#00d4ff);background:rgba(0,212,255, 0.1); }
.theme-icon svg { width:32px;height:32px;margin-bottom:8px; }
input { width:100%;padding:12px 16px;border:1px solid var(--border-color);border-radius:16px;font-size:15px;outline:none;background:var(--input-bg);color:var(--text-color); }
input:focus { border-color:var(--accent,#00d4ff);background:var(--card-bg); }
.mark-all-btn { background:none;border:none;color:var(--accent,#00d4ff);font-size:14px;font-weight:600;cursor:pointer;padding:6px 12px;border-radius:20px;transition:background .2s; }
.mark-all-btn:hover { background:rgba(var(--accent-rgb,0,212,255),.1); }
.date-group { margin-bottom:20px; }
.date-title { font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--sub);padding:0 4px 10px;margin-bottom:10px;padding-left:8px; }
.notification-item { background:var(--card);border-radius:20px;padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:14px;border:1px solid var(--border);cursor:pointer;transition:all .2s;text-decoration:none;animation:fadeInUp .25s cubic-bezier(.4,0,.2,1) both; }
.notification-item.unread { background:rgba(var(--accent-rgb,0,212,255),.05);border-left:3px solid var(--accent,#00d4ff); }
.notification-item:active { transform:scale(.98); }
.notification-avatar { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(var(--accent-rgb, 0,212,255),.2); }
.notification-avatar img { width:100%;height:100%;object-fit:cover; }
.notification-avatar svg { width:28px;height:28px;stroke:white; }
.notification-content { flex:1;min-width:0; }
.notification-header { display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:4px; }
.notification-username { font-weight:700;font-size:15px;color:var(--fg); }
.notification-badge { font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--hover);color:var(--sub); }
.notification-badge.like { background:rgba(249,24,128,.1);color:#f91880; }
.notification-badge.comment { background:rgba(var(--accent-rgb,0,212,255),.1);color:var(--accent,#00d4ff); }
.notification-badge.follow { background:rgba(16,185,129,.1);color:#10b981; }
.notification-badge.repost { background:rgba(245,158,11,.1);color:#f59e0b; }
.notification-badge.reply { background:rgba(var(--accent-rgb,0,212,255),.15);color:var(--accent,#00d4ff); }
.notification-badge.like_comment { background:rgba(249,24,128,.1);color:#f91880; }
.notification-badge.reaction { background:rgba(245,158,11,.12);color:#f59e0b; }
.notification-text { font-size:14px;color:var(--fg);line-height:1.4;margin-bottom:4px; }
.notification-time { font-size:11px;color:var(--sub);margin-top:4px; }
.goto-link { display:inline-block;align-items:center;gap:4px;margin-top:5px;font-size:12px;color:var(--accent,#00d4ff);font-weight:600;text-decoration:none; }
.goto-link:hover { text-decoration:underline; }
.empty-state svg { width:70px;height:70px;stroke:var(--sub);margin-bottom:16px;opacity:.6; }
.search-container { padding:12px 16px;background:var(--card-bg);border-bottom:1px solid var(--border-color); }
.search-input-wrapper { display:flex;align-items:center;background:var(--input-bg);border-radius:30px;padding:8px 16px;gap:10px;border:1px solid var(--border-color);transition:all 0.2s; }
.search-input-wrapper:focus-within { border-color:var(--accent,#00d4ff);background:var(--card-bg); }
.search-input-wrapper svg { width:20px;height:20px;stroke:var(--secondary-text); }
.search-input { flex:1;background:none;border:none;font-size:16px;outline:none;font-family:inherit;color:var(--input-text); }
.search-input::placeholder { color:var(--placeholder-color); }
.search-clear { background:none;border:none;cursor:pointer;padding:4px;display:none; }
.search-clear svg { width:18px;height:18px;stroke:var(--secondary-text); }
.tabs { display:flex;background:var(--card-bg);border-bottom:1px solid var(--border-color);position:sticky;top:56px;z-index:99;padding:0 4px; }
.hashtag-header { background:var(--card-bg);border-radius:20px;padding:20px;margin-bottom:16px;border:1px solid var(--border-color);text-align:center; }
.hashtag-name { font-size:24px;font-weight:700;color:var(--accent,#00d4ff); }
.hashtag-count { font-size:14px;color:var(--secondary-text);margin-left:8px; }
.user-card { background:var(--card-bg);border-radius:20px;padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;border:1px solid var(--border-color);cursor:pointer;transition:all 0.2s; }
.user-card:active { transform:scale(0.98); }
.user-avatar { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.user-avatar img { width:100%;height:100%;object-fit:cover; }
.user-avatar svg { width:28px;height:28px;stroke:white; }
.user-info { flex:1; }
.user-name { font-weight:700;font-size:16px;color:var(--text-color); }
.user-bio { font-size:13px;color:var(--secondary-text);margin-top:4px; }
.post-text .hashtag-link { color:var(--accent,#00d4ff);cursor:pointer;text-decoration:none; }
.post-text .hashtag-link:hover { text-decoration:underline; }
.section-title { font-size:14px;font-weight:600;color:var(--secondary-text);margin:12px 0 8px 4px; }
.loading { text-align:center;padding:40px;color:var(--secondary-text); }
.download-page { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px; }
.version { font-size:13px;color:var(--secondary);margin-bottom:28px; }
h2 { font-size:22px;font-weight:700;margin-bottom:10px; }
p { font-size:14px;color:var(--secondary);line-height:1.6;margin-bottom:28px; }
.btn svg { width:20px;height:20px; }
.back { display:block;margin-top:20px;font-size:13px;color:var(--secondary);text-decoration:none; }
.back:hover { color:var(--accent,#00d4ff); }
.features { text-align:left;margin-bottom:28px;display:flex;flex-direction:column;gap:8px; }
.feat { display:flex;align-items:center;gap:10px;font-size:13px;color:var(--secondary); }
.feat svg { flex-shrink:0;width:16px;height:16px;stroke:var(--accent,#00d4ff); }
.premium-banner { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:32px;padding:40px;text-align:center;margin-bottom:30px;color:white; }
.premium-banner h1 { font-size:36px;margin-bottom:12px; }
.premium-banner p { font-size:16px;opacity:0.9; }
.current-status { background:var(--card-bg);border-radius:28px;padding:24px;margin-bottom:30px;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px; }
.status-info { display:flex;align-items:center;gap:16px; }
.premium-icon { width:60px;height:60px;background:linear-gradient(135deg, #ffd700, #ff8c00);border-radius:50%;display:flex;align-items:center;justify-content:center; }
.premium-icon svg { width:32px;height:32px;stroke:white; }
.badge-premium { background:linear-gradient(135deg, #ffd700, #ff8c00);padding:8px 20px;border-radius:30px;font-weight:600;font-size:14px;color:#fff; }
.badge-regular { background:var(--hover-bg);padding:8px 20px;border-radius:30px;font-weight:600;font-size:14px;color:var(--secondary-text); }
.packages-grid { display:grid;grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));gap:24px;margin-bottom:40px; }
.package-card { background:var(--card-bg);border-radius:28px;border:1px solid var(--border-color);overflow:hidden;transition:transform 0.2s, box-shadow 0.2s; }
.package-card:hover { transform:translateY(-4px);box-shadow:0 12px 30px rgba(0, 0, 0, 0.1); }
.package-card.upgrade-card { border:2px solid #f59e0b; }
.package-header { background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));padding:24px;text-align:center;color:white; }
.package-header.upgrade-header { background:linear-gradient(135deg, #f59e0b, #ff8c00); }
.package-name { font-size:24px;font-weight:700;margin-bottom:8px; }
.package-desc { font-size:13px;opacity:0.9; }
.package-price { font-size:36px;font-weight:800;margin-top:12px; }
.package-duration { font-size:12px;opacity:0.8; }
.package-features { padding:20px; }
.feature-item { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-color);font-size:14px; }
.feature-item:last-child { border-bottom:none; }
.feature-check { width:20px;height:20px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.feature-check svg { width:14px;height:14px;stroke:white; }
.feature-icon { width:20px;height:20px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;margin-left:auto;flex-shrink:0; }
.feature-icon svg { width:18px;height:18px;stroke:var(--secondary-text); }
.communities-badge { background:var(--hover-bg);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:500;margin-left:auto; }
.package-footer { padding:20px;border-top:1px solid var(--border-color); }
.buy-btn { width:100%;background:var(--accent,#00d4ff);color:white;border:none;border-radius:30px;padding:14px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px; }
.buy-btn svg { width:18px;height:18px;stroke:white; }
.buy-btn:hover { background:#5a6fd6;transform:translateY(-1px); }
.buy-btn.disabled { background:var(--border-color);cursor:not-allowed; }
.settings-section { background:var(--card-bg);border-radius:28px;padding:24px;margin-bottom:20px;border:1px solid var(--border-color);transition:all 0.2s;margin-top:30px; }
.settings-title { font-size:24px;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--border-color); }
.preview-box { background:var(--hover-bg);border-radius:20px;padding:20px;text-align:center;margin-bottom:20px; }
.preview-name { font-size:18px;font-weight:700;margin-bottom:8px; }
.preview-badge { display:inline-flex;align-items:center;gap:6px;background:rgba(var(--accent-rgb,0,212,255),0.1);padding:6px 12px;border-radius:30px;font-size:13px; }
.color-options { display:flex;gap:12px;flex-wrap:wrap;margin-top:12px; }
.color-option { width:40px;height:40px;border-radius:50%;cursor:pointer;border:2px solid var(--border-color);transition:transform 0.2s; }
.color-option.selected { border-color:var(--accent,#00d4ff);transform:scale(1.1);box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--accent,#00d4ff); }
.theme-options { display:grid;gap:16px;flex-wrap:wrap;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));margin-top:12px; }
.theme-card { background:var(--hover-bg);border:2px solid transparent;border-radius:20px;padding:16px;text-align:center;transition:all 0.2s;cursor:pointer; }
.theme-card.selected { border-color:var(--accent,#00d4ff);background:rgba(var(--accent-rgb,0,212,255),0.1); }
.theme-preview { width:100%;height:80px;border-radius:16px;margin-bottom:12px;position:relative;overflow:hidden; }
.theme-name { font-size:14px;font-weight:500;color:var(--text-color); }
.btn-full { width:100%; }
.toast { position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);color:white;padding:10px 20px;border-radius:40px;font-size:13px;z-index:1500;opacity:0;transition:all 0.3s;pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0);opacity:1; }
.hdr { position:sticky;top:0;background:var(--hdr);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;z-index:100; }
.logo { font-size:20px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px; }
.new-btn { width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(var(--accent-rgb,0,212,255),.35);transition:transform .15s,box-shadow .15s; }
.new-btn:hover { transform:scale(1.08);box-shadow:0 4px 16px rgba(var(--accent-rgb,0,212,255),.5); }
.new-btn svg { width:16px;height:16px;stroke:white;stroke-width:2.5; }
.srch { padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border); }
.srch-inner { display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:22px;padding:8px 14px;border:1px solid var(--border);transition:border-color .2s; }
.srch-inner:focus-within { border-color:var(--accent); }
.srch-inner svg { width:15px;height:15px;stroke:var(--sub);flex-shrink:0; }
.srch-inner input { flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--fg);font-family:inherit; }
.srch-inner input::placeholder { color:var(--sub); }
.sec-lbl { padding:10px 16px 4px;font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.5px;text-transform:uppercase; }
.row { display:flex;gap:12px;padding:12px 16px;cursor:pointer;background:var(--card);border-bottom:1px solid var(--border);transition:background .15s;align-items:center; }
.row:hover,.row:active { background:var(--hover); }
.row.unread .rname { font-weight:800; }
.row.unread .rprev { color:var(--fg);font-weight:600; }
.ava { width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.ava img { width:100%;height:100%;object-fit:cover; }
.ava svg { width:24px;height:24px;stroke:white; }
.ava.sm { width:44px;height:44px; }
.rbody { flex:1;min-width:0; }
.rname-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:3px; }
.rname { font-size:15px;font-weight:700;color:var(--fg); }
.rtime { font-size:11px;color:var(--sub);flex-shrink:0;margin-left:6px; }
.rbot { display:flex;align-items:center;justify-content:space-between;gap:6px; }
.rprev { font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.ubadge { background:var(--accent);color:#fff;border-radius:50%;min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 4px; }
.co { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);z-index:5000;align-items:flex-end;justify-content:center; }
.co.show { display:flex; }
.cs { background:var(--card);border-radius:28px 28px 0 0;width:100%;max-width:680px;height:90vh;display:flex;flex-direction:column;animation:slideUp .28s cubic-bezier(.4,0,.2,1); }
.ch { display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0; }
.cb { width:36px;height:36px;border:none;background:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.cb:hover { background:var(--hover); }
.cb svg { width:20px;height:20px;stroke:var(--fg); }
.chi { flex:1;min-width:0; }
.chn { font-weight:700;font-size:16px;color:var(--fg);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chn:hover { text-decoration:underline; }
.chs { font-size:12px;color:var(--sub); }
.cpb { padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:none;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s; }
.cpb:hover { border-color:var(--accent);color:var(--accent); }
.cm { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth; }
.cm::-webkit-scrollbar { width:3px; }
.cm::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }
.dsep { text-align:center;font-size:11px;color:var(--sub);padding:8px 0;margin:4px 0;font-weight:600; }
.mg { display:flex;flex-direction:column;gap:2px; }
.mg.mine { align-items:flex-end; }
.mg.theirs { align-items:flex-start; }
.bbl { max-width:78%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word; }
.mine .bbl { background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-bottom-right-radius:4px; }
.theirs .bbl { background:var(--hover);color:var(--fg);border-bottom-left-radius:4px; }
.bt { font-size:10px;color:var(--sub);padding:0 4px; }
.mine .bt { text-align:right; }
.cir { display:flex;gap:10px;padding:10px 16px 16px;border-top:1px solid var(--border);align-items:flex-end;flex-shrink:0; }
.cinp { flex:1;padding:11px 16px;border:1.5px solid var(--border);border-radius:22px;font-size:14px;background:var(--inp);color:var(--fg);outline:none;font-family:inherit;resize:none;max-height:120px;transition:border-color .2s;line-height:1.4; }
.cinp:focus { border-color:var(--accent); }
.csnd { width:44px;height:44px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(var(--accent-rgb,0,212,255),.4);transition:transform .15s,opacity .15s; }
.csnd:hover { transform:scale(1.06); }
.csnd:disabled { opacity:.45;transform:none;cursor:not-allowed; }
.csnd svg { width:17px;height:17px;stroke:white;stroke-width:2.2; }
.po { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);z-index:6000;align-items:flex-end;justify-content:center; }
.po.show { display:flex; }
.ps { background:var(--card);border-radius:28px 28px 0 0;width:100%;max-width:680px;max-height:72vh;display:flex;flex-direction:column;animation:slideUp .28s cubic-bezier(.4,0,.2,1); }
.ph { display:flex;align-items:center;gap:12px;padding:16px 16px 14px; }
.pt { font-size:17px;font-weight:700;flex:1; }
.pcl { width:32px;height:32px;background:var(--hover);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.pcl:hover { background:var(--border); }
.pcl svg { width:16px;height:16px;stroke:var(--fg); }
.pl { overflow-y:auto;flex:1; }
.pi { display:flex;gap:12px;padding:12px 16px;cursor:pointer;align-items:center;transition:background .15s; }
.pi:hover { background:var(--hover); }
.pin { font-size:15px;font-weight:600;color:var(--fg); }
.pih { font-size:13px;color:var(--sub); }
.catt { width:38px;height:38px;border-radius:50%;flex-shrink:0;background:none;border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.catt:hover { border-color:var(--accent);background:rgba(var(--accent-rgb,0,212,255),.06); }
.catt svg { width:17px;height:17px;stroke:var(--fg);stroke-width:2; }
.attach-preview { padding:8px 16px 0;display:flex;flex-wrap:wrap;gap:8px; }
.attach-item { position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--accent);background:var(--hover); }
.attach-item img { width:100px;height:80px;object-fit:cover;display:block; }
.attach-item.file-att { display:flex;align-items:center;gap:8px;padding:8px 12px;min-width:160px; }
.attach-item.file-att svg { width:20px;height:20px;stroke:var(--accent);flex-shrink:0; }
.attach-item.file-att span { font-size:12px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px; }
.attach-remove { position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.65);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;line-height:1; }
.msg-img { max-width:200px;max-height:180px;border-radius:14px;display:block;cursor:pointer;margin-top:6px;object-fit:cover; }
.msg-file { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border-radius:12px;padding:8px 12px;margin-top:6px;cursor:pointer;text-decoration:none; }
.mine .msg-file { background:rgba(255,255,255,.2);color:#fff; }
.theirs .msg-file { background:var(--hover);color:var(--fg); }
.msg-file svg { width:18px;height:18px;flex-shrink:0; }
.msg-file span { font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px; }
.post-container { max-width:680px;margin:0 auto;padding:16px; }
.action.liked { color:#f91880; }
.comments-title { font-size:18px;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color);color:var(--text-color); }
.comment-item:last-child { border-bottom:none; }
.comment-header { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px; }
.comment-username { font-weight:600;font-size:14px;color:var(--text-color);cursor:pointer; }
.comment-username:hover { color:var(--accent,#00d4ff); }
.comment-form-avatar { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0; }
.comment-form-avatar img { width:100%;height:100%;object-fit:cover; }
.comment-input-wrapper { display:flex;gap:10px;align-items:flex-end;flex:1; }
.comment-input:focus { border-color:var(--accent,#00d4ff);background:var(--card-bg); }
.comment-submit:hover { transform:scale(1.05); }
.empty-comments { text-align:center;padding:40px;color:var(--secondary-text); }
.repost-label { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary-text);margin-bottom:12px; }
.repost-label svg { width:14px;height:14px;stroke:var(--secondary-text); }
.repost-label a { color:var(--secondary-text);font-weight:600;text-decoration:none; }
.repost-label a:hover { color:var(--accent,#00d4ff); }
.repost-original-block { background:var(--hover-bg);border-radius:16px;padding:14px;margin:10px 0;border:1px solid var(--border-color);cursor:pointer;transition:border-color 0.2s; }
.repost-original-block:hover { border-color:var(--accent,#00d4ff); }
.repost-orig-header { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.repost-orig-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0; }
.repost-orig-avatar img { width:100%;height:100%;object-fit:cover; }
.repost-orig-name { font-weight:600;font-size:14px; }
.repost-orig-text { font-size:14px;line-height:1.45;color:var(--text-color); }
.premium-badge svg { width:10px;height:10px;fill:white; }
.image-viewer { display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000; }
.image-viewer-overlay { position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.95);backdrop-filter:blur(20px); }
.image-viewer-container { position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.image-viewer-content { max-width:90%;max-height:85%;object-fit:contain;border-radius:16px; }
.image-viewer-close { position:absolute;top:20px;right:20px;width:44px;height:44px;background:rgba(255, 255, 255, 0.2);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.image-viewer-close svg { width:24px;height:24px;stroke:white; }
.comment-item { display:flex;gap:12px;margin-bottom:16px;padding:12px 0;background:var(--hover-bg);border-radius:20px;animation:commentFadeIn 0.4s ease;border-bottom:1px solid var(--border-color); }
.comment-actions-row { display:flex;gap:16px;margin-top:6px; }
.comment-action-btn { font-size:12px;color:var(--secondary-text);cursor:pointer;background:none;border:none;padding:0;transition:color 0.2s;font-family:inherit; }
.comment-action-btn:hover { color:var(--accent,#00d4ff); }
.comment-action-btn.del:hover { color:#e0245e; }
.reply-indicator { display:none;align-items:center;gap:8px;background:var(--hover-bg);border-radius:16px;padding:8px 14px;margin-bottom:10px;font-size:13px;color:var(--secondary-text); }
.reply-indicator a { color:var(--accent,#00d4ff);text-decoration:none;font-weight:600; }
.reply-indicator-cancel { margin-left:auto;background:none;border:none;font-size:18px;cursor:pointer;color:var(--secondary-text);line-height:1; }
.tab { flex:1;text-align:center;padding:12px 0;font-size:14px;font-weight:600;color:var(--secondary-text);cursor:pointer;transition:all 0.2s;position:relative;border:none;background:none;text-decoration:none;letter-spacing:-.1px; }
.tab.active { color:var(--accent,#00d4ff); }
.tab.active::after { content:'';position:absolute;bottom:-1px;left:50%;right:20%;height:3px;background:var(--accent,#00d4ff);border-radius:3px;transform:translateX(-50%);width:40px; }
.image-wrapper img { animation:imgFadeIn 0.45s cubic-bezier(.4,0,.2,1) both; }
.post-images.double .image-wrapper:nth-child(2) img { animation-delay:0.07s; }
.post-images.triple .image-wrapper:nth-child(2) img { animation-delay:0.07s; }
.post-images.triple .image-wrapper:nth-child(3) img { animation-delay:0.14s; }
.music-card { background:linear-gradient(135deg, var(--accent,#00d4ff)22, var(--accent2,#0ea5e9)22);border:1px solid var(--accent,#00d4ff)44;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin:8px 0; }
.music-play-btn { width:40px;height:40px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform 0.2s, opacity 0.2s;box-shadow:0 4px 12px rgba(var(--accent-rgb, 0,212,255),.3); }
.music-play-btn:hover { transform:scale(1.08);opacity:0.9; }
.music-play-btn svg { width:18px;height:18px;stroke:white;fill:white;margin-left:2px; }
.music-play-btn.playing svg { margin-left:0; }
.music-info { flex:1;min-width:0; }
.music-title { font-weight:600;font-size:14px;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.music-sub { font-size:11px;color:var(--secondary-text);margin-top:2px; }
.music-progress { flex:1;height:3px;background:var(--border-color);border-radius:3px;overflow:hidden; }
.music-progress-bar { height:100%;background:linear-gradient(90deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));width:0%;transition:width 0.3s; }
.reactions-wrap { position:relative;display:inline-flex;align-items:center; }
.reactions-picker { position:absolute;bottom:calc(100% + 8px);left:0;background:var(--card-bg, #fff);border:1px solid var(--border-color, #e5e5ea);border-radius:30px;padding:6px 10px;display:flex;gap:4px;z-index:100;box-shadow:0 4px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.15s, visibility 0.15s, transform 0.15s;transform:translateY(6px);white-space:nowrap; }
.reactions-wrap.open .reactions-picker { opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); }
.reaction-opt { font-size:22px;line-height:1;cursor:pointer;padding:3px;border-radius:50%;transition:transform 0.1s;user-select:none; }
.reaction-opt:hover { transform:scale(1.35); }
.post-reactions-bar { display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 2px;min-height:0; }
.post-menu { position:relative; }
.post-menu-btn { background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s; }
.post-menu-btn svg { width:18px;height:18px;stroke:var(--secondary-text); }
.post-menu-dropdown { position:absolute;top:100%;right:0;background:var(--card-bg);border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15);min-width:160px;z-index:100;display:none;overflow:hidden;border:1px solid var(--border-color); }
.post-menu-dropdown.show { display:block; }
.menu-item { display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background 0.2s;font-size:13px;color:var(--text-color); }
.menu-item:hover { background:var(--hover-bg); }
.menu-item.delete { color:#dc2626; }
.comments-section { background:var(--card-bg);border-radius:24px;padding:20px;border:1px solid var(--border-color);margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color);display:none; }
.comments-section.open { display:block; }
.comments-list { flex:1;overflow-y:auto;padding:16px;max-height:300px;margin-bottom:12px; }
.comment { display:flex;gap:8px;margin-bottom:10px;padding:8px;background:var(--hover-bg);border-radius:16px; }
.comment-avatar { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.comment-avatar img { width:100%;height:100%;object-fit:cover; }
.comment-avatar svg { width:16px;height:16px;stroke:white; }
.comment-content { flex:1; }
.comment-name { font-weight:600;font-size:12px;cursor:pointer; }
.comment-text { font-size:13px;color:var(--text-color);line-height:1.4;margin-bottom:8px;margin-top:2px; }
.comment-time { font-size:10px;color:var(--secondary-text);margin-top:2px; }
.comment-form { margin-top:20px;display:flex;gap:8px;align-items:flex-start; }
.comment-input { flex:1;padding:10px 12px;border:1px solid var(--border-color);border-radius:20px;font-size:13px;outline:none;background:var(--input-bg);color:var(--text-color);resize:none;font-family:inherit; }
.comment-submit { width:40px;height:40px;background:var(--accent,#00d4ff);color:white;border:none;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s;padding:8px 16px;font-size:12px; }
.fab { position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));box-shadow:0 4px 12px rgba(var(--accent-rgb, 0,212,255),0.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-normal) var(--ease-spring),
        box-shadow var(--dur-normal) var(--ease-smooth),
        background var(--dur-normal) var(--ease-smooth) !important;border:none;z-index:200; }
.fab svg { width:28px;height:28px;stroke:white;stroke-width:2; }
select { width:100%;padding:12px;border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg);color:var(--text-color);margin:16px 0; }
.fab-wrap { position:fixed;bottom:32px;right:32px;z-index:200;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px; }
.fab-wrap .fab { position:static; }
.fab-actions { display:flex;flex-direction:column;gap:10px;align-items:flex-end;overflow:hidden;max-height:0;transition:max-height .3s ease,opacity .3s;opacity:0;pointer-events:none; }
.fab-wrap.open .fab-actions { max-height:200px;opacity:1;pointer-events:auto; }
.fab-action-btn { display:flex;align-items:center;gap:10px;cursor:pointer;background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;padding:9px 16px 9px 12px;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:transform .15s; }
.fab-action-btn:hover { transform:translateX(-3px); }
.fab-action-icon { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fab-action-icon svg { width:16px;height:16px;stroke:white; }
.fab-action-label { font-weight:600;font-size:14px;color:var(--text-color);white-space:nowrap; }
.fab-overlay { display:none;position:fixed;inset:0;z-index:199; }
.fab-wrap.open .fab-overlay { display:block; }
.ticket-list { display:flex;flex-direction:column;gap:12px; }
.ticket-item { background:var(--hover-bg);border-radius:20px;padding:16px;cursor:pointer;transition:all 0.2s;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; }
.ticket-item:hover { transform:translateX(4px); }
.ticket-info { flex:1; }
.ticket-subject { font-weight:600;margin-bottom:4px; }
.ticket-date { font-size:12px;color:var(--secondary-text); }
.ticket-status { padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600; }
.status-open { background:rgba(16,185,129,0.1);color:#10b981; }
.status-pending { background:rgba(245,158,11,0.1);color:#f59e0b; }
.status-replied { background:rgba(var(--accent-rgb,0,212,255),0.1);color:var(--accent,#00d4ff); }
.status-closed { background:rgba(156,163,175,0.1);color:#9ca3af; }
.message-list { display:flex;flex-direction:column;gap:16px;margin-bottom:20px;max-height:500px;overflow-y:auto; }
.message { display:flex;gap:12px; }
.message-user { flex-direction:row; }
.message-admin { flex-direction:row-reverse; }
.message-avatar { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.message-avatar svg { width:22px;height:22px;stroke:white; }
.message-content { max-width:70%;background:var(--hover-bg);border-radius:20px;padding:12px 16px; }
.message-admin .message-content { background:rgba(var(--accent-rgb,0,212,255),0.1); }
.message-text { font-size:14px;line-height:1.45; }
.message-time { font-size:10px;color:var(--secondary-text);margin-top:6px;text-align:right; }
.btn-danger { background:#dc2626; }
.btn-danger:hover { background:#b91c1c; }
.btn-sm { padding:8px 16px;font-size:13px; }
.empty-state { text-align:center;padding:40px;color:var(--secondary-text);background:var(--card-bg);border-radius:20px;border:1px solid var(--border-color); }
.back-link { display:inline-flex;align-items:center;gap:8px;color:var(--accent,#00d4ff);text-decoration:none;margin-bottom:16px;font-size:14px; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--fg);min-height:100vh;--text:var(--text-color, #1a1a2e);--bg:var(--bg-color, #f5f7fb);--card:var(--card-bg, #fff);--border:var(--border-color, #e5e5ea);--hover:var(--hover-bg, #f0f2f5);--input:var(--input-bg, #f8f9fa);--sub:var(--secondary-text, #8e8e93); }
.page-desc { font-size:14px;color:var(--sub);margin-bottom:20px;padding:14px 16px;background:var(--card);border-radius:16px;border:1px solid var(--border); }
.page-desc strong { color:var(--fg); }
.blocked-list { display:flex;flex-direction:column;gap:12px; }
.blocked-card { background:var(--card);border-radius:20px;border:1px solid var(--border);padding:16px;display:flex;align-items:center;gap:14px;transition:all .2s; }
.blocked-card:hover { border-color:var(--accent); }
.blocked-ava { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.blocked-ava img { width:100%;height:100%;object-fit:cover; }
.blocked-ava svg { width:26px;height:26px;stroke:white; }
.blocked-info { flex:1;min-width:0; }
.blocked-name { font-weight:700;font-size:16px;color:var(--fg);cursor:pointer;display:flex;align-items:center;gap:6px; }
.blocked-name:hover { text-decoration:underline; }
.blocked-handle { font-size:13px;color:var(--sub); }
.blocked-date { font-size:12px;color:var(--sub);margin-top:2px; }
.unblock-btn { padding:8px 18px;border-radius:20px;border:1.5px solid var(--border);background:none;color:var(--fg);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap; }
.unblock-btn:hover { border-color:#dc2626;color:#dc2626; }
.empty { text-align:center;align-items:center;justify-content:center;padding:80px 24px;color:var(--sub);width:100%;box-sizing:border-box; }
.empty-ic { width:80px;height:80px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;margin:0 auto 16px; }
.empty-ic svg { width:38px;height:38px;stroke:var(--sub); }
.empty h3 { font-size:19px;font-weight:700;color:var(--fg);margin-bottom:8px; }
.empty p { font-size:14px;line-height:1.6; }
#toast { position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(0,0,0,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;padding:10px 22px;border-radius:40px;font-size:13px;font-weight:500;z-index:9999;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;max-width:90vw; }
#toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.vchk { width:16px;height:16px;background:#1d9bf0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.vchk svg { width:9px;height:9px;fill:white; }
.cover-container { height:280px;position:relative;overflow:hidden;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9)); }
.cover-img { width:100%;height:100%;object-fit:cover;display:block; }
.cover-theme-tint { position:absolute;inset:0;pointer-events:none;opacity:0.25; }
.cover-container::after { content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.18));pointer-events:none; }
.cover-anim-rainbow { background-size:400% 400% !important;animation:coverRainbow 6s ease infinite !important; }
.cover-anim-aurora { background-size:300% 300% !important;animation:coverAurora 7s ease infinite !important; }
.cover-particles { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1; }
.cover-particle { position:absolute;animation-timing-function:linear;animation-iteration-count:infinite; }
.cover-particle.fall { animation-name:coverParticleFall; }
.cover-particle.float { animation-name:coverParticleFloat; }
.cover-particle.swim { animation-name:coverParticleSwim; }
.profile-content { background:var(--card-bg);border-radius:28px 28px 0 0;margin-top:-30px;position:relative;z-index:5;padding:0 20px 20px;transition:background 0.3s; }
.profile-avatar-wrapper { display:flex;justify-content:center;margin-top:-50px;margin-bottom:16px; }
.profile-avatar { position:relative;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border:4px solid var(--card-bg);overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.profile-avatar img { width:100%;height:100%;object-fit:cover; }
.profile-avatar svg { width:50px;height:50px;stroke:white;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
.profile-info { text-align:center; }
.profile-name-wrapper { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:4px; }
.profile-name { font-size:22px;font-weight:700;color:var(--text-color); }
.verified-badge { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1d9bf0;vertical-align:middle;margin-left:3px;box-shadow:0 1px 3px rgba(29,155,240,.4);flex-shrink:0;cursor:pointer;position:relative; }
.verified-badge svg { width:12px;height:12px;vertical-align:middle;fill:white; }
.premium-badge { display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg, #ffd700, #ff8c00);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase;width:16px;height:16px;justify-content:center;flex-shrink:0;cursor:pointer;position:relative; }
.profile-bio { font-size:14px;color:var(--text-color);line-height:1.45;margin:0 auto 12px;max-width:400px;opacity:0.8; }
.profile-stats { display:flex;gap:32px;margin:4px 0 0;justify-content:center;padding:14px 20px;background:var(--card-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color); }
.stat-item { text-align:center;cursor:pointer;transition:opacity 0.2s; }
.stat-item:hover { opacity:0.7; }
.stat-number { font-size:18px;font-weight:800;color:var(--text-color);line-height:1.2; }
.stat-label { font-size:12px;color:var(--secondary-text);margin-top:2px; }
.action-buttons { display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px; }
.follow-btn { background:var(--accent,#00d4ff);color:white;border:none;border-radius:30px;padding:10px 28px;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s; }
.follow-btn:hover { opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,212,255,0.3); }
.follow-btn.following { background:#16181c;border:1px solid var(--border-color);color:var(--text-color); }
.edit-profile-btn { background:var(--hover-bg);color:var(--text-color);border:none;border-radius:30px;padding:10px 22px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;transition:all 0.2s;font-family:inherit; }
.edit-profile-btn:hover { background:var(--border-color); }
.share-btn { background:var(--hover-bg);color:var(--text-color);border:1.5px solid var(--border-color);border-radius:30px;padding:10px 20px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;transition:all 0.2s;font-family:inherit; }
.share-btn:hover { border-color:var(--accent,#00d4ff);color:var(--accent,#00d4ff); }
.profile-tabs { display:flex;border-bottom:1px solid var(--border-color);background:var(--card-bg);position:sticky;top:56px;z-index:90;margin-top:20px;transition:background 0.3s; }
.profile-tab { flex:1;padding:14px 0;text-align:center;font-size:14px;font-weight:600;color:var(--secondary-text);cursor:pointer;transition:all 0.2s;position:relative;border:none;background:none;text-decoration:none; }
.profile-tab.active { color:var(--accent,#00d4ff); }
.profile-tab.active::after { content:'';position:absolute;bottom:-1px;left:50%;right:20%;height:3px;background:var(--accent,#00d4ff);border-radius:3px;transform:translateX(-50%);width:50px; }
.feed-container { max-width:600px;margin:0 auto;padding:12px;padding-bottom:80px;min-height:300px; }
.post { background:var(--card-bg);border-radius:20px;padding:14px;margin-bottom:12px;border:1px solid var(--border-color);transition:all 0.2s;position:relative;animation:postFadeIn 0.35s cubic-bezier(.4,0,.2,1) both;box-shadow:0 1px 3px rgba(0,0,0,0.05);cursor:pointer; }
.post:hover { box-shadow:0 4px 12px rgba(0,0,0,0.08);transform:translateY(-1px); }
.post-header { display:flex;gap:10px;align-items:flex-start;margin-bottom:8px; }
.post-avatar { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,212,255,.25);transition:transform .18s; }
.post-avatar img { width:100%;height:100%;object-fit:cover; }
.post-avatar svg { width:24px;height:24px;stroke:white;margin:10px; }
.post-info { flex:1;min-width:0; }
.post-name { font-weight:700;font-size:14px;color:var(--text-color);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.post-name:hover { text-decoration:underline;color:var(--accent,#00d4ff);opacity:0.8; }
.post-time { font-size:11px;color:var(--secondary-text);margin-top:2px; }
.post-text { font-size:14px;line-height:1.45;color:var(--text-color);margin:8px 0;word-break:break-word; }
.post-images { display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;border-radius:16px;overflow:hidden; }
.post-images.single .image-wrapper { width:100%;max-width:280px; }
.post-images.single img { width:100%;max-height:180px;object-fit:cover;display:block;border-radius:14px;cursor:pointer; }
.post-images.double { display:flex;grid-template-columns:1fr 1fr;gap:6px; }
.post-images.double .image-wrapper { aspect-ratio:1;flex:1; }
.post-images.double img { width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1;border-radius:14px;cursor:pointer; }
.post-images.triple { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.post-images.triple .image-wrapper { aspect-ratio:1; }
.post-images.triple img { width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;cursor:pointer; }
.post-images.grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.post-images.grid .image-wrapper { aspect-ratio:1; }
.post-images.grid img { width:100%;height:100%;object-fit:cover;border-radius:14px;cursor:pointer; }
.post-actions { display:flex;gap:24px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color); }
.action { display:flex;align-items:center;gap:5px;padding:8px 16px;border-radius:40px;color:var(--secondary-text);font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s;border:none;background:none;user-select:none; }
.action svg { width:16px;height:16px;flex-shrink:0; }
.action:hover { background:rgba(var(--accent-rgb,0,212,255), 0.1);transform:translateY(-1px);color:var(--accent,#00d4ff); }
.empty-feed { text-align:center;padding:60px 20px;color:var(--secondary-text);background:var(--card-bg);border-radius:20px;border:1px solid var(--border-color); }
.empty-feed svg { width:70px;height:70px;stroke:var(--secondary-text);margin-bottom:16px; }
.msg-btn { display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1.5px solid var(--border-color);background:var(--card-bg);color:var(--text-color);border-radius:30px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit; }
.msg-btn:hover { border-color:var(--accent,#00d4ff);color:var(--accent,#00d4ff); }
.pc-wrap { border-top:1px solid var(--border-color);padding:10px 0 4px;margin-top:6px; }
.pc-list { display:flex;flex-direction:column;gap:2px;margin-bottom:6px; }
.pc-item { display:flex;gap:8px;padding:4px 0; }
.pc-ava { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.pc-ava img { width:100%;height:100%;object-fit:cover; }
.pc-ava svg { width:13px;height:13px;stroke:white; }
.pc-body { flex:1;min-width:0; }
.pc-name { font-size:12px;font-weight:700;color:var(--text-color);cursor:pointer; }
.pc-name:hover { text-decoration:underline; }
.pc-text { font-size:13px;color:var(--text-color);line-height:1.4;word-break:break-word; }
.pc-empty, .pc-loading { font-size:12px;color:var(--secondary-text);padding:4px 0; }
.pc-form { display:flex;gap:8px;align-items:center; }
.pc-input { flex:1;padding:8px 14px;border:1px solid var(--border-color);border-radius:20px;font-size:13px;background:var(--input-bg);color:var(--text-color);outline:none;font-family:inherit; }
.pc-input:focus { border-color:var(--accent,#00d4ff); }
.pc-send { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;flex-shrink:0; }
.pc-send:hover { transform:scale(1.08); }
.pc-send svg { stroke:white; }
.profile-reactions-wrap { position:relative;display:inline-flex;align-items:center; }
.profile-reactions-picker { position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--card-bg);border:1px solid var(--border-color);border-radius:30px;padding:6px 10px;display:flex;gap:4px;z-index:50;box-shadow:0 4px 24px rgba(0,0,0,0.15);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.15s, visibility 0.15s, transform 0.15s;white-space:nowrap; }
.profile-reactions-wrap:hover .profile-reactions-picker, .profile-reactions-wrap.open .profile-reactions-picker { opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); }
.profile-reaction-opt { font-size:22px;line-height:1;cursor:pointer;padding:3px;border-radius:50%;transition:transform 0.1s;user-select:none; }
.profile-reaction-opt:hover { transform:scale(1.35); }
.post-prc-bar { display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 2px; }
.reaction-pill { display:inline-flex;align-items:center;gap:3px;background:var(--hover-bg);border:1px solid var(--border-color);border-radius:20px;padding:2px 9px;font-size:13px;cursor:pointer;transition:background 0.15s;user-select:none; }
.reaction-pill.mine { border-color:var(--accent);background:rgba(0,212,255,0.1); }
.reaction-pill:hover { background:var(--hover-bg); }
.reaction-pill .r-emoji { font-size:16px; }
.reaction-pill .r-count { color:var(--secondary-text);font-weight:600; }
.more-menu-wrap { position:relative; }
.more-btn { width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border-color);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-color);transition:all .2s;flex-shrink:0; }
.more-btn:hover { border-color:var(--accent,#00d4ff);color:var(--accent,#00d4ff); }
.more-dropdown { display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.15);z-index:200;overflow:hidden;min-width:200px; }
.more-dropdown.open { display:block; }
.more-item { display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-color);transition:background .15s; }
.more-item:hover { background:var(--hover-bg); }
.more-item.block-item { color:#dc2626; }
.more-item.block-item:hover { background:#fee2e2; }
.more-item.report-item { color:#f59e0b; }
.more-item.report-item:hover { background:rgba(245,158,11,.08); }
.achievements-row { display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--card-bg);border-bottom:1px solid var(--border-color); }
.ach-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:700;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(217,119,6,.15));border:1.5px solid rgba(245,158,11,.5);color:#d97706;box-shadow:0 0 10px rgba(245,158,11,.25);transition:transform .15s, box-shadow .15s;animation:achGlow 2.5s ease-in-out infinite; }
.ach-badge:hover { transform:scale(1.06);box-shadow:0 0 18px rgba(245,158,11,.5); }
.ach-modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(12px);z-index:6000;align-items:center;justify-content:center; }
.ach-modal-overlay.open { display:flex; }
.ach-modal { background:var(--card-bg);border-radius:28px;width:90%;max-width:380px;text-align:center;padding:36px 28px;position:relative;border:2px solid rgba(245,158,11,.35);box-shadow:0 0 60px rgba(245,158,11,.25),0 20px 60px rgba(0,0,0,.3);animation:achModalPop .35s cubic-bezier(.34,1.56,.64,1); }
.ach-modal-icon { font-size:64px;line-height:1;margin-bottom:16px;filter:drop-shadow(0 0 16px rgba(245,158,11,.7)); }
.ach-modal-title { font-size:22px;font-weight:800;margin-bottom:10px; }
.ach-modal-desc { font-size:15px;color:var(--secondary-text);line-height:1.5;margin-bottom:20px; }
.ach-modal-close { background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:30px;padding:12px 32px;font-size:15px;font-weight:700;cursor:pointer; }
.report-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);z-index:5000;align-items:center;justify-content:center; }
.report-overlay.open { display:flex; }
.report-sheet { background:var(--card-bg);border-radius:24px;width:90%;max-width:420px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25); }
.report-head { padding:20px 20px 0;font-size:18px;font-weight:700; }
.report-sub { padding:6px 20px 14px;font-size:13px;color:var(--secondary-text); }
.report-reason { width:100%;padding:14px 20px;border:1px solid var(--border-color);border-radius:16px;background:var(--input-bg);color:var(--text-color);font-size:15px;outline:none;cursor:pointer;border-top:1px solid var(--border-color);transition:background .15s;display:flex;align-items:center;justify-content:space-between; }
.report-reason:hover { background:var(--hover-bg); }
.report-reason svg { width:18px;height:18px;stroke:var(--secondary-text); }
.report-cancel { padding:14px 20px;text-align:center;font-size:15px;font-weight:600;color:var(--accent,#00d4ff);cursor:pointer;border-top:1px solid var(--border-color);transition:background .15s; }
.report-cancel:hover { background:var(--hover-bg); }
.app-header { position:sticky;top:0;z-index:100;background:rgba(255, 255, 255, 0.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid #e5e5ea;padding:12px 16px;display:flex;align-items:center;gap:12px;height:56px;justify-content:space-between; }
.menu-icon { width:40px;height:40px;background:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s;color:var(--text-color, #1a1a2e); }
.menu-icon svg { width:24px;height:24px;stroke:#1a1a2e; }
.app-logo { font-size:20px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;flex-shrink:0;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));-webkit-background-clip:text;background-clip:text;color:transparent; }
.header-placeholder { width:40px; }
.container { max-width:600px;margin:0 auto;padding:20px;padding-bottom:100px; }
.cover-section { position:relative;margin-bottom:20px; }
.cover-preview { width:100%;height:180px;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border-radius:20px;overflow:hidden;position:relative; }
.cover-preview img { width:100%;height:100%;object-fit:cover; }
.cover-actions { position:absolute;bottom:12px;right:12px;display:flex;gap:8px; }
.cover-btn { background:rgba(0,0,0,0.6);backdrop-filter:blur(10px);border:none;border-radius:30px;padding:6px 12px;color:white;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all 0.2s; }
.cover-btn:hover { background:rgba(0,0,0,0.8); }
.cover-btn.delete { background:rgba(220, 38, 38, 0.8); }
.cover-btn.delete:hover { background:rgba(220, 38, 38, 1); }
.avatar-section { display:flex;justify-content:center;margin-top:-50px;margin-bottom:20px;position:relative; }
.avatar-preview { width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg, var(--accent,#00d4ff), var(--accent2,#0ea5e9));border:4px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.1);position:relative; }
.avatar-preview img { width:100%;height:100%;object-fit:cover; }
.avatar-preview svg { width:50px;height:50px;stroke:white; }
.avatar-actions { position:absolute;bottom:-15px;right:calc(50% - 60px);display:flex;gap:6px; }
.avatar-btn { background:rgba(0,0,0,0.6);backdrop-filter:blur(10px);border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white;transition:all 0.2s; }
.avatar-btn:hover { background:rgba(0,0,0,0.8);transform:scale(1.05); }
.avatar-btn.delete { background:rgba(220, 38, 38, 0.8); }
.avatar-btn.delete:hover { background:rgba(220, 38, 38, 1); }
.card { background:#fff;border:1px solid #e5e5ea;border-radius:24px;padding:20px;max-width:520px;width:100%;text-align:center;margin-bottom:20px; }
.card-title { font-size:18px;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e5ea;display:flex;align-items:center;gap:10px; }
.form-group { margin-bottom:16px; }
label { display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#1a1a2e; }
input, textarea { width:100%;padding:12px 16px;border:1px solid #e5e5ea;border-radius:16px;font-size:15px;outline:none;background:#f8f9fa;color:var(--text-color);font-family:inherit; }
input:focus, textarea:focus { border-color:var(--accent,#00d4ff);background:#fff; }
textarea { resize:none; }
.char-counter { color:#8e8e93;font-size:12px;text-align:right;margin-top:4px; }
.char-counter.warning { color:#dc2626; }
.btn { background:var(--accent,#00d4ff);color:white;border:none;border-radius:30px;padding:12px 24px;font-weight:600;cursor:pointer;font-size:15px;transition:all 0.2s;width:100%;display:inline-flex;align-items:center;gap:10px;text-decoration:none; }
.btn:hover { opacity:.9;transform:translateY(-1px);background:#5a6fd6;box-shadow:0 8px 20px rgba(0,212,255,.4); }
.error-msg { background:#fee2e2;color:#dc2626;padding:12px;border-radius:14px;margin-bottom:16px;font-size:14px; }
.success-msg { background:#e0f2e9;color:#0e6b3e;padding:12px;border-radius:14px;margin-bottom:16px;font-size:14px; }
.info-text { font-size:13px;color:#8e8e93;margin-top:8px; }
.bottom-nav { position:fixed;bottom:0;left:0;right:0;background:rgba(255, 255, 255, 0.98);backdrop-filter:blur(10px);border-top:1px solid #e5e5ea;padding:12px 20px;display:flex;justify-content:center;z-index:100; }
.back-to-profile { display:flex;align-items:center;gap:8px;background:#f0f2f5;color:#1a1a2e;text-decoration:none;padding:10px 20px;border-radius:40px;font-size:14px;font-weight:500;transition:all 0.2s; }
.back-to-profile:hover { background:#e5e5ea;transform:translateY(-1px); }
.back-to-profile svg { width:18px;height:18px;stroke:#1a1a2e; }
.custom-toast { position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);color:white;padding:10px 20px;border-radius:40px;font-size:13px;z-index:1500;opacity:0;transition:all 0.3s;pointer-events:none; }
.custom-toast.show { transform:translateX(-50%) translateY(0);opacity:1; }
.modal-dialog { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.4);backdrop-filter:blur(8px);align-items:center;justify-content:center;z-index:3000; }
.modal-dialog.show { display:flex; }
.modal-card { background:#fff;border-radius:28px;padding:24px 20px;width:300px;max-width:500px;max-height:80vh;overflow-y:auto;border:1px solid var(--border-color, #e5e5ea);animation:slideUp .3s cubic-bezier(.4,0,.2,1);text-align:center;overflow:hidden; }
.modal-icon { width:56px;height:56px;border-radius:50%;margin:24px auto 12px;background:#fff3e0;display:flex;align-items:center;justify-content:center; }
.modal-icon svg { stroke:#f59e0b;width:28px;height:28px; }
.modal-title { font-size:18px;font-weight:600;padding:0 20px;color:var(--text-color); }
.modal-message { font-size:14px;color:#6c757d;padding:10px 20px 20px; }
.modal-buttons { display:flex;border-top:1px solid #e5e5ea; }
.modal-button { flex:1;padding:14px;background:none;border:none;font-size:16px;font-weight:600;cursor:pointer; }
.modal-button.destructive { color:#dc2626; }
.modal-button.secondary { color:#8e8e93;border-right:1px solid #e5e5ea; }
.rxm-overlay { position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease; }
.rxm-overlay.open { opacity:1;visibility:visible; }
.rxm-box { width:100%;max-width:440px;max-height:75vh;display:flex;flex-direction:column;background:var(--card-bg,#fff);color:var(--text-color,#1a1a2e);border:1px solid var(--border-color,#e5e5ea);border-bottom:none;border-radius:22px 22px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);transform:translateY(28px);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden; }
.rxm-overlay.open .rxm-box { transform:translateY(0); }
.rxm-head { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border-color,#e5e5ea); }
.rxm-title { font-size:17px;font-weight:700; }
.rxm-close { background:var(--hover-bg,#f0f2f5);border:none;color:var(--text-color,#1a1a2e);width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;transition:background .15s,transform .15s; }
.rxm-close:hover { background:var(--border-color,#e5e5ea);transform:rotate(90deg); }
.rxm-tabs { display:flex;gap:8px;padding:12px 16px;overflow-x:auto;border-bottom:1px solid var(--border-color,#e5e5ea); }
.rxm-tabs::-webkit-scrollbar { height:0; }
.rxm-tab { flex-shrink:0;background:var(--hover-bg,#f0f2f5);border:1px solid transparent;color:var(--text-color,#1a1a2e);padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.rxm-tab b { font-weight:700;opacity:.6;margin-left:2px; }
.rxm-tab.active { background:var(--accent,#00d4ff);color:#fff; }
.rxm-tab.active b { opacity:.85; }
.rxm-list { padding:8px 8px 18px;overflow-y:auto; }
.rxm-user { display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;text-decoration:none;color:var(--text-color,#1a1a2e);transition:background .15s; }
.rxm-user:hover { background:var(--hover-bg,#f0f2f5); }
.rxm-ava { width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));display:flex;align-items:center;justify-content:center; }
.rxm-ava img { width:100%;height:100%;object-fit:cover; }
.rxm-ava-ph { color:#fff;font-weight:700;font-size:18px; }
.rxm-name { font-weight:600;font-size:15px;display:flex;align-items:center;gap:5px;flex:1;min-width:0; }
.rxm-name span.t { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.rxm-emoji { font-size:20px;flex-shrink:0; }
.rxm-empty { text-align:center;color:var(--secondary-text,#8e8e93);padding:32px 16px;font-size:14px; }
.rxm-mini-badge { display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;flex-shrink:0; }
.rxm-mini-badge.v { background:#1d9bf0; }
.rxm-mini-badge.p { background:linear-gradient(135deg,#f7b733,#fc4a1a); }
.rxm-mini-badge svg { width:10px;height:10px; }
.reaction-who { display:inline-flex;align-items:center;justify-content:center;gap:4px;background:var(--hover-bg,#f0f2f5);border:1px solid var(--border-color,#e5e5ea);color:var(--secondary-text,#666);height:30px;padding:0 10px;border-radius:16px;cursor:pointer;font-family:inherit;transition:background .15s,transform .12s; }
.reaction-who:hover { background:var(--border-color,#e5e5ea);transform:translateY(-1px); }
.reaction-who svg { width:16px;height:16px; }
.scf-overlay { position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease; }
.scf-overlay.open { opacity:1;visibility:visible; }
.scf-box { width:100%;max-width:360px;background:var(--card-bg,#fff);color:var(--text-color,#1a1a2e);border:1px solid var(--border-color,#e5e5ea);border-radius:22px;padding:26px 22px 20px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3);transform:scale(.9);transition:transform .24s cubic-bezier(.34,1.56,.64,1); }
.scf-overlay.open .scf-box { transform:scale(1); }
.scf-icon { width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.12);color:var(--accent,#00d4ff); }
.scf-icon svg { width:28px;height:28px; }
.scf-icon.danger { background:rgba(224,36,94,.12);color:#e0245e; }
.scf-title { font-size:18px;font-weight:700;margin-bottom:6px; }
.scf-msg { font-size:14px;line-height:1.5;color:var(--secondary-text,#666);margin-bottom:22px; }
.scf-actions { display:flex;gap:10px; }
.scf-btn { flex:1;padding:12px 16px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:transform .12s,opacity .15s,background .15s; }
.scf-btn:active { transform:scale(.96); }
.scf-cancel { background:var(--hover-bg,#f0f2f5);color:var(--text-color,#1a1a2e); }
.scf-cancel:hover { background:var(--border-color,#e5e5ea); }
.scf-ok { background:linear-gradient(135deg,var(--accent,#00d4ff),var(--accent2,#0ea5e9));color:#fff; }
.scf-ok:hover { opacity:.9; }
.scf-ok.danger { background:linear-gradient(135deg,#f43f5e,#e0245e); }
.scf-box.alert .scf-cancel { display:none; }
#themePreviewModal { display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);align-items:center;justify-content:center; }
#themePreviewModal.show { display:flex;animation:fadeInModal .22s ease; }
.tpm-box { width:min(92vw,520px);border-radius:24px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6);display:flex;flex-direction:column; }
.tpm-header { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-weight:700;font-size:15px; }
.tpm-close { width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:inherit; }
.tpm-body { padding:0; }
.tpm-mockup { width:100%;aspect-ratio:16/9;display:flex;overflow:hidden;position:relative; }
.tpm-sidebar { width:68px;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:14px;flex-shrink:0; }
.tpm-sidebar .si-dot { width:32px;height:32px;border-radius:50%; }
.tpm-sidebar .si-icon { width:28px;height:6px;border-radius:4px;opacity:.45; }
.tpm-content { flex:1;display:flex;flex-direction:column;padding:12px 14px;gap:10px; }
.tpm-topbar { height:10px;border-radius:6px;width:60%;margin-bottom:4px; }
.tpm-card { border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px; }
.tpm-card-header { display:flex;align-items:center;gap:8px; }
.tpm-card-avatar { width:22px;height:22px;border-radius:50%; }
.tpm-card-name { height:5px;border-radius:3px;width:80px; }
.tpm-card-line { height:4px;border-radius:2px; }
.tpm-card-line.w90 { width:90%; }
.tpm-card-line.w70 { width:70%; }
.tpm-footer { display:flex;gap:8px;padding:8px 14px 12px; }
.tpm-btn { height:20px;border-radius:8px;flex:1; }
.theme-group-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--secondary-text);margin:20px 0 10px;display:flex;align-items:center;gap:6px; }
.theme-grid-new { display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-bottom:4px; }
.theme-tile-new { cursor:pointer;position:relative;user-select:none; }
.theme-tile-new input { display:none; }
.theme-tile-frame { border-radius:14px;overflow:hidden;border:2.5px solid var(--border-color);transition:border-color .2s, transform .16s, box-shadow .2s;aspect-ratio:4/3;position:relative; }
.theme-tile-new input:checked ~ .theme-tile-frame { border-color:var(--accent,#00d4ff);box-shadow:0 0 0 3px rgba(0,212,255,.28), 0 4px 20px rgba(0,212,255,.25);transform:scale(1.05); }
.theme-tile-frame:hover { transform:scale(1.05);border-color:#a0a8ff;box-shadow:0 4px 18px rgba(0,212,255,.18); }
.theme-tile-new input:checked ~ .theme-tile-frame::after { content:'✓';position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:var(--accent,#00d4ff);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;line-height:18px;text-align:center; }
.mini-ui { width:100%;height:100%;display:flex;overflow:hidden;position:relative; }
.mini-sidebar { width:22%;display:flex;flex-direction:column;align-items:center;padding:4px 0;gap:4px; }
.ms-avatar { width:14px;height:14px;border-radius:50%;margin-bottom:2px; }
.ms-link { width:12px;height:3px;border-radius:2px;opacity:.5; }
.mini-main { flex:1;display:flex;flex-direction:column;padding:4px 5px;gap:3px; }
.mm-header { height:6px;border-radius:3px;width:55%;margin-bottom:2px; }
.mm-card { border-radius:5px;padding:3px 4px;display:flex;flex-direction:column;gap:2px; }
.mm-line { height:2px;border-radius:1px; }
.mm-line.full { width:90%; }
.mm-line.half { width:55%; }
.tile-anim-aurora { background:linear-gradient(-45deg,#063320,#0a2240,#1a063a,#060b1e) !important;background-size:300% 300% !important;animation:tileAurora 4s ease infinite !important; }
.tile-anim-neon { background:linear-gradient(135deg,#08080f,#1a0030,#0d001a,#001a2e) !important;background-size:300% 300% !important;animation:tileNeon 3.5s ease infinite !important; }
.tile-anim-galaxy { background:linear-gradient(135deg,#020610,#0e1640,#1a0620,#020610) !important;background-size:400% 400% !important;animation:tileGalaxy 5s ease infinite !important; }
.tile-anim-fire { background:linear-gradient(180deg,#ff6600,#cc2200,#440200,#0a0303) !important;background-size:200% 400% !important;animation:tileFire 2.5s ease infinite !important; }
.tile-anim-storm { background:linear-gradient(170deg,#060810,#0a1030,#1a1060,#0c0820) !important;background-size:300% 300% !important;animation:tileStorm 4s ease infinite !important; }
.tile-anim-wave { background:linear-gradient(135deg,#020b18,#00337a,#004d6e,#00667a,#020b18) !important;background-size:300% 300% !important;animation:tileWave 3.8s ease infinite !important; }
.tile-anim-candy { background:linear-gradient(135deg,#ffd6ff,#ffc8e8,#c8e8ff,#c8ffd6,#fffbc8,#ffd6ff) !important;background-size:300% 300% !important;animation:tileCandy 3.5s ease infinite !important; }
.badge-anim { position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:7px;font-weight:700;padding:1px 5px;border-radius:5px;white-space:nowrap;letter-spacing:.04em; }
.badge-prem { position:absolute;top:4px;right:4px;background:linear-gradient(135deg,#ffd700,#ff8c00);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:8px; }
.badge-eye { position:absolute;top:4px;left:4px;background:rgba(0,0,0,.45);border-radius:6px;padding:1px 5px;font-size:7px;color:#fff;font-weight:600;opacity:0;transition:opacity .2s;cursor:pointer;white-space:nowrap; }
.theme-tile-frame:hover .badge-eye { opacity:1; }
.theme-tile-locked { opacity:.7; }
.theme-tile-locked .theme-tile-frame { cursor:not-allowed; }
.theme-tile-locked .theme-tile-frame:hover { transform:none;border-color:var(--border-color);box-shadow:none; }
.theme-tile-name-new { text-align:center;font-size:11px;font-weight:600;margin-top:6px;color:var(--text-color);letter-spacing:.01em; }
.premium-themes-hint { display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(14,165,233,.08));border:1px solid rgba(0,212,255,.22);border-radius:16px;padding:13px 16px;margin-top:14px;font-size:13px;color:var(--secondary-text);transition:box-shadow .3s; }
.premium-themes-hint a { color:var(--accent,#00d4ff);font-weight:600;text-decoration:none; }
.ptheme-grid { display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:12px;margin-bottom:4px; }
.ptheme-tile { cursor:pointer;user-select:none; }
.ptheme-tile-frame { border-radius:14px;overflow:hidden;border:2.5px solid var(--border-color);transition:border-color .2s, transform .16s, box-shadow .2s;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center; }
.ptheme-tile-active .ptheme-tile-frame { border-color:#e040c0;box-shadow:0 0 0 3px rgba(224,64,192,.28), 0 4px 20px rgba(224,64,192,.25);transform:scale(1.05); }
.ptheme-tile:not(.ptheme-tile-locked) .ptheme-tile-frame:hover { transform:scale(1.05);border-color:#e090f0;box-shadow:0 4px 18px rgba(224,64,192,.18); }
.ptheme-tile-active .ptheme-tile-frame::after { content:'✓';position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.92);color:#e040c0;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:3;line-height:18px;text-align:center; }
.ptheme-mini { display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px; }
.ptheme-avatar { width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.5);flex-shrink:0; }
.ptheme-name-bar { height:4px;width:38px;background:rgba(255,255,255,.85);border-radius:3px; }
.ptheme-sub-bar { height:3px;width:28px;background:rgba(255,255,255,.5);border-radius:2px; }
.ptheme-tile-name { text-align:center;font-size:11px;font-weight:600;margin-top:6px;color:var(--text-color);line-height:1.3; }
.ptheme-tile-locked { opacity:.72; }
.ptheme-tile-locked .ptheme-tile-frame { cursor:not-allowed; }
.ptheme-tile-locked .ptheme-tile-frame:hover { transform:none !important;border-color:var(--border-color) !important;box-shadow:none !important; }
.ptheme-badge-star { position:absolute;top:5px;left:5px;width:16px;height:16px;border-radius:50%;background:rgba(255,215,0,.92);font-size:8px;display:flex;align-items:center;justify-content:center;z-index:2; }
.ptheme-badge-anim { position:absolute;bottom:5px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.52);color:#fff;font-size:7px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap;letter-spacing:.3px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); }
.profile-theme-active { border-color:#e040c0 !important;box-shadow:0 0 0 3px rgba(224,64,192,.22) !important;transform:scale(1.04) !important; }

/* Animatsiyalar */
@keyframes slideUp { from{transform:translateY(100%)}to{transform:translateY(0)} }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sparkFadeIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes ptFadeOut { to { opacity: 0; } }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
@keyframes likePop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalOverlayOut { to { opacity: 0; } }
@keyframes slideDown { to { transform: translateY(30px); opacity: 0; } }
@keyframes countBump { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes aurораGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes auroraShimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes neonPulse { 0%, 100% { box-shadow: 0 0 8px rgba(190,0,255,0.5), 0 0 24px rgba(190,0,255,0.2); } 50% { box-shadow: 0 0 22px rgba(190,0,255,0.9), 0 0 60px rgba(190,0,255,0.35); } }
@keyframes neonBorder { 0%, 100% { border-color: rgba(190,0,255,0.5); } 50% { border-color: rgba(0,230,255,0.8); } }
@keyframes galaxyShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@keyframes starTwinkle { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes fireGradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } }
@keyframes fireFlicker { 0%, 100% { opacity: 0.9; transform: scaleY(1); } 25% { opacity: 1; transform: scaleY(1.01); } 75% { opacity: 0.95; transform: scaleY(0.99); } }
@keyframes candyGradient { 0% { background-position: 0% 50%; } 33% { background-position: 100% 0%; } 66% { background-position: 50% 100%; } 100% { background-position: 0% 50%; } }
@keyframes stormFlash { 0%, 85%, 88%, 91%, 100% { opacity: 0; } 86%, 89% { opacity: 0.35; } 87%, 90% { opacity: 0.15; } }
@keyframes stormShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
@keyframes waveGradient { 0% { background-position: 0% 50%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 50%; } }
@keyframes banSlideUp { from { opacity:0; transform:translateY(40px) scale(.95);} to {opacity:1; transform:translateY(0) scale(1);} }
@keyframes commentFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalZoom { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUpModal { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes previewFly { 0% { transform: translateX(-30px); opacity: 0; } 100% { transform: translateX(calc(100% + 30px)); opacity: 1; } }
@keyframes previewFall { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(100%); opacity: 1; } }
@keyframes previewFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } }
@keyframes previewFlame { 0% { opacity: 0.6; transform: scaleY(0.8); } 50% { opacity: 1; transform: scaleY(1.2); } 100% { opacity: 0.6; transform: scaleY(0.8); } }
@keyframes previewBubble { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 50% { opacity: 0.7; } 100% { transform: translateY(-100%) scale(1); opacity: 0; } }
@keyframes previewHeart { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-100%) scale(1); opacity: 0; } }
@keyframes previewRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes previewSwim { 0% { transform: translateX(-30px); } 100% { transform: translateX(calc(100% + 30px)); } }
@keyframes imgFadeIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes postFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coverRainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes coverAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes coverParticleFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(220px) rotate(360deg); opacity: 0; } }
@keyframes coverParticleFloat { 0% { transform: translateY(220px) scale(0.3); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translateY(-20px) scale(1.1); opacity: 0; } }
@keyframes coverParticleSwim { 0% { transform: translateX(-60px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(calc(100% + 60px)); opacity: 0; } }
@keyframes achGlow { 0%,100% { box-shadow: 0 0 8px rgba(245,158,11,.25); } 50% { box-shadow: 0 0 16px rgba(245,158,11,.5); } }
@keyframes achModalPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInModal { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes tileAurora { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes tileNeon { 0%{background-position:0% 0%} 50%{background-position:100% 100%} 100%{background-position:0% 0%} }
@keyframes tileGalaxy { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes tileFire { 0%{background-position:50% 0%} 50%{background-position:50% 100%} 100%{background-position:50% 0%} }
@keyframes tileStorm { 0%{background-position:0% 0%} 33%{background-position:100% 50%} 66%{background-position:0% 100%} 100%{background-position:0% 0%} }
@keyframes tileWave { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes tileCandy { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Responsive */
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important; }
    .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale { opacity:1 !important;transform:none !important; }
}
@media (min-width:600px) {
    .modal-overlay { align-items:center; }
    .modal-card { border-radius:28px; }
    .rxm-overlay { align-items:center; }
    .rxm-box { border-radius:22px;border-bottom:1px solid var(--border-color,#e5e5ea);transform:translateY(0) scale(.96); }
    .rxm-overlay.open .rxm-box { transform:scale(1); }
}
@media (min-width:720px) {
    .header-search-wrap { display:block; }
}
@media (min-width:900px) {
    .mobile-bottom-nav, .mobile-bottom-nav-spacer { display:none; }
}
@media (min-width:1024px) {
    .settings-section { border-radius:28px; }
    .notification-item { border-radius:20px; }
    .menu-icon,#openMenuBtn { display:none !important; }
    .container,.feed-container,.search-container,.cover-container,.profile-content,.profile-tabs,.messages-layout,.chat-layout,.app-header,.tabs,.hdr,.srch,.sec-lbl,.row,.empty,.app-footer-links,.notif-toolbar,#achievementsRow { margin-left:325px !important;max-width:none !important; }
    .feed-container > .post,.feed-container > * { max-width:100%;}
    .header-placeholder { width:100%; }
    .post { border-radius:24px; }
    .post-images.single img { max-height:320px; }
    .cs, .ps { margin-left:190px; }
    .fab { right:40px;bottom:40px;width:54px;height:54px; }
}
@media (min-width:1300px) {
    .container,.feed-container,.search-container,.cover-container,.profile-content,.app-header,.tabs,.profile-tabs,.hdr,.srch,.sec-lbl,.row,.empty,.app-footer-links,#achievementsRow { margin-right:360px!important; }
    .fab-wrap { right:380px; }
}
@media (max-width:380px) {
    .post-limit-content { padding:20px 16px 18px;border-radius:20px; }
    .post-limit-timer { font-size:32px; }
    .post-limit-content h3 { font-size:17px; }
    .post-limit-btn { padding:8px 24px;font-size:13px; }
}
@media (max-width:480px) {
    .post-limit-content { padding:28px 20px 24px;border-radius:24px; }
    .post-limit-icon { font-size:36px; }
    .post-limit-content h3 { font-size:19px; }
    .post-limit-timer { font-size:40px; }
    .post-limit-btn { padding:10px 32px;font-size:14px; }
    .features-grid { grid-template-columns:1fr; }
    .guide-steps { grid-template-columns:1fr; }
    .settings-section { padding:18px; }
    .setting-item { flex-direction:column;align-items:flex-start;gap:12px; }
    .toggle-switch { align-self:flex-start; }
    .theme-options { flex-direction:column; }
    .user-avatar { width:44px;height:44px; }
    .user-name { font-size:15px; }
    .post-actions { gap:16px; }
    .post-container { padding:12px; }
    .post { padding:16px; }
    .post-avatar { width:40px;height:40px; }
    .post-name { font-size:15px; }
    .post-text { font-size:15px; }
    .tabs { top:52px; }
    .container { padding:16px; }
    .message-content { max-width:85%; }
    .cover-container { height:200px; }
    .profile-avatar { width:85px;height:85px; }
    .profile-name { font-size:20px; }
    .profile-stats { gap:20px; }
    .action-buttons { gap:8px; }
}
@media (max-width:768px) {
    .hero { padding:40px 24px; }
    .hero h1 { font-size:36px; }
    .hero p { font-size:15px; }
    .mission-card { padding:28px; }
    .mission-title { font-size:24px; }
    .premium-guide { padding:28px; }
    .premium-guide-title { font-size:22px; }
    .faq-card { padding:28px; }
    .faq-title { font-size:22px; }
    .faq-question { padding:14px 18px;font-size:14px; }
    .faq-answer { padding:16px 18px; }
    .container { padding:16px; }
    .premium-banner { padding:30px 20px; }
    .packages-grid { grid-template-columns:1fr; }
    .theme-options { grid-template-columns:1fr; }
}