/* =========================================================
   MODAL ANIMATION
========================================================= */

#guideModal {
  animation: guideFadeIn 0.2s ease;
}

#guideModal > div {
  animation: guideScaleIn 0.25s ease;
}

@keyframes guideFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes guideScaleIn {
  from {
    transform: scale(0.96) translateY(10px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}


/* =========================================================
   MODAL SURFACE / DEPTH
========================================================= */

#guideModal > div {
  position: relative;

  background: rgba(15, 18, 30, 0.90);

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 40px rgba(99, 102, 241, 0.15);
}


/* subtle glass highlight */

#guideModal > div::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.05)
  );
}


/* =========================================================
   HEADER
========================================================= */

.guide-header {
  position: relative;
  padding-right: 40px;
  margin-bottom: 30px;
}

.guide-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 6px;
}

.guide-subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #9ca3af;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.guide-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 16px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #a5b4fc;
}

.guide-section-line {
  width: 22px;
  height: 1px;

  background: rgba(129, 140, 248, 0.7);

  box-shadow:
    0 0 8px rgba(99, 102, 241, 0.35);
}


/* =========================================================
   GUIDE LAYOUT
========================================================= */

.guide-item {
  padding: 14px;

  border-radius: 14px;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.guide-item:hover {
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-1px);
}


/* spacing between items */

.guide-item + .guide-item {
  margin-top: 20px;
}


/* side-by-side layout */

.guide-item.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  text-align: center;
}


/* stacked layout */

.guide-item.stack {
  display: flex;

  flex-direction: column;

  gap: 14px;
}


/* =========================================================
   IMAGE STYLING
========================================================= */

.guide-image {
  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 0;
}

.guide-image img {
  display: block;

  width: 100%;
  height: auto;
  max-height: 220px;

  object-fit: contain;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(99, 102, 241, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.guide-image img:hover {
  transform: scale(1.015);

  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(99, 102, 241, 0.2);
}


/* =========================================================
   TEXT STYLING
========================================================= */

.guide-text {
  display: flex;

  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.guide-text .title {
  font-weight: 600;

  font-size: 15px;

  color: #fff;

  margin-bottom: 6px;
}

.guide-text p {
  margin: 0;

  font-size: 13px;

  color: #9ca3af;

  line-height: 1.6;
}

.guide-item.side .guide-text {
  max-width: 300px;
}


/* =========================================================
   AI ENGINE SECTION
========================================================= */

.engine-section {
  margin-top: 8px;
}

.engine-intro {
  max-width: 720px;

  margin: 0 0 18px;

  font-size: 13px;

  line-height: 1.6;

  color: #8f98aa;
}


/* =========================================================
   ENGINE GRID
========================================================= */

.engine-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;
}


/* =========================================================
   ENGINE CARD
========================================================= */

.engine-card {
  position: relative;

  padding: 17px;

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.engine-card:hover {
  transform: translateY(-2px);

  background: rgba(255, 255, 255, 0.04);

  border-color: rgba(129, 140, 248, 0.25);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   ENGINE HEADER
========================================================= */

.engine-card-header {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;
}

.engine-icon {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 10px;

  background: rgba(99, 102, 241, 0.12);

  border: 1px solid rgba(129, 140, 248, 0.16);

  font-size: 16px;
}

.engine-name {
  font-size: 14px;

  font-weight: 600;

  color: #fff;
}

.engine-label {
  margin-top: 2px;

  font-size: 10px;

  color: #818cf8;

  letter-spacing: 0.03em;
}


/* =========================================================
   ENGINE FEATURES
========================================================= */

.engine-card ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.engine-card li {
  position: relative;

  padding-left: 14px;

  margin-top: 8px;

  font-size: 12px;

  line-height: 1.5;

  color: #9ca3af;
}

.engine-card li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 7px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #818cf8;

  box-shadow:
    0 0 7px rgba(129, 140, 248, 0.5);
}


/* =========================================================
   FOOTER TIP
========================================================= */

.guide-tip {
  display: flex;

  align-items: flex-start;

  gap: 11px;

  margin-top: 10px;

  padding: 13px 15px;

  border-radius: 13px;

  background: rgba(59, 130, 246, 0.06);

  border: 1px solid rgba(59, 130, 246, 0.12);
}

.guide-tip-icon {
  flex-shrink: 0;

  font-size: 15px;
}

.guide-tip-title {
  margin-bottom: 3px;

  font-size: 11px;

  font-weight: 600;

  color: #60a5fa;
}

.guide-tip-text {
  font-size: 11px;

  line-height: 1.6;

  color: #8fa1bd;
}

.guide-tip-text b {
  color: #c7d2fe;
}

.guide-tip-separator {
  margin: 0 7px;

  color: #4b5563;
}


/* =========================================================
   LIGHT MODE SUPPORT
========================================================= */

html:not(.dark) #guideModal > div {
  background: rgba(255, 255, 255, 0.97);

  color: #111;

  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

html:not(.dark) #guideModal .text-gray-300 {
  color: #444;
}

html:not(.dark) #guideModal .text-gray-400 {
  color: #666;
}

html:not(.dark) .guide-eyebrow {
  color: #6366f1;
}

html:not(.dark) .guide-subtitle {
  color: #6b7280;
}

html:not(.dark) .guide-item:hover {
  background: rgba(0, 0, 0, 0.025);
}

html:not(.dark) .guide-text .title {
  color: #111827;
}

html:not(.dark) .guide-text p {
  color: #6b7280;
}

html:not(.dark) .engine-intro {
  color: #6b7280;
}

html:not(.dark) .engine-card {
  background: rgba(0, 0, 0, 0.018);

  border-color: rgba(0, 0, 0, 0.08);
}

html:not(.dark) .engine-card:hover {
  background: rgba(0, 0, 0, 0.03);

  border-color: rgba(99, 102, 241, 0.2);
}

html:not(.dark) .engine-name {
  color: #111827;
}

html:not(.dark) .engine-label {
  color: #6366f1;
}

html:not(.dark) .engine-card li {
  color: #6b7280;
}

html:not(.dark) .guide-tip {
  background: rgba(59, 130, 246, 0.05);

  border-color: rgba(59, 130, 246, 0.12);
}

html:not(.dark) .guide-tip-text {
  color: #64748b;
}

html:not(.dark) .guide-tip-text b {
  color: #3730a3;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 768px) {

  #guideModal > div {
    max-height: 90vh;
  }

  .guide-item.side {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .guide-item.side .guide-text {
    max-width: none;
  }

  .guide-image img {
    max-height: 200px;
  }

  .guide-header {
    margin-bottom: 24px;
  }

  .guide-tip {
    flex-direction: row;
  }

}


@media (max-width: 480px) {

  #guideModal > div {
    padding: 20px;
  }

  .guide-image img {
    max-height: 170px;
  }

  .engine-card {
    padding: 15px;
  }

  .guide-tip-separator {
    display: none;
  }

}

