/* DAC page: Hide empty adinkra-hero-slot only for DAC calendar */
.dac-calendar-page .adinkra-hero-slot {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 40vh;
  max-height: 55vh;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2.2rem auto;
  padding-top: 2.2rem;
}
/* DAC hero placeholders */
.dac-calendar-page .backend-title-symbol.left-symbol-placeholder,
.dac-calendar-page .backend-title-symbol.right-symbol-placeholder {
  background: none;
  border: 2px dashed #d35400;
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  min-width: 2.2em;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
.dac-calendar-page .backend-hero-symbol-large.neo-onnim-placeholder {
  width: 100%;
  max-width: 320px;
  min-height: 120px;
  margin: 1.2em auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #f7b731;
  border-radius: 24px;
  opacity: 0.5;
}
.dac-calendar-page .dac-hero-date {
  font-size: 1.25rem;
  color: #d35400;
  margin-top: 0.7em;
  text-align: center;
  font-weight: 600;
}

.dac-calendar-page .dac-meta {
  width: 100%;
  text-align: center;
}

.dac-calendar-page .dac-meta .colonial-ref {
  text-align: center;
}

/* DAC page: Ensure backend-title-symbol sizing/alignment for DAC small symbols */
.dac-calendar-page .backend-title-row .backend-title-symbol {
  width: 2.2em;
  height: 2.2em;
  min-width: 2.2em;
  min-height: 2.2em;
  color: #d35400;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.dac-calendar-page .backend-title-row .backend-title-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  color: inherit;
}
/* My Practices: Fix nav row wrapping and button sizing */
.dashboard-container.my-practices-stack .top-nav-bar {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  gap: 1rem;
}

.dashboard-container.my-practices-stack .top-nav-bar .btn {
  min-width: 96px;
}
/* === Profile page: Larger side symbols for title row only on Profile === */
.dashboard-container .backend-title-row .profile-title-symbol-left,
.dashboard-container .backend-title-row .profile-title-symbol-right {
  width: 2.8em !important;
  height: 2.8em !important;
  min-width: 2.8em !important;
  min-height: 2.8em !important;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.dashboard-container .backend-title-row .profile-title-symbol-left svg,
.dashboard-container .backend-title-row .profile-title-symbol-right svg {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: middle;
}
/* === Practices Library: Larger side symbols only on this page === */
.practice-library-page .practice-library-symbol-size {
  width: 5.2em !important;
  height: 5.2em !important;
  min-width: 5.2em !important;
  min-height: 5.2em !important;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.practice-library-page .practice-library-symbol-size svg {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: middle;
}
.backend-title-symbol img[src*="sesawosuban.svg"] {
  filter: none !important;
  color: inherit !important;
  mix-blend-mode: normal !important;
}
.backend-title-row .backend-title-symbol img[src*="sesawosuban.svg"] {
  filter: none !important;
  color: inherit !important;
  mix-blend-mode: normal !important;
  /* Force SVG to orange by using invert(0) and sepia(1) and hue-rotate to match #d35400 */
  /* fallback for browsers that ignore color on img/svg */
  /* The following filter matches #d35400 as close as possible */
  filter: invert(44%) sepia(77%) saturate(747%) hue-rotate(-19deg) brightness(97%) contrast(92%) !important;
}
/* === Ujima Backend Unified Design System === */
.backend-hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2.2rem auto;
  padding-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 40vh;
  max-height: 55vh;
}
.backend-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  width: 100%;
  margin-bottom: 0.5em;
  color: #d35400; /* Ensures all children (symbols and text) use the PROFILE orange */
}
/* === Backend Title Row Symbol (small, flat, orange) === */
.backend-title-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  min-width: 2.2em;
  min-height: 2.2em;
  color: #D35400;
  opacity: 0.98;
}
.backend-title-symbol svg,
.backend-title-symbol img {
  width: 100%;
  height: 100%;
  display: block;
  color: inherit;
  fill: currentColor;
  filter: none !important;
  box-shadow: none !important;
}
.backend-title-symbol .nea-onnim-primary,
.backend-title-symbol svg path,
.backend-title-symbol img {
  fill: currentColor !important;
  color: inherit;
}
.backend-title-text {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d35400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  padding: 0 0.2em;
}
@media (max-width: 700px) {
  .backend-title-row { gap: 0.6em; }
  .backend-symbol {
    width: 1.5em;
    height: 1.5em;
    min-width: 1.5em;
    min-height: 1.5em;
  }
  .backend-title-text { font-size: 1.35rem; padding: 0 0.1em; }
}
.backend-nav-card {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem 2.2rem;
  justify-content: flex-start;
  align-items: flex-start;
  background: #181b23;
  border-radius: 32px;
  padding: 2.2rem 3.2rem 1.2rem 3.2rem;
  margin: 0 auto 2.2rem auto;
  box-shadow: 0 2px 18px 0 rgba(0,0,0,0.10);
  max-width: 92vw;
}
.backend-nav-button {
  margin: 0 0.5rem 1.1rem 0;
  font-size: 1.18rem;
  font-weight: 500;
  color: #fff1c4;
  background: #23273a;
  border: 1.5px solid #3a3f5a;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  padding: 0.55em 1.5em;
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border 0.18s;
  min-width: 120px;
  min-height: 2.2em;
}
.backend-nav-button.is-active,
.backend-nav-button[aria-current="page"] {
  color: #23273a;
  background: #f7b731;
  border: 1.5px solid #f7b731;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
.backend-nav-button:hover {
  color: #f7b731;
  background: #23273a;
  border-color: #f7b731;
}
.backend-content-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.2rem 0 0 0;
}
/* === Reusable Backend Dashboard Title Row === */
.dashboard-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  margin: 0 0 0.5em 0;
  width: 100%;
}
/* Alias for dashboard compatibility */
.dashboard-title-symbol {
  composes: backend-title-symbol;
}
/* === Backend Large Hero Symbol (atmospheric, gold glow) === */
.backend-hero-symbol-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: 1.2em auto 0 auto;
}
.backend-hero-symbol-large img,
.backend-hero-symbol-large svg {
  width: 100%;
  height: auto;
  max-width: 320px;
  opacity: 0.93;
  filter: drop-shadow(0 0 16px #f7bc6099);
}

/* Profile-only rhythm alignment with Practices Library baseline */
.profile-rhythm-page .backend-hero {
  min-height: 26vh;
  max-height: none;
  margin-bottom: 1rem;
  padding-top: 1rem;
}

.profile-rhythm-page .backend-title-row {
  margin-bottom: 0.2rem;
}

.profile-rhythm-page .backend-hero-symbol-large {
  max-width: 220px;
  margin-top: 0.65rem;
}

.profile-rhythm-page .backend-hero-symbol-large img {
  max-width: 220px;
}

.profile-rhythm-page .backend-nav-card {
  margin-bottom: 1.25rem;
  padding: 1rem 1.2rem 0.7rem 1.2rem;
  gap: 0.8rem;
  border-radius: 18px;
}

/* Approved healer dashboard-only top rhythm cleanup */
.approved-healer-rhythm-page .practice-library-symbol-hero {
  margin-bottom: 0.4rem;
}

.approved-healer-rhythm-page .practice-library-symbol-bg {
  min-height: 185px;
  background-attachment: scroll;
  background-size: 30% auto;
}

.approved-healer-rhythm-page .practice-library-intro-row {
  transform: none;
  margin-bottom: 0.65rem;
}

.approved-healer-rhythm-page .practice-library-hero-intro {
  width: 86%;
  min-height: auto;
  margin-bottom: 0.75rem;
}

/* Scoped gutter fix: target pages only */
.profile-rhythm-page {
  background: #0f1520;
  min-height: 100vh;
  box-shadow: 0 0 0 100vmax #0f1520;
  clip-path: inset(0 -100vmax);
}

.profile-rhythm-page .dashboard-card,
.profile-rhythm-page .profile-card {
  height: auto;
  min-height: 0;
  padding-top: 1rem;
}

.profile-rhythm-page .dashboard-card h2,
.profile-rhythm-page .profile-card h2 {
  margin-top: 0;
  margin-bottom: 0.65rem;
}

.profile-rhythm-page .rhythm-card p {
  color: #d8dee6;
}

.profile-rhythm-page .rhythm-card strong {
  color: #f3f4f6;
}

.my-practices-page .my-practices-stack {
  background: #0f1520;
  min-height: 100vh;
  box-shadow: 0 0 0 100vmax #0f1520;
  clip-path: inset(0 -100vmax);
}

.referral-rhythm-page {
  background: #0f1520;
  min-height: 100vh;
  box-shadow: 0 0 0 100vmax #0f1520;
  clip-path: inset(0 -100vmax);
}

.my-qr-page {
  background: #0f1520;
}
.dashboard-title-text {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d35400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  padding: 0 0.2em;
}
@media (max-width: 700px) {
  .dashboard-title-row {
    gap: 0.6em;
  }
  .dashboard-title-symbol {
    width: 1.5em;
    height: 1.5em;
    min-width: 1.5em;
    min-height: 1.5em;
  }
  .dashboard-title-text {
    font-size: 1.35rem;
    padding: 0 0.1em;
  }
}
/* Member dashboard: align nav below hero and left-align with title/symbol */
.dashboard-container > .top-nav-bar {
  margin: 0 0 1.2rem 0.5rem;
  justify-content: flex-start;
}
@media (max-width: 700px) {
  .dashboard-container > .top-nav-bar {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* === Admin Dashboard Flash/Toast Styling === */
.ujima-admin .flash-messages {
  position: fixed;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  max-width: 90vw;
  pointer-events: none;
}
.ujima-admin .flash {
  background: rgba(24, 24, 32, 0.88);
  color: #f7f7fa;
  font-size: 1.13rem;
  font-weight: 500;
  border-radius: 14px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18);
  padding: 1.1em 2.2em 1.1em 2.2em;
  margin: 0.5em 0;
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-18px);
  animation: admin-flash-fadein 0.7s cubic-bezier(.77,0,.175,1) forwards;
}
@keyframes admin-flash-fadein {
  0% { opacity: 0; transform: translateY(-18px); }
  60% { opacity: 1; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .ujima-admin .flash-messages { min-width: 0; max-width: 98vw; }
  .ujima-admin .flash { font-size: 1rem; padding: 0.8em 0.7em; }
}
/* --- Ujima Logo Morph Animation --- */
.logo-morph-symbol {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D35400; /* Ujima accent orange, matches .practice-title-symbol, .dashboard-title, etc. */
  z-index: 10;
}
.logo-morph-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: opacity, transform;
  transition: opacity 3.2s cubic-bezier(.77,0,.175,1), transform 3.2s cubic-bezier(.77,0,.175,1);
  pointer-events: none;
  color: inherit;
}
.logo-morph-svg path,
.logo-morph-svg polygon {
  fill: currentColor !important;
}
 .logo-morph-boa {
   opacity: 1;
   z-index: 2;
   animation: morph-boa-fade 16s ease-in-out infinite;
 }
 .logo-morph-nteasee {
   opacity: 0;
   z-index: 1;
   animation: morph-nteasee-fade 16s ease-in-out infinite;
 }
@keyframes morph-boa-fade {
  0%   { opacity: 1;   transform: scale(1) rotate(0deg); }
  35%  { opacity: 1;   transform: scale(1.04) rotate(-2deg); }
  45%  { opacity: 0.5; transform: scale(1.02) rotate(-3deg); }
  52%  { opacity: 0;   transform: scale(0.98) rotate(-4deg); }
  60%  { opacity: 0.5; transform: scale(1.01) rotate(-2deg); }
  70%  { opacity: 1;   transform: scale(1) rotate(0deg); }
  100% { opacity: 1;   transform: scale(1) rotate(0deg); }
}
@keyframes morph-nteasee-fade {
  0%   { opacity: 0;   transform: scale(0.98) rotate(4deg); }
  35%  { opacity: 0;   transform: scale(0.98) rotate(4deg); }
  45%  { opacity: 0.5; transform: scale(1.01) rotate(2deg); }
  52%  { opacity: 1;   transform: scale(1.04) rotate(0deg); }
  60%  { opacity: 0.5; transform: scale(1.02) rotate(-2deg); }
  70%  { opacity: 0;   transform: scale(0.98) rotate(-4deg); }
  100% { opacity: 0;   transform: scale(0.98) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-morph-svg {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
  .logo-morph-boa {
    opacity: 1 !important;
  }
  .logo-morph-nteasee {
    opacity: 0 !important;
  }
}
/* --- Slide Menu Toggle Icon Fix --- */
#fawohodoo-toggle .mpatapo-menu {
  display: none;
}
#fawohodoo-toggle.open .fawohodie-menu {
  display: none;
}
#fawohodoo-toggle.open .mpatapo-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Shared title style for Practice Library and Dashboard */
.practice-library-title {
  margin: 0 0 0.75rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #D35400;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-family: inherit;
  text-transform: uppercase;
  gap: 0.7em;
}

.practice-title-symbol {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 1.5em;
  margin: 0 0.5em;
  color: #D35400;
  display: inline-block;
  vertical-align: middle;
}

.practice-title-symbol .nea-onnim-primary {
  fill: currentColor;
}

.dashboard-container.my-practices-stack {
  background: #0f1520;
  background-image: none !important;
  color: #e5e7eb;
}

.dashboard-container.my-practices-stack .page-heading-compact,
.dashboard-container.my-practices-stack .my-practices-hero,
.dashboard-container.my-practices-stack .my-practices-symbol-hero {
  background-image: none !important;
}

.dashboard-container.my-practices-stack > header.page-heading-compact {
  background: none !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 1rem 0;
}

.dashboard-container.rhythm-coach-stack {
  background: #0f1520;
  background-image: none !important;
  color: #e5e7eb;
}

.dashboard-container.rhythm-coach-stack .page-heading-compact,
.dashboard-container.rhythm-coach-stack .rhythm-coach-hero,
.dashboard-container.rhythm-coach-stack .rhythm-coach-symbol-hero {
  background: none !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
}

.rhythm-coach-hero {
  margin: 0 0 0.95rem;
}

.rhythm-coach-symbol-hero {
  display: grid;
  place-items: center;
  width: min(100%, 420px);
  min-height: 0;
  margin: 0.55rem auto 0.35rem;
  padding: 0;
}

.rhythm-coach-symbol-hero-svg {
  width: min(220px, 48vw);
  height: auto;
  display: block;
  overflow: visible;
  opacity: 0.84;
}

.rhythm-coach-symbol-fill {
  fill: rgba(201, 168, 76, 0.22);
  stroke: rgba(201, 168, 76, 0.56);
  stroke-width: 1.4;
}

.dashboard-container.rhythm-coach-stack .page-heading-compact {
  margin: 0 0 0.85rem;
}

.dashboard-container.community-stack {
  background: #0f1520;
  background-image: none !important;
  color: #e5e7eb;
}

.dashboard-container.community-stack .community-header-shell {
  background: none !important;
  background-image: none !important;
  background-attachment: scroll !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 0.9rem;
  padding: 0;
}

.dashboard-container.community-stack .community-symbol-hero {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}

.dashboard-container.community-stack .community-title-row {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d35400;
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 0.7em;
}

.dashboard-container.community-stack .community-title-text {
  line-height: 1;
}

.dashboard-container.community-stack .community-title-symbol {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 1.5em;
  color: #d35400;
  display: inline-grid;
  place-items: center;
}

.dashboard-container.community-stack .community-title-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dashboard-container.community-stack .community-title-symbol-fill {
  fill: currentColor;
}

.dashboard-container.community-stack .community-symbol-composition {
  position: relative;
  width: min(300px, 62vw);
  aspect-ratio: 612 / 792;
  margin: 0.2rem auto 0.1rem;
}

.dashboard-container.community-stack .community-symbol-base,
.dashboard-container.community-stack .community-symbol-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.dashboard-container.community-stack .community-symbol-base svg,
.dashboard-container.community-stack .community-symbol-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dashboard-container.community-stack .community-symbol-base-fill {
  fill: rgba(201, 168, 76, 0.18);
  stroke: rgba(201, 168, 76, 0.44);
  stroke-width: 1.1;
}

.dashboard-container.community-stack .community-symbol-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  height: 58%;
  margin: 0;
}

