:root {
 --primary-gradient: linear-gradient(135deg, #ff007a, #ff4d9e, #ff0080);
 --secondary-gradient: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
 --card-bg: rgba(22, 22, 24, 0.88);
 --card-bg-solid: #161618;
 --bg-color: #0a0a0c;
 --bg-gradient: radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 0, 122, 0.12), transparent 50%), radial-gradient(ellipse 70% 50% at 100% 40%, rgba(131, 58, 180, 0.08), transparent 45%), radial-gradient(ellipse 50% 40% at 0% 60%, rgba(252, 176, 69, 0.04), transparent 40%);
 --text-primary: #f5f5f7;
 --text-secondary: #9898a0;
 --border-color: rgba(255, 255, 255, 0.06);
 --live-color: #ff3040;
 --story-border: linear-gradient(145deg, #ff007a, #c71585, #833ab4);
 --accent-color: #ff007a;
 --accent-color-2: #833ab4;
 --radius: 18px;
 --radius-sm: 14px;
 --radius-xs: 10px;
 --shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
 --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
 --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 --transition-fast: 0.18s ease;
 --glass: rgba(26, 26, 30, 0.72);
 --glass-border: rgba(255, 255, 255, 0.06);
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}

html {
 scroll-behavior: smooth;
}

body {
 background-color: var(--bg-color);
 background-image: var(--bg-gradient);
 background-attachment: fixed;
 color: var(--text-primary);
 direction: rtl;
 overflow-x: hidden;
 padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
 min-height: 100vh;
 min-height: 100dvh;
 font-family: Vazir, 'Segoe UI', Tahoma, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 15px;
}

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
}

@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
}

@keyframes glow {
 0% { box-shadow: 0 0 5px rgba(255, 0, 122, 0.5); }
 50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.8); }
 100% { box-shadow: 0 0 5px rgba(255, 0, 122, 0.5); }
}

@keyframes slideIn {
 from { transform: translateX(100%); opacity: 0; }
 to { transform: translateX(0); opacity: 1; }
}

.animated {
 animation: fadeIn 0.8s ease-out;
}

.float-animation {
 animation: float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
 .float-animation, .pulse-animation, .glow-animation { animation: none; }
 .story:hover, .post:hover, .nav-item:hover { transition-duration: 0.01ms; }
}

*:focus-visible {
 outline: 2px solid var(--accent-color);
 outline-offset: 2px;
 border-radius: 4px;
}

.pulse-animation {
 animation: pulse 2s ease-in-out infinite;
}

.glow-animation {
 animation: glow 2s ease-in-out infinite;
}

.slide-in {
 animation: slideIn 0.5s ease-out;
}

.navbar {
 background: var(--glass);
 backdrop-filter: blur(20px) saturate(1.2);
 -webkit-backdrop-filter: blur(20px) saturate(1.2);
 border-bottom: 1px solid var(--glass-border);
 position: sticky;
 top: 0;
 z-index: 100;
 padding: 14px 0;
 box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
 transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.navbar:hover {
 box-shadow: 0 4px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 0, 122, 0.04);
}

.nav-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.logo {
 font-size: 1.5rem;
 font-weight: 800;
 letter-spacing: -0.02em;
 background: var(--secondary-gradient);
 background-size: 200% 200%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 filter: drop-shadow(0 2px 10px rgba(131, 58, 180, 0.3));
 transition: filter var(--transition);
}

.logo:hover {
 filter: drop-shadow(0 4px 12px rgba(255, 0, 122, 0.35));
}

.search-box {
 background: rgba(42, 42, 46, 0.85);
 border-radius: 24px;
 padding: 10px 18px;
 width: 300px;
 display: flex;
 align-items: center;
 gap: 10px;
 transition: all var(--transition);
 border: 1px solid var(--glass-border);
}

.search-box:focus-within {
 background: rgba(42, 42, 46, 0.95);
 box-shadow: 0 0 0 2px rgba(131, 58, 180, 0.4);
 border-color: var(--accent-color-2);
 transform: scale(1.02);
}

.search-box input {
 border: none;
 background: transparent;
 width: 100%;
 outline: none;
 padding: 5px;
 font-size: 15px;
 color: var(--text-primary);
}

.nav-icons {
 display: flex;
 gap: 22px;
}

.nav-icons i {
 font-size: 22px;
 cursor: pointer;
 color: var(--text-primary);
 transition: transform var(--transition), color var(--transition);
}

.nav-icons i:hover {
 color: var(--accent-color);
 transform: scale(1.12);
}

.nav-icons i:active {
 transform: scale(0.96);
}

