:root,
[data-theme="dark"] {
    --bg: #0f0f0f;
    --bg-elevated: #212121;
    --bg-input: #272727;
    --card: #1a1a1a;
    --border: #303030;
    --border-hover: #ff0000;
    --text: #f1f1f1;
    --text-muted: #aaaaaa;
    --primary: #ff0000;
    --primary-hover: #cc0000;
    --accent: #272727;
    --accent-2: #3ea6ff;
    --primary-rgb: 255, 0, 0;
    --accent-rgb: 39, 39, 39;
    --gradient: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    --gradient-hover: linear-gradient(135deg, #ff1a1a 0%, #e60000 100%);
    --glow-primary: 0 0 24px rgba(255, 0, 0, 0.4);
    --glow-accent: 0 0 24px rgba(255, 0, 0, 0.3);
    --gold: #fbbf24;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="light"] {
    --bg: #ffffff;
    --bg-elevated: #f9f9f9;
    --bg-input: #f2f2f2;
    --card: #ffffff;
    --border: #e5e5e5;
    --border-hover: #cc0000;
    --text: #0f0f0f;
    --text-muted: #606060;
    --primary: #cc0000;
    --primary-hover: #ff0000;
    --accent: #f2f2f2;
    --primary-rgb: 204, 0, 0;
    --gradient: linear-gradient(135deg, #cc0000, #ff0000);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
    color: var(--text);
    font-size: 16px;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    transition: background-color 0.35s ease, color 0.35s ease;
    position: relative;
    background-color: var(--bg);
}

/* 🎯 ANİMASYONLU MESH GRADIENT ARKA PLAN */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--gradient-mesh);
    z-index: -1;
    animation: meshMove 20s ease-in-out infinite alternate;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(238, 42, 123, 0.15) 0px, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(98, 40, 215, 0.15) 0px, transparent 40%);
    z-index: -1;
    pointer-events: none;
    animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes meshMove {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.15) rotate(8deg); opacity: 0.85; }
}

@keyframes glowPulse {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 🎯 BUTONLAR - Süper Modern */
button {
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
    min-width: 44px;
    border: none;
    background: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

button:active {
    transform: scale(0.95);
}

/* 🎯 TÜM BUTONLAR İÇİN RIPPLE EFEKTİ */
button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

button:active::after {
    opacity: 1;
}

/* 🎯 INPUT, TEXTAREA, SELECT - Cam Efekti */
input, textarea, select {
    font-family: inherit;
    font-size: 16px;
    background: var(--bg-input) !important;
    color: var(--text);
    border: 1px solid var(--border) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 14px;
    /* 🎯 Şüşə effekti (backdrop-filter) inputlardan SİLİNDİ - kursor xətasının səbəbi bu idi */
    line-height: normal !important; /* 🎯 Sətir hündürlüyü tənzimləndi */
    vertical-align: middle;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary) !important;
    background: rgba(238, 42, 123, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(238, 42, 123, 0.15), var(--glow-primary) !important;
}

/* 🎯 SCROLLBAR - Modern İnce */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--accent));
    border-radius: 100px;
}

/* 🎯 CAM PANEL SINIFI */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 24px;
}

/* Sayfa geçiş animasyonu */
.page-enter {
    animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 🎯 GLOBAL DOKUNMA: Ana Səhifə, profil, modal kartlarına cam efekti */
.app-layout,
.settings-page,
.page-enter {
    background: transparent !important;
}