/* ==========================================================================
   VERADOME PORTAL NAVIGATOR — REDESIGNED STYLESHEET
   Clean, Premium, Zero Clutter per Director Visual Review
   ========================================================================== */

/* ==========================================================================
   SAMSUNG / ANDROID LIGHT RENDERING PROTECTION LAW
   ========================================================================== */
#navigatorRoot,
.navigator-minihub,
.nav-hub-card,
.portal-card,
.master-card,
.masterspace-root,
.directions-view-root,
.direction-concept-card,
.operator-concept-block,
.directions-entry-banner,
.track-detail-root,
.detail-modal-root {
  color-scheme: only light;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}

#navigatorRoot {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  color: #e2fdf0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  position: relative;
}

/* ==========================================================================
   1. MINI-HUB VIEW (3 CLEAN, SPACIOUS 5:2 CARDS)
   ========================================================================== */
.navigator-minihub {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  gap: 14px;
  animation: navFadeIn 200ms ease-out forwards;
  padding: 4px 2px;
  box-sizing: border-box;
}

.nav-hub-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* In EXPANDED mode on tablet & desktop (>= 680px): 2x2 grid for 4 cards */
@media (min-width: 680px) {
  .frame.is-expanded .nav-hub-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Tablet compact height law for Navigator Mini-Hub: 4 cards fill the height */
@media (min-width: 600px) and (min-height: 700px) {
  .frame:not(.is-expanded) .navigator-minihub {
    justify-content: flex-start;
  }
  .frame:not(.is-expanded) .nav-hub-cards-grid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
  }
  .frame:not(.is-expanded) .nav-hub-card {
    flex: 1 1 0;
    min-height: 90px;
    max-height: 180px;
    padding: 16px 20px;
  }
  .frame:not(.is-expanded) .nav-hub-icon-wrap {
    width: 44px;
    height: 44px;
  }
  .frame:not(.is-expanded) .nav-hub-card-title {
    font-size: 15px;
  }
  .frame:not(.is-expanded) .nav-hub-card-desc {
    font-size: 12.5px;
  }
  .frame:not(.is-expanded) .nav-hub-card-substatus {
    font-size: 11.5px;
  }
}

/* Prominent Clean Card with fluid height and no rigid aspect-ratio */
.nav-hub-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  height: auto;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(6, 22, 16, 0.92) 0%, rgba(2, 10, 7, 0.96) 100%);
  border: 1.5px solid rgba(0, 230, 168, 0.45);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 255, 170, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: transform 140ms ease, border-color 160ms ease, box-shadow 160ms ease;
  user-select: none;
  box-sizing: border-box;
}

.nav-hub-card:hover {
  transform: translateY(-2px);
  border-color: #00ffaa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 255, 170, 0.35);
}

.nav-hub-card--flagship {
  border-color: rgba(255, 215, 0, 0.45);
}

.nav-hub-card--flagship:hover {
  border-color: #ffd700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 215, 0, 0.35);
}

.nav-hub-card:active {
  transform: translateY(1px) scale(0.995);
}

.nav-hub-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.nav-hub-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(0, 255, 170, 0.12);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ffaa;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
}

.nav-hub-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.nav-hub-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Full, unclipped card title */
.nav-hub-card-title {
  font-size: clamp(13px, 1.4vw, 15.5px);
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #ffffff;
  white-space: normal;
  line-height: 1.22;
  word-break: break-word;
  text-shadow: 0 0 10px rgba(0, 255, 170, 0.3);
}

.nav-hub-card-desc {
  font-size: clamp(10px, 1.1vw, 11.5px);
  color: #8be0bf;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Secondary status text at bottom, no loud badges covering title */
.nav-hub-card-substatus {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #64ffda;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-hub-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-hub-arrow {
  font-size: 20px;
  font-weight: 700;
  color: #00ffaa;
  opacity: 0.85;
}

/* ==========================================================================
   2. UNIVERSAL SEARCH BAR + CONTROL BUTTON
   Law of VERADOME: [ SEARCH ICON ] [ FIELD ] [ CONTROL BUTTON ]
   No big header above, content immediately follows below.
   ========================================================================== */
.nav-search-bar-wrap {
  position: sticky;
  top: -16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 12px;
  padding: 8px 0 10px 0;
  background: rgba(2, 8, 5, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 230, 168, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.nav-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.nav-search-input {
  width: 100%;
  height: 38px;
  padding: 6px 36px 6px 36px;
  background: rgba(3, 14, 10, 0.88);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.3px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  box-sizing: border-box;
}

.nav-search-input:focus {
  border-color: #00ffaa;
  box-shadow: 0 0 12px rgba(0, 255, 170, 0.35);
}

.nav-search-input::placeholder {
  color: #5ea88d;
}

.nav-search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: #64ffda;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease, color 120ms ease;
  z-index: 2;
}

.nav-search-icon:hover {
  color: #00ffaa;
  transform: scale(1.15);
}

.nav-search-clear {
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8be0bf;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: color 120ms ease;
}

.nav-search-clear:hover {
  color: #ffffff;
}

/* Control Button (Sliders / Tune Icon) */
.nav-control-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(3, 14, 10, 0.85);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  color: #64ffda;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.nav-control-toggle-btn:hover {
  border-color: #00ffaa;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.35);
}

.nav-control-toggle-btn.is-active {
  border-color: #00ffaa;
  background: rgba(0, 255, 170, 0.18);
  color: #00ffaa;
  box-shadow: 0 0 12px rgba(0, 255, 170, 0.4);
}

.nav-control-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.nav-control-active-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffaa;
  box-shadow: 0 0 6px #00ffaa;
}

/* ==========================================================================
   3. COMPACT CONTROL POPUP MENU
   Contains Presentation Mode, Sort, and Category Filters
   ========================================================================== */
.nav-control-menu {
  position: absolute;
  top: 46px;
  right: 0;
  width: 290px;
  max-width: 95vw;
  background: rgba(4, 18, 12, 0.96);
  border: 1.2px solid rgba(0, 230, 168, 0.5);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 255, 170, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: navFadeIn 160ms ease-out forwards;
}

.ctrl-menu-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ctrl-menu-label {
  font-size: clamp(9.5px, 1.1vw, 11px);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #64ffda;
  text-transform: uppercase;
}

/* Presentation Modes Row */
.ctrl-modes-row {
  display: flex;
  gap: 6px;
}

.ctrl-mode-btn {
  flex: 1;
  padding: 7px 6px;
  background: rgba(2, 10, 7, 0.8);
  border: 1px solid rgba(0, 230, 168, 0.3);
  border-radius: 6px;
  color: #8be0bf;
  font-size: clamp(10px, 1.1vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  outline: none;
  text-align: center;
  white-space: nowrap;
  transition: all 120ms ease;
}

.ctrl-mode-btn.is-active {
  background: rgba(0, 255, 170, 0.2);
  border-color: #00ffaa;
  color: #00ffaa;
  box-shadow: 0 0 8px rgba(0, 255, 170, 0.25);
}

/* Sort Select */
.ctrl-sort-select {
  width: 100%;
  height: 32px;
  padding: 2px 8px;
  background: rgba(2, 10, 7, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.35);
  border-radius: 6px;
  color: #ffffff;
  font-size: clamp(11px, 1.1vw, 12px);
  outline: none;
  cursor: pointer;
}

/* Category Filter Pills Grid */
.ctrl-categories-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 230, 168, 0.3) transparent;
}

.ctrl-cat-pill {
  padding: 4px 9px;
  background: rgba(2, 10, 7, 0.8);
  border: 1px solid rgba(0, 230, 168, 0.25);
  border-radius: 10px;
  color: #8be0bf;
  font-size: clamp(9.5px, 1.1vw, 11px);
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: all 120ms ease;
}

.ctrl-cat-pill.is-active {
  background: rgba(0, 255, 170, 0.22);
  border-color: #00ffaa;
  color: #00ffaa;
  box-shadow: 0 0 8px rgba(0, 255, 170, 0.3);
}

.ctrl-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 230, 168, 0.2);
}

.ctrl-reset-btn {
  font-size: 10px;
  font-weight: 700;
  color: #8be0bf;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  text-decoration: underline;
  padding: 0;
}

