:root { --primaryColor: #ffffff; --accentColor: #ffc107; --textColor: #1a1a1a; --bgColor: #fcfcfc; --headerBg: rgba(255, 255, 255, 0.9); --cardBg: #ffffff; --borderColor: rgba(0,0,0,0.06); --settingsShadow: 0 15px 40px rgba(0,0,0,0.1); --mainFont: 'Inter', sans-serif; --headerFont: 'Merriweather', serif; --safeTop: env(safe-area-inset-top); --selectionBg: rgba(255, 193, 7, 0.3); }
[data-theme='dark'] { --primaryColor: #121212; --accentColor: #ffc107; --textColor: #f5f5f5; --bgColor: #0a0a0a; --headerBg: rgba(18, 18, 18, 0.9); --cardBg: #181818; --borderColor: rgba(255,255,255,0.06); --settingsShadow: 0 15px 40px rgba(0,0,0,0.3); --selectionBg: rgba(255, 193, 7, 0.4); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: local('Inter'), url('/preview/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: local('Inter'), url('/preview/inter-v20-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 600; src: local('Merriweather'), url('/preview/merriweather-v33-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: local('Merriweather'), url('/preview/merriweather-v33-latin-regular.woff2') format('woff2'); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; text-decoration: none !important; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
::selection { background: var(--selectionBg); color: inherit; }
::-moz-selection { background: var(--selectionBg); color: inherit; }
.noDownload { -webkit-user-drag: none; pointer-events: none; -webkit-touch-callout: none; user-select: none; }
body { font-family: var(--mainFont); background: var(--bgColor); color: var(--textColor); margin: 0; overflow-x: hidden; transition: background 0.3s; line-height: 1.4; font-size: 14px; }
header { background: var(--headerBg); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid var(--borderColor); position: sticky; top: 0; z-index: 1500; padding: calc(var(--safeTop) + 6px) 0 6px; }
.headerWrapper { max-width: 1100px; width: 94%; margin: 0 auto; }
.headerContainer { display: flex; justify-content: space-between; align-items: center; }
.headerControls { display: flex; align-items: center; gap: 12px; }
.profileLink { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accentColor); transition: 0.3s; }
.profileLink:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,193,7,0.4); }
.headerAvatar { width: 100%; height: 100%; object-fit: cover; }
.headerLeft { display: flex; align-items: center; gap: 10px; }
.headerBrand { display: flex; align-items: center; gap: 8px; }
.headerLogo { height: 28px; width: 28px; border-radius: 8px; object-fit: cover; }
.headerTitleText { font-size: 0.9rem; font-weight: 900; margin: 0; font-family: var(--headerFont); opacity: 0; transition: 0.4s; display: flex; align-items: center; gap: 4px; letter-spacing: -0.3px; }
.headerTitleText.loaded { opacity: 1; }
.verifiedTick { color: var(--accentColor); font-size: 0.75rem; }
.ctrlBtn { background: var(--cardBg); border: 1px solid var(--borderColor); color: var(--textColor); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: 0.2s; position: relative; overflow: hidden; }
.ctrlBtn:active { transform: scale(0.9); background: var(--accentColor); color: #000; border-color: var(--accentColor); }
.backBtn { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 50%; }
.sideDrawer { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; backdrop-filter: blur(4px); }
.sideDrawer.active { display: block; }
.drawerContent { background: var(--cardBg); width: 280px; height: calc(100% - 20px); margin: 10px; border-radius: 24px; box-shadow: var(--settingsShadow); display: flex; flex-direction: column; animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid var(--borderColor); overflow: hidden; }
@keyframes slideInLeft { from { transform: translateX(-110%); } to { transform: translateX(0); } }
.drawerHeader { padding: 20px 18px; border-bottom: 1px solid var(--borderColor); display: flex; justify-content: space-between; align-items: center; }
.drawerTitle { font-weight: 900; font-size: 1.1rem; letter-spacing: -0.5px; }
.drawerClose { background: rgba(0,0,0,0.05); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 0.9rem; color: var(--textColor); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drawerNav { padding: 10px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.drawerNav a { color: var(--textColor); padding: 12px 16px; border-radius: 15px; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 12px; transition: 0.2s; border: 1px solid transparent; }
.drawerNav a:active { background: var(--accentColor); color: #000; transform: scale(0.98); }
.drawerNav a.active { background: var(--accentColor); color: #000; border-color: var(--accentColor); box-shadow: 0 8px 15px rgba(255,193,7,0.2); }
.settingsDropdownPanel { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2100; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); padding: 20px; }
.settingsDropdownPanel.active { display: flex; }
.settingsPanelContent { background: var(--cardBg); width: 100%; max-width: 340px; border-radius: 28px; overflow: hidden; box-shadow: var(--settingsShadow); animation: zoomIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--borderColor); max-height: 80vh; display: flex; flex-direction: column; }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.settingsPanelHeader { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--borderColor); }
.settingsPanelTitle { font-size: 1rem; font-weight: 900; margin: 0; }
.settingsCloseBtn { background: rgba(0,0,0,0.05); border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--textColor); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.settingsCloseBtn:active { transform: scale(0.9); background: var(--accentColor); color: #000; }
.settingsBody { padding: 20px; overflow-y: auto; }
.settingsSectionTitle { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; color: #888; margin-bottom: 15px; letter-spacing: 1.2px; }
.langSearch { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--borderColor); background: var(--bgColor); color: var(--textColor); margin-bottom: 15px; font-size: 0.8rem; font-weight: 600; }
.langOptionsList { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.langOption { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--borderColor); color: var(--textColor); font-size: 0.75rem; transition: 0.2s; background: var(--cardBg); font-weight: 700; }
.langOption.active { border-color: var(--accentColor); background: rgba(255,193,7,0.1); color: var(--accentColor); box-shadow: inset 0 0 0 1px var(--accentColor); }
.themeSwitcher { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--borderColor); background: var(--bgColor); color: var(--textColor); cursor: pointer; transition: 0.2s; font-size: 0.85rem; font-weight: 800; margin-bottom: 25px; }
.themeSwitcher:active { transform: scale(0.98); background: var(--cardBg); }
.mainFooter { background: var(--cardBg); padding: 40px 0 30px; border-top: 1px solid var(--borderColor); }
.footerWrapper { max-width: 1100px; width: 92%; margin: 0 auto; }
.footerGrid { display: grid; grid-template-columns: 1fr; gap: 35px; }
.footerTitle { font-size: 1.2rem; font-weight: 900; margin: 0; font-family: var(--headerFont); color: var(--accentColor); }
.footerTagline { font-size: 0.8rem; opacity: 0.6; margin: 5px 0 15px; font-style: italic; }
.footerLinksGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.linkGroupTitle { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--accentColor); margin-bottom: 12px; }
.footerLink { display: block; color: var(--textColor); font-size: 0.8rem; padding: 8px 0; opacity: 0.7; font-weight: 600; }
.socialButtons { display: flex; gap: 12px; }
.socialButtons a { color: var(--textColor); font-size: 1rem; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borderColor); display: flex; align-items: center; justify-content: center; background: var(--bgColor); transition: 0.2s; }
.socialButtons a:active { background: var(--accentColor); transform: scale(0.9); color: #000; }
.copyright { text-align: center; margin-top: 40px; font-size: 0.7rem; opacity: 0.4; font-weight: 700; letter-spacing: 0.5px; }
.floatingBackToTopBtn, .floatingWhatsappBtn { position: fixed; right: 15px; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: 0.3s; }
.floatingBackToTopBtn { bottom: 85px; background: var(--cardBg); color: var(--textColor); border: 1px solid var(--borderColor); opacity: 0; pointer-events: none; }
.floatingBackToTopBtn.visible { opacity: 1; pointer-events: auto; }
.floatingWhatsappBtn { bottom: 25px; background: #25d366; color: #fff; font-size: 1.4rem; border: 3px solid #fff; }
.ripple { position: absolute; border-radius: 50%; background: rgba(0,0,0,0.1); transform: scale(0); animation: ripple 0.6s ease-out; pointer-events: none; }
.rippleAccent { background: rgba(255,255,255,0.4) !important; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }