/* ============================================================
   EXISTING SITE STYLES — unchanged, verbatim
   ============================================================ */
/* ============================================================
   SECTION: QUICK LINKS TABS
   ============================================================ */
    .tabs {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 2px solid #ccc;
      max-width: 100%;
      margin: 15px 0;
    }
    .tab {
      padding: 10px 20px;
      text-decoration: none;
      color: #333;
      background: yellow;
      border: 1px solid #ccc;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      margin-right: 4px;
    }
    .tab:hover {
      background: #e6e600;
    }
    /* ============================================================
       SECTION: CODE / <pre> BLOCKS (Git Notes reference material)
       ============================================================ */
    pre, code {
      background: #f4f4f4;
      border-radius: 6px;
      font-family: "Courier New", monospace;
    }
    pre {
      display: block;
      white-space: pre-wrap;
      color: green;
      border: 1px solid #ccc;
      padding: 10px 20px;
      font-size: 18px;
    }
    code {
      padding: 2px 6px;
    }
    /* ============================================================
       SECTION: HEADINGS (h3) + PAGE HEADER TEXT
       ============================================================ */
    h3 {
      color: red;
      background-color: black;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 8px 12px;
      margin-top: 30px;
      text-align: left;
    }
    .course-title {
      font-size: 32px;
      font-weight: 900;
      text-align: left;
      margin: 10px 0;
    }
    .left-block {
      text-align: left;
    }
    /* ============================================================
       SECTION: GIT NOTES (layout, tab, accordion, cert modal)
       ============================================================ */
    .git-notes-section {
      margin-top: 40px;
      min-height: 900px;
    }
    .git-notes-tab {
      display: inline-block;
      font-size: 32px;
      color: #fff;
      background: #1f2937;
      border: 3px solid #eab308;
      border-radius: 12px 12px 0 0;
      padding: 12px 28px;
      margin: 0;
    }
    .git-notes-header {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .git-cert-thumbs {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .cert-thumb-btn {
      border: 1px solid rgba(255,255,255,0.45);
      background: rgba(0,0,0,0.25);
      border-radius: 8px;
      padding: 4px;
      cursor: pointer;
    }
    .cert-thumb {
      width: 88px;
      height: 58px;
      object-fit: cover;
      border-radius: 6px;
      display: block;
    }
    .cert-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.82);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
      z-index: 9999;
    }
    .cert-modal.is-open { display: flex; }
    .cert-modal-inner {
      position: relative;
      max-width: min(96vw, 1100px);
      width: 100%;
      max-height: 92vh;
      overflow: auto;
    }
    .cert-modal-image {
      width: 100%;
      max-height: 88vh;
      object-fit: contain;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      background: #111827;
      cursor: zoom-in;
      transition: transform 0.25s ease;
      transform-origin: top center;
    }
    .cert-modal-image.zoomed {
      width: auto;
      max-width: none;
      max-height: none;
      transform: scale(1.9);
      cursor: zoom-out;
    }
    .cert-modal-hint {
      text-align: center;
      color: rgba(255,255,255,0.75);
      font-size: 13px;
      margin: 8px 0 0;
    }
    .cert-modal-close {
      position: absolute;
      top: -14px;
      right: -8px;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: #ef4444;
      color: #fff;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }
    /* ============================================================
       SECTION: MEDIA CARDS (anthem, Quran, radio, I-LISTEN layout)
       ============================================================ */
    .media-row {
      display: flex;
      align-items: stretch;
      gap: 24px;
      margin: 22px 0;
    }
    .media-card {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 20px;
      background: #f8fafc;
      box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }
    .quran-card {
      flex: 1.45 1 0;
      background: #fffdf5;
    }
    /* Stretch the Quran card's results area down to fill any leftover
       height next to the (usually taller) anthem card, instead of
       leaving bare background showing below it. */
    .quran-card #quran-surahs {
      flex: 1 1 auto;
      min-height: 0; /* required so the flex item can be scroll-contained instead of growing forever */
    }
    .quran-surahs {
      display: grid;
      grid-template-columns: 1fr;
      align-content: center;
      justify-items: stretch;
      gap: 12px;
      margin-top: 14px;
      min-height: 160px;
    }
    /* Once surahs are loaded, cap the list to a fixed, viewport-aware
       height and give it its own scrollbar, so browsing all 114 surahs
       stays inside this card and never pushes the Dhol / Git Notes
       sections further down the page (works in the desktop flex layout
       and the stacked mobile layout alike). */
    .quran-surahs:has(.surah) {
      align-content: start;
      max-height: min(620px, 60vh);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 8px;
    }
    @supports (scrollbar-color: auto) {
      .quran-surahs:has(.surah) {
        scrollbar-color: rgba(255,255,255,0.45) rgba(0,0,0,0.20);
      }
    }
    @supports (scrollbar-width: thin) {
      .quran-surahs:has(.surah) {
        scrollbar-width: thin;
      }
    }
    .quran-surahs:has(.surah)::-webkit-scrollbar {
      width: 8px;
    }
    .quran-surahs:has(.surah)::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.20);
      border-radius: 4px;
    }
    .quran-surahs:has(.surah)::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.45);
      border-radius: 4px;
    }
    .quran-surahs:has(.surah)::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,0.65);
    }
    .quran-surahs .surah-status {
      text-align: center;
    }
    .surah {
      padding: 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    .surah h4 { margin: 0 0 6px; color: #14532d; }
    .arabic { font-size: 18px; line-height: 2; direction: rtl; text-align: right; }
    .translation { font-size: 14px; color: #374151; }
    .audio-player {
      width: 100%;
      height: 56px;
      border: 0;
      border-radius: 6px;
      margin-top: 8px;
    }
    .quran-toolbar {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .quran-toolbar input {
      flex: 1 1 260px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
    }
    .quran-btn {
      border: 1px solid #1d4ed8;
      background: #2563eb;
      color: #fff;
      border-radius: 8px;
      padding: 8px 12px;
      cursor: pointer;
    }
    .quran-btn:disabled {
      cursor: not-allowed;
      opacity: .65;
    }
    .surah-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .translation-preview {
      font-size: 13px;
      color: #374151;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 8px 10px;
      margin-top: 10px;
    }
    .surah-status {
      font-size: 12px;
      color: #334155;
      margin-top: 8px;
    }
    .sidebar-left {
      width: auto;
    }
    .content-right {
      width: auto;
    }
    .repo-steps-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: auto;
      max-width: 100%;
      text-align: left;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: transparent;
      padding: 10px 14px;
      margin-top: 30px;
      font-size: 24px;
      font-weight: 700;
      color: #ff3333;
      cursor: pointer;
    }
    .repo-steps-toggle .repo-steps-caret {
      margin-left: auto;
      font-size: 18px;
      line-height: 1.4;
    }
    .repo-steps-panel[hidden] {
      display: none;
    }
    .git-content {
      display: grid;
      grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr);
      gap: 28px;
      border: 2px solid #eab308;
      border-radius: 0 14px 14px 14px;
      padding: 24px;
      background: #fff;
    }
    @media (max-width: 900px) {
      .media-row, .git-content { display: block; }
      .media-card { margin-bottom: 20px; }
      .quran-toolbar input { flex-basis: 100%; }
    }
    ol {
      color: green;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 10px 30px;
    }
    hr {
      border: none;
      border-top: 1px solid #ddd;
      margin: 30px 0;
    }
    .hero-image {
      max-width: 280px;
      display: block;
      margin: 15px 0;
      border-radius: 10px;
    }
    /* ============================================================
       SECTION: PAGE BACKGROUND (lake wallpaper + overlay)
       ============================================================ */
    html {
      background:
        url('https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1920&auto=format&fit=crop')
        center center / cover no-repeat fixed;
    }
    /* very light dark overlay — just enough contrast */
    html::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.18);
      z-index: -1;
      pointer-events: none;
    }
    /* base body — transparent so lake shows everywhere */
    body {
      font-family: Arial, sans-serif;
      max-width: 1440px;
      margin: 40px auto;
      line-height: 1.6;
      padding: 0 28px;
      position: relative;
      z-index: 0;
      color: #ffffff;
      background: transparent;
    }
    /* headings and loose text — bright white with shadow for legibility */
    h1, h2, p, li, label {
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.75);
    }
    /* ============================================================
       SECTION: GLASS-MORPHISM CARD THEME (overrides for all cards)
       ============================================================ */
    .media-card,
    .git-content,
    .surah,
    .translation-preview,
    .quran-card,
    .radio-card,
    .youtube-card {
      background: rgba(255, 255, 255, 0.12) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255,255,255,0.30) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
    }
    /* text inside cards */
    .media-card *, .git-content *, .surah *, .translation-preview *, .radio-card *, .youtube-card * {
      color: #f0f9ff !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }
    /* surah heading */
    .surah h4 { color: #bef264 !important; }
    /* arabic text */
    .arabic { color: #fef9c3 !important; }
    /* translation text */
    .translation, .translation-preview { color: #e0f2fe !important; }
    /* surah status label */
    .surah-status { color: #cbd5e1 !important; }
    /* code/pre blocks inside git notes */
    pre, code {
      background: rgba(0,0,0,0.35) !important;
      color: #86efac !important;
      border-color: rgba(255,255,255,0.15) !important;
    }
    /* ordered list text */
    ol { color: #86efac !important; border-color: rgba(255,255,255,0.2) !important; }
    /* h3 keeps its bold look but glass-friendly */
    h3 {
      color: #fca5a5 !important;
      background: rgba(0,0,0,0.50) !important;
      border-color: rgba(255,255,255,0.15) !important;
    }
    /* tabs */
    .tabs {
      background: rgba(0,0,0,0.25);
      border-radius: 8px 8px 0 0;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
    .tab {
      background: rgba(234,179,8,0.70) !important;
      color: #1a1a1a !important;
    }
    .tab:hover { background: rgba(234,179,8,0.95) !important; }
    /* git notes tab */
    .git-notes-tab {
      background: transparent !important;
      color: #facc15 !important;
      border-color: #facc15 !important;
    }
    /* ── Remove ALL backgrounds from git notes section downward ── */
    .git-notes-section,
    .git-notes-section .git-content,
    .git-notes-section .sidebar-left,
    .git-notes-section .content-right,
    .git-notes-section h3,
    .git-notes-section pre,
    .git-notes-section code,
    .git-notes-section ol,
    .git-notes-section ul,
    .git-notes-section p,
    .git-notes-section div {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-color: rgba(255,255,255,0.20) !important;
      box-shadow: none !important;
    }
    /* keep text readable on bare lake */
    .git-notes-section * {
      color: #ffffff !important;
      text-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
      font-size: 17px !important;
    }
    /* headings → red, bigger */
    .git-notes-section h2,
    .git-notes-section h3,
    .git-notes-section h4 {
      color: #ff3333 !important;
      font-size: 26px !important;
    }
    .git-notes-tab { font-size: 30px !important; }
    /* steps and body content → white, bigger */
    .git-notes-section p,
    .git-notes-section li,
    .git-notes-section ol,
    .git-notes-section ul,
    .git-notes-section span,
    .git-notes-section td,
    .git-notes-section label {
      color: #ffffff !important;
      font-size: 19px !important;
    }
    .git-notes-section pre { color: #ffffff !important; font-size: 21px !important; }
    .git-notes-section code { color: #ffffff !important; font-size: 19px !important; }
    .git-notes-section .repo-steps-toggle {
      background: transparent !important;
      color: #ff3333 !important;
      border-color: rgba(255,255,255,0.55) !important;
      display: flex !important;
      width: 100% !important;
      font-size: 26px !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      margin-top: 20px !important;
    }
    .git-notes-section .repo-steps-toggle .repo-steps-caret {
      color: #ff3333 !important;
    }
    .git-notes-section .content-right .accordion-toggle {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      cursor: pointer !important;
      border: 1px solid rgba(255,255,255,0.55) !important;
      border-radius: 8px !important;
      padding: 10px 14px !important;
      margin-top: 20px !important;
      -webkit-user-select: none !important;
      user-select: none !important;
    }
    .git-notes-section .content-right .accordion-caret {
      margin-left: auto !important;
      font-size: 18px !important;
      line-height: 1 !important;
    }
    .git-notes-section .content-right [data-accordion-item][hidden] {
      display: none !important;
    }
    /* quran buttons */
    .quran-btn {
      background: rgba(37,99,235,0.75) !important;
      border-color: rgba(147,197,253,0.5) !important;
      color: #fff !important;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .quran-btn:hover { background: rgba(37,99,235,0.95) !important; }
    /* quran search input */
    .quran-toolbar input {
      background: rgba(255,255,255,0.15) !important;
      border-color: rgba(255,255,255,0.35) !important;
      color: #fff !important;
    }
    .quran-toolbar input::placeholder { color: rgba(255,255,255,0.6) !important; }
    /* ============================================================
       SECTION: CALENDAR WIDGET (floating, top-right)
       ============================================================ */
    #cal-widget {
      position: absolute;
      top: 10px;
      right: 28px;
      width: 260px;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 14px;
      padding: 14px 16px 16px;
      color: #fff;
      z-index: 100;
      box-shadow: 0 6px 32px rgba(0,0,0,0.45);
      -webkit-user-select: none;
      user-select: none;
    }
    #cal-widget .cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    #cal-widget .cal-nav button {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      color: #fff;
      border-radius: 6px;
      padding: 2px 10px;
      font-size: 16px;
      cursor: pointer;
    }
    #cal-widget .cal-nav button:hover { background: rgba(255,255,255,0.30); }
    #cal-widget .cal-title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    }
    #cal-widget .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      text-align: center;
    }
    #cal-widget .cal-day-name {
      font-size: 11px;
      color: #93c5fd;
      font-weight: 600;
      padding: 2px 0 4px;
    }
    #cal-widget .cal-cell {
      font-size: 13px;
      padding: 4px 2px;
      border-radius: 5px;
      cursor: default;
    }
    #cal-widget .cal-cell.today {
      background: #2563eb;
      color: #fff;
      font-weight: 700;
      border-radius: 50%;
    }
    #cal-widget .cal-cell.other-month { color: rgba(255,255,255,0.30); }
    #cal-widget .cal-year-row {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    #cal-widget .cal-month-chip {
      font-size: 11px;
      padding: 3px 7px;
      border-radius: 20px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.20);
      cursor: pointer;
      color: #fff;
    }
    #cal-widget .cal-month-chip.active {
      background: #2563eb;
      border-color: #2563eb;
      font-weight: 700;
    }
    #cal-widget .cal-month-chip:hover { background: rgba(255,255,255,0.25); }
    /* ============================================================
       SECTION: TO-DO / NOTES WIDGET (floating, left of calendar)
       ============================================================ */
    #todo-widget {
      position: absolute;
      top: 10px;
      right: 302px;
      width: 240px;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 14px;
      padding: 14px 16px 16px;
      color: #fff;
      z-index: 100;
      box-shadow: 0 6px 32px rgba(0,0,0,0.45);
    }
    #todo-widget h4 {
      margin: 0 0 10px;
      font-size: 15px;
      font-weight: 700;
      color: #facc15;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
      text-align: center;
      letter-spacing: .5px;
    }
    #todo-input-row {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    #todo-input {
      flex: 1;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 7px;
      color: #fff;
      padding: 5px 8px;
      font-size: 13px;
      outline: none;
    }
    #todo-input::placeholder { color: rgba(255,255,255,0.45); }
    #todo-add-btn {
      background: #2563eb;
      border: none;
      border-radius: 7px;
      color: #fff;
      padding: 5px 10px;
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
    }
    #todo-add-btn:hover { background: #1d4ed8; }
    #todo-list {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 260px;
      overflow-y: auto;
    }
    #todo-list::-webkit-scrollbar { width: 4px; }
    #todo-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
    #todo-list li {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 6px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      font-size: 13px !important;
      color: #f1f5f9 !important;
      text-shadow: none !important;
    }
    #todo-list li:last-child { border-bottom: none; }
    #todo-list li.done .todo-text {
      text-decoration: line-through;
      color: rgba(255,255,255,0.40) !important;
    }
    #todo-list input[type=checkbox] { margin-top: 2px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0; }
    #todo-list .todo-text { flex: 1; word-break: break-word; line-height: 1.4; }
    #todo-list .todo-del {
      background: none;
      border: none;
      color: rgba(255,100,100,0.70);
      font-size: 15px;
      cursor: pointer;
      padding: 0 2px;
      line-height: 1;
      flex-shrink: 0;
    }
    #todo-list .todo-del:hover { color: #ff4444; }
    #todo-empty {
      font-size: 12px;
      color: rgba(255,255,255,0.40);
      text-align: center;
      padding: 10px 0;
    }
    /* ============================================================
       SECTION: WEATHER WIDGET (floating, left of To-Do / Notes)
       ============================================================ */
    #weather-widget {
      position: absolute;
      top: 10px;
      right: 560px;
      width: 305px;
      background: rgba(255,255,255,0.96);
      border: 1px solid #d4d4d8;
      border-radius: 10px;
      padding: 12px 12px 10px;
      color: #111827;
      z-index: 100;
      box-shadow: 0 4px 16px rgba(15,23,42,0.2);
    }
    #weather-widget * {
      text-shadow: none !important;
    }
    .weather-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      position: relative;
    }
    .weather-location-row {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }
    .weather-pin {
      font-size: 13px;
      color: #0f172a;
      line-height: 1;
    }
    #weather-location-btn {
      border: none;
      background: transparent;
      color: #111827;
      font-size: 21px;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    #weather-location-name {
      display: inline-block;
      font-size: 22px;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 190px;
    }
    .weather-caret {
      font-size: 13px;
      color: #1f2937;
      transform: translateY(1px);
      flex-shrink: 0;
    }
    #weather-menu-btn {
      border: 1px solid #2563eb;
      background: #2563eb;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      padding: 5px 9px;
      border-radius: 6px;
      white-space: nowrap;
      letter-spacing: .3px;
    }
    #weather-menu-btn:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }
    #weather-menu {
      position: absolute;
      top: 30px;
      right: 0;
      width: 230px;
      background: #fff;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      z-index: 20;
    }
    #weather-menu[hidden] { display: none; }
    #weather-menu label {
      display: block;
      color: #1f2937;
      font-size: 12px !important;
      margin: 4px 0 3px;
    }
    #weather-menu input,
    #weather-menu select {
      width: 100%;
      border: 1px solid #d1d5db;
      border-radius: 7px;
      padding: 6px 8px;
      font-size: 12px;
      color: #111827;
      margin-bottom: 5px;
      background: #fff;
      cursor: pointer;
      box-sizing: border-box;
    }
    #weather-menu select:disabled { opacity: .55; cursor: default; }
    #weather-add-location-btn {
      width: 100%;
      border: 1px solid #1d4ed8;
      border-radius: 7px;
      background: #2563eb;
      color: #fff;
      font-size: 12px;
      padding: 6px 8px;
      cursor: pointer;
      margin-top: 4px;
    }
    #weather-add-location-btn:hover { background: #1d4ed8; }
    #weather-menu-status {
      margin: 6px 0 0;
      font-size: 11px !important;
      color: #475569 !important;
      min-height: 15px;
    }
    .weather-main-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
    }
    .weather-main-temp {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #111827;
    }
    #weather-main-icon {
      font-size: 31px;
      line-height: 1;
    }
    #weather-temp-big {
      font-size: 55px;
      font-weight: 500;
      color: #111827;
      line-height: 1;
    }
    #weather-temp-unit {
      font-size: 32px;
      vertical-align: top;
      color: #111827;
      margin-left: 1px;
      line-height: 1;
    }
    #weather-forecast-toggle {
      border: none;
      background: transparent;
      text-align: right;
      cursor: pointer;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      padding: 0;
      color: #1f2937;
      font-size: 25px;
    }
    #weather-status-line {
      font-size: 14px;
      line-height: 1.25;
      color: #1f2937;
      max-width: 130px;
      white-space: normal;
    }
    #weather-arrow {
      font-size: 28px;
      line-height: 1;
      transition: transform .2s ease;
      color: #111827;
      transform-origin: 50% 50%;
    }
    #weather-widget.forecast-open #weather-arrow {
      transform: rotate(90deg);
    }
    #weather-forecast-link {
      border: none;
      background: transparent;
      color: #1d4ed8;
      font-size: 27px;
      cursor: pointer;
      padding: 0;
      margin-top: 6px;
      text-decoration: none;
    }
    #weather-forecast-link:hover { text-decoration: underline; }
    #weather-forecast-wrap {
      margin-top: 7px;
      border-top: 1px solid #e5e7eb;
      padding-top: 8px;
    }
    #weather-forecast-wrap[hidden] { display: none; }
    #weather-forecast-wrap h5 {
      margin: 0 0 6px;
      font-size: 11px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      color: #334155;
      font-weight: 700;
    }
    #weather-forecast-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 4px;
    }
    #weather-forecast-list li {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      gap: 6px;
      align-items: center;
      font-size: 12px;
      color: #1f2937;
      line-height: 1.3;
    }
    .forecast-day {
      color: #0f172a;
      font-weight: 600;
    }
    .forecast-condition {
      color: #334155;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .forecast-temp {
      color: #0f172a;
      font-weight: 600;
      text-align: right;
    }
    #weather-updated {
      margin: 7px 0 0;
      font-size: 11px !important;
      color: #6b7280 !important;
      text-align: right;
    }
    /* ============================================================
       SECTION: RADIO + I-LISTEN ENTERTAINMENT ROW
       (shared styles below cover both .radio-card and .youtube-card,
       incl. I-LISTEN's toolbar/results/screen used by I-WATCH too)
       ============================================================ */
    .entertainment-row {
      margin: 22px 0;
    }
    .widget-subtext {
      font-size: 13px !important;
      color: #e0f2fe !important;
      margin: 4px 0 12px !important;
    }
    /* ── SUBSECTION: Radio widget ── */
    .radio-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .radio-toolbar select,
    .radio-toolbar input {
      flex: 1 1 160px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
    }
    .radio-toolbar select option { color: #111827; }
    .radio-toolbar input::placeholder { color: rgba(255,255,255,0.6) !important; }
    .radio-station-list {
      margin-top: 12px;
      max-height: 280px;
      overflow-y: auto;
      display: grid;
      gap: 8px;
    }
    .radio-station-list::-webkit-scrollbar { width: 6px; }
    .radio-station-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
    .radio-station-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      width: 100%;
      text-align: left;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.08);
      cursor: pointer;
    }
    .radio-station-btn:hover { background: rgba(255,255,255,0.20); }
    .radio-station-name {
      font-weight: 700;
      font-size: 14px !important;
    }
    .radio-station-meta {
      font-size: 12px !important;
      color: #cbd5e1 !important;
    }
    .radio-now-playing {
      margin-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.20);
      padding-top: 10px;
    }
    .radio-now-playing #radio-now-playing-name {
      display: block;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .radio-now-playing audio {
      width: 100%;
    }
    .radio-status {
      font-size: 12px !important;
      color: #cbd5e1 !important;
      margin: 6px 0 0 !important;
    }
    /* ── SUBSECTION: I-LISTEN widget (YouTube search/player — also
       used, via the same classes, by the I-WATCH widget below) ── */
    .youtube-country-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .youtube-country-row label {
      font-size: 12px !important;
      white-space: nowrap;
    }
    .youtube-country-row select {
      flex: 1 1 220px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
    }
    .youtube-country-row select option {
      color: #111827;
    }
    .youtube-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .youtube-toolbar .search-field {
      flex: 1 1 220px;
      position: relative;
      min-width: 0;
    }
    .youtube-toolbar input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
    }
    .youtube-toolbar input::placeholder { color: rgba(255,255,255,0.6) !important; }
    .youtube-api-key-panel {
      margin-top: 10px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(0,0,0,0.20);
    }
    .youtube-api-key-panel label {
      display: block;
      font-size: 12px !important;
      margin-bottom: 6px;
    }
    .youtube-api-key-panel input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
      margin-bottom: 8px;
    }
    .youtube-api-hint {
      font-size: 11px !important;
      color: #cbd5e1 !important;
      margin: 8px 0 0 !important;
    }
    .youtube-results {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
      max-height: 260px;
      overflow-y: auto;
    }
    .youtube-results::-webkit-scrollbar { width: 6px; }
    .youtube-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
    .youtube-result-card {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 6px;
      background: rgba(255,255,255,0.08);
      cursor: pointer;
      text-align: left;
    }
    .youtube-result-card:hover { background: rgba(255,255,255,0.20); }
    .youtube-result-card img {
      width: 100%;
      border-radius: 6px;
      display: block;
    }
    .youtube-result-title {
      font-size: 12px !important;
      font-weight: 700;
      line-height: 1.3;
    }
    .youtube-result-channel {
      font-size: 11px !important;
      color: #cbd5e1 !important;
    }
    .youtube-screen {
      margin-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.20);
      padding-top: 10px;
    }
    .youtube-screen iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.25);
      background: #000;
    }