.ctrl-done-btn {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(0, 255, 170, 0.2);
  border: 1px solid rgba(0, 230, 168, 0.5);
  color: #00ffaa;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

/* ==========================================================================
   4. CONTENT & FEED CONTAINER (PORTALS & MASTERS)
   Immediately follows Universal Search
   ========================================================================== */
.nav-screen-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  box-sizing: border-box;
}

.feed-content-area {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: auto;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* 1. АФИША (MODE-CARDS): Centered column of monumental posters */
.feed-content-area.mode-cards {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

/* 2. ПЛИТКА (MODE-GRID): Responsive Multi-Column Grid */
.feed-content-area.mode-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Tablet portrait & up in EXPANDED mode: 2 columns */
@media (min-width: 600px) {
  .frame.is-expanded .feed-content-area.mode-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* Tablet landscape & desktop in EXPANDED mode: 3 columns */
@media (min-width: 960px) {
  .frame.is-expanded .feed-content-area.mode-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

/* Wide desktop in EXPANDED mode: 4 columns */
@media (min-width: 1300px) {
  .frame.is-expanded .feed-content-area.mode-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

/* Ultra-wide in EXPANDED mode: 6 columns */
@media (min-width: 1750px) {
  .frame.is-expanded .feed-content-area.mode-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 18px !important;
  }
}

/* 3. СПИСОК (MODE-LIST): Responsive Multi-Column List Cards */
.feed-content-area.mode-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Tablet portrait & up in EXPANDED mode: 2 columns */
@media (min-width: 680px) {
  .frame.is-expanded .feed-content-area.mode-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Tablet landscape & desktop in EXPANDED mode: 3 columns */
@media (min-width: 1100px) {
  .frame.is-expanded .feed-content-area.mode-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

/* Wide desktop in EXPANDED mode: 4 columns */
@media (min-width: 1600px) {
  .frame.is-expanded .feed-content-area.mode-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

/* Hide dividers in grid and list modes so columns never break */
.feed-content-area.mode-grid .portal-feed-divider,
.feed-content-area.mode-list .portal-feed-divider {
  display: none !important;
}

/* ==========================================================================
   5. PORTAL CARD (STRICT: TOP RATING, CENTER POSTER, BOTTOM NAME)
   ========================================================================== */
.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(6, 22, 16, 0.95) 0%, rgba(2, 10, 7, 0.98) 100%);
  border: 1.5px solid rgba(0, 230, 168, 0.45);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 255, 170, 0.12);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  user-select: none;
  outline: none;
  text-align: left;
}

.portal-card:hover {
  transform: translateY(-2px);
  border-color: #00ffaa;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 255, 170, 0.38);
}

.portal-card:active {
  transform: translateY(1px) scale(0.995);
}

/* TOP: RATING BAR (Delicate, clean) */
.portal-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(1, 8, 5, 0.85);
  border-bottom: 1px solid rgba(0, 230, 168, 0.22);
  flex-shrink: 0;
}

.portal-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #ffaa00;
}

.portal-rating-count {
  font-size: 9.5px;
  font-weight: 600;
  color: #8be0bf;
}

.portal-card-id-badge {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.1);
  border: 1px solid rgba(0, 230, 168, 0.35);
  color: #00ffaa;
}

/* CENTER: POSTER (2:3 VERTICAL, NEVER STRETCH) */
.portal-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #020b08 0%, #051a13 50%, #020b08 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 260ms ease;
}

.portal-card:hover .portal-poster-img {
  transform: scale(1.025);
}

/* BOTTOM: INFO BAR */
.portal-card-bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
  background: rgba(2, 10, 7, 0.95);
  border-top: 1px solid rgba(0, 230, 168, 0.18);
}

.portal-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-card-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 255, 170, 0.25);
}

.portal-card-creator {
  font-size: 10.5px;
  color: #64ffda;
  letter-spacing: 0.3px;
}

.portal-card-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.portal-mini-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.1);
  border: 1px solid rgba(0, 230, 168, 0.25);
  color: #8be0bf;
  text-transform: uppercase;
}

/* ==========================================================================
   6. DEDICATED PRESENTATION MODES: POSTER / TILE / LIST
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. PORTAL & MASTER POSTER MODE (HERO / SHOWCASE)
   -------------------------------------------------------------------------- */
.portal-card.portal-card-poster {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .portal-card.portal-card-poster {
    max-width: 480px;
  }
}

.portal-card.portal-card-poster .portal-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden;
  background: #020b08;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-poster-picture {
  width: 100%;
  height: 100%;
  display: block;
}

.portal-card.portal-card-poster .portal-card-arrow {
  color: #00ffaa;
  font-weight: 700;
  font-size: 18px;
}

.portal-real-badge {
  color: #00ffaa;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 10px;
}

.portal-card-tagline {
  font-size: 12px;
  color: #c7efe1;
  line-height: 1.45;
  margin-top: 2px;
}

/* MASTER POSTER (HERO: ART -> NAME / ROLE / STATUS -> SHORT INFO / CTA) */
.master-card.master-card-poster {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

.master-card.master-card-poster .master-poster-wrap {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1 !important;
  margin: 16px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #020b08 0%, #051a13 50%, #020b08 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 230, 168, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 255, 170, 0.2);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

@media (max-width: 480px) {
  .master-card.master-card-poster .master-poster-wrap {
    max-width: 290px;
    margin: 12px auto 6px;
    border-radius: 10px;
  }
}

.master-card.master-card-poster .master-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

.master-card-demo.master-card-poster .master-poster-wrap {
  padding: 8px;
}

.master-card-demo.master-card-poster .master-poster-img {
  object-fit: contain !important;
}

.master-card-first-real.master-card-poster .master-poster-wrap {
  padding: 0 !important;
}

.master-card-first-real.master-card-poster .master-poster-img {
  object-fit: cover !important;
}

.master-card.master-card-poster .master-card-bottom-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 20px 22px !important;
  gap: 8px !important;
  border-top: none !important;
}

.master-card-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.master-card-name-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 170, 0.4);
}

.master-card-secondary-name-title {
  font-size: 14px;
  font-weight: 700;
  color: #8be0bf;
  letter-spacing: 0.5px;
}

.master-card-badges-row-centered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.master-role-pill {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 230, 168, 0.35);
  color: #64ffda;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.master-card-tagline-centered {
  font-size: 12.5px;
  color: #c7efe1;
  line-height: 1.5;
  max-width: 520px;
  margin: 4px auto 0;
  text-align: center;
}

.master-card-tags-centered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.master-card-action-row-centered {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.master-card.master-card-poster .btn-open-master-space {
  min-width: 200px;
  width: 100%;
  max-width: 340px;
  padding: 11px 18px;
  font-size: clamp(11px, 1.2vw, 12.5px);
  font-weight: 800;
  letter-spacing: 0.8px;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .master-card.master-card-poster {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .master-card.master-card-poster .master-poster-wrap {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 12px auto 6px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .master-card.master-card-poster .master-card-bottom-bar {
    width: 100% !important;
    padding: 10px 8px 16px !important;
    box-sizing: border-box !important;
  }
  .master-card.master-card-poster .master-card-name-title {
    font-size: 20px !important;
  }
  .master-card.master-card-poster .master-card-secondary-name-title {
    font-size: 13px !important;
  }
  .master-card.master-card-poster .master-card-tagline-centered {
    font-size: 11.5px !important;
    padding: 0 4px !important;
  }
  .master-card.master-card-poster .btn-open-master-space {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 280px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   B. PORTAL & MASTER TILE MODE (REAL MULTI-COLUMN GRID)
   -------------------------------------------------------------------------- */
.portal-card.portal-card-tile,
.master-card.master-card-tile {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: rgba(4, 16, 12, 0.95) !important;
  border: 1px solid rgba(0, 230, 168, 0.35) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.portal-card.portal-card-tile:hover,
.master-card.master-card-tile:hover {
  transform: translateY(-3px) scale(1.01) !important;
  border-color: #00ffaa !important;
  box-shadow: 0 8px 24px rgba(0, 255, 170, 0.28) !important;
}

.portal-tile-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2 !important;
  background: linear-gradient(135deg, #020805 0%, #04140e 50%, #020805 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-tile-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portal-tile-overlay-top {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.portal-tile-rating {
  font-size: 10px;
  font-weight: 800;
  color: #ffaa00;
  background: rgba(1, 8, 5, 0.85);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 170, 0, 0.35);
  backdrop-filter: blur(6px);
}

.portal-tile-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(2, 10, 7, 0.96);
  border-top: 1px solid rgba(0, 230, 168, 0.2);
}

.portal-tile-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.4px;
}

.portal-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.portal-tile-category {
  font-size: 9px;
  font-weight: 700;
  color: #8be0bf;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portal-mini-dot-real {
  font-size: 8.5px;
  font-weight: 800;
  color: #00ffaa;
}

/* MASTER TILE */
.master-tile-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #020805;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.master-tile-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
}

.master-card-demo .master-tile-poster-wrap {
  padding: 6px;
}

.master-card-demo .master-tile-poster-img {
  object-fit: contain !important;
}

.master-card-first-real .master-tile-poster-wrap {
  padding: 0 !important;
}

.master-card-first-real .master-tile-poster-img {
  object-fit: cover !important;
}

.master-tile-badge-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.master-tile-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(2, 10, 7, 0.96);
  border-top: 1px solid rgba(0, 230, 168, 0.2);
}

.master-tile-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-tile-secondary {
  font-size: 11px;
  color: #8be0bf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-tile-role {
  font-size: 9.5px;
  font-weight: 700;
  color: #64ffda;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   C. PORTAL & MASTER LIST MODE (COMPACT HORIZONTAL ROW CARDS IN ADAPTIVE GRID)
   -------------------------------------------------------------------------- */
.portal-card.portal-card-list,
.master-card.master-card-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 80px !important;
  border-radius: 10px !important;
  background: rgba(4, 16, 12, 0.95) !important;
  border: 1px solid rgba(0, 230, 168, 0.3) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-right: 12px !important;
  transition: transform 140ms ease, border-color 140ms ease !important;
}

.portal-card.portal-card-list:hover,
.master-card.master-card-list:hover {
  transform: translateY(-2px) !important;
  border-color: #00ffaa !important;
  box-shadow: 0 4px 16px rgba(0, 255, 170, 0.22) !important;
}

.portal-list-thumb-wrap {
  width: 58px;
  height: 100%;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  overflow: hidden;
  background: #020805;
}

.portal-list-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portal-list-body {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.portal-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.portal-list-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-list-tagline {
  font-size: 10.5px;
  color: #9cd4be;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-list-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #8be0bf;
  margin-top: 1px;
}

.portal-list-rating {
  font-weight: 800;
  color: #ffaa00;
}

.portal-list-sep {
  opacity: 0.4;
}

.portal-list-cat {
  text-transform: uppercase;
  font-weight: 700;
}

.portal-list-real {
  font-weight: 800;
  color: #00ffaa;
}

.portal-list-arrow {
  color: #00ffaa;
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
}

/* MASTER LIST CARD */
.master-list-thumb-wrap {
  width: 76px;
  height: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  overflow: hidden;
  background: #020805;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.master-list-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.master-card-demo .master-list-thumb-wrap {
  padding: 4px;
}

.master-card-demo .master-list-thumb-img {
  object-fit: contain;
}

.master-card-first-real .master-list-thumb-wrap {
  padding: 0 !important;
}

.master-card-first-real .master-list-thumb-img {
  object-fit: cover !important;
}

.master-list-body {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.master-list-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.master-list-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-list-sec {
  font-size: 11px;
  color: #8be0bf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.master-list-role {
  font-size: 10.5px;
  font-weight: 700;
  color: #64ffda;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-list-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #8be0bf;
  margin-top: 1px;
}

.master-list-sep {
  opacity: 0.4;
}

.master-list-tag {
  text-transform: uppercase;
  font-weight: 700;
}

.master-list-arrow {
  color: #00ffaa;
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
}

/* ==========================================================================
   7. DECORATIVE CHAMELEON DIVIDER (BREATHING PAUSE BETWEEN WORLDS)
   Textless, Darkened Semi-Transparent, Soft Emerald/Cyan/Blue/Violet Shimmer
   ========================================================================== */
.portal-feed-divider {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 52px;
  max-height: 64px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0, 230, 168, 0.28);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.65), 
    0 0 16px rgba(0, 255, 170, 0.08), 
    inset 0 0 16px rgba(0, 212, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
  margin: 2px 0;
  pointer-events: none;
  user-select: none;
}

/* Semi-Transparent Living Chameleon Surface (Emerald / Cyan / Blue / Violet) */
.divider-chameleon-surface {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(2, 16, 12, 0.82) 0%,
    rgba(4, 26, 32, 0.75) 24%,
    rgba(18, 10, 36, 0.72) 50%,
    rgba(6, 28, 36, 0.75) 76%,
    rgba(2, 16, 12, 0.82) 100%
  );
  background-size: 260% 260%;
  animation: dividerChameleonFlow 14s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes dividerChameleonFlow {
  0% {
    background-position: 0% 40%;
    filter: brightness(0.92) contrast(1.02);
  }
  50% {
    background-position: 100% 60%;
    filter: brightness(1.08) contrast(1.06);
  }
  100% {
    background-position: 0% 40%;
    filter: brightness(0.92) contrast(1.02);
  }
}

/* Subtle Organic Glow Spots (Cosmic / Nebula Atmosphere) */
.portal-feed-divider::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 15%;
  width: 70%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 255, 170, 0.12) 0%,
    rgba(0, 212, 255, 0.08) 40%,
    rgba(140, 60, 255, 0.05) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: dividerAuraPulse 9s ease-in-out infinite alternate;
}

@keyframes dividerAuraPulse {
  0% { transform: scale(0.92) translateX(-3%); opacity: 0.6; }
  100% { transform: scale(1.08) translateX(3%); opacity: 0.95; }
}

/* Central Hairline with Signature Diamond Glyph (Breathing Pause, No Text) */
.divider-hairline {
  position: relative;
  z-index: 3;
  width: 82%;
  max-width: 520px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 170, 0.15) 20%,
    rgba(100, 255, 218, 0.55) 50%,
    rgba(0, 212, 255, 0.15) 80%,
    transparent 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider-gem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: #64ffda;
  background: rgba(3, 16, 12, 0.9);
  border: 1px solid rgba(0, 255, 170, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.35), 0 0 4px rgba(0, 212, 255, 0.4);
  line-height: 1;
  text-shadow: 0 0 6px #00ffa0;
  user-select: none;
}

/* Adaptability: Mode Grid (Плитка) */
.feed-content-area.mode-grid .portal-feed-divider {
  min-height: 32px;
  max-height: 36px;
  height: 34px;
  margin: 0;
  border-radius: 8px;
}
.feed-content-area.mode-grid .divider-hairline {
  width: 60%;
}
.feed-content-area.mode-grid .divider-gem {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

/* Adaptability: Mode List (Список) */
.feed-content-area.mode-list .portal-feed-divider {
  min-height: 18px;
  max-height: 22px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.feed-content-area.mode-list .divider-chameleon-surface {
  opacity: 0.4;
  border-radius: 6px;
}
.feed-content-area.mode-list .divider-gem {
  display: none;
}
.feed-content-area.mode-list .divider-hairline {
  width: 90%;
  opacity: 0.6;
}

/* ==========================================================================
   8. MASTER CARD (MASTERS FEED)
   Portrait, Name, ID, Rating, Tags, Specialty
   ========================================================================== */
.master-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(6, 22, 16, 0.95) 0%, rgba(2, 10, 7, 0.98) 100%);
  border: 1.5px solid rgba(0, 230, 168, 0.45);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 255, 170, 0.12);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  user-select: none;
  outline: none;
  text-align: left;
}

.master-card:hover {
  transform: translateY(-2px);
  border-color: #00ffaa;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 255, 170, 0.38);
}

.master-card:active {
  transform: translateY(1px) scale(0.995);
}

.master-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(1, 8, 5, 0.85);
  border-bottom: 1px solid rgba(0, 230, 168, 0.22);
}

.master-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #020b08;
  display: flex;
  align-items: center;
  justify-content: center;
}

.master-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.master-card-bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
  background: rgba(2, 10, 7, 0.95);
  border-top: 1px solid rgba(0, 230, 168, 0.18);
}

.master-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.master-card-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.master-card-alias-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.master-card-alias-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
  margin-bottom: 2px;
}

.master-card-alias-tag {
  font-size: 11px;
  font-weight: 600;
  color: #64ffda;
  letter-spacing: 0.05em;
}

.master-card-alias-status {
  font-size: 8.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: #ffb74d;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.master-card-spec {
  font-size: 11px;
  font-weight: 700;
  color: #64ffda;
}

.master-card-tagline {
  font-size: 11px;
  line-height: 1.35;
  color: #b7e8d3;
  margin-top: 2px;
}

/* ==========================================================================
   9. WHAT'S NEW VIEW (CLEAN INSPIRING CARDS)
   ========================================================================== */
.whatsnew-content-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: navFadeIn 200ms ease-out forwards;
}

.whatsnew-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: rgba(4, 18, 12, 0.92);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
}

.whatsnew-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #00ffaa;
  text-transform: uppercase;
}

.whatsnew-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.whatsnew-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #c0edd8;
}

@media (min-width: 600px) and (min-height: 700px) {
  .frame:not(.is-expanded) .whatsnew-content-area {
    gap: 16px;
  }
  .frame:not(.is-expanded) .whatsnew-card {
    padding: 18px 22px;
    gap: 8px;
  }
  .frame:not(.is-expanded) .whatsnew-title {
    font-size: 16px;
  }
  .frame:not(.is-expanded) .whatsnew-desc {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   10. REAL PORTAL DETAIL VIEW (CLEAN, NO DUPLICATE BACK BUTTONS)
   Starts immediately under running strip
   ========================================================================== */
.portal-detail-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: navFadeIn 200ms ease-out forwards;
}

.detail-modular-card {
  background: rgba(4, 18, 12, 0.94);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.detail-modular-card.text-block {
  padding: 16px;
}

.detail-hero-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #020b08;
  overflow: hidden;
}

.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(2, 10, 7, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
}

.detail-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-shadow: 0 0 14px rgba(0, 255, 170, 0.5);
}

.detail-hero-creator {
  font-size: 11px;
  color: #64ffda;
  letter-spacing: 0.4px;
}

.detail-block-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 8px;
}

.detail-block-text {
  font-size: 12px;
  line-height: 1.6;
  color: #d1f4e5;
  margin-bottom: 8px;
}

.detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
}

.detail-gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(0, 230, 168, 0.35);
}

.detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: rgba(2, 10, 7, 0.85);
  font-size: 9px;
  color: #8be0bf;
  text-align: center;
}

/* Links */
.detail-links-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.detail-link-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 255, 170, 0.08);
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: all 140ms ease;
}

.detail-link-chip:hover {
  background: rgba(0, 255, 170, 0.2);
  border-color: #00ffaa;
  transform: translateX(2px);
}

/* Animation */
@keyframes navFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   11. KIO ART MUSIK PORTAL SPECIALIZED ARCHITECTURE STYLES
   ========================================================================== */
.detail-chameleon-card {
  background: linear-gradient(
    135deg,
    rgba(3, 20, 15, 0.94) 0%,
    rgba(4, 28, 36, 0.90) 45%,
    rgba(22, 10, 38, 0.88) 100%
  ) !important;
  border: 1.5px solid rgba(0, 230, 168, 0.52) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.75), 
    0 0 16px rgba(0, 255, 170, 0.12),
    inset 0 0 20px rgba(0, 212, 255, 0.05) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.detail-badge-counter {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 255, 170, 0.35);
  color: #64ffda;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* States Grid (11 Canonical States) */
.detail-states-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-state-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(2, 12, 9, 0.82);
  border: 1px solid rgba(0, 230, 168, 0.22);
  border-radius: 10px;
  align-items: center;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.detail-state-item:hover {
  background: rgba(4, 20, 15, 0.95);
  border-color: rgba(0, 255, 170, 0.5);
  transform: translateX(2px);
}

.detail-state-thumb-wrap {
  width: 90px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #020806;
}

.detail-state-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-state-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-state-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-state-code {
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.detail-state-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.detail-state-desc {
  font-size: 11px;
  color: #9cd4be;
  line-height: 1.35;
  white-space: normal;
}

.detail-state-link {
  font-size: 10.5px;
  font-weight: 700;
  color: #64ffda;
  cursor: pointer;
  margin-top: 2px;
  display: inline-block;
  user-select: none;
}

.detail-state-link:hover {
  text-decoration: underline;
  color: #00ffaa;
}

/* New Works Grid (Live Studio Intake) */
.detail-newworks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.detail-newwork-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: rgba(3, 14, 10, 0.85);
  border: 1.2px solid rgba(0, 230, 168, 0.3);
  border-radius: 10px;
  align-items: center;
}

.detail-newwork-cover {
  width: 68px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 255, 170, 0.25);
}

.detail-newwork-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-newwork-badge {
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 170, 0, 0.16);
  border: 1px solid rgba(255, 170, 0, 0.4);
  color: #ffb74d;
  width: fit-content;
  letter-spacing: 0.05em;
}

.detail-newwork-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.detail-newwork-creator {
  font-size: 11px;
  color: #64ffda;
}

.detail-newwork-note {
  font-size: 10.5px;
  color: #92caa5;
  line-height: 1.35;
}

/* Capabilities Grid */
.detail-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.detail-capability-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(2, 10, 7, 0.8);
  border: 1px solid rgba(0, 230, 168, 0.28);
  border-radius: 10px;
  justify-content: space-between;
}

.detail-capability-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.detail-capability-desc {
  font-size: 11px;
  color: #a3d8c4;
  line-height: 1.4;
  flex: 1;
}

.detail-capability-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(0, 255, 170, 0.1);
  border: 1.2px solid rgba(0, 230, 168, 0.5);
  border-radius: 8px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: all 140ms ease;
}

.detail-capability-btn:hover {
  background: rgba(0, 255, 170, 0.22);
  border-color: #00ffaa;
  transform: translateY(-1px);
}

/* Related Portals Grid */
.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.detail-related-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(3, 14, 10, 0.8);
  border: 1px solid rgba(0, 230, 168, 0.25);
  border-radius: 10px;
}

.detail-related-badge {
  font-size: 9px;
  font-weight: 800;
  color: #00e5ff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-related-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.detail-related-desc {
  font-size: 11px;
  color: #a0ceba;
  line-height: 1.35;
}

/* External Channels */
.detail-channels-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-channel-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(1, 10, 7, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.3);
  border-radius: 8px;
}

.detail-channel-label {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.detail-channel-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #b0d8c7;
}

/* ==========================================================================
   GLOBAL SEARCH STICKY & HIGHLIGHT BEHAVIOR
   ========================================================================== */
.portal-feed-card,
.portal-grid-card,
.portal-list-item,
.master-feed-card,
.master-grid-card,
.master-list-item,
.detail-state-item,
.studio-track-card,
.studio-top10-item,
.detail-newwork-card {
  scroll-margin-top: 72px;
}

@keyframes searchMatchGlow {
  0% {
    box-shadow: 0 0 0 2px #00ffaa, 0 0 24px rgba(0, 255, 170, 0.7);
    border-color: #00ffaa !important;
  }
  50% {
    box-shadow: 0 0 0 2px #00ffaa, 0 0 16px rgba(0, 255, 170, 0.5);
    border-color: #00ffaa !important;
  }
  100% {
    box-shadow: none;
  }
}

.search-match-highlight {
  animation: searchMatchGlow 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   INTERACTIVE STATE CARDS (TAP -> STATE VIEW)
   ========================================================================== */
.detail-state-item {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  user-select: none;
}

.detail-state-item:hover {
  transform: translateY(-2px);
  background: rgba(6, 26, 18, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 255, 170, 0.2);
}

.detail-state-item:active {
  transform: translateY(0) scale(0.99);
}

.detail-state-enter-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #00ffaa;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   STATE VIEW (STUDIO MINI-PLAYER MVP)
   ========================================================================== */
.state-view-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: navFadeIn 220ms ease-out forwards;
}

.state-view-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(6, 24, 17, 0.95) 0%, rgba(2, 10, 7, 0.98) 100%);
  border: 1.5px solid rgba(0, 230, 168, 0.45);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

.state-view-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.state-view-code-pill {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid currentColor;
}

.state-view-name {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.state-view-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #c4ebd9;
}

/* Studio Track List in State View */
.studio-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.studio-track-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(3, 15, 11, 0.88);
  border: 1.2px solid rgba(0, 230, 168, 0.3);
  border-radius: 12px;
  transition: all 140ms ease;
  box-sizing: border-box;
}

.studio-track-card:hover {
  background: rgba(5, 22, 16, 0.95);
  border-color: rgba(0, 255, 170, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 255, 170, 0.15);
}

.studio-track-card.is-playing {
  border-color: #00ffaa;
  background: rgba(0, 255, 170, 0.08);
  box-shadow: 0 0 16px rgba(0, 255, 170, 0.35);
}

.studio-track-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.studio-track-cover-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #020805;
  border: 1px solid rgba(0, 230, 168, 0.35);
  flex-shrink: 0;
}

.studio-track-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-track-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.studio-track-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.studio-track-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #8be0bf;
}

.studio-track-state-badge {
  font-weight: 700;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 3 Main Actions: PLAY, KAMILFO, INFO */
.studio-track-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.studio-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 120ms ease;
  user-select: none;
  box-sizing: border-box;
}

.studio-btn-play {
  background: rgba(0, 255, 170, 0.15);
  border: 1.2px solid rgba(0, 255, 170, 0.5);
  color: #00ffaa;
  min-width: 58px;
}

.studio-btn-play:hover {
  background: rgba(0, 255, 170, 0.3);
  border-color: #00ffaa;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.4);
}

.studio-btn-play.is-playing {
  background: #00ffaa;
  color: #020b07;
  font-weight: 900;
}

.studio-btn-kamilfo {
  background: rgba(255, 102, 178, 0.12);
  border: 1.2px solid rgba(255, 102, 178, 0.4);
  color: #ff99cc;
}

.studio-btn-kamilfo:hover {
  background: rgba(255, 102, 178, 0.25);
  border-color: #ff66b2;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 102, 178, 0.4);
}

@keyframes kamilfoPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 102, 178, 0.8); }
  100% { transform: scale(1); }
}

.kamilfo-active-pulse {
  animation: kamilfoPulse 500ms ease-out forwards;
}

.studio-btn-info {
  width: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1.2px solid rgba(255, 255, 255, 0.2);
  color: #b0d8c7;
}

.studio-btn-info:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
}

/* ==========================================================================
   STUDIO WEEKLY TOP-10 (REFINED RANKING SECTION)
   ========================================================================== */
.studio-top10-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studio-top10-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(4, 18, 13, 0.85);
  border: 1.2px solid rgba(0, 230, 168, 0.25);
  border-radius: 10px;
  transition: all 130ms ease;
}

.studio-top10-item:hover {
  background: rgba(6, 24, 18, 0.95);
  border-color: rgba(0, 255, 170, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.studio-top10-item.rank-1 {
  border-color: rgba(255, 215, 0, 0.6);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(4, 18, 13, 0.85) 100%);
}

.studio-top10-item.rank-2 {
  border-color: rgba(200, 210, 220, 0.5);
  background: linear-gradient(90deg, rgba(200, 210, 220, 0.08) 0%, rgba(4, 18, 13, 0.85) 100%);
}

.studio-top10-item.rank-3 {
  border-color: rgba(205, 127, 50, 0.5);
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.08) 0%, rgba(4, 18, 13, 0.85) 100%);
}

.studio-top10-rank-num {
  font-size: 13px;
  font-weight: 900;
  width: 24px;
  text-align: center;
  color: #00ffaa;
  flex-shrink: 0;
}

.studio-top10-item.rank-1 .studio-top10-rank-num { color: #ffd700; }
.studio-top10-item.rank-2 .studio-top10-rank-num { color: #e2e8f0; }
.studio-top10-item.rank-3 .studio-top10-rank-num { color: #cd7f32; }

/* ==========================================================================
   TRACK INFO MODAL OVERLAY
   ========================================================================== */
.track-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: navFadeIn 160ms ease-out forwards;
}

.track-info-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(135deg, rgba(6, 24, 18, 0.98) 0%, rgba(2, 10, 7, 0.99) 100%);
  border: 1.5px solid rgba(0, 255, 170, 0.45);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 255, 170, 0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.track-info-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.track-info-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.track-info-close {
  background: transparent;
  border: none;
  color: #8be0bf;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.track-info-close:hover {
  color: #ffffff;
}

.track-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.track-info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 230, 168, 0.15);
}

.track-info-cell-lbl {
  font-size: 9.5px;
  color: #72bca0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.track-info-cell-val {
  font-size: 12px;
  font-weight: 700;
  color: #e6fff7;
}

.track-info-story {
  font-size: 12px;
  line-height: 1.55;
  color: #b8e2d0;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: 8px;
  border-left: 2.5px solid #00ffaa;
}

/* Transient Toast */
.transient-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(0, 230, 168, 0.95);
  color: #020b07;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 18px rgba(0, 255, 170, 0.6);
  pointer-events: none;
  animation: toastFade 1.2s ease-out forwards;
}

@keyframes toastFade {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ==========================================================================
   TRACK DETAIL PAGE (FULL-SCREEN IN CONTENT AREA, NOT MODAL POPUP)
   ========================================================================== */
.track-detail-page {
  padding: 10px 10px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: trackDetailFadeIn 220ms ease forwards;
}

@keyframes trackDetailFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.track-artwork-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(0, 255, 170, 0.4);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 255, 170, 0.08) 0%, rgba(2, 12, 8, 0.95) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 170, 0.15);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-artwork-card:hover {
  transform: translateY(-2px);
  border-color: #00ffaa;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 255, 170, 0.35);
}

.track-artwork-img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
}

.artwork-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(2, 14, 10, 0.85);
  border: 1px solid rgba(0, 255, 170, 0.45);
  color: #00ffaa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: background 160ms ease;
}

.track-artwork-card:hover .artwork-zoom-hint {
  background: rgba(0, 255, 170, 0.25);
  color: #ffffff;
}

.track-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track-detail-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 0 18px rgba(0, 255, 170, 0.35);
}

.track-detail-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #64ffda;
  font-weight: 600;
}

.track-detail-dot {
  opacity: 0.5;
}

.track-detail-trackid {
  font-family: monospace;
  font-size: 12px;
  color: #8be0bf;
}

.track-detail-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.track-state-badge-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid;
  letter-spacing: 0.4px;
}

.track-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0, 230, 168, 0.12);
  border: 1px solid rgba(0, 230, 168, 0.35);
  color: #00ffaa;
  letter-spacing: 0.5px;
}

.track-detail-actions-bar {
  display: flex;
  gap: 10px;
}

.track-detail-play-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 230, 168, 0.3) 0%, rgba(0, 180, 130, 0.18) 100%);
  border: 1.5px solid #00ffaa;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 255, 170, 0.25);
  transition: all 140ms ease;
}

.track-detail-play-btn:hover {
  background: linear-gradient(135deg, rgba(0, 230, 168, 0.45) 0%, rgba(0, 200, 150, 0.28) 100%);
  box-shadow: 0 6px 24px rgba(0, 255, 170, 0.45);
  transform: translateY(-1.5px);
}

.track-detail-play-btn.is-playing {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.35) 0%, rgba(202, 138, 4, 0.22) 100%);
  border-color: #ffd700;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35);
}

.track-detail-kamilfo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 0, 128, 0.12);
  border: 1.5px solid rgba(255, 0, 128, 0.45);
  color: #ff66aa;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 140ms ease;
}

.track-detail-kamilfo-btn:hover {
  background: rgba(255, 0, 128, 0.25);
  border-color: #ff0080;
  color: #ffffff;
  transform: translateY(-1.5px);
}

.track-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track-detail-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #72bca0;
  text-transform: uppercase;
}

