/* ============================================================ MakerWeb — Premium zamonaviy dizayn tizimi ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap'); /* WebApp zoom o'chirilgan */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { /* Faqat vertikal surish ruxsat etiladi — gorizontal surish o'chirildi. Sabab: ba'zi Telegram klientlarida (masalan "iMe") gorizontal surish tizimning "chetdan surish" ishorasi bilan aralashib, orqadagi ilova belgisi bir lahzaga ekranga chiqib qolish nosozligiga sabab bo'lgan. */ touch-action: pan-y; -ms-touch-action: pan-y; overscroll-behavior-x: none; } :root { /* MUHIM: ba'zi WebView'lar (masalan "iMe" ilovasi) sayt o'z rangini aniq bildirmasa, uni "aqlli" ravishda avtomatik tungi/kunduzgi rejimga moslashtirishga urinadi — bu esa ba'zi elementlarni (tekis fonlar) boshqalardan (rangli tugmalar) boshqacha, nomutanosib holda o'zgartirib qo'yishi mumkin. Shu sabab saytning ataylab TUNGI dizaynda ekanini browser'ga aniq e'lon qilamiz — shunda bunday "avtomatik tuzatish" ishga tushmaydi. */ color-scheme: dark; --bg: #080C10; --grid-line: #0F1318; --surface: #111621; --surface-2: #171D2A; --surface-3: #1E2535; --surface-4: #232C3E; --border: #232D3F; --border-light: #2C3A52; --accent: #00F5A0; --accent-dim: #00B872; --accent-strong: #10FFB0; --accent-soft: rgba(0, 245, 160, 0.14); --accent-glow: rgba(0, 245, 160, 0.16); --accent-text: #001A0D; --warn: #FFB800; --warn-soft: rgba(255, 184, 0, 0.14); --danger: #FF4D6A; --danger-soft: rgba(255, 77, 106, 0.16); --info: #4DA6FF; --info-soft: rgba(77, 166, 255, 0.16); --text: #E8EDF5; --text-muted: #6B7A99; --text-dim: #4A566E; --radius-xl: 26px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-xs: 8px; --shadow-glow: 0 0 20px rgba(0, 245, 160, 0.08); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px -10px rgba(0, 0, 0, 0.65); --shadow-hard: 4px 4px 0 var(--border); --shadow-hard-sm: 3px 3px 0 var(--border); --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; } /* ============================================================ KUN REJIMI (LIGHT THEME) — Barcha asosiy ranglar CSS o'zgaruvchilar orqali ishlatilgani uchun shu bloqcha butun saytni yorug' mavzuga o'tkazadi. ============================================================ */ html[data-theme="light"] { color-scheme: light; --bg: #F4F6FA; --grid-line: #E7EBF2; --surface: #FFFFFF; --surface-2: #F5F7FB; --surface-3: #EEF1F7; --surface-4: #E4E8F0; --border: #E1E5EE; --border-light: #D3D9E6; --accent: #00B872; --accent-dim: #009660; --accent-strong: #00A868; --accent-soft: rgba(0, 184, 114, 0.12); --accent-glow: rgba(0, 184, 114, 0.14); --accent-text: #FFFFFF; --warn: #B87400; --warn-soft: rgba(184, 116, 0, 0.12); --danger: #E0294A; --danger-soft: rgba(224, 41, 74, 0.12); --info: #1C7ED6; --info-soft: rgba(28, 126, 214, 0.12); --text: #12151C; --text-muted: #5A6579; --text-dim: #8891A3; --shadow-glow: 0 0 20px rgba(0, 184, 114, 0.10); --shadow-card: 0 1px 2px rgba(20, 25, 35, 0.05), 0 12px 28px -10px rgba(20, 25, 35, 0.12); --shadow-card-hover: 0 1px 2px rgba(20, 25, 35, 0.06), 0 18px 36px -10px rgba(20, 25, 35, 0.16); --shadow-hard: 4px 4px 0 var(--border); --shadow-hard-sm: 3px 3px 0 var(--border); } html[data-theme="light"] body { background-image: none; } /* ============================================================ SOZLAMALAR — qator elementi va Tun/Kun almashtirgich (switch) ============================================================ */ .sozlama-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; } .sozlama-row + .sozlama-row { border-top: 1px solid var(--border); } .sozlama-row-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .sozlama-row-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; } .sozlama-row-text b { display: block; font-size: 13.5px; color: var(--text); font-weight: 700; } .sozlama-row-text span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .sozlama-row-value { font-size: 12px; color: var(--text-muted); font-weight: 700; flex-shrink: 0; } /* iOS uslubidagi almashtirgich (toggle switch) */ .tema-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; } .tema-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .tema-switch-track { position: absolute; inset: 0; cursor: pointer; background: #232C3E; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-4); border: 1px solid var(--border-light); border-radius: 999px; transition: background 0.25s ease, border-color 0.25s ease; } .tema-switch-track::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .tema-switch input:checked + .tema-switch-track { background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); border-color: transparent; } .tema-switch input:checked + .tema-switch-track::before { transform: translateX(20px); } .tema-switch-track i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--accent-text); opacity: 0; transition: opacity 0.2s ease; } .tema-switch-track .fa-moon { left: 6px; opacity: 1; color: var(--text-dim); } .tema-switch-track .fa-sun { right: 6px; } .tema-switch input:checked + .tema-switch-track .fa-moon { opacity: 0; } .tema-switch input:checked + .tema-switch-track .fa-sun { opacity: 1; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Manrope', Arial, sans-serif; -webkit-tap-highlight-color: transparent; } html, body { min-height: 100%; overscroll-behavior-y: none; overscroll-behavior-x: none; } .section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 12px; } .section-title i { color: var(--accent); } .section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .page-card, .hero-card, .widget-card, .section-card, .info-card { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .hero-card { padding: 18px; margin-bottom: 16px; } .hero-card h2, .hero-card h3 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; } .hero-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 8px; } .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .quick-card { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-md); text-decoration: none; color: var(--text); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .quick-card:hover { transform: translateY(-1px); border-color: var(--accent-dim); box-shadow: var(--shadow-glow); } .quick-card.primary { background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-text); } .quick-card.secondary { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); color: var(--text); } .quick-card i { font-size: 16px; } .widget-card, .section-card { padding: 16px; margin-bottom: 16px; } .widget-card .widget-top, .section-card .section-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .widget-card h3, .section-card h3 { font-size: 15px; font-weight: 800; color: var(--text); } .widget-card .widget-sub, .section-card .section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .link-inline { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; } .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .mini-stat { padding: 12px; border-radius: var(--radius-md); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); border: 1px solid var(--border); } .mini-stat .mini-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; } .mini-stat .mini-value { font-size: 17px; font-weight: 800; color: var(--text); } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); font-weight: 700; font-size: 12px; } .chip.active { background: rgba(0, 245, 160, 0.14); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); } .empty-state { text-align: center; padding: 20px 12px; border: 1px dashed var(--border-light); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); } .empty-state i { font-size: 26px; color: var(--accent); margin-bottom: 10px; display: inline-block; } .empty-state h4 { font-size: 15px; margin-bottom: 6px; color: var(--text); } .empty-state p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .mini-bot-list { display: flex; flex-direction: column; gap: 8px; } .mini-bot-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #111621; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface); text-decoration: none; transition: all 0.15s; } .mini-bot-item:hover { border-color: var(--accent-dim); background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); } .mini-bot-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(0, 245, 160, 0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent-glow), var(--surface-2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; color: var(--accent); } .mini-bot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mini-bot-name { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-bot-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .mini-bot-status.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .mini-bot-status.inactive { background: var(--text-muted); } .mini-bot-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; } .mini-bot-arrow { color: var(--text-muted); font-size: 12px; flex-shrink: 0; } .payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .payment-card { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); color: var(--text); font-weight: 700; font-size: 13px; } .payment-card.active { border-color: var(--accent-dim); background: rgba(0, 245, 160, 0.14); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-soft); color: var(--accent); } .balance-hero { padding: 22px 18px; text-align: center; margin-bottom: 16px; background: rgba(0,245,160,0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, rgba(0,245,160,0.16), rgba(0,184,114,0.06)); border: 1px solid rgba(0,245,160,0.25); border-radius: var(--radius-lg); } .balance-hero .balance-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 8px; } .balance-hero .balance-value { font-size: 30px; font-weight: 900; color: var(--text); line-height: 1.1; } .balance-hero .balance-sub { font-size: 12px; color: var(--text-muted); margin-top: 8px; } input[type="text"], input[type="password"], input[type="number"], textarea { width: 100%; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: 14.5px; font-weight: 600; padding: 0 14px; height: 48px; outline: none; margin-bottom: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: 500; } input:focus, textarea:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.1); } button, .btn { width: 100%; height: 50px; font-size: 15px; font-weight: 700; color: var(--accent-text); background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); border: none; border-radius: var(--radius-md); box-shadow: 0 2px 12px rgba(0, 245, 160, 0.2); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.2px; } button:hover, .btn:hover { background: #10FFB0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-strong); box-shadow: 0 4px 20px rgba(0, 245, 160, 0.35); transform: translateY(-1px); } button:active, .btn:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(0, 245, 160, 0.15); } .btn-secondary { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); color: var(--text); box-shadow: none; border: 1.5px solid var(--border); } .btn-secondary:hover { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); box-shadow: none; border-color: var(--border-light); } .btn-danger { background: #FF4D6A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--danger); color: #fff; box-shadow: 0 2px 12px rgba(255, 77, 106, 0.2); } .btn-danger:hover { box-shadow: 0 4px 20px rgba(255, 77, 106, 0.35); } .topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 800; } .topbar-brand i { color: var(--accent); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0, 245, 160, 0.14); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-soft); } .topbar-balance { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--text); min-width: 0; flex: 1 1 auto; overflow: hidden; text-decoration: none; -webkit-tap-highlight-color: transparent; padding: 7px 9px; border-radius: 999px; background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); border: 1px solid var(--border); transition: background 0.15s ease, border-color 0.15s ease; } .topbar-balance span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-balance:hover { border-color: var(--accent-dim); background: #232C3E; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-4); } .topbar-balance i:first-child { color: var(--accent); } .topbar-balance-add { color: var(--accent); font-size: 11px; flex-shrink: 0; } .topbar-avatar { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-text); font-weight: 900; box-shadow: 0 0 0 2px rgba(255,255,255,0.04); overflow: visible; position: relative; } .topbar-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* Pastki navigatsiyadagi "Profil" tugmasi uchun Telegram profil rasmi */ .nav-avatar-wrap { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; } .nav-avatar-img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1.5px var(--border-light); transition: box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item.active .nav-avatar-img { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px) scale(1.06); } /* Profil sahifasidagi katta avatar */ .profile-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px; box-shadow: 0 0 0 3px var(--surface-3), 0 0 0 4.5px var(--border); } .topbar-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 190px; max-width: calc(100vw - 40px); background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: none; z-index: 200; } .topbar-dropdown.show { display: block; } .topbar-profile { position: relative; flex-shrink: 0; } .topbar-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; } .topbar-dropdown-item:hover { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); } .topbar-dropdown-divider { height: 1px; background: #232D3F; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--border); margin: 4px 0; } .topbar-dropdown-header { padding: 12px; } .topbar-dropdown-name { font-size: 13px; font-weight: 800; color: var(--text); } .topbar-dropdown-id { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .topbar-dropdown-danger { color: var(--danger); } @media (max-width: 480px) { .quick-grid, .payment-grid, .mini-grid { grid-template-columns: 1fr; } } body { background-color: #080C10; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background-color: var(--bg); background-image: radial-gradient(ellipse 60% 34% at 50% 0%, rgba(0, 245, 160, 0.06), transparent 60%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 100% 100%, 28px 28px, 28px 28px; color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Iconlar (Font Awesome) barcha platformalarda tekis va to'g'ri chizilsin */ i[class*="fa-"] { font-style: normal; -webkit-font-smoothing: antialiased; line-height: 1; } .page { width: 100%; max-width: 460px; animation: riseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .page-lg { max-width: 620px; } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Premium box/card asosi ---------- Barcha kartalar shu uslubga tayanadi: yumshoq burchak, nozik ikki qatlamli shadow, subtle border-glow va bosilganda silliq animatsiya. ------------------------------------------ */ .ramka, .stat-card, .tarif-karta, .kanal-kart, .bot-item, .chat-list-item, .admin-satir, .ranking-box, .diqqat, .qabul { transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease; } /* ---------- Sarlavha (asosiy) ---------- */ .asosiy { text-align: center; margin-bottom: 18px; } .asosiy .badge { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 10px; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid var(--border); box-shadow: 0 0 24px var(--accent-glow), var(--shadow-hard-sm); } .asosiy b, .asosiy h1 { display: block; font-size: 17px; font-weight: 800; letter-spacing: 0.2px; color: var(--text); } .asosiy .sub { margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--text-muted); } /* ---------- Karta (ramka) ---------- */ .ramka { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.03); padding: 24px 20px; } /* ---------- Tugmalar ---------- */ .tugmacreate { display: flex; flex-direction: column; gap: 10px; } .tugmacreate form, .tugma1 form { width: 100%; } button, .btn { width: 100%; height: 50px; font-size: 15px; font-weight: 700; color: var(--accent-text); background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); border: none; border-radius: var(--radius-md); box-shadow: 0 2px 12px rgba(0, 245, 160, 0.2); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.2px; } button:hover, .btn:hover { background: #10FFB0; box-shadow: 0 4px 20px rgba(0, 245, 160, 0.35); transform: translateY(-1px); } button:active, .btn:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(0, 245, 160, 0.15); } .btn-secondary { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); color: var(--text); box-shadow: none; border: 1.5px solid var(--border); } .btn-secondary:hover { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); box-shadow: none; border-color: var(--border-light); } .btn-danger { background: #FF4D6A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--danger); color: #fff; box-shadow: 0 2px 12px rgba(255, 77, 106, 0.2); } .btn-danger:hover { box-shadow: 0 4px 20px rgba(255, 77, 106, 0.35); } /* Ikki ustunli tugmalar qatori */ .tugma1 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } /* ---------- Ma'lumot bloklari ---------- */ .malumot, .malumotlar { margin-bottom: 16px; } /* ---------- Reyting bloki ---------- */ .ranking-box { margin-top: 14px; margin-bottom: 14px; padding: 18px; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .ranking-box-standalone { margin-top: 16px; padding: 20px 18px; } .ranking-box-standalone .ranking-title { font-size: 18px; } .ranking-box-standalone .ranking-caption { font-size: 12.5px; } .ranking-box-standalone .ranking-tab { height: 44px; font-size: 12px; } .ranking-box-standalone .ranking-panel { padding: 14px; } .ranking-box-standalone .ranking-list li { padding: 11px 12px; font-size: 13px; } .ranking-box-standalone .rank-name { font-size: 13.5px; } .ranking-header { margin-bottom: 14px; } .ranking-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--accent); margin-bottom: 5px; } .ranking-caption { font-size: 12px; color: var(--text-muted); line-height: 1.5; } /* Chat tugmasi - reyting tepasida */ .chat-trigger-btn { display: flex; align-items: center; justify-content: space-between; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 12px; cursor: pointer; text-decoration: none; color: var(--text); transition: all 0.2s ease; width: 100%; } .chat-trigger-btn:hover { border-color: var(--accent-dim); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--surface-3), #202840); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 245, 160, 0.08); } .chat-trigger-left { display: flex; align-items: center; gap: 10px; } .chat-trigger-icon { width: 36px; height: 36px; background: rgba(0, 245, 160, 0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-glow); border: 1.5px solid var(--accent-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 15px; flex-shrink: 0; } .chat-trigger-text { font-size: 14px; font-weight: 700; } .chat-trigger-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 1px; } .chat-trigger-arrow { color: var(--text-muted); font-size: 13px; } /* Yangi xabar belgisi */ .chat-new-badge { background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; margin-left: 6px; } .ranking-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; } .ranking-tab { border: 1.5px solid var(--border); background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); color: var(--text-muted); height: 40px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: none; padding: 0 8px; transition: all 0.2s ease; } .ranking-tab.active { background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); color: var(--accent-text); border-color: transparent; box-shadow: 0 2px 10px rgba(0, 245, 160, 0.25); } .ranking-panels { display: block; } .ranking-panel { display: none; padding: 12px; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); } .ranking-panel.active { display: block; } .ranking-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .ranking-list { list-style: none; display: flex; flex-direction: column; gap: 4px; } .ranking-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #111621; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; transition: border-color 0.15s; } .ranking-list li.current-user { border-color: var(--accent-dim); background: rgba(0, 245, 160, 0.05); } .ranking-current-outside { opacity: 0.8; border-style: dashed !important; } .rank-number { font-size: 12px; font-weight: 800; color: var(--text-muted); min-width: 28px; } .rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rank-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-id { font-size: 10.5px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-block; } a.rank-id:hover { text-decoration: underline; } .rank-value { color: var(--accent); font-weight: 800; text-align: right; white-space: nowrap; font-size: 12.5px; } .ranking-self { margin-top: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(0, 245, 160, 0.1); font-size: 12px; color: var(--text-muted); text-align: center; } .ranking-self strong { color: var(--accent); } .malumotlar h1 { text-align: center; font-size: 17px; color: var(--accent); margin-bottom: 12px; } .info-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; font-size: 14px; transition: border-color 0.15s; } .info-row:hover { border-color: var(--border-light); } .info-row span.val { color: var(--accent); font-weight: 800; } .malumot b, .malumotlar b, .malumotlar strong { display: block; font-size: 14px; color: var(--text-muted); font-weight: 600; } .malumot strong { color: var(--accent); } /* ---------- Matn / yozuvlar ---------- */ .yozuv { display: block; font-size: 14px; line-height: 1.65; color: var(--text-muted); font-weight: 500; margin-bottom: 14px; } .royhat { color: var(--warn); font-size: 14.5px; margin-bottom: 10px; padding-left: 20px; } a { color: var(--accent); text-decoration: none; font-weight: 700; } /* ---------- Karta raqami bloki ---------- */ .code { display: block; text-align: center; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 2px dashed var(--accent-dim); color: var(--accent); font-size: 19px; border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; line-height: 1.6; } /* ---------- Input / textarea ---------- */ input[type="text"], input[type="password"], input[type="number"], textarea { width: 100%; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: 14.5px; font-weight: 600; padding: 0 14px; height: 48px; outline: none; margin-bottom: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: 500; } input:focus, textarea:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.1); } /* ---------- Xabar bloklari ---------- */ .diqqat, .yetma, .mablag { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 14.5px; font-weight: 700; color: #FFE0E6; background: rgba(255, 77, 106, 0.15); border: 1.5px solid rgba(255, 77, 106, 0.3); border-radius: var(--radius-lg); padding: 14px 16px; } .qabul, .som { text-align: center; font-size: 14.5px; font-weight: 700; color: var(--accent-text); background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 14px; box-shadow: 0 6px 18px -6px var(--accent-glow); } .ochmagan { text-align: center; font-size: 15px; font-weight: 700; color: var(--text); padding: 20px 0; } .ochmagan .tugmacreate { margin-top: 14px; } /* ============================================================ Tepa balans paneli va pastki navigatsiya (with-nav sahifalar) ============================================================ */ body.with-nav { display: block; padding: 0; overscroll-behavior-y: none; overscroll-behavior-x: none; } body.with-nav .page { max-width: 460px; margin: 0 auto; padding: calc(68px + env(safe-area-inset-top)) 14px calc(100px + env(safe-area-inset-bottom)); min-height: 100vh; animation: none; } .topbar, .navbar { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 460px; z-index: 100; } .topbar { top: calc(10px + env(safe-area-inset-top)); background: rgba(30, 37, 53, 0.68); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, rgba(30, 37, 53, 0.68), rgba(17, 22, 33, 0.82)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .topbar-balance { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--text); min-width: 0; flex: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; padding: 3px 5px; margin: -3px -2px; border-radius: 7px; transition: background 0.15s ease; } .topbar-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 1; min-width: 0; } /* Tor telefon ekranlarida topbar sig'may, profil (avatar+dropdown) ekrandan tashqariga chiqib ketmasligi uchun ixchamlashtirish */ @media (max-width: 380px) { .topbar { padding: 7px 8px; gap: 6px; } .topbar-brand span { display: none; } .topbar-brand i { width: 30px; height: 30px; } .topbar-actions { gap: 5px; } .tarif-badge span, .tarif-badge { padding: 5px 7px; } .tarif-badge i + span, .tarif-badge > span:last-child { display: none; } .topbar-balance { padding: 6px 7px; } .topbar-balance span { max-width: 70px; } .topbar-avatar { width: 32px; height: 32px; flex-shrink: 0; } } .topbar-balance:active { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); } .topbar-balance i { color: var(--accent); font-size: 13px; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(0, 245, 160, 0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-glow); border: 1px solid var(--border-light); border-radius: 8px; } .topbar-balance span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-add { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; border: none; font-size: 13px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 245, 160, 0.2); } .topbar-add:hover { background: #10FFB0; box-shadow: 0 3px 12px rgba(0, 245, 160, 0.35); transform: translateY(-1px); } /* ---------- NAVBAR (pastki) — zamonaviy glassmorphism ---------- */ .navbar { bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(30, 37, 53, 0.68); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, rgba(30, 37, 53, 0.68), rgba(17, 22, 33, 0.82)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 8px 6px 6px; display: flex; align-items: flex-end; justify-content: space-between; transition: box-shadow 0.25s ease; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; color: var(--text-muted); text-decoration: none; font-size: 9.5px; font-weight: 700; min-height: 44px; padding: 7px 2px 5px; border-radius: 14px; text-align: center; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, background 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease; } .nav-item i { font-size: 17px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item span { line-height: 1.1; font-size: 9px; transition: opacity 0.2s ease; } .nav-item.active { color: var(--accent); background: rgba(0, 245, 160, 0.14); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, rgba(0, 245, 160, 0.14), rgba(0, 245, 160, 0.05)); box-shadow: inset 0 0 0 1px rgba(0, 245, 160, 0.18); } .nav-item.active i { transform: translateY(-1px) scale(1.06); } .nav-item:hover { color: var(--text); } .nav-item:active { transform: scale(0.92); } .nav-item-center { position: relative; margin-top: -26px; color: var(--text-muted); background: none; } .nav-item-center.active { background: none; } .nav-item-center:active { transform: none; } .nav-item-center:active .nav-center-icon { transform: scale(0.92); } .nav-center-icon { width: 48px; height: 48px; border-radius: 16px; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 19px; border: 2px solid var(--border); box-shadow: 0 6px 20px -4px rgba(0, 245, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nav-item-center:hover .nav-center-icon { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 245, 160, 0.4); } .nav-item-center.active .nav-center-icon { box-shadow: 0 6px 20px rgba(0, 245, 160, 0.4); } .nav-item-center.active { color: var(--accent); } /* ---------- Statistik kartalar ---------- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .stat-card { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.55); } .stat-card i { color: var(--accent); font-size: 16px; } .stat-card .stat-value { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; } .stat-card .stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.3; } /* ---------- Qidiruv maydoni ---------- */ .qidiruv { position: relative; margin-bottom: 12px; } .qidiruv i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; } .qidiruv input { padding-left: 40px; margin-bottom: 0; } /* ---------- Tur (kategoriya) tablari ---------- */ .tur-tablar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; margin-bottom: 14px; scrollbar-width: none; } .tur-tablar::-webkit-scrollbar { display: none; } .tur-tab { flex-shrink: 0; padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; } .tur-tab.active { color: var(--accent-text); background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); border-color: transparent; } .bot-natija-yoq { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 20px 0; display: none; } /* ---------- Bot yaratish - Shablon grid ---------- */ .bot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .bot-forma { width: 100%; } .bot-forma button { width: 100%; height: auto; min-height: 72px; flex-direction: column; gap: 6px; padding: 12px 10px; font-size: 12px; line-height: 1.3; white-space: normal; word-break: break-word; text-align: center; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); color: var(--text); border-radius: var(--radius-md); border: 1.5px solid var(--border); box-shadow: none; transition: all 0.2s ease; } .bot-forma button i { font-size: 18px; color: var(--accent); } .bot-forma button:hover { border-color: var(--accent-dim); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); box-shadow: 0 2px 12px rgba(0, 245, 160, 0.08); transform: translateY(-1px); } /* ---------- Yaratish bo'limlari switch ---------- */ .create-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } .create-tab-btn { padding: 12px; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: all 0.2s ease; min-height: 70px; justify-content: center; width: 100%; height: auto; box-shadow: none; text-decoration: none; } .create-tab-btn i { font-size: 20px; color: var(--text-muted); transition: color 0.2s; } .create-tab-btn.active { border-color: var(--accent-dim); background: rgba(0, 245, 160, 0.06); color: var(--accent); } .create-tab-btn.active i { color: var(--accent); } .create-section { display: none; } .create-section.active { display: block; } /* ---------- Pul ishlash - kanal kartasi ---------- */ .kanal-kart { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45); transition: border-color 0.2s ease, transform 0.2s ease; } .kanal-kart .kanal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .kanal-kart .kanal-nomi { font-size: 14.5px; font-weight: 800; color: var(--text); } .kanal-kart .kanal-mukofot { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* ---------- Admin panel ---------- */ .admin-jadval { width: 100%; border-collapse: collapse; margin-bottom: 14px; } .admin-jadval th, .admin-jadval td { text-align: left; padding: 9px 8px; font-size: 12.5px; border-bottom: 1px solid var(--border); } .admin-jadval th { color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } .admin-jadval td { color: var(--text); font-weight: 600; } .admin-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1.5px solid var(--border); border-radius: var(--radius-md); margin-bottom: 9px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.4); transition: border-color 0.2s ease, transform 0.2s ease; } .admin-satir:hover { border-color: var(--border-light); } .admin-satir .nomi { font-size: 14px; font-weight: 700; color: var(--text); } .admin-satir .qoshimcha { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .admin-ochir { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 77, 106, 0.15); color: var(--danger); display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 77, 106, 0.3); font-size: 12px; text-decoration: none; cursor: pointer; transition: all 0.15s; width: auto; height: auto; padding: 6px 8px; } .admin-ochir:hover { background: #FF4D6A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--danger); color: #fff; } select { width: 100%; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: 14.5px; font-weight: 600; padding: 0 14px; height: 48px; outline: none; margin-bottom: 10px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; transition: border-color 0.2s; } select:focus { border-color: var(--accent-dim); outline: none; } .admin-menyu { display: flex; flex-direction: column; gap: 8px; } .admin-menyu a.btn { text-decoration: none; } .section-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; margin: 6px 0 8px; } /* ---- Bot items (MyBots) ---- */ .bot-item { display: flex; align-items: center; justify-content: space-between; background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 9px; gap: 10px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.4); transition: border-color 0.2s ease, transform 0.2s ease; } .bot-item:hover { border-color: var(--border-light); transform: translateY(-1px); } .bot-item:hover { border-color: var(--border-light); } .bot-name { font-weight: 700; color: var(--text); font-size: 13.5px; word-break: break-all; } .bot-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } .bot-btn { padding: 6px 10px; border: none; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; transition: all 0.2s ease; min-height: 30px; width: auto; height: auto; box-shadow: none; display: inline-flex; align-items: center; gap: 4px; } .bot-edit { background: var(--accent); color: var(--accent-text); } .bot-edit:hover { background: #10FFB0; transform: translateY(-1px); } .bot-transfer { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); color: var(--text); border: 1.5px solid var(--border); } .bot-transfer:hover { border-color: var(--border-light); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); transform: translateY(-1px); box-shadow: none; } .bot-delete { background: rgba(255, 77, 106, 0.12); color: var(--danger); border: 1.5px solid rgba(255, 77, 106, 0.25); } .bot-delete:hover { background: #FF4D6A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--danger); color: #fff; transform: translateY(-1px); box-shadow: none; } /* ---- Transfer / egalik o'tkazish ---- */ .transfer-form { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 14px; margin-top: 10px; } .transfer-form .section-title { margin-bottom: 10px; color: var(--accent); } /* ---- Chat sahifasi ---- */ .chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 160px); } .chat-header { background: #111621; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .chat-header-pin { background: rgba(0, 245, 160, 0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-glow); border: 1.5px solid var(--accent-dim); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); } .chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .chat-msg { max-width: 85%; padding: 9px 13px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; line-height: 1.5; } .chat-msg.mine { background: rgba(0, 245, 160, 0.12); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, rgba(0, 245, 160, 0.12), rgba(0, 184, 114, 0.08)); border: 1.5px solid var(--accent-dim); align-self: flex-end; color: var(--text); } .chat-msg.theirs { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); align-self: flex-start; } .chat-msg.from-user { background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); align-self: flex-start; } .chat-msg.from-admin { background: rgba(0, 245, 160, 0.12); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(135deg, rgba(0, 245, 160, 0.12), rgba(0, 184, 114, 0.08)); border: 1.5px solid var(--accent-dim); align-self: flex-end; color: var(--text); } .chat-msg-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; font-weight: 500; } .chat-input-row { display: flex; gap: 8px; margin-top: 10px; } .chat-input-row input { flex: 1; margin-bottom: 0; } .chat-input-row button { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); padding: 0; } /* --- Admin chat panel --- */ .admin-chat-list { display: flex; flex-direction: column; gap: 6px; } .admin-chat-item { display: flex; align-items: center; gap: 10px; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 10px 13px; text-decoration: none; color: var(--text); transition: all 0.15s; } .admin-chat-item:hover { border-color: var(--accent-dim); background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-3); } .admin-chat-item.has-new { border-color: var(--accent-dim); } .admin-chat-avatar { width: 36px; height: 36px; background: rgba(0, 245, 160, 0.16); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent-glow); border: 1.5px solid var(--border-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 14px; flex-shrink: 0; font-weight: 800; } .admin-chat-info { flex: 1; min-width: 0; } .admin-chat-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .admin-chat-id { font-size: 11px; color: var(--text-muted); font-weight: 500; } .admin-chat-badge { background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; } /* --- ID qidirish --- */ .id-search-row { display: flex; gap: 8px; margin-bottom: 14px; } .id-search-row input { flex: 1; margin-bottom: 0; } .id-search-row button { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); padding: 0; } /* ===== Sahifa yuklanish loaderi — zamonaviy versiya ===== */ .loader-overlay { position: fixed; inset: 0; background: radial-gradient(ellipse 60% 46% at 50% 38%, rgba(0, 245, 160, 0.09), transparent 65%), rgba(5, 8, 12, 0.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); display: none; align-items: center; justify-content: center; z-index: 99999; flex-direction: column; padding: 24px; } .loader-overlay.show { display: flex !important; animation: loaderFade .18s ease both; } @keyframes loaderFade { from { opacity: 0; } to { opacity: 1; } } .loader-box { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 34px 38px; border-radius: 28px; background: rgba(30, 37, 53, 0.72); /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, rgba(30, 37, 53, 0.72), rgba(17, 22, 33, 0.72)); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); animation: loaderPop .28s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes loaderPop { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } } /* Ikki qatlamli aylanuvchi halqa + markazda nafas oluvchi yadro */ .loader { position: relative; width: 52px; height: 52px; } .loader::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: conic-gradient(from 0deg, var(--accent) 0deg, rgba(0, 245, 160, 0.05) 260deg, transparent 300deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: loaderSpin 0.9s linear infinite; filter: drop-shadow(0 0 8px var(--accent-glow)); } .loader::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.08); } @keyframes loaderSpin { to { transform: rotate(360deg); } } .loader-core { position: absolute; inset: 16px; border-radius: 50%; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: radial-gradient(circle at 35% 30%, var(--accent), var(--accent-dim)); box-shadow: 0 0 16px 2px var(--accent-glow); animation: loaderPulse 1.4s ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { transform: scale(0.72); opacity: 0.65; } 50% { transform: scale(1); opacity: 1; } } .loader-text { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 3px; } .loader-dots { display: inline-flex; gap: 3px; margin-left: 2px; } .loader-dots i { width: 4px; height: 4px; border-radius: 50%; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); font-style: normal; animation: loaderDotBounce 1.1s ease-in-out infinite; } .loader-dots i:nth-child(2) { animation-delay: 0.15s; } .loader-dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes loaderDotBounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .loader-sub { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-align: center; max-width: 220px; line-height: 1.4; margin-top: -6px; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================ TARIFLAR ============================================================ */ .tarif-badge { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; background: #171D2A; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--surface-2); color: var(--text); flex-shrink: 0; } .tarif-badge-pro { background: rgba(46, 58, 85, 0.5); color: #8FB8FF; } .tarif-badge-premium { background: rgba(74, 46, 85, 0.5); color: #E29CFF; } .tarif-badge-max { background: rgba(85, 67, 46, 0.5); color: #FFD08F; } .tarif-grid { display: flex; flex-direction: column; gap: 12px; } .tarif-karta { background: #1E2535; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); position: relative; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .tarif-karta.joriy { border-color: var(--accent-dim); } .tarif-karta-sarlavha { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; } .tarif-karta-nomi { font-size: 16px; font-weight: 900; color: var(--text); display: flex; align-items: center; gap: 8px; } .tarif-karta-narxi { font-size: 14.5px; font-weight: 800; color: var(--accent); } .tarif-imtiyozlar { list-style: none; margin: 0 0 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tarif-imtiyozlar li { font-size: 13px; font-weight: 600; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; } .tarif-imtiyozlar li i { color: var(--accent); width: 16px; flex-shrink: 0; margin-top: 2px; text-align: center; } .tarif-imtiyozlar li span, .tarif-imtiyozlar li b { flex: 1; min-width: 0; } .tarif-joriy-belgi { display: inline-flex; align-items: center; gap: 5px; background: #00F5A0; /* zaxira: var()/gradient qo'llab-quvvatlamaydigan WebView'lar (masalan iMe) uchun */ background: var(--accent); color: var(--accent-text); font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; border: none; } .promokod-form { display: flex; gap: 8px; margin-top: 10px; } .promokod-form input { flex: 1; margin-bottom: 0; } .promokod-form button { width: auto; padding: 0 16px; } /* Admin navbar compact */ .navbar.admin-navbar { padding: 5px 4px 4px; } .navbar.admin-navbar .nav-item { font-size: 8px; min-height: 38px; padding: 4px 1px 3px; gap: 2px; } .navbar.admin-navbar .nav-item i { font-size: 15px; } .navbar.admin-navbar .nav-item span { font-size: 7.5px; line-height: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }