/**
 * Modern Clean Theme for OJS 3.5
 * Blazing-fast academic journal theme using native system UI fonts
 * Copyright (c) 2026 LPPM STMIK Antar Bangsa
 */

/* ==========================================================================
   1. Design Tokens & Global Reset
   ========================================================================== */
:root {
  --mod-primary: #1e40af;
  --mod-primary-hover: #1d4ed8;
  --mod-primary-soft: #eff6ff;
  --mod-primary-border: #bfdbfe;
  --mod-accent: #0ea5e9;
  --mod-accent-hover: #0284c7;
  --mod-accent-soft: #f0f9ff;
  --mod-success: #10b981;
  --mod-success-soft: #ecfdf5;

  --mod-text-main: #0f172a;
  --mod-text-secondary: #334155;
  --mod-text-muted: #64748b;
  --mod-text-light: #94a3b8;

  --mod-bg-page: #f8fafc;
  --mod-bg-card: #ffffff;
  --mod-bg-subtle: #f1f5f9;

  --mod-border: #e2e8f0;
  --mod-border-light: #edf2f7;

  --mod-radius-sm: 6px;
  --mod-radius: 10px;
  --mod-radius-lg: 16px;
  --mod-radius-full: 9999px;

  --mod-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mod-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --mod-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --mod-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --mod-shadow-card: 0 12px 24px -4px rgb(15 23 42 / 0.06), 0 4px 8px -2px rgb(15 23 42 / 0.03);

  --mod-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --mod-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mod-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Base Typography & Body */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body {
  font-family: var(--mod-font) !important;
  background-color: var(--mod-bg-page) !important;
  color: var(--mod-text-main) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.pkp_site_name,
.pkp_navigation_primary,
.page_title {
  font-family: var(--mod-font) !important;
  letter-spacing: -0.015em;
  color: var(--mod-text-main);
}

a {
  color: var(--mod-primary);
  transition: var(--mod-transition);
}

a:hover, a:focus {
  color: var(--mod-primary-hover);
}

/* ==========================================================================
   2. Page Structure & Container
   ========================================================================== */
.pkp_structure_page {
  background-color: var(--mod-bg-page) !important;
  min-height: 100vh;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Neutralize legacy clearfix and vertical divider lines from parent default theme */
.pkp_structure_content:before,
.pkp_structure_content:after,
.pkp_structure_main:before,
.pkp_structure_main:after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

.pkp_structure_content {
  max-width: 1240px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 20px !important;
  box-sizing: border-box !important;
}

/* Standard full-width main container */
.pkp_structure_main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 36px !important;
    align-items: start !important;
  }

  /* Main content MUST be in column 1 */
  .pkp_structure_content.has_sidebar > .pkp_structure_main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sidebar MUST be in column 2 */
  .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 991px) {
  .pkp_structure_content.has_sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .pkp_structure_main,
  .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   3. Header & Navigation Bar
   ========================================================================== */
/* ==========================================================================
   3. Ultra-Modern Header & Navigation Bar (Prestigious Maroon Academic Tone)
   ========================================================================== */
.pkp_structure_head,
.dome_header_nav {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #580d19 0%, #740a0a 55%, #630c18 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 20px rgba(88, 13, 25, 0.28) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.dome_header_inner {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

/* 3.1 Brand Column (Left) - Equalized with Right Column for True Nav Symmetry */
.dome_brand_col {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.dome_brand_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.dome_brand_symbol {
  font-size: 1.5rem !important;
  color: #fbbf24 !important; /* Elegant Warm Gold Star */
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
}

.dome_brand_text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.dome_brand_title {
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

.dome_brand_org {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 3.2 Floating Pill Navigation Bar (Center) */
.dome_center_nav {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dome_pill_nav_bar {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.24) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--mod-radius-full) !important;
  padding: 4px 6px !important;
  gap: 3px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.dome_pill_nav_bar ul.dome_pill_menu {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li > a:hover,
.dome_pill_nav_bar ul.dome_pill_menu > li.current > a,
.dome_pill_nav_bar ul.dome_pill_menu > li.dome_dropdown_open > a {
  background: #ffffff !important;
  color: #740a0a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* Dropdown Submenu */
.dome_pill_nav_bar ul.dome_pill_menu > li {
  position: relative !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li.has_submenu > a {
  cursor: pointer !important;
  user-select: none !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li ul {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  min-width: 220px !important;
  list-style: none !important;
  z-index: 99999 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateY(-4px);
}

/* Invisible hover bridge to eliminate dead zone between li and ul */
.dome_pill_nav_bar ul.dome_pill_menu > li ul::before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  display: block !important;
}

/* Open state on hover, focus-within, and click/touch (.dome_dropdown_open) */
.dome_pill_nav_bar ul.dome_pill_menu > li:hover > ul,
.dome_pill_nav_bar ul.dome_pill_menu > li:focus-within > ul,
.dome_pill_nav_bar ul.dome_pill_menu > li.dome_dropdown_open > ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.dome_pill_nav_bar ul.dome_pill_menu > li ul li a:hover,
.dome_pill_nav_bar ul.dome_pill_menu > li ul li a:focus {
  background: #fdf2f4 !important;
  color: #740a0a !important;
  transform: translateX(4px) !important;
}

/* Search Icon inside pill bar */
.dome_search_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-size: 0.8125rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.dome_search_btn:hover {
  background: #ffffff !important;
  color: #740a0a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* 3.3 User Actions Column (Right) */
.dome_user_col {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.dome_user_pills {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

.dome_user_pills li {
  margin: 0 !important;
  padding: 0 !important;
}

.dome_user_pills li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 18px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Register (Glass White Pill) */
.dome_user_pills li a[href*="register"] {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px) !important;
}

.dome_user_pills li a[href*="register"]:hover {
  border-color: #ffffff !important;
  color: #740a0a !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Login (Solid White Pill with Maroon Text) */
.dome_user_pills li a[href*="login"] {
  background: #ffffff !important;
  color: #740a0a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.dome_user_pills li a[href*="login"]:hover {
  background: #fef2f2 !important;
  color: #580d19 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

/* User Profile (when logged in) */
.dome_user_pills li.profile a {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

/* Hide old header wrappers if any residual markup */
.pkp_site_name_wrapper,
.pkp_navigation_primary_row {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

@media (max-width: 991px) {
  .dome_header_inner {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 10px 16px !important;
  }

  .dome_center_nav {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }
}

/* Search Link */
.pkp_navigation_search_wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-full) !important;
  text-decoration: none !important;
  transition: var(--mod-transition) !important;
}

.pkp_navigation_search_wrapper a:hover {
  background: #ffffff !important;
  color: var(--mod-primary) !important;
  border-color: var(--mod-primary-border) !important;
}

/* ==========================================================================
   4. Current Issue & Issue Details Hero
   ========================================================================== */
.current_issue,
.page_issue .obj_issue_toc {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-lg) !important;
  padding: 32px !important;
  margin-bottom: 32px !important;
  box-shadow: var(--mod-shadow-sm) !important;
}

.current_issue > h2 {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--mod-accent) !important;
  margin: 0 0 8px 0 !important;
}

.current_issue_title {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--mod-text-main) !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.02em !important;
}

.obj_issue_toc .heading {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--mod-border-light) !important;
}

@media (max-width: 640px) {
  .obj_issue_toc .heading {
    grid-template-columns: 1fr !important;
  }
}

.obj_issue_toc .heading .cover img {
  max-width: 180px !important;
  height: auto !important;
  border-radius: var(--mod-radius) !important;
  box-shadow: var(--mod-shadow-md) !important;
  border: 1px solid var(--mod-border) !important;
}

.obj_issue_toc .heading .pub_id.doi {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: var(--mod-primary-soft) !important;
  border: 1px solid var(--mod-primary-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  font-size: 0.875rem !important;
  margin: 12px 0 !important;
}

.obj_issue_toc .heading .pub_id.doi .type {
  font-weight: 700 !important;
  color: var(--mod-primary) !important;
}

.obj_issue_toc .heading .pub_id.doi .id a {
  color: var(--mod-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.obj_issue_toc .heading .published {
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
  margin-top: 6px !important;
}

/* ==========================================================================
   5. Section Headers & Article Cards
   ========================================================================== */
.obj_issue_toc .sections .section h3,
.page_issue .sections .section h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 32px 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.obj_issue_toc .sections .section h3::before,
.page_issue .sections .section h3::before {
  content: "" !important;
  width: 4px !important;
  height: 20px !important;
  background: var(--mod-primary) !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

.cmp_article_list.articles {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.cmp_article_list.articles > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Article Summary Card */
.obj_article_summary {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 22px 26px !important;
  box-shadow: var(--mod-shadow-xs) !important;
  transition: var(--mod-transition) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.obj_article_summary:hover {
  border-color: var(--mod-primary-border) !important;
  box-shadow: var(--mod-shadow-card) !important;
  transform: translateY(-2px) !important;
}

/* Article Title */
.obj_article_summary .title {
  margin: 0 !important;
  padding: 0 !important;
}

.obj_article_summary .title a {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--mod-text-main) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.obj_article_summary .title a:hover {
  color: var(--mod-primary) !important;
}

/* Article Meta (Authors, Pages, Date) */
.obj_article_summary .meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.875rem !important;
}

.obj_article_summary .authors {
  color: var(--mod-text-secondary) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.obj_article_summary .pages,
.obj_article_summary .published {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  background: var(--mod-bg-subtle) !important;
  color: var(--mod-text-muted) !important;
  border-radius: var(--mod-radius-sm) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

/* Article Metrics Strip (Abstract Views, PDF Downloads, DOI) */
.modern_article_metrics_strip {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px 8px !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: #334155 !important;
  margin: 4px 0 6px 0 !important;
  font-family: inherit !important;
}

.modern_article_metrics_strip .metric_item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.modern_article_metrics_strip .metric_label {
  color: #334155 !important;
  font-weight: 500 !important;
}

.modern_article_metrics_strip .metric_val {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.modern_article_metrics_strip .metric_sep {
  color: #64748b !important;
  margin: 0 1px !important;
}

/* 1. Bar Chart Icon (Abstract Views) */
.modern_article_metrics_strip .metric_chart_icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #059669 !important;
  vertical-align: middle !important;
}

/* 2. Download Badge Icon (PDF Downloads) */
.modern_article_metrics_strip .metric_dl_badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  background-color: #0284c7 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  vertical-align: middle !important;
}

/* 3. Globe Icon (DOI) */
.modern_article_metrics_strip .metric_globe_icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0284c7 !important;
  vertical-align: middle !important;
}

/* DOI link in amber / orange matching screenshot */
.modern_article_metrics_strip .metric_doi_link {
  color: #d97706 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.modern_article_metrics_strip .metric_doi_link:hover {
  color: #b45309 !important;
  text-decoration: none !important;
}

.modern_article_metrics_strip .metric_doi_empty {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* Enhancements on single article view */
.obj_article_details .modern_article_metrics_strip {
  margin: 14px 0 22px 0 !important;
  padding: 8px 16px !important;
  background: var(--mod-bg-subtle, #f8fafc) !important;
  border: 1px solid var(--mod-border, #e2e8f0) !important;
  border-radius: var(--mod-radius-sm, 8px) !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* Galley PDF Action Button */
.obj_article_summary .galleys_links,
.obj_article_details .galleys_links {
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.obj_galley_link.pdf,
.galleys_links .obj_galley_link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  background: var(--mod-primary) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: var(--mod-radius-sm) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(30, 64, 175, 0.2) !important;
  transition: var(--mod-transition) !important;
}

.obj_galley_link.pdf:hover,
.galleys_links .obj_galley_link:hover {
  background: var(--mod-primary-hover) !important;
  box-shadow: 0 4px 8px rgba(30, 64, 175, 0.3) !important;
  transform: translateY(-1px) !important;
}

.obj_galley_link.pdf::before,
.galleys_links .obj_galley_link::before {
  content: "\f1c1" !important;
  font-family: "FontAwesome" !important;
  font-size: 0.875rem !important;
}

/* View All Issues Button */
.read_more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  margin-top: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-full) !important;
  color: var(--mod-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  box-shadow: var(--mod-shadow-xs) !important;
  transition: var(--mod-transition) !important;
}

.read_more:hover {
  background: var(--mod-primary-soft) !important;
  border-color: var(--mod-primary-border) !important;
  color: var(--mod-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   6. Article Details Page
   ========================================================================== */
.page_article {
  background: var(--mod-bg-page) !important;
}

/* Breadcrumbs */
.cmp_breadcrumbs {
  margin-bottom: 24px !important;
}

.cmp_breadcrumbs ol {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
}

.cmp_breadcrumbs li a {
  color: var(--mod-text-muted) !important;
  text-decoration: none !important;
}

.cmp_breadcrumbs li a:hover {
  color: var(--mod-primary) !important;
}

.cmp_breadcrumbs .separator {
  color: var(--mod-border) !important;
}

.cmp_breadcrumbs li.current {
  color: var(--mod-text-main) !important;
  font-weight: 600 !important;
}

/* Article Hero Title */
.obj_article_details .page_title {
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--mod-text-main) !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 28px !important;
}

@media (max-width: 640px) {
  .obj_article_details .page_title {
    font-size: 1.5rem !important;
  }
}

/* 2-Column Article Grid */
@media (min-width: 992px) {
  .obj_article_details .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 36px !important;
    align-items: start !important;
  }

  .obj_article_details .main_entry {
    min-width: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  .obj_article_details .entry_details {
    width: 100% !important;
    float: none !important;
  }
}

/* Authors List */
.obj_article_details .item.authors ul.authors {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.obj_article_details .item.authors li {
  font-size: 1.0625rem !important;
}

.obj_article_details .item.authors .name {
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
}

.obj_article_details .item.authors .affiliation {
  display: block !important;
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
  margin-top: 2px !important;
}

/* Abstract Box */
.obj_article_details .item.abstract {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-lg) !important;
  padding: 28px !important;
  margin-bottom: 32px !important;
  box-shadow: var(--mod-shadow-xs) !important;
}

.obj_article_details .item.abstract h2.label {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.obj_article_details .item.abstract .value {
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
  color: var(--mod-text-secondary) !important;
  text-align: justify !important;
}

/* Citation / How to Cite Card */
.obj_article_details .item.citation {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 24px !important;
  margin-bottom: 32px !important;
}

.obj_article_details .item.citation h2.label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.obj_article_details .item.citation .value {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
  color: var(--mod-text-secondary) !important;
  padding: 12px 16px !important;
  background: var(--mod-bg-subtle) !important;
  border-radius: var(--mod-radius-sm) !important;
  border-left: 3px solid var(--mod-primary) !important;
}

/* Entry Details Sidebar Card */
.obj_article_details .entry_details {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--mod-shadow-xs) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.obj_article_details .entry_details .item.galleys .obj_galley_link {
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 1rem !important;
  border-radius: var(--mod-radius) !important;
  box-sizing: border-box !important;
}

.obj_article_details .entry_details .item {
  border-bottom: 1px solid var(--mod-border-light) !important;
  padding-bottom: 14px !important;
}

.obj_article_details .entry_details .item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.obj_article_details .entry_details .label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--mod-text-muted) !important;
  margin: 0 0 4px 0 !important;
}

.obj_article_details .entry_details .value {
  font-size: 0.9375rem !important;
  color: var(--mod-text-main) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   7. Sidebar Block Plugins
   ========================================================================== */
.pkp_structure_sidebar .pkp_block {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 22px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--mod-shadow-xs) !important;
}

.pkp_structure_sidebar .pkp_block .title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--mod-text-main) !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--mod-border-light) !important;
  position: relative !important;
}

.pkp_structure_sidebar .pkp_block .title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 36px !important;
  height: 2px !important;
  background: var(--mod-primary) !important;
}

.pkp_structure_sidebar .pkp_block .content {
  font-size: 0.9375rem !important;
  color: var(--mod-text-secondary) !important;
}

/* Custom Blocks Normalization (replaces harsh tables with clean cards) */
.pkp_block.block_custom table {
  border: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.pkp_block.block_custom td {
  border: none !important;
  padding: 8px 12px !important;
  background: var(--mod-bg-subtle) !important;
  border-radius: var(--mod-radius-sm) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.pkp_block.block_custom td a {
  text-decoration: none !important;
  font-weight: 600 !important;
  color: var(--mod-text-main) !important;
}

.pkp_block.block_custom td a:hover {
  color: var(--mod-primary) !important;
}

.pkp_block.block_custom .cmp_manuscript_button {
  background: var(--mod-primary) !important;
  color: #ffffff !important;
  border-radius: var(--mod-radius-sm) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Make a Submission block */
.block_make_submission a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: var(--mod-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: var(--mod-radius) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 6px rgba(30, 64, 175, 0.25) !important;
  transition: var(--mod-transition) !important;
}

.block_make_submission a:hover {
  background: var(--mod-primary-hover) !important;
  box-shadow: 0 6px 12px rgba(30, 64, 175, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   8. Dome-Inspired Portal / Multi-Journal Showcase
   ========================================================================== */
/* 8.0 Portal & Journal Canvas Full Width Reset */
.pkp_structure_content:has(.page_index_site),
.pkp_structure_content:has(.page_index_journal),
body:has(.page_index_site) .pkp_structure_content,
body:has(.page_index_journal) .pkp_structure_content {
  display: block !important;
  max-width: 1240px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 20px 64px 20px !important;
  box-sizing: border-box !important;
}

.pkp_structure_content:has(.page_index_site) .pkp_structure_sidebar,
.pkp_structure_content:has(.page_index_journal) .pkp_structure_sidebar,
body:has(.page_index_site) .pkp_structure_sidebar,
body:has(.page_index_journal) .pkp_structure_sidebar {
  display: none !important;
}

.pkp_structure_content:has(.page_index_site) .pkp_structure_main,
.pkp_structure_content:has(.page_index_journal) .pkp_structure_main,
body:has(.page_index_site) .pkp_structure_main,
body:has(.page_index_journal) .pkp_structure_main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dome_portal_container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 0 64px 0;
}

/* 8.1 Hero Section */
.dome_hero_section {
  margin-bottom: 72px;
}

.dome_hero_grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: stretch;
}

.dome_hero_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dome_pill_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--mod-border);
  padding: 6px 16px;
  border-radius: var(--mod-radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mod-text-secondary);
  box-shadow: var(--mod-shadow-xs);
  margin-bottom: 24px;
  align-self: flex-start;
}

.dome_star_icon {
  color: var(--mod-primary);
  font-size: 0.875rem;
}

.dome_hero_title {
  font-size: clamp(2.35rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #090d16;
  margin: 0 0 20px 0;
}

.dome_hero_desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 32px 0;
  max-width: 540px;
}

.dome_hero_actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* Pill Buttons */
.dome_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: var(--mod-radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
}

.dome_btn_dark {
  background: #0f172a;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.dome_btn_dark:hover {
  background: #1e293b;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.dome_btn_ghost {
  background: #ffffff;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0;
}

.dome_btn_ghost:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a !important;
  transform: translateY(-2px);
}

.dome_btn_subtle {
  background: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #e2e8f0;
  padding: 10px 20px;
  font-size: 0.875rem;
}

.dome_btn_subtle:hover {
  background: #ffffff;
  color: var(--mod-primary) !important;
  border-color: var(--mod-primary-border);
}

.dome_btn_block {
  width: 100%;
}

.dome_circle_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  font-size: 0.875rem;
  transition: var(--mod-transition);
}

.dome_btn_ghost:hover .dome_circle_arrow {
  border-color: #0f172a;
  transform: translateX(2px) translateY(-2px);
}

/* Hero Bottom Bar */
.dome_hero_bottom_bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.dome_mini_banner {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: var(--mod-radius-full);
  padding: 10px 22px;
  box-shadow: 0 4px 14px rgba(191, 219, 254, 0.5);
}

.dome_mini_banner_text {
  display: flex;
  flex-direction: column;
}

.dome_mini_banner_badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1e40af;
}

.dome_mini_banner_title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
}

.dome_mini_banner_link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}

.dome_mini_banner_link:hover {
  text-decoration: underline;
}

.dome_scroll_pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-full);
  color: #64748b;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: var(--mod-transition);
}

.dome_scroll_pill:hover {
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(2px);
}

.dome_scroll_icon {
  font-size: 0.875rem;
}

/* 8.2 Hero Right Visual Card (Dome Speaker Motif) */
.dome_hero_visual_card {
  background: linear-gradient(145deg, #a5b4fc 0%, #93c5fd 45%, #67e8f9 100%);
  border-radius: 36px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 40px -12px rgba(14, 165, 233, 0.28);
}

.dome_visual_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.dome_step_pills {
  display: flex;
  gap: 8px;
}

.dome_step_pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dome_step_pill.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dome_vertical_tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dome_visual_sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dome_sphere_glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
  filter: blur(4px);
}

.dome_journal_badge_symbol {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dome_floating_pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  align-self: flex-start;
}

.dome_pill_row {
  display: flex;
  gap: 8px;
}

.dome_badge_accent {
  background: #0284c7;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: var(--mod-radius-full);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.dome_badge_white {
  background: #ffffff;
  color: #0f172a;
  padding: 6px 18px;
  border-radius: var(--mod-radius-full);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.dome_preview_card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  background: #ffffff;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  text-decoration: none;
  z-index: 3;
  transition: transform 0.2s ease;
}

.dome_preview_card:hover {
  transform: translateY(-2px);
}

.dome_preview_card_thumb img {
  width: 44px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dome_preview_card_body {
  display: flex;
  flex-direction: column;
}

.dome_preview_card_badge {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 600;
}

.dome_preview_card_title {
  font-size: 0.8125rem;
  color: #0f172a;
  font-weight: 700;
}

/* 8.3 Statement / Manifesto Section */
.dome_statement_section {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 80px auto;
  padding: 0 20px;
}

.dome_statement_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #64748b;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.dome_statement_quote {
  font-size: clamp(1.625rem, 2.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.025em;
  color: #1e293b;
  margin: 0 0 20px 0;
  border: none;
  padding: 0;
}

.dome_statement_quote .highlight_blue {
  color: #2563eb;
}

.dome_statement_quote .highlight_cyan {
  color: #0284c7;
}

.dome_statement_quote .highlight_indigo {
  color: #4f46e5;
}

.dome_statement_quote .highlight_sky {
  color: #0ea5e9;
}

.dome_statement_subtext {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 720px;
  margin: 0 auto;
}

/* 8.4 Journal Showcase Section (Ultra-Modern 3D Bento Showcase) */
.dome_showcase_section {
  margin-bottom: 88px;
}

.dome_showcase_header {
  text-align: center;
  margin-bottom: 48px;
}

.dome_section_tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--mod-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dome_section_title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #090d16;
  margin: 0 0 12px 0;
}

.dome_section_subtitle {
  font-size: 1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.dome_cards_list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Individual Bento Card */
.dome_bento_card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 40px;
  padding: 48px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dome_bento_card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(0, 0, 0, 0.03);
  transform: translateY(-3px);
}

/* Reverse card (Left visual, Right text) */
.dome_bento_card_reverse .dome_bento_visual {
  order: 1;
}

.dome_bento_card_reverse .dome_bento_content {
  order: 2;
}

/* Content Area */
.dome_bento_content {
  display: flex;
  flex-direction: column;
}

.dome_bento_eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 16px;
}

.dome_eyebrow_pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: domePulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes domePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.dome_eyebrow_link {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dome_eyebrow_link:hover {
  color: var(--mod-primary);
}

.dome_title_row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dome_bento_title {
  font-size: clamp(1.85rem, 2.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}

.dome_bento_title a {
  color: #090d16;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dome_bento_title a:hover {
  color: var(--mod-primary);
}

.dome_acronym_pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: var(--mod-radius-full);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #1e293b;
}

.tone_jsi .dome_acronym_pill {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.tone_jti .dome_acronym_pill {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.dome_bento_desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 28px 0;
  max-width: 540px;
}

/* Refined Specs Grid Strip */
.dome_specs_strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.dome_spec_item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  padding: 10px 14px;
  transition: var(--mod-transition);
}

.dome_spec_item:hover {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.dome_spec_item .spec_icon {
  font-size: 1.125rem;
  line-height: 1;
}

.dome_spec_item .spec_content {
  display: flex;
  flex-direction: column;
}

.dome_spec_item .spec_label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dome_spec_item .spec_value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dome_spec_item .rank_highlight.sinta_3 {
  color: #059669;
}

.dome_spec_item .rank_highlight.sinta_5 {
  color: #d97706;
}

/* Actions */
.dome_bento_actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dome_btn_arrow {
  font-size: 0.8125rem;
  transition: transform 0.2s ease;
}

.dome_btn_dark:hover .dome_btn_arrow {
  transform: translateX(3px);
}

.dome_btn_sinta_pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--mod-radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dome_btn_sinta_pill.sinta_3 {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1.5px solid #a7f3d0;
}

.dome_btn_sinta_pill.sinta_3:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.dome_btn_sinta_pill.sinta_5 {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1.5px solid #fde68a;
}

.dome_btn_sinta_pill.sinta_5:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.dome_btn_sinta_pill .sinta_star {
  font-size: 0.875rem;
}

.dome_btn_text_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b !important;
  text-decoration: none;
  padding: 8px 12px;
  transition: var(--mod-transition);
}

.dome_btn_text_link:hover {
  color: #0f172a !important;
}

.dome_btn_text_link .link_arrow {
  transition: transform 0.2s ease;
}

.dome_btn_text_link:hover .link_arrow {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   Visual Column: 3D Perspective Studio Showcase
   ========================================================================== */
.dome_bento_visual {
  width: 100%;
}

.dome_studio_stage {
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  min-height: 440px;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Tone backdrops */
.tone_jsi .dome_studio_stage {
  background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.28) 0%, transparent 60%), linear-gradient(145deg, #f0fdfa 0%, #e0f2fe 55%, #f8fafc 100%);
  border: 1px solid rgba(186, 230, 253, 0.7);
}

.tone_jti .dome_studio_stage {
  background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.25) 0%, transparent 60%), linear-gradient(145deg, #fffbeb 0%, #fef3c7 55%, #f8fafc 100%);
  border: 1px solid rgba(253, 230, 138, 0.7);
}

.tone_abdi .dome_studio_stage {
  background: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.22) 0%, transparent 60%), linear-gradient(145deg, #f5f3ff 0%, #ede9fe 55%, #f8fafc 100%);
  border: 1px solid rgba(221, 214, 254, 0.7);
}

.tone_default .dome_studio_stage {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
}

.dome_stage_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.dome_stage_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dome_stage_badge.sinta_3 {
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #047857;
}

.dome_stage_badge.sinta_3 .badge_dot {
  background: #10b981;
}

.dome_stage_badge.sinta_5 {
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #b45309;
}

.dome_stage_badge.sinta_5 .badge_dot {
  background: #f59e0b;
}

.badge_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}

.dome_floating_arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
  text-decoration: none;
}

.dome_studio_stage:hover .dome_floating_arrow {
  background: #0f172a;
  color: #ffffff !important;
  transform: translate(2px, -2px);
}

/* 3D Book Showcase Stage */
.dome_book_anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 16px 0;
  perspective: 1200px;
  z-index: 3;
}

.dome_book_container {
  position: relative;
  display: inline-block;
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dome_bento_card_reverse .dome_book_container {
  transform: rotateY(14deg) rotateX(6deg) rotateZ(1deg);
}

.dome_bento_card:hover .dome_book_container {
  transform: rotateY(-3deg) rotateX(2deg) translateY(-12px) scale(1.04);
}

.dome_bento_card_reverse:hover .dome_book_container {
  transform: rotateY(3deg) rotateX(2deg) translateY(-12px) scale(1.04);
}

.dome_book_mesh {
  position: relative;
  overflow: hidden;
  border-radius: 6px 14px 14px 6px;
  box-shadow: -12px 18px 30px -4px rgba(15, 23, 42, 0.28), 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #0f172a;
  display: flex;
}

.dome_book_img {
  max-height: 240px;
  width: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dome_book_glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 60%);
  pointer-events: none;
}

.dome_book_depth_spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.15) 100%);
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}

.dome_book_ambient_shadow {
  position: absolute;
  bottom: -22px;
  left: 5%;
  right: 5%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.35) 0%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

/* Bottom Tag Dots Bar */
.dome_media_dots_bar {
  margin: 14px auto 0 auto;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--mod-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 5;
}

.dome_dot_tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
}

.dome_dot_active {
  color: #0f172a;
}

.dome_dot_circle {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f172a;
}

.dome_dot_circle.empty {
  border: 1.5px solid #94a3b8;
  background: transparent;
}

.dome_cover_fallback {
  background: linear-gradient(135deg, #1e3a8a, #0284c7);
  color: #ffffff;
  padding: 48px 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.dome_fallback_badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.dome_fallback_title {
  font-size: 1.125rem;
  font-weight: 700;
}

/* 8.5 SINTA Identity Section */
.dome_sinta_identity_section {
  margin-bottom: 72px;
}

.dome_sinta_identity_card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 36px;
  padding: 48px;
  box-shadow: var(--mod-shadow-sm);
}

.dome_sinta_badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: var(--mod-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.dome_sinta_title {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}

.dome_sinta_subtitle {
  font-size: 0.9375rem;
  color: #64748b;
  margin: 0 0 36px 0;
  max-width: 680px;
}

.dome_sinta_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 36px;
}

.dome_sinta_box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--mod-transition);
}

.dome_sinta_box:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: var(--mod-shadow-card);
  transform: translateY(-2px);
}

.dome_sinta_box_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dome_sinta_rank_badge {
  padding: 6px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dome_sinta_rank_badge.s3_badge {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.dome_sinta_rank_badge.s5_badge {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.dome_sinta_verified_tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #059669;
}

.dome_sinta_journal_name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px 0;
}

.dome_sinta_meta_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.875rem;
}

.dome_sinta_meta_item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e2e8f0;
}

.dome_sinta_meta_item .meta_label {
  color: #64748b;
}

.dome_sinta_meta_item .meta_val {
  color: #0f172a;
  font-weight: 600;
}

/* Indexing Strip */
.dome_indexing_strip {
  padding-top: 28px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.dome_indexing_title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dome_indexing_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dome_index_tag {
  background: #f1f5f9;
  color: #334155;
  padding: 6px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

/* 8.6 Responsive Media Queries */
@media (max-width: 991px) {
  .dome_hero_grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dome_hero_visual_card {
    min-height: 400px;
  }

  .dome_bento_card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 24px;
    border-radius: 28px;
  }

  .dome_bento_card_reverse .dome_bento_visual {
    order: 2;
  }

  .dome_bento_card_reverse .dome_bento_content {
    order: 1;
  }

  .dome_specs_strip {
    grid-template-columns: 1fr;
  }

  .dome_studio_stage {
    min-height: 380px;
    padding: 24px 18px;
  }

  .dome_book_img {
    max-height: 200px;
  }

  .dome_sinta_grid {
    grid-template-columns: 1fr;
  }

  .dome_sinta_identity_card {
    padding: 32px 20px;
    border-radius: 24px;
  }
}

@media (max-width: 640px) {
  .dome_hero_title {
    font-size: 2rem;
  }

  .dome_bento_title {
    font-size: 1.5rem;
  }

  .dome_statement_quote {
    font-size: 1.35rem;
  }

  .dome_bento_actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dome_bento_actions .dome_btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   8.7 Ultra-Modern Journal Homepage (JSI, JTI, etc.)
   ========================================================================== */
.dome_journal_page {
  display: flex;
  flex-direction: column;
}

/* Journal Hero Bento Section */
.journal_bento_hero {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 40px;
  padding: 48px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  margin-bottom: 24px;
}

.journal_hero_grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.journal_hero_content {
  display: flex;
  flex-direction: column;
}

.journal_hero_eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 16px;
}

.journal_title_row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.journal_hero_title {
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #090d16;
  margin: 0;
}

.journal_acronym_badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.tone_jsi .journal_acronym_badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.tone_jti .journal_acronym_badge {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

/* Official SINTA Hero Badge */
.journal_sinta_badge_hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 3px 12px 3px 8px;
  border-radius: var(--mod-radius-full);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
  text-decoration: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  vertical-align: middle;
}

.journal_sinta_badge_hero:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}

.journal_sinta_badge_hero_img {
  height: 34px;
  width: auto;
  max-width: 125px;
  object-fit: contain;
  display: block;
}

/* Button SINTA badge image */
.btn_sinta_badge_img {
  height: 22px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

/* 3D Stage SINTA badge seal */
.stage_sinta_badge_seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 14px 4px 8px;
  border-radius: var(--mod-radius-full);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  text-decoration: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.stage_sinta_badge_seal:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

.stage_sinta_badge_img {
  height: 28px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

.stage_sinta_label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #b45309;
}

/* Indexation strip SINTA icon */
.index_pill_sinta_icon {
  height: 20px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.journal_hero_desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 28px 0;
  max-width: 560px;
}

/* Specs Strip in Journal Hero */
.journal_specs_strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.journal_spec_item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  padding: 10px 14px;
  transition: var(--mod-transition);
}

.journal_spec_item:hover {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.journal_spec_item .spec_icon {
  font-size: 1.125rem;
  line-height: 1;
}

.journal_spec_item .spec_data {
  display: flex;
  flex-direction: column;
}

.journal_spec_item .spec_label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.journal_spec_item .spec_val {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal_spec_item .rank_val.sinta_3 {
  color: #059669;
}

.journal_spec_item .rank_val.sinta_5 {
  color: #d97706;
}

/* Journal Hero Actions */
.journal_hero_actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Journal Visual Stage */
.journal_hero_visual {
  width: 100%;
}

.journal_studio_box {
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  min-height: 440px;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tone_jsi .journal_studio_box {
  background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.28) 0%, transparent 60%), linear-gradient(145deg, #f0fdfa 0%, #e0f2fe 55%, #f8fafc 100%);
  border: 1px solid rgba(186, 230, 253, 0.7);
}

.tone_jti .journal_studio_box {
  background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.25) 0%, transparent 60%), linear-gradient(145deg, #fffbeb 0%, #fef3c7 55%, #f8fafc 100%);
  border: 1px solid rgba(253, 230, 138, 0.7);
}

.tone_default .journal_studio_box {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
}

.journal_stage_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.journal_sinta_seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.journal_sinta_seal.sinta_3 {
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #047857;
}

.journal_sinta_seal.sinta_3 .seal_dot {
  background: #10b981;
}

.journal_sinta_seal.sinta_5 {
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #b45309;
}

.journal_sinta_seal.sinta_5 .seal_dot {
  background: #f59e0b;
}

.seal_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}

/* 3D Perspective Book Showcase */
.journal_3d_anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 16px 0;
  perspective: 1200px;
  z-index: 3;
}

.journal_3d_book {
  position: relative;
  display: inline-block;
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.journal_studio_box:hover .journal_3d_book {
  transform: rotateY(-3deg) rotateX(2deg) translateY(-12px) scale(1.04);
}

.journal_book_mesh {
  position: relative;
  overflow: hidden;
  border-radius: 6px 14px 14px 6px;
  box-shadow: -12px 18px 30px -4px rgba(15, 23, 42, 0.28), 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #0f172a;
  display: flex;
}

.journal_cover_img {
  max-height: 240px;
  width: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.journal_glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 60%);
  pointer-events: none;
}

.journal_depth_spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.15) 100%);
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}

.journal_ambient_shadow {
  position: absolute;
  bottom: -22px;
  left: 5%;
  right: 5%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.35) 0%, transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}

.journal_stage_bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
}

.journal_issue_pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--mod-radius-full);
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.journal_issue_pill .issue_dot {
  color: var(--mod-primary);
  font-size: 0.6875rem;
}

/* 2. Quick Action Bar */
.journal_quick_actions_bar {
  background: #ffffff;
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius-full);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 40px;
  overflow-x: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.quick_pill_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--mod-radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.quick_pill_item:hover {
  background: #f1f5f9;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.quick_pill_item .pill_icon {
  font-size: 1rem;
}

/* 3. Current Issue Section */
.journal_current_issue_section {
  background: #fbfcfd;
  border: 1px solid #e8ecf2;
  border-radius: 36px;
  padding: 44px 36px;
  margin-bottom: 40px;
}

.current_issue_header {
  margin-bottom: 32px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 24px;
}

.header_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mod-primary);
  margin-bottom: 8px;
}

.current_issue_headline {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #090d16;
  margin: 0 0 8px 0;
}

.current_issue_date {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.current_issue_body .obj_issue_toc > .heading {
  display: none !important; /* Hide old redundant heading */
}

.current_issue_body .section > h2,
.current_issue_body .section > h3 {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--mod-border) !important;
  margin: 28px 0 20px 0 !important;
}

.current_issue_body .section:first-child > h2,
.current_issue_body .section:first-child > h3 {
  margin-top: 0 !important;
}

.current_issue_body .sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.current_issue_body .section ul.cmp_article_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.current_issue_footer {
  text-align: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* 4. Indexation Section */
.journal_indexation_section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 28px 32px;
  margin-bottom: 36px;
}

.indexation_card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.indexation_title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.indexation_pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.index_pill {
  background: #f1f5f9;
  color: #334155;
  padding: 6px 14px;
  border-radius: var(--mod-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--mod-transition);
}

.index_pill.sinta_pill {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.index_pill.sinta_pill:hover {
  background: #d1fae5;
  transform: translateY(-1px);
}

.index_pill .pill_star {
  color: #f59e0b;
}

/* 5. Additional Content Clean Box */
.journal_additional_section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 36px 32px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.additional_content_card h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin: 28px 0 16px 0 !important;
}

.additional_content_card h2:first-child,
.additional_content_card #headings:first-child h2 {
  margin-top: 0 !important;
}

.additional_content_card hr {
  border: 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 24px 0 !important;
}

.additional_content_card table {
  max-width: 100% !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 16px 14px !important;
  margin: 16px auto !important;
}

.additional_content_card td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 4px !important;
}

.additional_content_card img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.additional_content_card a img:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* Statistics Widget (SINTA & Google Scholar) */
.modern_stat_widget_wrapper {
  text-align: center;
  margin: 28px auto 36px auto;
  max-width: 960px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  box-sizing: border-box;
}

.modern_stat_widget_iframe {
  width: 100%;
  max-width: 940px;
  height: 250px;
  border: none !important;
  overflow: hidden !important;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .modern_stat_widget_iframe {
    height: 130px;
  }
}

/* Modernize legacy dashed specs box */
.additional_content_card div[style*="border"] {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background-color: #f8fafc !important;
  padding: 20px 24px !important;
  box-shadow: none !important;
}

.additional_content_card div[style*="border"] ol {
  margin: 0 !important;
  padding-left: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px 24px !important;
}

.additional_content_card div[style*="border"] ol li {
  font-size: 0.875rem !important;
  color: #334155 !important;
  line-height: 1.6 !important;
}

/* Responsive Journal Page */
@media (max-width: 991px) {
  .journal_hero_grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .journal_bento_hero {
    padding: 32px 24px;
    border-radius: 28px;
  }

  .journal_specs_strip {
    grid-template-columns: 1fr;
  }

  .journal_current_issue_section {
    padding: 32px 20px;
    border-radius: 24px;
  }

  .journal_quick_actions_bar {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.pkp_structure_footer_wrapper {
  background: #0f172a !important;
  color: #94a3b8 !important;
  margin-top: 64px !important;
  border-top: 1px solid #1e293b !important;
  padding: 48px 20px 32px 20px !important;
}

.pkp_structure_footer {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

.pkp_structure_footer a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.pkp_structure_footer a:hover {
  color: #ffffff !important;
}

.pkp_brand_footer {
  text-align: center !important;
  padding-top: 24px !important;
  border-top: 1px solid #1e293b !important;
  font-size: 0.8125rem !important;
  color: #64748b !important;
}

/* ==========================================================================
   10. Performance, Form & Accessibility Enhancements
   ========================================================================== */
/* Smooth touch interactions without 300ms delay */
a, button, input, select, textarea {
  touch-action: manipulation;
}

/* Crisp focus ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--mod-primary) !important;
  outline-offset: 2px !important;
}

/* Content Images Responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Hide legacy spam text if any in journal descriptions */
.description div[style*="display: none"],
.additional_content div[style*="display: none"] {
  display: none !important;
}

/* ==========================================================================
   11. Ultra-Modern Static Pages & Content Styler
   ========================================================================== */

/* 11.1 Base Static Page Card Container */
.page,
.modern_static_page {
  background: var(--mod-bg-card) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-lg) !important;
  padding: 40px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
  margin-bottom: 40px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .page,
  .modern_static_page {
    padding: 24px 18px !important;
    border-radius: var(--mod-radius) !important;
  }
}

/* 11.2 Breadcrumbs Component Normalization */
.modern_breadcrumbs {
  margin-bottom: 24px !important;
}

.modern_breadcrumb_list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
}

.modern_breadcrumb_item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.modern_breadcrumb_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--mod-text-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--mod-transition) !important;
}

.modern_breadcrumb_link:hover {
  color: var(--mod-primary) !important;
}

.modern_breadcrumb_icon {
  font-size: 0.875rem !important;
  opacity: 0.8 !important;
}

.modern_breadcrumb_sep {
  color: var(--mod-text-light) !important;
  font-size: 0.8125rem !important;
  user-select: none !important;
}

.modern_breadcrumb_active {
  color: var(--mod-text-main) !important;
  font-weight: 600 !important;
  background: var(--mod-bg-subtle) !important;
  padding: 3px 12px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.8125rem !important;
  border: 1px solid var(--mod-border) !important;
}

/* 11.3 Page Header & Badges */
.modern_page_header {
  margin-bottom: 32px !important;
  padding-bottom: 20px !important;
  position: relative !important;
}

.modern_page_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--mod-primary-soft) !important;
  color: var(--mod-primary) !important;
  border: 1px solid var(--mod-primary-border) !important;
  padding: 4px 14px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 14px !important;
}

.modern_badge_dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--mod-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2) !important;
}

.page_title,
.modern_page_title,
.page > h1 {
  font-size: 2.125rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  color: var(--mod-text-main) !important;
  margin: 0 0 16px 0 !important;
}

@media (max-width: 768px) {
  .page_title,
  .modern_page_title,
  .page > h1 {
    font-size: 1.625rem !important;
  }
}

.modern_header_rule {
  width: 56px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--mod-primary), var(--mod-accent)) !important;
  border-radius: var(--mod-radius-full) !important;
  margin-top: 14px !important;
}

/* 11.4 Meta Banner Strip (About page) */
.modern_meta_banner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 28px !important;
}

.modern_meta_item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.modern_meta_label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--mod-text-muted) !important;
}

.modern_meta_val {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--mod-text-main) !important;
}

/* 11.5 Modern Prose Typography */
.modern_prose,
.page .page-content,
.page > div:not(.modern_page_header):not(.cmp_breadcrumbs):not(.modern_submission_alert):not(.modern_contact_grid):not(.modern_masthead_section):not(.modern_section_card) {
  font-size: 1.03125rem;
  line-height: 1.8;
  color: var(--mod-text-secondary);
}

.modern_prose p,
.page p {
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.8 !important;
  color: var(--mod-text-secondary) !important;
}

.modern_prose p[align="justify"],
.page p[align="justify"] {
  text-align: justify !important;
  text-justify: inter-word !important;
}

.modern_prose h2,
.page h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--mod-text-main) !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--mod-border-light) !important;
}

.modern_prose h3,
.page h3 {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
}

