/* ═══════════════════════════════════════════════════════ ATPROO EDA AI — Profile / Premium Tabs CSS Yuklash tartibi: eng OXIRIDA (premium-widgets.css'dan keyin) index.html ga qo'shing: MAQSAD: Profile sahifasidagi "Obuna", "BMI", "Vazn", "Sozlama" tablarida ishlatilgan, lekin hech qanday CSS faylda yozilmagan klasslarni to'ldirish (shu sabab matn xira/tartibsiz ko'rinardi). ═══════════════════════════════════════════════════════ */ /* ── PROFIL HERO — qo'shimcha elementlar ── */ .prof-hero { position: relative; overflow: hidden; } .prof-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% -10%, rgba(0,229,160,.14), transparent 55%), radial-gradient(circle at 100% 10%, rgba(79,142,255,.12), transparent 50%); pointer-events: none; } .prof-av-wrap { position: relative; z-index: 1; } .prof-av-badge { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #fbbf24); border: 3px solid var(--bg2, #161B27); display: flex; align-items: center; justify-content: center; font-size: 12px; } .prof-name, .prof-email, .prof-plan-tag, .prof-stats { position: relative; z-index: 1; } .prof-email { font-size: 12px; color: var(--t3, #505878); margin-top: 2px; } .prof-plan-tag { display: inline-flex; align-items: center; gap: 5px; margin: 8px auto 16px; padding: 5px 14px; border-radius: 50px; background: rgba(0,229,160,.12); border: 1px solid rgba(0,229,160,.25); color: var(--g1, #00e5a0); font-size: 12px; font-weight: 700; } /* ── PREMIUM TABS (Obuna / BMI / Vazn / Sozlama) ── */ .prem-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 18px 0 16px; padding-bottom: 2px; } .prem-tabs::-webkit-scrollbar { display: none; } .prem-tab { flex-shrink: 0; padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--t2, #8899BB); background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); cursor: pointer; transition: all .18s; white-space: nowrap; } .prem-tab:hover { color: var(--t1, #F0F4FF); border-color: var(--bd2, rgba(255,255,255,.12)); } .prem-tab.active { background: linear-gradient(135deg, rgba(0,229,160,.16), rgba(79,142,255,.12)); border-color: rgba(0,229,160,.35); color: var(--g1, #00e5a0); } .prem-tab-content { display: none; animation: ptFadeIn .25s ease both; } .prem-tab-content.active { display: block; } @keyframes ptFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── JORIY PLAN BANNER ── */ .cur-plan-banner { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(0,229,160,.08), rgba(79,142,255,.06)); border: 1px solid rgba(0,229,160,.18); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; } .cpb-left { display: flex; align-items: center; gap: 12px; } .cpb-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--g1, #00e5a0), var(--g3, #4f8eff)); display: flex; align-items: center; justify-content: center; font-size: 18px; } .cpb-title { font-size: 14px; font-weight: 800; color: var(--t1, #F0F4FF); } .cpb-sub { font-size: 11px; color: var(--t3, #505878); margin-top: 1px; } .cpb-badge { padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; background: rgba(0,229,160,.15); color: var(--g1, #00e5a0); border: 1px solid rgba(0,229,160,.3); } /* ── PLANLAR (Free / Pro / Ultra) ── */ .plans-container { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .plan-card { position: relative; background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 18px; padding: 20px; transition: all .2s; } .plan-card.plan-featured { border-color: rgba(0,229,160,.35); background: linear-gradient(160deg, rgba(0,229,160,.07), rgba(79,142,255,.04)); box-shadow: 0 12px 32px rgba(0,229,160,.1); } .plan-card.plan-ultra { border-color: rgba(245,158,11,.3); background: linear-gradient(160deg, rgba(245,158,11,.06), rgba(139,92,246,.06)); } .plan-popular-badge { position: absolute; top: -11px; right: 18px; background: linear-gradient(135deg, var(--g1, #00e5a0), var(--g3, #4f8eff)); color: #001b12; font-size: 10px; font-weight: 800; padding: 4px 12px; border-radius: 50px; box-shadow: 0 4px 14px rgba(0,229,160,.4); } .plan-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .plan-name { font-size: 18px; font-weight: 900; color: var(--t1, #F0F4FF); } .plan-price { font-size: 20px; font-weight: 900; color: var(--t1, #F0F4FF); text-align: right; line-height: 1.3; } .plan-currency { font-size: 12px; font-weight: 600; color: var(--t3, #505878); } .plan-period { font-size: 11px; font-weight: 500; color: var(--t3, #505878); } .plan-price-usd { font-size: 10px; color: var(--t3, #505878); margin-top: 2px; text-align: right; } .plan-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .pf-row { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .pf-row.yes { color: var(--t1, #F0F4FF); } .pf-row.yes::before { content: '✓'; color: var(--g1, #00e5a0); font-weight: 900; flex-shrink: 0; } .pf-row.no { color: var(--t3, #505878); } .pf-row.no::before { content: '–'; color: var(--t3, #505878); font-weight: 900; flex-shrink: 0; } .plan-btn { width: 100%; padding: 13px; border-radius: 13px; border: none; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s; font-family: inherit; } .plan-btn:active { transform: scale(.97); } .plan-btn-ghost { background: transparent; border: 1.5px solid var(--bd2, rgba(255,255,255,.12)); color: var(--t2, #8899BB); cursor: default; } .plan-btn-primary { background: linear-gradient(135deg, var(--g1, #00e5a0), var(--g3, #4f8eff)); color: #001b12; box-shadow: 0 8px 24px rgba(0,229,160,.28); } .plan-btn-primary:hover { box-shadow: 0 10px 30px rgba(0,229,160,.4); } .plan-btn-ultra { background: linear-gradient(135deg, #f59e0b, #8b5cf6); color: #fff; box-shadow: 0 8px 24px rgba(245,158,11,.25); } .plan-btn-ultra:hover { box-shadow: 0 10px 30px rgba(245,158,11,.38); } /* ── TO'LOV ESLATMASI ── */ .payment-note { display: flex; align-items: center; gap: 10px; background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: 12px; color: var(--t3, #505878); line-height: 1.5; } .pn-icon { font-size: 18px; flex-shrink: 0; } /* ── PROMO KOD ── */ .promo-section { background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 16px; padding: 16px; margin-bottom: 8px; } .promo-row { display: flex; gap: 8px; } .promo-row .field-inp { flex: 1; text-transform: uppercase; letter-spacing: 1px; } /* ── BMI TABI: qo'shimcha elementlar ── */ .bmi-scale-card { background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 16px; padding: 16px; margin-bottom: 14px; } .bs-seg { padding: 10px 4px; text-align: center; font-size: 10px; font-weight: 700; color: rgba(0,0,0,.75); line-height: 1.5; } .bs-seg:first-child { border-radius: 8px 0 0 8px; } .bs-seg:last-child { border-radius: 0 8px 8px 0; } .cal-calc-card { background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 16px; padding: 16px; margin-bottom: 20px; } .section-sub { font-size: 12px; color: var(--t3, #505878); } /* ── VAZN TABI ── */ .weight-log-add { background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 16px; padding: 16px; } .weight-log-item { display: flex; align-items: center; justify-content: space-between; background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 12px; padding: 12px 14px; } .wli-val { font-size: 15px; font-weight: 800; color: var(--t1, #F0F4FF); } .wli-date { font-size: 11px; color: var(--t3, #505878); margin-top: 2px; } .wli-change { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 50px; } .wli-change.down { color: var(--g1, #00e5a0); background: rgba(0,229,160,.12); } .wli-change.up { color: #f59e0b; background: rgba(245,158,11,.12); } /* ── SOZLAMALAR RO'YXATI (Settings tab) ── */ .settings-list { display: flex; flex-direction: column; gap: 20px; } .sg-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--t3, #505878); margin-bottom: 8px; padding-left: 2px; } .sg-item { display: flex; align-items: center; gap: 12px; background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--bd, rgba(255,255,255,.07)); border-radius: 14px; padding: 13px 14px; margin-bottom: 6px; cursor: pointer; transition: background .15s; } .sg-item:hover { background: var(--card2, rgba(255,255,255,.07)); } .sg-item:last-child { margin-bottom: 0; } .sg-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; } .sg-info { flex: 1; min-width: 0; } .sg-label { font-size: 13.5px; font-weight: 600; color: var(--t1, #F0F4FF); } .sg-sub { font-size: 11px; color: var(--t3, #505878); margin-top: 1px; } .sg-arrow { font-size: 18px; color: var(--t3, #505878); flex-shrink: 0; }