/* ============================================================
   SECTION: I-WATCH APP SHELL (TV-console chrome)
   Scoped under .iwatch-app so nothing here can collide with the
   rules above — this site already uses a class named ".tab" for
   its Quick Links bar (with an !important rule), so anything under
   .iwatch-app that still uses tab-style buttons is named ".iw-tab"
   to stay completely separate.

   I-WATCH's actual widget (search box, API key panel, results,
   related-videos dropdown, video screen) is a duplicate of the
   I-LISTEN widget and reuses I-LISTEN's own classes (.youtube-*,
   .quran-btn, .related-select, etc.) defined further up this file —
   only the surrounding TV-console shell below (.iwatch-app / .wrap /
   .section / .tv-outer / .tv-frame / .tv-screen / .tv-stand /
   .tv-base / .now-playing-bar) is unique to I-WATCH, kept so the
   section's overall size/shape stays the same as the original
   I-WATCH movie browser it replaced.
   ============================================================ */
:root{
    --bg-1:#0b1410;
    --bg-2:#0f1f18;
    --panel:#132a20;
    --panel-2:#0d2018;
    --glass:rgba(255,255,255,0.04);
    --glass-brd:rgba(255,255,255,0.08);
    --accent:#3b82f6;
    --accent-2:#2563eb;
    --text:#eef3ef;
    --text-dim:#9fb3a8;
    --tv-bezel:#1a1a1a;
}
.iwatch-app, .iwatch-app *{box-sizing:border-box;}
.iwatch-app{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(1200px 600px at 20% -10%, #17301f 0%, transparent 60%),
      radial-gradient(1000px 500px at 100% 0%, #12261c 0%, transparent 55%),
      linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color:var(--text);
    border-radius:28px;
    margin:22px 0;
    overflow:hidden;
}
.iwatch-app .wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px;}
.iwatch-app .app-title{
    display:flex;align-items:center;gap:10px;
    font-size:15px;font-weight:700;letter-spacing:.4px;
    color:var(--text-dim);
    background:var(--glass);
    border:1px solid var(--glass-brd);
    padding:10px 16px;border-radius:12px;
    width:fit-content;margin-bottom:22px;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.iwatch-app .app-title .emoji{font-size:18px;}
.iwatch-app .app-title b{color:var(--text);}
.iwatch-app .section{
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border:1px solid var(--glass-brd);
    border-radius:22px;
    padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
/* Search row */
.iwatch-app .search-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.iwatch-app .search-row .search-field{
    flex:2;min-width:180px;
    position:relative;
}
.iwatch-app .search-row input[type="text"]{
    width:100%;
    box-sizing:border-box;
    background:var(--panel-2);
    border:1px solid var(--glass-brd);
    color:var(--text);
    padding:13px 16px;
    border-radius:12px;
    font-size:14.5px;
    outline:none;
    transition:border-color .15s ease;
}
.iwatch-app .search-row input[type="text"]::placeholder{color:var(--text-dim);}
.iwatch-app .search-row input[type="text"]:focus{border-color:var(--accent);}
.iwatch-app .dropdown-select{
    flex:1;min-width:150px;
    background:var(--panel-2);
    border:1px solid var(--glass-brd);
    color:var(--text);
    padding:13px 12px;
    border-radius:12px;
    font-size:13.5px;
    outline:none;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb3a8' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:32px;
    transition:border-color .15s ease;
}
.iwatch-app .dropdown-select:focus{border-color:var(--accent);}
.iwatch-app .btn{
    border:none;cursor:pointer;
    border-radius:12px;
    padding:13px 18px;
    font-size:14px;font-weight:600;
    display:flex;align-items:center;gap:6px;
    transition:transform .1s ease, filter .15s ease;
    white-space:nowrap;
}
.iwatch-app .btn:active{transform:scale(0.97);}
.iwatch-app .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:white;}
.iwatch-app .btn-primary:hover{filter:brightness(1.08);}
.iwatch-app .btn-ghost{background:var(--glass);border:1px solid var(--glass-brd);color:var(--text);}
.iwatch-app .btn-ghost:hover{filter:brightness(1.15);}
.iwatch-app .filter-hint{font-size:11.5px;color:var(--text-dim);margin:0 0 16px 2px;}
/* Tabs row (renamed from .tab to .iw-tab to avoid clashing with the site's Quick Links .tab) */
.iwatch-app .tabs-row{
    display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;
}
.iwatch-app .iw-tab{
    background:var(--glass);
    border:1px solid var(--glass-brd);
    color:var(--text-dim);
    padding:9px 16px;
    border-radius:999px;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
}
.iwatch-app .iw-tab:hover{color:var(--text);}
.iwatch-app .iw-tab.active{
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    color:white;border-color:transparent;
}
/* TV set */
.iwatch-app .tv-outer{display:flex;flex-direction:column;align-items:center;margin-top:6px;}
.iwatch-app .tv-frame{
    width:100%;
    background:
      linear-gradient(160deg,#242424,#111111 60%),
      var(--tv-bezel);
    border-radius:26px;
    padding:16px;
    box-shadow:
      0 30px 70px rgba(0,0,0,0.55),
      inset 0 0 0 1px rgba(255,255,255,0.06);
    position:relative;
}
.iwatch-app .tv-frame::before{
    content:"";
    position:absolute;
    top:10px;left:26px;
    width:8px;height:8px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #6be08a, #1c7a3b);
    box-shadow:0 0 8px rgba(107,224,138,0.7);
}
.iwatch-app .tv-screen{
    background:#04070a;
    border-radius:14px;
    aspect-ratio:16/9;
    width:100%;
    overflow:hidden;
    position:relative;
    box-shadow:inset 0 0 40px rgba(0,0,0,0.8);
}
.iwatch-app .tv-screen:fullscreen{ border-radius:0; aspect-ratio:auto; }
.iwatch-app .tv-screen iframe{width:100%;height:100%;border:0;display:block;}
.iwatch-app .tv-stand{
    width:120px;height:20px;
    background:linear-gradient(180deg,#1c1c1c,#0a0a0a);
    border-radius:0 0 10px 10px;
    margin-top:-2px;
}
.iwatch-app .tv-base{
    width:220px;height:10px;
    background:linear-gradient(180deg,#161616,#050505);
    border-radius:6px;
    margin-top:2px;
    box-shadow:0 8px 18px rgba(0,0,0,0.5);
}
/* Screen content states */
.iwatch-app .screen-inner{
    position:absolute;inset:0;
    overflow-y:auto;
    padding:18px;
}
.iwatch-app .screen-idle{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;
    color:#5c6f66;
    background:
      radial-gradient(circle at 50% 40%, rgba(59,130,246,0.08), transparent 60%),
      #04070a;
}
.iwatch-app .screen-idle .big{font-size:15px;font-weight:600;color:#8ea297;}
.iwatch-app .screen-idle .small{font-size:12.5px;color:#526155;}
.iwatch-app .static-bars{
    display:flex;gap:3px;height:24px;align-items:flex-end;opacity:.5;
}
.iwatch-app .static-bars span{
    width:3px;background:#3b5c4d;
    animation:bar 1.4s ease-in-out infinite;
    border-radius:2px;
}
.iwatch-app .static-bars span:nth-child(1){height:40%;animation-delay:0s;}
.iwatch-app .static-bars span:nth-child(2){height:80%;animation-delay:.15s;}
.iwatch-app .static-bars span:nth-child(3){height:55%;animation-delay:.3s;}
.iwatch-app .static-bars span:nth-child(4){height:90%;animation-delay:.45s;}
.iwatch-app .static-bars span:nth-child(5){height:35%;animation-delay:.6s;}
@keyframes bar{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}
.iwatch-app .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
}
.iwatch-app .card{
    background:var(--glass);
    border:1px solid var(--glass-brd);
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .15s ease, border-color .15s ease;
}
.iwatch-app .card:hover{transform:translateY(-3px);border-color:var(--accent);}
.iwatch-app .poster-wrap{width:100%;aspect-ratio:2/3;background:#132a20;overflow:hidden;}
.iwatch-app .poster-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.iwatch-app .card-meta{padding:8px 9px 10px;}
.iwatch-app .card-title{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.iwatch-app .card-date{font-size:11px;color:var(--text-dim);margin-top:3px;}
.iwatch-app .now-playing-bar{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:14px;flex-wrap:wrap;gap:10px;
}
.iwatch-app .now-playing-bar[hidden]{ display:none; }
.iwatch-app .np-info{font-size:13px;color:var(--text-dim);}
.iwatch-app .np-info b{color:var(--text);}
/* Player controls overlay - volume/mute, captions, enlarge */
.iwatch-app .player-controls{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.85));
    opacity:0;
    transition:opacity .2s ease;
}
.iwatch-app .tv-screen:hover .player-controls,
.iwatch-app .player-controls.pinned{opacity:1;}
.iwatch-app .ctrl-btn{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
    width:34px;height:34px;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:15px;
    transition:background .15s ease;
    flex-shrink:0;
}
.iwatch-app .ctrl-btn:hover{background:rgba(255,255,255,0.18);}
.iwatch-app .ctrl-btn.on{background:rgba(59,130,246,0.55);border-color:rgba(59,130,246,0.8);}
.iwatch-app .volume-slider{
    width:80px;accent-color:var(--accent);
    cursor:pointer;
}
.iwatch-app .ctrl-spacer{flex:1;}
.iwatch-app .back-btn{
    position:sticky;top:0;
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;padding:7px 12px;border-radius:8px;
    font-size:12.5px;cursor:pointer;margin-bottom:10px;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
}
.iwatch-app .back-btn:hover{background:rgba(0,0,0,0.75);}
.iwatch-app .status-msg{
    font-size:13px;color:var(--text-dim);text-align:center;padding:30px 10px;
}
.iwatch-app .attribution{
    text-align:center;font-size:11px;color:#5b6d63;margin-top:16px;
}
.iwatch-app .attribution a{color:#7fb0ff;text-decoration:none;}
/* modal */
.iwatch-app .modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    display:none;align-items:center;justify-content:center;z-index:50;
}
.iwatch-app .modal-backdrop.open{display:flex;}
.iwatch-app .modal{
    background:var(--panel);
    border:1px solid var(--glass-brd);
    border-radius:16px;
    padding:22px;
    width:min(420px,90vw);
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
}
.iwatch-app .modal h3{
    margin:0 0 6px;font-size:16px;
    color:var(--text) !important;
    background:transparent !important;
    border:none !important;
}
.iwatch-app .modal p{margin:0 0 14px;font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.iwatch-app .modal p a{color:#7fb0ff;}
.iwatch-app .modal input{
    width:100%;padding:11px 13px;border-radius:10px;
    border:1px solid var(--glass-brd);background:var(--panel-2);color:var(--text);
    font-size:13.5px;margin-bottom:12px;outline:none;
}
.iwatch-app .modal input:focus{border-color:var(--accent);}
.iwatch-app .modal-actions{display:flex;justify-content:flex-end;gap:8px;}
@media(max-width:560px){
    .iwatch-app .wrap{padding:18px 12px 40px;}
    .iwatch-app .search-row .search-field{flex-basis:100%;}
}

/* ============================================================
   MOBILE RESPONSIVE LAYER
   Everything above was written for a wide desktop viewport:
   floating widgets are pinned with `position:absolute; right:Npx`
   stacked next to each other, several rows use fixed pixel widths,
   and a couple of elements (the 900px anthem SVG, wide toolbars)
   can force horizontal scrolling on a phone. Nothing above this
   comment is edited — this section only adds rules that apply at
   narrower widths and override earlier ones by cascade order.
   ============================================================ */

/* Stop ANY element from creating horizontal overflow, site-wide,
   regardless of viewport width. This is the #1 cause of "mobile
   site is zoomed out / scrolls sideways" bugs. */
html, body {
  overflow-x: hidden;
}
* {
  max-width: 100%;
}
img, svg, iframe, video, audio, table, pre {
  max-width: 100%;
}
/* Border-box everywhere: without this, elements given `width:100%`
   (like the floating widgets below at narrow widths) end up
   `100% + their own padding + border` wide, which is exactly what
   was pushing #weather-widget / #todo-widget / #cal-widget past
   the edge of the screen on phones. */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* ── Tablet and down (≤ 1024px): the three floating widgets no
   longer fit side-by-side above the heading, so let them wrap
   onto their own line as normal flow instead of being pinned
   with position:absolute + fixed right offsets. ── */
@media (max-width: 1024px) {
  #weather-widget,
  #todo-widget,
  #cal-widget {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 0 0 14px 0;
    right: auto;
    top: auto;
  }
  /* Stack the three widgets in a simple flex column above the
     rest of the page content instead of overlapping it. */
  body {
    padding-top: 0;
  }
}

/* ── Phones and small tablets (≤ 768px) ── */
@media (max-width: 768px) {
  body {
    margin: 16px auto;
    padding: 0 14px;
    line-height: 1.55;
  }

  /* Floating widgets: full width, comfortably tappable */
  #weather-widget,
  #todo-widget,
  #cal-widget {
    max-width: 100%;
    width: 100%;
  }

  #weather-location-name {
    max-width: 55vw;
  }

  /* Big display type on the weather + git-notes sections was tuned
     for desktop; scale it down so it doesn't dominate a phone screen. */
  #weather-temp-big { font-size: 42px; }
  #weather-temp-unit { font-size: 24px; }
  #weather-main-icon { font-size: 26px; }

  .course-title { font-size: 24px; }
  .hero-image { max-width: 200px; }

  /* Search form: stack input + button instead of squeezing them */
  form[action*="google.com/search"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  form[action*="google.com/search"] input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px; /* 16px+ prevents iOS Safari auto-zoom on focus */
    border-radius: 8px;
    border: 1px solid #cbd5e1;
  }
  form[action*="google.com/search"] button {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
  }

  /* Quick Links tabs: allow horizontal scroll-by-swipe instead of
     wrapping into a dozen short rows, and make each tap target
     touch-sized. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Media / Git Notes rows already collapse to block at 900px via
     the existing rule above; just tighten spacing further here. */
  .media-card {
    padding: 14px;
  }
  .anthem-poem {
    font-size: 15px;
  }

  .quran-toolbar,
  .radio-toolbar,
  .youtube-toolbar,
  .youtube-country-row {
    flex-direction: column;
    align-items: stretch;
  }
  .quran-toolbar input,
  .radio-toolbar select,
  .radio-toolbar input,
  .youtube-toolbar input,
  .youtube-country-row select {
    flex-basis: auto;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* avoid iOS auto-zoom on inputs/selects */
  }
  .quran-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .surah-actions {
    flex-direction: column;
  }
  .surah-actions .quran-btn {
    width: 100%;
  }

  .youtube-results {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  /* Git notes: single column already kicks in at 900px; reduce the
     oversized fixed font-sizes so paragraphs of notes are readable
     without horizontal scroll on a phone. */
  .git-content {
    padding: 14px;
    gap: 18px;
  }
  .git-notes-tab {
    font-size: 22px !important;
    padding: 10px 16px;
  }
  .git-notes-section * {
    font-size: 15px !important;
  }
  .git-notes-section h2,
  .git-notes-section h3,
  .git-notes-section h4 {
    font-size: 19px !important;
  }
  .git-notes-section p,
  .git-notes-section li,
  .git-notes-section ol,
  .git-notes-section ul,
  .git-notes-section span,
  .git-notes-section td,
  .git-notes-section label {
    font-size: 15px !important;
  }
  .git-notes-section pre,
  .git-notes-section code {
    font-size: 14px !important;
    padding: 8px 10px;
    overflow-x: auto;
  }
  .repo-steps-toggle,
  .git-notes-section .repo-steps-toggle {
    font-size: 17px !important;
    padding: 10px;
  }

  /* I-WATCH app shell */
  .iwatch-app .wrap {
    padding: 16px 12px 36px;
  }
  .iwatch-app .search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .iwatch-app .search-row input[type="text"],
  .iwatch-app .dropdown-select,
  .iwatch-app .btn {
    width: 100%;
    flex: none;
    font-size: 16px;
  }
  .iwatch-app .tabs-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .iwatch-app .iw-tab {
    flex: 0 0 auto;
  }
  .iwatch-app .grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .iwatch-app .now-playing-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .iwatch-app .now-playing-bar .btn {
    width: 100%;
  }
}

/* ── "Related content" dropdown (I-LISTEN + I-WATCH) ── */
.related-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.related-select[hidden] { display: none; }
.related-select option { color: #111827; }
.iwatch-app .related-select {
  background: var(--panel-2);
  border-color: var(--glass-brd);
  color: var(--text);
  font-size: 13.5px;
}

/* ============================================================
   SECTION: LIVE SEARCH SUGGESTIONS DROPDOWN (I-LISTEN + I-WATCH)
   Appears under the search box as the user types, listing only
   videos YouTube reports as embeddable + syndicated (i.e. videos
   that will actually play inside this site's own player).
   ============================================================ */
.search-field {
  position: relative;
}
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  background: rgba(8,12,10,0.97);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.search-suggestions[hidden] { display: none; }
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item:focus-visible { background: rgba(255,255,255,0.12); }
.suggestion-item img {
  width: 52px;
  height: 39px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #000;
}
.suggestion-item .sug-text { min-width: 0; }
.suggestion-item .sug-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.suggestion-item .sug-channel {
  font-size: 11px;
  color: #cbd5e1;
  margin-top: 2px;
}
.suggestion-empty,
.suggestion-loading {
  padding: 12px 10px;
  font-size: 12.5px;
  color: #cbd5e1;
  text-align: center;
}

/* ── Small phones (≤ 420px) ── */
@media (max-width: 420px) {
  h1 { font-size: 26px; }
  .course-title { font-size: 20px; }
  .git-notes-tab { font-size: 19px !important; }
  .youtube-results {
    grid-template-columns: repeat(2, 1fr);
  }
  .iwatch-app .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}