/* ============================================================
   CHAT-V2.CSS — ПОЛНАЯ ТЕМА ЛК GRAMATON.PRO
   Glassmorphism + Неоновые рамки + Адаптивность + Темы
   ============================================================
   v2.0 — Consolidated by Alex
   ============================================================ */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
  --bg-primary: #000000;
  --bg-gradient: linear-gradient(135deg, #050112 0%, #0A0224 50%, #000000 100%);
  --bg-glass: rgba(18, 11, 34, 0.45);
  --bg-glass-hover: rgba(18, 11, 34, 0.65);
  --bg-glass-strong: rgba(10, 5, 22, 0.85);
  --blur-amount: 25px;
  --blur-mobile: 10px;

  --neon-primary: #7A22A6;
  --neon-primary-dark: #3B1154;
  --neon-primary-glow: rgba(122, 34, 166, 0.3);
  --neon-primary-border: linear-gradient(135deg, #7A22A6, #3B1154);

  --neon-gold: #FFB800;
  --neon-gold-dark: #4A3300;
  --neon-gold-glow: rgba(255, 184, 0, 0.25);

  --neon-blue: #00A3FF;
  --neon-blue-dark: #002940;
  --neon-blue-glow: rgba(0, 163, 255, 0.25);

  --text-primary: #F0E8D8;
  --text-secondary: rgba(240, 232, 216, 0.6);
  --text-muted: rgba(240, 232, 216, 0.35);

  --border-subtle: rgba(122, 34, 166, 0.15);
  --border-medium: rgba(122, 34, 166, 0.3);
  --border-strong: rgba(122, 34, 166, 0.5);

  --sidebar-width: 72px;
  --left-panel-width: 360px;
  --right-panel-width: 300px;
  --topbar-height: 56px;

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-drawer: 350ms;
  --duration-fast: 200ms;

  --shadow-neon: 0 0 15px rgba(122, 34, 166, 0.2), 0 0 30px rgba(122, 34, 166, 0.1);
  --shadow-neon-gold: 0 0 15px rgba(255, 184, 0, 0.2), 0 0 30px rgba(255, 184, 0, 0.1);
  --shadow-neon-blue: 0 0 15px rgba(0, 163, 255, 0.2), 0 0 30px rgba(0, 163, 255, 0.1);

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ============================================================
   THEMES
   ============================================================ */

[data-theme="old_money"] {
  --neon-primary: #7A22A6;
  --neon-primary-dark: #3B1154;
  --neon-primary-glow: rgba(122, 34, 166, 0.3);
  --neon-primary-border: linear-gradient(135deg, #7A22A6, #3B1154);
  --text-primary: #F0E8D8;
  --border-subtle: rgba(122, 34, 166, 0.15);
  --shadow-neon: 0 0 15px rgba(122, 34, 166, 0.2), 0 0 30px rgba(122, 34, 166, 0.1);
}

[data-theme="deep_cyber"] {
  --neon-primary: #00FFFF;
  --neon-primary-dark: #004040;
  --neon-primary-glow: rgba(0, 255, 255, 0.25);
  --neon-primary-border: linear-gradient(135deg, #00FFFF, #006666);
  --text-primary: #E0FFF0;
  --border-subtle: rgba(0, 255, 255, 0.12);
  --shadow-neon: 0 0 15px rgba(0, 255, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  height: 100%;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  background-image: var(--bg-gradient);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Starfield */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><circle cx="50" cy="80" r="1.2" fill="white" opacity="0.08"/><circle cx="180" cy="30" r="0.8" fill="white" opacity="0.06"/><circle cx="300" cy="150" r="1.5" fill="white" opacity="0.1"/><circle cx="350" cy="320" r="0.6" fill="white" opacity="0.05"/><circle cx="90" cy="250" r="1" fill="white" opacity="0.07"/><circle cx="220" cy="380" r="1.3" fill="white" opacity="0.09"/><circle cx="380" cy="50" r="0.7" fill="white" opacity="0.04"/><circle cx="30" cy="360" r="0.9" fill="white" opacity="0.06"/></svg>');
  background-repeat: repeat;
  background-size: 400px 400px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   APP SHELL
   ============================================================ */
#app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ---------- TOP BAR (mobile) ---------- */
.top-bar {
  display: none;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 16px;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
}

.top-bar .app-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  flex: 1;
  text-align: center;
  background: var(--neon-primary-border);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- MAIN LAYOUT ---------- */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
  position: relative;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--border-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 4px;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar::-webkit-scrollbar { width: 2px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

.sidebar-logo {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--neon-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  box-shadow: var(--shadow-neon);
}

.sidebar-item {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
  position: relative;
  transition: all var(--duration-fast) var(--ease-premium);
  border: 1px solid transparent;
}

.sidebar-item:hover {
  color: var(--text-primary);
  background: var(--bg-glass);
  border-color: var(--border-subtle);
}

.sidebar-item.active {
  color: var(--text-primary);
  background: rgba(122, 34, 166, 0.15);
  border-color: var(--neon-primary);
  box-shadow: 0 0 12px var(--neon-primary-glow);
}

.sidebar-item .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-primary);
  box-shadow: 0 0 6px var(--neon-primary-glow);
}

.sidebar-item .tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-premium);
  border: 1px solid var(--border-subtle);
  z-index: 999;
}

.sidebar-item:hover .tooltip {
  opacity: 1;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* ---------- LEFT PANEL ---------- */
.panel-left {
  width: var(--left-panel-width);
  min-width: var(--left-panel-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  overflow: hidden;
  transition: width 300ms ease, transform var(--duration-drawer) var(--ease-premium);
}

.panel-left-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 64px;
}

.panel-left-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.panel-left-header .btn-new {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-premium);
}

.panel-left-header .btn-new:hover {
  border-color: var(--neon-primary);
  color: var(--text-primary);
}

.panel-left-search {
  padding: 8px 16px;
  position: relative;
}

.panel-left-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-premium);
  font-family: var(--font-primary);
}

.panel-left-search input:focus {
  border-color: var(--neon-primary);
  box-shadow: 0 0 8px var(--neon-primary-glow);
}

.panel-left-search input::placeholder {
  color: var(--text-muted);
}

.panel-left-search .search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.panel-left-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.panel-left-list::-webkit-scrollbar { width: 3px; }
.panel-left-list::-webkit-scrollbar-track { background: transparent; }
.panel-left-list::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }

/* ---------- Chat List Items ---------- */
.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.chat-item:hover {
  background: rgba(122, 34, 166, 0.08);
}

.chat-item.active {
  background: rgba(122, 34, 166, 0.12);
  border-left: 3px solid var(--neon-primary);
}

.chat-item .avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--neon-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.chat-item .info {
  flex: 1;
  min-width: 0;
}

.chat-item .info .name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .info .preview {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.chat-item .meta .time {
  font-size: 11px;
  color: var(--text-muted);
}

.chat-item .meta .unread {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--neon-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- CENTER PANEL ---------- */
.panel-center {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
}

.panel-center-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 64px;
  background: rgba(0, 0, 0, 0.2);
}

.panel-center-header .avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--neon-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.panel-center-header .chat-info {
  flex: 1;
  min-width: 0;
}

.panel-center-header .chat-info .name {
  font-size: 15px;
  font-weight: 600;
}

.panel-center-header .chat-info .status {
  font-size: 12px;
  color: var(--text-secondary);
}

.panel-center-header .chat-info .status.online { color: #22c55e; }

.panel-center-header .header-actions {
  display: flex;
  gap: 8px;
}

.panel-center-header .header-actions button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-center-header .header-actions button:hover {
  border-color: var(--neon-primary);
  color: var(--text-primary);
  background: rgba(122, 34, 166, 0.1);
}

/* Messages */
.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.messages-area::-webkit-scrollbar { width: 4px; }
.messages-area::-webkit-scrollbar-track { background: transparent; }
.messages-area::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

.message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  animation: msgIn 0.3s var(--ease-premium);
}

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

.message.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-primary-dark));
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

.message.other {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 4px;
}

.message .sender {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 3px;
}

.message .time {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 4px;
  text-align: right;
}

/* Typing indicator */
.typing-indicator {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 16px;
  font-style: italic;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.typing-indicator .dots {
  display: inline-flex;
  gap: 3px;
}

.typing-indicator .dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: dotPulse 1.4s infinite;
}

.typing-indicator .dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* Input area */
.input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
  align-items: flex-end;
}

.input-area .input-actions {
  display: flex;
  gap: 4px;
}

.input-area .input-actions button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-area .input-actions button:hover {
  border-color: var(--border-subtle);
  background: rgba(122, 34, 166, 0.08);
  color: var(--text-primary);
}

.input-area input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-premium);
  font-family: var(--font-primary);
  resize: none;
  max-height: 120px;
  line-height: 1.4;
}

.input-area input:focus {
  border-color: var(--neon-primary);
  box-shadow: 0 0 8px var(--neon-primary-glow);
}

.input-area input::placeholder {
  color: var(--text-muted);
}

.input-area .send-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: var(--neon-primary-border);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-neon);
  flex-shrink: 0;
}

.input-area .send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--neon-primary-glow);
}

/* ---------- RIGHT PANEL ---------- */
.panel-right {
  width: var(--right-panel-width);
  min-width: var(--right-panel-width);
  height: 100%;
  border-left: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  overflow-y: auto;
  padding: 16px;
  transition: width 300ms ease, transform var(--duration-drawer) var(--ease-premium);
}

.panel-right::-webkit-scrollbar { width: 3px; }
.panel-right::-webkit-scrollbar-track { background: transparent; }
.panel-right::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }

.panel-right .profile-card {
  text-align: center;
  padding: 20px 0;
}

.panel-right .profile-card .big-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--neon-primary-border);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: var(--shadow-neon);
}

.panel-right .profile-card .name {
  font-size: 16px;
  font-weight: 600;
}

.panel-right .profile-card .status {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================
   SERVICE PANELS (Wallet, VPN, Settings)
   ============================================================ */
.service-panel {
  display: none;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
}

.service-panel.active {
  display: block;
}

.service-panel h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  background: var(--neon-primary-border);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wallet */
.wallet-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-neon);
}

.wallet-card .balance {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-display);
}

.wallet-card .balance-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.wallet-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wallet-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  font-family: var(--font-primary);
}

.wallet-btn:hover {
  border-color: var(--neon-primary);
  background: rgba(122, 34, 166, 0.1);
  box-shadow: 0 0 12px var(--neon-primary-glow);
}

.wallet-btn.primary {
  background: var(--neon-primary-border);
  border-color: transparent;
  box-shadow: var(--shadow-neon);
}

.wallet-btn.primary:hover {
  transform: scale(1.03);
}

.wallet-history {
  list-style: none;
}

.wallet-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.wallet-history-item:last-child {
  border-bottom: none;
}

.wallet-history-item .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.wallet-history-item .icon.income {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.wallet-history-item .icon.outcome {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.wallet-history-item .details {
  flex: 1;
}

.wallet-history-item .details .title {
  font-size: 14px;
  font-weight: 500;
}

.wallet-history-item .details .date {
  font-size: 11px;
  color: var(--text-muted);
}

.wallet-history-item .amount {
  font-size: 14px;
  font-weight: 600;
}

.wallet-history-item .amount.positive { color: #22c55e; }
.wallet-history-item .amount.negative { color: #ef4444; }

/* VPN */
.vpn-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}

.vpn-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.vpn-toggle {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  background: #333;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-premium);
}

.vpn-toggle.active {
  background: var(--neon-primary);
  box-shadow: 0 0 10px var(--neon-primary-glow);
}

.vpn-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-premium);
}

.vpn-toggle.active::after {
  transform: translateX(24px);
}

.vpn-server-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vpn-server-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}

.vpn-server-item:hover {
  border-color: var(--neon-primary);
  background: rgba(122, 34, 166, 0.05);
}

.vpn-server-item .flag {
  font-size: 24px;
}

.vpn-server-item .server-info {
  flex: 1;
}

.vpn-server-item .server-info .name {
  font-size: 14px;
  font-weight: 500;
}

.vpn-server-item .server-info .ping {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Settings */
.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}

.settings-row:hover {
  border-color: var(--neon-primary);
  background: rgba(122, 34, 166, 0.05);
}

.settings-row .label {
  flex: 1;
  font-size: 14px;
}

.settings-row .value {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Language selector */
.lang-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lang-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  font-family: var(--font-primary);
}

.lang-btn:hover {
  border-color: var(--neon-primary);
  color: var(--text-primary);
}

.lang-btn.active {
  border-color: var(--neon-primary);
  background: rgba(122, 34, 166, 0.15);
  color: var(--text-primary);
  box-shadow: 0 0 8px var(--neon-primary-glow);
}

/* Theme selector */
.theme-selector {
  display: flex;
  gap: 10px;
}

.theme-option {
  flex: 1;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  background: rgba(0, 0, 0, 0.3);
}

.theme-option:hover {
  border-color: var(--neon-primary);
}

.theme-option.active {
  border-color: var(--neon-primary);
  background: rgba(122, 34, 166, 0.12);
  box-shadow: 0 0 12px var(--neon-primary-glow);
}

.theme-option .preview {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.theme-option .preview.old_money {
  background: linear-gradient(135deg, #7A22A6, #0A0224);
}

.theme-option .preview.deep_cyber {
  background: linear-gradient(135deg, #00FFFF, #0A0224);
}

.theme-option .label {
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================
   MOBILE DRAWER (imported from mobile-drawer.css with enhancements)
   ============================================================ */
#mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  background: rgba(10, 5, 22, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--border-medium);
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  will-change: transform;
  transition: transform var(--duration-drawer) var(--ease-premium) 0s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#mobile-drawer.open {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-drawer) var(--ease-premium) 0s;
}

#drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Parallax */
#main-content.parallax-open {
  transform: translate3d(85%, 0, 0) scale(0.96);
  -webkit-transform: translate3d(85%, 0, 0) scale(0.96);
  transition: transform var(--duration-drawer) var(--ease-premium) 0s;
  transform-origin: top left;
  -webkit-transform-origin: top left;
}

/* Stagger */
.drawer-menu-item {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  -webkit-transform: translate3d(-20px, 0, 0);
  transition: opacity 300ms var(--ease-premium), transform 300ms var(--ease-premium);
  will-change: transform, opacity;
}

#mobile-drawer.open .drawer-menu-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#mobile-drawer.open .drawer-menu-item:nth-child(1) { transition-delay: 30ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(2) { transition-delay: 60ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(3) { transition-delay: 90ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(4) { transition-delay: 120ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(5) { transition-delay: 150ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(6) { transition-delay: 180ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(7) { transition-delay: 210ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(8) { transition-delay: 240ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(9) { transition-delay: 270ms; }
#mobile-drawer.open .drawer-menu-item:nth-child(10) { transition-delay: 300ms; }

/* Burger → Cross */
.burger-icon {
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 1001;
}

.burger-icon .burger-line {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--duration-drawer) var(--ease-premium);
  will-change: transform, opacity;
}

.burger-icon .burger-line:nth-child(1) { top: 0; }
.burger-icon .burger-line:nth-child(2) { top: 9px; }
.burger-icon .burger-line:nth-child(3) { bottom: 0; }

.burger-icon.active .burger-line:nth-child(1) {
  transform: translate3d(0, 9px, 0) rotate(45deg);
  -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
}

.burger-icon.active .burger-line:nth-child(2) {
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  opacity: 0;
}

.burger-icon.active .burger-line:nth-child(3) {
  transform: translate3d(0, -9px, 0) rotate(-45deg);
  -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg);
}

/* Swipe zone */
.swipe-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 100vh;
  height: 100dvh;
  z-index: 500;
  background: transparent;
}

/* Eco mode */
#mobile-drawer.eco-mode {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#drawer-overlay.eco-mode {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* ============================================================
   MOBILE RESPONSIVE (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  .top-bar {
    display: flex;
  }

  .sidebar {
    display: none;
  }

  .main-layout {
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
  }

  .panel-left {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: 100vw;
    width: 100dvw;
    min-width: auto;
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    z-index: 50;
    transition: transform var(--duration-drawer) var(--ease-premium);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  .panel-left.slide-out {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }

  .panel-center {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    z-index: 51;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    transition: transform var(--duration-drawer) var(--ease-premium);
  }

  .panel-center.slide-in {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  .panel-right {
    display: none;
  }

  .service-panel {
    padding: 16px;
  }
}

/* ============================================================
   TABLET (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    width: 56px;
    min-width: 56px;
  }

  .sidebar-item .tooltip {
    display: none;
  }

  .panel-left {
    width: 300px;
    min-width: 300px;
  }

  .panel-right {
    width: 240px;
    min-width: 240px;
  }
}

/* ============================================================
   DESKTOP (>= 1025px)
   ============================================================ */
@media (min-width: 1025px) {
  #mobile-drawer,
  #drawer-overlay,
  .swipe-zone {
    display: none;
  }
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notification {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transform: translateX(100%);
  transition: all 300ms var(--ease-premium);
  max-width: 360px;
  box-shadow: var(--shadow-neon);
}

.notification.show {
  opacity: 1;
  transform: translateX(0);
}

.notification.success {
  border-color: #22c55e;
}

.notification.error {
  border-color: #ef4444;
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--neon-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 24px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   SCROLLBAR STYLING (global)
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-medium); }