.dashboard-container.community-stack .community-symbol-inner-fill {
  fill: rgba(212, 175, 95, 0.62);
}




.dashboard-container.community-stack .community-symbol-inner-nteasee {
  animation: community-nteasee-fade 8s infinite both;
  animation-timing-function: ease-in-out;
  width: 88%;
  height: 88%;
  /* Optical vertical centering correction for SVG whitespace */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}

.dashboard-container.community-stack .community-symbol-inner-boame {
  animation: community-boame-fade 8s infinite both;
  animation-timing-function: ease-in-out;
  width: 52%;
  height: 52%;
}

.dashboard-container.community-stack .community-symbol-subtitle {
  margin: 0;
  color: #cbd5e1;
  text-align: center;
}



@keyframes community-nteasee-fade {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes community-boame-fade {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .dashboard-container.community-stack .community-symbol-inner {
    animation: none;
  }
  .dashboard-container.community-stack .community-symbol-inner-boame {
    opacity: 0;
  }
  .dashboard-container.community-stack .community-symbol-inner-nteasee {
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .dashboard-container.community-stack .community-title-row {
    font-size: 1.95rem;
    gap: 0.5em;
  }

  .dashboard-container.community-stack .community-title-symbol {
    width: 1.3em;
    height: 1.3em;
    flex-basis: 1.3em;
  }

  .dashboard-container.community-stack .community-symbol-composition {
    width: min(238px, 70vw);
  }
}

.dashboard-container.community-stack .community-intent {
  margin: 0 0 1rem;
}

.dashboard-container.community-stack .community-form {
  margin: 0 0 1.25rem;
}

.dashboard-container.community-stack .community-comments {
  margin: 0;
}

@media (max-width: 700px) {
  .rhythm-coach-symbol-hero {
    width: min(100%, 320px);
    margin: 0.45rem auto 0.2rem;
  }

  .rhythm-coach-symbol-hero-svg {
    width: min(168px, 48vw);
  }
}



.my-practices-symbol-hero {
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 0;
  margin: 0.85rem auto 0.2rem;
  padding: 0;
}

.my-practices-symbol-hero-svg {
  width: min(220px, 48vw);
  height: auto;
  display: block;
  overflow: visible;
  opacity: 0.84;
}

.my-practices-symbol-fill {
  fill: rgba(201, 168, 76, 0.22);
  stroke: rgba(201, 168, 76, 0.56);
  stroke-width: 1.4;
}

@media (max-width: 700px) {
  .my-practices-symbol-hero {
    min-height: 0;
    width: min(100%, 380px);
    margin: 0.7rem auto 0.15rem;
  }

  .my-practices-symbol-hero-svg {
    width: min(168px, 48vw);
  }
}

.dashboard-symbol-hero {
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  min-height: 300px;
  margin: 0.75rem auto 1.35rem;
  padding: 1rem 0 0.5rem;
}

.dashboard-symbol-hero-svg {
  width: min(320px, 72vw);
  height: auto;
  display: block;
  overflow: visible;
  transform: rotate(36deg);
  opacity: 0.86;
}

.dashboard-symbol-hero-svg .sesa-ring-fill,
.dashboard-symbol-hero-svg .sesa-star-fill {
  opacity: 0.92;
}

.dashboard-symbol-hero-svg .sesa-ring-outline,
.dashboard-symbol-hero-svg .sesa-star-outline {
  filter: brightness(0.92);
}
/* Dashboard hero block for visual alignment with Practice Library */
.dashboard-hero-block {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2.2rem auto;
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.dashboard-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d35400;
  letter-spacing: 0.04em;
  margin: 0 0 0.25em 0;
  text-align: center;
}

.dashboard-subtitle {
  color: #d35400;
  font-size: 1.18rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
  text-align: center;
}

.dashboard-hero-intro {
  color: #e5e7eb;
  font-size: 1.04rem;
  max-width: 700px;
  margin: 0 auto 1.2rem auto;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 700px) {
  .dashboard-hero-block {
    max-width: 98vw;
    padding-top: 0.5rem;
  }
  .dashboard-title {
    font-size: 1.5rem;
  }
  .dashboard-subtitle {
    font-size: 1rem;
  }
  .dashboard-hero-intro {
    font-size: 0.98rem;
    max-width: 98vw;
  }
}
/* Match dashboard nav button style for all buttons in cards and logout */
.dashboard-card .btn,
.dashboard-footer-actions .btn {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff1c4;
  background: #23273a;
  border: 1.5px solid #3a3f5a;
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  padding: 0.42em 1.1em;
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border 0.18s;
  margin: 0 0.35rem 0.7rem 0;
  min-width: 120px;
  min-height: 2.2em;
}

.dashboard-card .btn:hover,
.dashboard-footer-actions .btn:hover {
  color: #f7b731;
  background: #23273a;
  border-color: #f7b731;
}

.dashboard-card .btn.is-active,
.dashboard-card .btn[aria-current="page"],
.dashboard-footer-actions .btn.is-active,
.dashboard-footer-actions .btn[aria-current="page"] {
  color: #23273a;
  background: #f7b731;
  border: 1.5px solid #f7b731;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}
/* Practice Library hero: enforce separate top text zone and lower symbol zone */
.practice-library-page .backend-fixed-sesa-hero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  background-image: linear-gradient(rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.82)) !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.practice-library-page .practice-library-text-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
  margin-top: 1rem;
  z-index: 2;
}

.practice-library-page .practice-library-title-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.practice-library-page .practice-library-title-bar .dashboard-title {
  margin: 0;
  padding: 0;
}

.practice-library-page .practice-library-text-zone .practice-library-hero-intro {
  margin: 0 auto;
}

.practice-library-page .practice-library-symbol-zone {
  width: 100%;
  min-height: 320px;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.practice-library-page .practice-library-sankofa {
  width: min(560px, 92%);
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
}

/* Practice Library symbol hero section (separate flow section above intro row) */
.practice-library-stack .practice-library-symbol-hero {
  width: 100%;
  margin: 0 0 1.2rem;
}

.practice-library-stack .practice-library-title {
  margin: 0 0 0.75rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #D35400;
}

.practice-library-stack .practice-title-symbol {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 1.5em;
  margin: 0 0.5em;
}

.practice-library-stack .practice-title-symbol .nea-onnim-primary {
  fill: currentColor;
}

.practice-library-stack .practice-library-symbol-bg {
  width: 100%;
  min-height: 300px;
  background-image: url("../adinkra/sankofa.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36% auto;
  transform: rotate(180deg) scaleX(-1);
  background-attachment: fixed;
  opacity: 0.22;
  filter: brightness(1.16);
  pointer-events: none;
}

/* Restored Practice Library intro row: wide, centered, no symbol overlap */
.practice-library-stack .practice-library-intro-row {
  width: 100%;
  margin: 0 0 1rem;
  transform: translateY(-22px);
}

.practice-library-page .practice-library-intro-row .practice-library-hero-intro {
  width: 82%;
  max-width: none;
  min-height: 132px;
  margin: 0 auto 1.25rem;
  padding: 0;
}

.practice-library-stack .practice-library-intro-row .practice-hero-block {
  width: 100%;
  max-width: none;
  transform: translateX(calc(-50% + 80px));
}

.practice-library-stack .practice-library-intro-row .practice-hero-block.active {
  animation: practice-intro-slide-in-right 1.55s ease-in-out forwards, practice-intro-fade-out 0.8s ease-in-out forwards;
  animation-delay: 0s, 3.7s;
}

@keyframes practice-intro-slide-in-right {
  0% { opacity: 0; transform: translateX(calc(-50% + 80px)); }
  60% { opacity: 1; transform: translateX(calc(-50% - 4px)); }
  100% { opacity: 1; transform: translateX(-50%); }
}

@keyframes practice-intro-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 900px) {
  .practice-library-page .practice-library-intro-row .practice-library-hero-intro {
    width: 90%;
  }
}

@media (max-width: 700px) {
  .practice-library-stack .practice-library-symbol-bg {
    min-height: 200px;
    background-attachment: scroll;
  }

  .practice-library-page .practice-library-symbol-zone {
    min-height: 220px;
  }

  .practice-library-page .practice-library-sankofa {
    width: min(360px, 92%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-library-stack .practice-library-symbol-bg {
    background-attachment: scroll;
  }
}

@supports (-webkit-touch-callout: none) {
  .practice-library-stack .practice-library-symbol-bg {
    background-attachment: scroll;
  }
}
/* === Dashboard/Practice Navigation Bar === */
.top-nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem 2.2rem;
  justify-content: flex-start;
  align-items: flex-start;
  background: #181b23;
  border-radius: 32px;
  padding: 2.2rem 3.2rem 1.2rem 3.2rem;
  margin: 0 auto 2.2rem auto;
  box-shadow: 0 2px 18px 0 rgba(0,0,0,0.10);
  max-width: 92vw;
}

.top-nav-bar .btn {
  margin: 0 0.5rem 1.1rem 0;
  font-size: 1.18rem;
  font-weight: 500;
  color: #fff1c4;
  background: #23273a;
  border: 1.5px solid #3a3f5a;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  padding: 0.55em 1.5em;
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border 0.18s;
}

.top-nav-bar .btn.is-active,
  .top-nav-bar .btn[aria-current="page"] {
    color: #23273a;
    background: #f7b731;
    border: 1.5px solid #f7b731;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  }
}

.top-nav-bar .btn:hover {
  color: #f7b731;
  background: #23273a;
  border-color: #f7b731;
}
/* === Practice Library Hero Animated Text (scoped) === */
.practice-library-hero-intro {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto 2.2rem auto;
  padding: 0 1.5rem;
  max-width: 640px;
  width: 100%;
  min-height: 120px;
  position: relative;
  z-index: 3; /* Ensure above Sankofa, below nav */
}
.practice-hero-animated-texts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
}
.practice-hero-block {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
  color: #f3f4f6;
  text-align: center;
  font-size: 1.09rem;
  line-height: 1.7;
  font-weight: 400;
  background: rgba(19, 23, 32, 0.68);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1.05rem 1.1rem;
  box-shadow: 0 2px 18px 0 rgba(0,0,0,0.10);
  max-width: 600px;
  width: 100%;
  pointer-events: none;
  will-change: opacity, transform;
}
.practice-hero-block.active {
  animation: practice-hero-float-in 0.85s ease-in-out forwards, practice-hero-fade-out 0.7s ease-in-out forwards;
  animation-delay: 0s, 3.2s;
}
.practice-hero-block.block-1.active { z-index: 4; }
.practice-hero-block.block-2.active { z-index: 3; }
.practice-hero-block.block-3.active { z-index: 2; }
.practice-hero-block.block-4.active { z-index: 1; }
@keyframes practice-hero-float-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(40px); }
  60% { opacity: 1; transform: translateX(-50%) translateY(-6px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes practice-hero-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 700px) {
  .practice-library-hero-intro {
    max-width: 98vw;
    padding: 0 0.5rem;
    min-height: 90px;
  }
  .practice-hero-block {
    font-size: 0.98rem;
    padding: 0.85rem 0.5rem 0.8rem 0.5rem;
    max-width: 98vw;
  }
}
@media (max-width: 480px) {
  .practice-library-hero-intro {
    min-height: 60px;
  }
  .practice-hero-block {
    font-size: 0.93rem;
    padding: 0.7rem 0.2rem 0.7rem 0.2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .practice-hero-block {
    position: static !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    background: rgba(19, 23, 32, 0.68);
  }
  .practice-hero-block:not(:first-child) {
    display: none !important;
  }
}
/* === Practice Library Hero Intro (scoped) === */
.practice-library-hero-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2.2rem auto;
  padding: 0 1.5rem;
  max-width: 640px;
  width: 100%;
}
.practice-library-hero-intro p {
  color: #f3f4f6;
  text-align: center;
  font-size: 1.13rem;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
  background: rgba(19, 23, 32, 0.72);
  border-radius: 12px;
  padding: 1.25rem 1.2rem 1.1rem 1.2rem;
  box-shadow: 0 2px 18px 0 rgba(0,0,0,0.10);
  max-width: 600px;
  width: 100%;
}
@media (max-width: 700px) {
  .practice-library-hero-intro {
    max-width: 98vw;
    padding: 0 0.5rem;
  }
  .practice-library-hero-intro p {
    font-size: 1rem;
    padding: 1rem 0.5rem 0.9rem 0.5rem;
    max-width: 98vw;
  }
}
/* Sticky nav hidden by default, fades in when .visible is added */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100100;
  background: rgba(101,172,130,0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 0.75rem 1rem;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.sticky-nav.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}
.sticky-nav li {
  margin: 0;
}
.sticky-nav a {
  color: #D35400;
  text-transform: uppercase;
  font-size: 1rem;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: none;
  transition: color 0.2s;
}
.sticky-nav a:hover {
  color: #A04000;
}
/* ---------------------- */
/* Basic Setup            */
/* ---------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Reset root layout */
html, body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  background-color: rgb(247, 234, 218);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}


.ujima-text-box{
    position:absolute;
    width:1140px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%); 
    text-align:center;
    
}



.row {
  max-width: 350px;
  margin: 0 auto;
 
}

/* ---------------------- */
/* Header & Navigation     */
/* ---------------------- */
header {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(sun540792355.jpg) center/cover fixed;
  height: 100vh;
}


.text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}


.main-nav{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 1.5rem;
  background: transparent;
  z-index: 10;
  transition: opacity .25s ease, transform .25s ease; /* or keep your all .3s */
}




.main-nav ul {
  display: flex;
  align-items: center;
  justify-content:center ;
  list-style: none;
  gap: 40px;
  margin-top: 40px;
}

.main-nav li a {
  color: #D35400;
  text-transform: uppercase;
  font-size: 90%;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 8px 0;
  transition: border-color 0.2s;
}
.main-nav li a:hover {
  border-color: #e67e22;
}




nav ul { display:flex; gap:1rem; list-style:none; margin:0; padding:.75rem 1rem; }




.footer-ul{
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: space-between;
   width: 100%;
  margin:0; padding:0;
}



/* ---------------------- */
/* Mobile Navi******/
/* ---------------------- */

/* Hide menu by default (you'll toggle it with JS later) */


/* Symbols */

/* Natural flex layout for menu panel symbols and links */

.menu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.menu-panel-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.menu-panel .symbol-top {
  width: clamp(34px, 7vw, 48px);
  height: auto;
  display: block;
  margin: 0 auto 2em auto;
  padding: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.menu-panel nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.menu-panel nav ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.menu-panel .symbol-bottom {
  width: clamp(34px, 7vw, 48px);
  height: auto;
  display: block;
  margin: 2em auto 0 auto;
  padding: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}


/* Sliding Menu Panel */
/* Keep your toggle button as-is; just ensure high z-index */
/* Ensure toggle button stays above sticky nav */

 

/* Sliding Menu Panel (YOUR structure, no changes to HTML) */


/* Links inside nav */
.menu-panel nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 3.25rem 0 0;
}

.menu-panel nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Panel link styles ---- */
.menu-panel nav a {
  color: #2c1810;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  display: block;
  transition: color 0.25s ease, background 0.25s ease;
}

.menu-panel nav a:hover,
.menu-panel nav a:focus {
  color: #fff;
  background: rgba(101, 172, 130, 0.85); /* sticky nav sage green */
  outline: none;
}

.menu-panel nav li {
  border-bottom: 1px solid rgba(44, 24, 16, 0.15);
  padding-bottom: 0.5rem;
}

.menu-panel nav li:last-child {
  border-bottom: none;
}

/* Sliding Menu Panel (hidden by default, slides in from right) */

/* Hide menu panel and all its children when closed */

/* Menu panel is always present, but slides offscreen when closed */
.menu-panel {
  position: fixed;
  top: 0;
  right: -250px; /* Hide offscreen when closed */
  width: 250px;
  height: 100%;
  background-color: rgba(221, 152, 60, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 2rem 1rem;
  gap: 1em;
  transition: right 0.3s cubic-bezier(.77,0,.175,1);
  z-index: 1000;
}
.menu-panel.open {
  right: 0;
}




/* === T

/* mpatapo css */
.mpatapo-menu {
    width: 60px;
    height: auto;
  display: none;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
  }
  

  /***Toggle CSS - CLOSED STATE (Fixed position outside panel)***/
/* ✅ Toggle Button Base - Fixed position when menu is closed */
#fawohodoo-toggle {
  display: block;
  background: rgba(191, 133, 41, 0.88);
  border: none;
  cursor: pointer;
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 10001;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  transition: right 0.3s cubic-bezier(.77,0,.175,1);
}

/* ✅ Fawohodie: visible by default (closed state) */
.fawohodie-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

#fawohodoo-toggle .fawohodie-menu {
  flex-direction: column;
  gap: 0.2rem;
}

#fawohodoo-toggle .fawohodie-arrow {
  color: #231f20;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.fawohodie-menu svg {
  width: 58px;
  height: 58px;
  transition: transform 0.3s ease;
}

.fawohodie-menu svg:hover {
  transform: scale(1.05);
}

/* ✅ When Toggle Opens - show Mpatapo instead of Fawohodie */
#fawohodoo-toggle.open .fawohodie-menu,
.menu-panel.open .fawohodie-menu {
  display: none;
}

#fawohodoo-toggle.open .mpatapo-menu,
.menu-panel.open .mpatapo-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

#fawohodoo-toggle.open .mpatapo-menu svg,
.menu-panel.open .mpatapo-menu svg {
  width: 58px;
  height: 58px;
  transition: transform 0.3s ease;
}

#fawohodoo-toggle.open .mpatapo-menu svg:hover,
.menu-panel.open .mpatapo-menu svg:hover {
  transform: scale(1.05);
}

/* === OPEN-STATE PANEL HIERARCHY === */
/* When panel is open, organize symbols and links in clean vertical order */

.menu-symbol-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 1rem;
  pointer-events: none; /* Decorative, not clickable */
}

.menu-symbol-header .symbol-top {
  margin: 0; /* Reset margin since header container centers it */
}

/* Reorder the panel flex children when open for proper visual hierarchy */
.menu-panel.open {
  justify-content: flex-start;
  padding-top: 1rem;
}

/* When toggled, Mpatapo moves into the menu panel flow above crocodile symbol */
.menu-panel.open #fawohodoo-toggle {
  order: 1;
  position: static;
  width: 80px;
  height: 80px;
  top: auto;
  right: auto;
  background: rgba(191, 133, 41, 0.88);
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.menu-panel.open .menu-symbol-header {
  order: 2;
  margin-bottom: 0.9rem;
}

.menu-panel.open nav {
  order: 3;
}

.menu-panel.open .symbol-bottom {
  order: 4;
  margin-top: 2em;
  align-self: center;
}








/* When toggled, they morph colors */
.toggle-active .mpatapo-menu .mpatapo-symbol {
  stroke: #ff7700;    /* bright orange */
  fill: #150702;      /* dark fill, makes it feel like it's shifting */
}

.toggle-active .fawohodie-menu .st1,
.toggle-active .fawohodie-menu .st0 {
  stroke: #ffaa33;    /* lighter yellow stroke */
  fill: rgba(255, 255, 255, 0.2); /* transparent feel */
}



/* === Symbol Sizing & Positioning (Closed & Open States) === */

.symbol-top {
  width: 25px;
  height: auto;
  display: block;
  margin: 0 auto 1em;
  fill: #c82d06;
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.5));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.symbol-top:hover {
  transform: scale(1.1) rotate(-3deg);
  filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.7));
}


 



/* === Bottom Symbold for mobile === */

.symbol-bottom {
  width: 25px;
    height: auto;
    display: block;
  margin: 1em auto 0;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.symbol-bottom path,
.symbol-bottom polyline,
.symbol-bottom polygon,
.symbol-bottom g {
  fill: #187f14;
    transition: fill 0.3s ease;
}

.symbol-bottom:hover {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.7));
}

.symbol-bottom:hover path,
.symbol-bottom:hover polyline,
.symbol-bottom:hover polygon,
.symbol-bottom:hover g {
  fill: #f39c12;
}




/* ---------------------- */
/* Headings & Typography   */
/* ---------------------- */
h1 { color: #D35400; font-weight: 300; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3rem; text-align: center; }
.banner-text { color: #D35400; font-weight: 300; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3rem; text-align: center; }
h2 { color: #D35400; font-weight: 300; font-size: 2rem; text-align: center; margin: 2rem 0; }
h3, .sf-h3 { color: #40200a; font-weight: 300; text-transform: uppercase; font-size: 0.6rem; margin-top: 1rem; text-align: center;}
.product-text { color: #40200a; font-size: 0.8rem; text-transform: uppercase; text-align: center; margin-bottom: 1rem; }

.sankofa-display-regular {
  font-family: "Sankofa Display", sans-serif;
  font-weight: 400;
  font-style: normal;
}




/* ---------------------- */
/* Button Styles           */
/* ---------------------- */
/* Unified button system is defined near the end of this file. */

/* ---------------------- */
/* About / Feature Cards   */
/* ---------------------- */
.about-head{
        color:#D35400;
        text-align: center;
        font-weight: 300;
        padding:25px;
}

#about .row {
  width: 80%;
  max-width: 1100px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-sizing: border-box;
}

#about .about-text,
#about .about-head {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}


.about-section P{
    padding: 15px;
}

.about-text{
    color:#d35400;
  margin: 0 auto 0.85rem auto;
  width: 100%;
  line-height: 1.7;
  text-align: left;
}

.about-text-1{
    margin-top: 1em;
    color:#d35400;
    margin-left: 1em;
    margin-right: 1em;  

}


.about-box{
    margin: 1em;
}

.about-ico{
     color:#d35400;
     text-align:center;
     font-size:250px;
}

.ico-tag{
    text-align: center;
    color:#FBEEE6;
    font-weight: 300;
    font-size:110%;
    background-color: #F39C12;
    padding: 20px;
    border-radius: 5%;
    margin-right: 25px;
}
  


.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem auto;
}
.feature-card,
.featured-card {
  background-color: #FEF5E7;
  border: 2px solid #F39C12;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(211,84,0,0.2);
}


.featured-card {
  grid-column: span 2;
}

.feature-card i,
.featured-card i {
  font-size: 3rem;
  color: #D35400;
  margin-top: 1rem;
}
.feature-card p,
.featured-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #D35400;
}



.card {
  background-color: #FEF5E7;
  padding: 1em;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 1em auto;
}






/* =======================================================
   DAC CALENDAR GRID STYLES
   Purpose: Display a 7-column monthly grid layout
   Location: Used on dac/calendar.html
   ======================================================= */

.calendar-grid {
    /* Create 7 equal-width columns (one for each weekday concept) */
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    /* Space between day boxes */
    gap: 12px;

    /* Add breathing room above the grid */
    margin-top: 20px;
}

.day-box {
    /* Force square shape regardless of screen width */
    aspect-ratio: 1 / 1;

    /* Dark background to match Ujima aesthetic */
    background: #111;
    color: #fff;

    /* Center the day number inside the box */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Smooth corners */
    border-radius: 8px;

    /* Smooth hover animation */
    transition: 0.2s ease;

    /* Indicate it is interactive */
    cursor: pointer;
}

.day-box:hover {
    /* Gold highlight on hover */
    background: #c9a227;

    /* Slight grow effect for responsiveness */
    transform: scale(1.05);
}



.day-number {
    /* Slightly larger and bold for clarity */
    font-size: 1.2rem;
    font-weight: bold;
}

/* ===================== END DAC GRID STYLES ===================== */

/* Highlight the current day dynamically */
.active-day {
    background: #c9a227;
    color: #000;
    font-weight: bold;
}

/* Weekday header row */
.weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
    font-weight: bold;
    text-align: center;
    color: #c9a227;
}


/* =======================================================
   DAC SOUND DAY STYLES
   Purpose:
   Visually mark specific days in the grid as "Sound Days"
   within the Decolonized African Calendar overlay.

   These days retain Gregorian positioning but carry
   DAC meaning (ritual, rhythm, vibration, community focus).
   ======================================================= */

.sound-day {
    /* Gold border to signify sacred rhythmic emphasis */
    border: 2px solid #c9a227;

    /* Slight glow to subtly differentiate from normal days */
    box-shadow: 0 0 6px rgba(201, 162, 39, 0.5);
}

/* ================= END DAC SOUND DAY STYLES ================= */

/* =======================================================
   WEEKLY PRACTICE PANEL
   Displays cycle commitments and builds rhythm identity
   ======================================================= */

.cycle-panel {
    background: #111;
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.cycle-panel h3 {
    margin-bottom: 15px;
    color: #c9a227;
}

.cycle-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.status {
    font-size: 1.2rem;
}

.incomplete {
    color: #888;
}

.complete {
    color: #c9a227;
}

/* ================= END WEEKLY PRACTICE PANEL ================= */


/* ---------------------- */
/* Blog Section            */
/* ---------------------- */
.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 1.5rem;
}
.blog-text {
  grid-column: 1 / -1;
  background-color: #FEF5E7;
  color: #40200a;
  padding: 2rem;
  column-count: 1;
  column-gap: 2em;
  line-height: 1.5;
}


.blog-layout {
  display: grid;
  grid-template-columns: 1fr; /* single column by default */
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
}

/* Blog Cards (Index Page) */
.blog-card {
  background: #FEF5E7; /* Warm Afrocentric cream */
  border: 1px solid #F39C12; /* Pan-African gold accent */
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-link {
  text-decoration: none;
  color: inherit; /* Inherit text color */
  display: block; /* Makes entire card clickable */
}

.blog-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #40200A; /* Deep earthy brown */
}

.blog-meta {
  font-size: 0.9rem;
  color: #666; /* Muted gray for meta text */
  margin-bottom: 0.8rem;
}

.blog-excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Responsive tweaks (if needed) */
@media (max-width: 768px) {
  .blog-card {
    padding: 1rem;
  }
  .blog-title {
    font-size: 1.2rem;
  }
}


/* Show ad space on larger screens */
@media (min-width: 768px) {
  .blog-layout {
    grid-template-columns: 3fr 1fr; /* 3/4 blog, 1/4 ad */
  }
}

/* Ad space at bottom of blog */
.ad-space {
  background: #fef9e7;
  border: 1px solid #f39c12;
  padding: 1rem;
  border-radius: 8px;
  display:none;
  /* Add more styling if needed */
}

/* Hide by default, toggle with JS or class */
.hidden {
  display: none;
}

@media (max-width: 767px) {
  .ad-space {
    order: 2; /* ensures it goes below the main article */
  }
}

.carousel {
  background: #fefefe;
  margin: 0 auto;
  max-width: 100%;
  padding:1rem 0;
 
}

.carousel-cell {
  width: 300px;
  margin-right: 20px;
  background-color: #FBEEE6;
  border-radius: 12px;
  box-sizing: border-box;
  flex: 0 0 auto;
}










/* ---------------------- */
/* Store Grid              */
/* ---------------------- */



.product-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); 
    grid-template-rows: repeat (2, 300px);
    
}


.product-grid img{
    display:block;
    width:100%;
    height:1fr;
    width:1fr;
    padding-left: 1em;
    padding-right:1em;     
}

.sf-h3{
    margin-top: 25px;
    margin-bottom: .5em;
    text-align: center;
    font-size: 125%;
    font-weight:250;
    color:#40200a; 
    text-transform: uppercase;}


