:root {
--color-accent-50: #F5F3FF;
--color-accent-100: #EDE9FE;
--color-accent-200: #DDD6FE;
--color-accent-300: #C4B5FD;
--color-accent-400: #A78BFA;
--color-accent-500: #8B5CF6;
--color-accent-600: #7C3AED;
--color-accent-700: #6D28D9;
--color-accent-800: #5B21B6;
--color-accent-900: #4C1D95;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
--color-gray-950: #0B0F19;
--color-white: #FFFFFF;
--color-black: #000000;
--color-success-500: #10B981;
--color-success-600: #059669;
--color-warning-500: #F59E0B;
--color-warning-600: #D97706;
--color-error-500: #EF4444;
--color-error-600: #DC2626;
--color-info-500: #3B82F6;
--color-info-600: #2563EB;
--color-cat-social: #8B5CF6;
--color-cat-ai: #06B6D4;
--color-cat-calc: #EF4444;
--color-cat-gen: #F59E0B;
--color-cat-util: #3B82F6;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 20px 50px -5px rgba(0, 0, 0, 0.1);
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-secondary);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--accent);
text-decoration: none;
transition: opacity var(--transition-fast);
}
a:hover { color: var(--accent-hover); opacity: 0.85; }
img { max-width: 100%; height: auto; display: block; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--accent);
color: var(--text-inverse);
padding: 8px 16px;
z-index: 10000;
border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
left: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-4);
}
@media (min-width: 768px) {
.container { padding: 0 var(--space-6); }
}
.main {
flex: 1;
padding: var(--space-6) 0;
}
.topbar {
background: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
}
.topbar__inner {
display: flex;
align-items: center;
height: 60px;
gap: var(--space-4);
}
.topbar__logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--text-primary);
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.topbar__logo-icon { font-size: 22px; }
.topbar__nav {
display: none;
align-items: center;
gap: var(--space-1);
margin-left: var(--space-6);
}
@media (min-width: 768px) {
.topbar__nav { display: flex; }
}
.topbar__nav-link {
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.topbar__nav-link:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.topbar__actions {
display: none;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
@media (min-width: 768px) {
.topbar__actions { display: flex; }
}
.topbar__btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
transition: all var(--transition-fast);
display: flex;
align-items: center;
}
.topbar__btn:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.topbar__points {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
background: var(--accent-bg);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--accent-text);
text-decoration: none;
}
.topbar__avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--font-size-sm);
}
.topbar__cta {
display: none;
}
@media (min-width: 1024px) {
.topbar__cta { display: inline-flex; }
}
.topbar__lang-dropdown,
.topbar__user-dropdown {
position: relative;
}
.topbar__dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
min-width: 160px;
z-index: 1001;
overflow: hidden;
}
.topbar__dropdown.open { display: block; }
.topbar__dropdown-header {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-light);
}
.topbar__dropdown-header strong { display: block; }
.topbar__dropdown-sub {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.topbar__dropdown-item {
display: block;
padding: var(--space-2) var(--space-4);
color: var(--text-primary);
font-size: var(--font-size-sm);
transition: background var(--transition-fast);
}
.topbar__dropdown-item:hover { background: var(--bg-tertiary); }
.topbar__dropdown-item.active { color: var(--accent); font-weight: 600; }
.topbar__burger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
margin-left: auto;
}
.topbar__burger span {
display: block;
width: 20px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all var(--transition-fast);
}
@media (min-width: 768px) {
.topbar__burger { display: none; }
}
.mobile-nav {
display: none;
background: var(--bg-primary);
border-bottom: 1px solid var(--border);
padding: var(--space-3) var(--space-4);
}
.mobile-nav.open { display: block; }
.mobile-nav__link {
display: block;
padding: var(--space-3) var(--space-2);
color: var(--text-primary);
font-weight: 500;
border-radius: var(--radius-md);
}
.mobile-nav__link:hover { background: var(--bg-tertiary); }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 12px 24px;
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: 600;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
line-height: 1.4;
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: var(--text-inverse);
box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
background: var(--accent-hover);
color: var(--text-inverse);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--accent);
border: 1.5px solid var(--accent);
}
.btn-secondary:hover {
background: var(--accent-bg);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.btn-sm {
padding: 8px 16px;
font-size: var(--font-size-sm);
}
.btn-full { width: 100%; }
.btn:disabled,
.btn--loading {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.spinner-sm {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-6);
transition: box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.card:hover {
}
.card--hover:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.form-group {
margin-bottom: var(--space-5);
}
.form-group--row {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
}
.form-label__link {
font-size: var(--font-size-xs);
font-weight: 400;
}
.input,
.textarea,
.select {
width: 100%;
padding: 12px 16px;
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--text-primary);
background: var(--bg-tertiary);
border: 1.5px solid transparent;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
outline: none;
}
.input:focus,
.textarea:focus,
.select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
background: var(--bg-primary);
}
.input::placeholder { color: var(--text-tertiary); }
.textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.form-hint {
display: block;
margin-top: var(--space-1);
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.input-password-wrapper {
position: relative;
}
.input-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 16px;
padding: 4px;
}
.password-strength {
margin-top: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-2);
}
.password-strength__bar {
height: 4px;
width: 0%;
border-radius: var(--radius-full);
transition: all var(--transition-base);
background: var(--error);
}
.password-strength__text {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
white-space: nowrap;
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.alert--error { background: var(--error-bg); color: var(--error); }
.alert--success { background: var(--success-bg); color: var(--success); }
.alert--warning { background: var(--warning-bg); color: var(--warning); }
.alert--info { background: var(--info-bg); color: var(--info); }
.flash-container {
position: fixed;
top: 68px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: 100%;
max-width: 500px;
padding: 0 var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.flash {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
font-size: var(--font-size-sm);
font-weight: 500;
animation: flashIn 0.3s ease;
}
.flash--success { background: var(--success); color: #fff; }
.flash--error { background: var(--error); color: #fff; }
.flash--warning { background: var(--warning); color: #fff; }
.flash--info { background: var(--info); color: #fff; }
.flash__close {
background: none;
border: none;
color: inherit;
font-size: 20px;
cursor: pointer;
padding: 0 4px;
opacity: 0.8;
}
.flash__close:hover { opacity: 1; }
@keyframes flashIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9998;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.toast {
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
font-size: var(--font-size-sm);
font-weight: 500;
color: #fff;
animation: toastIn 0.3s ease;
max-width: 360px;
}
.toast--success { background: var(--success); }
.toast--error { background: var(--error); }
.toast--warning { background: var(--warning); }
.toast--info { background: var(--info); }
.toast--points { background: var(--accent); }
@keyframes toastIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.page-auth .main {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 60px - 80px);
}
.page-auth .container {
display: flex;
justify-content: center;
}
.auth-container {
width: 100%;
max-width: 440px;
}
.auth-card {
padding: var(--space-8);
}
.auth-header {
text-align: center;
margin-bottom: var(--space-6);
}
.auth-title {
font-size: var(--font-size-2xl);
font-weight: 700;
}
.auth-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin-top: var(--space-1);
}
.auth-footer {
text-align: center;
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--border-light);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.profile-header {
display: flex;
align-items: center;
gap: var(--space-5);
margin-bottom: var(--space-8);
}
.profile-avatar {
width: 72px;
height: 72px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-3xl);
flex-shrink: 0;
}
.profile-info h1 { font-size: var(--font-size-2xl); }
.profile-info p { color: var(--text-secondary); font-size: var(--font-size-sm); }
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
.stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--space-5);
text-align: center;
box-shadow: var(--shadow-sm);
}
.stat-card__value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--accent);
}
.stat-card__label {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
margin-top: var(--space-1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.xp-bar {
width: 100%;
height: 8px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
overflow: hidden;
margin-top: var(--space-2);
}
.xp-bar__fill {
height: 100%;
background: var(--accent);
border-radius: var(--radius-full);
transition: width var(--transition-slow);
}
.section-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-4);
}
.referral-box {
background: var(--accent-bg);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-6);
}
.referral-box__code {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--bg-primary);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-weight: 600;
margin-top: var(--space-3);
}
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-elevated);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
z-index: 9997;
padding: var(--space-4);
}
.cookie-banner__inner {
max-width: 800px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.cookie-banner__text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
flex: 1;
}
.cookie-banner__actions {
display: flex;
gap: var(--space-2);
}
.footer {
background: var(--bg-primary);
border-top: 1px solid var(--border-light);
padding: var(--space-8) 0;
margin-top: auto;
}
.footer__inner {
text-align: center;
}
.footer__logo {
font-weight: 700;
font-size: var(--font-size-lg);
}
.footer__tagline {
color: var(--text-tertiary);
font-size: var(--font-size-sm);
margin-top: var(--space-1);
}
.footer__links {
display: flex;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-4);
}
.footer__links a {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.footer__links a:hover { color: var(--accent); }
.footer__copy {
color: var(--text-tertiary);
font-size: var(--font-size-xs);
margin-top: var(--space-4);
}
.empty-state {
text-align: center;
padding: var(--space-10) var(--space-6);
color: var(--text-tertiary);
}
.empty-state__icon { font-size: 48px; margin-bottom: var(--space-4); opacity: 0.5; }
.empty-state__text { margin-bottom: var(--space-4); }
.badges-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.badge-item {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--bg-tertiary);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
}
.badge-item--locked { opacity: 0.35; }
.skeleton {
background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 0.3s ease;
}
p a, li a, .seo-content a, .tool-description a, .aeo-answer a,
.blog-content a, .footer__col a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
p a:hover, li a:hover, .seo-content a:hover {
text-decoration-thickness: 2px;
}
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
.hide-desktop { display: block; }
@media (min-width: 768px) { .hide-desktop { display: none; } }
@media (max-width: 768px) {
nav a, nav button,
.topbar__btn, .topbar__nav-link--primary,
.bottom-bar__link,
.hero__pill,
.btn, .btn-sm, .btn-ghost {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.topbar__logo { min-height: 44px; display: flex; align-items: center; }
.bottom-bar__link { padding: 6px 8px; }
}
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-sm {
transition: opacity 0.15s, transform 0.15s !important;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:hover { filter: brightness(1.08); }
.tool-card-item {
transition: transform 0.2s, opacity 0.2s !important;
}
.tool-card-link:hover .tool-card-item {
transform: translateY(-3px);
}
.topbar__nav-link, .topbar__nav-link--primary,
.footer__col a, .footer__suggestion-chip {
transition: opacity 0.15s !important;
}
.topbar__nav-link:hover, .topbar__nav-link--primary:hover,
.footer__col a:hover, .footer__suggestion-chip:hover {
opacity: 0.8;
}
.qt-icon { transition: none !important; }
.tool-card-item {
min-height: 110px;
contain: layout style;
}
.btn, .tool-card-link, .bottom-bar__link {
will-change: transform, opacity;
}
.cat-nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
.cat-nav__link {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
white-space: nowrap;
}
.cat-nav__link:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.cat-nav__link--active {
color: var(--accent);
background: var(--accent-bg);
}
.cat-nav__icon {
font-size: 14px;
line-height: 1;
}
.cat-nav__label {
line-height: 1;
}
@media (max-width: 1100px) and (min-width: 769px) {
.cat-nav__label {
display: none;
}
.cat-nav__link {
padding: 6px 10px;
}
.cat-nav__icon {
font-size: 16px;
}
}
@media (max-width: 768px) {
.cat-nav {
display: none !important;
}
}
.cat-bar {
display: none;
position: sticky;
top: 56px;
z-index: 90;
background: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
padding: 0;
}
@media (max-width: 768px) {
.cat-bar {
display: block;
}
}
.cat-bar__scroll {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 8px 12px;
gap: 6px;
}
.cat-bar__scroll::-webkit-scrollbar {
display: none;
}
.cat-bar__tab {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-secondary);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
scroll-snap-align: start;
transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
border: 1.5px solid transparent;
}
.cat-bar__tab:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
.cat-bar__tab--active {
color: var(--text-inverse);
background: var(--accent);
border-color: var(--accent);
}
.cat-bar__tab--active[data-category="social"]     { background: #8B5CF6; border-color: #8B5CF6; }
.cat-bar__tab--active[data-category="ai"]          { background: #06B6D4; border-color: #06B6D4; }
.cat-bar__tab--active[data-category="calculator"]  { background: #EF4444; border-color: #EF4444; }
.cat-bar__tab--active[data-category="generator"]   { background: #F59E0B; border-color: #F59E0B; }
.cat-bar__tab--active[data-category="utility"]     { background: #3B82F6; border-color: #3B82F6; }
.cat-bar__tab--active[data-category="all"]         { background: var(--accent); border-color: var(--accent); }
.cat-bar__tab-icon {
font-size: 14px;
line-height: 1;
}
.cat-bar__tab-label {
line-height: 1;
}
.hero {
text-align: center;
padding: var(--space-6) var(--space-4) var(--space-3);
max-width: 720px;
margin: 0 auto;
}
.hero__title {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-2);
}
.hero__subtitle {
font-size: var(--font-size-lg);
color: var(--accent);
font-weight: 500;
margin: 0 0 var(--space-2);
}
.hero__desc {
font-size: var(--font-size-base);
color: var(--text-secondary);
margin: 0 0 var(--space-4);
}
.hero__search {
position: relative;
max-width: 460px;
margin: 0 auto var(--space-3);
}
.hero__search-input {
width: 100%;
padding: 12px 16px 12px 44px;
border-radius: var(--radius-full);
border: 1.5px solid var(--border);
background: var(--bg-elevated);
color: var(--text-primary);
font-size: var(--font-size-base);
font-family: var(--font-sans);
transition: box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
box-sizing: border-box;
}
.hero__search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.hero__search-input::placeholder {
color: var(--text-tertiary);
}
.hero__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.hero__pills {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.hero__pills::-webkit-scrollbar { display: none; }
.hero__pill { scroll-snap-align: start; flex-shrink: 0; }
.hero__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: var(--radius-full);
border: 1.5px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
font-family: var(--font-sans);
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
white-space: nowrap;
}
.hero__pill:hover {
border-color: var(--text-tertiary);
color: var(--text-primary);
background: var(--bg-tertiary);
}
.hero__pill--active {
color: white;
background: var(--accent);
border-color: var(--accent);
}
.hero__pill--active[data-filter="social"]     { background: #8B5CF6; border-color: #8B5CF6; }
.hero__pill--active[data-filter="ai"]          { background: #06B6D4; border-color: #06B6D4; }
.hero__pill--active[data-filter="calculator"]  { background: #EF4444; border-color: #EF4444; }
.hero__pill--active[data-filter="generator"]   { background: #F59E0B; border-color: #F59E0B; }
.hero__pill--active[data-filter="utility"]     { background: #3B82F6; border-color: #3B82F6; }
.hero__pill-count {
font-size: var(--font-size-xs);
opacity: 0.85;
}
@media (max-width: 768px) {
.hero__pills {
display: none;
}
.hero {
padding: var(--space-4) var(--space-4) var(--space-2);
}
.hero__title {
font-size: var(--font-size-2xl);
}
}
.homepage-section {
padding: 0 var(--space-4) var(--space-6);
max-width: 1200px;
margin: 0 auto;
}
.homepage-section__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.homepage-section__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-4);
}
.homepage-section__cat-icon {
font-size: 24px;
}
.homepage-section__count {
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--text-tertiary);
background: var(--bg-tertiary);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-4);
}
@media (max-width: 640px) {
.tool-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
}
@media (max-width: 380px) {
.tool-grid {
grid-template-columns: 1fr;
}
}
.tool-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.tool-card-item {
background: var(--bg-elevated);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
border-top: 3px solid var(--card-accent, var(--accent));
transition: all var(--transition-base);
height: 100%;
display: flex;
flex-direction: column;
}
.tool-card-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
border-top-color: var(--card-accent, var(--accent));
}
.tool-card-item__icon {
font-size: 28px;
margin-bottom: var(--space-3);
line-height: 1;
}
.tool-card-item__title {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
gap: var(--space-2);
}
.tool-card-item__desc {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
flex-grow: 1;
}
.tool-card-item__badge {
font-size: var(--font-size-xs);
font-weight: 600;
padding: 1px 6px;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tool-card-item__badge--ai {
background: rgba(6, 182, 212, 0.15);
color: #0E7490;
}
@media (max-width: 640px) {
.tool-card-item {
padding: var(--space-4);
}
.tool-card-item__icon {
font-size: 24px;
margin-bottom: var(--space-2);
}
.tool-card-item__title {
font-size: var(--font-size-sm);
}
.tool-card-item__desc {
font-size: var(--font-size-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.empty-state {
text-align: center;
padding: var(--space-10) var(--space-6);
color: var(--text-tertiary);
}
.empty-state__icon {
font-size: 48px;
display: block;
margin-bottom: var(--space-3);
opacity: 0.5;
}
.empty-state__text {
display: block;
font-size: var(--font-size-base);
}
.cta-section {
max-width: 600px;
margin: var(--space-6) auto var(--space-10);
text-align: center;
}
.cta-section__inner {
padding: var(--space-8);
}
.tool-category-section {
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.topbar__nav-link--cat {
font-size: var(--font-size-sm);
transition: opacity var(--transition-fast);
}
.topbar__nav-link--cat:hover {
color: var(--cat-color, var(--accent)) !important;
}
@media (max-width: 1100px) {
.topbar__nav-label {
display: none;
}
}
@media (max-width: 768px) {
.topbar__nav-link--cat {
display: none;
}
}
.qt-icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
width: 24px;
height: 24px;
color: currentColor;
transition: color var(--transition-fast, 150ms ease),
transform var(--transition-fast, 150ms ease);
}
.qt-icon * {
vector-effect: non-scaling-stroke;
}
.qt-icon--xs  { width: 14px; height: 14px; }
.qt-icon--sm  { width: 18px; height: 18px; }
.qt-icon--md  { width: 24px; height: 24px; }
.qt-icon--lg  { width: 32px; height: 32px; }
.qt-icon--xl  { width: 40px; height: 40px; }
.qt-icon--2xl { width: 48px; height: 48px; }
.qt-icon--3xl { width: 64px; height: 64px; }
.qt-icon--social     { color: var(--color-cat-social, #8B5CF6); }
.qt-icon--ai         { color: var(--color-cat-ai, #06B6D4); }
.qt-icon--calculator { color: var(--color-cat-calc, #EF4444); }
.qt-icon--generator  { color: var(--color-cat-gen, #F59E0B); }
.qt-icon--utility    { color: var(--color-cat-util, #3B82F6); }
.qt-icon--accent  { color: var(--accent, #7C3AED); }
.qt-icon--success { color: var(--success, #059669); }
.qt-icon--warning { color: var(--warning, #D97706); }
.qt-icon--error   { color: var(--error, #DC2626); }
.qt-icon--info    { color: var(--info, #2563EB); }
.qt-icon--muted   { color: var(--text-tertiary, #9CA3AF); }
.qt-icon--inverse { color: var(--text-inverse, #FFFFFF); }
.qt-icon--gold   { color: #F59E0B; }
.qt-icon--silver { color: #9CA3AF; }
.qt-icon--bronze { color: #D97706; }
.btn .qt-icon {
margin-inline-end: 6px;
width: 18px;
height: 18px;
}
.btn-sm .qt-icon {
width: 14px;
height: 14px;
margin-inline-end: 4px;
}
.btn-lg .qt-icon {
width: 22px;
height: 22px;
margin-inline-end: 8px;
}
.btn--icon-only {
padding: 8px;
line-height: 1;
}
.btn--icon-only .qt-icon {
margin: 0;
}
.tool-card .qt-icon,
.qt-tool-card__icon .qt-icon {
width: 32px;
height: 32px;
}
.qt-tool-icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-lg, 14px);
background: var(--accent-bg, rgba(139, 92, 246, 0.1));
transition: background var(--transition-fast, 150ms ease),
transform var(--transition-fast, 150ms ease);
}
.qt-tool-icon-circle .qt-icon {
width: 24px;
height: 24px;
}
.qt-tool-icon-circle--social     { background: rgba(139, 92, 246, 0.12); }
.qt-tool-icon-circle--ai         { background: rgba(6, 182, 212, 0.12); }
.qt-tool-icon-circle--calculator { background: rgba(239, 68, 68, 0.10); }
.qt-tool-icon-circle--generator  { background: rgba(245, 158, 11, 0.10); }
.qt-tool-icon-circle--utility    { background: rgba(59, 130, 246, 0.10); }
.tool-card:hover .qt-tool-icon-circle,
.qt-tool-card:hover .qt-tool-icon-circle {
transform: scale(1.08);
}
.tool-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-xl, 20px);
background: var(--accent-bg, rgba(139, 92, 246, 0.1));
margin-bottom: var(--space-3, 12px);
}
.tool-header__icon .qt-icon {
width: 28px;
height: 28px;
}
.tool-header__icon--social     { background: rgba(139, 92, 246, 0.12); color: var(--color-cat-social, #8B5CF6); }
.tool-header__icon--ai         { background: rgba(6, 182, 212, 0.12); color: var(--color-cat-ai, #06B6D4); }
.tool-header__icon--calculator { background: rgba(239, 68, 68, 0.10); color: var(--color-cat-calc, #EF4444); }
.tool-header__icon--generator  { background: rgba(245, 158, 11, 0.10); color: var(--color-cat-gen, #F59E0B); }
.tool-header__icon--utility    { background: rgba(59, 130, 246, 0.10); color: var(--color-cat-util, #3B82F6); }
.nav-item .qt-icon {
width: 20px;
height: 20px;
margin-inline-end: 8px;
opacity: 0.7;
}
.nav-item--active .qt-icon,
.nav-item:hover .qt-icon {
opacity: 1;
color: var(--accent, #7C3AED);
}
.badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full, 9999px);
background: var(--bg-tertiary, #F3F4F6);
}
.badge-icon .qt-icon {
width: 22px;
height: 22px;
}
.badge-icon--unlocked {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.badge-icon--unlocked .qt-icon {
color: white;
}
.badge-icon--locked {
opacity: 0.4;
filter: grayscale(1);
}
.qt-icon--pulse {
animation: qt-icon-pulse 2s ease-in-out infinite;
}
@keyframes qt-icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.qt-icon--spin {
animation: qt-icon-spin 1s linear infinite;
}
@keyframes qt-icon-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.qt-icon--bounce {
animation: qt-icon-bounce 0.5s ease;
}
@keyframes qt-icon-bounce {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.2); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
.qt-icon--shake {
animation: qt-icon-shake 0.4s ease;
}
@keyframes qt-icon-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
[data-theme="dark"] .qt-tool-icon-circle--social     { background: rgba(139, 92, 246, 0.18); }
[data-theme="dark"] .qt-tool-icon-circle--ai         { background: rgba(6, 182, 212, 0.18); }
[data-theme="dark"] .qt-tool-icon-circle--calculator { background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .qt-tool-icon-circle--generator  { background: rgba(245, 158, 11, 0.15); }
[data-theme="dark"] .qt-tool-icon-circle--utility    { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .tool-header__icon--social     { background: rgba(139, 92, 246, 0.18); }
[data-theme="dark"] .tool-header__icon--ai         { background: rgba(6, 182, 212, 0.18); }
[data-theme="dark"] .tool-header__icon--calculator { background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .tool-header__icon--generator  { background: rgba(245, 158, 11, 0.15); }
[data-theme="dark"] .tool-header__icon--utility    { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .badge-icon {
background: var(--bg-tertiary, #1F2937);
}
[dir="rtl"] .btn .qt-icon {
margin-inline-start: 6px;
margin-inline-end: 0;
}
@media (max-width: 640px) {
.tool-header__icon {
width: 48px;
height: 48px;
}
.tool-header__icon .qt-icon {
width: 24px;
height: 24px;
}
.qt-tool-icon-circle {
width: 40px;
height: 40px;
}
.qt-tool-icon-circle .qt-icon {
width: 20px;
height: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.qt-icon--pulse,
.qt-icon--spin,
.qt-icon--bounce,
.qt-icon--shake {
animation: none;
}
}
.qt-icon-text {
display: inline-flex;
align-items: center;
gap: 6px;
}
.qt-icon-text .qt-icon {
flex-shrink: 0;
}