* { box-sizing: border-box; transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s; }
body { margin: 0; font-family: 'Space Grotesk', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }

/* Панель сверху */
.top-nav { position: absolute; top: 20px; right: 20px; z-index: 100; display: flex; gap: 10px; }
.top-nav select { padding: 8px 12px; border-radius: 8px; border: none; font-family: inherit; cursor: pointer; outline: none; font-weight: 600; color: inherit; } 
.ambient-glow { position: absolute; width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; filter: blur(80px); }

/* Стартовая панель */
.glass-panel { border-radius: 24px; padding: 40px; width: 420px; text-align: center; position: relative; z-index: 10; }
h1, h2, h3 { font-weight: 300; margin-top: 0; }
h1 span { font-weight: 700; }
.subtitle { font-size: 14px; margin-bottom: 20px; opacity: 0.7; }

/* Элементы форм */
input, button { width: 100%; font-family: inherit; outline: none; }
.input-premium { border: none; border-bottom: 2px solid; font-size: 16px; padding: 12px 10px; margin-bottom: 15px; background: transparent; }
.btn-premium { border: none; padding: 14px 20px; font-size: 15px; font-weight: 700; border-radius: 12px; cursor: pointer; }
.btn-premium:disabled { opacity: 0.6; cursor: not-allowed; }
.danger-btn { background: #ff4c4c !important; color: #fff !important; border: none !important; }

/* Карта */
.bank-card { border-radius: 20px; padding: 25px; text-align: left; position: relative; overflow: hidden; margin-bottom: 20px; }
.chip { width: 40px; height: 30px; border-radius: 6px; margin-bottom: 20px; }
.brand { position: absolute; top: 25px; right: 25px; font-weight: 700; letter-spacing: 2px; }
.balance-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.balance-value { font-size: 38px; font-weight: 700; margin: 5px 0 20px; }
.acc-number { font-family: monospace; font-size: 13px; word-break: break-all; }

/* ГЛОБАЛЬНЫЙ ДАШБОРД */
#app-dashboard { width: 90vw; max-width: 1200px; height: 85vh; border-radius: 24px; display: flex; z-index: 10; overflow: hidden; }
.sidebar { width: 250px; padding: 30px 20px; border-right: 1px solid; display: flex; flex-direction: column; }
.logo { font-size: 20px; font-weight: 300; margin-bottom: 30px; letter-spacing: 1px;}
.logo span { font-weight: 700; }

/* Профиль */
.user-profile { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.avatar { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #888, #444); flex-shrink: 0; }
.ens-name { font-family: monospace; font-size: 14px; font-weight: 700; word-break: break-all; }

/* Навигация */
.nav-links { list-style: none; padding: 0; margin: 0; }
.nav-links li { padding: 15px; margin-bottom: 5px; border-radius: 10px; cursor: pointer; font-size: 15px; transition: 0.2s; white-space: nowrap; }
.danger-link { color: #ff4c4c; }

/* Основная область */
.content-area { flex: 1; padding: 40px; overflow-y: auto; }
.tab-content { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Сетки и Блоки */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-main-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; }
.action-box { padding: 25px; border-radius: 16px; border: 1px solid; }
.switch-label { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 14px;}

/* Лимиты */
.limit-box { padding: 15px 20px; border-radius: 12px; margin-top: 15px; }
.limit-header { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.progress-bg { width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,0.2); }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease-out; }

/* Списки */
.tx-list, .managed-list { list-style: none; padding: 0; margin: 0; }
.tx-list li, .managed-list li { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
.tx-list li:last-child, .managed-list li:last-child { border-bottom: none; }
.tx-info { display: flex; align-items: center; gap: 10px; }
.tx-icon { font-size: 18px; }
.tx-amt { font-weight: 700; font-family: monospace; font-size: 15px; }
.delete-icon { background: transparent; border: none; font-size: 18px; cursor: pointer; width: auto; padding: 5px; opacity: 0.7; transition: 0.2s; }
.delete-icon:hover { opacity: 1; transform: scale(1.2); }

/* Баннеры */
.alert-banner { background: rgba(255, 76, 76, 0.15); border: 1px solid #ff4c4c; color: #ff4c4c; padding: 15px; border-radius: 12px; margin-bottom: 25px; font-weight: 700; font-size: 14px; text-align: center; }

/* Утилиты */
.hidden { display: none !important; }
.loader { border: 2px solid rgba(0,0,0,0.1); border-top: 2px solid currentColor; border-radius: 50%; width: 18px; height: 18px; animation: spin 1s linear infinite; margin-right: 10px; display: inline-block; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* === ШКУРКА: ТЁМНЫЙ НЕОН === */
.theme-neon { background: #090a0f; color: #0ff; }
.theme-neon .ambient-glow { background: rgba(0,255,255,0.1); }
.theme-neon select, .theme-neon .glass-panel, .theme-neon #app-dashboard { background: rgba(0,0,0,0.8); border: 1px solid #0ff; box-shadow: 0 0 20px rgba(0,255,255,0.1); color: #0ff; }
.theme-neon select option { background: #000; color: #0ff; } 
.theme-neon h1 span, .theme-neon .logo span { color: #f0f; text-shadow: 0 0 10px #f0f; }
.theme-neon .input-premium { border-bottom-color: #0ff; color: #0ff; }
.theme-neon .btn-premium { background: transparent; color: #f0f; border: 1px solid #f0f; box-shadow: 0 0 10px rgba(255,0,255,0.2); }
.theme-neon .bank-card { background: #000; border: 1px solid #0ff; box-shadow: 0 0 30px rgba(0,255,255,0.3); }
.theme-neon .chip { background: #0ff; box-shadow: 0 0 10px #0ff; }
.theme-neon .balance-value { color: #0ff; text-shadow: 0 0 10px #0ff; }
.theme-neon .sidebar { border-right-color: #0ff; }
.theme-neon .nav-links li:hover, .theme-neon .nav-links li.active { background: rgba(0,255,255,0.1); border-left: 3px solid #f0f; }
.theme-neon .action-box, .theme-neon .limit-box { border-color: rgba(0,255,255,0.3); background: rgba(0,0,0,0.5); }
.theme-neon .progress-bg { background: rgba(0,255,255,0.1); }
.theme-neon .progress-fill { background: #f0f; box-shadow: 0 0 10px #f0f; }
.theme-neon .avatar { background: linear-gradient(135deg, #0ff, #f0f); box-shadow: 0 0 15px rgba(255,0,255,0.5); }
.theme-neon .tx-amt.plus { color: #0ff; }
.theme-neon .tx-amt.minus { color: #f0f; }
.theme-neon .user-profile, .theme-neon .tx-list li, .theme-neon .managed-list li { border-color: rgba(0,255,255,0.2); }

/* === ШКУРКА: ТЁМНОЕ СТЕКЛО === */
.theme-glass { background: #050505; color: #fff; }
.theme-glass .ambient-glow { background: rgba(212,175,55,0.15); }
.theme-glass select, .theme-glass .glass-panel, .theme-glass #app-dashboard { background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.6); color: #fff; }
.theme-glass select option { background: #1a1a1a; color: #fff; } 
.theme-glass h1 span, .theme-glass .logo span { color: #d4af37; }
.theme-glass .input-premium { border-bottom-color: rgba(255,255,255,0.2); color: #fff; }
.theme-glass .input-premium:focus { border-bottom-color: #d4af37; }
.theme-glass .btn-premium { background: linear-gradient(135deg, #d4af37 0%, #aa8529 100%); color: #000; }
.theme-glass .bank-card { background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%); border: 1px solid rgba(212,175,55,0.3); box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
.theme-glass .chip { background: linear-gradient(135deg, #e5c158 0%, #c49a33 100%); }
.theme-glass .balance-value { color: #d4af37; }
.theme-glass .sidebar { border-right-color: rgba(255,255,255,0.1); }
.theme-glass .nav-links li:hover, .theme-glass .nav-links li.active { background: rgba(255,255,255,0.05); color: #d4af37; }
.theme-glass .action-box, .theme-glass .limit-box { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }
.theme-glass .progress-bg { background: rgba(255,255,255,0.1); }
.theme-glass .progress-fill { background: linear-gradient(135deg, #d4af37 0%, #aa8529 100%); }
.theme-glass .avatar { background: linear-gradient(135deg, #d4af37, #1a1a1a); border: 1px solid #d4af37; }
.theme-glass .tx-amt.plus { color: #4caf50; }
.theme-glass .tx-amt.minus { color: #ff4c4c; opacity: 0.8; }
.theme-glass .user-profile, .theme-glass .tx-list li, .theme-glass .managed-list li { border-color: rgba(255,255,255,0.1); }

/* === ШКУРКА: СВЕТЛЫЙ ПЛАСТИК === */
.theme-plastic { background: #e0e5ec; color: #4d5b68; }
.theme-plastic .ambient-glow { display: none; }
.theme-plastic select, .theme-plastic .glass-panel, .theme-plastic #app-dashboard { background: #e0e5ec; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); border: none; color: #4d5b68; }
.theme-plastic select option { background: #e0e5ec; color: #4d5b68; }
.theme-plastic h1 span, .theme-plastic .logo span { color: #2d3b48; }
.theme-plastic .input-premium { border-bottom-color: #a3b1c6; color: #4d5b68; }
.theme-plastic .btn-premium { background: #e0e5ec; color: #4d5b68; box-shadow: 5px 5px 10px #c3c9d2, -5px -5px 10px #ffffff; }
.theme-plastic .bank-card { background: #e0e5ec; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); border: none; }
.theme-plastic .chip { background: #b0bac9; }
.theme-plastic .balance-value { color: #2d3b48; }
.theme-plastic .sidebar { border-right: 2px solid #c3c9d2; }
.theme-plastic .nav-links li:hover, .theme-plastic .nav-links li.active { box-shadow: inset 5px 5px 10px #c3c9d2, inset -5px -5px 10px #ffffff; }
.theme-plastic .action-box, .theme-plastic .limit-box { border: none; box-shadow: inset 5px 5px 10px #c3c9d2, inset -5px -5px 10px #ffffff; }
.theme-plastic .progress-bg { background: #e0e5ec; box-shadow: inset 3px 3px 6px #c3c9d2, inset -3px -3px 6px #ffffff; }
.theme-plastic .progress-fill { background: #a3b1c6; }
.theme-plastic .avatar { background: #e0e5ec; box-shadow: 5px 5px 10px #c3c9d2, -5px -5px 10px #ffffff; }
.theme-plastic .tx-amt.plus { color: #2e7d32; }
.theme-plastic .tx-amt.minus { color: #c62828; }
.theme-plastic .user-profile, .theme-plastic .tx-list li, .theme-plastic .managed-list li { border-color: #c3c9d2; }

/* === ШКУРКА: ДЛЯ СЛАБОВИДЯЩИХ === */
.theme-accessible { background: #000; color: #ff0; font-size: 120%; font-family: sans-serif; }
.theme-accessible * { transition: none !important; box-shadow: none !important; }
.theme-accessible .ambient-glow { display: none; }
.theme-accessible select, .theme-accessible .glass-panel, .theme-accessible #app-dashboard { background: #000; color: #ff0; border: 4px solid #ff0; border-radius: 0; }
.theme-accessible select option { background: #000; color: #ff0; }
.theme-accessible .input-premium { border: 3px solid #ff0; color: #ff0; font-weight: bold; }
.theme-accessible .btn-premium { background: #ff0; color: #000; border: 4px solid #ff0; font-weight: bold; }
.theme-accessible .bank-card { background: #000; border: 4px solid #ff0; border-radius: 0; }
.theme-accessible .chip { background: #ff0; border-radius: 0; }
.theme-accessible .sidebar { border-right: 4px solid #ff0; }
.theme-accessible .nav-links li.active { background: #ff0; color: #000; font-weight: bold; }
.theme-accessible .action-box, .theme-accessible .limit-box { border: 4px solid #ff0; border-radius: 0; }
.theme-accessible .progress-bg { background: #000; border: 2px solid #ff0; height: 12px; border-radius: 0; }
.theme-accessible .progress-fill { background: #ff0; border-radius: 0; }
.theme-accessible .avatar { background: #000; border: 4px solid #ff0; border-radius: 0; }
.theme-accessible .tx-amt.plus, .theme-accessible .tx-amt.minus { color: #ff0; }
.theme-accessible .user-profile, .theme-accessible .tx-list li, .theme-accessible .managed-list li { border-color: #ff0; }

/* === ШКУРКА: ДЛЯ РАЗРАБОТЧИКОВ (IDE) === */
.theme-dev { background: #1e1e1e; color: #d4d4d4; }
.theme-dev * { font-family: 'Fira Code', Consolas, monospace !important; border-radius: 0 !important; box-shadow: none !important; }
.theme-dev .ambient-glow { display: none; }
.theme-dev select, .theme-dev .glass-panel, .theme-dev #app-dashboard { background: #1e1e1e; border: 1px solid #444; color: #569cd6; }
.theme-dev select option { background: #252526; color: #569cd6; }
.theme-dev .sidebar { background: #252526; border-right: 1px solid #444; }
.theme-dev h1 span, .theme-dev .logo span { color: #ce9178; }
.theme-dev h2 { color: #4ec9b0; }
.theme-dev h2::before { content: "class "; color: #569cd6; }
.theme-dev .subtitle { color: #6a9955; }
.theme-dev .subtitle::before { content: "// "; }
.theme-dev .input-premium { border: 1px solid #333; color: #ce9178; }
.theme-dev .btn-premium { background: #2d2d30; color: #dcdcaa; border: 1px solid #444; text-transform: lowercase; justify-content: flex-start;}
.theme-dev .btn-premium::before { content: "await "; color: #c586c0; margin-right: 5px; }
.theme-dev .btn-premium:hover { border-color: #569cd6; color: #4ec9b0;}
.theme-dev .bank-card { background: #1e1e1e; border: 1px solid #444; border-left: 3px solid #569cd6; }
.theme-dev .chip { background: transparent; border: 1px solid #b5cea8; height: 20px; width: 30px; }
.theme-dev .balance-value { color: #b5cea8; font-weight: normal; }
.theme-dev .acc-number { color: #ce9178; }
.theme-dev .nav-links li { color: #cccccc; font-size: 13px; }
.theme-dev .nav-links li::before { content: "📁 "; }
.theme-dev .nav-links li.active { background: #37373d; color: #fff; border-left: 2px solid #007acc; }
.theme-dev .action-box, .theme-dev .limit-box { border: 1px solid #444; background: #1e1e1e; }
.theme-dev .action-box h3 { color: #dcdcaa; font-size: 14px; }
.theme-dev .action-box h3::after { content: "() {"; color: #d4d4d4; }
.theme-dev .progress-bg { background: #2d2d30; }
.theme-dev .progress-fill { background: #569cd6; }
.theme-dev .avatar { background: #1e1e1e; border: 2px solid #569cd6; }
.theme-dev .tx-amt.plus { color: #b5cea8; }
.theme-dev .tx-amt.minus { color: #ce9178; }
.theme-dev .user-profile, .theme-dev .tx-list li, .theme-dev .managed-list li { border-color: #444; }

/* ==========================================
   ⚡ GOD MODE (СЕКРЕТНАЯ ПАНЕЛЬ АДМИНА)
   ========================================== */
#nav-admin {
    background: rgba(255, 170, 0, 0.1);
    border: 1px dashed rgba(255, 170, 0, 0.5);
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.8);
    transition: 0.3s all;
}
#nav-admin:hover, #nav-admin.active {
    background: rgba(255, 170, 0, 0.2);
    border-color: #ffaa00;
    box-shadow: inset 0 0 10px rgba(255, 170, 0, 0.2);
}

.theme-dev #nav-admin {
    color: #dcdcaa !important;
    border: 1px solid #444;
    text-shadow: none;
    background: #1e1e1e;
}
.theme-dev #nav-admin::before {
    content: "sudo ";
    color: #c586c0;
}
.theme-dev #nav-admin.active {
    border-left: 2px solid #dcdcaa;
}

.theme-accessible #nav-admin {
    color: #ff0 !important;
    border: 4px dashed #ff0;
    background: #000;
}

/* ==========================================
   📱 АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ (MOBILE RESPONSIVE)
   ========================================== */
@media (max-width: 768px) {
    /* Перестраиваем общую структуру страницы, чтобы шапка не висела поверх контента */
    body { flex-direction: column; justify-content: flex-start; padding: 10px; overflow-y: auto; height: 100%; min-height: 100vh; }
    
    /* Шапка с языками теперь сидит СВЕРХУ, а не приклеена к экрану */
    .top-nav { position: relative; top: 0; right: 0; flex-direction: row; width: 100%; justify-content: space-between; margin-bottom: 15px; margin-top: 15px; z-index: 100; gap: 10px; }
    .top-nav select { flex: 1; font-size: 12px; padding: 8px; }

    .ambient-glow { display: none; }

    .glass-panel { width: 100%; padding: 25px; margin-top: 20px; }
    h1 { font-size: 20px; }
    
    /* Дашборд больше не фиксирован по высоте, он тянется вниз */
    #app-dashboard { flex-direction: column; width: 100%; height: auto; min-height: 85vh; border-radius: 16px; margin: 0; }
    
    /* ФИКС: Боковое меню превращается в скроллящуюся ленту */
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px; flex-direction: row; align-items: center; overflow-x: auto; white-space: nowrap; height: auto; -webkit-overflow-scrolling: touch; }
    .logo { margin-bottom: 0; margin-right: 20px; font-size: 16px; flex-shrink: 0; } /* Логотип не сжимается */
    .user-profile { display: none; }
    
    /* ФИКС: Кнопки навигации больше никогда не сплющатся */
    .nav-links { display: flex; gap: 10px; }
    .nav-links li { margin-bottom: 0; padding: 10px 15px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }
    
    .content-area { padding: 20px; overflow-x: hidden; height: auto; }
    .grid-2, .grid-main-layout { grid-template-columns: 1fr; gap: 15px; }
    
    .bank-card { padding: 20px; }
    .balance-value { font-size: 30px; }
    .action-box { padding: 15px; }

    .theme-dev .nav-links li.active { border-left: none; border-bottom: 2px solid #007acc; }
    .theme-neon .nav-links li.active { border-left: none; border-bottom: 3px solid #f0f; }
}