.active-nav {
 color: var(--accent-color) !important;
}

.main-content {
 display: flex;
 margin-top: 28px;
 gap: 28px;
 contain: layout;
}

.feed {
 flex: 2;
 min-width: 0;
}

.sidebar {
 flex: 1;
 position: sticky;
 top: 82px;
 height: fit-content;
 max-width: 320px;
}

.stories-container {
 margin-bottom: 25px;
}

.section-title {
 font-size: 0.95rem;
 font-weight: 700;
 margin-bottom: 14px;
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--text-primary);
 letter-spacing: 0.02em;
}

.section-title i {
 color: var(--accent-color);
 font-size: 6px;
 vertical-align: middle;
}

.stories {
 background: var(--glass);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius);
 padding: 18px 20px;
 display: flex;
 overflow-x: auto;
 gap: 20px;
 scrollbar-width: none;
 box-shadow: var(--shadow);
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
}

.stories::-webkit-scrollbar {
 display: none;
}

.story {
 display: flex;
 flex-direction: column;
 align-items: center;
 cursor: pointer;
 position: relative;
 transition: transform var(--transition);
 scroll-snap-align: start;
 flex-shrink: 0;
}

.story:hover {
 transform: translateY(-6px) scale(1.02);
}

.story:active {
 transform: translateY(-2px) scale(0.98);
}

.story-avatar {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 padding: 3px;
 background: var(--story-border);
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 8px;
 position: relative;
 box-shadow: 0 4px 20px rgba(255, 0, 122, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
 transition: box-shadow var(--transition), transform var(--transition-fast);
}

.story:hover .story-avatar {
 box-shadow: 0 8px 28px rgba(255, 0, 122, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}

.story-avatar img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 border: 3px solid var(--card-bg);
 object-fit: cover;
}

.story-type {
 position: absolute;
 bottom: -5px;
 right: -5px;
 background: rgba(0, 0, 0, 0.8);
 color: white;
 border-radius: 50%;
 width: 24px;
 height: 24px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 12px;
 border: 2px solid var(--card-bg);
}

.story-username {
 font-size: 13px;
 max-width: 80px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 color: var(--text-primary);
}

.live-badge {
 background: var(--primary-gradient);
 color: white;
 font-size: 10px;
 font-weight: 700;
 padding: 4px 8px;
 border-radius: 8px;
 margin-top: 5px;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 box-shadow: 0 2px 10px rgba(255, 0, 122, 0.4);
 animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.9; transform: scale(1.05); }
}

.post {
 background: var(--card-bg);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius);
 margin-bottom: 24px;
 overflow: hidden;
 box-shadow: var(--shadow);
 transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
 opacity: 0;
 transform: translateY(28px);
 contain: layout style;
}

.post.visible {
 opacity: 1;
 transform: translateY(0);
}

.post:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-hover);
 border-color: rgba(255, 0, 122, 0.12);
}

.post-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 18px;
 border-bottom: 1px solid var(--border-color);
}

.post-user {
 display: flex;
 align-items: center;
 gap: 12px;
}

.post-user img {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--accent-color);
}

.post-options {
 cursor: pointer;
 color: var(--text-secondary);
 transition: color 0.3s ease;
}

.post-options:hover {
 color: var(--accent-color);
}

.post-image {
 width: 100%;
 max-height: 600px;
 object-fit: cover;
 transition: transform 0.4s ease;
 will-change: transform;
}

.post:hover .post-image {
 transform: scale(1.02);
}

.post-actions {
 padding: 15px 18px;
 display: flex;
 justify-content: space-between;
 border-bottom: 1px solid var(--border-color);
}

.post-actions-left {
 display: flex;
 gap: 18px;
}

.post-actions i {
 font-size: 26px;
 cursor: pointer;
 transition: all 0.3s ease;
 color: var(--text-primary);
}

.post-actions i:hover {
 color: var(--accent-color);
 transform: scale(1.15);
}

.post-likes {
 padding: 0 18px;
 margin: 10px 0;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 5px;
}

.post-likes-count {
 font-weight: 700;
 transition: all 0.3s ease;
 color: var(--text-primary);
}

.post-caption {
 padding: 0 18px 15px;
 line-height: 1.6;
 color: var(--text-primary);
}

.post-time {
 padding: 0 18px 15px;
 color: var(--text-secondary);
 font-size: 13px;
}

.profile-card {
 background: var(--card-bg);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid var(--glass-border);
 border-radius: var(--radius);
 padding: 20px;
 margin-bottom: 24px;
 box-shadow: var(--shadow);
 transition: box-shadow var(--transition);
}

.profile-card:hover {
 box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.profile-info {
 display: flex;
 align-items: center;
 gap: 15px;
 margin-bottom: 15px;
}

.profile-info img {
 width: 65px;
 height: 65px;
 border-radius: 50%;
 object-fit: cover;
 border: 3px solid var(--accent-color);
}

.profile-text h3 {
 margin-bottom: 5px;
 color: var(--text-primary);
}

.profile-text p {
 color: var(--text-secondary);
 font-size: 14px;
}

.suggestions-title {
 display: flex;
 justify-content: space-between;
 margin-bottom: 18px;
 align-items: center;
}

.suggestions-title h3 {
 font-size: 16px;
 color: var(--text-secondary);
}

.suggestions-title a {
 color: var(--accent-color);
 font-weight: 600;
 font-size: 13px;
 text-decoration: none;
 transition: opacity 0.3s ease;
}

.suggestions-title a:hover {
 opacity: 0.8;
}

.suggestion {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 15px;
}

.suggestion-user {
 display: flex;
 align-items: center;
 gap: 12px;
}

.suggestion-user img {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--accent-color);
}

.suggestion-info h4 {
 font-size: 14px;
 margin-bottom: 2px;
 color: var(--text-primary);
}

.suggestion-info p {
 color: var(--text-secondary);
 font-size: 12px;
}

.follow-btn {
 color: var(--accent-color);
 font-weight: 600;
 font-size: 13px;
 cursor: pointer;
 transition: opacity 0.3s ease;
}

.follow-btn:hover {
 opacity: 0.8;
}

.bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background: var(--glass);
 backdrop-filter: blur(20px) saturate(1.2);
 -webkit-backdrop-filter: blur(20px) saturate(1.2);
 border-top: 1px solid var(--glass-border);
 display: flex;
 justify-content: space-around;
 align-items: center;
 padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0));
 z-index: 100;
 box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

.nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 cursor: pointer;
 transition: color var(--transition), transform var(--transition);
 color: var(--text-secondary);
 padding: 6px 12px;
 border-radius: var(--radius-sm);
}

.nav-item.active {
 color: var(--accent-color);
}

.nav-item.active i {
 filter: drop-shadow(0 0 8px rgba(255, 0, 122, 0.4));
}

.nav-item i {
 font-size: 22px;
 margin-bottom: 2px;
 transition: filter var(--transition);
}

.nav-item span {
 font-size: 11px;
 font-weight: 500;
}

.nav-item:hover {
 color: var(--accent-color);
 transform: translateY(-2px);
}

.nav-item:active {
 transform: translateY(0) scale(0.96);
}

.liked {
 color: #ed4956 !important;
 animation: heartBeat 0.6s ease;
}

@keyframes heartBeat {
 0% { transform: scale(1); }
 25% { transform: scale(1.3); }
 50% { transform: scale(0.9); }
 75% { transform: scale(1.2); }
 100% { transform: scale(1); }
}

.count-up {
 animation: countUp 0.5s ease;
}

@keyframes countUp {
 0% { transform: scale(1); }
 50% { transform: scale(1.3); }
 100% { transform: scale(1); }
}

.story-viewer {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.95);
 z-index: 1000;
 display: none;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.story-viewer.active {
 display: flex;
}

.story-content {
 position: relative;
 width: 100%;
 flex: 1;
 min-height: 0;
 max-width: 400px;
 max-height: 85vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.story-content img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 border-radius: 10px;
 background: #000;
}

.story-close {
 position: absolute;
 top: 20px;
 right: 20px;
 z-index: 10;
 color: white;
 font-size: 28px;
 cursor: pointer;
 background: rgba(0, 0, 0, 0.5);
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: background 0.3s ease;
}

.story-close:hover {
 background: rgba(255, 0, 122, 0.5);
}

.story-username-header {
 position: absolute;
 top: 25px;
 right: 70px;
 z-index: 10;
 color: white;
 font-weight: 600;
 font-size: 16px;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.story-progress {
 display: flex;
 gap: 5px;
 position: absolute;
 top: 15px;
 width: 90%;
}

.progress-bar {
 height: 3px;
 background: rgba(255, 255, 255, 0.4);
 flex: 1;
 border-radius: 2px;
 overflow: hidden;
}

.progress-fill {
 height: 100%;
 background: var(--primary-gradient);
 width: 0%;
 transition: width 0.2s linear;
}

.payment-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.22);
 backdrop-filter: blur(3px);
 -webkit-backdrop-filter: blur(3px);
 z-index: 2000;
 display: none;
 justify-content: center;
 align-items: center;
 padding: 20px;
}