.track-detail-story-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(4, 20, 14, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.28);
  font-size: 13px;
  line-height: 1.6;
  color: #d1f4e8;
  border-left: 3.5px solid #00ffaa;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.track-metadata-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.track-meta-cell {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(3, 14, 10, 0.75);
  border: 1px solid rgba(0, 230, 168, 0.2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.meta-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #64ffda;
  opacity: 0.85;
}

.meta-val {
  font-size: 12px;
  font-weight: 700;
  color: #e6fff7;
}

/* ==========================================================================
   FULLSCREEN ARTWORK VIEWER
   ========================================================================== */
.artwork-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.artwork-viewer-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.artwork-viewer-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(2, 14, 10, 0.85);
  border: 1.5px solid rgba(0, 255, 170, 0.45);
  color: #00ffaa;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 510;
  transition: all 160ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 255, 170, 0.25);
}

.artwork-viewer-close-btn:hover {
  background: rgba(0, 255, 170, 0.2);
  color: #ffffff;
  border-color: #00ffaa;
  transform: scale(1.08);
}

.artwork-viewer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

.artwork-viewer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
}

.artwork-viewer-img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 255, 170, 0.4);
  box-shadow: 0 0 35px rgba(0, 255, 170, 0.22), 0 20px 50px rgba(0, 0, 0, 0.9);
  animation: viewerImgZoom 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes viewerImgZoom {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.artwork-viewer-caption {
  margin-top: 12px;
  color: #c4f7e5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(0, 255, 170, 0.4);
  text-align: center;
}

/* ==========================================================================
   FLAGSHIPS ROOT & MULTI-METRIC CARDS
   ========================================================================== */
.flagships-feed-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.flagship-rank-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(202, 138, 4, 0.2) 100%);
  border: 1px solid #ffd700;
  color: #fef08a;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.flagship-status-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.flagship-status-badge.confirmed {
  background: rgba(0, 230, 168, 0.15);
  border: 1px solid rgba(0, 230, 168, 0.45);
  color: #00ffaa;
}

.flagship-status-badge.demo {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #fef08a;
}

.flagship-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flagship-metric-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.flagship-metric-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #8be0bf;
  letter-spacing: 0.3px;
}

.flagship-metric-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}

/* ==========================================================================
   MASTER CARD PSEUDONYM IDENTITY
   ========================================================================== */
.master-card-pseudonym {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-shadow: 0 0 12px rgba(0, 255, 170, 0.35);
}

.master-badge-demo {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #fef08a;
  letter-spacing: 0.4px;
}

.master-card-realname-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8be0bf;
  margin-top: 2px;
  margin-bottom: 4px;
}

.master-card-realname {
  font-weight: 600;
  opacity: 0.85;
}

.master-card-sep {
  opacity: 0.5;
}

.master-card-id-sub {
  font-family: monospace;
  opacity: 0.75;
}

/* ==========================================================================
   CREATE PORTAL SECTION (MVP FLOW)
   ========================================================================== */
.create-portal-page {
  padding: 10px 8px 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  gap: 14px;
  animation: sectionFadeIn 240ms ease forwards;
  box-sizing: border-box;
}

@media (min-width: 600px) and (min-height: 700px) {
  .frame:not(.is-expanded) .create-portal-page {
    justify-content: flex-start;
  }
  .frame:not(.is-expanded) .create-portal-cards {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }
  .frame:not(.is-expanded) .create-portal-nav-btn {
    flex: 1 1 0;
    min-height: 96px;
    max-height: 160px;
    padding: 18px 20px;
  }
}

.create-portal-hero {
  padding: 16px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, 0.15) 0%, rgba(3, 14, 10, 0.9) 100%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.create-portal-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #2dd4bf;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.create-portal-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0 0 8px;
}

.create-portal-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #c4f7e5;
  margin: 0;
}

.create-portal-policy-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(3, 14, 10, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.policy-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.policy-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.policy-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.policy-card-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #a7f3d0;
}

.create-portal-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-portal-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(3, 14, 10, 0.88);
  border: 1.2px solid rgba(0, 230, 168, 0.3);
  cursor: pointer;
  text-align: left;
  transition: all 140ms ease;
  color: #ffffff;
}

.create-portal-nav-btn:hover {
  background: rgba(0, 230, 168, 0.12);
  border-color: #00ffaa;
  transform: translateX(2px);
}

.nav-btn-icon {
  font-size: 20px;
}

.nav-btn-text {
  flex: 1;
}

.nav-btn-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.nav-btn-sub {
  font-size: 11px;
  color: #64ffda;
}

.nav-btn-arrow {
  font-size: 20px;
  color: #00ffaa;
  font-weight: 800;
}

.create-portal-proceed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
  border: 1.5px solid #2dd4bf;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(45, 212, 191, 0.3);
  transition: all 140ms ease;
  margin-top: 4px;
}

.create-portal-proceed-btn:hover {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.45) 0%, rgba(168, 85, 247, 0.45) 100%);
  box-shadow: 0 6px 26px rgba(45, 212, 191, 0.5);
  transform: translateY(-1.5px);
}

.paths-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.path-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(3, 14, 10, 0.88);
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.path-card.path-self {
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: inset 0 0 16px rgba(45, 212, 191, 0.15);
}

.path-card.path-masters {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: inset 0 0 16px rgba(168, 85, 247, 0.15);
}

.path-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64ffda;
}

.path-card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.path-card-layer-tag {
  font-size: 11px;
  font-weight: 700;
  color: #ffd700;
}

.path-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #c4f7e5;
}

.path-card-benefit {
  font-size: 11px;
  color: #67e8f9;
  font-weight: 600;
  margin-top: 4px;
}

.create-app-form-section {
  padding: 16px;
  border-radius: 14px;
  background: rgba(3, 14, 10, 0.9);
  border: 1px solid rgba(0, 230, 168, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.create-app-form-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00ffaa;
  text-transform: uppercase;
}

.create-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #8be0bf;
}

.form-input, .form-select, .form-textarea {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 230, 168, 0.3);
  border-radius: 8px;
  padding: 9px 12px;
  color: #ffffff;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #00ffaa;
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.3);
}

.form-submit-btn {
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 230, 168, 0.25);
  border: 1.5px solid #00ffaa;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 140ms ease;
  margin-top: 6px;
}

.form-submit-btn:hover {
  background: rgba(0, 230, 168, 0.45);
  box-shadow: 0 0 18px rgba(0, 255, 170, 0.4);
}

.create-info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-block {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(3, 14, 10, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
}

.info-block-num {
  font-size: 18px;
  font-weight: 900;
  color: #00ffaa;
  opacity: 0.7;
}

.info-block-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-block-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.info-block-text {
  font-size: 12px;
  line-height: 1.5;
  color: #c4f7e5;
}

/* ==========================================================================
   WHAT'S NEW ROOT
   ========================================================================== */
.whats-new-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  gap: 12px;
  padding-bottom: 24px;
  box-sizing: border-box;
}



/* ==========================================================================
   FIND MASTERPIECE DEDICATED DETAIL STYLES
   ========================================================================== */
.portal-launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.25) 0%, rgba(0, 230, 168, 0.38) 50%, rgba(32, 232, 255, 0.28) 100%);
  border: 1.5px solid #00ffaa;
  border-radius: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 255, 170, 0.3), inset 0 0 14px rgba(0, 255, 170, 0.22);
  transition: all 180ms ease;
  user-select: none;
}

.portal-launch-btn:hover {
  transform: translateY(-1.5px);
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.35) 0%, rgba(0, 230, 168, 0.5) 50%, rgba(32, 232, 255, 0.4) 100%);
  box-shadow: 0 6px 24px rgba(0, 255, 170, 0.48), inset 0 0 20px rgba(0, 255, 170, 0.35);
  border-color: #64ffda;
}

.portal-launch-btn:active {
  transform: translateY(1px);
}

.detail-find-masterpiece-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 600px) {
  .detail-find-masterpiece-grid {
    grid-template-columns: 1fr;
  }
}

.detail-fm-poster-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.detail-fm-poster-frame {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1.2px solid rgba(0, 230, 168, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  background: #020b08;
}

.detail-fm-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-fm-poster-label {
  font-size: 10px;
  color: #8be0bf;
  letter-spacing: 0.3px;
  text-align: center;
}

.detail-fm-features-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-fm-feature-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(2, 10, 7, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.22);
}