/* ---------------------- */
/* Contact / Footer etc.   */
/* ---------------------- */
.contact-form { margin-top: 10rem; }
.form-messages { max-width: 70%; margin: 1rem auto; padding: 0.5rem; }
.form-messages-success { background: #0fd417; color: #fff; }
.form-messages-failure { background: rgba(214, 28, 4, 0.9); color: #fff; }



footer {
  width: 100%;
  background-color: #3e3333;
  padding: 50px;
  font-size: 0.8rem;
  color: #888;
}

.footer-icons{
  display: flex;
  list-style: none;
  justify-content: space-between;
  color:white;
  
}

.footer-row-1{
  margin-top: -1em;
 
}

.footer-row-2{

text-align: center;
margin-top: 2em;
color:#f1b672;
width: 100%;
padding:0;
}




footer .footer-links a {
    color: white;
    text-decoration: none;
}



.footer-nav, .social-icons { list-style: none; }
.footer-nav li, .social-icons li { display: inline-block; margin-right: 1rem; }
.footer-nav a, .social-icons a { color: #888; text-decoration: none; transition: color 0.2s; }

.footer-nav a:hover, footer a:hover { color: #ddd; }

.footer p { text-align: center; margin-top: 1.5rem; }



.ion-social-facebook{ 
  color:#1877F2;
  font-size:2em;
}


.icon-asase-ye-duru{
color:rgb(76, 181, 127);
font-size:2em;
}

.footer-icons .ion-social-instagram{
  background: linear-gradient(45deg,
    #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* gradient fill */
  font-size:2em;
}


.ion-social-youtube {
  color: #FF0000;      /* YouTube red */
  font-size: 2rem;     /* size the icon */
  line-height: 1;      /* avoid extra vertical space */
  vertical-align: middle;
}


/* smooth scrolling + anchor offset (keep once) */
html { scroll-behavior: smooth; }
:root { --sticky-h: 64px; }
section[id] { scroll-margin-top: var(--sticky-h); }

/* sticky nav — single source of truth (keep once, at the very end) */
body.is-sticky .main-nav,
.main-nav.sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 100000;
  background: rgba(101,172,130,.966);
  box-shadow: 0 2px 2px rgb(97 104 102);
  /* guards in case other rules animate/hide it */
  transform: none !important;
  opacity: 1 !important;
}
#nav-spacer { height: 0; }


-scroll anchor offset */
:root { --sticky-h: 64px; }
section[id] { scroll-margin-top: var(--sticky-h); }

/* === Sticky nav — enhanced implementation === */
body.is-sticky .main-nav,
.main-nav.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100000;
  background: rgba(101, 172, 130, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}



/* Spacer to prevent content jump when nav becomes fixed */
#nav-spacer { 
  height: 0;
  transition: height 0.3s ease;
}

.auth-container {
    max-width: 420px;
    margin: 4rem auto;
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(0,0,0,0.08);
    font-family: system-ui, sans-serif;
}

h2 {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.subtitle {
    margin-bottom: 2rem;
    color: #555;
    font-size: 0.95rem;
}

.input-block {
    margin-bottom: 1.5rem;
}

.input-field {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
}

.auth-btn {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

.auth-btn:hover {
    background: #333;
}

.error {
    color: red;
    font-size: 0.85rem;
}

.switch-link {
    text-align: center;
    margin-top: 1.5rem;
}

.switch-link a {
    color: #007bff;
}




                                                      /* Back End Layout starts here */

.ujima-backend {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0b1120;
    color: #e5e7eb;
    margin: 0;
    padding: 0;
}


.strong-fit {
  color: #2ecc71;
  font-weight: bold;
}

.review-fit {
  color: #f1c40f;
  font-weight: bold;
}

.low-fit {
  color: #e74c3c;
  font-weight: bold;
}

.status-approved,
.status-pending,
.status-rejected,
.rec-strong,
.rec-review,
.rec-pending,
.rec-reject {
  font-weight: 700;
}

.status-approved {
  color: #2ecc71;
}

.status-pending {
  color: #f1c40f;
}

.status-rejected {
  color: #e74c3c;
}

.rec-strong {
  color: #2ecc71;
}

.rec-review {
  color: #7ed957;
}

.rec-pending {
  color: #f1c40f;
}

.rec-reject {
  color: #e74c3c;
}

.admin-detail-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

.admin-detail-topnav {
  margin-bottom: 1.25rem;
}

.admin-back-btn {
  margin-top: 2em;
  margin-left: 2em;
}

.admin-detail-card,
.admin-score-card,
.admin-response-card {
  margin: 1rem 0;
  padding: 1.4rem 1.5rem;
  border-radius: 12px;
  background: #1a2433;
  border: 1px solid #2f3f55;
}

.admin-detail-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-score-form {
  margin-top: 0.9rem;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 0.85rem 1rem;
}

.score-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.score-field label {
  font-weight: 600;
}

.score-field select {
  padding: 0.5rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #3f5169;
  background: #0f172a;
  color: #e5e7eb;
}

.admin-save-scores-btn {
  margin-top: 1rem;
}

.admin-score-total,
.admin-score-recommendation {
  margin-top: 0.9rem;
}

.admin-ai-assist {
  margin-top: 1.25rem;
}

.admin-ai-result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #3f5169;
  background: #0f172a;
}

.admin-ai-result h4 {
  margin-top: 0.85rem;
}

.admin-ai-result h4:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .score-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

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





                            /* Dashboard Layout */
.dashboard-container {
  max-width: 1100px;
  margin: 1rem auto 0 auto;
  padding: 1rem 2rem 2rem 2rem;
}

.dashboard-title {
    font-size: 2.4rem;
  font-weight: 400;
    color: #f7b731;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

.email-box {
    background: #1c2230;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin: 1rem 0 2rem 0;
    color: #d1d5db;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.dashboard-card {
    background: #131720;
    padding: 1.5rem;
    border-radius: 12px;
    color: #f5f5f5;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.practice-library-stack .dashboard-card {
  margin-bottom: 1.25rem;
}

.practice-focus-card {
  border: 1px solid rgba(247, 183, 49, 0.75);
  box-shadow: 0 0 0 2px rgba(247, 183, 49, 0.18), 0 0 28px rgba(0, 0, 0, 0.35);
}

.logout-card {
    background: #391616;
    border: 1px solid #bb4444;
}

.logout-card:hover {
    background: #4a1a1a;
}

/* ================================
   AUTH PAGES (Login / Register)
   ================================ */

.ujima-backend .auth-wrapper {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ujima-backend .auth-card {
    width: 100%;
    max-width: 420px;
    background: #131720;
    border-radius: 14px;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    border: 1px solid #1f2a38;
}

.ujima-backend .auth-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #f7b731; /* muted gold */
}

.ujima-backend .auth-subtitle {
    margin: 0.5rem 0 2rem;
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Form */
.ujima-backend .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ujima-backend .form-group label {
    font-size: 0.85rem;
    color: #d1d5db;
    margin-bottom: 0.35rem;
    display: block;
}

.ujima-backend .form-input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #2a3240;
    background: #0d0f16;
    color: #e5e7eb;
}

.ujima-backend .form-input:focus {
    outline: none;
    border-color: #f7b731;
}

/* Errors */
.ujima-backend .form-error {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #8a3f32; /* earth red */
}

/* Footer links */
.ujima-backend .auth-footer {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.9rem;
    color: #9ca3af;
}

.ujima-backend .auth-footer a {
    margin-left: 0.35rem;
    color: #d4a96e;
    text-decoration: none;
}

.ujima-backend .auth-footer a:hover {
    text-decoration: underline;
}

/* =========================
   DASHBOARD PAGE STYLES
   ========================= */

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.dashboard-card {
  padding: 1.5rem;
  border-radius: 12px;
}

.practice-insight-card {
  height: auto;
  min-height: 0;
}

.practice-insight-card .practice-insight-text,
.practice-insight-card .practice-insight-action {
  white-space: normal;
  overflow-wrap: anywhere;
}

.practice-insight-card .practice-insight-action {
  margin-bottom: 0;
}

.practice-insight-card .practice-insight-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-top: 0.85rem;
  border-radius: 999px;
  line-height: 1;
  font-size: 1.25rem;
}

.top-nav-bar {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.adinkra-hero-slot {
  min-height: 150px;
  margin: 0 0 1rem;
  border: 1px dashed rgba(247, 183, 49, 0.45);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(247, 183, 49, 0.12), rgba(19, 23, 32, 0.55)),
    rgba(13, 17, 26, 0.85);
}

@media (max-width: 768px) {
  .adinkra-hero-slot {
    min-height: 120px;
  }
}

.top-nav-bar .btn {
  margin-top: 0;
}

.top-nav-bar .btn.is-active,
.top-nav-bar .btn[aria-current="page"] {
  background-color: #f7b731;
  border-color: #f7b731;
  color: #111827;
}

.top-nav-bar .btn:focus-visible {
  outline: 3px solid #f7b731;
  outline-offset: 2px;
}

.page-heading-compact {
  margin: 0 0 1rem 0;
}

/* Reusable backend fixed symbol hero background */
.backend-fixed-sesa-hero {
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.82)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 560'><g transform='rotate(180 256 280)'><path fill='rgba(247,183,49,0.18)' d='M148 356c0-22 11-89 98-95 58-3 139 49 148 84 10-11 7-29-2-48 15 5 29 29 29 29 0 0 2-30-7-49 11 7 19 18 19 28 0 10 12-35-14-77-26-43-32-47-39-56-20-23-68-48-68-48l49-84c0 0 21 5 33-1 7-4 12-14 12-14l-27 8c0 0 14-18 12-31-11 11-16 18-28 18-12 0-27-20-27-20 0 0-2 28 6 35-5 11-47 86-47 86 0 0-20-4-36-4-16 0-44 4-44 4l-41-80c0 0 12-15 7-32-10 3-10 20-30 17-14-1-24-16-24-16 0 0 1 27 12 27 11 0-20 4-27-3-7-7 7 16 24 16 17 0 19-2 19-2l44 80c0 0-58 14-93 61-31 41-37 122-23 170 14 49 52 108 125 141 32 14 54 12 80 12 25 0 56-16 61-21 5-5 26-27 26-39 0-12 5-24 5-24 0 0 19-37 14-42-2-2-21 4-29 15-12 16-49 13-61 26-6 6-15 24-35 28-25 5-75-3-99-37-24-35-22-62-22-62z'/></g></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, 560px 560px;
  background-attachment: fixed, fixed;
}
  /* Extend hero height for full Sankofa symbol visibility */
  .backend-fixed-sesa-hero {
    min-height: 340px;
    min-height: 408px;
    height: 408px;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
  }
  @media (max-width: 700px) {
    .backend-fixed-sesa-hero {
      linear-gradient(rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.82)),
      height: 220px;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, 560px 560px;
    background-attachment: fixed, fixed;
  margin-bottom: 0.35rem;
}

.page-heading-compact p {
  margin: 0;
}

.my-practice-entry + .my-practice-entry {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 241, 196, 0.14);
}

.my-practice-entry-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.my-practice-entry-header h3 {
  margin: 0;
  color: #f7b731;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
}

.my-practice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.my-practice-actions form {
  margin: 0;
}

.my-practice-actions .btn {
  margin-top: 0;
}

.practice-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(247, 183, 49, 0.65);
  border-radius: 999px;
  color: #fff1c4;
  font-size: 0.95rem;
}

.rhythm-card {
  background: #131720;
  border: 1px solid #1f2a38;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.rhythm-meter {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 241, 196, 0.12);
  border: 1px solid rgba(255, 241, 196, 0.18);
  overflow: hidden;
  margin: 0.8rem 0 1rem;
}

.rhythm-fill {
  height: 100%;
  background: linear-gradient(90deg, #d35400, #f7b731);
  transition: width 0.35s ease;
}

.rhythm-message {
  color: #d8dee6;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.rhythm-symbols {
  min-height: 48px;
  border-top: 1px solid rgba(255, 241, 196, 0.14);
  padding-top: 0.85rem;
}

.rhythm-strong-rhythm {
  border-color: rgba(22, 160, 133, 0.62);
  background: linear-gradient(180deg, rgba(22, 160, 133, 0.12), #131720 50%);
}

.rhythm-building-rhythm {
  border-color: rgba(247, 183, 49, 0.62);
  background: linear-gradient(180deg, rgba(247, 183, 49, 0.12), #131720 50%);
}

.rhythm-seeking-rhythm {
  border-color: rgba(243, 156, 18, 0.62);
  background: linear-gradient(180deg, rgba(243, 156, 18, 0.12), #131720 50%);
}

.rhythm-return-needed {
  border-color: rgba(176, 58, 46, 0.62);
  background: linear-gradient(180deg, rgba(176, 58, 46, 0.12), #131720 50%);
}


/* =========================
   BASE BUTTON SYSTEM
========================= */

/* Shared behavior for all button variants */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-full {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  appearance: none;
}

/* Base button */
.btn {
  color: #fff1c4;
  border-color: currentColor;
  background-color: transparent;
  margin-top: 1em;
  border-radius: 200px;
  padding: 10px 30px;
  font-weight: 300;
}

/* Variants */
.btn-primary {
  background-color: #f7b731;
  border-color: #f7b731;
  color: #111827;
}

.btn-secondary,
.btn-full {
  background-color: #f39c12;
  border-color: #fbeee6;
  color: #40200a;
}

.btn-ghost {
  background-color: transparent;
  border-color: #e2b026dc;
  color: #f39c12;
}

.btn-delete {
  background-color: transparent;
  border-color: #b03a2e;
  color: #e74c3c;
}

.btn-delete:hover {
  background-color: #b03a2e;
  border-color: #b03a2e;
  color: #fff;
  transform: translateY(-1px);
}

.btn-delete:active {
  background-color: #922b21;
  border-color: #922b21;
  color: #fff;
  transform: translateY(1px);
}

/* Shared interactions */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-full:hover {
  transform: translateY(-1px);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-full:active {
  transform: translateY(1px);
}

.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-ghost:focus,
.btn-full:focus {
  outline: 2px solid #fff1c4;
  outline-offset: 2px;
}

/* Per-variant interactive colors */
.btn:hover {
  color: #af6f2b;
  background-color: #d35400;
  border-color: #d35400;
}

.btn:active {
  color: #fff1c4;
  background-color: #a04000;
  border-color: #a04000;
}

.btn-primary:hover {
  background-color: #e6a91f;
  border-color: #e6a91f;
  color: #111827;
}

.btn-primary:active {
  background-color: #cc7000;
  border-color: #cc7000;
  color: #111827;
}

.btn-secondary:hover,
.btn-full:hover {
  background-color: #e67e22;
  border-color: #16a085;
  color: #40200a;
}

.btn-secondary:active,
.btn-full:active {
  background-color: #d35400;
  border-color: #16a085;
  color: #fff1c4;
}

.btn-ghost:hover {
  background-color: #f39c12;
  border-color: #16a085;
  color: #fff1c4;
}

.btn-ghost:active {
  background-color: #cc7000;
  border-color: #16a085;
  color: #fff1c4;
}

/* Final mobile open-state behavior: keep content in one panel flow */
.menu-panel {
  top: 0;
  height: 100vh;
}

/* Hidden unless panel is open */
.menu-panel .mpatapo-menu {
  display: none !important;
  margin: 0 0 1rem;
  position: relative;
  z-index: 2;
}

/* Lower the opened menu/symbol cluster together */
.menu-panel.open {
  padding-top: 5rem;
}

.menu-panel.open .mpatapo-menu {
  display: flex !important;
}

.menu-panel.open nav {
  padding-top: 1rem;
}

.menu-panel.open .symbol-top,
.menu-panel.open .symbol-bottom {
  margin-top: 1.25rem;
}


/* ================================
   APPLY PAGE
   ================================ */

.apply-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 4rem;
}

.apply-card {
  width: 100%;
  max-width: 780px;
  background: #131720;
  border-radius: 16px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  border: 1px solid #1f2a38;
}

.apply-title {
  margin: 0 0 0.4rem;
  font-size: 2rem;
  font-weight: 600;
  color: #f7b731;
  text-transform: none;
  letter-spacing: 0;
}

.apply-subtitle {
  margin: 0 0 2rem;
  color: #9ca3af;
  font-size: 0.95rem;
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 2-column grid row */
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Individual field block */
.apply-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Full-width override */
.apply-field--full {
  grid-column: 1 / -1;
}

.apply-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #d1d5db;
}

.apply-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid #2a3240;
  background: #0d0f16;
  color: #e5e7eb;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.apply-input:focus {
  outline: none;
  border-color: #f7b731;
  box-shadow: 0 0 0 2px rgba(247, 183, 49, 0.15);
}

.apply-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}

.apply-submit {
  margin-top: 0.5rem;
}

.apply-submit-btn {
  display: inline-block;
  background-color: #f7b731;
  color: #111827;
  border: none;
  padding: 0.75rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 200px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.apply-submit-btn:hover {
  background-color: #e0a520;
  transform: translateY(-2px);
}

/* Responsive: collapse to 1 column on mobile */
@media (max-width: 640px) {
  .backend-fixed-sesa-hero {
    min-height: 264px;
    height: 264px;
  }
}
    grid-template-columns: 1fr;
  }
}

/* ================================
   APPLY SUCCESS PAGE
   ================================ */

.apply-success-card {
  max-width: 760px;
}

.success-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.success-icon {
  width: 62px;
  height: 62px;
}

.success-heading {
  text-align: center;
  margin-bottom: 0.6rem;
}

.success-subtext {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}

.success-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #2b3647, transparent);
  margin-bottom: 1.5rem;
}

.success-next {
  margin-bottom: 1.5rem;
}

.success-next-title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #f3f4f6;
}

.success-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.success-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.step-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
  background: #f7b731;
}

.step-body strong {
  display: block;
  color: #f3f4f6;
  margin-bottom: 0.2rem;
}

.step-body p {
  margin: 0;
  color: #c5ccd6;
  line-height: 1.55;
}

.success-timeframe {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid #2a3240;
  background: #0f172a;
  margin-bottom: 1.7rem;
}

.timeframe-label {
  font-size: 0.88rem;
  color: #9ca3af;
}

.timeframe-value {
  font-size: 0.92rem;
  color: #f7b731;
  font-weight: 600;
}

.success-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.success-btn-primary {
  margin-top: 0;
}

.success-link {
  color: #d4a96e;
  font-size: 0.95rem;
  text-decoration: none;
}

.success-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .success-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .success-btn-primary {
    text-align: center;
    width: 100%;
  }
}

/* ================================
   SOUND HEALERS PAGE
   ================================ */

.sound-healers-page {
  max-width: 1120px;
  margin: 2.25rem auto 3.5rem;
  padding: 0 1rem;
}

.sound-healers-hero {
  border-radius: 16px;
}

.sound-healers-hero-copy {
  max-width: 760px;
}

.sound-healers-section {
  margin-top: 1.5rem;
}

.sound-healers-section h2 {
  margin: 0 0 0.9rem;
  font-size: 1.45rem;
  color: #f7b731;
}

.sound-healers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sound-healers-item h3 {
  margin: 0 0 0.45rem;
  color: #f3f4f6;
  font-size: 1.05rem;
}

.sound-healers-item p {
  margin: 0;
  color: #c5ccd6;
  line-height: 1.55;
}

.sound-healers-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sound-healers-steps li strong {
  display: block;
  color: #f3f4f6;
  margin-bottom: 0.35rem;
}

.sound-healers-steps li p {
  margin: 0;
  color: #c5ccd6;
}