/* =========================================================
   GUIDE CONTENT ALIGNMENT
========================================================= */

.guide-section,
.engine-section {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   SECTION HEADINGS — CENTER
========================================================= */

.guide-section-heading {
  justify-content: center;
  text-align: center;
}


/* =========================================================
   GUIDE ITEMS — CENTER CONTENT
========================================================= */

.guide-item {
  text-align: center;
}


/* Side items: keep the image/text relationship,
   but center the complete block */

.guide-item.side {
  justify-items: center;
}


/* Text block centered */

.guide-text {
  align-items: center;
  text-align: center;
}

.guide-item.side .guide-text {
  max-width: 360px;
}


/* Images remain centered */

.guide-image {
  width: 100%;
  justify-content: center;
}


/* =========================================================
   STACKED GUIDE ITEM
========================================================= */

.guide-item.stack {
  align-items: center;
}

.guide-item.stack .guide-text {
  align-items: center;
  text-align: center;
}


/* =========================================================
   AI ENGINE INTRO — CENTER
========================================================= */

.engine-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* =========================================================
   ENGINE CARDS — CENTER CONTENT
========================================================= */

.engine-card {
  text-align: center;
}

.engine-card .guide-image {
  justify-content: center;
  margin-bottom: 14px;
}

.engine-card-header {
  justify-content: center;
  text-align: center;
}

.engine-card-header > div:last-child {
  text-align: left;
}

.engine-card ul {
  text-align: left;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   FOOTER TIP — CENTER
========================================================= */

.guide-tip {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* =========================================================
   GUIDE MODAL — CENTER ALIGNMENT OVERRIDE
   Keep this block at the VERY END of the stylesheet.
========================================================= */


/* ---------------------------------------------------------
   Main content width
--------------------------------------------------------- */

#guideModal > div > .space-y-8 {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* ---------------------------------------------------------
   Workspace guide items
--------------------------------------------------------- */

#guideModal .guide-item.side,
#guideModal .guide-item.stack {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* ---------------------------------------------------------
   Guide image container
--------------------------------------------------------- */

#guideModal .guide-item .guide-image {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}


/* ---------------------------------------------------------
   Guide images
--------------------------------------------------------- */

#guideModal .guide-item .guide-image img {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  margin-left: auto;
  margin-right: auto;
}


/* ---------------------------------------------------------
   Guide text
--------------------------------------------------------- */

#guideModal .guide-item .guide-text {
  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* ---------------------------------------------------------
   Section headings
--------------------------------------------------------- */

#guideModal .guide-section-heading {
  justify-content: center;
  text-align: center;
}


/* ---------------------------------------------------------
   AI engine section
--------------------------------------------------------- */

#guideModal .engine-section {
  width: 100%;
  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}


/* Engine introduction */

#guideModal .engine-intro {
  max-width: 720px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* ---------------------------------------------------------
   Engine cards
--------------------------------------------------------- */

#guideModal .engine-grid {
  width: 100%;
}

#guideModal .engine-card {
  text-align: center;
}


/* Engine screenshot */

#guideModal .engine-card .guide-image {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 14px;
}


/* Engine header */

#guideModal .engine-card-header {
  justify-content: center;
}


/* Keep feature list readable */

#guideModal .engine-card ul {
  width: 100%;
  max-width: 270px;

  margin-left: auto;
  margin-right: auto;

  text-align: left;
}


/* ---------------------------------------------------------
   Footer tip
--------------------------------------------------------- */

#guideModal .guide-tip {
  width: 100%;
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   GUIDE MODAL THEME SURFACE
   MUST BE LAST
========================================================= */

#guideModal > div {
  background: rgba(15, 18, 30, 0.90) !important;
}

html:not(.dark) #guideModal > div {
  background: rgba(255, 255, 255, 0.97) !important;
}