@font-face {
      font-family: "Sarchia Qaisy";
      src: url("../fonts/72_Sarchia_Qaisy.ttf") format("truetype");
      font-weight: 400 800;
      font-style: normal;
      font-display: swap;
    }

    :root {
      color-scheme: dark;
      --bg: #03040d;
      --surface: rgba(12, 18, 42, 0.76);
      --surface-strong: rgba(16, 24, 56, 0.91);
      --text: #f8fbff;
      --muted: rgba(230, 237, 255, 0.76);
      --soft: rgba(161, 177, 214, 0.72);
      --line: rgba(202, 218, 255, 0.18);
      --line-hot: rgba(98, 230, 255, 0.48);
      --shadow: 0 24px 64px rgba(0, 0, 0, 0.58), 0 10px 30px rgba(80, 108, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      --radius: 22px;
      --radius-lg: 30px;
      --accent: #35d8ff;
      --accent-2: #9d74ff;
      --accent-contrast: #ffffff;
      --analysts: #9d74ff;
      --diplomats: #75f7d2;
      --sentinels: #6f8dff;
      --explorers: #35d8ff;
      --border-subtle: var(--line);
      --border-glow: rgba(245, 158, 11, 0.25);
      --accent-primary: #f59e0b;
      --accent-secondary: var(--accent);
      --text-primary: var(--text);
      --text-secondary: var(--muted);
      --radius-full: 9999px;
      --font-display: 'Sarchia Qaisy', 'Noto Sans Arabic', 'Inter', sans-serif;
      --font-kurdish: 'Sarchia Qaisy', 'Noto Sans Arabic', 'Inter', sans-serif;
    }

    * {
      box-sizing: border-box;
      font-family: "Sarchia Qaisy", "Noto Sans Arabic", "Inter", sans-serif !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 10%, rgba(157, 116, 255, 0.20), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(117, 247, 210, 0.14), transparent 28%),
        radial-gradient(circle at 14% 82%, rgba(111, 141, 255, 0.14), transparent 32%),
        radial-gradient(circle at 86% 78%, rgba(53, 216, 255, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(3, 4, 13, 0.99), rgba(8, 12, 30, 0.97) 45%, rgba(5, 7, 19, 0.99));
      color: var(--text);
      font-family: var(--font-kurdish);
      line-height: 1.7;
      overflow-x: clip;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0.38;
      background-image:
        linear-gradient(rgba(169, 187, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 247, 210, 0.022) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(circle at center, black, transparent 82%);
    }

    button {
      font: inherit;
    }

    .library-shell {
      position: relative;
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 38px 0 72px;
      z-index: 1;
    }

    .library-shell.is-detail-page {
      padding-top: 20px;
    }

    .library-shell.is-detail-page .library-hero,
    .library-shell.is-detail-page .main-knowledge,
    .library-shell.is-detail-page .groups-grid {
      display: none;
    }

    .library-hero {
      background:
        radial-gradient(circle at 18% 0%, rgba(157, 116, 255, 0.20), transparent 34%),
        radial-gradient(circle at 82% 100%, rgba(53, 216, 255, 0.16), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(8, 12, 28, 0.70);
      border: 1px solid rgba(202, 218, 255, 0.20);
      border-radius: 30px;
      box-shadow: 0 28px 74px rgba(0, 0, 0, 0.40), 0 0 44px rgba(53, 216, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(18px) saturate(132%);
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      align-items: center;
      justify-items: center;
      margin: 0 auto 0;
      overflow: hidden;
      padding: clamp(26px, 4.5vw, 46px) clamp(18px, 5vw, 54px) clamp(28px, 4.5vw, 48px);
      max-width: 980px;
      text-align: center;
      position: relative;
    }

    .library-hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(460px, 70%);
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--analysts), var(--diplomats), var(--sentinels), var(--explorers), transparent);
      opacity: 0.78;
    }

    .library-hero::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 28%, rgba(117, 247, 210, 0.06) 64%, transparent);
      opacity: 0.55;
      pointer-events: none;
    }

    .library-hero > div {
      display: grid;
      justify-items: center;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .eyebrow {
      color: var(--accent);
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0;
      margin: 0 0 10px;
      text-transform: none;
    }

    .library-hero .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background:
        linear-gradient(135deg, rgba(157, 116, 255, 0.10), rgba(53, 216, 255, 0.06)),
        var(--surface);
      border: 1px solid rgba(202, 218, 255, 0.22);
      border-radius: 999px;
      padding: 8px 18px;
      margin: 0 0 20px;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .library-hero .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
      flex: 0 0 auto;
    }

    h1 {
      font-family: var(--font-kurdish);
      font-size: clamp(2.35rem, 6vw, 4.8rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: 0;
      margin: 0;
      max-width: 900px;
      margin-inline: auto;
      text-align: center;
      background: linear-gradient(135deg, #ffffff, #dbeafe 22%, var(--diplomats), var(--explorers), var(--accent-2), #ffffff);
      background-size: 220% 220%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 22px rgba(53, 216, 255, 0.18);
    }

    .hero-copy {
      color: var(--muted);
      font-size: clamp(1rem, 2vw, 1.15rem);
      line-height: 1.7;
      margin: 18px 0 0;
      max-width: 720px;
    }

    .offer-chip {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 24px;
      backdrop-filter: blur(18px);
    }

    .offer-chip strong {
      display: block;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .offer-chip span {
      color: var(--muted);
      display: block;
      line-height: 1.55;
    }

    .groups-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .main-knowledge {
      background:
        radial-gradient(circle at 8% 8%, rgba(117, 247, 210, 0.10), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(157, 116, 255, 0.10), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.022)),
        rgba(6, 9, 22, 0.90);
      border: 1px solid rgba(202, 218, 255, 0.24);
      border-radius: var(--radius-lg);
      box-shadow: 0 28px 76px rgba(0, 0, 0, 0.66), 0 0 34px rgba(53, 216, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.09);
      color: var(--muted);
      line-height: 1.9;
      margin: 34px auto 30px;
      max-width: 980px;
      padding: clamp(22px, 4vw, 36px);
    }

    .knowledge-title {
      color: var(--text);
      text-shadow: 0 0 22px rgba(117, 247, 210, 0.10);
      font-size: clamp(1.55rem, 4vw, 2.45rem);
      font-weight: 800;
      line-height: 1.35;
      margin: 0 0 18px;
    }

    .knowledge-section {
      border-top: 1px solid rgba(202, 218, 255, 0.15);
      margin-top: 24px;
      padding-top: 22px;
    }

    .knowledge-section h2 {
      align-items: center;
      color: var(--text);
      display: flex;
      flex-wrap: wrap;
      font-size: clamp(1.15rem, 2.5vw, 1.55rem);
      font-weight: 800;
      gap: 8px;
      line-height: 1.45;
      margin: 0 0 12px;
    }

    .knowledge-section p {
      color: var(--muted);
      font-size: clamp(1rem, 2vw, 1.08rem);
      line-height: 2.05;
      margin: 0;
    }

    .benefit-list {
      display: grid;
      gap: 12px;
      list-style: none;
      margin: 16px 0 0;
      padding: 0;
    }

    .benefit-list li {
      align-items: flex-start;
      --benefit-accent: var(--explorers);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--benefit-accent) 9%, transparent), rgba(255, 255, 255, 0.032)),
        rgba(255, 255, 255, 0.025);
      border: 1px solid color-mix(in srgb, var(--benefit-accent) 26%, rgba(202, 218, 255, 0.12));
      border-radius: 16px;
      color: var(--muted);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      line-height: 1.85;
      padding: 14px 16px;
    }

    .benefit-list li:nth-child(1) {
      --benefit-accent: var(--diplomats);
    }

    .benefit-list li:nth-child(2) {
      --benefit-accent: var(--sentinels);
    }

    .benefit-list li:nth-child(3) {
      --benefit-accent: var(--explorers);
    }

    .benefit-list .lottie-emoji {
      margin-top: 0;
    }

    .group-card {
      --group: var(--accent);
      position: relative;
      overflow: hidden;
      min-height: 300px;
      border: 1px solid color-mix(in srgb, var(--group) 28%, var(--line));
      border-radius: var(--radius-lg);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.090), rgba(255, 255, 255, 0.026)),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--group) 20%, transparent), transparent 38%),
        radial-gradient(circle at 96% 96%, color-mix(in srgb, var(--group) 9%, transparent), transparent 34%),
        rgba(6, 9, 22, 0.88);
      box-shadow: 0 24px 66px rgba(0, 0, 0, 0.62), 0 0 30px color-mix(in srgb, var(--group) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      padding: 24px;
      isolation: isolate;
      animation: rise 600ms ease both;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .group-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, color-mix(in srgb, var(--group) 46%, transparent), transparent 42%, rgba(255, 255, 255, 0.035));
      opacity: 0.28;
      z-index: -1;
    }

    .group-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--group) 34%, var(--line));
      box-shadow: 0 26px 66px rgba(0, 0, 0, 0.52), 0 0 28px color-mix(in srgb, var(--group) 12%, transparent);
    }

    .group-top {
      align-items: center;
      display: grid;
      gap: 16px;
      justify-items: center;
      margin-bottom: 24px;
      text-align: center;
    }

    .group-card h2 {
      align-items: center;
      display: inline-flex;
      gap: 8px;
      justify-content: center;
      font-size: clamp(1.45rem, 2.2vw, 2.1rem);
      margin: 0;
      line-height: 1.25;
      text-align: center;
    }

    .group-card h2 .lottie-emoji,
    .type-title-box .lottie-emoji {
      height: clamp(32px, 3vw, 44px);
      width: clamp(32px, 3vw, 44px);
      vertical-align: middle;
    }

    .group-card p {
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
      max-width: 520px;
    }

    .group-mark {
      align-items: center;
      background: color-mix(in srgb, var(--group) 14%, rgba(255, 255, 255, 0.035));
      border: 1px solid color-mix(in srgb, var(--group) 30%, transparent);
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px color-mix(in srgb, var(--group) 20%, transparent);
      color: var(--group);
      display: grid;
      font-size: 1.2rem;
      font-weight: 900;
      height: 52px;
      place-items: center;
      width: 52px;
    }

    .personality-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .type-button,
    .category-button,
    .ghost-button,
    .premium-button {
      border: 0;
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    .type-button {
      align-items: center;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--group) 8%, transparent), rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.026);
      border: 1px solid color-mix(in srgb, var(--group) 24%, rgba(202, 218, 255, 0.13));
      border-radius: 16px;
      color: var(--text);
      display: flex;
      justify-content: center;
      min-height: 76px;
      padding: 16px;
      text-align: center;
    }

    .type-button strong {
      color: #ffffff;
      display: block;
      direction: ltr;
      font-family: var(--font-display);
      font-size: 1.18rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-shadow: 0 8px 24px color-mix(in srgb, var(--group) 24%, transparent);
    }

    .type-button span {
      color: rgba(238, 244, 255, 0.86);
      display: block;
      font-size: 0.88rem;
      margin-top: 4px;
    }

    .type-button > span {
      color: inherit;
    }

    .type-button:hover,
    .type-button:focus-visible,
    .category-button:hover,
    .category-button:focus-visible,
    .ghost-button:hover,
    .premium-button:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
      outline: none;
    }

    .group-card .type-button:hover,
    .group-card .type-button:focus-visible {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--group) 18%, transparent), rgba(255, 255, 255, 0.052)),
        rgba(255, 255, 255, 0.04);
      border-color: color-mix(in srgb, var(--group) 54%, var(--line));
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32), 0 0 26px color-mix(in srgb, var(--group) 20%, transparent);
    }

    .detail-panel {
      display: none;
      margin-top: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--group) 28%, transparent), transparent 32%),
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.11), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026)),
        var(--surface);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(12px) saturate(128%);
      min-height: calc(100vh - 86px);
      position: relative;
    }

    .mbti-personality-detail {
      --mbti-accent: var(--group);
      --mbti-accent-soft: color-mix(in srgb, var(--group) 14%, transparent);
      --mbti-glow: color-mix(in srgb, var(--group) 20%, transparent);
      --mbti-reader-surface: rgba(9, 14, 31, 0.66);
      --mbti-reader-line: color-mix(in srgb, var(--group) 18%, var(--line));
      scroll-margin-top: 16px;
    }

    .detail-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, black, transparent 70%);
      pointer-events: none;
    }

    .detail-panel.is-open {
      display: block;
      animation: rise 420ms ease both;
    }

    .detail-page-top {
      display: flex;
      justify-content: flex-start;
      padding: clamp(12px, 2.4vw, 18px) clamp(14px, 3vw, 26px) 0;
      position: relative;
      z-index: 1;
    }

    .detail-header {
      display: grid;
      align-items: center;
      gap: clamp(14px, 2.4vw, 24px);
      grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
      padding: clamp(8px, 2vw, 16px) clamp(14px, 3vw, 26px) clamp(14px, 2.8vw, 22px);
      border-bottom: 1px solid var(--line);
      position: relative;
      z-index: 1;
    }

    .detail-header h2 {
      direction: ltr;
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 7vw, 5.4rem);
      font-weight: 800;
      line-height: 1;
      margin: 0 0 6px;
      text-align: right;
      text-shadow: 0 18px 46px color-mix(in srgb, var(--group) 26%, transparent);
      background: linear-gradient(135deg, #ffffff 8%, color-mix(in srgb, var(--group) 82%, #ffffff) 48%, #dfe6ff 92%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .detail-header p {
      color: var(--muted);
      font-size: clamp(1rem, 1.7vw, 1.12rem);
      line-height: 1.72;
      margin: 0;
      max-width: 760px;
    }

    .detail-title-row {
      align-items: center;
      display: flex;
      gap: 12px;
      justify-content: flex-start;
      margin-bottom: 10px;
    }

    .detail-title-row .eyebrow {
      margin: 0;
    }

    .type-name-pill {
      border: 1px solid color-mix(in srgb, var(--group) 28%, var(--line));
      border-radius: 999px;
      color: var(--text);
      direction: rtl;
      font-size: 0.92rem;
      line-height: 1.25;
      padding: 7px 12px;
      background: color-mix(in srgb, var(--group) 9%, rgba(255, 255, 255, 0.045));
      white-space: nowrap;
    }

    .type-identity {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .identity-chip {
      align-items: center;
      background: color-mix(in srgb, var(--mbti-accent) 8%, rgba(255, 255, 255, 0.052));
      border: 1px solid var(--mbti-reader-line);
      border-radius: 999px;
      color: var(--muted);
      display: inline-flex;
      font-size: 0.94rem;
      gap: 7px;
      line-height: 1.25;
      padding: 8px 11px;
    }

    .identity-chip strong {
      color: var(--text);
      direction: ltr;
      font-weight: 800;
    }

    .type-object {
      align-items: center;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.035) 44%, rgba(0, 0, 0, 0.14)),
        color-mix(in srgb, var(--group) 16%, rgba(9, 14, 34, 0.88));
      border: 1px solid color-mix(in srgb, var(--group) 30%, var(--line));
      border-radius: 26px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -18px 42px rgba(0, 0, 0, 0.22),
        0 20px 54px color-mix(in srgb, var(--group) 22%, transparent);
      display: grid;
      align-self: center;
      min-height: 150px;
      overflow: hidden;
      padding: 18px;
      place-items: center;
      position: relative;
      isolation: isolate;
    }

    .type-object::before {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--group) 38%, transparent);
      filter: blur(34px);
      opacity: 0.75;
      z-index: -1;
    }

    .type-object::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      pointer-events: none;
    }

    .type-object-code {
      color: #fff;
      direction: ltr;
      font-family: var(--font-display);
      font-size: clamp(2.35rem, 4.6vw, 3.6rem);
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    }

    .type-object-name {
      color: rgba(255, 255, 255, 0.78);
      font-size: 1rem;
      margin-top: 10px;
      text-align: center;
    }

    .ghost-button {
      align-self: start;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid var(--mbti-reader-line);
      border-radius: 999px;
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      padding: 10px 17px;
      backdrop-filter: blur(14px) saturate(130%);
    }

    .detail-body {
      display: grid;
      grid-template-columns: minmax(220px, 264px) minmax(0, 840px);
      justify-content: center;
      min-height: 0;
      position: relative;
      z-index: 1;
    }

    .category-rail {
      border-left: 1px solid var(--line);
      border-bottom: 0;
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr;
      align-content: start;
      padding: clamp(12px, 2vw, 18px);
      max-height: min(620px, calc(100vh - 140px));
      overflow: auto;
      position: relative;
      z-index: 1;
      position: sticky;
      top: 16px;
      align-self: start;
    }

    .category-button {
      align-items: center;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--text);
      display: flex;
      justify-content: space-between;
      padding: 13px 14px;
      text-align: right;
      text-decoration: none;
    }

    .category-button.is-active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--group) 22%, rgba(255, 255, 255, 0.055)), rgba(255, 255, 255, 0.045));
      border-color: color-mix(in srgb, var(--group) 46%, var(--line));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 30px color-mix(in srgb, var(--group) 12%, transparent);
      color: #ffffff;
    }

    .detail-panel .category-button:hover,
    .detail-panel .category-button:focus-visible {
      border-color: color-mix(in srgb, var(--group) 42%, var(--line));
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), 0 0 22px color-mix(in srgb, var(--group) 13%, transparent);
    }

    .detail-panel .ghost-button:hover,
    .detail-panel .ghost-button:focus-visible {
      border-color: color-mix(in srgb, var(--group) 38%, var(--line));
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), 0 0 22px color-mix(in srgb, var(--group) 12%, transparent);
    }

    .category-button span:first-child {
      min-width: 0;
    }

    .category-button.is-active::before {
      background: var(--group);
      border-radius: 999px;
      box-shadow: 0 0 18px color-mix(in srgb, var(--group) 62%, transparent);
      content: "";
      flex: 0 0 8px;
      height: 8px;
      order: 2;
      width: 8px;
    }

    .category-button.is-active .lock {
      display: none;
    }

    .lock {
      color: var(--accent);
      font-size: 0.92rem;
    }

    .content-card {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: clamp(22px, 4vw, 44px) clamp(18px, 4vw, 44px) clamp(34px, 5vw, 56px);
      scroll-margin-top: 20px;
      transition: box-shadow 260ms ease, border-color 260ms ease;
      outline: none;
    }

    .content-card.is-reading-focus {
      box-shadow: inset 4px 0 0 var(--mbti-accent);
    }

    .content-card h3 {
      align-items: center;
      display: flex;
      gap: 10px;
      font-size: clamp(1.45rem, 3vw, 2.25rem);
      line-height: 1.25;
      margin: 0 0 clamp(16px, 2.8vw, 26px);
    }

    .content-card h3::before {
      background: var(--mbti-accent);
      border-radius: 999px;
      box-shadow: 0 0 18px var(--mbti-glow);
      content: "";
      flex: 0 0 9px;
      height: 9px;
      width: 9px;
    }

    .content-card p {
      color: var(--muted);
      font-size: clamp(1.02rem, 1.8vw, 1.13rem);
      line-height: 1.9;
      margin: 0 0 20px;
      max-width: 780px;
      white-space: pre-line;
    }

    .reader-article {
      display: grid;
      gap: 18px;
      max-width: 800px;
    }

    .reader-paragraph {
      color: var(--muted);
      font-size: clamp(1.02rem, 1.8vw, 1.13rem);
      line-height: 1.9;
      margin: 0;
    }

    .reader-heading {
        justify-content: center;
      align-items: center;
      color: var(--text);
      display: flex;
      font-size: clamp(1.18rem, 2.4vw, 1.55rem);
      font-weight: 850;
      gap: 10px;
      line-height: 1.45;
      margin: 18px 0 0;
    }

    .reader-heading::before {
      background: linear-gradient(180deg, var(--mbti-accent), color-mix(in srgb, var(--mbti-accent) 38%, transparent));
      border-radius: 999px;
      content: "";
      flex: 0 0 4px;
      height: 1.35em;
    }

    .reader-divider {
      border: 0;
      border-top: 1px solid var(--mbti-reader-line);
      margin: 8px 0;
      opacity: 0.75;
    }

    .reader-note {
        justify-content: center;
      background: color-mix(in srgb, var(--mbti-accent) 9%, rgba(255, 255, 255, 0.035));
      border: 1px solid var(--mbti-reader-line);
      border-radius: 18px;
      color: var(--muted);
      line-height: 1.8;
      padding: 16px 18px;
    }

    .content-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
      max-width: 860px;
    }

    .content-list div {
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid var(--line);
      border-radius: 16px;
      line-height: 1.55;
      padding: 16px 18px;
    }

    .modal-backdrop {
      align-items: center;
      background: rgba(3, 4, 13, 0.68);
      backdrop-filter: blur(8px);
      display: none;
      inset: 0;
      justify-content: center;
      padding: 20px;
      position: fixed;
      z-index: 20;
    }

    .modal-backdrop.is-open {
      display: flex;
      animation: fade 180ms ease both;
    }

    .premium-modal {
      background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        rgba(10, 15, 34, 0.94);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      max-height: min(720px, calc(100vh - 28px));
      max-width: 560px;
      overflow: auto;
      padding: clamp(20px, 4vw, 26px);
      width: 100%;
      animation: pop 260ms ease both;
    }

    .modal-top {
      align-items: start;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .premium-modal h2 {
      font-size: clamp(1.5rem, 4vw, 2.35rem);
      line-height: 1.22;
      margin: 0;
      color: var(--text);
    }

    .price-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 16px 0 12px;
    }

    .price-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px 14px;
      background: rgba(255, 255, 255, 0.035);
    }

    .price-card span {
      color: var(--muted);
      display: block;
      font-size: 0.86rem;
      margin-bottom: 6px;
    }

    .price-card strong {
      direction: ltr;
      display: inline-block;
      font-family: var(--font-display);
      font-size: 1.22rem;
    }

    .price-card.is-old strong {
      color: var(--soft);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(255, 255, 255, 0.42);
    }

    .latin-text {
      direction: ltr;
      display: inline-block;
      font-family: var(--font-display);
      unicode-bidi: isolate;
    }

    .member-offer {
      background: rgba(53, 216, 255, 0.075);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
      border-radius: 16px;
      color: var(--text);
      line-height: 1.55;
      padding: 12px 14px;
    }

    .premium-description {
      color: var(--muted);
      font-size: clamp(0.98rem, 2vw, 1.08rem);
      line-height: 1.75;
      margin: 12px 0 0;
    }

    .premium-list {
      display: grid;
      gap: 9px;
      margin: 16px 0;
      padding: 0;
      list-style: none;
    }

    .premium-list li {
      align-items: center;
      display: flex;
      gap: 10px;
      color: var(--muted);
    }

    .premium-list li::before {
      content: "";
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border-radius: 999px;
      flex: 0 0 7px;
      height: 7px;
      width: 7px;
    }

    .premium-button {
      background: linear-gradient(135deg, #6f8dff, var(--accent-2), var(--accent));
      border-radius: 18px;
      color: var(--accent-contrast);
      font-weight: 850;
      padding: 13px 18px;
      width: 100%;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes pop {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (max-width: 860px) {
      .library-shell {
        width: min(100% - 24px, 720px);
        padding-top: 28px;
      }

      .library-shell.is-detail-page {
        padding-top: 14px;
      }

      .library-hero,
      .main-knowledge,
      .groups-grid,
      .detail-header,
      .detail-body {
        grid-template-columns: 1fr;
      }

      .type-object {
        min-height: 132px;
      }

      .category-rail {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
          rgba(7, 11, 26, 0.76);
        backdrop-filter: blur(16px) saturate(128%);
        border-left: 0;
        border-bottom: 1px solid var(--mbti-reader-line);
        border-color: var(--mbti-reader-line);
        border-radius: 16px;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
        display: flex;
        gap: 8px;
        grid-template-columns: none;
        margin: 0 10px 8px;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        position: static;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        white-space: nowrap;
      }

      .category-rail::-webkit-scrollbar {
        display: none;
      }

      .category-button {
        flex: 0 0 auto;
        min-height: 42px;
        scroll-snap-align: start;
      }

      .detail-header {
        padding-bottom: 14px;
      }
    }

    @media (max-width: 560px) {
      .group-card,
      .main-knowledge,
      .content-card,
      .premium-modal,
      .detail-page-top {
        padding: 18px;
      }

      .library-shell.is-detail-page {
        width: min(100% - 18px, 720px);
        padding-top: 10px;
      }

      .mbti-personality-detail {
        border-radius: 22px;
      }

      .detail-header {
        gap: 8px;
        padding: 6px 18px 10px;
      }

      .detail-title-row {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
      }

      .type-identity {
        gap: 7px;
        margin-top: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
      }

      .type-identity::-webkit-scrollbar {
        display: none;
      }

      .identity-chip {
        flex: 0 0 auto;
        font-size: 0.86rem;
        padding: 7px 9px;
        white-space: nowrap;
      }

      .type-object {
        display: none;
      }

      .group-top,
      .detail-header,
      .price-row {
        grid-template-columns: 1fr;
      }

      .personality-list,
      .price-row {
        grid-template-columns: 1fr;
      }

      .group-top {
        display: grid;
      }

      .group-mark {
        order: -1;
      }

      .library-shell {
        width: min(100% - 20px, 720px);
        padding: 26px 0 48px;
      }

      .type-button,
      .category-button,
      .ghost-button,
      .premium-button {
        min-height: 48px;
      }

      .detail-header h2 {
        font-size: clamp(2.05rem, 12vw, 3.15rem);
        margin-bottom: 4px;
      }

      .detail-header p {
        display: none;
      }

      .category-rail {
        gap: 8px;
        margin: 0 10px 8px;
        padding: 8px;
      }

      .category-button {
        border-radius: 11px;
        font-size: 0.92rem;
        min-height: 40px;
        padding: 9px 12px;
      }

      .content-card {
        padding: 18px 18px 30px;
      }

      .content-card h3 {
        font-size: clamp(1.3rem, 6vw, 1.75rem);
        margin-bottom: 14px;
      }

      .reader-article {
        gap: 14px;
      }

      .reader-paragraph {
        font-size: clamp(1rem, 4.1vw, 1.08rem);
        line-height: 1.86;
      }

      .reader-heading {
        font-size: clamp(1.12rem, 4.8vw, 1.36rem);
        margin-top: 10px;
      }

      .reader-note {
        border-radius: 14px;
        padding: 13px 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }
  

/* Force one site-wide text font */
*, *::before, *::after, button, input, textarea, select, a, p, span, strong, small, label, li, h1, h2, h3, h4, h5, h6 {
  font-family: "Sarchia Qaisy", "Noto Sans Arabic", "Inter", sans-serif !important;
}