:root {
    /* Light theme (default) */
    --bg-primary: #fff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #fafafa;
    --bg-card: #fff;
    --bg-code: #f5f5f5;
    --bg-hover: #e8e8e8;

    --text-primary: #333;
    --text-secondary: #666;
    --text-tertiary: #999;

    --border-primary: #ddd;
    --border-light: #eee;

    --color-primary: #4285f4;
    --color-primary-hover: #3367d6;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;

    --nav-bg: #f5f5f5;
    --nav-balance-bg: #fff;
    --sidebar-bg: #f7f7f8;

    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-error-bg: #f8d7da;
    --alert-error-text: #721c24;
}

html.dark {
    /* Dark theme */
    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #2d2d2d;
    --bg-card: #2d2d2d;
    --bg-code: #2d2d2d;
    --bg-hover: #3a3a3a;

    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-tertiary: #707070;

    --border-primary: #404040;
    --border-light: #353535;

    --color-primary: #5a9fff;
    --color-primary-hover: #4a8fef;
    --color-success: #3cb371;
    --color-danger: #e05555;
    --color-warning: #e6b800;

    --nav-bg: #252525;
    --nav-balance-bg: #333;
    --sidebar-bg: #252525;

    --alert-success-bg: #1e3a2d;
    --alert-success-text: #8fd4a8;
    --alert-error-bg: #3a1e1e;
    --alert-error-text: #f0a0a0;
}

* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; background: var(--bg-primary); color: var(--text-primary); }
.container { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
.btn { display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-primary); color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 1rem; margin: 0.25rem; }
.btn:hover { background: var(--color-primary-hover); }
.btn-yandex { background: #fc3f1d; }
.btn-github { background: #333; }
html.dark .btn-github { background: #555; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #c82333; }
html.dark .btn-danger:hover { background: #c04040; }
.card { border: 1px solid var(--border-primary); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; background: var(--bg-card); }
.api-key { font-family: monospace; background: var(--bg-code); padding: 0.5rem; border-radius: 4px; word-break: break-all; }
input[type="text"] { padding: 0.5rem; border: 1px solid var(--border-primary); border-radius: 4px; font-size: 1rem; width: 200px; max-width: 100%; background: var(--bg-primary); color: var(--text-primary); }
.alert { padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); }
.alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); }
/* Navigation styles */
.main-nav { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 1rem; background: var(--nav-bg); margin-bottom: 2rem; flex-wrap: wrap; gap: 0.5rem; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.nav-link { text-decoration: none; color: var(--text-primary); padding: 0.5rem 0.75rem; border-radius: 4px; white-space: nowrap; }
.nav-link:hover { background: var(--bg-hover); }
.nav-link.active { font-weight: bold; color: var(--color-primary); background: rgba(66, 133, 244, 0.15); }
.nav-user { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.nav-user-link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.nav-avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 0.5rem; }
.nav-avatar-icon { width: 24px; height: 24px; margin-right: 0.5rem; color: var(--text-secondary); }
.nav-username { margin-right: 0.5rem; }
.nav-balance { font-weight: bold; text-decoration: none; margin-right: 0.5rem; padding: 0.25rem 0.5rem; background: var(--nav-balance-bg); border-radius: 4px; }
.nav-balance-positive { color: var(--color-success); }
.nav-balance-negative { color: var(--color-danger); }
.nav-logout { color: var(--text-secondary); text-decoration: none; padding: 0.25rem 0.5rem; }
.nav-logout:hover { color: var(--text-primary); }
.nav-logo { text-decoration: none; color: var(--text-primary); font-weight: bold; padding: 0.5rem 0.75rem 0.5rem 0; white-space: nowrap; }
.nav-login-btn { background: var(--color-primary); color: white; text-decoration: none; padding: 0.4rem 1rem; border-radius: 4px; white-space: nowrap; }
.nav-login-btn:hover { background: var(--color-primary-hover); }
/* Language switcher */
.nav-lang-switcher { display: flex; align-items: center; font-size: 0.85rem; margin-right: 0.5rem; gap: 0.25rem; }
.nav-lang-flag { display: inline-flex; align-items: center; }
.nav-lang-flag:hover { opacity: 0.7; }
.nav-flag-icon { width: 24px; height: 16px; border-radius: 2px; vertical-align: middle; }
/* Theme toggle */
.theme-toggle { background: none; border: none; cursor: pointer; padding: 0 0.25rem; display: inline-flex; align-items: center; }
.theme-toggle:hover { opacity: 0.7; }
.theme-icon { width: 20px; height: 20px; }
.theme-icon-light { display: inline; }
.theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: inline; }
/* Mobile responsive */
@media (max-width: 768px) {
    .main-nav { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.75rem; margin-bottom: 1rem; }
    .nav-links { justify-content: center; }
    .nav-link { padding: 0.5rem; font-size: 0.9rem; }
    .nav-user { justify-content: center; }
    .nav-username { display: none; }
    .container { padding: 0 0.75rem; }
    .card { padding: 1rem; }
    .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
}
@media (max-width: 480px) {
    .nav-links { gap: 0.25rem; }
    .nav-link { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
}