/* GH-MARKER: ready for GitHub */
/* Fyra Design - Новая цветовая палитра "Тепло света" */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Inter:wght@400;500&display=swap');

:root {
  /* Fyra основные цвета */
  --amber-light: #FFB84D;
  --amber-dark: #92400E;
  --peach-start: #FF8C6B;
  --peach-end: #FFD7A0;
  --neon-blue: #4D9FFF;
  --dark-graphite: #1E2330;
  --milk-white: #FAFAFA;
  --bg-hover: #FFF8E7;
  
  /* Совместимость с текущим кодом - Светлая тема */
  --bg: #FFF5E6;
  --bg-elev: rgba(250, 250, 250, 0.95);
  --card: #FFFFFF;
  --text: #1E2330;
  --muted: #6B7280;
  --primary: #FFB84D; /* янтарный свет */
  --primary-600: #FF8C6B; /* персиковый */
  --accent: #4D9FFF; /* синий неон */
  --border: #E5E7EB;
  --glow: 0 4px 24px rgba(255, 184, 77, 0.3);
  --glow-blue: 0 4px 24px rgba(77, 159, 255, 0.3);
  --sidebar-width: 240px;
  --link: #4D9FFF;
  --link-hover: #FF8C6B;
  --link-visited: #FFB84D;
  
  /* Градиенты */
  --gradient-warm: linear-gradient(135deg, #FF8C6B 0%, #FFD7A0 100%);
  --gradient-button: linear-gradient(135deg, #FFB84D 0%, #FF8C6B 100%);
  --gradient-bg: linear-gradient(135deg, #FFF5E6 0%, #E8F4FF 100%);
  
  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  
  /* Тени */
  --shadow-card: 0 8px 32px rgba(30, 35, 48, 0.08);
  
  /* Шрифты */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Статусы и предупреждения - светлая тема */
  --success-bg: #D1FAE5;
  --success-text: #065F46;
  --warning-bg: #FEF3C7;
  --warning-text: #92400E;
  --error-bg: #FEE2E2;
  --error-text: #991B1B;
  --info-bg: #DBEAFE;
  --info-text: #1E40AF;
}

/* Темная тема */
[data-theme="dark"] {
  /* Фоны */
  --bg: #0F1419;
  --bg-elev: rgba(30, 35, 48, 0.95);
  --card: #1A1F2E;
  --milk-white: #252A38;
  --bg-hover: rgba(255, 184, 77, 0.08);
  
  /* Принудительно для всех белых блоков */
  color-scheme: dark;
  
  /* Текст */
  --text: #E8EAED;
  --muted: #9CA3AF;
  
  /* Цвета остаются яркими */
  --primary: #FFB84D;
  --primary-600: #FF8C6B;
  --accent: #4D9FFF;
  
  /* Границы */
  --border: #2D3748;
  
  /* Свечения */
  --glow: 0 4px 24px rgba(255, 184, 77, 0.4);
  --glow-blue: 0 4px 24px rgba(77, 159, 255, 0.4);
  
  /* Ссылки */
  --link: #6BB6FF;
  --link-hover: #FFB84D;
  --link-visited: #FF8C6B;
  
  /* Градиенты */
  --gradient-warm: linear-gradient(135deg, #FF8C6B 0%, #FFD7A0 100%);
  --gradient-button: linear-gradient(135deg, #FFB84D 0%, #FF8C6B 100%);
  --gradient-bg: linear-gradient(135deg, #0F1419 0%, #1A1F2E 100%);
  
  /* Тени */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Статусы и предупреждения - темная тема */
  --success-bg: rgba(16, 185, 129, 0.15);
  --success-text: #6EE7B7;
  --warning-bg: rgba(251, 191, 36, 0.15);
  --warning-text: #FCD34D;
  --error-bg: rgba(239, 68, 68, 0.15);
  --error-text: #FCA5A5;
  --info-bg: rgba(59, 130, 246, 0.15);
  --info-text: #93C5FD;
}
* { box-sizing: border-box; }
html, body { 
  margin: 0; 
  padding: 0; 
  min-height: 100%; 
  font-family: var(--font-body), system-ui, -apple-system, sans-serif; 
  background: var(--gradient-bg);
  color: var(--text); 
  overflow-x: hidden !important; 
  max-width: 100vw; 
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}
html {
  overflow-y: scroll;
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
/* Фоновая анимация - светящиеся частицы */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 184, 77, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(77, 159, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 8s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
/* Global link styles (exclude buttons/menus which override explicitly) */
a:not(.btn):not(.btn-primary):not(.btn-secondary) { 
  color: var(--link); 
  text-decoration: underline; 
  text-underline-offset: 3px; 
  text-decoration-thickness: 1.5px; 
  text-decoration-color: rgba(77, 159, 255, 0.7); 
}
a:not(.btn):not(.btn-primary):not(.btn-secondary):hover { 
  color: var(--link-hover); 
  text-decoration-color: currentColor; 
}
a:not(.btn):not(.btn-primary):not(.btn-secondary):visited { 
  color: var(--link-visited); 
}
a:focus-visible { 
  outline: 2px solid var(--neon-blue); 
  outline-offset: 2px; 
  border-radius: 4px; 
}
/* Transparent page for widget overlay */
html.widget-html, body.widget-container { background: transparent !important; }
body.widget-container { backdrop-filter: none !important; }
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow .container, .container.narrow { max-width: 760px; }

.site-header { 
  border-bottom: 1px solid var(--border); 
  backdrop-filter: blur(12px); 
  background: rgba(255, 255, 255, 0.95);
  z-index: 100; 
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 100%;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px; padding-left: 24px; padding-right: 24px; position: relative; }
.nav .logo { position: static; }
.site-header .nav { position: relative; }
.nav .header-logo { position: fixed; left: 85px; top: 18px; z-index: 101; }
.site-header .header-logo { padding: 4px 8px; }
.header-logo { display: inline-block; }
.sidebar-logo { display: none !important; }
.nav > nav { margin-left: auto; }
.logo { 
  color: var(--text) !important; 
  text-decoration: none; 
  font-weight: 700; 
  letter-spacing: 0.4px; 
  font-family: var(--font-heading);
  font-size: 1.75rem;
  transition: opacity 0.3s ease;
}
.logo:hover { 
  opacity: 0.8;
}
.logo span { 
  color: var(--text) !important; 
  text-shadow: none;
}
.btn { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px; 
  border-radius: var(--radius-xl); 
  background: var(--card);
  color: var(--text) !important; 
  text-decoration: none; 
  border: 2px solid var(--border); 
  transition: all 0.3s ease;
  font-family: var(--font-heading);
  font-weight: 600; 
  cursor: pointer;
  position: relative;
}
.btn:hover { 
  transform: translateY(-2px); 
  border-color: var(--amber-light);
  box-shadow: var(--glow);
  color: var(--text) !important;
}
.btn:visited {
  color: var(--text) !important;
}
.btn:active { 
  transform: translateY(0) scale(0.98); 
  opacity: 0.9;
  background: var(--card);
}
.btn:focus, .btn:focus-visible { 
  outline: none; 
  box-shadow: 0 0 0 2px var(--neon-blue);
  background: var(--card);
}
.btn-primary { 
  background: var(--gradient-button);
  color: white !important; 
  border-color: transparent; 
  font-weight: 700; 
  box-shadow: var(--glow); 
}
.btn-primary:hover:not(:disabled) { 
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 184, 77, 0.5);
  color: white !important;
}
.btn-primary:active:not(:disabled) { 
  transform: translateY(0) scale(0.98); 
  opacity: 0.95;
  color: white !important;
}
.btn-primary:visited {
  color: white !important;
}
.btn-primary:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
  pointer-events: none; 
}

/* Restore classic visual for native buttons using same theme as .btn */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] { display:inline-block; padding:12px 18px; border-radius:12px; background: var(--card); color: var(--text); border:2px solid var(--border); font-weight:600; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
button:hover:not(.fyra-tab-btn):not(.btn):not(.btn-icon):not(.btn-balance):not(.btn-user):not(summary),
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { transform: translateY(-1px); border-color: var(--amber-light); box-shadow: 0 4px 24px rgba(255,184,77,0.3); }
button:active:not(.fyra-tab-btn):not(.btn):not(.btn-icon):not(.btn-balance):not(.btn-user),
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active { transform: translateY(0) scale(0.98); opacity: 0.9; }
button:focus-visible:not(.fyra-tab-btn):not(.btn):not(.btn-icon):not(.btn-balance):not(.btn-user),
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible { outline:none; box-shadow: 0 0 0 3px rgba(255,184,77,0.2); border-color: var(--amber-light); }
.primary,
button.primary,
input[type="submit"].primary { 
  background: var(--gradient-button); 
  color: white !important; 
  border-color: transparent; 
  box-shadow: var(--glow); 
}
button.primary:hover,
input[type="submit"].primary:hover { 
  background: var(--gradient-button); 
  color: white !important;
  box-shadow: 0 8px 32px rgba(255, 184, 77, 0.5);
}
button.primary:active,
input[type="submit"].primary:active { 
  transform: translateY(0) scale(0.98); 
  opacity: 0.95;
  color: white !important;
}
button.primary:visited,
input[type="submit"].primary:visited {
  color: white !important;
}

/* Prevent text selection on buttons */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn-notify,
.tab-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Disabled button states */
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.btn-notify:disabled,
.tab-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  filter: grayscale(0.5);
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
}

/* Notification-themed buttons */
.btn-notify { position: relative; display: inline-block; padding: 11px 16px; border-radius: 12px; border: 2px solid var(--amber-light); color: var(--text); background: var(--card); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; cursor: pointer; }
.btn-notify:hover { transform: translateY(-1px); box-shadow: 0 4px 24px rgba(255,184,77,0.3); }
.btn-notify:active { transform: translateY(0) scale(0.97); opacity: .88; }
.btn-notify--add { background: var(--card); border: 2px dashed var(--border); color: var(--text); }
.btn-notify--add:hover { border-color: var(--amber-light); box-shadow: 0 4px 24px rgba(255,184,77,0.3); }
.btn-notify--add:active { transform: translateY(0) scale(0.97); opacity: .88; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; background: #E5E7EB; border: 2px solid #E5E7EB; border-radius: 999px; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.toggle .thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.toggle input:checked + .track { background: var(--gradient-warm); border-color: transparent; box-shadow: 0 4px 16px rgba(255,184,77,0.3); }
.toggle input:checked ~ .thumb { transform: translateX(20px); background: var(--card); }
.toggle input:active + .track { transform: scale(0.96); }
.toggle input:active ~ .thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.dropdown > summary::-webkit-details-marker { display: none; }
.btn-user { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  cursor: pointer; 
  list-style: none; 
  transition: transform .15s ease, opacity .15s ease;
  border: 2px solid var(--border);
  background: var(--card);
  padding: 8px 14px;
  border-radius: 12px;
}
.btn-user::-webkit-details-marker { display: none; }
.btn-user:hover {
  border-color: var(--amber-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 184, 77, 0.2);
}
.btn-user:active { transform: scale(0.96); opacity: 0.9; }
.user-initial { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-light), var(--peach-start)); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: white; box-shadow: 0 2px 8px rgba(255, 184, 77, 0.3); font-size: 13px; }
.user-name { font-weight: 600; color: var(--text); font-size: 14px; }
.dropdown[open] .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown-menu { 
  position: absolute; 
  right: 0; 
  top: calc(100% + 8px); 
  background: var(--card); 
  border: 2px solid var(--border); 
  border-radius: 12px; 
  box-shadow: var(--shadow-card); 
  padding: 6px; 
  min-width: 200px; 
  opacity: 0; 
  pointer-events: none; 
  transform: translateY(-6px); 
  transition: all .15s ease; 
  z-index: 10001; 
}
/* Dropdown меню в навигации - fixed позиционирование */
.admin-dropdown .dropdown-menu,
.user-widgets-dropdown .dropdown-menu,
.user-more-dropdown .dropdown-menu,
.user-notifications-dropdown .dropdown-menu,
.user-balance-dropdown .dropdown-menu,
.user-profile-dropdown .dropdown-menu { position: fixed !important; right: auto !important; top: auto !important; }
.dropdown-item { 
  display: block !important; 
  width: 100% !important; 
  text-align: left !important; 
  padding: 10px 14px !important; 
  color: var(--text) !important; 
  text-decoration: none !important; 
  background: transparent !important; 
  border: none !important; 
  border-radius: 6px !important; 
  cursor: pointer !important; 
  transition: background .15s ease, color .15s ease !important; 
  font-size: 14px !important; 
  font-weight: 500 !important; 
  line-height: 1.4 !important;
  margin: 1px 0 !important;
}
.dropdown-item:hover { 
  background: rgba(255, 184, 77, 0.1) !important; 
  color: var(--primary) !important; 
  font-weight: 500 !important;
}
.dropdown-item:active { 
  background: rgba(255, 184, 77, 0.15) !important; 
  color: var(--primary) !important;
}
.dropdown-item.active { 
  background: rgba(77, 159, 255, 0.1) !important; 
  color: var(--accent) !important; 
  font-weight: 600 !important;
}
.dropdown-danger { 
  color: #DC2626 !important; 
  font-weight: 500 !important; 
}
.dropdown-danger:hover { 
  background: #FEF2F2 !important; 
  color: #B91C1C !important; 
}

.hero { padding: 120px 0; text-align: center; position: relative; }
.hero-content { text-align: center; position: relative; z-index: 1; }
.hero h1 { 
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw + 8px, 3.5rem); 
  margin: 0 0 24px 0; 
  background: linear-gradient(135deg, var(--amber-light) 0%, var(--peach-start) 50%, var(--neon-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
.hero p { 
  margin: 0 auto 48px; 
  max-width: 600px; 
  color: var(--text); 
  opacity: 0.95;
  font-size: 1.25rem;
}
.cta { 
  display: flex; 
  gap: 16px; 
  justify-content: center;
  flex-wrap: wrap;
}

.features { padding: 32px 0 72px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 20px; }
.grid.grid-2 { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.grid.grid-3 { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
.grid.grid-4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.card { 
  background: var(--card) !important;
  border: 1px solid var(--border) !important; 
  padding: 32px; 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-card); 
  max-width: 100%; 
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: var(--gradient-warm);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::before {
  opacity: 1;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(30, 35, 48, 0.12);
}
.card .card-title { 
  font-weight: 700; 
  margin-bottom: 6px; 
  color: var(--text);
  font-family: var(--font-heading);
}
.card .card-value { 
  font-size: 22px; 
  font-weight: 800; 
  letter-spacing: .3px; 
  color: var(--amber-light);
}
.card h3 { 
  margin-top: 0;
  font-family: var(--font-heading);
  color: var(--text);
}
.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); margin-top: auto; background: linear-gradient(180deg, rgba(10,11,16,0.0), rgba(10,11,16,0.6) 30%, rgba(10,11,16,0.85)); backdrop-filter: blur(4px); }
main { flex: 1 0 auto; }

/* Sticky footer layout */
body, html { height: 100%; }

.auth { 
  max-width: 640px; 
  margin: 28px auto; 
  background: var(--card);
  border: 1px solid var(--border); 
  border-radius: var(--radius-xl); 
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-weight: 500; color: var(--text); }
input { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px; 
  font-family: var(--font-body);
  transition: all 0.3s ease;
}
input:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}
select { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 36px 12px 16px; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  cursor: pointer; 
  font-family: var(--font-body);
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); 
  background-position: calc(100% - 18px) 50%, calc(100% - 10px) 50%; 
  background-size: 8px 8px, 8px 8px; 
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}
select:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}
.alert-error { 
  background: #FEE2E2; 
  border: 2px solid #FCA5A5; 
  color: #991B1B; 
  padding: 12px 16px; 
  border-radius: var(--radius-md); 
  margin-bottom: 16px;
  font-weight: 500;
}
.alert-ok { 
  background: #D1FAE5; 
  border: 2px solid #6EE7B7; 
  color: #065F46; 
  padding: 12px 16px; 
  border-radius: var(--radius-md); 
  margin-bottom: 16px;
  font-weight: 500;
}
/* Flash notifications (top of content) */
.flash { margin: 12px 0; }

/* Auth forms: make submit full-width and prominent */
.auth .form-row button[type="submit"],
.auth button[type="submit"],
.auth input[type="submit"] { 
  width:100%; 
  background: var(--gradient-button); 
  color: white !important; 
  border-color: transparent; 
  box-shadow: var(--glow);
}
.auth .form-row button[type="submit"]:hover,
.auth button[type="submit"]:hover,
.auth input[type="submit"]:hover {
  color: white !important;
}

.code-inline { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  background: var(--milk-white); 
  color: var(--text); 
  border-radius: var(--radius-sm); 
  padding: 8px 12px; 
  border: 1px solid var(--border);
  font-weight: 500;
}

.personal { max-width: 100%; margin: 16px auto; padding: 0 16px; }
.placeholder { 
  background: var(--card);
  border: 2px dashed var(--border); 
  padding: 24px; 
  border-radius: var(--radius-lg); 
  color: var(--muted);
  text-align: center;
  transition: all 0.3s ease;
}
.placeholder:hover {
  border-color: var(--amber-light);
}

/* Personal hero */
.profile-hero { position: relative; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(30,34,62,0.6), rgba(18,20,38,0.9)); min-height: 140px; background-size: cover; background-position: center; }
.profile-hero__overlay { position: absolute; inset: 0; background: radial-gradient(500px 200px at 20% -20%, rgba(109,94,252,0.25), transparent), linear-gradient(180deg, rgba(10,11,16,0.1), rgba(10,11,16,0.7)); }
.profile-hero__content { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--amber-light), var(--peach-start)); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: white; box-shadow: var(--glow); }
.identity h2 { margin: 0; }
/* Page background when set inline on public page */
.personal[style*="background-image"] { padding-top: 8px; padding-bottom: 8px; border-radius: 16px; }

/* Dashboard */
.dashboard { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
  margin: 16px 0; 
}
.stat { 
  display: grid; 
  gap: 8px;
  background: var(--card);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(30, 35, 48, 0.12);
}
.stat__label { 
  color: var(--muted); 
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat__value { 
  font-size: 24px; 
  font-weight: 800; 
  letter-spacing: 0.3px;
  color: var(--amber-light);
  font-family: var(--font-heading);
}

/* Admin sections */
.admin { width: 100%; box-sizing: border-box; }
.admin h1 { margin: 8px 0 12px; letter-spacing: .2px; }
.admin .filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 0 0 12px 0; }
.admin .filters label { display:flex; gap:6px; align-items:center; }
.form-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Admin: Support layout - make blocks wide and balanced */
.admin-support .admin-support-grid { grid-template-columns: 1fr; gap: 16px; }
.admin-support.tab-tickets .admin-support-grid { grid-template-columns: 1fr; }
.admin-support .card { padding: 20px; }
.admin-support .tabs { margin-bottom: 10px; }
/* Create tab visual sizing like metrics: full single card centered by container */
.admin-support.tab-create .admin-support-grid { grid-template-columns: 1fr; }
@media (max-width: 1200px) {
  .admin-support.tab-tickets .admin-support-grid { grid-template-columns: 1fr; }
}

/* Buttons - Small */
.btn-sm, .btn-small { padding: 8px 16px; border-radius: 8px; font-size: 13px; }
.btn-sm:active, .btn-small:active { transform: translateY(0) scale(0.96); opacity: 0.9; }

/* Fyra Buttons - добавляем в styles.css для консистентности */
.fyra-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  border: 2px solid #E5E7EB;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.fyra-btn:hover {
  border-color: var(--amber-light);
  box-shadow: 0 4px 24px rgba(255,184,77,0.3);
  transform: translateY(-1px);
}

.fyra-btn-primary {
  background: linear-gradient(135deg, #FF8C6B, #FFD7A0);
  color: white !important;
  border: none;
  box-shadow: 0 4px 16px rgba(255, 140, 107, 0.3);
}

.fyra-btn-primary:hover {
  background: linear-gradient(135deg, #ff7a57, #ffc88c);
  box-shadow: 0 6px 24px rgba(255, 140, 107, 0.5);
  transform: translateY(-2px);
}

.fyra-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 140, 107, 0.3);
}

.fyra-btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--amber-light);
}

.fyra-btn-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white !important;
  border: none;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.fyra-btn-danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

.fyra-btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Fyra Tabs - система вкладок */
.fyra-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.fyra-tab-btn {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  transition: all 0.2s;
  margin-bottom: -2px;
  border-radius: 8px 8px 0 0;
}

.fyra-tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--amber-light);
  background: rgba(255, 184, 77, 0.05);
}

.fyra-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 184, 77, 0.08);
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.fyra-tab-content {
  display: none;
}

.fyra-tab-content.active {
  display: block;
}

.fyra-tab-pane {
  display: none;
}

.fyra-tab-pane.active {
  display: block;
}

/* Fyra Cards */
.fyra-card {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fyra-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px 0;
}

/* Fyra Form Elements */
.fyra-form-label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.fyra-input,
.fyra-select,
.fyra-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  transition: all 0.2s;
  box-sizing: border-box;
}

.fyra-input:focus,
.fyra-select:focus,
.fyra-textarea:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: 0 0 0 3px rgba(255, 184, 77, 0.1);
}

.fyra-textarea {
  min-height: 120px;
  resize: vertical;
}

.fyra-text-muted {
  color: var(--muted);
  font-size: 0.875rem;
}

.fyra-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

/* Fyra Table */
.fyra-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}

.fyra-table thead {
  background: #FAFAFA;
  border-bottom: 2px solid #E5E7EB;
}

.fyra-table thead tr th {
  padding: 16px 20px;
  text-align: center !important;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.fyra-table tbody tr {
  border-bottom: 1px solid #E5E7EB;
  transition: background 0.2s ease;
}

.fyra-table tbody tr:last-child {
  border-bottom: none;
}

.fyra-table tbody tr:hover {
  background: rgba(255, 184, 77, 0.08);
}

.fyra-table tbody tr td {
  padding: 16px 20px;
  text-align: center !important;
  color: var(--text);
  font-size: 0.95rem;
}

/* Table (semantic table element) */
table.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
table.table thead th { text-align: center !important; font-weight: 700; color: var(--text); background: var(--bg-elev); border-bottom: 2px solid var(--border); padding: 16px 20px; font-size: 0.9rem; }
table.table tbody td { border-top: 1px solid var(--border); padding: 16px 20px; color: var(--text); text-align: center !important; font-size: 0.95rem; line-height: 1.6; }
table.table tbody tr:hover { background: rgba(255, 184, 77, 0.08); }

/* Admin • Support: Tickets table columns */
.tickets-table { table-layout: fixed; }
.tickets-table .th-id, .tickets-table .td-id { width: 64px; }
.tickets-table .th-category, .tickets-table .td-category { width: 160px; }
.tickets-table .th-priority, .tickets-table .td-priority { width: 64px; text-align: left; }
.tickets-table .th-status, .tickets-table .td-status { width: 92px; }
.tickets-table .th-assignee, .tickets-table .td-assignee { width: 160px; }
.tickets-table .th-created, .tickets-table .td-created { width: 200px; white-space: nowrap; }
.tickets-table .th-action, .tickets-table .td-action { width: 128px; }
.tickets-table .td-subject, .tickets-table .th-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Slightly reduce subject's flex share so the action button fits */
.tickets-table .td-subject { max-width: calc(100% - 520px); }
.tickets-table .td-assignee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Table (div-based) */
.table { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.table .tr { display: grid; grid-template-columns: 40px 80px 1fr 1fr 140px 1fr 160px; gap: 0; border-top: 1px solid var(--border); }
.table .tr.th { background: var(--milk-white); color: var(--text); font-weight: 700; border-top: none; border-bottom: 2px solid var(--border); }
.table .td { padding: 12px 14px; border-right: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.table .tr .td:last-child { border-right: none; }
.table .tr:hover { background: var(--bg-hover); }

/* API Keys table: 5 columns [ID | Name | Scope | Active | Rotate] */
.table.table-api-keys .tr { grid-template-columns: 80px 1fr 160px 140px 140px; }

/* Helpers */
.muted { color: var(--muted); }
dialog { background: var(--card); color: var(--text); border: none; border-radius: 12px; padding: 16px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
dialog::backdrop { background: transparent !important; backdrop-filter: none !important; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.table .td pre { white-space: break-spaces; overflow: auto; max-height: 160px; margin: 0; font-size: 12px; }

/* Editor */
.editor h3 { margin: 6px 0 12px; }
textarea { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px; 
  resize: vertical;
  font-family: var(--font-body);
  transition: all 0.3s ease;
  min-height: 120px;
}
textarea:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}
.editor input[type="file"] { 
  background: var(--card); 
  border: 2px dashed var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.editor input[type="file"]:hover {
  border-color: var(--amber-light);
}
.url-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.url-row input[readonly] { 
  background: var(--milk-white); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px;
  font-family: var(--font-body);
}
.copy-btn { min-width: 84px; }
.copy-btn:active { transform: translateY(0) scale(0.96); }
.actions { display: flex; gap: 10px; }

/* Tabs for admin settings */
/* Note: scope the flex row layout to admin pages to avoid pushing widget editor content to the side on personal pages */
.admin .tabs, .admin-settings .tabs { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  margin: 6px 0 16px; 
  flex-wrap: wrap; 
}
.personal .tabs { 
  display: block; 
  margin: 6px 0 16px; 
}
.tab-btn { 
  padding: 10px 20px; 
  border-radius: var(--radius-xl); 
  border: 2px solid var(--border); 
  background: var(--card);
  color: var(--text); 
  cursor: pointer; 
  font-weight: 600;
  font-family: var(--font-heading);
  transition: all 0.3s ease;
}
.tab-btn:hover { 
  background: var(--milk-white);
  border-color: var(--amber-light);
  transform: translateY(-2px);
}
.tab-btn:active { 
  transform: scale(0.97); 
}
.tab-btn.active { 
  background: var(--gradient-button);
  color: white !important;
  box-shadow: var(--glow);
  border-color: transparent;
}
.tab-btn.active:active { 
  transform: scale(0.97); 
  opacity: 0.95; 
}

/* Messages table */
.messages table th, .messages table td { font-size: 14px; }
.messages .filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Donation preview */
.donation-preview .donation-text { color: var(--muted); white-space: pre-wrap; }
.preview-inline { margin-top: 12px; }
.preview-inline h4 { margin: 8px 0; }
/* Inline image previews in editor */
.image-preview { 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  min-height: 120px; 
  margin: 6px 0 12px; 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  max-width: 100%;
  /* Шахматный паттерн для показа прозрачности */
  background: 
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #f5f5f5;
}
/* Когда загружено изображение - показываем его поверх паттерна */
.image-preview[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.image-preview--banner { aspect-ratio: 5 / 1; min-height: 0; }
.image-preview--page { aspect-ratio: 16 / 10; min-height: 0; max-height: 400px; }
.image-preview--rect { aspect-ratio: 16 / 9; min-height: 0; }
.image-preview__empty { 
  color: var(--muted); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  font-size: 14px; 
  position: relative;
  z-index: 2;
}
.image-preview__controls { 
  position: absolute; 
  top: 8px; 
  right: 8px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  background: rgba(255, 255, 255, 0.95); 
  border: 1px solid var(--border); 
  padding: 6px 8px; 
  border-radius: 10px; 
  backdrop-filter: blur(4px);
  z-index: 3;
}
.image-preview__desc { color: var(--muted); font-size: 12px; }
.image-preview .delete-img { 
  background: #ef4444; 
  border: none;
  color: white;
  padding: 6px 10px; 
  border-radius: 8px; 
  transition: all .15s ease; 
  font-weight: 600;
}
.image-preview .delete-img:hover { 
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.image-preview .delete-img:active { 
  background: #b91c1c; 
  transform: scale(0.96); 
}
/* Donation UI placeholders on public page */
.donation-ui { margin-top: 16px; display: grid; gap: 12px; }
.payment-methods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-logo { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 12px 16px; 
  border: 2px solid var(--border); 
  border-radius: var(--radius-md); 
  background: var(--card); 
  cursor: pointer; 
  color: var(--text) !important; 
  text-decoration: none; 
  transition: all 0.3s ease;
  font-weight: 600;
}
.pm-logo:hover { 
  background: var(--bg-hover);
  border-color: var(--amber-light);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.pm-logo:active { 
  background: var(--milk-white); 
  transform: scale(0.97); 
}
.pm-logo img { height: 18px; width: auto; display: block; }
.pm-logo .label { font-weight: 700; letter-spacing: 0.2px; color: var(--text) !important; }
.pm-logo.is-selected { 
  border-color: var(--amber-light); 
  box-shadow: var(--glow); 
  background: var(--gradient-warm);
  color: white !important;
}
.pm-logo.is-selected .label {
  color: white !important;
}
.pm-logo.is-selected:active { transform: scale(0.97); opacity: 0.95; }
.amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.amount-btn { 
  background: var(--card); 
  color: var(--text) !important;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.amount-btn:hover {
  border-color: var(--amber-light);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.amount-btn:active { transform: scale(0.97); opacity: 0.9; }
.currency-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 34px; position: relative; }
.currency-select { background-image: linear-gradient(45deg, transparent 50%, #566 50%), linear-gradient(135deg, #566 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 10px) 50%; background-size: 8px 8px, 8px 8px; background-repeat: no-repeat; }
.select { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 36px 12px 16px; 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  cursor: pointer; 
  font-family: var(--font-body);
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); 
  background-position: calc(100% - 18px) 50%, calc(100% - 10px) 50%; 
  background-size: 8px 8px, 8px 8px; 
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}
.select:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}
.amount-input-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.amount-input-row input { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px;
  font-family: var(--font-body);
  transition: all 0.3s ease;
}
.amount-input-row input:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}
.donor-fields { display: grid; gap: 8px; }
.donor-fields input { 
  background: var(--card); 
  border: 2px solid var(--border); 
  color: var(--text); 
  border-radius: var(--radius-md); 
  padding: 12px 16px;
  font-family: var(--font-body);
  transition: all 0.3s ease;
}
.donor-fields input:focus {
  outline: none;
  border-color: var(--amber-light);
  box-shadow: var(--glow);
}

.tips-action { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .grid.grid-2, .grid.grid-3, .grid.grid-4 { grid-template-columns: 1fr; }
  .hero { padding: 80px 0; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero p { font-size: 1rem; margin-bottom: 32px; }
  .dashboard { grid-template-columns: repeat(2, 1fr); }
  .site-sidebar { position: fixed; width: 72px; padding: 12px 8px; z-index: 10; }
  :root { --sidebar-width: 72px; }
  .logo { font-size: 14px; }
  .side-nav .menu-link { font-size: 12px; padding: 8px 8px; }
  .card { padding: 24px; }
  .btn { padding: 12px 24px; font-size: 0.9375rem; }
  .btn-primary { padding: 14px 32px; }
}

@media (max-width: 480px) {
  .hero { padding: 60px 0; }
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 0.9375rem; }
  .card { padding: 20px; }
  .cta { flex-direction: column; width: 100%; }
  .cta .btn { width: 100%; justify-content: center; }
}

/* Sidebar layout */
.personal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; margin-top: 16px; }
.sidebar { position: sticky; top: 80px; align-self: start; }
.menu { 
  background: var(--card);
  border: 1px solid var(--border); 
  border-radius: var(--radius-lg); 
  margin-bottom: 10px; 
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.menu > summary { 
  cursor: pointer; 
  list-style: none; 
  padding: 12px 16px; 
  font-weight: 700;
  font-family: var(--font-heading);
  transition: all 0.3s ease;
  color: var(--text);
}
.menu > summary::-webkit-details-marker { 
  display: none; 
}
.menu > summary:hover { 
  background: var(--milk-white);
}
.menu > summary:active { 
  background: var(--milk-white);
}
.menu nav { 
  display: grid; 
}
.menu-link { 
  padding: 10px 16px; 
  text-decoration: none; 
  color: var(--text); 
  border-top: 1px solid var(--border); 
  cursor: pointer; 
  transition: all 0.3s ease;
  font-family: var(--font-body);
}
.menu-link:hover { 
  background: var(--milk-white);
  padding-left: 20px;
}
.menu-link:active { 
  transform: scale(0.98); 
}

/* Widget variant context menus (needs higher z-index than cards) */
.variant-tile { position: relative; overflow: visible !important; }
.variant-tile .menu { z-index: 10000 !important; overflow: visible !important; }
.variants { overflow: visible !important; }
.menu-link.active { 
  background: var(--gradient-warm);
  color: white;
  font-weight: 700;
  border-color: transparent;
}
.content { min-width: 0; }

/* Prevent text selection on sidebar menu headers and links */
.menu > summary,
.menu-link,
.menu-sublink,
.side-nav .menu-link,
.side-nav .menu-sublink {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* App shell with fixed left sidebar */
.app-shell { min-height: 100vh; position: relative; z-index: 1; }
.site-sidebar { 
  position: fixed; 
  left: 0; 
  top: 90px; 
  bottom: 0; 
  width: var(--sidebar-width); 
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--border); 
  padding: 16px 12px; 
  overflow-y: auto; 
  z-index: 10;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.05);
}
.sidebar-inner { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.side-nav { display: grid; gap: 4px; }
.side-nav .menu-link { 
  display: block; 
  border-radius: var(--radius-md); 
  border: 1px solid var(--border); 
  background: var(--card);
  padding: 10px 12px; 
  text-decoration: none; 
  color: #1E2330 !important; 
  font-weight: 600;
  cursor: pointer; 
  transition: all 0.3s ease;
  font-family: var(--font-body);
}
.side-nav .menu-link:hover { 
  background: var(--milk-white);
  border-color: var(--amber-light);
  transform: translateX(4px);
  color: var(--primary) !important;
}
.side-nav .menu-link:active { 
  transform: scale(0.98); 
}
.side-nav form { margin: 0; }
.side-nav .menu-link--danger { color: #ff98a6; width: 100%; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.side-nav .menu-link--danger:active { background: rgba(255,152,166,0.05); transform: scale(0.98); }
.side-nav details.menu-group { 
  border: 1px solid var(--border); 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  background: var(--card); 
}
.side-nav details.menu-group > summary.menu-link { 
  border: none; 
  margin: 0; 
}
.side-nav details.menu-group > summary.menu-link::-webkit-details-marker { 
  display: none; 
}
.side-nav .menu-sub { 
  display: grid; 
  gap: 4px; 
  padding: 8px; 
  border-top: 1px solid var(--border); 
  background: var(--milk-white);
}
.side-nav .menu-sublink { 
  display: block; 
  border-radius: var(--radius-sm); 
  padding: 8px 12px; 
  text-decoration: none; 
  color: #1E2330 !important; 
  font-weight: 600;
  border: 1px solid var(--border); 
  background: var(--card);
  cursor: pointer; 
  transition: all 0.3s ease;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.side-nav .menu-sublink:hover { 
  background: var(--card);
  border-color: var(--amber-light);
  transform: translateX(4px);
  color: var(--primary) !important;
}
.side-nav .menu-sublink:active { 
  transform: scale(0.98); 
}
.side-nav .menu-sublink.active { 
  background: var(--gradient-button);
  color: white !important;
  font-weight: 600;
  border-color: transparent;
  box-shadow: var(--glow);
}
.side-nav .menu-sublink.active:active { 
  transform: scale(0.98); 
  opacity: 0.95; 
}
.menu-help { margin-top: auto; padding-top: 8px; }
.sidebar-inner { display: grid; gap: 12px; min-height: 100%; grid-auto-rows: min-content; }
.site-content { margin-left: 0; min-height: 100vh; display: flex; flex-direction: column; width: 100%; max-width: 100%; box-sizing: border-box; }
.site-content .site-header { position: fixed; top: 0; left: 0; right: 0; margin-left: 0; z-index: 100; }
.site-content .nav { margin-left: 0; }
/* Кнопки выровнены справа */
.site-header .nav > nav { 
  display: flex; 
  gap: 10px; 
  align-items: center;
  margin-left: auto;
}
.no-sidebar .nav .header-logo { left: 16px; }
.site-content .btn-user { position: static; }

/* No sidebar - full width always */
body.no-sidebar .site-content { margin-left: 0; width: 100%; max-width: 100%; }
body.no-sidebar .site-content .site-header { left: 0; right: 0; }
body.no-sidebar .site-content .nav { margin-left: 0; }
body.no-sidebar .site-content details.dropdown { right: 16px; left: auto; }

/* Hide sidebar completely */
.site-sidebar { display: none !important; }

/* Make main containers full-width in content area */
.site-content > main.container { max-width: 100%; width: 100%; padding-left: 32px; padding-right: 32px; padding-top: 24px; box-sizing: border-box; }
.admin { width: 100%; box-sizing: border-box; max-width: 100%; }
.admin-content-section { width: 100%; box-sizing: border-box; max-width: 100%; }

/* Keep header content aligned and roomy */
.site-content .site-header { z-index: 100; }
.site-content .nav { padding-left: 32px; padding-right: 32px; }

/* Widget page minimal layout for browser source */
body.widget-container main.container { max-width: 100%; padding: 0; margin: 0; }
/* Transparent background for OBS */
.widget { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; }
.widget .widget-inner { width: 100%; max-width: 960px; color: #fff; padding: 16px; }
.widget .placeholder { font-size: 20px; opacity: 0.9; }
.widget-container .site-sidebar { display: none; }
.widget-container .site-content { margin-left: 0; }

/* Optional theme hooks for widgets - REMOVED: конфликтовало с основными переменными */

/* Alert demo layout presets */
.alert { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.alert--demo { width: 800px; max-width: 920px; margin: 0 auto; }
.alert--demo.alert--img-left, 
.alert--demo.alert--img-right { width: 600px; max-width: 100%; }
.alert__image { background: transparent; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.alert__image img, .alert__image video { width: 100%; height: 100%; object-fit: contain; }
.alert__text { display: grid; gap: 6px; }
.alert__title { font-size: 26px; font-weight: 800; letter-spacing: 0.3px; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.alert__subtitle { color: #e1e7ff; opacity: 0.9; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* Variants */
.alert--img-top { display: grid; gap: 10px; }
.alert--img-top .alert__image { width: 300px; height: 300px; margin: 0 auto; position: static; }
.alert--img-top .alert__text { text-align: center; position: static; }

.alert--img-bottom { display: grid; gap: 10px; }
.alert--img-bottom .alert__image { width: 300px; height: 300px; margin: 0 auto; order: 2; position: static; }
.alert--img-bottom .alert__text { order: 1; text-align: center; position: static; }

.alert--img-left { display: grid !important; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; }
.alert--img-left .alert__image { width: 200px !important; height: 200px !important; position: static; flex-shrink: 0; }
.alert--img-left .alert__text { position: static; }
.alert--img-right { display: grid !important; grid-template-columns: 1fr 200px; gap: 12px; align-items: center; }
.alert--img-right .alert__image { width: 200px !important; height: 200px !important; order: 2; position: static; flex-shrink: 0; }
.alert--img-right .alert__text { position: static; }

.alert--img-bg { position: relative; overflow: hidden; min-height: 300px; }
.alert--img-bg .alert__image { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(6px) brightness(0.8); opacity: 0.45; }
.alert--img-bg .alert__image img, .alert--img-bg .alert__image video { object-fit: cover; }
.alert--img-bg .alert__text { position: relative; padding: 24px; text-align: center; }

@media (max-width: 900px) {
  .personal-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* Charts & Graphs */
#ud-chart, #metrics-chart, 
#chart, [id*="chart"], 
canvas[id*="chart"],
.chart-container, 
.apexcharts-canvas {
  background: var(--card) !important;
  border-radius: 12px !important;
}
#ud-chart {
  background: var(--card) !important;
}
.apexcharts-canvas svg {
  background: transparent !important;
}
.apexcharts-gridline {
  stroke: var(--border) !important;
}
.apexcharts-text {
  fill: var(--text) !important;
}
.apexcharts-tooltip {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Roulette sub-tabs underline */
.roulette-tabs .roulette-tab { font-size: 13px; text-transform: uppercase; }
.roulette-tabs .roulette-tab .rtab-underline { background: #ff8a00; height: 3px; border-radius: 3px; }

/* Admin Security: widen config and refine inputs */
.admin-security .grid.two { grid-template-columns: 1fr; }
.admin-security .card form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-security .card form .row { display: contents; }
.admin-security .card form label { gap: 4px; font-size: 14px; }
.admin-security .card form input[type="text"],
.admin-security .card form input[type="number"] { padding: 10px 12px; font-size: 14px; }
.admin-security .card form .btn { width: fit-content; grid-column: 1 / span 2; }

/* Pretty checkbox => toggle style for specific checkboxes */
.admin-security input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 42px; height: 22px; border-radius: 999px; background: #E5E7EB; border: 2px solid #E5E7EB; position: relative; cursor: pointer; outline: none; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.admin-security input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #cfd3ff; border-radius: 50%; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.admin-security input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--primary), #8b7bff); box-shadow: var(--glow); border-color: transparent; }
.admin-security input[type="checkbox"]:checked::after { transform: translateX(20px); background: var(--card); }
.admin-security input[type="checkbox"]:active { transform: scale(0.96); }
.admin-security input[type="checkbox"]:active::after { box-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* Toggle checkbox for modals and forms */
input.toggle-checkbox { appearance: none; -webkit-appearance: none; width: 42px; height: 22px; border-radius: 999px; background: #E5E7EB; border: 2px solid #E5E7EB; position: relative; cursor: pointer; outline: none; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; flex-shrink: 0; }
input.toggle-checkbox::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #cfd3ff; border-radius: 50%; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
input.toggle-checkbox:checked { background: linear-gradient(135deg, var(--primary), #8b7bff); box-shadow: var(--glow); border-color: transparent; }
input.toggle-checkbox:checked::after { transform: translateX(20px); background: var(--card); }
input.toggle-checkbox:active { transform: scale(0.96); }
input.toggle-checkbox:active::after { box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
input.toggle-checkbox:focus-visible { outline: 2px solid rgba(0,255,209,0.45); outline-offset: 2px; }

/* Registration: inline terms label and accessible checkbox spacing */
.auth .checkbox { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; }
.auth .checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.auth .terms-inline { display: inline; line-height: 1.4; }
.auth .terms-inline a { color: #7aa7ff; text-underline-offset: 2px; }

/* Table overflow ellipsis already handled inline; ensure responsiveness */
.admin-security .table-scroll { overflow: auto; }

/* Styled scrollbars for dark theme */
/* Global scrollbar styles */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(109, 94, 252, 0.4) rgba(18, 20, 38, 0.6);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: rgba(10, 11, 16, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(26, 30, 48, 0.6);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(109, 94, 252, 0.5), 
    rgba(90, 75, 230, 0.4)
  );
  border-radius: 6px;
  border: 1px solid rgba(109, 94, 252, 0.2);
  transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(109, 94, 252, 0.7), 
    rgba(90, 75, 230, 0.6)
  );
  box-shadow: 0 0 8px rgba(109, 94, 252, 0.3);
}

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, 
    rgba(109, 94, 252, 0.9), 
    rgba(90, 75, 230, 0.8)
  );
}

*::-webkit-scrollbar-corner {
  background: rgba(10, 11, 16, 0.8);
}

/* Scrollbox specific styles (backward compatibility) */
.scrollbox { scrollbar-width: thin; scrollbar-color: rgba(255, 184, 77, 0.4) #F3F4F6; }
.scrollbox::-webkit-scrollbar { width: 10px; height: 10px; }
.scrollbox::-webkit-scrollbar-track { background: #F3F4F6; border-radius: 10px; }
.scrollbox::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FFB84D, #FF8C6B); border-radius: 10px; border: 1px solid #E5E7EB; }
.scrollbox::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFA830, #FF7A57); }



/*--------------------------------------*/
/* Admin: Support ticket detail styles */
/*--------------------------------------*/
.admin-support-ticket .ticket-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.admin-support-ticket .ticket-meta > span { margin-left: 0; }
.admin-support-ticket .card .messages { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow: auto; padding-right: 6px; }
.admin-support-ticket .message { border: 2px solid var(--border); background: var(--card); padding: 10px 12px; border-radius: 10px; }
.admin-support-ticket .message__meta { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.admin-support-ticket .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 18px; border: 2px solid var(--border); background: var(--bg-elev); color: var(--text); }
.admin-support-ticket .tag--internal { color: #ff98a6; background: rgba(255,152,166,0.08); border-color: rgba(255,152,166,0.35); }
.admin-support-ticket .attachments { margin-top: 6px; }

/* Form sizing and alignment inside cards */
.admin-support-ticket .reply-form textarea { min-height: 120px; width: 100%; }
.admin-support-ticket .reply-form .row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.admin-support-ticket .reply-form label { margin: 0; }
.admin-support-ticket .reply-form input[type="file"] { background: var(--card); border: 2px dashed var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; }
.admin-support-ticket .form-actions { margin-top: 8px; display: flex; justify-content: flex-start; }

/* Controls in right column */
.admin-support-ticket .row { display: flex; align-items: center; gap: 8px; }
.admin-support-ticket select { min-width: 160px; }
.admin-support-ticket input[name="assignee_user"] { width: 100%; max-width: 180px; }

/* Save button loading indicator */
.btn-saving,
button.btn-saving,
button[type="submit"].btn-saving {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.save-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(109, 94, 252, 0.3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Badge styles for events */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--primary);
  color: #fff;
  margin-right: 6px;
}

/* Notification and Balance styles */
.btn-icon {
  position: relative;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
}

.btn-icon:hover {
  border-color: var(--amber-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 184, 77, 0.2);
}

.btn-icon svg {
  display: block;
  color: var(--muted);
}

/* Theme toggle button */
#theme-toggle {
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#theme-toggle:hover {
  border-color: var(--amber-light);
  transform: translateY(-1px);
  box-shadow: var(--glow);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--amber-light);
  outline-offset: 2px;
}

#theme-toggle svg {
  display: block;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  #theme-toggle {
    transition: none;
  }
}

.btn-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--border);
  background: var(--card);
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.btn-balance:hover {
  border-color: var(--amber-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 184, 77, 0.2);
}

.btn-balance svg {
  color: var(--muted);
}

/* Summary elements не должны получать стили кнопок */
summary {
  padding: 0;
  border: none;
  background: transparent;
}

/* Стили для summary в навигации - улучшенная читаемость */
.dropdown summary {
  color: var(--text);
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown summary:hover {
  color: #92400E;
}

/* Кнопки навигации в сайдбаре */
.fyra-tab-link,
.admin-dropdown summary,
.user-widgets-dropdown summary,
.user-more-dropdown summary {
  color: var(--muted) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease;
}

.fyra-tab-link:hover,
.admin-dropdown summary:hover,
.user-widgets-dropdown summary:hover,
.user-more-dropdown summary:hover {
  color: #92400E !important;
  background: rgba(146, 64, 14, 0.08) !important;
}

.fyra-tab-link.active,
.admin-dropdown[open] summary,
.user-widgets-dropdown[open] summary,
.user-more-dropdown[open] summary {
  color: #92400E !important;
  font-weight: 600 !important;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ff4444;
  color: #fff;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.dropdown-menu-wide {
  min-width: 360px;
  max-width: 420px;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s ease;
}

.btn-link:hover {
  background: rgba(109, 94, 252, 0.1);
}

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.notification-item {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
  cursor: pointer;
}

.notification-item:hover {
  background: rgba(255, 184, 77, 0.05);
}

.notification-item.unread {
  background: rgba(77, 159, 255, 0.08);
}

.notification-item.unread .notification-title {
  font-weight: 700;
}

.notification-title {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--text);
}

.notification-message {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.notification-time {
  font-size: 11px;
  color: var(--muted);
}

/* Balance History Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0 !important;
  right: 0;
  bottom: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  margin-left: 0 !important;
  pointer-events: none;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.show {
  display: flex;
  pointer-events: auto;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--glow);
  margin: 0 auto;
  pointer-events: auto;
  position: relative;
  animation: slideUp 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30,34,62,0.4), rgba(18,20,38,0.2));
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  text-shadow: none;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  transition: all .15s ease;
  font-weight: 300;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transform: scale(1.1);
}

.modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

/* Balance Summary Cards */
.balance-summary {
  padding: 20px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 16px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-shadow: 0 2px 8px rgba(30, 35, 48, 0.04);
}

.balance-summary-item {
  text-align: center;
  padding: 16px;
  background: var(--card);
  border-radius: 12px;
  border: 2px solid #E5E7EB;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.balance-summary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 35, 48, 0.08);
  border-color: #FFB84D;
}

.balance-summary-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.balance-summary-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
}

/* Balance History Filters */
.balance-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.balance-filter-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #F9FAFB;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s ease;
}

.balance-filter-btn:hover {
  background: #FAFAFA;
  border-color: rgba(109,94,252,0.4);
}

.balance-filter-btn.active {
  background: linear-gradient(135deg, rgba(109, 94, 252, 0.2), rgba(0, 255, 209, 0.1));
  border-color: rgba(109,94,252,0.6);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(109, 94, 252, 0.3);
}

/* Balance History Items */
.balance-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.balance-history-date-separator {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 12px 0 8px;
  padding: 8px 12px;
  background: rgba(109, 94, 252, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  text-transform: capitalize;
}

.balance-history-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  transition: all .2s ease;
}

.balance-history-item:hover {
  background: #FAFAFA;
  border-color: #FFB84D;
  transform: translateX(4px);
  box-shadow: -4px 0 0 #FFB84D, 0 4px 16px rgba(30, 35, 48, 0.08);
}

.balance-history-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.balance-history-icon.income {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(34, 197, 94, 0.05));
  border: 2px solid rgba(74, 222, 128, 0.3);
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.15);
}

.balance-history-icon.expense {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(239, 68, 68, 0.05));
  border: 2px solid rgba(248, 113, 113, 0.3);
  box-shadow: 0 2px 8px rgba(248, 113, 113, 0.15);
}

.balance-history-info {
  flex: 1;
  min-width: 0;
}

.balance-history-description {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.balance-history-message {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-history-time {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.balance-history-time::before {
  content: '🕐';
  font-size: 11px;
}

.balance-history-amount {
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}

.balance-history-amount.income {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.balance-history-amount.expense {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Empty state */
.balance-history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.balance-history-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.balance-history-empty-text {
  font-size: 16px;
  font-weight: 600;
}

/* Mobile responsiveness */
@media (max-width: 700px) {
  .balance-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .balance-history-item {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  
  .balance-history-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .balance-history-amount {
    grid-column: 2;
    justify-self: end;
    font-size: 18px;
  }
  
  .modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .modal-header,
  .modal-body {
    padding: 16px 20px;
  }
}

/* Layout selection radio buttons */
.layout-option {
  position: relative;
  transition: all 0.2s ease;
}

.layout-option:hover {
  border-color: rgba(109,94,252,0.5) !important;
  box-shadow: 0 0 12px rgba(109,94,252,0.2);
  transform: translateY(-2px);
}

.layout-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: #F3F4F6;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin: 0;
  z-index: 10;
}

.layout-option input[type="radio"]:hover {
  border-color: rgba(109,94,252,0.6);
  box-shadow: 0 0 8px rgba(109,94,252,0.3);
}

.layout-option input[type="radio"]:checked {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary), #8b7bff);
  box-shadow: 0 0 12px rgba(109,94,252,0.5), inset 0 0 0 4px #0a0b10;
}

.layout-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EFF1F3;
}

.layout-option input[type="radio"]:focus-visible {
  outline: 2px solid rgba(0,255,209,0.45);
  outline-offset: 2px;
}

.layout-option:has(input[type="radio"]:checked) {
  border-color: var(--primary) !important;
  box-shadow: var(--glow);
  background: linear-gradient(180deg, rgba(109,94,252,0.08), rgba(109,94,252,0.03));
}

/* Темная тема - принудительное применение для проблемных элементов */
[data-theme="dark"] .card,
[data-theme="dark"] .fyra-card,
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"] {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* Убираем hover эффект для событий на дашборде - принудительно для всех вложенных элементов */
#ud-events *,
#ud-events > *,
#ud-events div,
#ud-events div:hover,
#ud-events .event-item,
#ud-events .event-item:hover,
#ud-events .event-item:active,
#ud-events .event-item:focus {
  background: transparent !important;
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}