.sound-healer-apply-card {
  max-width: 980px;
  margin: 0 auto;
}

.sound-healer-note {
  border: 1px solid #2a3240;
  background: #0f172a;
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  color: #c5ccd6;
  line-height: 1.5;
  margin-bottom: 1.3rem;
}

@media (max-width: 900px) {
  .sound-healers-grid,
  .sound-healers-steps {
    grid-template-columns: 1fr;
  }
}

/* ================================
   DAILY START SETUP
   ================================ */

.daily-start-wrapper {
  padding-top: 2rem;
}

.daily-start-card {
  max-width: 860px;
}

.daily-start-note,
.daily-start-commitment-preview {
  border: 1px solid #2a3240;
  background: #0f172a;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  color: #c5ccd6;
  line-height: 1.55;
}

.daily-start-commitment-preview {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.daily-start-commitment-preview strong {
  color: #f3f4f6;
}

.daily-start-summary-card p {
  margin-bottom: 0.7rem;
}

.daily-start-summary-card .btn {
  margin-top: 0.4rem;
}

.daily-start-summary-card form {
  margin: 0;
}

/* ================================
   TODAY'S RHYTHM — FEATURED CARD
   ================================ */

.rhythm-featured-card {
  border-left: 4px solid #c9a84c;
  grid-column: 1 / -1;
}

.daily-entry {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.daily-entry h3 {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
}

.rhythm-call-card,
.commitment-response-card,
.reflection-inline-card {
  background: #0f172a;
  border: 1px solid #2a3240;
}

.commitment-response-card {
  position: relative;
}

.commitment-response-card::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: -0.9rem;
  width: 1px;
  height: 0.9rem;
  background: rgba(201, 168, 76, 0.55);
}

.daily-state-pill {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #d4af5d;
  background: rgba(212, 175, 93, 0.12);
  border: 1px solid rgba(212, 175, 93, 0.35);
}

.rhythm-thought-box {
  border: 1px solid #2a3240;
  background: #0c1220;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0.9rem 0 1.2rem;
  position: relative;
}

.rhythm-thought-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 0.55rem;
}

.rhythm-thought-text {
  font-style: italic;
  font-size: 1.05rem;
  color: #dde3ea;
  line-height: 1.6;
  margin: 0 0 0.4rem;
}

.rhythm-thought-author {
  font-size: 0.82rem;
  color: #7a8694;
  margin: 0;
}

.rhythm-commitment {
  border-top: 1px solid #1f2a38;
  padding-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.rhythm-commitment p {
  margin-bottom: 0.5rem;
}

.rhythm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.4rem;
}

.rhythm-actions form {
  margin: 0;
}

.rhythm-begun-note {
  width: 100%;
  margin-bottom: 0.3rem;
}

@media (max-width: 600px) {
  .rhythm-featured-card {
    grid-column: unset;
  }
  .commitment-response-card::before {
    display: none;
  }
  .rhythm-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rhythm-actions .btn,
  .rhythm-actions button {
    width: 100%;
    text-align: center;
  }
}

/* Return to Rhythm: Sesa Wo Suban calming anchor */
.sesa-anchor {
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  min-height: 300px;
  margin: 0.75rem auto 1.5rem;
  padding: 1rem 0 0.5rem;
}

.sesa-svg {
  width: min(320px, 72vw);
  height: auto;
  display: block;
  overflow: visible;
  transform: rotate(36deg);
}

.rhythm-panel {
  position: relative;
}

.rhythm-training-ticker {
  position: relative;
  overflow: hidden;
  margin: 0.25rem auto 1.4rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(201, 168, 76, 0.24);
  border-bottom: 1px solid rgba(201, 168, 76, 0.16);
  max-width: 820px;
}

.rhythm-training-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  color: #d7dfe7;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: nowrap;
  animation: rhythmTickerDrift 9s linear infinite;
}

.emotion-selector {
  max-width: 820px;
  margin: 0 auto 1.4rem;
  opacity: 1;
  transform: none;
  animation: none;
}

.emotion-selector h2 {
  margin-bottom: 1rem;
}

.emotion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}

.emotion-choice {
  min-height: 48px;
  justify-content: center;
  border: 1px solid rgba(201, 168, 76, 0.26);
  background: rgba(255, 255, 255, 0.03);
  color: #f1f4f8;
}

.emotion-choice:hover,
.emotion-choice:focus-visible {
  border-color: rgba(201, 168, 76, 0.62);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.12);
}

.emotion-choice.is-selected {
  background: rgba(201, 168, 76, 0.18);
  border-color: #c9a84c;
  color: #f8f0cf;
}

.emotion-response {
  margin: 1rem 0 0;
  color: #f0dfaa;
  font-size: 0.95rem;
}

.rhythm-js-ready .rhythm-action-stage {
  opacity: 0.38;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.rhythm-js-ready .rhythm-action-stage.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sesa-ring-outline,
.sesa-ring-fill,
.sesa-star-outline,
.sesa-star-fill,
.sesa-center-circle,
.sesa-relief-cutout {
  transform-origin: center;
  transform-box: fill-box;
}

.sesa-ring-fill {
  fill: rgba(201, 168, 76, 0.11);
  animation: sesaRingBreath 9s ease-in-out infinite;
}

.sesa-ring-outline {
  fill: none;
  stroke: rgba(201, 168, 76, 0.62);
  stroke-width: 2;
  animation: sesaRingBreath 9s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(201, 168, 76, 0.2));
}

.sesa-star-fill {
  fill: rgba(236, 215, 153, 0.16);
  animation: sesaStarPulse 4.6s ease-in-out 0.65s infinite;
}

.sesa-star-outline {
  fill: none;
  stroke: #c9a84c;
  stroke-width: 2.4;
  animation: sesaStarPulse 4.6s ease-in-out 0.65s infinite;
}

.sesa-center-circle {
  fill: rgba(245, 229, 184, 0.85);
  animation: sesaCenterGlow 4.6s ease-in-out 0.65s infinite;
}

.sesa-relief-cutout {
  fill: #0f1520;
  opacity: 0.34;
}

@keyframes sesaRingBreath {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  40% {
    transform: scale(1.08);
    opacity: 1;
  }
  55% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes sesaStarPulse {
  0% {
    transform: scale(1);
    opacity: 0.84;
  }
  45% {
    transform: scale(1.035);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.84;
  }
}

@keyframes sesaCenterGlow {
  0% {
    opacity: 0.58;
  }
  45% {
    opacity: 0.88;
  }
  100% {
    opacity: 0.58;
  }
}

@keyframes rhythmTickerDrift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 1.5rem));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .sesa-ring-outline,
  .sesa-ring-fill,
  .sesa-star-outline,
  .sesa-star-fill,
  .sesa-center-circle {
    animation: none;
  }
  .rhythm-training-track,
  .emotion-selector {
    animation: none;
  }
  .sesa-ring-outline,
  .sesa-star-outline {
    filter: none;
  }
  .sesa-center-circle {
    opacity: 0.72;
  }
  .emotion-selector {
    opacity: 1;
    transform: none;
  }
  .rhythm-js-ready .rhythm-action-stage {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 700px) {
  .sesa-anchor {
    width: min(100%, 240px);
    min-height: 220px;
    margin-bottom: 1.1rem;
  }
  .sesa-svg {
    width: min(230px, 68vw);
  }
  .rhythm-training-ticker {
    margin-bottom: 1rem;
  }
  .rhythm-training-track {
    font-size: 0.88rem;
  }
}

/* ── Admin Applications Table ──────────────────────────────────────── */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 1.5rem;
  background: #f7efe1;
  border-radius: 14px;
  padding: 1rem;
}

.admin-applications-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: #1b2430;
  background: #fffaf0;
}

.admin-applications-table th,
.admin-applications-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid rgba(27, 36, 48, 0.18);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-applications-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2a3442;
  background: #eadcc5;
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-applications-table tr:nth-child(even) {
  background: #fdf4e6;
}

.admin-applications-table tr:hover {
  background: #f1e2c7;
}

.admin-applications-table .score-total,
.admin-applications-table .recommendation {
  font-weight: 700;
}

.admin-applications-table .recommendation {
  min-width: 130px;
}

.admin-applications-table .btn,
.admin-applications-table button,
.admin-applications-table a.button {
  font-size: 0.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
}

/* Recommendation badges */
.recommendation-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.recommendation-strong {
  background: #d8f5df;
  color: #116b2d;
}

.recommendation-review {
  background: #fff1c2;
  color: #7a4b00;
}

.recommendation-reject {
  background: #ffd7d7;
  color: #8a1f1f;
}

.recommendation-pending {
  background: #e7eaf0;
  color: #334155;
}

/* Practice library distinct row for buttons */
.distinct-row {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────────── */
/* Healer Dashboard nea-onnim symbol sizing and positioning */

.practice-heading-nea-onnim-bg {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -40px;
}

.practice-heading-nea-onnim-bg svg {
  max-height: 200px;
  overflow: hidden;
}

.dashboard-nea-onnim {
  width: 180px;
  height: 180px;
  transform: scale(0.7);
  transform-origin: top center;
}