/* --- Begin: assets/css/shared-styles.css --- */
/* UD FINANCE - Shared Styles */

:root {
  /* Color Palette */
  --primary-gold: #ffd700;
  --primary-dark: #062f1c;
  --primary-green: #0d4d2a;
  --secondary-gold: #e5c100;
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  --border-light: rgba(255, 215, 0, 0.2);
  --border-hover: rgba(255, 215, 0, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.15);
  --glass-bg-active: rgba(255, 215, 0, 0.12);
  
  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 40px;
  --container-padding-mobile: 20px;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-2xl: 50px;
  
  /* Border Radius */
  --border-radius-xs: 8px;
  --border-radius-sm: 12px;
  --border-radius-md: 15px;
  --border-radius-lg: 20px;
  --border-radius-xl: 25px;
  --border-radius-full: 50px;
  
  /* Typography */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.2rem;
  --font-size-2xl: 1.4rem;
  --font-size-3xl: 1.8rem;
  --font-size-4xl: 2.2rem;
  --font-size-5xl: 3rem;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 15px rgba(255, 215, 0, 0.2);
  --shadow-lg: 0 8px 25px rgba(255, 215, 0, 0.3);
  --shadow-xl: 0 12px 40px rgba(255, 215, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Reset and Base Styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-green));
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout Components */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* Header Styles */
header {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-light);
  padding: var(--spacing-md) 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--primary-gold);
  text-decoration: none;
  transition: transform var(--transition-normal);
  will-change: transform;
}

.logo:hover {
  transform: scale(1.05);
}

.logo:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 4px;
  border-radius: var(--border-radius-xs);
}

/* Navigation */
nav {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

nav a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  position: relative;
  padding: var(--spacing-xs) 0;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gold);
  transition: width var(--transition-normal);
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a:hover,
nav a.active {
  color: var(--primary-gold);
}

nav a:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 4px;
  border-radius: var(--border-radius-xs);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--primary-gold);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-normal);
  line-height: 1;
}

.mobile-menu-toggle:hover {
  background: var(--glass-bg);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 2px;
}

/* Page Layout */
main {
  flex: 1;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  animation: fadeInUp 0.8s ease;
}

.page-header h1 {
  font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-5xl));
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(135deg, var(--primary-gold), var(--text-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  line-height: 1.2;
}

.page-header p {
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Card Components */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  transform: translateY(-10px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-xl);
  background: var(--glass-bg-hover);
}

.card.active {
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2), var(--shadow-xl);
  background: var(--glass-bg-active);
}

.card h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-sm);
  color: var(--primary-gold);
  font-weight: 600;
}

.card p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Button Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  will-change: transform;
  min-width: 140px;
  text-align: center;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 4px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
  color: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-gold);
  border: 2px solid var(--primary-gold);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
}

.btn-secondary:hover {
  background: var(--glass-bg);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.btn-danger {
  background: rgba(255, 68, 68, 0.2);
  border: 2px solid #ff4444;
  color: #ff6666;
}

.btn-danger:hover {
  background: rgba(255, 68, 68, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

/* Grid Layouts */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Form Elements */
.form-input {
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-light);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
}

.form-input:focus {
  border-color: var(--primary-gold);
  outline: none;
  background: var(--glass-bg-active);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

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

/* Footer */
footer {
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid var(--border-light);
  padding: 0; /* Remove extra vertical space */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer-info h3 {
  color: var(--primary-gold);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.footer-info p {
  color: var(--text-secondary);
}

.footer-contacts {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: wrap;
}

.footer-contacts a {
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}

.footer-contacts a:hover {
  color: var(--primary-gold);
  background: var(--glass-bg);
}

.footer-contacts a:focus-visible {
  outline: 2px solid var(--primary-gold);
  outline-offset: 2px;
}

.copyright {
  width: 100%;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.lang-switcher { display:flex; gap:10px; margin:10px 0; }
.lang-switcher button {
  background-color:#ffd700; border:none; border-radius:6px; padding:4px;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.lang-switcher button img { width:24px; height:auto; display:block; }
.lang-switcher button:hover { transform:scale(1.1); box-shadow:0 0 6px rgba(0,0,0,.25); }
.lang-switcher button.active { outline:2px solid #333; }




/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease;
}

.fade-in-up-delay {
  animation: fadeInUp 0.8s ease 0.2s both;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile Styles */
@media (max-width: 768px) {
  :root {
    --container-padding: var(--container-padding-mobile);
    --font-size-5xl: 2.2rem;
    --font-size-4xl: 1.8rem;
  }

  .header-content {
    padding: 0 var(--container-padding-mobile);
  }

  .logo {
    font-size: var(--font-size-2xl);
  }

  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--spacing-lg) var(--container-padding-mobile);
    gap: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    animation: slideDown 0.3s ease;
  }

  nav.active {
    display: flex;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .grid-auto-fit {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .footer-contacts {
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .page-header h1 {
    font-size: var(--font-size-4xl);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --primary-gold: #ffff00;
    --text-primary: #ffffff;
    --border-light: rgba(255, 255, 0, 0.8);
  }
}

/* Print Styles */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  header,
  footer,
  nav,
  .mobile-menu-toggle {
    display: none;
  }
  
  main {
    margin: 0;
    padding: 0;
  }
}
/* --- Floating Tools Button --- */
.tools-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand, #1f6feb);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.tools-fab:active { transform: scale(.98); }

/* --- Slide-in Tools Panel (right) --- */
.tools-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  max-width: min(960px, 92vw);
  width: 720px;
  background: #ffffff;
  color: #101828;
  border-left: 1px solid #eef2f7;
  box-shadow: -10px 0 28px rgba(16,24,40,.08);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.tools-panel.open { transform: translateX(0); }
@media (max-width: 768px){
  .tools-panel { width: 100vw; }
}

/* Header */
.tools-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px; border-bottom:1px solid #eef2f7;
  background: #fafbfc;
}
.tools-title { font-weight: 600; font-size: 16px; }
.tools-close {
  border:0; background:#eef2f7; color:#0f172a; border-radius:10px;
  padding:6px 10px; cursor:pointer;
}

/* Tabs */
.tools-tabs { display:flex; flex-wrap:wrap; gap:6px; padding: 10px 12px 0 12px; }
.tools-tab {
  background:#f3f6fa; border:1px solid #e3e7ee; color:#0f172a;
  cursor:pointer; padding:8px 12px; border-radius:10px; margin-bottom:8px; font-size:13px;
}
.tools-tab.active { background:#e0e7f3; }

/* Content */
.tools-content { padding:12px; overflow:auto; height: 100%; }
.tool-pane { display:none; } .tool-pane.active { display:block; }
.tool { margin:12px 0; }
.tool label { color:#334155; font-weight:600; margin-bottom:6px; display:block; }
.tool input, .tool textarea, .tool select, .tool button {
  font: inherit;
}
.tool input, .tool textarea, .tool select {
  width:100%; background:#fff; color:#0f172a; border:1px solid #cfd6df; border-radius:10px; padding:8px 10px; box-sizing:border-box;
}
.tool textarea { min-height:76px; resize:vertical; }
.tool .btn {
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid #e2e8f0; background:#fff; cursor:pointer;
}
.tool .btn.primary { background: var(--brand, #1f6feb); color:#fff; border-color: transparent; }

/* Currency */
.currency-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; }
.currency-table th,.currency-table td { border:1px solid #e3e7ee; padding:8px 10px; text-align:left; }
.currency-conv { display:grid; grid-template-columns:1fr 140px 1fr; gap:8px; align-items:center; margin-top:8px; }

/* Calendar */
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:10px; }
.calendar-day { border:1px solid #e3e7ee; border-radius:12px; min-height:68px; padding:8px; background:#fff; position:relative; font-size:13px; }
.calendar-day .d { position:absolute; top:8px; right:10px; font-size:11px; opacity:.7; }
.calendar-day.event { outline:2px solid #7ab7ff; outline-offset:0; }

/* Minesweeper */
.mines-grid { display:grid; gap:2px; margin-top:8px; }
.mines-cell { width:26px; height:26px; border:1px solid #e3e7ee; border-radius:6px; display:flex; align-items:center; justify-content:center; background:#f8fafc; cursor:pointer; font-size:12px; user-select:none; }
.mines-cell.revealed { background:#eaf2ff; }

/* Tetris */
.tetris-wrap { display:flex; gap:10px; align-items:flex-start; flex-wrap: wrap; }
.tetris-canvas { border:1px solid #e3e7ee; border-radius:10px; background:#fff; }

/* Hide removed macro blocks if present */
#macro-widget, #news-macro, .macro-economics { display:none !important; }


/* === UD Tools Panel === */
.ud-tools-fab{position:fixed;right:16px;bottom:16px;z-index:9999;background:#111;color:#fff;border-radius:28px;
padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;user-select:none}
.ud-tools-panel{position:fixed;right:0;top:0;height:100%;width:min(780px,95vw);background:#111;color:#eaeaea;
transform:translateX(100%);transition:.28s ease;z-index:9998;box-shadow:-8px 0 24px rgba(0,0,0,.35);display:flex;flex-direction:column}
.ud-tools-panel.open{transform:translateX(0)}
.ud-tools-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #2a2a2a}
.ud-tools-tabs{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid #2a2a2a}
.ud-tab{background:#1a1a1a;border:1px solid #2a2a2a;padding:8px 12px;border-radius:10px;color:#eaeaea;cursor:pointer}
.ud-tab.active{border-color:#6aa9ff}
.ud-tools-content{overflow:auto;padding:12px}
.ud-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ud-grid-2{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ud-grid-3{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ud-card{background:#141414;border:1px solid #2a2a2a;border-radius:14px;padding:12px}
.ud-card h3{margin:0 0 8px 0;font-size:16px}
.ud-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.ud-result{margin-top:8px;background:#0f0f0f;border:1px dashed #2a2a2a;border-radius:8px;padding:8px;min-height:28px}
.ud-card textarea{width:100%;min-height:70px;background:#0f0f0f;border:1px solid #2a2a2a;color:#ddd;border-radius:10px;padding:8px}
.ud-card input, .ud-card select, .ud-card button{background:#1b1b1b;border:1px solid #2a2a2a;color:#eaeaea;border-radius:10px;padding:8px}
.ud-btn-close{background:#1b1b1b;border:1px solid #2a2a2a;color:#eaeaea;border-radius:10px;padding:6px 10px;cursor:pointer}
.ms-board{display:grid;gap:2px;user-select:none}
.ms-board .cell{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;cursor:pointer;font-weight:700}
.ms-board .cell.open{background:#202020}
.ms-board .cell.mine{background:#4a0000}
.tetris-canvas{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:8px;display:block;margin-bottom:8px}
@media (max-width:640px){.ud-tools-panel{width:100%}}

/* === v7: светлый стиль панели === */
.ud-tools-panel{background:#f2f2f2;color:#111;}
.ud-card{background:#fff;color:#111;}
.ud-card input,.ud-card select,.ud-card button,.ud-card textarea{background:#fafafa;color:#111;border:1px solid #ccc;}
.ud-card button:hover{background:#e0e0e0}
.ud-card button:active{background:#ccc}

/* 2048 */
.game2048{display:grid;grid-template-rows:repeat(4,60px);gap:5px}
.game2048 .row{display:grid;grid-template-columns:repeat(4,60px);gap:5px}
.game2048 .cell{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;border-radius:6px;background:#cdc1b4;color:#111}
.game2048 .cell.n2{background:#eee4da}
.game2048 .cell.n4{background:#ede0c8}
.game2048 .cell.n8{background:#f2b179;color:#fff}
.game2048 .cell.n16{background:#f59563;color:#fff}
.game2048 .cell.n32{background:#f67c5f;color:#fff}
.game2048 .cell.n64{background:#f65e3b;color:#fff}
.game2048 .cell.n128{background:#edcf72;color:#fff}
.game2048 .cell.n256{background:#edcc61;color:#fff}
.game2048 .cell.n512{background:#edc850;color:#fff}
.game2048 .cell.n1024{background:#edc53f;color:#fff}
.game2048 .cell.n2048{background:#edc22e;color:#fff}
/* исправление контраста полей */
.ud-card input,
.ud-card select,
.ud-card textarea,
.ud-card output,
.ud-card .result,
.ud-card #words-output {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}
/* активная игра занимает больше места */
.ud-card.game-active {
  transform: scale(1.2);
  z-index: 10;
  background: #fff;
  transition: transform 0.2s ease-in-out;
}

/* v8 tools panel scoped styles */
.tools-panel{position:fixed;right:16px;bottom:16px;width:380px;max-width:90vw;background:#fff;color:#111;border:1px solid #e6e6e6;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:none;flex-direction:column;z-index:9999;}
.tools-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #eee;background:#fff;}
.tools-title{font-weight:600}
.tools-tabs{display:flex;border-bottom:1px solid #eee;background:#fafafa}
.tools-tabs button{flex:1;padding:8px 10px;border:0;background:transparent;cursor:pointer}
.tools-tabs button.active{background:#fff;border-bottom:2px solid #007bff}
.tools-body{max-height:70vh;overflow:auto;padding:12px}
.tool{margin:12px 0}
.tool input,.tool textarea,.tool select{background:#fff !important;color:#111 !important;border:1px solid #ddd;border-radius:8px;padding:8px;width:100%}
.tool textarea{min-height:80px}
.btn{border:1px solid #ddd;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn.primary{border-color:#007bff}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.95)}
.tools-fab{position:fixed;right:16px;bottom:16px;background:#fff;color:#111;border:1px solid #e6e6e6;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:9998}
.tools-fab .ico{font-size:22px}
.tools-section-title{font-weight:600;margin-top:8px}
.game-collapsed .game-body{display:none}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.game-header .btn{padding:4px 8px}


/* чтобы клики по кнопкам вкладок точно проходили */
.tools-tabs button { pointer-events: auto; }

/* чтобы панель была поверх всего */
.tools-panel { z-index: 9999; }

/* чтобы плавающая кнопка была поверх перекрытий */
.tools-fab { z-index: 9998; }

.tools-panel { display: none; }
.tools-panel.open { display: flex; } /* показываем панель */




/* ===== Extracted from calculator.html ===== */
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
      background: linear-gradient(135deg, #062f1c, #0d4d2a);
      color: white;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    }

    .logo {
      font-size: 1.8rem;
      font-weight: bold;
      color: #ffd700;
      text-decoration: none;
      transition: transform 0.3s;
    }

    .logo:hover {
      transform: scale(1.05);
    }

    nav {
      display: flex;
      gap: 30px;
      align-items: center;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s, transform 0.3s;
      position: relative;
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background: #ffd700;
      transition: width 0.3s;
    }

    nav a:hover::after,
    nav a.active::after {
      width: 100%;
    }

    nav a:hover,
    nav a.active {
      color: #ffd700;
    }

    main {
      flex: 1;
      padding: 40px 20px;
    }

    .page-header {
      text-align: center;
      margin-bottom: 30px;
      animation: fadeInUp 0.8s ease;
    }

    .page-header h1 {
      font-size: 3rem;
      margin-bottom: 15px;
      background: linear-gradient(135deg, #ffd700, #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .page-header p {
      font-size: 1.1rem;
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
    }

    .calculator-container {
      max-width: 1200px;
      margin: 0 auto;
      animation: fadeInUp 0.8s ease 0.2s both;
    }

    .rates-info {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 215, 0, 0.2);
      padding: 20px;
      border-radius: 15px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .rates-display {
      font-size: 1.1rem;
      color: #ffd700;
    }

    .contact-buttons {
      display: flex;
      gap: 15px;
    }

    .contact-btn {
      padding: 10px 20px;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .contact-btn.telegram {
      background: rgba(0, 136, 204, 0.2);
      color: #00ccff;
      border: 1px solid #00ccff;
    }

    .contact-btn.telegram:hover {
      background: rgba(0, 136, 204, 0.3);
      transform: translateY(-2px);
    }

    .contact-btn.email {
      background: rgba(255, 215, 0, 0.2);
      color: #ffd700;
      border: 1px solid #ffd700;
    }

    .contact-btn.email:hover {
      background: rgba(255, 215, 0, 0.3);
      transform: translateY(-2px);
    }

    .services-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 215, 0, 0.1);
      padding: 20px;
      border-radius: 20px;
      margin-bottom: 30px;
    }

    .group {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      margin-bottom: 15px;
      overflow: hidden;
      border: 1px solid rgba(255, 215, 0, 0.15);
    }

    .group-head {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 18px 20px;
      background: rgba(255, 215, 0, 0.05);
      cursor: pointer;
      user-select: none;
      transition: background 0.3s;
    }

    .group-head:hover {
      background: rgba(255, 215, 0, 0.1);
    }

    .group-head .title {
      font-weight: 700;
      font-size: 1.2rem;
      flex-grow: 1;
      color: #ffd700;
    }

    .group-head .chev {
      margin-left: auto;
      transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
      width: 20px;
      height: 20px;
      fill: none;
      stroke: #ffd700;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .group-head.open .chev {
      transform: rotate(180deg);
    }

    .group-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      padding: 0 20px;
    }

    .group-body.open {
      padding: 20px;
    }

    .service-row {
      display: grid;
      grid-template-columns: 50px 1fr 150px 100px;
      gap: 15px;
      padding: 12px 10px;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .service-row:last-child {
      border-bottom: none;
    }

    .service-index {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.9rem;
      text-align: center;
    }

    .service-name {
      font-weight: 500;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.95);
    }

    .service-unit {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
      text-align: center;
    }

    .qty input {
      width: 100%;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255, 215, 0, 0.3);
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 1rem;
      text-align: center;
      transition: all 0.3s;
    }

    .qty input:focus {
      border-color: #ffd700;
      outline: none;
      background: rgba(255, 215, 0, 0.1);
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    .totals-container {
      position: sticky;
      bottom: 0;
      z-index: 100;
      background: rgba(255,255,255,0.08);
      box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
      border-radius: 20px 20px 0 0;
      padding: 25px 20px;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    @media (max-width: 1200px) {
      .totals-container {
        max-width: 100vw;
        border-radius: 0;
      }
    }

    .total-line {
      font-weight: 900;
      background: linear-gradient(135deg, #ffd700, #e5c100);
      color: #062f1c;
      padding: 15px 30px;
      border-radius: 50px;
      box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
      font-size: 1.3rem;
      text-align: center;
      flex: 1;
      min-width: 300px;
    }

    .reset-btn {
      background: rgba(255, 68, 68, 0.2);
      border: 2px solid #ff4444;
      padding: 15px 35px;
      border-radius: 50px;
      color: #ff6666;
      font-weight: 700;
      cursor: pointer;
      font-size: 1.1rem;
      transition: all 0.3s;
    }

    .reset-btn:hover {
      background: rgba(255, 68, 68, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
    }

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

    footer {
      background: rgba(0, 0, 0, 0.5);
      padding: 30px 40px;
      text-align: center;
      border-top: 1px solid rgba(255, 215, 0, 0.2);
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .footer-info {
      text-align: left;
    }

    .footer-info h3 {
      color: #ffd700;
      margin-bottom: 10px;
    }

    .footer-contacts {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .footer-contacts a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-contacts a:hover {
      color: #ffd700;
    }

    .copyright {
      width: 100%;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }

    .mobile-menu-toggle {
      display: none;
      background: transparent;
      border: none;
      color: #ffd700;
      font-size: 1.5rem;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      header {
        padding: 15px 20px;
      }

      .logo {
        font-size: 1.5rem;
      }

      nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        padding: 20px;
        gap: 15px;
      }

      nav.active {
        display: flex;
      }

      .mobile-menu-toggle {
        display: block;
      }

      .page-header h1 {
        font-size: 2.2rem;
      }

      .service-row {
        grid-template-columns: 40px 1fr 100px 80px;
        font-size: 0.9rem;
      }

      .rates-info {
        flex-direction: column;
        text-align: center;
      }

      .totals-container {
        flex-direction: column;
      }

      .total-line {
        width: 100%;
      }

      .reset-btn {
        width: 100%;
      }

      .footer-content {
        flex-direction: column;
        text-align: center;
      }

      .footer-info {
        text-align: center;
      }

      .footer-contacts {
        flex-direction: column;
        gap: 10px;
      }
    }

    @media (max-width: 480px) {
      .page-header h1 {
        font-size: 1.8rem;
      }

      .contact-buttons {
        flex-direction: column;
        width: 100%;
      }

      .contact-btn {
        width: 100%;
        justify-content: center;
      }

      .service-row {
        grid-template-columns: 30px 1fr;
        gap: 10px;
      }

      .service-unit,
      .qty {
        grid-column: 2;
      }
    }

    .main-padding-bottom {
      padding-bottom: 110px; /* Height of totals-container + some space */
    }

.tools-panel{display:none; position:fixed; right:16px; bottom:16px; width:min(960px, 92vw); max-height:90vh; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); flex-direction:column; padding:12px; z-index:9999;}
.tools-panel.open{display:flex;}
.tools-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tools-tabs{display:flex; gap:8px; padding:8px 0;}
.tools-tabs button{pointer-events:auto; padding:6px 10px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; cursor:pointer;}
.tools-tabs button.active{background:#eef2ff; border-color:#c7d2fe;}
.tools-content{overflow:auto; padding:4px;}
.tools-fab{position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:9999px; border:none; background:#111827; color:#fff; font-size:22px; line-height:48px; text-align:center; cursor:pointer; z-index:9998;}



/* ===== Extracted from contact.html ===== */
.contact-hero {
      padding: 60px 0;
    }

    .contact-layout {
      display: flex;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      margin-top: 50px;
    }
      /* NEW LAYOUT */
    .contact-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      gap: 30px;
    }

    .contact-cards-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .contact-card {
      flex: 1 1 calc(33.333% - 20px);
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--glass-bg);
      border-radius: var(--border-radius-md);
      padding: 20px;
    }

    .contact-card h3 {
      font-size: var(--font-size-2xl);
      margin-bottom: 15px;
      color: var(--primary-gold);
    }

    .contact-card a {
      color: var(--text-primary);
      text-decoration: none;
      transition: color var(--transition-normal);
      display: block;
      margin-bottom: 10px;
      font-size: var(--font-size-lg);
    }

    .contact-card a:hover {
      color: var(--primary-gold);
    }

    .business-hours {
      background: var(--glass-bg-active);
      border: 1px solid var(--primary-gold);
      padding: 30px;
      border-radius: var(--border-radius-md);
      margin-top: 10px;
      width: 100%;
    }

    .business-hours h3 {
      color: var(--primary-gold);
      margin-bottom: 20px;
      text-align: center;
    }

    .hours-grid {
      display: grid;
      gap: 10px;
    }

    .hours-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hours-row:last-child {
      border-bottom: none;
    }

    .day {
      color: var(--text-secondary);
    }

    .time {
      color: var(--text-primary);
      font-weight: 500;
    }

    @media (max-width: 768px) {
      .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .contact-card {
        flex: 1 1 100%;
      }
    }

.tools-panel{display:none; position:fixed; right:16px; bottom:16px; width:min(960px, 92vw); max-height:90vh; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); flex-direction:column; padding:12px; z-index:9999;}
.tools-panel.open{display:flex;}
.tools-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tools-tabs{display:flex; gap:8px; padding:8px 0;}
.tools-tabs button{pointer-events:auto; padding:6px 10px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; cursor:pointer;}
.tools-tabs button.active{background:#eef2ff; border-color:#c7d2fe;}
.tools-content{overflow:auto; padding:4px;}
.tools-fab{position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:9999px; border:none; background:#111827; color:#fff; font-size:22px; line-height:48px; text-align:center; cursor:pointer; z-index:9998;}



/* ===== Extracted from index.html ===== */
.hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: calc(100vh - 140px);
      padding: 40px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
      animation: rotate 30s linear infinite;
      will-change: transform;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      margin-bottom: 20px;
      background: linear-gradient(135deg, var(--primary-gold), var(--text-primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeInUp 1s ease;
      font-weight: 700;
      line-height: 1.2;
    }

        .games-page .ud-wrap h1 {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      margin-bottom: 20px;
      background: linear-gradient(135deg, var(--primary-gold), var(--text-primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeInUp 1s ease;
      font-weight: 700;
      line-height: 1.2;
    }



        .tools-page .ud-wrap h1 {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      margin-bottom: 20px;
      background: linear-gradient(135deg, var(--primary-gold), var(--text-primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeInUp 1s ease;
      font-weight: 700;
      line-height: 1.2;
    }
    

    .hero p {
      font-size: clamp(1.1rem, 2.5vw, 1.3rem);
      margin-bottom: 40px;
      opacity: 0.9;
      animation: fadeInUp 1s ease 0.2s both;
      color: var(--text-secondary);
    }

    .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeInUp 1s ease 0.4s both;
    }

    .features-section {
      padding: 80px 0;
      background: rgba(0, 0, 0, 0.2);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }

    .feature-icon {
      font-size: 3rem;
      margin-bottom: 20px;
      display: block;
    }

    #pulseChart {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px;
      opacity: 0.3;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .hero {
        min-height: calc(100vh - 120px);
        padding: 20px;
      }

      .cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
      }

      .features-section {
        padding: 60px 0;
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

.tools-panel{display:none; position:fixed; right:16px; bottom:16px; width:min(960px, 92vw); max-height:90vh; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); flex-direction:column; padding:12px; z-index:9999;}
.tools-panel.open{display:flex;}
.tools-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tools-tabs{display:flex; gap:8px; padding:8px 0;}
.tools-tabs button{pointer-events:auto; padding:6px 10px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; cursor:pointer;}
.tools-tabs button.active{background:#eef2ff; border-color:#c7d2fe;}
.tools-content{overflow:auto; padding:4px;}
.tools-fab{position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:9999px; border:none; background:#111827; color:#fff; font-size:22px; line-height:48px; text-align:center; cursor:pointer; z-index:9998;}



/* ===== Extracted from portfolio.html ===== */
.portfolio-hero {
      padding: 60px 0;
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }

    .portfolio-card {
      position: relative;
      overflow: hidden;
    }

    .portfolio-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, transparent 0%, rgba(255, 215, 0, 0.1) 100%);
      opacity: 0;
      transition: opacity var(--transition-normal);
    }

    .portfolio-card:hover::after {
      opacity: 1;
    }

    .portfolio-details {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid rgba(255, 215, 0, 0.2);
      font-size: var(--font-size-sm);
      color: var(--text-muted);
    }

    .portfolio-stats {
      background: var(--glass-bg-active);
      border: 1px solid var(--primary-gold);
      padding: 40px 20px;
      border-radius: var(--border-radius-lg);
      margin: 50px 0;
      text-align: center;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      margin-top: 30px;
    }

    .stat-item {
      text-align: center;
    }

    .stat-number {
      font-size: var(--font-size-5xl);
      font-weight: 700;
      color: var(--primary-gold);
      display: block;
    }

    .stat-label {
      color: var(--text-secondary);
      margin-top: 5px;
    }

    .testimonials {
      margin: 50px 0;
    }

    .testimonial-card {
      background: var(--glass-bg);
      border-left: 4px solid var(--primary-gold);
      padding: 30px;
      margin: 20px 0;
      border-radius: var(--border-radius-md);
      position: relative;
    }

    .testimonial-card::before {
      content: '"';
      font-size: 4rem;
      color: var(--primary-gold);
      position: absolute;
      top: -10px;
      left: 20px;
      line-height: 1;
    }

    .testimonial-text {
      margin-bottom: 20px;
      font-style: italic;
      padding-left: 20px;
    }

    .testimonial-author {
      text-align: right;
      color: var(--primary-gold);
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .portfolio-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat-number {
        font-size: var(--font-size-4xl);
      }
    }

.tools-panel{display:none; position:fixed; right:16px; bottom:16px; width:min(960px, 92vw); max-height:90vh; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); flex-direction:column; padding:12px; z-index:9999;}
.tools-panel.open{display:flex;}
.tools-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tools-tabs{display:flex; gap:8px; padding:8px 0;}
.tools-tabs button{pointer-events:auto; padding:6px 10px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; cursor:pointer;}
.tools-tabs button.active{background:#eef2ff; border-color:#c7d2fe;}
.tools-content{overflow:auto; padding:4px;}
.tools-fab{position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:9999px; border:none; background:#111827; color:#fff; font-size:22px; line-height:48px; text-align:center; cursor:pointer; z-index:9998;}



/* ===== Extracted from services.html ===== */
.services-hero {
      padding: 60px 0;
      text-align: center;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }

    .service-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: var(--primary-dark);
    }

    .service-card ul {
      text-align: left;
      margin-top: 15px;
      list-style: none;
      padding: 0;
    }

    .service-card ul li {
      padding: 8px 0;
      padding-left: 25px;
      position: relative;
      font-size: 0.95rem;
      opacity: 0.8;
    }

    .service-card ul li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--primary-gold);
      font-weight: bold;
    }

    .pricing-hint {
      background: var(--glass-bg-active);
      border: 1px solid var(--primary-gold);
      padding: 20px;
      border-radius: var(--border-radius-md);
      margin-top: 40px;
      text-align: center;
    }

    .pricing-hint h3 {
      color: var(--primary-gold);
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      .services-grid {
        grid-template-columns: 1fr;
      }
    }

.tools-panel{display:none; position:fixed; right:16px; bottom:16px; width:min(960px, 92vw); max-height:90vh; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); flex-direction:column; padding:12px; z-index:9999;}
.tools-panel.open{display:flex;}
.tools-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tools-tabs{display:flex; gap:8px; padding:8px 0;}
.tools-tabs button{pointer-events:auto; padding:6px 10px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; cursor:pointer;}
.tools-tabs button.active{background:#eef2ff; border-color:#c7d2fe;}
.tools-content{overflow:auto; padding:4px;}
.tools-fab{position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:9999px; border:none; background:#111827; color:#fff; font-size:22px; line-height:48px; text-align:center; cursor:pointer; z-index:9998;}

/* ================= Generated utility classes for former inline styles ================= */
.u-4e15538c { margin-left: 20px; }
.u-58b32df8 { align-items: center; background: rgba(0,0,0,0.5); display: none; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; width: 100vw; z-index: 9999; }
.u-74eb9e2d { background: #181818; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); font-family: inherit; max-height: 80vh; max-width: 90vw; overflow: auto; padding: 30px 40px; }
.u-c29b9d86 { color: #ffd700; margin-top: 0; }
.u-518b8679 { font-size: 1.1em; list-style: none; margin: 20px 0; padding: 0; text-align: left; }
.u-8ced3aad { margin-top: 10px; }
.u-0de1f981 { margin-top: 20px; }
.u-ee3b94b5 { background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-height: 80vh; max-width: 90vw; overflow: auto; padding: 30px 40px; }
.u-b8f7c9cf { margin-top: 0; }
.u-27379280 { display: flex; flex-wrap: wrap; gap: 40px; }
.u-273e413e { margin-bottom: 10px; }
.u-1ecbdc25 { font-size: 1.1em; list-style: none; margin: 0; padding: 0; }
.u-c1a02181 { border-bottom: 1px solid #333; color: #ffd700; padding: 4px 0; }

.u-1a2c2a6c { height: 200px; width: 100%; }
.u-a3161db2 { margin-top: 15px; }
.u-822cd72a { color: var(--primary-gold); margin-bottom: 30px; text-align: center; }
.u-eb8cb6f6 { margin-top: 50px; text-align: center; }
.u-c850adf3 { color: var(--primary-gold); margin-bottom: 20px; }


/* --- Games half-screen mode --- */
.tools-panel.games-mode {
  height: 50vh;
  top: auto;
  bottom: 0;
}
@media (max-width: 768px){
  .tools-panel.games-mode { height: 60vh; }
}

/* --- End: assets/css/shared-styles.css --- */

/* --- Begin: assets/css/tools.css --- */

/* --- End: assets/css/tools.css --- */




.ud-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.ud-grid{grid-template-columns:1fr}}
.ud-card{background:#fff;border:1px solid #e7e7e7;border-radius:10px;padding:10px}
.ud-row{display:flex;gap:10px;align-items:center;margin:6px 0}
.ud-row>*{flex:1}
.ud-note{font-size:.9rem;color:#666}
.ud-title{font-weight:600;margin:0 0 8px 0}
.ud-btn{padding:8px 12px;border:1px solid #ccc;border-radius:8px;background:#f7f7f7;cursor:pointer}
.ud-input,.ud-select,.ud-textarea{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:8px;box-sizing:border-box}
.ud-textarea{min-height:84px;resize:vertical}
details.ud-acc{border:1px solid #eaeaea;border-radius:10px;margin:10px 0;background:#fff}
details.ud-acc>summary{cursor:pointer;padding:10px 12px;font-weight:600;list-style:none}
details.ud-acc[open]>summary{border-bottom:1px solid #eee}
details.ud-acc .ud-card{border:none;padding:10px 12px}
/* game visuals */
#game2048{position:relative;width:300px;height:300px;margin:auto;background:#bbada0;padding:6px;border-radius:8px;box-sizing:content-box}
.g2048-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px;width:100%;height:100%}
.g2048-cell,.g2048-tile{width:100%;height:100%;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px}
.g2048-cell{background:#cdc1b4}
.g2048-tile{color:#776e65}
.g2048-tile.v2{background:#eee4da}
.g2048-tile.v4{background:#ede0c8}
.g2048-tile.v8{background:#f2b179;color:#f9f6f2}
.g2048-tile.v16{background:#f59563;color:#f9f6f2}
.g2048-tile.v32{background:#f67c5f;color:#f9f6f2}
.g2048-tile.v64{background:#f65e3b;color:#f9f6f2}
.g2048-tile.v128{background:#edcf72;color:#f9f6f2;font-size:20px}
.g2048-tile.v256{background:#edcc61;color:#f9f6f2;font-size:20px}
.g2048-tile.v512{background:#edc850;color:#f9f6f2;font-size:20px}
.g2048-tile.v1024{background:#edc53f;color:#f9f6f2;font-size:18px}
.g2048-tile.v2048{background:#edc22e;color:#f9f6f2;font-size:18px}
#tetris-canvas{background:#fff}
#ms-board{display:grid;gap:2px}
#ms-board .cell{width:28px;height:28px;background:#f1f1f1;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#ms-board .cell.revealed{background:#e6e6e6}
/* bottom nav fabs (link buttons) */
.fab{position:fixed;bottom:24px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;text-decoration:none;z-index:2147483647;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.fab-tools{right:24px;background:#111}
.fab-games{right:90px;background:#1f6feb}