.detail-fm-feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.detail-fm-feature-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

.detail-fm-feature-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 230, 168, 0.3);
  color: #64ffda;
  text-transform: uppercase;
}

.detail-fm-feature-desc {
  font-size: 11px;
  line-height: 1.5;
  color: #b0e3cd;
}

/* ==========================================================================
   15. MASTER CARD (SQUARE FIRST REAL MASTER i.ok) & MASTER SPACE STYLES
   ========================================================================== */
.master-card-first-real {
  border-color: rgba(0, 255, 170, 0.65) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 255, 170, 0.22) !important;
}

.master-card-first-real:hover {
  border-color: #00ffaa !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 255, 170, 0.45) !important;
}

.master-poster-wrap.master-poster-square {
  aspect-ratio: 1 / 1 !important;
  background: #020a06;
}

.master-first-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 213, 79, 0.12);
  border: 1px solid rgba(255, 213, 79, 0.35);
  font-size: 9.5px;
  font-weight: 800;
  color: #ffd54f;
  letter-spacing: 0.5px;
}

.master-badge-real {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.14);
  border: 1px solid rgba(0, 255, 170, 0.45);
  color: #00ffaa;
  text-transform: uppercase;
}

.master-card-name-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.btn-open-master-space {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.16) 0%, rgba(0, 230, 255, 0.12) 100%);
  border: 1px solid rgba(0, 255, 170, 0.45);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  transition: all 160ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 255, 170, 0.1);
}

.btn-open-master-space:hover {
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.28) 0%, rgba(0, 230, 255, 0.22) 100%);
  border-color: #00ffaa;
  box-shadow: 0 4px 14px rgba(0, 255, 170, 0.3), inset 0 0 14px rgba(0, 255, 170, 0.2);
  transform: translateY(-1px);
}

.btn-open-master-space:active {
  transform: translateY(1px);
}

/* ==========================================================================
   15.5. MASTERS FEED RESPONSIVE PRESENTATION SYSTEM (DIRECTOR PASS)
   - Centered showcase card on wide desktop (max-width: 760px)
   - Square 1:1 artwork preserved on left (280px) and info on right
   - Uniform responsive grid in tile mode without shattered divider rows
   - Anti letter-break rules across all buttons and labels
   ========================================================================== */

/* Universal text & button wrapping protections in Masters */
#mastersFeedContainer,
#mastersFeedContainer *,
.masterspace-root,
.masterspace-root * {
  word-break: normal;
  overflow-wrap: normal;
}

/* 1. MASTERS MODE-CARDS (АФИШИ / POSTERS) */
#mastersFeedContainer.mode-cards {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

#mastersFeedContainer.mode-cards .portal-feed-divider {
  width: 100% !important;
  max-width: 620px !important;
  margin: 4px auto !important;
}

/* 2. MASTERS MODE-GRID (ПЛИТКА / TILES): Handled by universal .feed-content-area.mode-grid */
#mastersFeedContainer.mode-grid .portal-feed-divider {
  display: none !important;
}

/* 3. MASTERS MODE-LIST (СПИСОК / ROWS): Handled by universal .feed-content-area.mode-list */
#mastersFeedContainer.mode-list .portal-feed-divider {
  display: none !important;
}

/* 4. MASTER CARD FOCUS PULSE (On returning from Master Space) */
.master-card-focused {
  border-color: #00ffaa !important;
  box-shadow: 0 0 26px rgba(0, 255, 170, 0.65), 0 8px 30px rgba(0, 0, 0, 0.9) !important;
  animation: masterCardPulse 1.4s ease-out;
}

@keyframes masterCardPulse {
  0% { transform: scale(1.02); border-color: #00ffaa; box-shadow: 0 0 32px rgba(0, 255, 170, 0.8); }
  50% { transform: scale(1.01); border-color: #64ffda; box-shadow: 0 0 20px rgba(0, 255, 170, 0.5); }
  100% { transform: scale(1); }
}

/* MASTER SPACE VIEW */
.masterspace-root {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  padding: 10px 10px 32px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  box-sizing: border-box;
}

.masterspace-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
  backdrop-filter: blur(8px);
}

.masterspace-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(0, 230, 168, 0.35);
  color: #64ffda;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 140ms ease;
}

.masterspace-back-btn:hover {
  border-color: #00ffaa;
  color: #ffffff;
  background: rgba(0, 255, 170, 0.12);
}

.masterspace-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  color: #8be0bf;
  letter-spacing: 0.3px;
}

.masterspace-header-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 28, 20, 0.95) 0%, rgba(2, 10, 7, 0.98) 100%);
  border: 1.5px solid rgba(0, 230, 168, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 170, 0.18);
  overflow: hidden;
}

.masterspace-brand-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 255, 170, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.masterspace-logo-wrap {
  position: relative;
  z-index: 1;
  max-width: 240px;
  margin-bottom: 12px;
}

.masterspace-logo-primary {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 255, 170, 0.25));
}

.masterspace-names-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.masterspace-title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 255, 170, 0.35);
}

.masterspace-secondary-title {
  font-size: 15px;
  font-weight: 600;
  color: #8be0bf;
  letter-spacing: 0.5px;
}

.masterspace-role-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.18) 0%, rgba(0, 229, 255, 0.12) 100%);
  border: 1px solid rgba(0, 230, 168, 0.5);
  color: #64ffda;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.masterspace-status-badge {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffd54f;
  background: rgba(255, 213, 79, 0.1);
  border: 1px solid rgba(255, 213, 79, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
}

.masterspace-identity-box {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 230, 168, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.masterspace-identity-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.masterspace-id-tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #00ffaa;
  padding: 1px 6px;
  background: rgba(0, 255, 170, 0.12);
  border-radius: 4px;
}

.masterspace-id-sub {
  font-size: 10.5px;
  color: #8be0bf;
}

.masterspace-roles-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.masterspace-role-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(2, 16, 11, 0.9);
  border: 1px solid rgba(0, 230, 168, 0.28);
  color: #b7e8d3;
}

.masterspace-role-pill.is-primary {
  border-color: #00ffaa;
  color: #ffffff;
  background: rgba(0, 255, 170, 0.15);
}

.masterspace-role-pill.is-concept {
  border-color: rgba(255, 170, 0, 0.35);
  color: #ffb74d;
}

/* QUICK NAV PILLS */
.masterspace-quick-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 4px;
  background: rgba(2, 10, 7, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid rgba(0, 230, 168, 0.25);
  scrollbar-width: none;
}

.masterspace-quick-nav::-webkit-scrollbar {
  display: none;
}

.ms-nav-pill {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(4, 20, 14, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.3);
  color: #8be0bf;
  cursor: pointer;
  transition: all 140ms ease;
}

.ms-nav-pill:hover,
.ms-nav-pill.is-active {
  background: rgba(0, 255, 170, 0.2);
  border-color: #00ffaa;
  color: #ffffff;
}

/* SECTIONS */
.masterspace-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 22, 16, 0.95) 0%, rgba(2, 10, 7, 0.98) 100%);
  border: 1px solid rgba(0, 230, 168, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.ms-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 230, 168, 0.2);
}

.ms-section-icon {
  font-size: 20px;
}

.ms-section-title-wrap {
  flex: 1;
}

.ms-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;
}

.ms-section-sub {
  font-size: 11px;
  color: #8be0bf;
  margin-top: 1px;
}

.ms-section-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 255, 170, 0.4);
  color: #64ffda;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-section-tag.is-pending {
  background: rgba(255, 170, 0, 0.12);
  border-color: rgba(255, 170, 0, 0.4);
  color: #ffb74d;
}

.ms-section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* PORTAL CATEGORIES GRID */
.ms-portal-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.ms-subcat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
}

.ms-subcat-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ms-subcat-bullet {
  font-size: 10px;
  font-weight: 800;
  color: #00ffaa;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 255, 170, 0.12);
}

.ms-subcat-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.ms-subcat-desc {
  font-size: 10.5px;
  color: #a4dcbe;
  line-height: 1.4;
}

.ms-slot-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #64ffda;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-slot-badge::before {
  content: '✦';
  color: #00ffaa;
}