.modern_prose h4,
.page h4 {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: var(--mod-text-main) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.modern_prose blockquote,
.page blockquote {
  margin: 1.5rem 0 !important;
  padding: 18px 24px !important;
  background: var(--mod-bg-subtle) !important;
  border-left: 4px solid var(--mod-primary) !important;
  border-radius: 0 var(--mod-radius) var(--mod-radius) 0 !important;
  font-style: italic !important;
  color: var(--mod-text-secondary) !important;
}

.modern_prose blockquote p:last-child,
.page blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* Modern Prose Lists */
.modern_prose ul,
.page ul:not(.modern_user_pills):not(.dome_pill_menu):not(.modern_user_grid):not(.modern_breadcrumb_list) {
  margin: 0 0 1.5rem 0 !important;
  padding-left: 1.5rem !important;
  list-style-type: disc !important;
}

.modern_prose ol,
.page ol:not(.modern_breadcrumb_list) {
  margin: 0 0 1.5rem 0 !important;
  padding-left: 1.5rem !important;
  list-style-type: decimal !important;
}

.modern_prose li,
.page li:not(.modern_breadcrumb_item):not(.modern_member_card) {
  margin-bottom: 0.625rem !important;
  line-height: 1.7 !important;
  color: var(--mod-text-secondary) !important;
}

/* Custom list items like Reviewers or Policies */
.page li.show,
.modern_prose li.show {
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border-light) !important;
  border-radius: var(--mod-radius-sm) !important;
  list-style: none !important;
  transition: var(--mod-transition) !important;
  display: block !important;
}

.page li.show:hover,
.modern_prose li.show:hover {
  background: var(--mod-primary-soft) !important;
  border-color: var(--mod-primary-border) !important;
  transform: translateX(4px) !important;
}

/* Links inside prose */
.modern_prose a,
.page a:not(.modern_btn_primary):not(.modern_btn_secondary):not(.modern_btn_outline):not(.modern_breadcrumb_link):not(.modern_orcid_badge):not(.dome_brand_link) {
  color: var(--mod-primary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--mod-primary-border) !important;
  transition: var(--mod-transition) !important;
  font-weight: 500 !important;
}

.modern_prose a:hover,
.page a:not(.modern_btn_primary):not(.modern_btn_secondary):not(.modern_btn_outline):not(.modern_breadcrumb_link):not(.modern_orcid_badge):not(.dome_brand_link):hover {
  color: var(--mod-primary-hover) !important;
  text-decoration-color: var(--mod-primary) !important;
}

/* Images inside prose */
.modern_prose img,
.page img:not(.dome_brand_img):not(.dome_user_avatar) {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--mod-radius) !important;
  display: block !important;
  margin: 24px auto !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--mod-border) !important;
  padding: 10px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* 11.6 Universal Table Normalizer for Static Pages */
.modern_prose table,
.page table:not(.pkp_grid) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
  background: #ffffff !important;
  box-shadow: var(--mod-shadow-xs) !important;
}

.modern_prose table thead th,
.modern_prose table th,
.page table:not(.pkp_grid) th {
  background: var(--mod-bg-subtle) !important;
  color: var(--mod-text-main) !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--mod-border) !important;
  text-align: left !important;
}

.modern_prose table td,
.page table:not(.pkp_grid) td {
  padding: 14px 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--mod-border-light) !important;
  font-size: 0.9375rem !important;
  color: var(--mod-text-secondary) !important;
  vertical-align: top !important;
  line-height: 1.6 !important;
  background-color: transparent !important;
  height: auto !important;
}

.modern_prose table tbody tr:last-child td,
.page table:not(.pkp_grid) tbody tr:last-child td {
  border-bottom: none !important;
}

.modern_prose table tbody tr:nth-child(even) td,
.page table:not(.pkp_grid) tbody tr:nth-child(even) td {
  background-color: rgba(248, 250, 252, 0.7) !important;
}

.modern_prose table tbody tr:hover td,
.page table:not(.pkp_grid) tbody tr:hover td {
  background-color: var(--mod-primary-soft) !important;
}

.modern_prose table td span,
.page table:not(.pkp_grid) td span {
  color: inherit !important;
}

/* 11.7 Submissions Page Styling */
.modern_submission_alert {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border: 1px solid var(--mod-primary-border) !important;
  border-left: 5px solid var(--mod-primary) !important;
  border-radius: var(--mod-radius) !important;
  padding: 24px 28px !important;
  margin-bottom: 32px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  box-shadow: 0 2px 10px rgba(30, 64, 175, 0.04) !important;
}

.modern_alert_icon {
  width: 48px !important;
  height: 48px !important;
  background: var(--mod-primary) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.25) !important;
}

.modern_alert_body {
  flex: 1 !important;
}

.modern_alert_title {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 0 0 6px 0 !important;
}

.modern_alert_desc {
  font-size: 0.9375rem !important;
  color: var(--mod-text-secondary) !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.6 !important;
}

.modern_alert_actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.modern_btn_primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--mod-primary) 0%, var(--mod-primary-hover) 100%) !important;
  color: #ffffff !important;
  padding: 10px 22px !important;
  border-radius: var(--mod-radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(30, 64, 175, 0.25) !important;
  transition: var(--mod-transition) !important;
}

.modern_btn_primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.35) !important;
  color: #ffffff !important;
}

.modern_btn_secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: var(--mod-text-main) !important;
  border: 1px solid var(--mod-border) !important;
  padding: 10px 22px !important;
  border-radius: var(--mod-radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  transition: var(--mod-transition) !important;
}

.modern_btn_secondary:hover {
  background: var(--mod-bg-subtle) !important;
  border-color: var(--mod-border-light) !important;
  color: var(--mod-primary) !important;
  transform: translateY(-1px) !important;
}

.modern_section_card {
  background: #ffffff !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 26px 30px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--mod-shadow-xs) !important;
  transition: var(--mod-transition) !important;
}

.modern_section_card:hover {
  border-color: var(--mod-primary-border) !important;
  box-shadow: var(--mod-shadow-sm) !important;
}

.modern_section_header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--mod-border-light) !important;
}

.modern_section_icon {
  font-size: 1.25rem !important;
  color: var(--mod-primary) !important;
}

.modern_section_title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

/* Submission Checklist Items */
.submission_checklist ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.submission_checklist li {
  position: relative !important;
  padding-left: 32px !important;
  margin-bottom: 14px !important;
  line-height: 1.65 !important;
}

.submission_checklist li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--mod-success-soft) !important;
  color: var(--mod-success) !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

/* 11.8 Contact Page Styling */
.modern_address_card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
}

.modern_address_icon {
  width: 44px !important;
  height: 44px !important;
  background: #ffffff !important;
  color: var(--mod-primary) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.modern_address_label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--mod-text-muted) !important;
  margin: 0 0 6px 0 !important;
}

.modern_address_text {
  font-size: 0.95rem !important;
  color: var(--mod-text-main) !important;
  line-height: 1.6 !important;
}

.modern_contact_grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 24px !important;
}

.modern_contact_card {
  background: #ffffff !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: var(--mod-shadow-xs) !important;
  transition: var(--mod-transition) !important;
}

.modern_contact_card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--mod-primary-border) !important;
  box-shadow: var(--mod-shadow-md) !important;
}

.modern_card_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--mod-primary-soft) !important;
  color: var(--mod-primary) !important;
  border: 1px solid var(--mod-primary-border) !important;
  padding: 4px 10px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  align-self: flex-start !important;
  margin-bottom: 16px !important;
}

.modern_card_badge.badge_support {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.modern_contact_name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 0 0 4px 0 !important;
}

.modern_contact_title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--mod-primary) !important;
  margin-bottom: 8px !important;
}

.modern_contact_affil {
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
}

.modern_contact_details {
  border-top: 1px solid var(--mod-border-light) !important;
  padding-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.modern_contact_line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.9375rem !important;
  color: var(--mod-text-secondary) !important;
}

.modern_contact_line .fa {
  color: var(--mod-primary) !important;
  font-size: 1rem !important;
}

.modern_contact_line a {
  color: var(--mod-text-main) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.modern_contact_line a:hover {
  color: var(--mod-primary) !important;
}

/* 11.9 Editorial Masthead Styling */
.modern_masthead_section {
  margin-bottom: 36px !important;
}

.modern_role_header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--mod-primary-soft) !important;
}

.modern_role_icon {
  font-size: 1.25rem !important;
  color: var(--mod-primary) !important;
}

.modern_role_title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.modern_role_subtitle {
  font-size: 0.875rem !important;
  color: var(--mod-text-muted) !important;
  margin-bottom: 18px !important;
}

.modern_user_grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.modern_member_card {
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: var(--mod-transition) !important;
}

.modern_member_card:hover {
  background: #ffffff !important;
  border-color: var(--mod-primary-border) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mod-shadow-sm) !important;
}

.modern_member_avatar {
  font-size: 2rem !important;
  color: var(--mod-primary) !important;
  opacity: 0.8 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

.modern_member_info {
  flex: 1 !important;
  min-width: 0 !important;
}

.modern_member_name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.modern_member_affil {
  font-size: 0.8125rem !important;
  color: var(--mod-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.4 !important;
}

.modern_member_date {
  font-size: 0.75rem !important;
  color: var(--mod-text-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 6px !important;
}

.modern_orcid_badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #a6ce39 !important;
  color: #ffffff !important;
  padding: 2px 8px !important;
  border-radius: var(--mod-radius-full) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: var(--mod-transition) !important;
}

.modern_orcid_badge:hover {
  background: #8fae32 !important;
  color: #ffffff !important;
}

.modern_editorial_history_link {
  margin: 28px 0 !important;
}

.modern_btn_outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-full) !important;
  background: #ffffff !important;
  color: var(--mod-text-main) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: var(--mod-transition) !important;
}

.modern_btn_outline:hover {
  border-color: var(--mod-primary) !important;
  color: var(--mod-primary) !important;
  background: var(--mod-bg-subtle) !important;
}

/* 11.10 Sidebar Custom Block Normalizer on Static Pages */
#customblock-SIDEBAR-KANAN,
.pkp_block.block_custom {
  background: #ffffff !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--mod-shadow-xs) !important;
  margin-bottom: 20px !important;
}

#customblock-SIDEBAR-KANAN ul,
.pkp_block.block_custom ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#customblock-SIDEBAR-KANAN li,
.pkp_block.block_custom li {
  border: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#customblock-SIDEBAR-KANAN .cmp_manuscript_button,
.pkp_block.block_custom .cmp_manuscript_button {
  background: linear-gradient(135deg, var(--mod-primary) 0%, var(--mod-primary-hover) 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

#customblock-SIDEBAR-KANAN table,
.pkp_block.block_custom table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  border: none !important;
}

#customblock-SIDEBAR-KANAN td,
.pkp_block.block_custom td {
  border: none !important;
  border-bottom: 1px solid var(--mod-border-light) !important;
  padding: 10px 18px !important;
  background: #ffffff !important;
  height: auto !important;
  text-align: left !important;
  transition: var(--mod-transition) !important;
}

#customblock-SIDEBAR-KANAN tr:last-child td,
.pkp_block.block_custom tr:last-child td {
  border-bottom: none !important;
}

#customblock-SIDEBAR-KANAN td:hover,
.pkp_block.block_custom td:hover {
  background: var(--mod-bg-subtle) !important;
  padding-left: 22px !important;
}

#customblock-SIDEBAR-KANAN td a,
.pkp_block.block_custom td a {
  color: var(--mod-text-secondary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  display: block !important;
}

#customblock-SIDEBAR-KANAN td:hover a,
.pkp_block.block_custom td:hover a {
  color: var(--mod-primary) !important;
}

#customblock-SIDEBAR-KANAN td a span,
.pkp_block.block_custom td a span {
  color: inherit !important;
}

/* Special treatment for ISSN block inside sidebar */
#customblock-SIDEBAR-KANAN td:has(a[href*="issn"]),
.pkp_block.block_custom td:has(a[href*="issn"]) {
  text-align: center !important;
  background: var(--mod-bg-subtle) !important;
  padding: 8px 14px !important;
}

#customblock-SIDEBAR-KANAN td:has(a[href*="issn"]):hover,
.pkp_block.block_custom td:has(a[href*="issn"]):hover {
  background: var(--mod-primary-soft) !important;
  padding-left: 14px !important;
}

/* 11.11 Forms & Utility Pages */
.page_login,
.page_register,
.page_lost_password {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cmp_form .fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin-bottom: 24px !important;
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form select,
.cmp_form textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  font-size: 0.9375rem !important;
  background: #ffffff !important;
  transition: var(--mod-transition) !important;
  box-sizing: border-box !important;
}

.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus {
  border-color: var(--mod-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

.cmp_form .buttons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.cmp_form .buttons button,
.cmp_form .buttons input[type="submit"] {
  background: linear-gradient(135deg, var(--mod-primary) 0%, var(--mod-primary-hover) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: var(--mod-radius-full) !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: var(--mod-transition) !important;
  box-shadow: 0 2px 6px rgba(30, 64, 175, 0.25) !important;
}

.cmp_form .buttons button:hover,
.cmp_form .buttons input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.35) !important;
}

/* 11.12 Archives & Empty State */
.modern_archive_grid {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
}

.modern_archive_item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.modern_archive_item .obj_issue_summary {
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 20px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--mod-transition) !important;
}

.modern_archive_item .obj_issue_summary:hover {
  background: #ffffff !important;
  border-color: var(--mod-primary-border) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--mod-shadow-md) !important;
}

.modern_empty_state {
  text-align: center !important;
  padding: 48px 24px !important;
  background: var(--mod-bg-subtle) !important;
  border: 1px dashed var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
}

.modern_pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 36px !important;
}

/* 11.13 Search Page Styling */
.page_search .search_input {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.page_search .search_input input.query {
  flex: 1 !important;
  padding: 12px 18px !important;
  font-size: 1rem !important;
  border: 1.5px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  background: #ffffff !important;
  transition: var(--mod-transition) !important;
  box-shadow: var(--mod-shadow-xs) !important;
}

.page_search .search_input input.query:focus {
  border-color: var(--mod-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15) !important;
  outline: none !important;
}

.page_search .search_advanced {
  background: var(--mod-bg-subtle) !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 24px 28px !important;
  margin-bottom: 32px !important;
}

.page_search .search_advanced legend {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--mod-text-main) !important;
  padding: 0 8px !important;
}

.page_search .search_advanced .date_range {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

.page_search .search_advanced select,
.page_search .search_advanced input {
  padding: 8px 12px !important;
  border: 1px solid var(--mod-border) !important;
  border-radius: var(--mod-radius-sm) !important;
  background: #ffffff !important;
  font-size: 0.875rem !important;
}

.page_search .cmp_notification,
.page_search .no_results {
  background: var(--mod-bg-subtle) !important;
  border: 1px dashed var(--mod-border) !important;
  border-radius: var(--mod-radius) !important;
  padding: 32px 24px !important;
  text-align: center !important;
  font-size: 1rem !important;
  color: var(--mod-text-muted) !important;
  margin-top: 24px !important;
}