:root{--dio-primary:#0c0e12;--dio-accent:#f05a28;--dio-gold:#ff8a50;--dio-font-body:"Onest", sans-serif;--dio-font-size:16px;--dio-font-heading:"Golos Text", sans-serif;--dio-header-bg:var(--dio-primary,#0d1b2a);--dio-header-text:#ffffff;--dio-header-sub:#94a3b8;--dio-header-link:#cbd5e1;--dio-header-link-hover:#ffffff;--dio-header-border:rgba(255,255,255,.18);--dio-header-hover-bg:rgba(255,255,255,.08);--bg:#f8fafc;--surface:#f1f5f9;--card:#ffffff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--line:#f1f5f9;--accent:#f05a28;--accent-h:#f05a28;--accent-soft:#e6f7fa;--on-accent:#000000;--link:#0d6b7a;--focus:#ff8a50;--success:#166534;--danger:#b91c1c;}
/* DioCMS custom_css */
/* ========================================================
   21MM SCI-TECH MAGAZINE THEME FOR DIOCMS
   Authentic Branding: Orange #F05A28 | Dark & Light Modes
   ======================================================== */

/* --- DARK THEME VARIABLES (Default & [data-theme="dark"]) --- */
:root,
html[data-theme="dark"],
html:not([data-theme="light"]) {
  --mm-orange: #F05A28;
  --mm-orange-light: #FF7A3D;
  --mm-orange-glow: rgba(240, 90, 40, 0.4);
  --mm-dark: #0c0e12;
  --mm-surface: #141722;
  --mm-card: #181c2b;
  --mm-card-hover: #1f2538;
  --mm-border: rgba(255, 255, 255, 0.09);
  --mm-border-hover: rgba(240, 90, 40, 0.45);

  --bg: #0c0e12;
  --card: #141722;
  --surface: #181c2b;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f8fafc;
  --muted: #94a3b8;
  --dio-bg: #0c0e12;
  --dio-card: #141722;
  --dio-text: #f8fafc;
  --dio-border: rgba(255, 255, 255, 0.09);
  --accent: #F05A28;
  --dio-accent: #F05A28;
  --teal: #00e5ff;
}

/* --- LIGHT THEME VARIABLES ([data-theme="light"]) --- */
html[data-theme="light"] {
  --mm-orange: #e04a1b;
  --mm-orange-light: #f05a28;
  --mm-orange-glow: rgba(224, 74, 27, 0.25);
  --mm-dark: #f8fafc;
  --mm-surface: #ffffff;
  --mm-card: #ffffff;
  --mm-card-hover: #f1f5f9;
  --mm-border: #e2e8f0;
  --mm-border-hover: rgba(240, 90, 40, 0.5);

  --bg: #f8fafc;
  --card: #ffffff;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --dio-bg: #f8fafc;
  --dio-card: #ffffff;
  --dio-text: #0f172a;
  --dio-border: #e2e8f0;
  --accent: #e04a1b;
  --dio-accent: #e04a1b;
  --teal: #0284c7;
}

/* --- BODY STYLES FOR DARK & LIGHT --- */
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body,
html:not([data-theme="light"]) body {
  background-color: #0c0e12 !important;
  background-image: 
    radial-gradient(circle at 50% -100px, rgba(240, 90, 40, 0.16) 0%, transparent 65%),
    radial-gradient(circle at 90% 400px, rgba(139, 92, 246, 0.09) 0%, transparent 50%),
    radial-gradient(circle at 10% 800px, rgba(0, 229, 255, 0.06) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] body {
  background-color: #f8fafc !important;
  background-image: 
    radial-gradient(circle at 50% -100px, rgba(240, 90, 40, 0.08) 0%, transparent 65%),
    radial-gradient(circle at 90% 400px, rgba(139, 92, 246, 0.04) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  color: #0f172a !important;
}

/* ========================================================
   FLUSH HEADER AND ARTICLE WIDTH ALIGNMENT (1200px)
   ======================================================== */
.th-bar--header {
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

html[data-theme="dark"] .th-bar--header,
html:not([data-theme="light"]) .th-bar--header {
  background: rgba(12, 14, 18, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="light"] .th-bar--header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* EXACT FLUSH CONTAINER WIDTH FOR HEADER & CONTENT */
.th-bar--header .th-bar__inner,
.th-bar--hero .th-bar__inner,
.main,
main.main,
main,
.th-page,
.article-container,
.article-wrapper,
.hub-container,
.portal-container,
.news-detail,
.article-detail {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.th-logo--text {
  display: none !important;
}

/* Navigation Menu Links */
html[data-theme="dark"] .th-menu a,
html:not([data-theme="light"]) .th-menu a {
  color: #cbd5e1 !important;
  font-family: 'Golos Text', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

html[data-theme="light"] .th-menu a {
  color: #334155 !important;
  font-family: 'Golos Text', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.th-menu a:hover,
.th-menu a.active {
  color: #ffffff !important;
  background: rgba(240, 90, 40, 0.18) !important;
  border-radius: 8px !important;
}

html[data-theme="light"] .th-menu a:hover,
html[data-theme="light"] .th-menu a.active {
  color: #e04a1b !important;
  background: rgba(240, 90, 40, 0.1) !important;
}

/* Hide default generic welcome banner */
.th-welcome, .dio-welcome-banner, section.hero {
  display: none !important;
}

/* (убрано: дефолтная grid-обёртка карточек — конфликтовала с порталом) */

/* Individual News Cards */
main.main article,
.news-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative !important;
}

html[data-theme="dark"] main.main article,
html:not([data-theme="light"]) main.main article {
  background: #141722 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] main.main article {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

main.main article:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(240, 90, 40, 0.5) !important;
}

html[data-theme="dark"] main.main article:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(240, 90, 40, 0.22) !important;
}

html[data-theme="light"] main.main article:hover {
  box-shadow: 0 12px 30px rgba(240, 90, 40, 0.15) !important;
}

/* Card Images */
main.main article a:first-child {
  height: 180px !important;
  overflow: hidden !important;
  background: #0a0c10 !important;
}

main.main article a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

main.main article:hover a:first-child img {
  transform: scale(1.05) !important;
}

/* Card Body */
main.main article > div {
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

/* Article Card Title */
main.main article a:nth-child(2) {
  font-family: 'Golos Text', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  transition: color 0.2s ease !important;
  margin-top: 4px !important;
}

html[data-theme="dark"] main.main article a:nth-child(2) {
  color: #ffffff !important;
}

html[data-theme="light"] main.main article a:nth-child(2) {
  color: #0f172a !important;
}

main.main article a:nth-child(2):hover {
  color: #F05A28 !important;
}

/* Article Summary */
main.main article > div > div:nth-child(3) {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
}

html[data-theme="dark"] main.main article > div > div:nth-child(3) {
  color: #94a3b8 !important;
}

html[data-theme="light"] main.main article > div > div:nth-child(3) {
  color: #475569 !important;
}

/* Russian Hyphenation and Justification for Articles */
.article-body, 
.news-detail__content, 
.dio-page-content p, 
.article-content p, 
.th-text p, 
.mm-content-wrap p,
.article-container p {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  line-height: 1.8 !important;
  font-size: 16.5px !important;
}

html[data-theme="dark"] .article-body,
html[data-theme="dark"] .news-detail__content,
html[data-theme="dark"] .dio-page-content p,
html[data-theme="dark"] .article-container p {
  color: #cbd5e1 !important;
}

html[data-theme="light"] .article-body,
html[data-theme="light"] .news-detail__content,
html[data-theme="light"] .dio-page-content p,
html[data-theme="light"] .article-container p {
  color: #1e293b !important;
}

/* Mobile Bottom Navigation Dock */
.mm-bottom-dock {
  display: none;
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(15, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 7px 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(240, 90, 40, 0.2);
  width: min(94vw, 430px);
  justify-content: space-around;
  align-items: center;
}

@media (max-width: 768px) {
  .mm-bottom-dock {
    display: flex;
  }
  body {
    padding-bottom: 78px !important;
  }
}

.mm-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 20px;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
}

.mm-dock-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mm-dock-item:hover, .mm-dock-item.active {
  color: #F05A28;
  background: rgba(240, 90, 40, 0.14);
}

.mm-dock-item.active svg {
  stroke: #F05A28;
  filter: drop-shadow(0 0 6px rgba(240, 90, 40, 0.7));
}

/* Force High Contrast for Embedded Video Players in both Light and Dark Themes */
.reel-feature-box,
.reel-feature-box h3,
.reel-feature-box #reelShotTitle,
.reel-info-col h3,
.reels-player-card,
.reels-player-card h4 {
  color: #ffffff !important;
}

.reel-feature-box p,
.reel-feature-box #reelShotDesc,
.reel-info-col p,
.reels-player-card p {
  color: #c8e6c9 !important;
}

/* Mobile Header Polishing */
@media (max-width: 768px) {
  .th-account--register {
    display: none !important;
  }
  .th-search {
    max-width: 100px !important;
  }
  .th-search input {
    width: 70px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  .th-search input:focus {
    width: 110px !important;
  }
  .th-bar--header .th-bar__inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 6px !important;
  }
}