.ms-notice-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.28);
  font-size: 10.5px;
  color: #80deea;
  line-height: 1.4;
}

.ms-notice-icon {
  font-size: 13px;
}

.ms-card-simple {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-card-simple-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.ms-card-simple-desc {
  margin: 0;
  font-size: 11px;
  color: #b7e8d3;
  line-height: 1.45;
}

.ms-status-chip {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 255, 170, 0.12);
  border: 1px solid rgba(0, 255, 170, 0.4);
  color: #64ffda;
}

/* ABOUT GRID */
.ms-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.ms-about-card {
  padding: 12px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-about-icon {
  font-size: 16px;
  margin-bottom: 2px;
}

.ms-about-title {
  font-size: 12px;
  font-weight: 800;
  color: #00ffaa;
  letter-spacing: 0.4px;
}

.ms-about-text {
  font-size: 11px;
  color: #b7e8d3;
  line-height: 1.45;
}

/* LEARNING GRID */
.ms-learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.ms-learning-card {
  padding: 12px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-learning-badge {
  align-self: flex-start;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 213, 79, 0.12);
  border: 1px solid rgba(255, 213, 79, 0.35);
  color: #ffd54f;
  text-transform: uppercase;
}

.ms-learning-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}

.ms-learning-desc {
  font-size: 10.5px;
  color: #a4dcbe;
  line-height: 1.4;
}

/* CONTACT FORM */
.ms-contact-form-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
}

.ms-contact-prompt {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
}

.ms-intent-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms-intent-btn {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(4, 20, 14, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.3);
  color: #8be0bf;
  cursor: pointer;
  transition: all 140ms ease;
}

.ms-intent-btn:hover,
.ms-intent-btn.is-active {
  background: rgba(0, 255, 170, 0.2);
  border-color: #00ffaa;
  color: #ffffff;
}

.ms-contact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-contact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #8be0bf;
}

.ms-contact-input,
.ms-contact-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(1, 8, 5, 0.9);
  border: 1px solid rgba(0, 230, 168, 0.3);
  color: #ffffff;
  font-family: inherit;
  font-size: 11.5px;
  outline: none;
  transition: border-color 140ms ease;
}

.ms-contact-input:focus,
.ms-contact-textarea:focus {
  border-color: #00ffaa;
}

.ms-contact-action-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-contact-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.22) 0%, rgba(0, 229, 255, 0.16) 100%);
  border: 1px solid rgba(0, 255, 170, 0.5);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 160ms ease;
}

.ms-contact-submit-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.35) 0%, rgba(0, 229, 255, 0.26) 100%);
  border-color: #00ffaa;
  box-shadow: 0 4px 14px rgba(0, 255, 170, 0.3);
}

.ms-contact-disclaimer {
  font-size: 9.5px;
  color: #8be0bf;
  text-align: center;
  font-style: italic;
}

/* LINKS GRID */
.ms-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.ms-link-slot-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
}

.ms-link-icon {
  font-size: 18px;
}

.ms-link-name {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.ms-link-status {
  font-size: 9.5px;
  color: #8be0bf;
}

/* SIGNATURE CARD */
.ms-signature-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(2, 12, 8, 0.85);
  border: 1px solid rgba(0, 230, 168, 0.25);
}

.ms-signature-img-wrap {
  flex-shrink: 0;
  max-width: 140px;
}

.ms-signature-img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 255, 170, 0.2));
}

.ms-signature-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-signature-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.ms-signature-desc {
  margin: 0;
  font-size: 11px;
  color: #b7e8d3;
  line-height: 1.45;
}

.ms-signature-status {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #64ffda;
}

@media (max-width: 600px) {
  .masterspace-title {
    font-size: 22px;
  }
  .ms-signature-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   DIRECTIONS & PROFESSIONS (МОЙ VERADOME -> НАПРАВЛЕНИЯ И ПРОФЕССИИ)
   ========================================================================== */
.directions-entry-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 12px 0 16px 0;
  background: linear-gradient(135deg, rgba(0, 230, 168, 0.14) 0%, rgba(0, 212, 255, 0.09) 100%), rgba(3, 14, 10, 0.88);
  border: 1.2px solid rgba(0, 230, 168, 0.45);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.directions-entry-banner:hover {
  background: linear-gradient(135deg, rgba(0, 255, 170, 0.22) 0%, rgba(0, 212, 255, 0.16) 100%), rgba(4, 20, 14, 0.95);
  border-color: rgba(0, 255, 170, 0.75);
  box-shadow: 0 6px 24px rgba(0, 230, 168, 0.28);
  transform: translateY(-1px);
}

.directions-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 230, 168, 0.16);
  border: 1px solid rgba(0, 255, 170, 0.4);
  color: #00ffaa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.directions-entry-text {
  flex: 1;
  min-width: 0;
}

.directions-entry-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #ffffff;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.directions-entry-subtitle {
  font-size: 11.5px;
  color: #8be0bf;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.directions-entry-arrow {
  font-size: 20px;
  color: #00ffaa;
  font-weight: 300;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.directions-entry-banner:hover .directions-entry-arrow {
  transform: translateX(3px);
}

/* Internal Directions View */
.directions-view-root {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  padding: 12px 14px 36px 14px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  animation: navFadeIn 200ms ease-out forwards;
}

.directions-nav-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.directions-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 230, 168, 0.08);
  border: 1px solid rgba(0, 230, 168, 0.25);
  border-radius: 8px;
  color: #8be0bf;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.directions-back-btn:hover {
  background: rgba(0, 230, 168, 0.18);
  border-color: rgba(0, 255, 170, 0.5);
  color: #00ffaa;
}

.directions-header {
  margin-bottom: 2px;
}

.directions-header-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.directions-header-desc {
  font-size: 12px;
  color: #8be0bf;
  margin: 0;
  line-height: 1.45;
}

/* 2 Main Direction Concept Cards */
.direction-concept-card {
  position: relative;
  flex-shrink: 0;
  background: rgba(3, 14, 10, 0.94);
  border: 1.2px solid rgba(0, 230, 168, 0.35);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.direction-concept-card:hover {
  border-color: rgba(0, 255, 170, 0.6);
}

.direction-concept-card.master-shedevr {
  border-color: rgba(0, 212, 255, 0.4);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.06) 0%, rgba(3, 14, 10, 0.96) 100%);
}

.direction-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.direction-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.direction-concept-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 230, 168, 0.15);
  border: 1px solid rgba(0, 255, 170, 0.35);
  color: #00ffaa;
}

.direction-concept-badge.blue {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.4);
  color: #00d4ff;
}

.direction-concept-badge.steel {
  background: rgba(140, 170, 190, 0.15);
  border-color: rgba(140, 170, 190, 0.35);
  color: #b0d8e8;
}

.direction-concept-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.direction-concept-lead {
  font-size: 12.5px;
  color: #c9ede0;
  line-height: 1.45;
  margin: 0;
}

/* Masterpiece Pipeline */
.direction-pipeline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 10px;
}

.pipeline-step {
  font-size: 11px;
  font-weight: 800;
  color: #64ffda;
  letter-spacing: 0.4px;
}

.pipeline-sep {
  font-size: 11px;
  color: rgba(0, 212, 255, 0.6);
  font-weight: 700;
}

/* Capability list */
.direction-concept-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.direction-concept-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #d1efe4;
  line-height: 1.42;
}

.direction-bullet {
  color: #00ffaa;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.direction-concept-card.master-shedevr .direction-bullet {
  color: #00d4ff;
}

/* Environment footer & Law box */
.direction-env-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 230, 168, 0.08);
  border: 1px solid rgba(0, 230, 168, 0.25);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #64ffda;
}

.direction-law-box {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid #00d4ff;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.direction-law-title {
  font-weight: 800;
  color: #00d4ff;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.direction-law-text {
  color: #e6fff7;
}

.direction-law-text b {
  color: #ffffff;
}

/* Operator Block */
.operator-concept-block {
  background: rgba(3, 16, 22, 0.9);
  border: 1.2px dashed rgba(0, 212, 255, 0.35);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.operator-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.operator-title {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.operator-desc {
  font-size: 12px;
  color: #a0c8db;
  line-height: 1.4;
  margin: 0;
}