.payment-modal.active {
 display: flex;
 animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.payment-content {
 position: relative;
 background: #1c1c20;
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 20px;
 padding: 44px 24px 24px 24px;
 width: 90%;
 max-width: 400px;
 box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
 text-align: center;
}

.payment-title {
 font-size: 1.15rem;
 font-weight: 700;
 margin-bottom: 6px;
 color: #a0a0a8;
 line-height: 1.4;
}

.payment-title .payment-title-accent {
 color: #e85d4a;
 font-weight: 800;
}

.payment-subtitle {
 font-size: 0.875rem;
 color: #9898a0;
 line-height: 1.65;
 margin-bottom: 22px;
 padding: 0 4px;
}

.payment-features {
 list-style: none;
 margin-bottom: 20px;
 padding: 0;
 text-align: center;
}

.payment-features li {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 color: #9898a0;
 font-size: 0.875rem;
 margin-bottom: 12px;
 direction: rtl;
}

.payment-features li span {
 flex: 0 1 auto;
}

.payment-features li i {
 color: #e85d4a;
 font-size: 0.95rem;
 flex-shrink: 0;
}

.payment-online {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 color: #9898a0;
 font-size: 0.8125rem;
 margin-bottom: 22px;
}

.payment-online-icons {
 display: inline-flex;
 align-items: center;
 gap: 2px;
}

.payment-online-icons i {
 color: #22c55e;
 font-size: 0.6rem;
}

.payment-online-text {
 white-space: nowrap;
}

.payment-options {
 background: rgba(255, 255, 255, 0.04);
 border-radius: 14px;
 padding: 22px 20px;
 margin-bottom: 22px;
}

.payment-option {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 color: #9898a0;
 font-size: 0.875rem;
}

.payment-icon {
 font-size: 2.75rem;
 color: #c084fc;
 line-height: 1;
}

.pay-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 background: linear-gradient(90deg, #dc2626, #ea580c);
 color: white;
 border: none;
 border-radius: 14px;
 padding: 16px 24px;
 font-size: 1rem;
 font-weight: 700;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 width: 100%;
 font-family: inherit;
 box-shadow: 0 4px 20px rgba(220, 38, 38, 0.35);
}

.pay-button:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 28px rgba(220, 38, 38, 0.4);
}

.pay-button i {
 font-size: 0.9rem;
}

.close-payment {
 position: absolute;
 top: 14px;
 left: 14px;
 color: var(--text-secondary);
 font-size: 1.25rem;
 cursor: pointer;
 padding: 6px;
 border-radius: 8px;
 transition: color 0.2s ease, background 0.2s ease;
}

.close-payment:hover {
 color: var(--text-primary);
 background: rgba(255, 255, 255, 0.08);
}

.connecting-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.95);
 z-index: 3000;
 display: none;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.connecting-modal.active {
 display: flex;
}

.connecting-content {
 background: var(--card-bg);
 backdrop-filter: blur(16px);
 border-radius: var(--radius);
 padding: 40px;
 width: 90%;
 max-width: 500px;
 text-align: center;
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
 border: 1px solid var(--glass-border);
}

.connecting-icon {
 font-size: 50px;
 color: var(--accent-color);
 margin-bottom: 20px;
 animation: float 3s ease-in-out infinite;
}

.connecting-content h2 {
 margin-bottom: 15px;
 color: var(--text-primary);
}

.connecting-content p {
 margin-bottom: 25px;
 color: var(--text-secondary);
 line-height: 1.6;
}

.loading-spinner {
 width: 50px;
 height: 50px;
 border: 5px solid #333;
 border-top: 5px solid var(--accent-color);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 margin: 0 auto;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
 .main-content {
  flex-direction: column;
  margin-top: 16px;
 }
 .sidebar {
  display: none;
 }
 .search-box {
  display: none;
 }
 .stories {
  border-radius: var(--radius-sm);
  margin-left: 0;
  margin-right: 0;
 }
 .post {
  border-radius: var(--radius-sm);
  border-left: none;
  border-right: none;
  margin-bottom: 16px;
 }
 .payment-options {
  flex-direction: column;
 }
 .nav-icons {
  display: none;
 }
 .bottom-nav {
  display: flex;
 }
 .container {
  padding: 0 12px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .post.visible { transition: none; }
 .story:hover { transform: none; }
 .post:hover { transform: none; }
 .nav-item:hover { transform: none; }
}

@media (min-width: 769px) {
 .bottom-nav {
 display: none;
 }
}