/* ============================================================
     Apple-inspired glass welcome screen
     (frosts the layout's existing background — no extra blobs)
     ============================================================ */

  .welcome-page {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: #0b2b4a;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
  }

  /* ---------- Glass card ---------- */
  .welcome-card {
    position: relative;
    max-width: 620px;
    width: 100%;
    padding: 3.5rem 3rem 3rem 3rem;
    border-radius: 32px;
    text-align: center;

    /* Frosted glass */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);

    /* Etched edge: top rim light + bottom rim + 1px border */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 -1px 0 rgba(255, 255, 255, 0.4) inset,
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 30px 60px -20px rgba(0, 30, 60, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Inner sheen — diagonal highlight across the glass */
  .welcome-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0.25) 100%
    );
    pointer-events: none;
    opacity: 0.9;
  }

  /* ---------- Icon badge ---------- */
  .welcome-icon {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,255,255,0.4));
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    backdrop-filter: blur(20px) saturate(200%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 0 0 1px rgba(255,255,255,0.6),
      0 20px 40px -16px rgba(59, 124, 191, 0.45);
  }
  .welcome-icon i {
    font-size: 2.1rem;
    color: #1f4e7a;
    filter: drop-shadow(0 2px 6px rgba(31, 78, 122, 0.25));
  }

  /* ---------- Typography ---------- */
  .welcome-title {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 0.6rem 0;
    background: linear-gradient(180deg, #0b2b4a 0%, #1e4770 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .welcome-sub {
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(11, 43, 74, 0.72);
    margin: 0 auto 2.5rem auto;
    max-width: 440px;
    font-weight: 400;
  }

  /* ---------- Search (glassy pill) ---------- */
  .welcome-search { text-align: left; }

  .welcome-search .search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 0 0 1px rgba(255, 255, 255, 0.4),
      0 8px 24px -12px rgba(0, 30, 60, 0.2);
    transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .welcome-search .search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(74, 125, 255, 0.5);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 0 0 4px rgba(74, 125, 255, 0.18),
      0 12px 32px -12px rgba(74, 125, 255, 0.4);
  }

  .welcome-search .search-wrapper .search-icon {
    color: #5d7f9c;
    font-size: 1.15rem;
    flex-shrink: 0;
  }

  .welcome-search .search-wrapper .form-control {
    border: none;
    background: transparent;
    padding: 0.85rem 0.4rem;
    font-size: 1.02rem;
    color: #0b2b4a;
    box-shadow: none !important;
    flex: 1;
    min-width: 0;
  }
  .welcome-search .search-wrapper .form-control::placeholder {
    color: rgba(11, 43, 74, 0.42);
  }

  /* Button */
  .welcome-search .btn-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.72rem 1.6rem;
    border-radius: 999px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    background: linear-gradient(180deg, #2a6ec9 0%, #0b2b4a 100%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.25) inset,
      0 8px 20px -8px rgba(11, 43, 74, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .welcome-search .btn-search:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -10px rgba(11, 43, 74, 0.65);
  }
  .welcome-search .btn-search:active {
    transform: translateY(0);
    filter: brightness(0.96);
  }

  /* Help text */
  .welcome-search .form-text {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-left: 0.75rem;
    font-size: 0.85rem;
    color: rgba(11, 43, 74, 0.55);
  }
  .welcome-search .form-text i {
    color: rgba(11, 43, 74, 0.4);
    font-size: 0.95rem;
  }

  /* ---------- Hints (glassy chips) ---------- */
  .welcome-hints {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
  }
  .welcome-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #1f4e7a;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 4px 12px -6px rgba(0, 30, 60, 0.15);
    white-space: nowrap;
  }
  .welcome-hint i {
    color: #4a7dff;
    font-size: 0.9rem;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 576px) {
    .welcome-page { padding: 2rem 1rem; }
    .welcome-card {
      padding: 2.5rem 1.5rem;
      border-radius: 26px;
    }
    .welcome-title { font-size: 2.15rem; }
    .welcome-sub { font-size: 0.95rem; margin-bottom: 2rem; }
    .welcome-icon { width: 68px; height: 68px; border-radius: 22px; }
    .welcome-icon i { font-size: 1.7rem; }
    .welcome-search .search-wrapper { padding: 0.35rem 0.35rem 0.35rem 1rem; }
    .welcome-search .btn-search { padding: 0.68rem 1.1rem; }
    .welcome-search .btn-search span { display: none; }
    .welcome-hints { gap: 0.5rem; }
    .welcome-hint { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
  }

  /* Fallback for browsers without backdrop-filter */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .welcome-card {
      background: rgba(255, 255, 255, 0.92);
    }
    .welcome-search .search-wrapper {
      background: rgba(255, 255, 255, 0.95);
    }
    .welcome-hint {
      background: rgba(255, 255, 255, 0.9);
    }
  }

/* Reading-room override: one solid surface, compact controls, no decorative glass. */
.welcome-page { color: #203a43; align-items: flex-start; padding-top: 5rem; }
.welcome-card { max-width: 680px; padding: 3rem; text-align: left; background: #fffdf8; border: 1px solid #ddd4c4; border-radius: 16px; box-shadow: 0 16px 40px rgba(47, 64, 56, .09); -webkit-backdrop-filter: none; backdrop-filter: none; }
.welcome-card::before { display: none; }
.welcome-icon { width: 54px; height: 54px; margin-bottom: 1.25rem; border-radius: 12px; background: #dcece3; border: 1px solid #b9d5c7; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.welcome-icon i { color: #12664d; filter: none; font-size: 1.55rem; }
.welcome-title { color: #203a43; background: none; -webkit-text-fill-color: currentColor; font-size: 2.45rem; }
.welcome-sub { color: #52616a; margin-left: 0; }
.welcome-search .search-wrapper { background: #fff; border: 1px solid #cfc6b7; border-radius: 10px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.welcome-search .search-wrapper:focus-within { background: #fff; border-color: #157a5b; box-shadow: 0 0 0 3px rgba(21,122,91,.18); }
.welcome-search .btn-search { border-radius: 7px; background: #157a5b; box-shadow: none; }
.welcome-search .btn-search:hover { background: #0f6148; box-shadow: none; transform: none; }
.welcome-note { margin: 1.15rem 0 0; color: #66757d; font-size: .9rem; }
@media (max-width: 576px) { .welcome-page { padding-top: 2rem; } .welcome-card { padding: 2rem 1.25rem; border-radius: 12px; } }

/* bump ?v=N in layout on change */