:root {
      --font-script-main: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
      --font-script-display: "Noto Sans Hebrew", "Noto Serif", "Noto Sans Phoenician", "Segoe UI Symbol", serif;
      --font-script-arabic: "Amiri", "Noto Naskh Arabic", "Scheherazade New", "Arabic Typesetting", "Arial Unicode MS", serif;
      --font-script-enochian: "Enochian", "Petrus Enochian", "Segoe UI Historic", "Segoe UI Symbol", serif;
      --detail-text-scale: 1;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, var(--font-script-main);
      background: #0f0f14;
      color: #f4f4f5;
      overflow-x: hidden;
    }
    .topbar {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      border-bottom: 1px solid #27272a;
      background: #18181b;
      min-width: 0;
      overflow: visible;
      position: relative;
      z-index: 40;
    }
    .topbar-home-button {
      padding: 0;
      border: 0;
      background: transparent;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.01em;
      flex: 0 0 auto;
    }
    .topbar-home-button:hover {
      color: #fbbf24;
    }
    .topbar-home-button[aria-pressed="true"] {
      color: #fbbf24;
    }
    .topbar-menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      flex: 0 0 auto;
    }
    .topbar-panel-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      flex: 0 0 auto;
      margin-left: auto;
    }
    .topbar-panel-toggle:hover {
      background: #3f3f46;
    }
    .topbar-panel-toggle[hidden] {
      display: none;
    }
    .topbar-panel-toggle[hidden] + .topbar-menu-toggle {
      margin-left: auto;
    }
    .topbar-panel-toggle:not([hidden]) + .topbar-menu-toggle {
      margin-left: 0;
    }
    .topbar-menu-toggle:hover {
      background: #3f3f46;
    }
    .topbar-settings-toggle {
      margin-left: 0;
    }
    .topbar-actions {
      display: none;
      flex: 1 0 100%;
      width: 100%;
      padding: 12px;
      margin: 4px 0 0;
      border: 1px solid #2f2f39;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(24, 24, 34, 0.98), rgba(12, 12, 18, 0.98));
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
      gap: 10px;
      max-height: calc(100svh - 88px);
      overflow-y: auto;
    }
    .topbar.is-menu-open .topbar-actions {
      display: grid;
      grid-template-columns: 1fr;
    }
    .topbar-actions > * {
      width: 100%;
    }
    .topbar-dropdown {
      display: grid;
      width: 100%;
    }
    .topbar-dropdown-menu {
      position: static;
      min-width: 0;
      width: 100%;
      display: none;
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 6px;
      margin-top: 6px;
      border-radius: 12px;
      border: 1px solid #31313d;
      background: rgba(10, 10, 16, 0.92);
      box-shadow: none;
      z-index: 40;
    }
    .topbar-dropdown.is-open .topbar-dropdown-menu {
      display: grid;
    }
    .topbar-sub-trigger {
      width: 100%;
      text-align: left;
      font-size: 13px;
      min-height: 40px;
      padding: 6px 10px;
    }
    .topbar-sub-trigger.is-active {
      background: #3f3f46;
      border-color: #52525b;
    }
    .settings-trigger {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 14px;
    }
    .settings-trigger:hover {
      background: #3f3f46;
    }
    .settings-trigger[aria-pressed="true"] {
      background: #3f3f46;
    }
    @media (max-width: 900px) {
      body.topbar-menu-open {
        overflow: hidden;
      }

      .topbar {
        position: sticky;
        top: 0;
        padding: 10px 12px;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        background: rgba(24, 24, 27, 0.96);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
      }
      .topbar-home-button {
        font-size: 17px;
        min-height: 38px;
      }
      .topbar-menu-toggle {
        min-height: 38px;
      }
      .topbar-settings-toggle {
        min-height: 38px;
      }
      .topbar-panel-toggle {
        min-height: 38px;
      }
      .topbar.is-menu-open {
        flex-wrap: nowrap;
        justify-content: flex-end;
        border-bottom-color: transparent;
      }
      .topbar.is-menu-open .topbar-home-button {
        display: none;
      }
      .topbar-actions {
        max-height: calc(100svh - 88px);
      }
      .topbar.is-menu-open .topbar-actions {
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        right: 0;
        width: auto;
        min-height: calc(100svh - 58px);
        max-height: calc(100svh - 58px);
        margin: 0;
        padding: 14px 12px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 0 0 18px 18px;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.44);
        overflow-y: auto;
      }
      .settings-trigger {
        padding: 10px 12px;
      }
    }
    @media (max-width: 640px) {
      .topbar {
        padding: 9px 10px;
      }
      .topbar-home-button {
        font-size: 16px;
      }
      .topbar-actions {
        padding: 10px;
        border-radius: 14px;
        max-height: calc(100svh - 78px);
      }
      .topbar.is-menu-open .topbar-actions {
        min-height: calc(100svh - 52px);
        max-height: calc(100svh - 52px);
        padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
      }
      .settings-trigger {
        font-size: 13px;
      }
    }
    body.connection-gated {
      overflow: hidden;
    }
    .connection-gate {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at top, rgba(245, 158, 11, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(9, 9, 11, 0.84), rgba(9, 9, 11, 0.96));
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    .connection-gate[hidden] {
      display: none;
    }
    .connection-gate-card {
      width: min(460px, calc(100vw - 32px));
      padding: 24px;
      border: 1px solid rgba(245, 158, 11, 0.28);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      box-sizing: border-box;
    }
    .connection-gate-eyebrow {
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fbbf24;
    }
    .connection-gate-title {
      margin: 0;
      font-size: 28px;
      line-height: 1.1;
      color: #fafaf9;
    }
    .connection-gate-copy {
      margin: 12px 0 18px;
      color: #d4d4d8;
      font-size: 14px;
      line-height: 1.6;
    }
    .connection-gate-fields {
      display: grid;
      gap: 12px;
    }
    .connection-gate-status {
      min-height: 20px;
      margin-top: 14px;
      font-size: 13px;
      color: #d4d4d8;
    }
    .connection-gate-status[data-tone="error"] {
      color: #fca5a5;
    }
    .connection-gate-status[data-tone="success"] {
      color: #86efac;
    }
    .connection-gate-status[data-tone="pending"] {
      color: #fde68a;
    }
    .connection-gate-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 16px;
    }
    .connection-gate-actions button {
      appearance: none;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      padding: 10px 14px;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
    }
    .connection-gate-actions button:hover {
      background: #3f3f46;
    }
    #connection-gate-connect {
      border-color: #f59e0b;
      color: #111827;
      background: linear-gradient(180deg, #fbbf24, #ea580c);
    }
    #connection-gate-connect:hover {
      background: linear-gradient(180deg, #f59e0b, #d97706);
    }
    #tarot-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }
    #planet-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #cycles-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #iching-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #iching-trigram-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #iching-bigram-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #iching-phase-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #calendar-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #timeline-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }
    #holiday-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #tarot-house-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #tarot-frame-section {
      height: calc(100vh - 61px);
      height: calc(100dvh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: auto;
    }
    #settings-section {
      height: calc(100vh - 61px);
      height: calc(100dvh - 61px);
      background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 32%),
        linear-gradient(180deg, #111318, #18181b 40%, #111318);
      box-sizing: border-box;
      overflow: auto;
    }
    #tarot-section[hidden] {
      display: none;
    }
    #tarot-house-section[hidden] {
      display: none;
    }
    #tarot-frame-section[hidden] {
      display: none;
    }
    #planet-section[hidden] {
      display: none;
    }
    #cycles-section[hidden] {
      display: none;
    }
    #iching-section[hidden] {
      display: none;
    }
    #iching-trigram-section[hidden] {
      display: none;
    }
    #iching-bigram-section[hidden] {
      display: none;
    }
    #iching-phase-section[hidden] {
      display: none;
    }
    #calendar-section[hidden] {
      display: none;
    }
    #timeline-section[hidden] {
      display: none;
    }
    #holiday-section[hidden] {
      display: none;
    }
    #settings-section[hidden] {
      display: none;
    }
    .settings-page-shell {
      width: min(1120px, calc(100% - 24px));
      margin: 0 auto;
      padding: clamp(18px, 2.8vw, 32px);
      box-sizing: border-box;
    }
    .settings-page-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .settings-page-eyebrow {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #f59e0b;
      margin-bottom: 8px;
    }
    .settings-page-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.05;
      color: #fafafa;
    }
    .settings-page-copy {
      margin: 10px 0 0;
      max-width: 720px;
      color: #cbd5e1;
      line-height: 1.6;
    }
    .settings-page-back {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(245, 158, 11, 0.35);
      background: rgba(17, 24, 39, 0.78);
      color: #f8fafc;
      cursor: pointer;
      white-space: nowrap;
    }
    .settings-page-back:hover {
      background: rgba(31, 41, 55, 0.96);
    }
    .settings-page-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .settings-panel {
      padding: 18px;
      border-radius: 20px;
      border: 1px solid rgba(63, 63, 70, 0.92);
      background: linear-gradient(180deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.96));
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
    }
    .settings-panel-wide {
      grid-column: 1 / -1;
    }
    .settings-panel-head {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }
    .settings-panel-head strong {
      color: #fafafa;
      font-size: 15px;
    }
    .settings-panel-head span {
      color: #94a3b8;
      font-size: 13px;
      line-height: 1.5;
    }
    .settings-panel-actions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-start;
    }
    .settings-page-actions {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(63, 63, 70, 0.7);
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .settings-page-status {
      min-width: min(100%, 360px);
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(63, 63, 70, 0.92);
      background: rgba(9, 9, 11, 0.78);
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-sizing: border-box;
    }
    .settings-page-status[data-tone="info"] {
      border-color: rgba(59, 130, 246, 0.55);
      background: rgba(30, 64, 175, 0.14);
    }
    .settings-page-status[data-tone="success"] {
      border-color: rgba(34, 197, 94, 0.5);
      background: rgba(20, 83, 45, 0.18);
    }
    .settings-page-status[data-tone="warning"] {
      border-color: rgba(245, 158, 11, 0.55);
      background: rgba(120, 53, 15, 0.18);
    }
    .settings-page-status[data-tone="error"] {
      border-color: rgba(239, 68, 68, 0.55);
      background: rgba(127, 29, 29, 0.2);
    }
    .settings-page-status-text {
      color: #f8fafc;
      font-size: 13px;
      line-height: 1.45;
    }
    .settings-page-status-time {
      color: #94a3b8;
      font-size: 12px;
      line-height: 1.4;
    }
    .settings-connection-summary {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(63, 63, 70, 0.9);
      background: rgba(9, 9, 11, 0.68);
      display: grid;
      gap: 10px;
    }
    .settings-connection-summary[data-tone="success"] {
      border-color: rgba(34, 197, 94, 0.45);
      background: rgba(20, 83, 45, 0.16);
    }
    .settings-connection-summary[data-tone="warning"] {
      border-color: rgba(245, 158, 11, 0.45);
      background: rgba(120, 53, 15, 0.16);
    }
    .settings-connection-summary[data-tone="error"] {
      border-color: rgba(239, 68, 68, 0.45);
      background: rgba(127, 29, 29, 0.18);
    }
    .settings-connection-summary-row {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }
    .settings-connection-summary-label {
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .settings-connection-summary-value {
      color: #f8fafc;
      font-size: 13px;
      line-height: 1.5;
      word-break: break-word;
    }
    .settings-cache-progress-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin-top: 2px;
    }
    .settings-cache-progress {
      width: 100%;
      height: 10px;
      appearance: none;
      border: none;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(39, 39, 42, 0.92);
    }
    .settings-cache-progress::-webkit-progress-bar {
      background: rgba(39, 39, 42, 0.92);
      border-radius: 999px;
    }
    .settings-cache-progress::-webkit-progress-value {
      background: linear-gradient(90deg, #f59e0b, #facc15);
      border-radius: 999px;
    }
    .settings-cache-progress::-moz-progress-bar {
      background: linear-gradient(90deg, #f59e0b, #facc15);
      border-radius: 999px;
    }
    .settings-cache-progress-label {
      min-width: 3ch;
      text-align: right;
      color: #e2e8f0;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }
    .calendar-year-control {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .calendar-holiday-filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .calendar-year-control label {
      font-size: 12px;
      color: #a1a1aa;
    }
    .calendar-holiday-filter label {
      font-size: 12px;
      color: #a1a1aa;
    }
    .calendar-year-control input {
      width: 110px;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
      text-align: right;
    }
    .calendar-holiday-filter select {
      min-width: 150px;
      max-width: 210px;
      width: 100%;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }
    .cal-item-stack {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }
    .cal-item-row {
      border: 1px solid #3f3f46;
      border-radius: 8px;
      padding: 8px;
      background: #111118;
      display: grid;
      gap: 6px;
    }
    .cal-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .cal-item-name {
      font-weight: 600;
      color: #f4f4f5;
    }
    .tarot-layout {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      position: relative;
      z-index: 1;
    }

    .tarot-section-house-top {
      padding: 10px 12px 8px;
      border-bottom: 1px solid #27272a;
      max-height: min(44vh, 420px);
      overflow: auto;
      background: #151520;
      position: relative;
      z-index: 2;
    }
    .tarot-list-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      border-right: 1px solid #27272a;
      background: #111118;
    }
    .tarot-list-header {
      padding: 14px 14px 10px;
      border-bottom: 1px solid #27272a;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .tarot-list-count {
      color: #a1a1aa;
      font-size: 12px;
    }
    .dataset-search-wrap {
      padding: 8px 12px;
      border-bottom: 1px solid #27272a;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
    }
    .dataset-search-input {
      width: 100%;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }
    .dataset-search-input::placeholder {
      color: #71717a;
    }
    .dataset-search-clear {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
      line-height: 1;
      font-size: 14px;
      padding: 0;
    }
    .dataset-search-clear:hover {
      background: #3f3f46;
    }
    .dataset-search-clear:disabled {
      opacity: 0.45;
      cursor: default;
    }
    .tarot-card-list {
      overflow: auto;
      flex: 1;
      min-height: 0;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .tarot-list-item {
      width: 100%;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
    }
    .tarot-list-item:hover,
    .tarot-list-item.is-selected {
      background: #27272a;
      border-color: #52525b;
    }
    .tarot-list-name {
      font-size: 14px;
      font-weight: 600;
    }
    .tarot-list-meta {
      font-size: 12px;
      color: #a1a1aa;
    }
    .tarot-detail-panel {
      min-width: 0;
      overflow: auto;
      padding: 18px;
      display: grid;
      grid-template-rows: auto auto auto;
      gap: 16px;
      background: #18181b;
      font-size: calc(13px * var(--detail-text-scale));
    }
    .tarot-detail-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .tarot-detail-image {
      width: 150px;
      height: 225px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
    }
    .tarot-detail-heading {
      position: relative;
    }
    .tarot-detail-heading h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
    }
    .tarot-detail-type {
      margin-top: 4px;
      color: #a1a1aa;
      font-size: calc(13px * var(--detail-text-scale));
    }
    .tarot-detail-summary {
      margin-top: 10px;
      font-size: calc(14px * var(--detail-text-scale));
      line-height: 1.45;
      color: #e4e4e7;
    }
    .tarot-meanings {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .tarot-meaning-card {
      border: 1px solid #3f3f46;
      border-radius: 10px;
      padding: 10px;
      background: #111118;
    }
    .tarot-meaning-card strong {
      display: block;
      font-size: calc(12px * var(--detail-text-scale));
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #a1a1aa;
      margin-bottom: 6px;
    }
    .tarot-meaning-card div {
      font-size: calc(14px * var(--detail-text-scale));
      line-height: 1.45;
      color: #e4e4e7;
    }
    .tarot-meta-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }
    .tarot-meta-card {
      border: 1px solid #3f3f46;
      border-radius: 10px;
      padding: 10px;
      background: #111118;
    }
    .tarot-meta-card strong {
      display: block;
      margin-bottom: 8px;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .tarot-deck-gallery-card {
      grid-column: 1 / -1;
    }
    .tarot-deck-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
    }
    .tarot-deck-variant {
      display: grid;
      gap: 8px;
      align-content: start;
      width: 100%;
      padding: 8px;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      background: #18181b;
      color: #e4e4e7;
      cursor: pointer;
      text-align: left;
      transition: background 120ms, border-color 120ms, transform 120ms;
    }
    .tarot-deck-variant:hover {
      background: #27272a;
      border-color: #52525b;
      transform: translateY(-1px);
    }
    .tarot-deck-variant.is-active {
      border-color: #a5b4fc;
      box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.28);
    }
    .tarot-deck-variant-image {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: contain;
      object-position: center;
      display: block;
      padding: 4px;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #09090b;
    }
    .tarot-deck-variant-label {
      display: grid;
      gap: 2px;
      font-size: 12px;
      line-height: 1.3;
    }
    .tarot-deck-variant-deck {
      font-weight: 600;
      color: #f4f4f5;
    }
    .tarot-deck-variant-name {
      color: #a1a1aa;
    }
    .tarot-deck-variant-active {
      color: #a5b4fc;
      font-size: 11px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    @media (max-width: 720px) {
      .tarot-deck-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .tarot-deck-variant {
        padding: 6px;
        gap: 6px;
      }

      .tarot-deck-variant-label {
        font-size: 11px;
      }

      .tarot-deck-variant-active {
        font-size: 10px;
      }
    }

    @media (max-width: 420px) {
      .tarot-deck-gallery {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .tarot-keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tarot-keyword-chip {
      border: 1px solid #52525b;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      color: #e4e4e7;
      background: #27272a;
    }
    .tarot-relations {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      font-size: 13px;
      line-height: 1.35;
    }
    .tarot-relation-btn {
      width: 100%;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      color: #e4e4e7;
      cursor: pointer;
      text-align: left;
      padding: 7px 8px;
      font-size: 13px;
      line-height: 1.35;
    }
    .tarot-relation-btn:hover,
    .tarot-relation-btn.is-selected {
      background: #27272a;
      border-color: #52525b;
    }
    .tarot-relation-btn-static {
      cursor: default;
    }
    .tarot-relation-btn-static:hover {
      background: #18181b;
      border-color: #3f3f46;
    }
    /* Navigatable relation list items */
    .tarot-rel-item {
      display: flex;
      gap: 4px;
      align-items: stretch;
    }
    .tarot-rel-item .tarot-relation-btn {
      flex: 1;
      width: auto;
    }
    .tarot-rel-nav-btn {
      flex-shrink: 0;
      width: 32px;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      color: #7070a0;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.1s, color 0.1s, border-color 0.1s;
    }
    .tarot-rel-nav-btn:hover {
      background: #27272a;
      color: #c8b8f8;
      border-color: #7060b0;
    }
    .tarot-relation-detail {
      margin-top: 10px;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      padding: 8px;
      display: grid;
      gap: 6px;
    }
    .tarot-relation-detail-title {
      font-size: 13px;
      font-weight: 600;
      color: #f4f4f5;
    }
    .tarot-relation-detail-meta {
      font-size: 12px;
      color: #a1a1aa;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .tarot-relation-detail-data {
      font-size: 12px;
      line-height: 1.45;
      color: #d4d4d8;
      white-space: pre-wrap;
      margin: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    /* Kabbalah path cross-reference panel in tarot detail */
    .tarot-kab-path-card {
      border: 1px solid #4a4a6a;
      border-radius: 10px;
      padding: 12px 14px;
      background: #0e0e1e;
      margin-top: 4px;
    }
    .tarot-kab-path-card[hidden] { display: none; }
    .tarot-kab-path-card > strong {
      display: block;
      margin-bottom: 8px;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .tarot-kab-path-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }
    .tarot-kab-letter {
      font-size: 36px;
      line-height: 1;
      color: #a8a8e0;
      flex-shrink: 0;
      font-family: var(--font-script-display);
    }
    .tarot-kab-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .tarot-kab-name {
      font-size: 14px;
      color: #e4e4e7;
    }
    .tarot-kab-connects {
      font-size: 12px;
      color: #a1a1aa;
    }

    .tarot-misc-section {
      display: grid;
      gap: 12px;
    }

    .tarot-misc-title {
      display: block;
      margin: 0;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .tarot-house-card {
      display: grid;
      gap: 10px;
    }

    .tarot-frame-view {
      min-height: 100%;
      padding: 18px;
      box-sizing: border-box;
      overflow-x: clip;
    }

    .tarot-frame-shell {
      width: min(1480px, 100%);
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      gap: 16px;
      min-width: 0;
    }

    .tarot-frame-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .tarot-frame-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 38px);
      line-height: 1.05;
      letter-spacing: 0.01em;
    }

    .tarot-frame-copy {
      margin: 8px 0 0;
      max-width: 820px;
      color: #cbd5e1;
      font-size: 14px;
      line-height: 1.55;
    }

    .tarot-frame-actions {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tarot-frame-selection-chip {
      padding: 10px 14px;
      border: 1px solid rgba(56, 189, 248, 0.55);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(8, 47, 73, 0.96), rgba(12, 74, 110, 0.98));
      color: #e0f2fe;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.02em;
      box-shadow: 0 10px 24px rgba(2, 132, 199, 0.18);
    }

    .tarot-frame-selection-chip:hover,
    .tarot-frame-selection-chip:focus-visible {
      border-color: rgba(125, 211, 252, 0.92);
      background: linear-gradient(180deg, rgba(12, 74, 110, 0.98), rgba(14, 116, 144, 1));
      color: #f0f9ff;
    }

    .tarot-frame-selection-chip[hidden] {
      display: none !important;
    }

    .tarot-frame-layout-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 26;
      min-width: 270px;
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid #312e81;
      border-radius: 16px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(10, 10, 18, 0.98));
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
    }

    .tarot-frame-layout-panel[hidden] {
      display: none !important;
    }

    .tarot-frame-layout-option {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(99, 102, 241, 0.28);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.5);
      color: #cbd5e1;
      text-align: left;
      cursor: pointer;
    }

    .tarot-frame-layout-option:hover,
    .tarot-frame-layout-option.is-active {
      border-color: rgba(129, 140, 248, 0.85);
      background: rgba(49, 46, 129, 0.44);
      color: #f8fafc;
    }

    .tarot-frame-layout-option strong {
      font-size: 13px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .tarot-frame-layout-option span {
      font-size: 12px;
      line-height: 1.35;
    }

    .tarot-frame-layout-section-title {
      padding: 2px 2px 0;
      color: #a5b4fc;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tarot-frame-layout-save-btn {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid rgba(129, 140, 248, 0.5);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(67, 56, 202, 0.92), rgba(49, 46, 129, 0.96));
      color: #eef2ff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .tarot-frame-layout-save-btn:hover {
      border-color: rgba(165, 180, 252, 0.9);
      background: linear-gradient(180deg, rgba(79, 70, 229, 0.96), rgba(67, 56, 202, 0.98));
    }

    .tarot-frame-layout-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

    .tarot-frame-layout-delete-btn {
      align-self: stretch;
      padding: 10px 12px;
      border: 1px solid rgba(248, 113, 113, 0.28);
      border-radius: 12px;
      background: rgba(69, 10, 10, 0.36);
      color: #fecaca;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
    }

    .tarot-frame-layout-delete-btn:hover {
      border-color: rgba(252, 165, 165, 0.58);
      background: rgba(127, 29, 29, 0.5);
      color: #fee2e2;
    }

    .tarot-frame-layout-empty-note {
      padding: 10px 12px;
      border: 1px dashed rgba(99, 102, 241, 0.28);
      border-radius: 12px;
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.4;
      background: rgba(15, 23, 42, 0.28);
    }

    .tarot-frame-action-btn {
      padding: 10px 14px;
      border: 1px solid #4c1d95;
      border-radius: 999px;
      background: linear-gradient(180deg, #312e81, #1d1b4b);
      color: #eef2ff;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .tarot-frame-action-btn:hover {
      border-color: #6d28d9;
      background: linear-gradient(180deg, #4338ca, #312e81);
    }

    .tarot-frame-action-btn.is-active {
      border-color: #a5b4fc;
      background: linear-gradient(180deg, #4f46e5, #3730a3);
      color: #f8fafc;
      box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.16);
    }

    .tarot-frame-settings-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 25;
      min-width: 220px;
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid #312e81;
      border-radius: 16px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.14), transparent 40%),
        linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(10, 10, 18, 0.98));
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
    }

    .tarot-frame-field {
      display: grid;
      gap: 6px;
      color: #e2e8f0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .tarot-frame-field select {
      width: 100%;
      padding: 9px 10px;
      border: 1px solid rgba(99, 102, 241, 0.34);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.7);
      color: #f8fafc;
      font-size: 13px;
      font-weight: 600;
    }

    .tarot-frame-settings-group {
      display: grid;
      gap: 10px;
      padding-top: 2px;
      border-top: 1px solid rgba(99, 102, 241, 0.18);
    }

    .tarot-frame-settings-group[hidden] {
      display: none !important;
    }

    .tarot-frame-settings-heading {
      color: #f8fafc;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tarot-frame-settings-subheading {
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-frame-settings-note {
      color: #94a3b8;
      font-size: 11px;
      line-height: 1.45;
    }

    .tarot-frame-settings-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .tarot-frame-clear-btn {
      border-color: rgba(248, 113, 113, 0.4);
      background: linear-gradient(180deg, rgba(127, 29, 29, 0.92), rgba(69, 10, 10, 0.96));
    }

    .tarot-frame-clear-btn:hover {
      border-color: rgba(252, 165, 165, 0.72);
      background: linear-gradient(180deg, rgba(153, 27, 27, 0.96), rgba(127, 29, 29, 0.98));
    }

    .tarot-frame-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .tarot-frame-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid rgba(99, 102, 241, 0.24);
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.4);
      color: #dbe4f0;
      font-size: 12px;
      line-height: 1.2;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-frame-check input {
      margin: 0;
      accent-color: #818cf8;
    }

    .tarot-frame-settings-panel[hidden] {
      display: none !important;
    }

    .tarot-frame-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid rgba(99, 102, 241, 0.34);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.5);
      color: #e2e8f0;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-frame-toggle input {
      margin: 0;
      accent-color: #818cf8;
    }

    .tarot-frame-toggle input:disabled,
    .tarot-frame-check input:disabled,
    .tarot-frame-layout-option:disabled,
    .tarot-frame-export-btn:disabled,
    .tarot-frame-settings-toggle:disabled {
      cursor: wait;
    }

    .tarot-frame-export-btn {
      width: 100%;
      justify-content: center;
    }

    .tarot-frame-status {
      padding: 10px 14px;
      border: 1px solid #27272a;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(20, 20, 32, 0.95), rgba(10, 10, 18, 0.95));
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.4;
    }

    .tarot-frame-board-grid {
      display: block;
      width: 100%;
      min-width: 0;
    }

    .tarot-frame-overview {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
      gap: 14px;
      align-items: stretch;
    }

    .tarot-frame-overview-summary,
    .tarot-frame-notes-card {
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid #27272a;
      border-radius: 22px;
      background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 34%),
        linear-gradient(180deg, #161622 0%, #0f0f17 100%);
      box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
      min-width: 0;
    }

    .tarot-frame-overview-head,
    .tarot-frame-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .tarot-frame-overview-eyebrow {
      color: #93c5fd;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .tarot-frame-panel {
      --frame-grid-zoom-scale: 1;
      --frame-card-overlay-scale: clamp(1, calc(0.92 + ((var(--frame-grid-zoom-scale) - 1) * 0.14)), 2.3);
      --frame-base-cell-width: clamp(32px, 2.6vw, 46px);
      --frame-cell-width: calc(var(--frame-base-cell-width) * var(--frame-grid-zoom-scale));
      --frame-cell-height: calc(var(--frame-cell-width) * 1.5);
      --frame-base-gap: clamp(2px, 0.3vw, 6px);
      --frame-gap: calc(var(--frame-base-gap) * var(--frame-grid-zoom-scale));
      --frame-pan-cushion-inline: calc(clamp(14px, 1.8vw, 26px) * var(--frame-grid-zoom-scale));
      --frame-pan-cushion-block: calc(clamp(18px, 2.4vw, 34px) * var(--frame-grid-zoom-scale));
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
      border: 1px solid #27272a;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(22, 22, 34, 0.92), rgba(10, 10, 18, 0.98));
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
      overflow: hidden;
      min-width: 0;
    }

    .tarot-frame-panel-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.2;
      color: #f8fafc;
    }

    .tarot-frame-panel-subtitle {
      margin: 5px 0 0;
      color: #94a3b8;
      font-size: 13px;
      line-height: 1.45;
    }

    .tarot-frame-panel-count {
      align-self: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.78);
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .tarot-frame-grid-viewport {
      width: min(100%, calc(100vw - 52px));
      max-width: calc(100vw - 52px);
      min-height: clamp(520px, 68dvh, 900px);
      max-height: min(84dvh, 1080px);
      margin-left: auto;
      margin-right: auto;
      overflow: auto;
      overscroll-behavior: contain;
      min-width: 0;
      touch-action: pan-x pan-y;
    }

    .tarot-frame-focus-exit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: end;
      padding: 10px 14px;
      border: 1px solid rgba(191, 219, 254, 0.34);
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.86);
      color: #eff6ff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
    }

    .tarot-frame-focus-exit:hover {
      border-color: rgba(147, 197, 253, 0.7);
      background: rgba(30, 41, 59, 0.94);
    }

    .tarot-frame-focus-exit[hidden] {
      display: none !important;
    }

    body.is-tarot-frame-focus-lock {
      overflow: hidden;
    }

    #tarot-frame-section.is-grid-focus {
      position: fixed;
      inset: 61px 0 0 0;
      z-index: 88;
      overflow: hidden;
      background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.14), transparent 30%),
        rgba(2, 6, 23, 0.92);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-view {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px;
      overflow: hidden;
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-shell {
      min-height: 100%;
      grid-template-rows: auto minmax(0, 1fr);
      align-content: stretch;
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-header,
    #tarot-frame-section.is-grid-focus .tarot-frame-overview-host,
    #tarot-frame-section.is-grid-focus .tarot-frame-status {
      display: none !important;
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-focus-exit {
      display: inline-flex !important;
      margin: 0 0 8px auto;
      position: relative;
      z-index: 90;
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-board-grid {
      height: 100%;
      min-height: 0;
      position: relative;
      z-index: 89;
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-panel {
      height: 100%;
      padding: 10px;
      border-color: rgba(96, 165, 250, 0.3);
      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
    }

    #tarot-frame-section.is-grid-focus .tarot-frame-grid-viewport {
      width: 100%;
      max-width: none;
      min-height: 0;
      max-height: none;
      height: 100%;
    }

    .tarot-frame-grid-viewport.is-pan-enabled {
      cursor: grab;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .tarot-frame-grid-viewport.is-pan-enabled .tarot-frame-card {
      cursor: inherit;
    }

    .tarot-frame-grid-viewport.is-pan-enabled.is-panning {
      cursor: grabbing;
    }

    .tarot-frame-grid-viewport.is-panning {
      cursor: grabbing;
    }

    .tarot-frame-grid-viewport.is-touch-gesture-active {
      touch-action: none;
    }

    .tarot-frame-grid-track {
      width: max-content;
      min-width: max-content;
      padding:
        var(--frame-pan-cushion-block)
        var(--frame-pan-cushion-inline)
        calc(var(--frame-pan-cushion-block) * 1.45)
        var(--frame-pan-cushion-inline);
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    .tarot-frame-legend {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .tarot-frame-legend-item {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(71, 85, 105, 0.56);
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.46);
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.4;
    }

    .tarot-frame-notes-card {
      align-content: start;
    }

    .tarot-frame-notes-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .tarot-frame-notes-title {
      margin: 0;
      color: #f8fafc;
      font-size: 15px;
      line-height: 1.2;
    }

    .tarot-frame-notes-copy {
      margin: 6px 0 0;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1.45;
    }

    .tarot-frame-notes-badge {
      align-self: flex-start;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(96, 165, 250, 0.28);
      background: rgba(15, 23, 42, 0.72);
      color: #bfdbfe;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .tarot-frame-notes-field {
      display: grid;
      gap: 8px;
      color: #e2e8f0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-frame-notes-field textarea {
      width: 100%;
      min-height: 176px;
      resize: vertical;
      padding: 12px 14px;
      border: 1px solid rgba(96, 165, 250, 0.22);
      border-radius: 16px;
      background: rgba(8, 15, 28, 0.82);
      color: #e2e8f0;
      font: inherit;
      font-size: 13px;
      line-height: 1.55;
      letter-spacing: 0;
      text-transform: none;
      box-sizing: border-box;
    }

    .tarot-frame-notes-field textarea::placeholder {
      color: #64748b;
    }

    .tarot-frame-notes-field textarea:focus {
      outline: none;
      border-color: rgba(125, 211, 252, 0.66);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
    }

    .tarot-frame-notes-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1.4;
    }

    .tarot-frame-notes-clear {
      padding: 9px 12px;
      border: 1px solid rgba(96, 165, 250, 0.22);
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.56);
      color: #dbeafe;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .tarot-frame-notes-clear:hover {
      border-color: rgba(125, 211, 252, 0.5);
      background: rgba(30, 41, 59, 0.82);
    }

    .tarot-frame-notes-clear:disabled {
      cursor: default;
      opacity: 0.45;
    }

    .tarot-frame-legend-item strong {
      color: #f8fafc;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-frame-grid {
      display: grid;
      grid-template-columns: repeat(var(--frame-grid-size), var(--frame-cell-width));
      grid-template-rows: repeat(var(--frame-grid-size), var(--frame-cell-height));
      gap: var(--frame-gap);
      justify-content: center;
      align-content: center;
      width: max-content;
      min-width: max-content;
    }

    @media (max-width: 980px) {
      .tarot-frame-overview {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 760px) {
      #tarot-frame-section {
        height: calc(100svh - 61px);
        height: calc(100dvh - 61px);
      }

      .tarot-frame-view {
        padding: 10px;
      }

      .tarot-frame-shell {
        gap: 10px;
      }

      .tarot-frame-grid-viewport {
        min-height: clamp(680px, 84dvh, 1240px);
        max-height: min(92dvh, 1320px);
      }

      .tarot-frame-legend {
        grid-template-columns: minmax(0, 1fr);
      }

      .tarot-frame-notes-field textarea {
        min-height: 112px;
      }

      .tarot-frame-focus-exit {
        padding: 9px 12px;
      }

      #tarot-frame-section.is-grid-focus .tarot-frame-view {
        padding: 8px;
      }

      #tarot-frame-section.is-grid-focus .tarot-frame-focus-exit {
        margin-bottom: 6px;
      }
    }

    .tarot-frame-slot {
      position: relative;
      width: var(--frame-cell-width);
      height: var(--frame-cell-height);
      border-radius: 8px;
      transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    }

    .tarot-frame-slot.is-empty-slot {
      border: 1px dashed rgba(148, 163, 184, 0.4);
    }

    .tarot-frame-card-picker {
      position: fixed;
      z-index: 40;
      width: min(420px, calc(100vw - 24px));
      max-height: min(78vh, 720px);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(129, 140, 248, 0.3);
      border-radius: 20px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
      overflow: hidden;
    }

    .tarot-frame-card-picker.is-browse-mode {
      grid-template-rows: auto auto minmax(0, 1fr);
    }

    .tarot-frame-card-picker[hidden] {
      display: none !important;
    }

    .tarot-frame-card-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .tarot-frame-card-insert-menu,
    .tarot-frame-card-action-menu {
      position: fixed;
      z-index: 41;
      width: min(240px, calc(100vw - 24px));
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid rgba(129, 140, 248, 0.3);
      border-radius: 16px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    }

    .tarot-frame-card-insert-menu[hidden],
    .tarot-frame-card-action-menu[hidden] {
      display: none !important;
    }

    .tarot-frame-card-insert-menu-item,
    .tarot-frame-card-action-menu-item {
      padding: 11px 12px;
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 12px;
      background: rgba(30, 41, 59, 0.58);
      color: #e2e8f0;
      text-align: left;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .tarot-frame-card-insert-menu-item:hover,
    .tarot-frame-card-insert-menu-item:focus-visible,
    .tarot-frame-card-action-menu-item:hover,
    .tarot-frame-card-action-menu-item:focus-visible {
      border-color: rgba(165, 180, 252, 0.9);
      background: rgba(49, 46, 129, 0.34);
      color: #f8fafc;
    }

    .tarot-frame-card-action-deck {
      display: grid;
      gap: 6px;
      padding: 8px 2px 2px;
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .tarot-frame-card-action-deck-select {
      width: 100%;
      padding: 9px 10px;
      border: 1px solid rgba(99, 102, 241, 0.34);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.7);
      color: #f8fafc;
      font-size: 13px;
      font-weight: 600;
    }

    .tarot-frame-card-action-deck-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .tarot-frame-card-custom-editor {
      position: fixed;
      z-index: 42;
      width: min(420px, calc(100vw - 24px));
      max-height: min(78vh, 720px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(129, 140, 248, 0.3);
      border-radius: 20px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
      overflow: hidden;
    }

    .tarot-frame-card-custom-editor[hidden] {
      display: none !important;
    }

    .tarot-frame-card-picker-title {
      color: #f8fafc;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
    }

    .tarot-frame-card-picker-close {
      padding: 8px 12px;
      border: 1px solid rgba(148, 163, 184, 0.28);
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.78);
      color: #e2e8f0;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
    }

    .tarot-frame-card-picker-search {
      display: grid;
      gap: 6px;
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tarot-frame-card-picker-search input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid rgba(129, 140, 248, 0.24);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.84);
      color: #f8fafc;
      font-size: 13px;
    }

    .tarot-frame-card-picker-sections {
      display: grid;
      align-content: start;
      gap: 14px;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      padding-right: 2px;
      touch-action: pan-y;
    }

    .tarot-frame-card-picker-section {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(71, 85, 105, 0.48);
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.42);
    }

    .tarot-frame-card-picker-section-title {
      margin: 0;
      color: #eef2ff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-frame-card-picker-subtitle {
      color: #a5b4fc;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tarot-frame-card-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }

    .tarot-frame-card-picker-option {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(99, 102, 241, 0.24);
      border-radius: 12px;
      background: rgba(30, 41, 59, 0.58);
      color: #e2e8f0;
      text-align: left;
      cursor: pointer;
    }

    .tarot-frame-card-picker-option:hover {
      border-color: rgba(165, 180, 252, 0.9);
      background: rgba(67, 56, 202, 0.28);
      color: #f8fafc;
    }

    .tarot-frame-card-picker-option.is-custom-action {
      border-style: dashed;
      border-color: rgba(125, 211, 252, 0.38);
      background:
        linear-gradient(180deg, rgba(14, 116, 144, 0.18), rgba(15, 23, 42, 0.78));
    }

    .tarot-frame-card-picker-option.is-custom-action:hover {
      border-color: rgba(103, 232, 249, 0.82);
      background:
        linear-gradient(180deg, rgba(8, 145, 178, 0.28), rgba(15, 23, 42, 0.9));
    }

    .tarot-frame-card-picker-option strong {
      font-size: 12px;
      line-height: 1.35;
    }

    .tarot-frame-card-picker-option span {
      color: #94a3b8;
      font-size: 11px;
      line-height: 1.3;
    }

    .tarot-frame-card-picker-empty {
      padding: 12px;
      border: 1px dashed rgba(99, 102, 241, 0.28);
      border-radius: 12px;
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.4;
      background: rgba(15, 23, 42, 0.24);
    }

    .tarot-frame-card-picker-editor {
      display: grid;
      align-content: start;
      gap: 12px;
      min-height: 0;
      overflow: auto;
      padding-right: 2px;
    }

    .tarot-frame-card-picker-editor-heading {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid rgba(125, 211, 252, 0.22);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(8, 145, 178, 0.16), rgba(15, 23, 42, 0.64));
      color: #dbeafe;
    }

    .tarot-frame-card-picker-editor-heading strong {
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-frame-card-picker-editor-heading span {
      color: #bae6fd;
      font-size: 12px;
      line-height: 1.35;
    }

    .tarot-frame-card-picker-editor-field {
      display: grid;
      gap: 6px;
    }

    .tarot-frame-card-picker-editor-field span,
    .tarot-frame-card-picker-editor-preview-label {
      color: #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tarot-frame-card-picker-editor-field input[type="text"],
    .tarot-frame-card-picker-editor-field textarea,
    .tarot-frame-card-picker-editor-field input[type="file"] {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid rgba(129, 140, 248, 0.24);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.84);
      color: #f8fafc;
      font-size: 13px;
      box-sizing: border-box;
    }

    .tarot-frame-card-picker-editor-field textarea {
      min-height: 84px;
      resize: vertical;
    }

    .tarot-frame-card-picker-editor-field input[type="color"] {
      width: 100%;
      min-height: 46px;
      padding: 6px;
      border: 1px solid rgba(129, 140, 248, 0.24);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.84);
      box-sizing: border-box;
      cursor: pointer;
    }

    .tarot-frame-card-picker-editor-image-meta {
      color: #94a3b8;
      font-size: 11px;
      line-height: 1.35;
    }

    .tarot-frame-card-picker-editor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }

    .tarot-frame-card-picker-editor-inline-actions,
    .tarot-frame-card-picker-editor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tarot-frame-card-picker-editor-clear,
    .tarot-frame-card-picker-editor-cancel,
    .tarot-frame-card-picker-editor-save,
    .tarot-frame-card-picker-editor-remove {
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .tarot-frame-card-picker-editor-clear,
    .tarot-frame-card-picker-editor-cancel {
      border: 1px solid rgba(148, 163, 184, 0.28);
      background: rgba(15, 23, 42, 0.78);
      color: #e2e8f0;
    }

    .tarot-frame-card-picker-editor-save {
      border: 1px solid rgba(34, 197, 94, 0.28);
      background: linear-gradient(180deg, rgba(21, 128, 61, 0.92), rgba(20, 83, 45, 0.96));
      color: #f0fdf4;
    }

    .tarot-frame-card-picker-editor-save:disabled,
    .tarot-frame-card-picker-editor-clear:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .tarot-frame-card-picker-editor-remove {
      margin-left: auto;
      border: 1px solid rgba(248, 113, 113, 0.28);
      background: linear-gradient(180deg, rgba(153, 27, 27, 0.92), rgba(69, 10, 10, 0.96));
      color: #fef2f2;
    }

    .tarot-frame-card-picker-editor-preview-wrap {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(71, 85, 105, 0.48);
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.42);
    }

    .tarot-frame-card-picker-editor-preview {
      display: grid;
      place-items: center;
      min-height: 190px;
      padding: 8px;
      border-radius: 16px;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 44%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.82));
    }

    .tarot-frame-card-picker-editor-preview .tarot-frame-card-text-face {
      width: min(180px, 100%);
      aspect-ratio: 5 / 7;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, 0.24);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    }

    .tarot-frame-card-picker-editor-empty {
      display: grid;
      place-items: center;
      min-height: 160px;
      padding: 16px;
      border: 1px dashed rgba(125, 211, 252, 0.28);
      border-radius: 16px;
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
      background: rgba(15, 23, 42, 0.36);
    }

    .tarot-frame-slot.is-drop-target {
      box-shadow: 0 0 0 2px #f59e0b, 0 0 0 6px rgba(245, 158, 11, 0.18);
      border-radius: 8px;
    }

    .tarot-frame-slot.is-selected {
      box-shadow: 0 0 0 2px #38bdf8, 0 0 0 6px rgba(56, 189, 248, 0.2);
      border-radius: 8px;
    }

    .tarot-frame-slot.is-drag-source {
      opacity: 0.42;
    }

    .tarot-frame-slot-empty {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: transparent;
      font-size: 0;
    }

    .tarot-frame-slot-empty::before {
      content: none;
    }

    .tarot-frame-card {
      --frame-card-rotation: 0deg;
      --frame-card-hover-lift: 0px;
      position: absolute;
      inset: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
      cursor: grab;
      box-shadow: none;
      transition: transform 120ms ease, filter 120ms ease;
      -webkit-user-select: none;
      user-select: none;
      touch-action: none;
      -webkit-touch-callout: none;
      transform: translateY(var(--frame-card-hover-lift)) rotate(var(--frame-card-rotation));
      transform-origin: center center;
    }

    .tarot-frame-card.is-flipped {
      --frame-card-rotation: 180deg;
    }

    .tarot-frame-card.is-empty {
      cursor: default;
      box-shadow: none;
      background: transparent;
      border-color: transparent;
    }

    .tarot-frame-card:hover {
      --frame-card-hover-lift: -2px;
      filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.38));
    }

    .tarot-frame-card.is-selected {
      filter: drop-shadow(0 12px 20px rgba(14, 165, 233, 0.34));
    }

    .tarot-frame-card.is-empty:hover {
      border-color: transparent;
      box-shadow: none;
      --frame-card-hover-lift: 0px;
      transform: none;
    }

    @media (pointer: coarse) {
      .tarot-frame-card {
        cursor: grab;
      }

      .tarot-frame-card:hover {
        --frame-card-hover-lift: 0px;
        transform: none;
        filter: none;
      }
    }

    .tarot-frame-card-image,
    .tarot-frame-card-fallback {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-frame-card-image {
      object-fit: contain;
      background: transparent;
      border-radius: 0;
    }

    .tarot-frame-card-fallback {
      display: grid;
      place-items: center;
      padding: 8px;
      box-sizing: border-box;
      color: #f8fafc;
      font-size: 12px;
      line-height: 1.2;
      text-align: center;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 50%),
        linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
    }

    .tarot-frame-card-text-face {
      width: 100%;
      height: 100%;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 4px;
      padding: 6px 5px;
      box-sizing: border-box;
      color: #fafafa;
      text-align: center;
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 55%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94));
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-frame-card-text-face.is-dense {
      gap: 3px;
      padding: 5px 4px;
    }

    .tarot-frame-card-text-face.is-custom-label {
      border: 1px dashed rgba(147, 197, 253, 0.48);
      background:
        radial-gradient(circle at top, rgba(125, 211, 252, 0.16), transparent 58%),
        linear-gradient(180deg, rgba(22, 78, 99, 0.52), rgba(15, 23, 42, 0.96));
      color: #f8fafc;
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-visual {
      border-style: solid;
      border-color: rgba(186, 230, 253, 0.72);
      text-shadow: 0 2px 10px rgba(15, 23, 42, 0.88);
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-visual:not(.has-custom-image) {
      background-image: none;
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-visual-only {
      border-style: solid;
      border-color: rgba(186, 230, 253, 0.52);
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-blank {
      gap: 0;
      padding: 0;
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-hero .tarot-frame-card-text-primary {
      font-size: clamp(15px, 1.45vw, 24px);
      line-height: 1;
      letter-spacing: 0.01em;
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-short .tarot-frame-card-text-primary {
      font-size: clamp(12px, 1.1vw, 18px);
      line-height: 1.05;
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-medium .tarot-frame-card-text-primary {
      font-size: clamp(9px, 0.92vw, 14px);
      line-height: 1.1;
    }

    .tarot-frame-card-text-face.is-custom-label .tarot-frame-card-text-secondary {
      color: rgba(224, 242, 254, 0.84);
    }

    .tarot-frame-card-text-face.is-custom-label.is-custom-hero .tarot-frame-card-text-secondary,
    .tarot-frame-card-text-face.is-custom-label.is-custom-short .tarot-frame-card-text-secondary {
      font-size: clamp(7px, 0.74vw, 10px);
    }

    .tarot-frame-card-text-face.is-top-hebrew .tarot-frame-card-text-primary {
      font-size: clamp(11px, 1vw, 16px);
      line-height: 1;
      font-family: "Noto Sans Hebrew", "Segoe UI Symbol", sans-serif;
    }

    .tarot-frame-card-text-primary {
      display: block;
      font-size: clamp(7px, 0.78vw, 10px);
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: 0.02em;
      overflow-wrap: anywhere;
    }

    .tarot-frame-card-text-secondary {
      display: block;
      color: rgba(250, 250, 250, 0.76);
      font-size: clamp(6px, 0.7vw, 8px);
      line-height: 1.2;
      letter-spacing: 0.02em;
      overflow-wrap: anywhere;
    }

    .tarot-frame-card-badge {
      position: absolute;
      left: calc(4px * var(--frame-card-overlay-scale));
      right: calc(4px * var(--frame-card-overlay-scale));
      bottom: calc(4px * var(--frame-card-overlay-scale));
      padding: calc(4px * var(--frame-card-overlay-scale)) calc(5px * var(--frame-card-overlay-scale));
      border-radius: calc(8px * var(--frame-card-overlay-scale));
      background: rgba(2, 6, 23, 0.84);
      color: #f8fafc;
      font-size: calc(clamp(8px, 0.72vw, 10px) * var(--frame-card-overlay-scale));
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0.02em;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
      white-space: normal;
      box-sizing: border-box;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-frame-grid.is-info-hidden .tarot-frame-card-badge {
      display: none;
    }

    .tarot-frame-drag-ghost {
      position: fixed;
      z-index: 120;
      width: 90px;
      height: 135px;
      pointer-events: none;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #818cf8;
      background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
      box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
      transform: translate(-50%, -50%);
    }

    .tarot-frame-drag-ghost.is-flipped {
      transform: translate(-50%, -50%) rotate(180deg);
    }

    .tarot-frame-drag-ghost-count {
      position: absolute;
      top: 8px;
      right: 8px;
      min-width: 26px;
      height: 26px;
      padding: 0 8px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(56, 189, 248, 0.94);
      color: #082f49;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 8px 20px rgba(2, 132, 199, 0.34);
    }

    .tarot-frame-drag-ghost img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tarot-frame-drag-ghost .tarot-frame-card-text-face {
      height: 100%;
      padding: 10px 8px;
    }

    .tarot-frame-drag-ghost-label {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 6px;
      padding: 4px 5px;
      border-radius: 999px;
      background: rgba(2, 6, 23, 0.88);
      color: #f8fafc;
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }

    .tarot-frame-drag-trash {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 130;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 10px;
      min-width: 220px;
      padding: 12px 14px;
      border: 1px solid rgba(248, 113, 113, 0.34);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(69, 10, 10, 0.94), rgba(28, 25, 23, 0.96));
      color: #fee2e2;
      box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
    }

    .tarot-frame-drag-trash[hidden] {
      display: none !important;
    }

    .tarot-frame-drag-trash.is-active {
      border-color: rgba(252, 165, 165, 0.92);
      background: linear-gradient(180deg, rgba(153, 27, 27, 0.96), rgba(69, 10, 10, 0.98));
      transform: scale(1.04);
    }

    .tarot-frame-drag-trash-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      color: #fecaca;
    }

    .tarot-frame-drag-trash-icon svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    .tarot-frame-drag-trash-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .tarot-frame-drag-trash-copy strong {
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .tarot-frame-drag-trash-copy span {
      color: rgba(254, 226, 226, 0.82);
      font-size: 12px;
      line-height: 1.3;
    }

    @media (max-width: 760px) {
      .tarot-frame-drag-trash {
        left: 12px;
        right: 12px;
        bottom: 12px;
        min-width: 0;
      }
    }

    body.is-tarot-frame-dragging {
      cursor: grabbing;
      -webkit-user-select: none;
      user-select: none;
    }

    @media (max-width: 1180px) {
      .tarot-frame-legend {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 820px) {
      .tarot-frame-view {
        padding: 12px;
      }

      .tarot-frame-actions {
        width: 100%;
      }

      .tarot-frame-selection-chip {
        order: -1;
        width: 100%;
        justify-content: center;
        text-align: center;
      }

      .tarot-frame-settings-panel {
        left: 0;
        right: auto;
      }

      .tarot-frame-layout-panel {
        left: 0;
        right: auto;
      }

      .tarot-frame-panel {
        padding: 14px;
      }

      .tarot-frame-panel {
        --frame-base-gap: 2px;
        --frame-base-cell-width: min(26px, calc((100vw - 78px) / 14));
      }

      .tarot-frame-card-badge {
        font-size: 11px;
        padding: 4px 5px;
      }

      .tarot-frame-card-text-face {
        gap: 2px;
        padding: 4px 3px;
      }

      .tarot-frame-card-text-face.is-top-hebrew .tarot-frame-card-text-primary {
        font-size: 10px;
      }

      .tarot-frame-card-text-primary {
        font-size: 6px;
      }

      .tarot-frame-card-text-secondary {
        font-size: 5px;
      }
    }

    .tarot-house-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      position: relative;
    }

    .tarot-house-card-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    .tarot-house-settings-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 3;
      width: min(560px, 100%);
      display: grid;
      gap: 10px;
      padding: 14px 16px;
      border: 1px solid rgba(82, 82, 91, 0.9);
      border-radius: 14px;
      background: rgba(9, 9, 11, 0.96);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }

    .tarot-house-settings-panel[hidden] {
      display: none;
    }

    .tarot-house-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      font-size: 13px;
      line-height: 1.2;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-house-toggle:hover {
      background: #27272a;
      border-color: #52525b;
    }

    .tarot-house-toggle input {
      margin: 0;
      accent-color: #6366f1;
    }

    .tarot-house-toggle input:disabled {
      cursor: progress;
    }

    .tarot-house-toggle:has(input:disabled) {
      opacity: 0.65;
      cursor: progress;
    }

    .tarot-house-filter {
      display: grid;
      gap: 4px;
      color: #d4d4d8;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-house-filter-select {
      min-width: 132px;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      font-size: 13px;
      text-transform: none;
      letter-spacing: 0;
    }

    .tarot-house-filter-select:disabled {
      opacity: 0.65;
      cursor: progress;
    }

    .tarot-house-filter-group {
      margin: 0;
      padding: 6px 8px;
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
    }

    .tarot-house-filter-group legend {
      padding: 0 4px;
      color: #d4d4d8;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .tarot-house-mini-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 2px 6px;
      border-radius: 999px;
      background: #111118;
      color: #f4f4f5;
      font-size: 12px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .tarot-house-mini-toggle input {
      margin: 0;
      accent-color: #6366f1;
    }

    .tarot-house-mini-toggle:has(input:disabled) {
      opacity: 0.65;
      cursor: progress;
    }

    .tarot-house-action-btn {
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 13px;
      line-height: 1.2;
    }

    .tarot-house-action-btn:hover:not(:disabled) {
      background: #27272a;
      border-color: #52525b;
    }

    .tarot-house-action-btn[aria-pressed="true"] {
      background: #312e81;
      border-color: #6366f1;
    }

    .tarot-house-action-btn:disabled {
      opacity: 0.65;
      cursor: progress;
    }

    .tarot-house-layout {
      --tarot-house-card-width: 76.8px;
      --tarot-house-card-height: 115.2px;
      --tarot-house-card-gap: 6px;
      --tarot-house-row-gap: 8px;
      --tarot-house-section-gap: 12px;
      --tarot-house-major-row-width: calc((var(--tarot-house-card-width) * 11) + (var(--tarot-house-card-gap) * 10));
      display: grid;
      gap: var(--tarot-house-section-gap);
      justify-content: center;
    }

    .tarot-house-trumps {
      display: grid;
      gap: var(--tarot-house-row-gap);
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .tarot-house-trump-row {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--tarot-house-card-gap);
      width: min(100%, var(--tarot-house-major-row-width));
      max-width: 100%;
      justify-content: center;
      margin: 0 auto;
    }

    .tarot-house-bottom-grid {
      display: grid;
      grid-template-columns: repeat(3, max-content);
      width: min(100%, var(--tarot-house-major-row-width));
      max-width: 100%;
      column-gap: 0;
      row-gap: 0;
      justify-content: space-between;
      margin: 0 auto;
    }

    .tarot-house-column {
      display: grid;
      gap: var(--tarot-house-row-gap);
      align-content: start;
    }

    .tarot-house-row {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--tarot-house-card-gap);
    }

    .tarot-house-card-btn {
      border: 1px solid #3f3f46;
      border-radius: 6px;
      padding: 0;
      background: #18181b;
      cursor: pointer;
      overflow: hidden;
      line-height: 0;
      position: relative;
      contain: layout paint;
      transform-origin: center;
      transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }

    .tarot-house-card-btn.is-text-only {
      background:
        radial-gradient(circle at top, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 48%),
        linear-gradient(180deg, #1b1b27 0%, #111118 100%);
      line-height: 1.2;
    }

    .tarot-house-card-btn:hover {
      border-color: #7060b0;
      background: #27272a;
    }

    .tarot-house-card-btn.is-text-only:hover {
      background:
        radial-gradient(circle at top, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0) 50%),
        linear-gradient(180deg, #212132 0%, #171723 100%);
    }

    .tarot-house-card-btn.is-selected {
      border-color: #7060b0;
      background: #27272a;
      transform: scale(1.18);
      z-index: 2;
      box-shadow: 0 0 0 2px #7060b0;
    }

    .tarot-house-card-image {
      display: block;
      width: var(--tarot-house-card-width);
      height: var(--tarot-house-card-height);
      object-fit: cover;
      background: #09090b;
      opacity: 0;
      transition: opacity 140ms ease;
    }

    .tarot-house-card-image.is-loaded {
      opacity: 1;
    }

    .tarot-house-card-text-face {
      width: var(--tarot-house-card-width);
      height: var(--tarot-house-card-height);
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 6px;
      padding: 10px 8px;
      box-sizing: border-box;
      color: #fafafa;
      text-align: center;
    }

    .tarot-house-card-text-face.is-dense {
      gap: 4px;
      padding: 8px 7px;
    }

    .tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
      font-size: 26px;
      line-height: 1;
      font-family: "Noto Sans Hebrew", "Segoe UI Symbol", sans-serif;
    }

    .tarot-house-card-text-primary {
      display: block;
      font-size: 13px;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: 0.02em;
      overflow-wrap: anywhere;
    }

    .tarot-house-card-text-secondary {
      display: block;
      color: rgba(250, 250, 250, 0.76);
      font-size: 9px;
      line-height: 1.25;
      letter-spacing: 0.02em;
      overflow-wrap: anywhere;
    }

    .tarot-house-card-label {
      position: absolute;
      left: 4px;
      right: 4px;
      bottom: 4px;
      padding: 4px 5px;
      border-radius: 5px;
      background: linear-gradient(180deg, rgba(9, 9, 11, 0.2) 0%, rgba(9, 9, 11, 0.9) 100%);
      color: #fafafa;
      font-size: 9px;
      line-height: 1.2;
      text-align: center;
      letter-spacing: 0.02em;
      pointer-events: none;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
      box-sizing: border-box;
    }

    .tarot-house-card-label.is-top-hebrew {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .tarot-house-card-label.is-dense {
      font-size: 8px;
      line-height: 1.15;
    }

    .tarot-house-card-label-primary {
      display: block;
      font-weight: 700;
    }

    .tarot-house-card-label-secondary {
      display: block;
      margin-top: 2px;
      color: rgba(250, 250, 250, 0.84);
      font-size: 8px;
      font-weight: 500;
    }

    .tarot-house-card-fallback {
      width: var(--tarot-house-card-width);
      height: var(--tarot-house-card-height);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a1a1aa;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      line-height: 1.2;
      padding: 4px;
      box-sizing: border-box;
    }

    #tarot-house-view.is-house-focus {
      padding: 18px;
    }

    #tarot-house-view.is-house-focus .tarot-house-layout {
      --tarot-house-card-gap: clamp(4px, 0.6vw, 8px);
      --tarot-house-row-gap: clamp(6px, 0.9vw, 10px);
      --tarot-house-section-gap: clamp(12px, 1.4vw, 16px);
      --tarot-house-card-width: clamp(48px, calc((100vw - 240px) / 11), 112px);
      --tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
      min-height: 100%;
      align-content: start;
    }

    #tarot-house-view.is-house-focus .tarot-house-trumps {
      overflow-x: hidden;
    }

    .planet-layout {
      height: 100%;
      display: grid;
      grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
      min-height: 0;
    }
    .planet-list-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow-x: hidden;
      border-right: 1px solid #27272a;
      background: #111118;
    }
    .planet-list-header {
      padding: 14px 14px 10px;
      border-bottom: 1px solid #27272a;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      position: relative;
      z-index: 1;
    }
    .planet-list-count {
      color: #a1a1aa;
      font-size: 12px;
    }
    .planet-card-list {
      overflow: auto;
      flex: 1;
      min-height: 0;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .planet-list-item {
      width: 100%;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
    }
    .planet-list-item:hover,
    .planet-list-item.is-selected {
      background: #27272a;
      border-color: #52525b;
    }
    .planet-list-name {
      font-size: 14px;
      font-weight: 600;
    }
    .planet-list-meta {
      font-size: 12px;
      color: #a1a1aa;
    }
    .planet-detail-panel {
      min-width: 0;
      overflow: auto;
      padding: 18px;
      display: grid;
      grid-template-rows: auto auto;
      gap: 16px;
      background: #18181b;
      font-size: calc(13px * var(--detail-text-scale));
    }
    .planet-detail-heading {
      position: relative;
      z-index: 1;
    }
    .planet-detail-heading h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
    }
    .planet-detail-type {
      margin-top: 4px;
      color: #a1a1aa;
      font-size: calc(13px * var(--detail-text-scale));
    }
    .planet-detail-summary {
      margin-top: 10px;
      font-size: calc(14px * var(--detail-text-scale));
      line-height: 1.45;
      color: #e4e4e7;
    }
    .detail-sequence-nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .detail-sequence-btn {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #111118;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      transition: background 120ms, border-color 120ms, color 120ms;
    }
    .detail-sequence-btn:hover {
      background: #27272a;
      border-color: #52525b;
    }
    .detail-sequence-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }
    .detail-sequence-btn:disabled:hover {
      background: #111118;
      border-color: #3f3f46;
    }
    .detail-sequence-position {
      min-width: 78px;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.2;
    }
    .detail-pane-export-controls {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .detail-export-btn {
      white-space: nowrap;
    }
    .planet-meta-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }
    .planet-meta-card,
    .detail-meta-card {
      border: 1px solid #3f3f46;
      border-radius: 10px;
      padding: 10px;
      background: #111118;
    }
    .planet-meta-card strong,
    .detail-meta-card strong {
      display: block;
      margin-bottom: 8px;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .planet-facts-list {
      display: grid;
      gap: 6px;
    }
    .planet-fact-row {
      display: grid;
      grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr);
      gap: 10px;
      align-items: baseline;
      padding-bottom: 4px;
      border-bottom: 1px dashed #27272a;
    }
    .planet-fact-label {
      color: #a1a1aa;
      font-size: 12px;
    }
    .planet-fact-value {
      color: #f4f4f5;
      font-size: 13px;
      text-align: right;
    }
    .planet-notes {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      color: #e4e4e7;
      font-size: 13px;
      line-height: 1.4;
    }
    .planet-text {
      margin: 0;
      color: #e4e4e7;
      font-size: 13px;
      line-height: 1.4;
    }
    .iching-trigram-grid {
      display: grid;
      gap: 8px;
    }
    .iching-trigram-card {
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      padding: 8px;
      display: grid;
      gap: 4px;
    }
    .iching-trigram-title {
      font-size: 13px;
      font-weight: 600;
      color: #f4f4f5;
    }
    .iching-trigram-meta {
      font-size: 12px;
      color: #a1a1aa;
    }
    .iching-trigram-diagram {
      display: grid;
      gap: 6px;
      align-items: start;
    }
    .iching-line-label {
      font-size: 11px;
      color: #a1a1aa;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: 0.05em;
    }
    .iching-lines {
      width: min(100%, 140px);
      display: grid;
      gap: 6px;
    }
    .iching-lines-trigram {
      width: min(100%, 110px);
      gap: 5px;
    }
    .iching-lines-hexagram {
      width: min(100%, 170px);
      gap: 7px;
    }
    .iching-lines--bigram {
      width: min(100%, 90px);
      gap: 8px;
    }
    .iching-line {
      height: 8px;
      border-radius: 999px;
      background: #e4e4e7;
      position: relative;
    }
    .iching-line.is-yin {
      background: transparent;
    }
    .iching-line.is-yin::before,
    .iching-line.is-yin::after {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: calc(50% - 8px);
      border-radius: 999px;
      background: #e4e4e7;
    }
    .iching-line.is-yin::before {
      left: 0;
    }
    .iching-line.is-yin::after {
      right: 0;
    }
    .iching-diagram {
      margin: 6px 0 0;
      padding: 8px;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #111118;
      color: #d4d4d8;
      min-height: 86px;
      display: grid;
      align-content: center;
      justify-items: start;
    }
    .iching-tarot-text {
      white-space: normal;
      line-height: 1.4;
      font-size: 12px;
      display: grid;
      gap: 10px;
    }
    .iching-tarot-group {
      display: grid;
      gap: 6px;
    }
    .iching-tarot-group-title {
      color: #a1a1aa;
      font-size: 12px;
      font-weight: 600;
    }

    /* ── Kabbalah sections ──────────────────────────────────────────────── */
    #quiz-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: auto;
      padding: 20px;
    }
    #quiz-section[hidden] { display: none; }

    .quiz-layout {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      gap: 14px;
    }

    .quiz-card {
      border: 1px solid #3f3f46;
      border-radius: 12px;
      background: #111118;
      padding: 16px;
      color: #d4d4d8;
      display: grid;
      gap: 12px;
    }

    .quiz-score-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .quiz-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .quiz-category-label {
      font-size: 12px;
      color: #a1a1aa;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .quiz-category-select {
      min-width: 220px;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      font-size: 14px;
    }

    .quiz-difficulty-label {
      font-size: 12px;
      color: #a1a1aa;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-left: 8px;
    }

    .quiz-difficulty-select {
      min-width: 140px;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      font-size: 14px;
    }

    .quiz-score-item {
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      padding: 8px;
      display: grid;
      gap: 2px;
    }

    .quiz-score-label {
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #a1a1aa;
    }

    .quiz-score-value {
      font-size: 18px;
      color: #f4f4f5;
      font-weight: 700;
      line-height: 1.2;
    }

    .quiz-question {
      margin: 0;
      font-size: 24px;
      line-height: 1.35;
      color: #f4f4f5;
    }

    .quiz-options {
      display: grid;
      gap: 8px;
    }

    .quiz-option {
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
      font-size: 14px;
    }

    .quiz-option:hover:enabled {
      background: #27272a;
    }

    .quiz-option:disabled {
      cursor: default;
      opacity: 0.92;
    }

    .quiz-option.is-correct {
      border-color: #16a34a;
      background: #052e16;
      color: #dcfce7;
    }

    .quiz-option.is-wrong {
      border-color: #dc2626;
      background: #450a0a;
      color: #fee2e2;
    }

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

    #astronomy-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #astronomy-section[hidden] { display: none; }

    #natal-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #natal-section[hidden] { display: none; }

    #kabbalah-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #kabbalah-section[hidden] { display: none; }

    #kabbalah-worlds-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #kabbalah-worlds-section[hidden] { display: none; }

    #kabbalah-paths-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #kabbalah-paths-section[hidden] { display: none; }

    #kabbalah-cross-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #kabbalah-cross-section[hidden] { display: none; }

    .kab-browser-intro {
      padding: 0 12px 8px;
    }

    #kabbalah-tree-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #kabbalah-tree-section[hidden] { display: none; }

    .kabbalah-placeholder {
      height: 100%;
      display: grid;
      place-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .kabbalah-placeholder-card {
      width: min(680px, 100%);
      border: 1px solid #3f3f46;
      border-radius: 12px;
      background: #111118;
      padding: 16px;
      color: #d4d4d8;
      text-align: left;
    }
    .kabbalah-placeholder-card strong {
      display: block;
      margin-bottom: 8px;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .kab-rose-layout {
      height: 100%;
      display: grid;
      grid-template-columns: minmax(520px, 1.2fr) minmax(320px, 1fr);
      min-height: 0;
    }

    .kab-rose-panel {
      min-width: 0;
      overflow: auto;
      border-right: 1px solid #27272a;
      background:
        radial-gradient(circle at 52% 40%, rgba(255, 255, 255, 0.06), transparent 36%),
        linear-gradient(180deg, #020617 0%, #02030a 100%);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      min-height: 0;
    }

    .kab-rose-intro {
      padding: 8px 14px 0;
      color: #a1a1aa;
      font-size: 12px;
      letter-spacing: 0.02em;
    }

    .kab-rose-cross-container {
      min-height: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 8px 14px;
    }

    .kab-rose-cross-container > .kab-rose-svg {
      width: min(100%, 980px);
      max-height: min(100%, 1160px);
      display: block;
    }

    .kab-rose-petal {
      cursor: pointer;
      outline: none;
    }

    .kab-rose-petal-shape {
      transition: transform 120ms ease, filter 120ms ease, stroke 120ms ease;
    }

    .kab-rose-petal:hover .kab-rose-petal-shape,
    .kab-rose-petal:focus-visible .kab-rose-petal-shape {
      transform: scale(1.07);
      filter: brightness(1.14);
      stroke: rgba(255, 255, 255, 0.75);
      stroke-width: 2.4;
    }

    .kab-rose-petal.kab-path-active .kab-rose-petal-shape {
      filter: brightness(1.2);
      stroke: #f8fafc;
      stroke-width: 2.6;
    }

    .kab-rose-petal-letter {
      font-family: "Noto Sans Hebrew", var(--font-script-main), serif;
      font-size: 34px;
      font-weight: 700;
      pointer-events: none;
      fill: #f8fafc;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.66);
    }

    .kab-rose-petal-number {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      pointer-events: none;
      fill: rgba(241, 245, 249, 0.95);
    }

    .kab-rose-arm-glyph {
      pointer-events: none;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
    }

    .kab-rose-petal--mother .kab-rose-petal-letter,
    .kab-rose-petal--double .kab-rose-petal-letter {
      fill: #111827;
      text-shadow: none;
    }

    .kab-rose-petal--mother .kab-rose-petal-number,
    .kab-rose-petal--double .kab-rose-petal-number {
      fill: rgba(17, 24, 39, 0.92);
    }

    @media (max-width: 1220px) {
      .kab-rose-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(360px, auto) minmax(0, 1fr);
      }

      .kab-rose-panel {
        border-right: none;
        border-bottom: 1px solid #27272a;
      }

      .kab-rose-cross-container > .kab-rose-svg {
        width: min(100%, 860px);
      }
    }

    @media (max-width: 760px) {
      .kab-rose-cross-container {
        padding: 6px;
      }

      .kab-rose-cross-container > .kab-rose-svg {
        width: min(100%, 700px);
      }

      .kab-rose-petal-letter {
        font-size: 30px;
      }
    }

    .natal-chart-summary {
      margin-top: 10px;
      margin-bottom: 0;
      white-space: pre-wrap;
      font-family: inherit;
    }

    #cube-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #cube-section[hidden] { display: none; }

    .cube-svg {
      display: block;
    }

    .cube-export-btn[hidden] {
      display: none;
    }

    .cube-rotation-controls {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      padding: 8px 12px 6px;
      border-bottom: 1px solid #27272a;
    }

    .cube-rotation-btn {
      padding: 5px 0;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #d4d4d8;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
    }

    .cube-rotation-btn:hover {
      background: #27272a;
      border-color: #52525b;
      color: #f4f4f5;
    }

    .cube-rotation-btn[aria-pressed="true"] {
      background: #312e81;
      border-color: #818cf8;
      color: #e0e7ff;
    }

    .cube-marker-mode-control {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
    }

    .cube-marker-mode-label {
      font-size: 11px;
      color: #a1a1aa;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .cube-marker-mode-select {
      flex: 1;
      min-width: 0;
      padding: 5px 8px;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #d4d4d8;
      font-size: 12px;
      line-height: 1.2;
    }

    .cube-connector-toggle-control,
    .cube-primal-toggle-control {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
      font-size: 11px;
      color: #a1a1aa;
    }

    .cube-connector-toggle-control input,
    .cube-primal-toggle-control input {
      margin: 0;
      accent-color: #a1a1aa;
    }

    .cube-rotation-readout {
      grid-column: 1 / -1;
      margin-top: 2px;
      text-align: center;
      font-size: 11px;
      color: #a1a1aa;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }

    .cube-face {
      cursor: pointer;
    }

    .cube-face.is-active {
      stroke-width: 2.5;
    }

    .cube-face-symbol {
      fill: currentColor;
      fill-opacity: 0.62;
      font-size: 27px;
      font-weight: 700;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .cube-face-symbol.is-active {
      fill-opacity: 1;
      font-size: 30px;
    }

    .cube-face-symbol.is-missing {
      fill: #ef4444;
      fill-opacity: 1;
    }

    .cube-face-label {
      fill: currentColor;
      fill-opacity: 0.72;
      font-size: 8.5px;
      pointer-events: none;
    }

    .cube-face-label.is-active {
      fill-opacity: 0.95;
      font-size: 9px;
      font-weight: 700;
    }

    .cube-center-hit {
      fill: transparent;
      stroke: none;
    }

    .cube-center-symbol {
      fill: currentColor;
      fill-opacity: 0.98;
      font-size: 26px;
      font-weight: 800;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .cube-center-symbol.is-active {
      fill-opacity: 1;
      font-size: 28px;
    }

    .cube-center-symbol.is-missing {
      fill: #ef4444;
      fill-opacity: 1;
    }

    .cube-connector {
      cursor: pointer;
    }

    .cube-connector-line {
      stroke: currentColor;
      stroke-opacity: 0.42;
      stroke-width: 1.6;
      stroke-dasharray: 4 3;
      transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
    }

    .cube-connector:hover .cube-connector-line,
    .cube-connector.is-active .cube-connector-line {
      stroke-opacity: 0.9;
      stroke-width: 2.2;
      stroke-dasharray: none;
    }

    .cube-connector-hit {
      stroke: transparent;
      stroke-width: 12;
    }

    .cube-connector-symbol {
      fill: currentColor;
      fill-opacity: 0.82;
      font-size: 14px;
      font-weight: 700;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      transition: fill-opacity 120ms ease, font-size 120ms ease;
    }

    .cube-connector:hover .cube-connector-symbol,
    .cube-connector.is-active .cube-connector-symbol {
      fill-opacity: 1;
      font-size: 15px;
    }

    .cube-direction {
      cursor: pointer;
    }

    .cube-direction-letter {
      fill: currentColor;
      fill-opacity: 0.56;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font-script-display);
      -webkit-user-select: none;
      user-select: none;
      transition: fill-opacity 120ms ease, font-size 120ms ease, font-weight 120ms ease;
    }

    .cube-direction.is-wall-active .cube-direction-letter {
      fill-opacity: 0.84;
    }

    .cube-direction:hover .cube-direction-letter {
      fill-opacity: 1;
    }

    .cube-direction.is-active .cube-direction-letter {
      fill-opacity: 1;
      font-size: 15px;
      font-weight: 700;
    }

    .cube-direction-card {
      transition: filter 120ms ease, opacity 120ms ease;
    }

    .cube-tarot-image {
      cursor: zoom-in;
      transition: filter 120ms ease, transform 120ms ease;
    }

    .cube-tarot-image:hover {
      filter: drop-shadow(0 0 4px rgba(224, 231, 255, 0.92));
      transform: translateY(-0.6px);
    }

    .cube-direction:hover .cube-direction-card,
    .cube-direction-card.is-active {
      filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
      opacity: 1;
    }

    .cube-direction-letter.is-missing {
      fill: #ef4444;
      fill-opacity: 1;
      font-size: 16px;
      font-weight: 800;
    }

    .kab-layout {
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 0;
    }

    .kab-tree-panel {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #27272a;
      background: #0f0f17;
      overflow: auto;
      min-width: 0;
      min-height: 240px;
      max-height: min(44vh, 420px);
    }

    .planet-layout,
    .tarot-layout,
    .kab-layout {
      position: relative;
    }

    .planet-list-panel,
    .tarot-list-panel,
    .kab-tree-panel {
      transition: opacity 120ms ease;
    }

    .sidebar-toggle-inline,
    .sidebar-popout-open {
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #d4d4d8;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      padding: 6px 8px;
    }

    .sidebar-toggle-inline:hover,
    .sidebar-popout-open:hover {
      background: #27272a;
      border-color: #52525b;
      color: #f4f4f5;
    }

    .detail-toggle-inline,
    .detail-popout-open {
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #d4d4d8;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      padding: 6px 8px;
    }

    .detail-toggle-inline:hover,
    .detail-popout-open:hover {
      background: #27272a;
      border-color: #52525b;
      color: #f4f4f5;
    }

    .sidebar-toggle-inline {
      margin-left: auto;
      align-self: center;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }

    .detail-toggle-inline {
      margin-left: auto;
      align-self: center;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }

    .detail-popout-open {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 5;
    }

    .sidebar-popout-open[hidden] {
      display: none;
    }

    .detail-popout-open[hidden] {
      display: none;
    }

    .planet-layout.layout-sidebar-collapsed,
    .planet-layout.layout-detail-collapsed,
    .tarot-layout.layout-sidebar-collapsed,
    .tarot-layout.layout-detail-collapsed {
      grid-template-columns: minmax(0, 1fr);
    }

    .kab-layout.layout-sidebar-collapsed,
    .kab-layout.layout-detail-collapsed {
      grid-template-rows: minmax(0, 1fr);
    }

    .layout-sidebar-collapsed > .planet-list-panel,
    .layout-sidebar-collapsed > .tarot-list-panel {
      display: none;
      width: 0;
      max-width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      border-right: none;
    }

    .layout-sidebar-collapsed > .kab-tree-panel {
      display: none;
      height: 0;
      max-height: 0;
      min-height: 0;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      border-bottom: none;
      border-right: none;
    }

    .layout-detail-collapsed > .planet-detail-panel,
    .layout-detail-collapsed > .tarot-detail-panel {
      display: none;
      width: 0;
      max-width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      padding: 0;
      border-left: none;
    }

    .layout-detail-collapsed > .kab-detail-panel {
      display: none;
      height: 0;
      max-height: 0;
      min-height: 0;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      padding: 0;
      border-top: none;
    }

    .kab-layout.layout-detail-collapsed > .kab-tree-panel {
      max-height: none;
      min-height: 0;
      border-bottom: none;
    }

    .kab-layout.is-cube-focus {
      grid-template-rows: minmax(0, 1fr);
    }

    .kab-layout.is-cube-focus > .kab-detail-panel {
      display: none;
    }

    .kab-layout.is-cube-focus > .kab-tree-panel {
      max-height: none;
      min-height: 0;
      height: 100%;
      border-bottom: none;
    }

    .kab-layout.is-cube-focus .kab-tree-container {
      align-items: center;
      padding: 18px;
    }

    .kab-layout.is-cube-focus .kab-tree-container > .cube-svg {
      width: min(100%, 760px);
      max-height: calc(100vh - 190px);
    }

    .kab-tree-container {
      flex: 1;
      padding: 12px 14px 16px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .kab-tree-container > .kab-svg {
      width: min(100%, 420px);
    }

    .kab-tree-container > .cube-svg {
      width: min(100%, 500px);
    }

    .kab-path-toggle-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      padding: 7px 12px 6px;
      border-bottom: 1px solid #27272a;
    }

    .kab-path-toggle-control {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      color: #a1a1aa;
      font-size: 12px;
    }

    .kab-path-toggle-control input {
      margin: 0;
    }

    .kab-export-btn {
      margin-left: auto;
      padding: 5px 10px;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #d4d4d8;
      cursor: pointer;
      font-size: 12px;
      line-height: 1.2;
    }

    .kab-export-btn:hover:not(:disabled) {
      background: #27272a;
      border-color: #52525b;
      color: #f4f4f5;
    }

    .kab-export-btn:disabled {
      opacity: 0.65;
      cursor: progress;
    }

    .kab-export-btn[hidden] {
      display: none;
    }

    .kab-detail-panel {
      min-width: 0;
      overflow: auto;
      padding: 18px;
      background: #18181b;
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-size: calc(13px * var(--detail-text-scale));
    }

    #kab-detail-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .kab-wide-card {
      grid-column: 1 / -1;
    }

    /* SVG tree interactivity */
    .kab-svg { display: block; }

    .kab-node {
      transition: filter 0.12s;
    }
    .kab-node:hover {
      filter: brightness(1.35);
    }
    .kab-node.kab-node-active {
      filter: brightness(1.4);
      stroke: rgba(255,255,255,0.5) !important;
      stroke-width: 2 !important;
    }
    .kab-node-glow.kab-node-active {
      opacity: 0.30 !important;
    }

    .kab-path-line {
      transition: stroke 0.12s, stroke-width 0.12s;
    }
    .kab-path-line.kab-path-active {
      stroke: #9080e0 !important;
      stroke-width: 2.5 !important;
    }

    .kab-path-tarot.kab-path-active {
      filter: drop-shadow(0 0 5px rgba(112, 96, 176, 0.78));
    }

    .kab-path-tarot {
      cursor: zoom-in;
      transition: filter 120ms ease;
    }

    .kab-path-tarot:hover {
      filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.85));
    }

    .kab-path-lbl.kab-path-active {
      fill: #c8b8f8 !important;
    }
    .kab-path-hit:hover + .kab-path-lbl {
      fill: #8878c8;
    }

    /* Path/sephira chips in detail panel */
    .kab-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }
    .kab-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 9px;
      border-radius: 6px;
      background: #27272a;
      border: 1px solid #3f3f46;
      color: #c4c4d4;
      font-size: calc(14px * var(--detail-text-scale));
      cursor: pointer;
      transition: background 0.1s;
      line-height: 1;
      font-family: var(--font-script-main);
    }
    .kab-chip:hover { background: #3f3f46; }
    .kab-chip.is-active {
      background: #3f3f46;
      border-color: #6366f1;
      color: #e0e7ff;
    }
    .kab-chip.is-missing {
      border-color: #ef4444;
      color: #ef4444;
    }
    .kab-chip-sub {
      font-size: calc(10px * var(--detail-text-scale));
      color: #71717a;
    }

    .cube-missing-value {
      color: #ef4444;
      font-weight: 700;
    }

    .kab-tarot-link {
      display: inline-block;
      margin-top: 5px;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid #4a4a6a;
      background: #1e1e30;
      color: #c8b8f8;
      font-size: calc(13px * var(--detail-text-scale));
      cursor: pointer;
      text-align: left;
      transition: background 0.1s, border-color 0.1s;
      width: 100%;
    }
    .kab-tarot-link:hover {
      background: #2a2a44;
      border-color: #7060b0;
      color: #e0d0ff;
    }
    .kab-tarot-link::after {
      content: " ↗";
      font-size: 10px;
      opacity: 0.6;
    }

    .kab-god-meta {
      margin-top: 6px;
      color: #a1a1aa;
      font-size: calc(12px * var(--detail-text-scale));
    }
    .kab-god-links {
      margin-top: 7px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .kab-god-link {
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid #4a4a6a;
      background: #1e1e30;
      color: #c8b8f8;
      font-size: calc(12px * var(--detail-text-scale));
      cursor: pointer;
      transition: background 0.1s, border-color 0.1s;
    }
    .kab-god-link:hover {
      background: #2a2a44;
      border-color: #7060b0;
      color: #e0d0ff;
    }
    .detail-inline-value {
      display: inline;
    }
    .detail-inline-link {
      padding: 0;
      border: 0;
      background: none;
      color: #c8b8f8;
      font: inherit;
      line-height: inherit;
      cursor: pointer;
      text-align: inherit;
      text-decoration: underline;
      text-decoration-color: rgba(200, 184, 248, 0.45);
      text-underline-offset: 0.12em;
    }
    .detail-inline-link:hover,
    .detail-inline-link:focus-visible {
      color: #e0d0ff;
      text-decoration-color: currentColor;
    }
    .detail-inline-link.is-selected,
    .detail-inline-link[aria-pressed="true"] {
      color: #e0d0ff;
      text-decoration-color: currentColor;
      font-weight: 600;
    }

    /* ── Alphabet section ────────────────────────────────────────────────── */
    #alphabet-section,
    #alphabet-letters-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }

    #alphabet-section {
      overflow: auto;
    }

    #alphabet-section[hidden],
    #alphabet-letters-section[hidden] { display: none; }

    .alpha-lookup-shell {
      min-height: 100%;
      padding: 18px 16px 24px;
      box-sizing: border-box;
      display: grid;
      align-items: start;
      font-size: calc(13px * var(--detail-text-scale));
    }

    .alpha-special-top {
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: 14px;
      border: 1px solid #27272a;
      border-radius: 18px;
      overflow: visible;
      background: linear-gradient(180deg, #171726 0%, #12121a 100%);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    }

    .alpha-gematria-card {
      display: grid;
      gap: 10px;
    }

    .alpha-gematria-toolbar {
      display: flex;
      justify-content: flex-end;
    }

    .alpha-tool-mode-group {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 0;
      padding: 0;
      border: none;
    }

    .alpha-tool-mode-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #d4d4d8;
      font-size: 12px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      padding: 6px 10px;
      border: 1px solid #3f3f46;
      border-radius: 999px;
      background: #101018;
    }

    .alpha-tool-mode-option:has(input:checked) {
      border-color: #6366f1;
      background: #1c1b35;
      color: #eef2ff;
    }

    .alpha-gematria-controls {
      display: grid;
      grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
      gap: 8px;
      align-items: start;
    }

    .alpha-gematria-field {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .alpha-gematria-field.is-disabled {
      opacity: 0.55;
    }

    .alpha-gematria-field > span {
      color: #a1a1aa;
      font-size: 11px;
      letter-spacing: 0.02em;
    }

    .alpha-gematria-cipher,
    .alpha-gematria-input {
      width: 100%;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }

    .alpha-gematria-cipher[hidden] {
      display: none;
    }

    .alpha-gematria-reverse-ciphers {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .alpha-gematria-reverse-ciphers[hidden] {
      display: none;
    }

    .alpha-gematria-reverse-cipher-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid #3f3f46;
      border-radius: 999px;
      background: #101018;
      color: #d4d4d8;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .alpha-gematria-reverse-cipher-option:has(input:checked) {
      border-color: #6366f1;
      background: #1c1b35;
      color: #eef2ff;
    }

    .alpha-gematria-reverse-cipher-option input {
      margin: 0;
      accent-color: #818cf8;
    }

    .alpha-gematria-reverse-cipher-name {
      font-size: 12px;
      line-height: 1.2;
    }

    .alpha-gematria-reverse-cipher-hint {
      color: #a1a1aa;
      font-size: 11px;
      line-height: 1.4;
    }

    .alpha-gematria-input {
      min-height: 54px;
      resize: vertical;
      font-family: var(--font-script-main);
    }

    .alpha-gematria-result {
      color: #e0d0ff;
      font-weight: 700;
      font-size: 16px;
      line-height: 1.2;
    }

    .alpha-gematria-breakdown {
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.4;
      word-break: break-word;
    }

    .alpha-gematria-keyboard {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid #2f2f39;
      border-radius: 12px;
      background: #0f0f17;
    }

    .alpha-gematria-keyboard[hidden] {
      display: none;
    }

    .alpha-gematria-keyboard-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .alpha-gematria-keyboard-label {
      color: #a1a1aa;
      font-size: 11px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .alpha-gematria-keyboard-script {
      min-width: 140px;
      padding: 5px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      font-size: 12px;
    }

    .alpha-gematria-keyboard-grid {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 6px;
    }

    .alpha-gematria-keyboard-grid.is-disabled {
      opacity: 0.6;
      pointer-events: none;
    }

    .alpha-gematria-keyboard-key,
    .alpha-gematria-keyboard-action {
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #161622;
      color: #f4f4f5;
      font-size: 15px;
      line-height: 1;
      min-height: 36px;
      padding: 6px;
      cursor: pointer;
    }

    .alpha-gematria-keyboard-key:hover,
    .alpha-gematria-keyboard-action:hover {
      border-color: #6366f1;
      background: #1d1d31;
    }

    .alpha-gematria-keyboard-actions {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }

    .alpha-gematria-keyboard-actions.is-disabled {
      opacity: 0.6;
      pointer-events: none;
    }

    .alpha-gematria-keyboard-action {
      font-size: 12px;
      min-height: 34px;
      padding: 6px 8px;
    }

    .alpha-gematria-matches {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
      max-height: min(52vh, 560px);
      overflow: auto;
      padding-right: 4px;
    }

    .alpha-gematria-matches[hidden] {
      display: none;
    }

    .alpha-gematria-match {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid #2f2f39;
      border-radius: 12px;
      background: #0c0c12;
    }

    .alpha-gematria-match-word {
      color: #f4f4f5;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
    }

    .alpha-gematria-match-definition {
      color: #d4d4d8;
      font-size: 12px;
      line-height: 1.45;
    }

    .alpha-gematria-match-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .alpha-gematria-match-meta-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border: 1px solid #3f3f46;
      border-radius: 999px;
      background: #11111a;
      color: #d4d4d8;
      font-size: 11px;
      line-height: 1;
    }

    .alpha-gematria-match-ciphers {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .alpha-gematria-match-cipher {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border: 1px solid #3f3f46;
      border-radius: 999px;
      background: #18181b;
      color: #c4b5fd;
      font-size: 11px;
      line-height: 1;
    }

    .alpha-gematria-match-empty {
      grid-column: 1 / -1;
      padding: 14px;
      border: 1px dashed #3f3f46;
      border-radius: 12px;
      background: #101018;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.45;
    }

    @media (max-width: 900px) {
      .alpha-gematria-controls.is-input-priority-mode {
        grid-template-columns: minmax(0, 1fr);
      }

      .alpha-gematria-controls.is-input-priority-mode .alpha-gematria-field-cipher {
        display: none;
      }

      .alpha-gematria-controls.is-reverse-cipher-mode {
        grid-template-columns: minmax(0, 1fr);
      }

      .alpha-gematria-keyboard-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .alpha-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px 10px 0;
    }
    .alpha-tab-btn {
      flex: 1 1 auto;
      min-width: 0;
      padding: 5px 4px;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      background: #18181b;
      color: #a1a1aa;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    .alpha-tab-btn.alpha-tab-active {
      background: #312e81;
      border-color: #6366f1;
      color: #e0e7ff;
    }

    .alpha-filter-search-wrap {
      margin-top: 6px;
    }

    .alpha-filter-type-wrap {
      padding: 8px 12px;
      border-bottom: 1px solid #27272a;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .alpha-filter-type-wrap label {
      color: #a1a1aa;
      font-size: 12px;
    }

    .alpha-type-filter {
      width: 100%;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }

    .alpha-list-item {
      flex-direction: row !important;
      align-items: center;
      gap: 8px;
    }
    .alpha-list-glyph {
      font-size: calc(22px * var(--detail-text-scale));
      min-width: 34px;
      text-align: center;
      font-family: var(--font-script-display);
      color: #e0d0ff;
      line-height: 1;
    }
    .alpha-list-glyph--arabic {
      font-family: var(--font-script-arabic);
      font-size: calc(26px * var(--detail-text-scale));
    }
    .alpha-list-glyph--enochian {
      font-family: var(--font-script-enochian);
      font-size: calc(24px * var(--detail-text-scale));
    }
    .alpha-enochian-glyph-img {
      display: inline-block;
      object-fit: contain;
      image-rendering: auto;
      vertical-align: middle;
      filter:
        drop-shadow(1px 0 0 rgba(255, 255, 255, 0.98))
        drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.98))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.98))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.98))
        drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.9))
        drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.9));
    }
    .alpha-enochian-glyph-img--list {
      width: 24px;
      height: 24px;
      margin: 0 auto;
    }
    .alpha-enochian-glyph-img--detail {
      width: 72px;
      height: 72px;
      filter:
        drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.82))
        drop-shadow(0 0 1.6px rgba(255, 255, 255, 0.56));
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    .alpha-list-meta strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .alpha-list-sub {
      font-size: calc(11px * var(--detail-text-scale));
      color: #71717a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .alpha-detail-glyph {
      font-size: calc(64px * var(--detail-text-scale)) !important;
      font-family: var(--font-script-display);
      color: #e0d0ff;
      line-height: 1;
      letter-spacing: 0;
    }
    .alpha-detail-glyph--arabic {
      font-family: var(--font-script-arabic);
    }
    .alpha-detail-glyph--enochian {
      font-family: var(--font-script-enochian);
    }
    .alpha-dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3px 12px;
      font-size: calc(13px * var(--detail-text-scale));
      color: #d4d4d8;
      margin: 0;
    }
    .alpha-dl dt { color: #71717a; white-space: nowrap; }

    #tarot-browse-view {
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      grid-row: 1 / -1;
    }

    #tarot-browse-view[hidden] {
      display: none !important;
    }

    #tarot-house-view {
      min-height: 0;
      height: 100%;
      overflow: auto;
      padding: 14px;
      box-sizing: border-box;
      background: #151520;
    }

    #tarot-house-view .tarot-section-house-top {
      max-height: none;
      height: auto;
      padding: 0;
      border-bottom: none;
      overflow: visible;
      background: transparent;
    }

    #tarot-house-view .tarot-house-card {
      gap: 14px;
    }

    @media (max-width: 900px) {
      #tarot-house-view {
        padding: 10px;
      }

      #tarot-house-view .tarot-house-card {
        gap: 10px;
      }

      .tarot-house-card-head {
        flex-direction: column;
        align-items: stretch;
      }

      .tarot-house-card-actions {
        display: flex;
        align-items: stretch;
        gap: 8px;
        margin-left: 0;
      }

      .tarot-house-settings-toggle,
      .tarot-house-toggle,
      .tarot-house-filter-group,
      .tarot-house-action-btn {
        width: 100%;
        box-sizing: border-box;
      }

      .tarot-house-settings-panel {
        position: static;
        width: 100%;
        max-width: 100%;
      }

      .tarot-house-filter-group {
        justify-content: flex-start;
      }

      .tarot-house-layout {
        --tarot-house-card-gap: 2px;
        --tarot-house-row-gap: 4px;
        --tarot-house-section-gap: 8px;
        --tarot-house-card-width: clamp(28px, calc((100vw - 56px) / 11), 42px);
        --tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
        width: 100%;
        max-width: 100%;
      }

      .tarot-house-trumps {
        overflow-x: visible;
      }

      .tarot-house-trump-row,
      .tarot-house-bottom-grid {
        width: 100%;
      }

      .tarot-house-bottom-grid {
        justify-content: center;
      }

      .tarot-house-card-btn.is-selected {
        transform: scale(1.08);
      }

      .tarot-house-card-label {
        left: 2px;
        right: 2px;
        bottom: 2px;
        padding: 2px 3px;
        font-size: 6.5px;
        line-height: 1.1;
      }

      .tarot-house-card-label-secondary {
        margin-top: 1px;
        font-size: 6px;
      }

      .tarot-house-card-text-face {
        gap: 3px;
        padding: 5px 4px;
      }

      .tarot-house-card-text-face.is-dense {
        gap: 2px;
        padding: 4px 3px;
      }

      .tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
        font-size: 14px;
      }

      .tarot-house-card-text-primary {
        font-size: 8px;
      }

      .tarot-house-card-text-secondary,
      .tarot-house-card-fallback {
        font-size: 6px;
      }
    }

    /* ── Tarot Spread View ─────────────────────────────── */
    #tarot-spread-view {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 1rem 1.25rem;
      min-height: 0;
      overflow-y: auto;
      grid-row: 1 / -1;
    }

    #tarot-spread-board {
      order: 2;
    }

    #tarot-spread-meanings {
      order: 3;
    }

    #tarot-spread-view[hidden] {
      display: none !important;
    }

    .tarot-spread-toolbar {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #27272a;
    }

    .tarot-spread-back-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      color: #a5b4fc;
      padding: 0.32rem 0.8rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.82rem;
      transition: background 120ms, border-color 120ms;
    }
    .tarot-spread-back-btn:hover {
      background: #1e1b4b;
      border-color: #6366f1;
    }

    .tarot-spread-type-controls {
      display: flex;
      gap: 0.35rem;
    }

    .tarot-spread-type-btn {
      background: rgba(255,255,255,0.05);
      border: 1px solid #3f3f46;
      color: #c4b5fd;
      padding: 0.32rem 0.85rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.82rem;
      transition: background 120ms, border-color 120ms, color 120ms;
    }
    .tarot-spread-type-btn:hover {
      background: #27272a;
      border-color: #6366f1;
      color: #e0e7ff;
    }
    .tarot-spread-type-btn.is-active {
      background: #312e81;
      border-color: #6366f1;
      color: #e0e7ff;
    }

    .tarot-spread-redraw-btn {
      background: #1e1b4b;
      border: 1px solid #4f46e5;
      color: #c7d2fe;
      padding: 0.32rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.82rem;
      margin-left: auto;
      transition: background 120ms, border-color 120ms;
    }

    #tarot-spread-reveal-all:disabled,
    .tarot-spread-redraw-btn:disabled {
      opacity: 0.56;
      cursor: default;
      filter: saturate(0.72);
    }
    .tarot-spread-redraw-btn:hover {
      background: #312e81;
      border-color: #6366f1;
    }

    .tarot-spread-meanings {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      align-items: start;
    }

    .tarot-spread-meaning-item {
      border: 1px solid #3f3f46;
      border-radius: 10px;
      background: #111118;
      padding: 10px;
      display: grid;
      gap: 6px;
    }

    .tarot-spread-meaning-head {
      font-size: 12px;
      line-height: 1.3;
      letter-spacing: 0.03em;
      color: #a5b4fc;
      font-weight: 700;
      text-transform: uppercase;
    }

    .tarot-spread-meaning-card {
      color: #e4e4e7;
      text-transform: none;
      font-weight: 600;
    }

    .tarot-spread-meaning-orientation {
      color: #fb7185;
      font-weight: 700;
      text-transform: none;
    }

    .tarot-spread-meaning-text {
      font-size: 13px;
      line-height: 1.45;
      color: #e4e4e7;
    }

    .tarot-spread-meaning-keywords {
      font-size: 12px;
      line-height: 1.35;
      color: #a1a1aa;
    }

    /* ── Spread Board ──────────────────────────────────── */
    .tarot-spread-board {
      --spread-card-width: 116px;
      --spread-card-height: 184px;
      display: grid;
      gap: 1rem;
      align-items: start;
      justify-items: center;
      padding: 1.1rem 1rem 1.5rem;
      border: 1px solid #27272a;
      border-radius: 18px;
      background:
        radial-gradient(circle at 20% 12%, rgba(236, 72, 153, 0.14), transparent 40%),
        radial-gradient(circle at 84% 86%, rgba(59, 130, 246, 0.14), transparent 44%),
        linear-gradient(180deg, #0f0f1d 0%, #13131f 38%, #10101a 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 30px rgba(2, 6, 23, 0.44);
    }

    .tarot-spread-board--three {
      grid-template-columns: repeat(3, var(--spread-card-width));
      justify-content: center;
      column-gap: 1.25rem;
      row-gap: 1rem;
      width: max-content;
      max-width: 100%;
      margin-inline: auto;
    }

    .tarot-spread-board--celtic {
      grid-template-areas:
        ".      crown   .         out     ."
        "past   present near-fut  hope    ."
        ".      chall   .         env     ."
        ".      found   .         self    .";
      grid-template-columns: repeat(5, var(--spread-card-width));
      justify-content: center;
      column-gap: 1rem;
      row-gap: 0.9rem;
      width: max-content;
      max-width: 100%;
      margin-inline: auto;
    }

    .tarot-spread-board--three .spread-position {
      grid-area: auto;
    }

    .tarot-spread-board--celtic .spread-position {
      grid-area: unset;
    }

    .tarot-spread-board--celtic .spread-position[data-pos="crown"]    { grid-area: crown; }
    .tarot-spread-board--celtic .spread-position[data-pos="out"]      { grid-area: out; }
    .tarot-spread-board--celtic .spread-position[data-pos="past"]     { grid-area: past; }
    .tarot-spread-board--celtic .spread-position[data-pos="present"]  { grid-area: present; }
    .tarot-spread-board--celtic .spread-position[data-pos="near-fut"] { grid-area: near-fut; }
    .tarot-spread-board--celtic .spread-position[data-pos="hope"]     { grid-area: hope; }
    .tarot-spread-board--celtic .spread-position[data-pos="chall"]    { grid-area: chall; }
    .tarot-spread-board--celtic .spread-position[data-pos="env"]      { grid-area: env; }
    .tarot-spread-board--celtic .spread-position[data-pos="found"]    { grid-area: found; }
    .tarot-spread-board--celtic .spread-position[data-pos="self"]     { grid-area: self; }

    .spread-position {
      width: var(--spread-card-width);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .spread-pos-label {
      font-size: 0.66rem;
      color: #c4b5fd;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      text-align: center;
      line-height: 1.2;
      border: 1px solid rgba(167, 139, 250, 0.45);
      border-radius: 999px;
      padding: 0.17rem 0.55rem;
      background: rgba(76, 29, 149, 0.2);
    }

    .spread-card-wrap {
      appearance: none;
      border: 1px solid rgba(168, 162, 158, 0.34);
      border-radius: 13px;
      overflow: hidden;
      background: #09090f;
      width: 100%;
      height: var(--spread-card-height);
      display: block;
      padding: 0;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    }

    .spread-card-wrap:hover {
      transform: translateY(-3px);
      border-color: rgba(196, 181, 253, 0.75);
      box-shadow: 0 14px 30px rgba(2, 6, 23, 0.65), 0 0 0 1px rgba(196, 181, 253, 0.26);
    }

    .spread-card-wrap:focus-visible {
      outline: none;
      border-color: #c4b5fd;
      box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.36), 0 10px 24px rgba(2, 6, 23, 0.56);
    }

    .spread-card-wrap.is-facedown {
      background:
        linear-gradient(150deg, rgba(190, 24, 93, 0.45), rgba(49, 46, 129, 0.55)),
        repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.08) 0,
          rgba(255, 255, 255, 0.08) 6px,
          rgba(0, 0, 0, 0.08) 6px,
          rgba(0, 0, 0, 0.08) 12px
        );
    }

    .spread-card-wrap.is-revealed.is-reversed .spread-card-img {
      transform: rotate(180deg);
    }

    .spread-card-img,
    .spread-card-back-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .spread-card-back-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      color: #e9d5ff;
      font-weight: 700;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    }

    .spread-card-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.6rem;
      font-size: 0.72rem;
      color: #e4e4e7;
      background: #18181b;
    }

    .spread-card-name {
      font-size: 0.66rem;
      color: #fda4af;
      text-align: center;
      line-height: 1.3;
      min-height: 1.2em;
      width: 100%;
    }

    .spread-reveal-hint {
      display: block;
      font-size: 0.62rem;
      color: #a1a1aa;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .spread-reversed-tag {
      display: block;
      font-size: 0.66rem;
      color: #fb7185;
      margin-top: 0.05rem;
    }

    .tarot-spread-meanings-empty {
      border: 1px dashed #3f3f46;
      border-radius: 10px;
      padding: 10px;
      color: #a1a1aa;
      font-size: 0.8rem;
      text-align: center;
      background: rgba(9, 9, 11, 0.72);
    }

    .spread-empty {
      color: #71717a;
      padding: 2.5rem;
      text-align: center;
      font-size: 0.92rem;
    }

    @media (max-width: 980px) {
      .tarot-spread-board--celtic {
        grid-template-areas:
          "crown   out"
          "past    present"
          "near-fut hope"
          "chall   env"
          "found   self";
        grid-template-columns: repeat(2, var(--spread-card-width));
        width: max-content;
        max-width: 100%;
      }
    }

    @media (max-width: 720px) {
      .tarot-spread-board {
        --spread-card-width: 106px;
        --spread-card-height: 170px;
        padding: 0.8rem 0.65rem 1rem;
      }

      .tarot-spread-board--three {
        grid-template-columns: 1fr;
        width: var(--spread-card-width);
        max-width: 100%;
      }

      .spread-position {
        width: var(--spread-card-width);
      }
    }
    .alpha-dl dd { margin: 0; }
    .alpha-dl dd .detail-inline-link {
      vertical-align: baseline;
    }
    .alpha-badge {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 9px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .alpha-badge--mother  { background: #7f1d1d; color: #fca5a5; }
    .alpha-badge--double  { background: #1e3a5f; color: #93c5fd; }
    .alpha-badge--simple  { background: #14532d; color: #86efac; }
    .alpha-badge--archaic { background: #3b2f00; color: #fcd34d; }
    .alpha-badge--solar   { background: #4a1500; color: #fdba74; }
    .alpha-badge--lunar   { background: #0f1f3d; color: #93c5fd; }
    /* Arabic letter forms display */
    .alpha-arabic-forms {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 4px;
    }
    .alpha-arabic-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      background: #18181b;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      font-size: calc(11px * var(--detail-text-scale));
      color: #71717a;
      min-width: 56px;
      text-align: center;
    }
    .alpha-arabic-glyph {
      font-family: var(--font-script-arabic);
      font-size: calc(28px * var(--detail-text-scale));
      color: #e0d0ff;
      line-height: 1.2;
      direction: rtl;
    }
    .alpha-arabic-inline {
      font-family: var(--font-script-arabic);
      font-size: calc(16px * var(--detail-text-scale));
      direction: rtl;
    }
    .alpha-nav-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .alpha-nav-btn {
      padding: 5px 10px;
      background: #1e1b4b;
      border: 1px solid #4338ca;
      border-radius: 6px;
      color: #c7d2fe;
      font-size: 12px;
      cursor: pointer;
    }
    .alpha-nav-btn:hover {
      background: #312e81;
      border-color: #818cf8;
      color: #e0e7ff;
    }
    .alpha-nav-btn--ghost {
      background: transparent;
      border-color: #3f3f46;
      color: #d4d4d8;
    }
    .alpha-nav-btn--ghost:hover {
      background: #18181b;
      border-color: #71717a;
      color: #fafafa;
    }
    .alpha-nav-btn.is-selected,
    .alpha-nav-btn[aria-pressed="true"] {
      background: #4338ca;
      border-color: #a5b4fc;
      color: #eef2ff;
    }
    .alpha-sister-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .alpha-sister-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      background: #09090b;
      border: 1px solid #27272a;
      border-radius: 8px;
      color: #d4d4d8;
      font-size: 13px;
      cursor: pointer;
      text-align: left;
    }
    .alpha-sister-btn:hover {
      background: #18181b;
      border-color: #52525b;
    }
    .alpha-sister-glyph {
      font-size: 28px;
      min-width: 36px;
      text-align: center;
      font-family: "Segoe UI", "Noto Sans Hebrew", "Noto Serif", serif;
      color: #e0d0ff;
      line-height: 1;
    }
    .alpha-sister-glyph.alpha-list-glyph--arabic {
      font-family: var(--font-script-arabic);
    }
    .alpha-sister-glyph.alpha-list-glyph--enochian {
      font-family: var(--font-script-enochian);
    }
    .alpha-enochian-glyph-img--sister {
      width: 28px;
      height: 28px;
      min-width: 36px;
      flex: 0 0 36px;
      margin: 0 4px;
    }
    .alpha-sister-name {
      font-size: calc(12px * var(--detail-text-scale));
      color: #a1a1aa;
    }

    #alphabet-text-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
      font-size: calc(13px * var(--detail-text-scale));
    }

    #alphabet-text-section[hidden] {
      display: none;
    }

    .alpha-text-controls {
      display: grid;
      gap: 10px;
    }

    .alpha-text-detail-heading {
      display: grid;
      gap: 14px;
    }

    .alpha-text-heading-main {
      display: grid;
      gap: 4px;
    }

    .alpha-text-heading-tools {
      display: grid;
      grid-template-columns: minmax(260px, 420px) minmax(320px, 1fr);
      gap: 12px;
      align-items: stretch;
    }

    .alpha-text-controls--heading {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      padding: 14px;
      border: 1px solid #2f2f39;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(12, 12, 18, 0.98));
      box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.08);
      box-sizing: border-box;
      align-content: start;
    }

    .alpha-text-search-controls {
      display: grid;
      gap: 10px;
    }

    .alpha-text-search-controls--sidebar {
      padding: 12px;
      border-bottom: 1px solid #27272a;
      background:
        linear-gradient(180deg, rgba(30, 27, 75, 0.22), rgba(16, 16, 24, 0.96));
    }

    .alpha-text-reader-toggle {
      display: flex;
      gap: 10px;
      align-items: center;
      color: #e4e4e7;
      font-size: 13px;
      line-height: 1.4;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .alpha-text-reader-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #818cf8;
      cursor: pointer;
    }

    .alpha-text-reader-toggle-control {
      min-width: 0;
    }

    .alpha-text-font-size-control {
      display: flex;
      gap: 10px;
      align-items: center;
      color: #e4e4e7;
      font-size: 13px;
      flex-wrap: wrap;
    }

    .alpha-text-font-size-control .alpha-text-select {
      width: auto;
      padding: 4px 10px;
      font-size: 12px;
    }

    .alpha-text-font-small .alpha-text-verse-text {
      font-size: 14px;
    }

    .alpha-text-font-small .alpha-text-verse-text--original {
      font-size: 16px;
    }

    .alpha-text-font-large .alpha-text-verse-text {
      font-size: 18px;
    }

    .alpha-text-font-large .alpha-text-verse-text--original {
      font-size: 22px;
    }

    .alpha-text-font-xlarge .alpha-text-verse-text {
      font-size: 21px;
    }

    .alpha-text-font-xlarge .alpha-text-verse-text--original {
      font-size: 26px;
    }

    .alpha-text-settings-popover {
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 100;
      min-width: 280px;
      max-width: 380px;
      margin-top: 6px;
    }

    .alpha-text-settings-popover[hidden] {
      display: none;
    }

    .alpha-text-settings-popover-inner {
      background: #1a1a26;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }

    .alpha-text-settings-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid #27272a;
      color: #e4e4e7;
      font-size: 13px;
    }

    .alpha-text-settings-close {
      background: none;
      border: none;
      color: #a1a1aa;
      font-size: 18px;
      cursor: pointer;
      padding: 2px 6px;
      line-height: 1;
    }

    .alpha-text-settings-close:hover {
      color: #e4e4e7;
    }

    .alpha-text-settings-popover .alpha-text-reader-toggle-list {
      padding: 10px 14px;
    }

    .alpha-text-settings-popover .alpha-text-reader-toggle {
      padding: 4px 0;
    }

    .alpha-text-search-controls--detail {
      padding: 14px;
      border: 1px solid #2f2f39;
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(12, 12, 18, 0.98));
      box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.08);
      box-sizing: border-box;
    }

    .alpha-text-search-controls--heading {
      align-content: start;
      height: 100%;
    }

    .alpha-text-search-inline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: stretch;
    }

    .alpha-text-search-submit-inline {
      min-height: 42px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .alpha-text-control {
      display: grid;
      gap: 4px;
    }

    .alpha-text-control[hidden] {
      display: none !important;
    }

    .alpha-text-control--toggle {
      align-content: start;
    }

    .alpha-text-control > span {
      color: #a1a1aa;
      font-size: 11px;
      letter-spacing: 0.02em;
    }

    .alpha-text-select {
      width: 100%;
      min-height: 42px;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }

    .alpha-text-compare-toggle {
      min-height: 42px;
      justify-content: center;
    }

    .alpha-text-search-input {
      width: 100%;
      min-height: 42px;
      padding: 9px 10px;
      border-radius: 8px;
      border: 1px solid #4338ca;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
      font-size: 13px;
    }

    .alpha-text-search-input::placeholder {
      color: #71717a;
    }

    .alpha-text-search-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .alpha-text-search-controls--sidebar .alpha-text-search-actions .alpha-nav-btn {
      flex: 1 1 0;
      min-height: 34px;
    }

    .alpha-text-search-controls--detail .alpha-text-search-actions .alpha-nav-btn {
      min-height: 34px;
      padding-inline: 12px;
    }

    .alpha-text-source-btn {
      align-items: flex-start;
    }

    .alpha-text-source-meta {
      font-size: calc(12px * var(--detail-text-scale));
      line-height: 1.4;
      color: #a1a1aa;
    }

    .alpha-text-detail-body {
      display: grid;
      gap: 12px;
      min-width: 0;
      font-size: calc(13px * var(--detail-text-scale));
    }

    .planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed {
      grid-template-columns: minmax(0, 1fr);
    }

    .planet-layout.alpha-text-global-search-only.layout-sidebar-collapsed > .planet-list-panel,
    .planet-layout.alpha-text-global-search-only > .planet-detail-panel > .alpha-text-detail-heading,
    .planet-layout.alpha-text-global-search-only .alpha-text-heading-tools,
    .planet-layout.alpha-text-global-search-only .alpha-text-controls--heading,
    .planet-layout.alpha-text-global-search-only .alpha-text-search-controls--detail {
      display: none !important;
    }

    .planet-layout.alpha-text-global-search-only > .planet-detail-panel {
      display: grid !important;
      grid-template-rows: 1fr !important;
      min-height: 0 !important;
      overflow: auto !important;
    }

    .planet-layout.alpha-text-global-search-only .alpha-text-detail-body {
      display: block !important;
      min-height: 120px !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    @media (max-width: 1040px) {
      .alpha-text-heading-tools {
        grid-template-columns: 1fr;
      }

      .alpha-text-reader-compare {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .planet-detail-heading,
      .tarot-detail-heading,
      .alpha-text-detail-heading {
        padding-right: 0;
      }

      .planet-detail-heading,
      .tarot-detail-heading {
        display: grid;
        gap: 10px;
      }

      .detail-sequence-nav {
        width: 100%;
      }

      .detail-sequence-position {
        min-width: 0;
      }

      .alpha-text-controls--heading {
        grid-template-columns: 1fr;
      }

      .alpha-text-search-inline {
        grid-template-columns: 1fr;
      }

      .tarot-detail-top {
        grid-template-columns: minmax(0, 1fr);
      }

      .tarot-detail-image {
        width: min(180px, 60vw);
        height: auto;
        aspect-ratio: 2 / 3;
        justify-self: center;
      }

      .tarot-meanings,
      .tarot-meta-grid,
      #kab-detail-body {
        grid-template-columns: 1fr;
      }
    }

    .alpha-text-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      align-items: start;
    }

    .alpha-text-extra-card {
      align-content: start;
    }

    .alpha-text-extra-group {
      display: grid;
      gap: 6px;
    }

    .alpha-text-extra-group + .alpha-text-extra-group {
      margin-top: 10px;
    }

    .alpha-text-extra-label {
      color: #a1a1aa;
      font-size: 11px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .alpha-text-extra-actions {
      margin-top: 0;
    }

    .alpha-text-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .alpha-text-reader {
      display: grid;
      gap: 0;
    }

    .alpha-text-reader-card {
      display: grid;
      gap: 0;
    }

    .alpha-text-reader-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }

    .alpha-text-reader-card--compare {
      min-width: 0;
    }

    .alpha-text-reader-navigation {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid #27272a;
    }

    .alpha-text-reader-nav-btn--next {
      margin-left: auto;
    }

    .alpha-text-search-summary {
      margin: 0 0 10px;
      color: #a1a1aa;
      font-size: calc(12px * var(--detail-text-scale));
      line-height: 1.5;
    }

    .alpha-text-search-results {
      display: grid;
      gap: 10px;
    }

    .alpha-text-search-result {
      display: grid;
      gap: 8px;
      width: 100%;
      padding: 12px;
      border: 1px solid #2f2f39;
      border-radius: 12px;
      background: #0c0c12;
      color: #f4f4f5;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
    }

    .alpha-text-search-result:hover {
      border-color: #6366f1;
      background: #131325;
    }

    .alpha-text-search-result.is-active {
      border-color: #a5b4fc;
      background: #1e1b4b;
      box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.18);
    }

    .alpha-text-search-result-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
    }

    .alpha-text-search-reference {
      color: #eef2ff;
      font-size: calc(13px * var(--detail-text-scale));
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .alpha-text-search-location {
      color: #a5b4fc;
      font-size: calc(11px * var(--detail-text-scale));
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .alpha-text-search-preview {
      margin: 0;
      color: #e4e4e7;
      font-size: calc(14px * var(--detail-text-scale));
      line-height: 1.6;
    }

    .alpha-text-mark {
      padding: 0 2px;
      border-radius: 4px;
      background: rgba(251, 191, 36, 0.24);
      color: #fef3c7;
    }

    .alpha-text-mark--lexicon {
      background: rgba(129, 140, 248, 0.28);
      color: #e0e7ff;
      box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.2);
    }

    .alpha-text-verse {
      display: grid;
      gap: 8px;
      padding: 12px 0;
      border-top: 1px solid #27272a;
    }

    .alpha-text-verse.is-highlighted {
      margin: 0 -12px;
      padding: 12px;
      border-radius: 12px;
      border-top-color: transparent;
      background: rgba(67, 56, 202, 0.18);
      box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.22);
    }

    .alpha-text-verse.is-highlighted-fresh {
      animation: alpha-text-verse-pulse 2.5s ease-out;
    }

    @keyframes alpha-text-verse-pulse {
      0% {
        background: rgba(99, 102, 241, 0.35);
        box-shadow: inset 0 0 0 2px rgba(165, 180, 252, 0.5), 0 0 24px rgba(99, 102, 241, 0.3);
      }
      60% {
        background: rgba(99, 102, 241, 0.2);
        box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.3), 0 0 8px rgba(99, 102, 241, 0.1);
      }
      100% {
        background: rgba(67, 56, 202, 0.18);
        box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.22);
      }
    }

    .alpha-text-verse:first-child {
      border-top: none;
      padding-top: 0;
    }

    .alpha-text-verse-head {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;
    }

    .alpha-text-hide-verse-heads .alpha-text-verse-head {
      display: none;
    }

    .alpha-text-verse-reference {
      color: #c4b5fd;
      font-size: calc(12px * var(--detail-text-scale));
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .alpha-text-verse-counts {
      color: #a1a1aa;
      font-size: calc(11px * var(--detail-text-scale));
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .alpha-text-verse-text {
      margin: 0;
      color: #e4e4e7;
      font-size: calc(15px * var(--detail-text-scale));
      line-height: 1.65;
    }

    .alpha-text-verse-text--original {
      color: #f5f3ff;
      font-family: var(--font-script-arabic), "Noto Serif", serif;
    }

    .alpha-text-verse-text--transliteration {
      color: #cbd5f5;
      font-style: italic;
    }

    .alpha-text-token-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .alpha-text-token {
      display: grid;
      gap: 3px;
      min-width: 96px;
      padding: 8px 10px;
      border: 1px solid #2f2f39;
      border-radius: 10px;
      background: #0c0c12;
      color: #f4f4f5;
      text-align: left;
      box-sizing: border-box;
    }

    .alpha-text-token--interactive {
      cursor: pointer;
    }

    .alpha-text-token--interactive:hover {
      background: #141427;
      border-color: #6366f1;
    }

    .alpha-text-token-gloss {
      color: #f4f4f5;
      font-size: calc(12px * var(--detail-text-scale));
      font-weight: 600;
      line-height: 1.3;
    }

    .alpha-text-token-original {
      color: #c4b5fd;
      font-size: calc(15px * var(--detail-text-scale));
      font-family: var(--font-script-display);
      line-height: 1.25;
    }

    .alpha-text-token-strongs {
      color: #a1a1aa;
      font-size: calc(10px * var(--detail-text-scale));
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .alpha-text-lexicon-term {
      display: grid;
      gap: 8px;
    }

    .alpha-text-lexicon-head {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .alpha-text-lexicon-id {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border: 1px solid #4f46e5;
      border-radius: 999px;
      background: #1e1b4b;
      color: #c7d2fe;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .alpha-text-lexicon-id--button {
      cursor: pointer;
    }

    .alpha-text-lexicon-id--button:hover {
      background: #312e81;
      border-color: #818cf8;
      color: #e0e7ff;
    }

    .alpha-text-lexicon-id--button[aria-expanded="true"] {
      background: #312e81;
      border-color: #a5b4fc;
      color: #eef2ff;
    }

    .alpha-text-lexicon-hint {
      margin: 0;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.5;
    }

    .alpha-text-lexicon-occurrences {
      display: grid;
      gap: 10px;
      padding-top: 6px;
      border-top: 1px solid #27272a;
    }

    .alpha-text-lexicon-occurrence-list {
      display: grid;
      gap: 8px;
    }

    .alpha-text-lexicon-occurrence {
      display: grid;
      gap: 6px;
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #2f2f39;
      border-radius: 10px;
      background: #0c0c12;
      color: #f4f4f5;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
    }

    .alpha-text-lexicon-occurrence:hover {
      background: #141427;
      border-color: #6366f1;
    }

    .alpha-text-search-preview--compact {
      font-size: 13px;
      line-height: 1.5;
    }

    .alpha-text-lexicon-popup {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 24px;
      box-sizing: border-box;
    }

    .alpha-text-lexicon-popup[hidden] {
      display: none;
    }

    .alpha-text-lexicon-popup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.68);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .alpha-text-lexicon-popup-card {
      position: relative;
      z-index: 1;
      width: min(720px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow: auto;
      padding: 18px;
      border: 1px solid #3f3f46;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.98));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
      box-sizing: border-box;
    }

    .alpha-text-lexicon-popup-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    .alpha-text-lexicon-popup-heading {
      display: grid;
      gap: 4px;
    }

    .alpha-text-lexicon-popup-heading h3 {
      margin: 0;
      color: #f4f4f5;
      font-size: 22px;
      line-height: 1.2;
    }

    .alpha-text-lexicon-popup-subtitle {
      margin: 0;
      color: #a1a1aa;
      font-size: 13px;
      line-height: 1.5;
    }

    .alpha-text-lexicon-popup-close {
      padding: 8px 12px;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
    }

    .alpha-text-lexicon-popup-close:hover {
      background: #27272a;
    }

    .alpha-text-lexicon-popup-body {
      display: grid;
      gap: 14px;
    }

    .alpha-text-lexicon-popup-body .alpha-dl {
      margin: 0;
    }

    .alpha-text-empty {
      color: #a1a1aa;
      font-size: 13px;
      line-height: 1.5;
    }

    @media (max-width: 720px) {
      .alpha-text-meta-grid {
        grid-template-columns: 1fr;
      }

      .alpha-text-token {
        min-width: 100%;
      }

      .alpha-text-lexicon-popup {
        padding: 16px;
      }

      .alpha-text-lexicon-popup-card {
        width: min(100vw - 20px, 100%);
        max-height: calc(100vh - 32px);
        padding: 16px;
      }

      .alpha-text-lexicon-popup-header {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* ── Zodiac section ──────────────────────────────────────────────────── */
    #zodiac-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #zodiac-section[hidden] { display: none; }

    /* ── Numbers section ────────────────────────────────────────────────── */
    #numbers-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #numbers-section[hidden] { display: none; }

    .numbers-detail-body {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .numbers-layout {
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 0;
    }

    .numbers-special-panel {
      border-bottom: 1px solid #27272a;
      background: #0f0f17;
      overflow: auto;
      min-width: 0;
      min-height: 220px;
      max-height: min(44vh, 420px);
      padding: 12px;
      box-sizing: border-box;
    }

    .numbers-main-layout {
      min-height: 0;
    }

    .numbers-main-layout .planet-detail-panel {
      min-height: 0;
      overflow: auto;
      padding: 0 14px 14px;
      box-sizing: border-box;
    }

    .numbers-detail-card {
      border: 1px solid #3f3f46;
      border-radius: 10px;
      background: #111118;
      padding: 12px;
      color: #d4d4d8;
      display: grid;
      gap: 8px;
    }

    .numbers-detail-card > strong {
      display: block;
      margin-bottom: 2px;
      color: #a1a1aa;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .numbers-detail-text {
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.4;
    }

    .numbers-detail-text--muted {
      color: #a1a1aa;
    }

    .numbers-links-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .numbers-nav-btn {
      padding: 5px 10px;
      background: #27272a;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      color: #c4b5fd;
      font-size: 12px;
      cursor: pointer;
      transition: background 100ms;
      text-align: left;
    }

    .numbers-nav-btn:hover {
      background: #3f3f46;
      border-color: #7c3aed;
    }

    .numbers-special-card-section {
      padding: 14px;
      border: 1px solid rgba(220, 182, 93, 0.2);
      background: linear-gradient(180deg, rgba(27, 23, 48, 0.5), rgba(12, 10, 25, 0.75));
      border-radius: 14px;
      display: grid;
      gap: 8px;
    }

    .numbers-special-board {
      margin-top: 2px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(220, 182, 93, 0.2);
      background: radial-gradient(circle at top, rgba(70, 58, 107, 0.25), rgba(12, 10, 24, 0.78));
    }

    .numbers-special-card {
      position: relative;
      height: 164px;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 12px;
      perspective: 900px;
    }

    .numbers-special-card:hover .numbers-special-card-inner {
      transform: translateY(-2px);
    }

    .numbers-special-card.is-flipped .numbers-special-card-inner {
      transform: rotateY(180deg);
    }

    .numbers-special-card[data-suit="hearts"] .numbers-special-card-suit,
    .numbers-special-card[data-suit="diamonds"] .numbers-special-card-suit {
      color: #f28f8f;
    }

    .numbers-special-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      transform-style: preserve-3d;
      transition: transform .24s ease;
    }

    .numbers-special-card-face {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      border: 1px solid rgba(220, 182, 93, 0.35);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #efe7d5;
      box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .numbers-special-card-face--front {
      background: linear-gradient(180deg, rgba(32, 27, 58, 0.95), rgba(14, 11, 31, 0.98));
    }

    .numbers-special-card-face--back {
      background: linear-gradient(180deg, rgba(48, 24, 24, 0.95), rgba(18, 11, 11, 0.98));
      border-color: rgba(255, 143, 122, 0.45);
      transform: rotateY(180deg);
    }

    .numbers-special-card-tag {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #cbb9b4;
    }

    .numbers-special-card-rank {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: center;
    }

    .numbers-special-card-suit {
      font-size: 1.5rem;
      line-height: 1;
    }

    .numbers-special-card-meta {
      font-size: 0.72rem;
      color: #bdb5cd;
      text-align: center;
      padding: 0 10px;
    }

    .numbers-theory-card {
      gap: 10px;
    }

    .numbers-theory-controls {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .numbers-theory-input {
      width: 100%;
      min-height: 32px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #141420;
      color: #e4e4e7;
      padding: 6px 10px;
      font-size: 13px;
      outline: none;
      box-sizing: border-box;
    }

    .numbers-theory-input:focus {
      border-color: #7c3aed;
      box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25);
    }

    .numbers-theory-output {
      display: grid;
      gap: 10px;
    }

    .numbers-theory-section {
      border: 1px solid #2f2f37;
      border-radius: 10px;
      background: #0f0f16;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .numbers-theory-section-heading {
      margin: 0;
      color: #d4d4d8;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .numbers-theory-grid {
      display: grid;
      grid-template-columns: minmax(140px, 210px) minmax(0, 1fr);
      gap: 6px 10px;
      align-items: start;
    }

    .numbers-theory-label {
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 600;
    }

    .numbers-theory-value {
      color: #e4e4e7;
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    @media (max-width: 980px) {
      .numbers-theory-controls {
        grid-template-columns: 1fr;
      }

      .numbers-theory-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── Gods section ────────────────────────────────────────────────────── */
    #gods-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #gods-section[hidden] { display: none; }

    /* ── Enochian section ────────────────────────────────────────────────── */
    #enochian-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #enochian-section[hidden] { display: none; }

    /* ── Elements section ───────────────────────────────────────────────── */
    #elements-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #elements-section[hidden] { display: none; }

    /* ── Audio Notes section ─────────────────────────────────────────────── */
    #audio-notes-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #audio-notes-section[hidden] { display: none; }

    #audio-circle-section {
      height: calc(100vh - 61px);
      background: #18181b;
      box-sizing: border-box;
      overflow: hidden;
    }
    #audio-circle-section[hidden] { display: none; }

    .audio-circle-layout {
      height: 100%;
      display: grid;
      grid-template-columns: minmax(340px, 1.1fr) minmax(320px, 0.9fr);
      min-height: 0;
      background: #18181b;
    }

    .audio-circle-stage-panel {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 0;
      min-height: 0;
      border-right: 1px solid #27272a;
      overflow: auto;
    }

    .audio-circle-intro {
      padding: 10px 12px 0;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.5;
    }

    .audio-circle-stage {
      position: relative;
      min-height: 620px;
      padding: 24px;
      box-sizing: border-box;
      background:
        radial-gradient(circle at center, rgba(99, 102, 241, 0.08), transparent 46%),
        linear-gradient(180deg, rgba(15, 15, 23, 0.98), rgba(10, 10, 16, 0.98));
    }

    .audio-circle-shell {
      position: relative;
      width: min(78vw, 560px);
      height: min(78vw, 560px);
      min-width: 280px;
      min-height: 280px;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      border-radius: 50%;
      border: 1px solid rgba(99, 102, 241, 0.3);
      background:
        radial-gradient(circle at center, rgba(12, 12, 18, 0.98) 0, rgba(12, 12, 18, 0.98) 24%, rgba(39, 39, 42, 0.24) 24.4%, rgba(39, 39, 42, 0.24) 54%, rgba(15, 15, 23, 0.98) 54.4%, rgba(15, 15, 23, 0.98) 100%);
      box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.08), 0 24px 50px rgba(0, 0, 0, 0.35);
    }

    .audio-circle-center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 34%;
      height: 34%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(99, 102, 241, 0.24);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 14px;
      box-sizing: border-box;
      background: linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(10, 10, 16, 0.98));
    }

    .audio-circle-center-label {
      color: #f4f4f5;
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 700;
      line-height: 1;
    }

    .audio-circle-center-sub {
      color: #a1a1aa;
      font-size: 11px;
      line-height: 1.35;
      margin-top: 6px;
    }

    .audio-circle-key {
      position: absolute;
      width: 88px;
      min-height: 64px;
      padding: 10px 8px;
      border-radius: 16px;
      border: 1px solid #3f3f46;
      background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(12, 12, 18, 0.98));
      color: #f4f4f5;
      cursor: pointer;
      display: grid;
      gap: 4px;
      justify-items: center;
      box-sizing: border-box;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    }

    .audio-circle-key:hover {
      transform: translate(-50%, -50%) scale(1.03);
      border-color: #818cf8;
      background: linear-gradient(180deg, rgba(49, 46, 129, 0.26), rgba(12, 12, 18, 0.98));
    }

    .audio-circle-key.is-selected,
    .audio-circle-key[aria-pressed="true"] {
      border-color: #a5b4fc;
      background: linear-gradient(180deg, rgba(67, 56, 202, 0.46), rgba(18, 18, 30, 0.98));
      box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.22), 0 14px 24px rgba(0, 0, 0, 0.34);
    }

    .audio-circle-key-major {
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    .audio-circle-key-minor {
      color: #c7d2fe;
      font-size: 11px;
      line-height: 1.2;
    }

    .audio-circle-key-meta {
      color: #71717a;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.1;
    }

    .audio-circle-detail-panel {
      min-height: 0;
      overflow: auto;
      padding: 0 14px 14px;
      box-sizing: border-box;
    }

    .audio-circle-detail-stack {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .audio-circle-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .audio-circle-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #d4d4d8;
      font-size: 11px;
      line-height: 1;
    }

    .audio-circle-chip--active {
      border-color: #4338ca;
      background: rgba(67, 56, 202, 0.18);
      color: #c7d2fe;
    }

    .audio-circle-copy {
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.58;
    }

    .audio-circle-nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
    }

    .audio-circle-nav-card {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid #2f2f39;
      border-radius: 10px;
      background: #0c0c12;
    }

    .audio-circle-nav-label {
      color: #a1a1aa;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .audio-circle-nav-value {
      color: #f4f4f5;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
    }

    .audio-circle-nav-sub {
      color: #c7d2fe;
      font-size: 11px;
    }

    @media (max-width: 1040px) {
      .audio-circle-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .audio-circle-stage-panel {
        border-right: 0;
        border-bottom: 1px solid #27272a;
      }
    }

    @media (max-width: 720px) {
      .audio-circle-stage {
        min-height: 500px;
        padding: 18px 12px;
      }

      .audio-circle-shell {
        width: min(92vw, 420px);
        height: min(92vw, 420px);
      }

      .audio-circle-key {
        width: 68px;
        min-height: 52px;
        padding: 8px 6px;
        border-radius: 12px;
      }

      .audio-circle-key-major {
        font-size: 16px;
      }

      .audio-circle-key-minor,
      .audio-circle-key-meta {
        font-size: 9px;
      }
    }

    .audio-note-intro {
      padding: 10px 12px 0;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.5;
    }

    .audio-note-detail-stack {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .audio-note-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .audio-note-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #d4d4d8;
      font-size: 11px;
      line-height: 1;
    }

    .audio-note-chip--natural {
      border-color: #365314;
      background: rgba(22, 101, 52, 0.16);
      color: #bbf7d0;
    }

    .audio-note-chip--accidental {
      border-color: #4338ca;
      background: rgba(67, 56, 202, 0.18);
      color: #c7d2fe;
    }

    .audio-note-copy {
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.58;
    }

    .audio-note-formula {
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.58;
    }

    .audio-note-playback-copy {
      color: #d4d4d8;
      font-size: 13px;
      line-height: 1.58;
    }

    .audio-note-playback-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .audio-note-playback-btn {
      min-height: 38px;
    }

    .audio-note-frequency-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 8px;
    }

    .audio-note-frequency-cell {
      display: grid;
      gap: 4px;
      padding: 10px;
      border: 1px solid #2f2f39;
      border-radius: 10px;
      background: #0c0c12;
    }

    .audio-note-frequency-cell--button {
      width: 100%;
      text-align: left;
      cursor: pointer;
      transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    }

    .audio-note-frequency-cell--button:hover {
      border-color: #6366f1;
      background: #121224;
      transform: translateY(-1px);
    }

    .audio-note-frequency-cell--button.is-playing,
    .audio-note-frequency-cell--button[aria-pressed="true"] {
      border-color: #a5b4fc;
      background: linear-gradient(180deg, rgba(49, 46, 129, 0.42), rgba(12, 12, 18, 0.98));
      box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.26);
    }

    .audio-note-frequency-label {
      color: #a1a1aa;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .audio-note-frequency-value {
      color: #f4f4f5;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
    }

    .audio-note-frequency-meta {
      color: #71717a;
      font-size: 11px;
    }

    .audio-note-frequency-status {
      color: #c7d2fe;
      font-size: 11px;
      font-weight: 600;
    }

    @media (max-width: 720px) {
      .audio-note-frequency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .enoch-list-item {
      width: 100%;
      text-align: left;
      display: grid;
      gap: 3px;
      padding: 9px 10px;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      background: #18181b;
      color: #f4f4f5;
      cursor: pointer;
    }
    .enoch-list-item:hover,
    .enoch-list-item.is-selected {
      background: #27272a;
      border-color: #7060b0;
    }
    .enoch-list-name {
      font-size: 13px;
      font-weight: 600;
    }
    .enoch-list-meta {
      font-size: 12px;
      color: #a1a1aa;
    }

    .enoch-grid {
      display: grid;
      gap: 4px;
      overflow: auto;
      max-width: 100%;
      padding: 4px 2px 2px;
    }
    .enoch-grid-row {
      display: flex;
      gap: 4px;
      width: max-content;
    }
    .enoch-grid-cell {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #111118;
      color: #f4f4f5;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
    }
    .enoch-grid-cell:hover {
      border-color: #7060b0;
      background: #27272a;
    }
    .enoch-grid-cell.is-selected {
      border-color: #7c3aed;
      box-shadow: 0 0 0 1px #7c3aed;
      background: #2a1f3d;
    }

    .enoch-letter-meta {
      display: grid;
      gap: 6px;
      font-size: 13px;
      color: #d4d4d8;
    }
    .enoch-letter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .enoch-letter-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      border: 1px solid #52525b;
      border-radius: 999px;
      background: #111118;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      color: #f4f4f5;
      padding: 0 8px;
      box-sizing: border-box;
    }

    .enoch-nav-btn {
      padding: 5px 8px;
      border: 1px solid #3f3f46;
      border-radius: 7px;
      background: #27272a;
      color: #d4d4d8;
      cursor: pointer;
      font-size: 12px;
    }
    .enoch-nav-btn:hover {
      background: #3f3f46;
      border-color: #7060b0;
      color: #f4f4f5;
    }

    .gods-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px 12px;
      border-bottom: 1px solid #27272a;
    }
    .gods-tab-btn {
      padding: 4px 9px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #a1a1aa;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 120ms, color 120ms;
    }
    .gods-tab-btn:hover  { background: #3f3f46; color: #f4f4f5; }
    .gods-tab-active { background: #4c1d95; border-color: #7c3aed; color: #e9d5ff !important; }

    .gods-list-item {
      padding: 9px 12px;
      border-bottom: 1px solid #27272a;
      cursor: pointer;
      transition: background 100ms;
    }
    .gods-list-item:hover  { background: #27272a; }
    .gods-list-active { background: #1e1b4b !important; border-left: 3px solid #6d28d9; }
    .gods-list-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .gods-list-label {
      font-size: 13px;
      font-weight: 600;
      color: #f4f4f5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .gods-list-tag {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 9px;
      background: #27272a;
      color: #71717a;
      white-space: nowrap;
    }
    .gods-list-sub {
      font-size: 12px;
      color: #a1a1aa;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .gods-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
      padding: 14px;
    }
    .gods-card {
      background: #1c1c24;
      border: 1px solid #3f3f46;
      border-radius: 10px;
      padding: 12px 14px;
    }
    .gods-card--greek   { border-color: #7c3aed; }
    .gods-card--roman   { border-color: #9a3412; }
    .gods-card--egyptian { border-color: #92400e; }
    .gods-card--elohim  { border-color: #1d4ed8; }
    .gods-card--angel   { border-color: #065f46; }
    .gods-card--wide    { grid-column: 1 / -1; }
    .gods-card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #71717a;
      margin-bottom: 8px;
    }
    .gods-card-body {
      font-size: 15px;
      color: #f4f4f5;
      line-height: 1.4;
    }
    .gods-equivalent-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .gods-equivalent-link,
    .gods-equivalent-text {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid #3f3f46;
      background: #27272a;
    }
    .gods-equivalent-link {
      color: #c4b5fd;
      cursor: pointer;
      transition: background 100ms;
    }
    .gods-equivalent-link:hover {
      background: #3f3f46;
      border-color: #7c3aed;
    }
    .gods-equivalent-text {
      color: #a1a1aa;
    }
    .gods-card-row {
      font-size: 13px;
      color: #d4d4d8;
      margin-bottom: 4px;
    }
    .gods-field-label {
      font-size: 11px;
      color: #71717a;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-right: 6px;
    }
    .gods-hebrew {
      font-family: 'Segoe UI', 'Noto Sans Hebrew', serif;
      font-size: 22px;
      color: #e0d0ff;
      margin-right: 8px;
      vertical-align: middle;
    }
    .gods-transliteration {
      font-size: 15px;
      color: #f4f4f5;
      font-weight: 600;
      vertical-align: middle;
    }
    .gods-nav-row {
      margin-top: 10px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .gods-nav-btn {
      padding: 5px 10px;
      background: #27272a;
      border: 1px solid #3f3f46;
      border-radius: 6px;
      color: #c4b5fd;
      font-size: 12px;
      cursor: pointer;
      transition: background 100ms;
    }
    .gods-nav-btn:hover { background: #3f3f46; border-color: #7c3aed; }

    .gods-domain-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }
    .gods-domain-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 12px;
      background: #27272a;
      border: 1px solid #3f3f46;
      color: #a1a1aa;
    }
    .gods-card--kab {
      border-color: #064e3b;
      background: #022c22;
    }

    .zod-list-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .zod-list-symbol {
      font-size: 22px;
      min-width: 28px;
      text-align: center;
      line-height: 1;
    }
    .zod-list-elem {
      margin-left: auto;
      font-size: 14px;
    }
    .zod-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 9px;
      font-size: 11px;
      font-weight: 600;
    }
    .zod-badge--fire  { background: #7f1d1d; color: #fca5a5; }
    .zod-badge--earth { background: #14532d; color: #86efac; }
    .zod-badge--air   { background: #1e3a5f; color: #93c5fd; }
    .zod-badge--water { background: #1a1a5e; color: #a5b4fc; }
    .zod-badge--quad  { background: #27272a; color: #d4d4d8; }
    .zod-hebrew-glyph {
      font-size: 48px;
      font-family: "Segoe UI", "Noto Sans Hebrew", "Noto Serif", serif;
      color: #e0d0ff;
      line-height: 1;
    }
    .zod-detail-name {
      font-size: 52px;
      font-family: "Segoe UI", "Noto Serif", serif;
    }
    .zod-decan-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid #27272a;
      font-size: 13px;
    }
    .zod-decan-row:last-child { border-bottom: none; }
    .zod-decan-ord    { font-weight: 600; min-width: 30px; color: #a1a1aa; }
    .zod-decan-planet { min-width: 80px; color: #d4d4d8; }
    .zod-decan-card-btn {
      margin-left: auto;
      padding: 3px 8px;
      background: #1e1b4b;
      border: 1px solid #4338ca;
      border-radius: 6px;
      color: #c7d2fe;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
    }
    .zod-decan-card-btn:hover { background: #312e81; border-color: #818cf8; color: #e0e7ff; }
    .zod-tetra {
      font-family: "Segoe UI", "Noto Sans Hebrew", serif;
      font-size: 15px;
      letter-spacing: 2px;
      color: #e0d0ff;
    }

    .settings-popup {
      position: fixed;
      top: 62px;
      right: 16px;
      z-index: 30;
    }
    .settings-popup[hidden] {
      display: none;
    }
    .settings-popup-card {
      width: min(420px, calc(100vw - 32px));
      background: #18181b;
      border: 1px solid #3f3f46;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
      box-sizing: border-box;
    }
    .settings-popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
      color: #d4d4d8;
    }
    .settings-field-full {
      grid-column: 1 / -1;
    }
    .settings-field input:not([type="range"]),
    .settings-field select {
      width: 100%;
      padding: 7px 8px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #09090b;
      color: #f4f4f5;
      box-sizing: border-box;
    }
    .settings-field input[type="password"] {
      letter-spacing: 0.04em;
    }
    .settings-toggle-field {
      gap: 8px;
    }
    .settings-toggle-row {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid #3f3f46;
      border-radius: 8px;
      background: #09090b;
      color: #f4f4f5;
    }
    .settings-toggle-row input {
      width: auto;
      margin: 0;
      accent-color: #f4f4f5;
    }
    .settings-toggle-row:has(input:disabled) {
      opacity: 0.6;
    }
    .settings-range-field {
      gap: 8px;
    }
    .settings-range-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .settings-range-input {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      accent-color: #818cf8;
    }
    .settings-range-value {
      min-width: 52px;
      text-align: right;
      font-size: 13px;
      color: #e0e7ff;
      font-variant-numeric: tabular-nums;
    }
    .settings-field-hint {
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.4;
    }
    .settings-cache-status {
      min-height: 1.4em;
    }
    .settings-actions {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    .settings-actions button,
    .settings-popup-header button {
      padding: 7px 12px;
      border-radius: 6px;
      border: 1px solid #3f3f46;
      background: #27272a;
      color: #f4f4f5;
      cursor: pointer;
    }
    .settings-actions button:hover,
    .settings-popup-header button:hover {
      background: #3f3f46;
    }
    @media (max-width: 800px) {
      .settings-page-hero {
        flex-direction: column;
      }
      .settings-page-layout {
        grid-template-columns: minmax(0, 1fr);
      }
      .settings-panel-wide {
        grid-column: auto;
      }
    }
    @media (max-width: 640px) {
      .connection-gate {
        padding: 16px;
      }
      .connection-gate-card {
        padding: 18px;
      }
      .connection-gate-title {
        font-size: 24px;
      }
      .connection-gate-actions {
        justify-content: stretch;
      }
      .connection-gate-actions button {
        flex: 1 1 100%;
      }
    }
    #month-strip {
      height: 28px;
      background: #18181b;
      border-bottom: 1px solid #27272a;
      box-sizing: border-box;
      overflow: hidden;
      padding-left: 0;
      padding-right: 0;
    }
    #month-strip .month-strip-track {
      height: 100%;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    #month-strip .month-strip-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      color: #e5e7eb;
      letter-spacing: 0.01em;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: uppercase;
    }
    #month-strip .month-strip-segment:first-child {
      border-left: 0;
    }
    #now-panel {
      --now-square-size: min(85vmin, calc(100vw - 172px), calc(100svh - 92px));
        --now-sky-width: max(calc(var(--now-square-size) * 3.25), calc(100% + 420px));
        --now-sky-height: max(calc(var(--now-square-size) * 2.28), calc(100% + 250px));
        --now-sky-top: 50.5%;
        --now-sky-left: 44%;
      position: relative;
      overflow: hidden;
      height: calc(100svh - 88px);
      min-height: calc(100svh - 88px);
      padding: 10px clamp(68px, 14vw, 220px);
      background: #090c16;
      border-bottom: 1px solid #27272a;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    #now-panel[hidden] {
      display: none !important;
    }

    #now-sky-layer {
      position: absolute;
      width: var(--now-sky-width);
      height: var(--now-sky-height);
      top: var(--now-sky-top);
      left: var(--now-sky-left);
      transform: translate(-50%, -50%);
      transform-origin: center center;
      z-index: 0;
      pointer-events: none;
      opacity: 1;
      border: none;
      filter: saturate(1.04);
      background-color: #000;
    }
    #now-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 57%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(7, 11, 24, 0) 48%),
        radial-gradient(circle at 50% 57%, rgba(6, 10, 22, 0) 0%, rgba(6, 10, 22, 0) 38%, rgba(6, 10, 22, 0.38) 72%, rgba(3, 5, 12, 0.66) 100%);
    }
    #now-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(180deg, rgba(3, 5, 12, 0.34) 0%, rgba(3, 5, 12, 0.08) 20%, rgba(3, 5, 12, 0.18) 100%);
      pointer-events: none;
    }
    #now-panel.is-overlay-hidden::before,
    #now-panel.is-overlay-hidden::after {
      opacity: 0;
    }
    #now-panel.is-sky-disabled #now-sky-layer {
      opacity: 0;
    }
    #now-panel.is-sky-disabled::before,
    #now-panel.is-sky-disabled::after {
      opacity: 0;
    }
    .now-panel-controls {
      position: absolute;
      top: 14px;
      right: clamp(18px, 4vw, 44px);
      z-index: 5;
      display: flex;
      justify-content: flex-end;
    }
    .now-panel-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.82);
      color: #f8fafc;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      -webkit-user-select: none;
      user-select: none;
    }
    .now-panel-toggle input {
      margin: 0;
      accent-color: #ffffff;
    }
    .now-panel-square {
      position: relative;
      z-index: 3;
      box-sizing: border-box;
      width: var(--now-square-size);
      max-width: 780px;
      aspect-ratio: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr);
      gap: clamp(8px, 1.3vmin, 14px);
      padding: clamp(18px, 2.6vmin, 28px) clamp(12px, 1.8vmin, 18px) clamp(14px, 2vmin, 20px);
      border-radius: 28px;
      background: #000000;
      border: 2px solid rgba(255, 255, 255, 0.88);
      box-shadow: none;
      overflow: hidden;
    }
    #now-panel.is-overlay-hidden .now-panel-square {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
      @media (max-width: 760px) {
        #now-panel {
          --now-square-size: min(88vw, calc(100svh - 150px), 560px);
          --now-sky-width: max(198vw, calc(100% + 140px));
          --now-sky-height: max(126svh, calc(100% + 120px));
          --now-sky-top: 50.5%;
          --now-sky-left: 46%;
          padding: 12px clamp(12px, 4vw, 24px) 16px;
        }

        #now-sky-layer {
          filter: saturate(1.02);
        }

        .now-panel-controls {
          top: 12px;
          right: 12px;
        }
      }

      @media (max-width: 480px) {
        #now-panel {
          --now-square-size: min(90vw, calc(100svh - 158px), 480px);
          --now-sky-width: max(214vw, calc(100% + 96px));
          --now-sky-height: max(132svh, calc(100% + 96px));
          --now-sky-left: 45%;
        }
      }
    .now-section {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 0;
      box-sizing: border-box;
      padding: clamp(8px, 1.3vmin, 12px) clamp(8px, 1.4vmin, 12px) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      border-radius: 0;
      overflow: hidden;
      isolation: isolate;
      border: 0;
      box-shadow: none;
      transition: color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }
    .now-section::before {
      display: none;
    }
    .now-section > * {
      position: relative;
      z-index: 1;
    }
    .now-section-hour {
      grid-area: 1 / 1;
    }
    .now-section-moon {
      grid-area: 1 / 2;
    }
    .now-section-decan {
      grid-area: 1 / 3;
    }
    #now-panel.is-day .now-section {
      color: #f8fafc;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    #now-panel.is-day .now-section::before {
      display: none;
    }
    #now-panel.is-night .now-section {
      color: #f8fafc;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    #now-panel.is-day .now-title,
    #now-panel.is-day .now-tarot,
    #now-panel.is-day .now-countdown-row,
    #now-panel.is-day .now-countdown-next,
    #now-panel.is-day .now-countdown-value,
    #now-panel.is-day .now-primary {
      color: #f8fafc;
      text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
    }
    #now-panel.is-day .now-primary-hour {
      color: #581c87;
    }
    #now-panel.is-day .now-primary-moon {
      color: #78350f;
    }
    #now-panel.is-day .now-primary-decan {
      color: #9a3412;
    }
    #now-panel.is-night .now-title,
    #now-panel.is-night .now-tarot,
    #now-panel.is-night .now-countdown-row,
    #now-panel.is-night .now-countdown-next,
    #now-panel.is-night .now-countdown-value,
    #now-panel.is-night .now-primary,
    #now-panel.is-night .now-primary-hour,
    #now-panel.is-night .now-primary-moon,
    #now-panel.is-night .now-primary-decan {
      color: #f8fafc;
      text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
    }
    .now-card {
      margin: 2px 0 6px 0;
      width: min(64%, 144px);
      height: auto;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid #3f3f46;
      display: none;
    }
    #now-panel.is-day .now-card {
      border-color: rgba(17, 24, 39, 0.32);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
    }
    #now-panel.is-night .now-card {
      border-color: rgba(226, 232, 240, 0.36);
      box-shadow: 0 10px 22px rgba(2, 6, 23, 0.58);
    }
    .now-countdown-row {
      margin-top: 2px;
      width: min(100%, 220px);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 6px;
      align-items: center;
      color: #cbd5e1;
      font-size: 14px;
      line-height: 1.18;
      text-align: left;
    }
    .now-countdown-value {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .now-countdown-next {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .now-title {
      font-size: 12px;
      color: #cbd5e1;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.12;
      margin-bottom: 0;
    }
    .now-stats-section {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      grid-row: 2;
      min-width: 0;
      min-height: 0;
      border-radius: 0;
      padding: clamp(8px, 1.25vmin, 12px) clamp(12px, 1.8vmin, 18px) 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      gap: 4px;
      overflow: auto;
    }
    .now-stats-title {
      font-size: 14px;
      line-height: 1.08;
      color: #e2e8f0;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 700;
    }
    .now-stats-sabian {
      font-size: clamp(13px, 1.75vmin, 16px);
      font-weight: 500;
      line-height: 1.42;
      color: #f8fafc;
      white-space: normal;
      overflow: visible;
      max-height: none;
    }
    .now-stats-planets {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 14px;
      font-size: clamp(12px, 1.6vmin, 14px);
      line-height: 1.24;
      color: #e2e8f0;
      align-content: start;
      align-items: start;
      min-height: 0;
      overflow: visible;
    }
    .now-stats-planet {
      min-width: 0;
      display: grid;
      gap: 2px;
      align-content: start;
      text-align: left;
    }
    .now-stats-planet-sign {
      font-size: 0.84em;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: inherit;
    }
    .now-stats-planet-list {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .now-stats-planet-entry {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      line-height: 1.28;
      font-variant-numeric: tabular-nums;
    }
    #now-panel.is-day .now-stats-section {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    #now-panel.is-day .now-stats-title {
      color: #e2e8f0;
      text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
    }
    #now-panel.is-day .now-stats-sabian,
    #now-panel.is-day .now-stats-planets {
      color: #f8fafc;
      text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
    }
    #now-panel.is-night .now-stats-title,
    #now-panel.is-night .now-stats-sabian,
    #now-panel.is-night .now-stats-planets {
      text-shadow: 0 1px 3px rgba(2, 6, 23, 0.75);
    }
    .now-primary {
      font-size: clamp(16px, 2.4vmin, 24px);
      font-weight: 600;
      line-height: 1.15;
    }
    .now-primary-hour {
      color: #a855f7;
    }
    .now-primary-moon {
      color: #fbbf24;
    }
    .now-primary-decan {
      color: #f97316;
    }
    .now-tarot {
      font-size: clamp(12px, 1.7vmin, 16px);
      color: #d4d4d8;
      line-height: 1.12;
      margin-top: 1px;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time {
      font-size: 12px;
      font-weight: 700;
      color: #ffffff !important;
      width: 52px;
      height: 52px;
      line-height: 1;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      padding: 0;
      right: 0;
      background: transparent;
      box-shadow: none;
      text-shadow: none;
      z-index: 5;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-chip {
      width: auto;
      height: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      line-height: 1;
      border: none;
      background: transparent;
      box-shadow: none;
      text-shadow: none;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-icon {
      font-size: 34px;
      line-height: 1;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .now-celestial-value {
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.01em;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time.is-sun .now-celestial-chip {
      color: #facc15;
      filter: drop-shadow(0 0 var(--sun-glow-size, 10px) rgba(250, 204, 21, var(--sun-glow-alpha, 0.75)));
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time.is-moon .now-celestial-chip {
      color: #e2e8f0;
      filter: drop-shadow(0 0 8px rgba(148, 163, 184, var(--moon-glow-alpha, 0.5)));
    }

    .toastui-calendar-timegrid-time-column {
      transition: background-image 400ms ease;
    }

    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time .toastui-calendar-timegrid-time-label,
    .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time span {
      color: #ffffff !important;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
    }

    :root {
      --week-col-1: #727781;
      --week-col-2: #7f8490;
      --week-col-3: #8d93a0;
      --week-col-4: #9aa1ad;
      --week-col-5: #aab1bd;
      --week-col-6: #c0c7d2;
      --week-col-7: #d7dee8;
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(1),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(1),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(1),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(1) {
      background-color: var(--week-col-1);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(2),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(2),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(2),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(2) {
      background-color: var(--week-col-2);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(3),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(3),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(3),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(3) {
      background-color: var(--week-col-3);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(4),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(4),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(4),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(4) {
      background-color: var(--week-col-4);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(5),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(5),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(5),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(5) {
      background-color: var(--week-col-5);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(6),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(6),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(6),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(6) {
      background-color: var(--week-col-6);
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(7),
    .toastui-calendar-week-view .toastui-calendar-weekday-grid .toastui-calendar-daygrid-cell:nth-child(7),
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-daygrid-cell:nth-child(7),
    .toastui-calendar-week-view .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column:nth-child(7) {
      background-color: var(--week-col-7);
    }

    .toastui-calendar-panel.toastui-calendar-allday,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid-wrapper,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-allday-panel,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-event-wrapper {
      background: transparent !important;
    }

    .toastui-calendar-week-view .toastui-calendar-panel.toastui-calendar-allday,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-event-wrapper {
      overflow-y: hidden !important;
    }

    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid {
      background: transparent !important;
      background-image: none !important;
    }

    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(1) { background-color: var(--week-col-1) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(2) { background-color: var(--week-col-2) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(3) { background-color: var(--week-col-3) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(4) { background-color: var(--week-col-4) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(5) { background-color: var(--week-col-5) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(6) { background-color: var(--week-col-6) !important; background-image: none !important; border-right: 0 !important; }
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid:nth-child(7) { background-color: var(--week-col-7) !important; background-image: none !important; border-right: 0 !important; }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+4) .toastui-calendar-day-name__date,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+4) .toastui-calendar-day-name__name {
      color: #e5e7eb;
    }

    .toastui-calendar-panel.toastui-calendar-week-view-day-names {
      height: 52px !important;
      overflow-y: hidden !important;
      overflow-x: hidden !important;
    }

    .toastui-calendar-day-names.toastui-calendar-week {
      height: 52px;
    }

    .toastui-calendar-day-name-item.toastui-calendar-week {
      height: 52px;
      line-height: 1;
      padding: 0 6px;
    }

    .weekday-header-template {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      text-align: center;
    }

    .weekday-header-number {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }

    .weekday-header-name {
      font-size: 10px;
      line-height: 1;
    }

    .weekday-header-ruler {
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-number,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-name,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(-n+5) .weekday-header-ruler {
      color: #e5e7eb;
    }

    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-number,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-name,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week:nth-child(n+6) .weekday-header-ruler {
      color: #1f2937;
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-today,
    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-right {
      height: 4px;
      margin-top: -2px;
      border-top: none !important;
      background-image: linear-gradient(
        90deg,
        #ef4444 0%,
        #f97316 16.6%,
        #facc15 33.2%,
        #22c55e 49.8%,
        #3b82f6 66.4%,
        #a855f7 83%,
        #ec4899 100%
      );
      background-size: 320px 100%;
      -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
      mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
      opacity: 0.95;
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-left {
      height: 4px;
      margin-top: -2px;
      border-top: none !important;
      background: #ffffff;
      -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
      mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
      opacity: 0.98;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker {
      position: absolute;
      width: 44px !important;
      height: 44px !important;
      margin: -22px 0 0 -22px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle at 30% 30%, #fff7c2 0%, #facc15 55%, #f59e0b 100%) !important;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 0 var(--sun-marker-glow-size, 16px) rgba(250, 204, 21, 0.7);
      z-index: 6;
      overflow: visible;
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker.is-moon {
      background: radial-gradient(circle at 35% 30%, #64748b 0%, #1e293b 62%, #020617 100%) !important;
      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35), 0 0 12px rgba(148, 163, 184, var(--moon-glow-alpha, 0.45));
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: repeating-conic-gradient(
        from 0deg,
        rgba(251, 191, 36, 0.9) 0deg 10deg,
        transparent 10deg 30deg
      );
      -webkit-mask-image: radial-gradient(circle, transparent 0 47%, #000 47% 62%, transparent 62% 100%);
      mask-image: radial-gradient(circle, transparent 0 47%, #000 47% 62%, transparent 62% 100%);
      pointer-events: none;
      opacity: var(--sun-marker-ray-opacity, 0.9);
    }

    .toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker.is-moon::before {
      opacity: 0;
    }

    .toastui-calendar-layout.toastui-calendar-week-view {
      height: 100% !important;
      min-height: 0;
      display: grid;
      grid-template-rows: 52px minmax(0, 1fr);
    }

    .toastui-calendar-layout.toastui-calendar-week-view > .toastui-calendar-panel.toastui-calendar-allday,
    .toastui-calendar-layout.toastui-calendar-week-view > :has(> .toastui-calendar-panel-resizer) {
      display: none !important;
    }

    .toastui-calendar-allday-panel,
    .toastui-calendar-panel.toastui-calendar-allday,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid-wrapper,
    .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-allday-events {
      display: none !important;
    }

    .toastui-calendar-layout.toastui-calendar-week-view > .toastui-calendar-panel.toastui-calendar-time {
      grid-row: 2;
      height: auto !important;
      min-height: 0;
      overflow: hidden !important;
    }

    .toastui-calendar-timegrid,
    .toastui-calendar-timegrid-scroll-area {
      height: 100% !important;
      min-height: 0 !important;
    }

    .toastui-calendar-event-time {
      cursor: default !important;
      min-height: 42px;
      border-radius: 0 !important;
      border-width: 0 !important;
    }

    .toastui-calendar-event-time .toastui-calendar-event-time-content {
      white-space: pre-line;
      line-height: 1.2;
      font-size: 11px;
      padding: 0 !important;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .toastui-calendar-panel-event-wrapper .toastui-calendar-weekday-event {
      cursor: default !important;
      margin: 0 !important;
      border-left-width: 0 !important;
      border-radius: 0 !important;
    }

    .toastui-calendar-weekday-event-title {
      padding-left: 0 !important;
    }

    .toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell,
    .toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column + .toastui-calendar-column,
    .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week + .toastui-calendar-day-name-item.toastui-calendar-week {
      border-left: 0 !important;
    }

    .toastui-calendar-column .toastui-calendar-events {
      margin-right: 0 !important;
    }

    .toastui-calendar-resize-handler-x,
    .toastui-calendar-weekday-resize-handle {
      display: none !important;
    }

    @media (max-width: 900px) {
      #now-panel {
        --now-square-size: min(calc(100vw - 110px), calc(100svh - 94px));
        padding: 8px clamp(30px, 8vw, 82px);
      }
      .now-panel-square {
        border-radius: 22px;
      }
      .now-card {
        width: min(64%, 122px);
      }
      .now-stats-planets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .planet-layout,
      .tarot-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
      }
      .planet-layout.alpha-text-global-search-only {
        grid-template-rows: minmax(0, 1fr);
      }
      .planet-layout.layout-sidebar-collapsed,
      .planet-layout.layout-detail-collapsed,
      .tarot-layout.layout-sidebar-collapsed,
      .tarot-layout.layout-detail-collapsed {
        grid-template-rows: minmax(0, 1fr);
      }
      .kab-layout {
        grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
      }
      .planet-list-panel,
      .tarot-list-panel {
        border-right: none;
        border-bottom: 1px solid #27272a;
        max-height: min(42svh, 420px);
      }
      .layout-detail-collapsed > .planet-list-panel,
      .layout-detail-collapsed > .tarot-list-panel,
      .layout-detail-collapsed > .kab-tree-panel,
      .layout-sidebar-collapsed > .planet-detail-panel,
      .layout-sidebar-collapsed > .tarot-detail-panel,
      .layout-sidebar-collapsed > .kab-detail-panel {
        height: 100%;
        max-height: none;
        min-height: 0;
        border-bottom: none;
      }
      .planet-list-item,
      .tarot-list-item {
        min-height: 48px;
        padding: 10px 12px;
      }
      .planet-card-list,
      .tarot-card-list {
        padding-bottom: 18px;
      }
      .planet-detail-panel,
      .tarot-detail-panel,
      .kab-detail-panel {
        padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px));
        gap: 14px;
      }
      .sidebar-toggle-inline,
      .detail-toggle-inline {
        min-height: 38px;
        padding: 8px 10px;
      }
      .detail-popout-open {
        position: fixed;
        top: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 35;
        min-height: 42px;
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 13px;
        line-height: 1.2;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
        background: rgba(24, 24, 27, 0.96);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
      .detail-popout-open {
        left: 14px;
      }
      .planet-meta-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .planet-fact-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
      }
      .planet-fact-value {
        text-align: left;
      }
    }

    @media (max-width: 640px) {
      #now-panel {
        --now-square-size: min(calc(100vw - 74px), calc(100svh - 90px));
        padding: 6px clamp(20px, 6vw, 44px);
      }
      .now-panel-square {
        gap: 6px;
        padding: 6px;
      }
      .now-section {
        padding: 7px;
      }
      .now-card {
        width: min(60%, 96px);
      }
      .now-primary {
        font-size: clamp(12px, 3vw, 16px);
      }
      .now-countdown-row {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        font-size: 10px;
        text-align: center;
      }
      .now-countdown-value,
      .now-countdown-next {
        text-align: center;
      }
      .now-stats-planets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 10px;
      }
    }

    @media (max-width: 480px) {
      #now-panel {
        --now-square-size: min(calc(100vw - 46px), calc(100svh - 86px));
      }
      .now-panel-square {
        border-radius: 18px;
      }
      .now-section,
      .now-stats-section {
        border-radius: 16px;
        padding: 7px;
      }
      .now-title,
      .now-stats-title {
        font-size: 9px;
      }
      .now-tarot,
      .now-stats-sabian,
      .now-stats-planets {
        font-size: 10px;
      }
      .now-stats-planets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
      }
    }

    @media (max-height: 520px) {
      #now-panel {
        --now-square-size: min(76vmin, calc(100vw - 78px), calc(100svh - 108px));
        height: calc(100svh - 101px);
        min-height: calc(100svh - 101px);
        padding: 6px clamp(28px, 9vw, 72px);
      }
      .now-panel-square {
        grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 6px;
        padding: 16px 6px 8px;
        border-radius: 18px;
      }
      .now-section,
      .now-stats-section {
        border-radius: 16px;
        padding: 6px;
      }
      .now-card {
        width: min(66%, 92px);
        margin-bottom: 6px;
      }
      .now-title {
        font-size: 8px;
      }
      .now-primary {
        font-size: 15px;
      }
      .now-stats-title {
        font-size: 11px;
      }
      .now-stats-sabian {
        font-size: 11px;
        line-height: 1.42;
      }
      .now-stats-planets {
        font-size: 11px;
        line-height: 1.42;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .now-tarot,
      .now-countdown-row {
        display: none;
      }
    }

    #calendar {
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }