/* YapPing v2.0 - Minimal Design Patch 
   Применяется ПОВЕРХ style.css для обновления дизайна */

/* Override variables for cleaner look */
:root {
  --bg: #ffffff !important;
  --surface: #ffffff !important;
  --surface2: #f8f9fa !important;
  --border: #e1e4e8 !important;
  
  --text: #0f1419 !important;
  --text2: #536471 !important;
  --text3: #8b98a5 !important;
  
  --accent: #ff6b42 !important;
  --accent-h: #e8441a !important;
  --accent-light: #fff5f2 !important;
  
  --fh: 'Inter', sans-serif !important;
  --fb: 'Inter', sans-serif !important;
  --tr: .15s cubic-bezier(.4,0,.2,1) !important;
  --sw: 275px !important;
}

[data-theme=dark] {
  --bg: #000000 !important;
  --surface: #16181c !important;
  --surface2: #1e2126 !important;
  --border: #2f3336 !important;
  
  --text: #e7e9ea !important;
  --text2: #71767b !important;
  --text3: #53585e !important;
  
  --accent: #ff6b42 !important;
  --accent-h: #ff8461 !important;
  --accent-light: #2a1510 !important;
}

/* Better font rendering */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 15px;
  line-height: 1.5;
}

/* Improved scrollbar */
::-webkit-scrollbar {
  width: 6px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text3) !important;
}

/* Cleaner buttons */
.btn {
  border-radius: 99px !important;
}

.btn-primary:hover {
  box-shadow: var(--sh-lg) !important;
}

/* Better auth page */
.auth-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg) !important;
}

.auth-art {
  display: none !important;
}

.auth-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.field input:focus, 
.field textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Cleaner feed header */
.feed-header {
  background: rgba(255, 255, 255, 0.85) !important;
}

[data-theme=dark] .feed-header {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Mobile improvements */
.mobile-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
}

[data-theme=dark] .mobile-nav {
  background: rgba(0, 0, 0, 0.95) !important;
}

.mobile-nav-btn {
  border-radius: 99px !important;
}