/* =====================================================
   SAATDURUM — MAIN & BASE STYLES
   Reset, Typography, Layout, Cards & PWA Optimizations
===================================================== */

/* Mobile Touch & Performance Optimizations */
html, body {
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

/* ===== RESET & ROOT ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg-deep: #08080a;
      /* Sleek titanium dark slate zemin */
      --bg-mid: #111116;
      --bg-card: rgba(255, 255, 255, 0.05);
      /* Camın iç rengi */
      --bg-card-hv: rgba(255, 255, 255, 0.08);
      --border: rgba(255, 255, 255, 0.1);
      --border-hv: rgba(255, 255, 255, 0.2);
      --accent: #94a3b8;
      /* Titanyum Gri / Slate Gray (Yeni Varsayılan) */
      --accent2: #cbd5e1;
      /* Platinum Silver */
      --accent-dim: rgba(148, 163, 184, 0.15);
      --text-p: #ffffff;
      --text-s: rgba(235, 235, 245, 0.6);
      /* Apple ikincil metin rengi */
      --text-m: rgba(235, 235, 245, 0.3);
      --danger: #ff453a;
      /* Apple kırmızı */
      --warn: #ff9f0a;
      /* Apple turuncu */
      /* Apple sistem fontları */
      --mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
      --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, sans-serif;
      --radius: 32px;
      /* Liquid yapıyı veren geniş kavisler */
      --radius-sm: 16px;
      --shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      /* Dış derinlik + İç ışık yansıması */

      /* Progress bar colors (legacy) */
      --prog-safe: #0c145c;
      --prog-warn: #ffa65d;
      --prog-danger: #ff3227;

      /* Smart Action Bar — durum renkleri */
      --bar-idle: var(--accent);
      /* Boşta: tema rengi   */
      --bar-running: var(--accent2);
      /* Çalışıyor: gümüş    */
      --bar-paused: var(--warn);
      /* Duraklatıldı: turuncu */

      /* Atmosphere & Background Controls */
      --ambient-opacity: 0.8;
      --ambient-blur: 0px;
      --grain-opacity: 0.06;
      --gradient-angle: 135deg;
    }

    html,
    body {
      height: 100%;
      background: var(--bg-deep);
      color: var(--text-p);
      font-family: var(--sans);
      overflow-x: hidden;
      scrollbar-width: none !important;
      /* Firefox */
      -ms-overflow-style: none !important;
      /* IE & Edge */
    }

    /* Tüm temalarda dikey kaydırma çubuğunu gizle (Chrome, Safari, Edge, Opera) */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    ::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    /* ===== BACKGROUND ATMOSPHERE ===== */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      /* Şık ve nötr titanyum/gri haleler */
      background:
        radial-gradient(ellipse 70% 60% at 10% 10%, rgba(148, 163, 184, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 90% 90%, rgba(203, 213, 225, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(100, 116, 139, 0.05) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
      opacity: var(--ambient-opacity, 0.8);
      filter: blur(var(--ambient-blur, 0px));
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      z-index: 0;
    }

    /* ===== LAYOUT ===== */
    #app {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px 72px;
      /* bottom padding for progress bar */
    }

    /* ===== HEADER ===== */
    header {
      width: 100%;
      max-width: 680px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
      transition: opacity 0.5s ease;
    }

    .logo {
      font-family: var(--sans);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: var(--text-p);
    }

    .logo span {
      color: var(--accent);
    }

    /* ===== HEADER RIGHT BUTTONS ===== */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ===== SHARED ICON BUTTON ===== */
    .icon-btn {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-s);
      cursor: pointer;
      padding: 8px 14px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.3px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .icon-btn:hover {
      border-color: var(--border-hv);
      color: var(--text-p);
      background: var(--bg-card-hv);
    }

    /* ===== ÜST BAR AÇILIR SEKME SEÇİCİSİ (Nav Dropdown) =====
       Eskiden tüm sekmeler (Saat, Kronometre, Plan, Çevrimiçi ...) yatay bir
       şerit halinde her zaman görünürdü; mobilde sıkışıyordu. Artık tek bir
       "seçici" düğmeye tıklanınca açılan bir pencereden seçim yapılıyor. */
    .nav-dropdown {
      position: relative;
      width: 100%;
      max-width: 680px;
      margin-bottom: 28px;
      z-index: 40;
    }

    .nav-dropdown-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      padding: 13px 16px;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .nav-dropdown-trigger:hover {
      border-color: var(--border-hv);
      background: rgba(0, 0, 0, 0.32);
    }

    .nav-dropdown-trigger-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      color: var(--accent);
      flex-shrink: 0;
    }

    .nav-dropdown-trigger-label {
      flex: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-dropdown-chevron {
      flex-shrink: 0;
      color: var(--text-s);
      transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .nav-dropdown.open .nav-dropdown-chevron {
      transform: rotate(180deg);
    }

    .nav-dropdown.open .nav-dropdown-trigger {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim, rgba(148, 163, 184, 0.15));
    }

    /* Light Theme Nav Dropdown */
    body.light-theme .nav-dropdown-trigger,
    body.theme-light .nav-dropdown-trigger,
    [data-theme="light"] .nav-dropdown-trigger,
    body.litewhite-theme .nav-dropdown-trigger,
    body.theme-litewhite .nav-dropdown-trigger,
    [data-theme="litewhite"] .nav-dropdown-trigger {
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(15, 23, 42, 0.12);
      color: var(--text-p);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    }
    body.light-theme .nav-dropdown-trigger:hover,
    body.theme-light .nav-dropdown-trigger:hover,
    [data-theme="light"] .nav-dropdown-trigger:hover,
    body.litewhite-theme .nav-dropdown-trigger:hover,
    body.theme-litewhite .nav-dropdown-trigger:hover,
    [data-theme="litewhite"] .nav-dropdown-trigger:hover {
      background: #ffffff;
      border-color: var(--accent);
    }

    /* Pink Theme Nav Dropdown */
    body.pink-theme .nav-dropdown-trigger,
    body.theme-pink .nav-dropdown-trigger,
    [data-theme="pink"] .nav-dropdown-trigger {
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(244, 63, 94, 0.22);
      color: var(--text-p);
      box-shadow: 0 4px 16px rgba(244, 63, 94, 0.08);
    }
    body.pink-theme .nav-dropdown-trigger:hover,
    body.theme-pink .nav-dropdown-trigger:hover,
    [data-theme="pink"] .nav-dropdown-trigger:hover {
      background: #ffffff;
      border-color: var(--accent);
    }

    /* Tam ekranı hafifçe karartan tıkla-kapat katmanı (mobilde de çalışır) */
    .nav-dropdown-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 45;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .nav-dropdown.open .nav-dropdown-backdrop {
      display: block;
      opacity: 1;
    }

    /* ===== AÇILIR PENCERE (Menü Paneli) ===== */
    .tabs.nav-dropdown-menu {
      display: none;
      flex-direction: column;
      gap: 4px;
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      background: var(--bg-mid);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 8px;
      box-shadow: var(--shadow), 0 20px 50px rgba(0, 0, 0, 0.45);
      z-index: 46;
      max-height: 70vh;
      overflow-y: auto;
      animation: navMenuIn 0.18s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    body.light-theme .tabs.nav-dropdown-menu,
    body.theme-light .tabs.nav-dropdown-menu,
    [data-theme="light"] .tabs.nav-dropdown-menu,
    body.litewhite-theme .tabs.nav-dropdown-menu,
    body.theme-litewhite .tabs.nav-dropdown-menu,
    [data-theme="litewhite"] .tabs.nav-dropdown-menu {
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(15, 23, 42, 0.12);
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
    }

    body.pink-theme .tabs.nav-dropdown-menu,
    body.theme-pink .tabs.nav-dropdown-menu,
    [data-theme="pink"] .tabs.nav-dropdown-menu {
      background: rgba(255, 245, 247, 0.96);
      border: 1px solid rgba(244, 63, 94, 0.25);
      box-shadow: 0 20px 50px rgba(244, 63, 94, 0.18);
    }

    .nav-dropdown.open .tabs.nav-dropdown-menu {
      display: flex;
    }

    @keyframes navMenuIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .nav-dropdown-menu .tab {
      flex: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
      padding: 12px 14px;
      border: 1px solid transparent;
      border-radius: 13px;
      background: transparent;
      color: var(--text-s);
      font-family: var(--sans);
      font-size: 14.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .tab-label-group {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .tab-label-group svg {
      flex-shrink: 0;
      color: var(--accent);
    }

    .tab-label-group span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-dropdown-menu .tab.active {
      background: var(--accent-dim, rgba(255, 255, 255, 0.12));
      color: var(--text-p);
      border: 1px solid var(--accent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      font-weight: 700;
    }

    .nav-dropdown-menu .tab:not(.active):hover {
      color: var(--text-p);
      background: var(--bg-card-hv);
    }

    .nav-dropdown-menu .tab.active::after {
      content: '✓';
      margin-left: auto;
      color: var(--accent);
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
    }

    /* ===== NAV CATEGORY ACCORDION (ZAMAN) ===== */
    .nav-category-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 1px 0;
      border-radius: 14px;
      transition: background-color 0.2s ease;
    }

    .nav-category-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-radius: 13px;
      background: transparent;
      color: var(--text-s);
      font-family: var(--sans);
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      user-select: none;
    }

    .nav-category-header:hover {
      color: var(--text-p);
      background: var(--bg-card-hv);
    }

    .nav-category-item.open .nav-category-header {
      color: var(--text-p);
    }

    .nav-category-right {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .nav-category-chevron {
      flex-shrink: 0;
      color: var(--text-s);
      transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s ease;
    }

    .nav-category-item.open .nav-category-chevron {
      transform: rotate(180deg);
      color: var(--accent);
    }

    .nav-sub-menu {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-left: 10px;
      margin-left: 14px;
      border-left: 1.5px solid var(--border);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.22s ease, margin 0.2s ease;
    }

    .nav-category-item.open .nav-sub-menu {
      max-height: 280px;
      opacity: 1;
      margin-top: 4px;
      margin-bottom: 4px;
    }

    .nav-dropdown-menu .tab.sub-tab {
      padding: 9px 12px;
      font-size: 13.5px;
      border-radius: 11px;
      font-weight: 500;
    }

    .nav-dropdown-menu .tab.sub-tab svg {
      width: 14px;
      height: 14px;
    }

    /* ===== CANLI ÇALIŞIYOR (PULSE STATUS DOT) ===== */
    .nav-live-dot {
      width: 8px;
      height: 8px;
      min-width: 8px;
      min-height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 8px rgba(16, 185, 129, 0.9);
      animation: pulseDot 1.5s infinite ease-in-out;
      display: inline-block;
      flex-shrink: 0;
      vertical-align: middle;
    }

    .nav-dropdown-trigger .nav-live-dot {
      margin-left: 6px;
      margin-right: 2px;
    }

    .nav-dropdown-menu .tab .nav-live-dot {
      margin-left: auto;
    }

    .nav-dropdown-menu .tab.active .nav-live-dot {
      margin-left: auto;
      margin-right: 6px;
    }

    @keyframes pulseDot {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 6px rgba(16, 185, 129, 0.8);
      }
      70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0), 0 0 10px rgba(16, 185, 129, 0.6);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 6px rgba(16, 185, 129, 0.8);
      }
    }

    /* ===== MAIN CARD ===== */
    .card {
      width: 100%;
      max-width: 680px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
      /* Apple tarzı cam keskinliği ve renk doygunluğu */
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);

      /* Işık vurma efekti (Sol üst köşe daha parlak) */
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      border-left: 1px solid rgba(255, 255, 255, 0.15);

      border-radius: var(--radius);
      padding: 40px 36px;
      box-shadow: var(--shadow);
      transition: opacity 0.5s ease;
    }

    /* ===== PANELS & PAGE VIEWS ===== */
    .panel {
      display: none;
    }

    .panel.active {
      display: block;
      animation: pageViewFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sd-page-view {
      animation: pageSubViewFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      width: 100%;
    }

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

    @keyframes pageSubViewFadeIn {
      from { opacity: 0; transform: translateY(8px) scale(0.995); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Sayfa Ekmek Kırıntısı / Konum Belirteci */
    .sd-page-breadcrumb-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.07);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-s);
      letter-spacing: 0.3px;
      margin-bottom: 12px;
      user-select: none;
    }

    .sd-breadcrumb-sep {
      color: var(--text-m);
      font-size: 10px;
      margin: 0 2px;
    }

    /* ===== TAM SAYFA PANELLER (Plan / Çevrimiçi) =====
       Bu paneller artık cam-kart kutusunun (#main-card) İÇİNDE değil, DIŞINDA
       render ediliyor. Kart görünümü (blur/gölge/kenarlık) yerine, sanki
       ayrı bir site sayfasındaymış gibi tam genişlikte, şeffaf bir arkaplanla
       gösteriliyor — hem masaüstünde hem mobilde daha ferah bir deneyim. */
    .panel-fullpage {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 4px 4px 40px;
      box-sizing: border-box;
      animation: fullpageFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    /* Plan/Çevrimiçi aktifken ana kart kutusu tamamen gizlenir */
    #main-card.main-card-hidden {
      display: none !important;
    }

    /* Tam sayfa modundayken üst boşluğu biraz daraltarak sayfayı daha "site" hissettir */
    body.fullpage-mode #app {
      padding-top: 20px;
    }

    @media (max-width: 640px) {
      .panel-fullpage {
        padding: 0 2px 32px;
      }
    }

    /* ===== GENERIC BUTTONS ===== */
    .btn {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-sm);
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 500;
      padding: 14px 20px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
    }

    .btn:active {
      transform: scale(0.97) translateY(0);
    }

    .btn-accent {
      background: var(--accent-dim);
      border-color: rgba(0, 229, 176, 0.3);
      color: var(--accent);
    }

    .btn-accent:hover {
      background: rgba(0, 229, 176, 0.18);
      border-color: rgba(0, 229, 176, 0.5);
    }

    .btn-clear {
      background: rgba(255, 77, 109, 0.08);
      border-color: rgba(255, 77, 109, 0.2);
      color: var(--danger);
      font-size: 13px;
      padding: 10px 16px;
    }

    .btn-clear:hover {
      background: rgba(255, 77, 109, 0.14);
    }

    .btn-blue {
      background: rgba(0, 153, 255, 0.1);
      border-color: rgba(0, 153, 255, 0.25);
      color: var(--accent2);
    }

    .btn-blue:hover {
      background: rgba(0, 153, 255, 0.16);
    }

    .btn-lg {
      padding: 18px 24px;
      font-size: 17px;
      border-radius: var(--radius);
    }

    /* Lite Açık Tema (litewhite) Buton Kontrast Kuralları */
    body.litewhite-theme .btn,
    body.theme-litewhite .btn,
    [data-theme="litewhite"] .btn {
      background: #f4f4f4;
      border: 1px solid #d4d4d4;
      color: #1a1a1a;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    body.litewhite-theme .btn:hover,
    body.theme-litewhite .btn:hover,
    [data-theme="litewhite"] .btn:hover {
      background: #e8e8e8;
      border-color: #bebebe;
      color: #000000;
    }

    body.litewhite-theme .btn-accent,
    body.theme-litewhite .btn-accent,
    [data-theme="litewhite"] .btn-accent {
      background: rgba(59, 130, 246, 0.12);
      border: 1px solid var(--accent, #3b82f6);
      color: var(--accent, #2563eb);
    }

    body.litewhite-theme .btn-clear,
    body.theme-litewhite .btn-clear,
    [data-theme="litewhite"] .btn-clear {
      background: rgba(220, 38, 38, 0.08);
      border: 1px solid rgba(220, 38, 38, 0.25);
      color: #dc2626;
    }

    body.litewhite-theme .btn-blue,
    body.theme-litewhite .btn-blue,
    [data-theme="litewhite"] .btn-blue {
      background: rgba(37, 99, 235, 0.08);
      border: 1px solid rgba(37, 99, 235, 0.25);
      color: #2563eb;
    }

    body.litewhite-theme .sd-page-breadcrumb-wrap,
    body.theme-litewhite .sd-page-breadcrumb-wrap,
    [data-theme="litewhite"] .sd-page-breadcrumb-wrap {
      background: #ececec;
      border: 1px solid #dcdcdc;
      color: #555555;
    }

    /* ===== DIVIDER ===== */
    .divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 24px 0;
    }

    /* ===== FLOATING CONTROLS WRAPPER (Bottom Right Settings & Theme Bar) ===== */
    .floating-controls-wrapper {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .floating-controls-wrapper .theme-wrapper {
      position: relative !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .theme-trigger {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      max-width: 44px !important;
      max-height: 44px !important;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 50% !important;
      color: var(--text-p);
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer;
    }

    .theme-trigger {
      box-shadow: var(--shadow) !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      position: relative !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      outline: none !important;
    }

    .theme-trigger:hover {
      background: var(--bg-card-hv) !important;
      border-color: var(--border-hv) !important;
      transform: scale(1.08) !important;
    }

    .theme-trigger svg {
      width: 20px !important;
      height: 20px !important;
      display: block !important;
    }

    /* ===== SETTINGS MODAL / POPOVER ===== */
    body.light-theme .theme-trigger,
    body.theme-light .theme-trigger,
    [data-theme="light"] .theme-trigger,
    body.litewhite-theme .theme-trigger,
    body.theme-litewhite .theme-trigger,
    [data-theme="litewhite"] .theme-trigger {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      color: var(--text-p);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    body.light-theme .settings-select,
    body.theme-light .settings-select,
    [data-theme="light"] .settings-select,
    body.litewhite-theme .settings-select,
    body.theme-litewhite .settings-select,
    [data-theme="litewhite"] .settings-select {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      color: var(--text-p);
    }

    body.light-theme .settings-select option,
    body.theme-light .settings-select option,
    [data-theme="light"] .settings-select option,
    body.litewhite-theme .settings-select option,
    body.theme-litewhite .settings-select option,
    [data-theme="litewhite"] .settings-select option {
      background: #ffffff;
      color: var(--text-p);
    }

    body.pink-theme .theme-trigger {
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 77, 109, 0.25);
      color: var(--text-p);
    }

    /* cleaned stray properties */

    body.aero-theme .theme-trigger {
      background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
      border: 2px solid #7f9db9;
      border-radius: 0;
      color: var(--text-p);
    }

    /* removed stray properties that caused unbalanced braces */

    body.ios27-theme .theme-trigger {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(25px) saturate(210%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-top-color: rgba(255, 255, 255, 0.35);
    }

    /* removed stray properties that caused unbalanced braces */

    body.mono-theme .theme-trigger {
      background: #111111;
      border: 1px solid #333333;
      border-radius: 0;
      color: var(--text-p);
    }

    /* removed stray properties that caused unbalanced braces */

    /* ===== LINEAR PROGRESS BAR (bottom of screen) ===== */
    /* ===== DYNAMIC AMBIENT PROGRESS BAR SYSTEM ===== */
    #progress-bar-wrap {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: rgba(0, 0, 0, 0.4);
      z-index: 100;
      pointer-events: none;
      overflow: visible;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: background-color 0.4s ease;
    }

    /* Neon Dynamic Progress Line */
    #progress-bar {
      position: relative;
      height: 100%;
      width: 100%;
      background-color: var(--bar-idle, var(--accent, #0bd6a8));
      transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, box-shadow 0.4s ease;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 0 12px var(--bar-current-color, var(--accent, #0bd6a8));
      overflow: visible;
    }

    /* Uç Parlama Noktası (Leading Edge Light Spark) */
    #progress-bar::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 8px #ffffff, 0 0 16px var(--bar-current-color, var(--accent, #0bd6a8));
      opacity: 0.95;
      transition: opacity 0.3s ease, background-color 0.4s ease;
      z-index: 2;
      display: block;
    }

    /* Width == 0% when empty -> hide spark dot */
    #progress-bar[style*="width: 0%"]::after,
    #progress-bar[style*="width: 0.0%"]::after,
    #progress-bar[style*="width: 0.00%"]::after {
      opacity: 0 !important;
      display: none !important;
    }

    /* Akıcı Şerit Animasyonu (Shimmer / Pulse Wave) */
    #progress-bar.shimmer::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
      animation: barShimmer 2.2s linear infinite;
      z-index: 1;
    }

    @keyframes barShimmer {
      0% {
        left: -100%;
      }

      100% {
        left: 100%;
      }
    }

    /* Kritik Süre Nefes Alma / Pulse Animasyonu (<%10 Kalan Süre) */
    #progress-bar.bar-critical-pulse {
      animation: barCriticalPulse 0.9s ease-in-out infinite alternate !important;
    }

    @keyframes barCriticalPulse {
      0% {
        opacity: 0.75;
        box-shadow: 0 0 8px #ef4444;
      }

      100% {
        opacity: 1;
        box-shadow: 0 0 24px #ef4444, 0 0 36px #ff3b30;
      }
    }

    /* Tamamlanma Bitiş Efekti (3 Kez Çakar Alert) */
    #progress-bar-wrap.finish-flash {
      animation: finishFlash 0.5s ease-in-out 3 !important;
    }

    @keyframes finishFlash {

      0%,
      100% {
        background: rgba(0, 0, 0, 0.4);
      }

      50% {
        background: rgba(239, 68, 68, 0.8);
      }
    }

    /* Odak Modunda Mat Görünüm */
    body.focus-mode #progress-bar {
      background-color: #4a5568 !important;
      box-shadow: none !important;
    }

    body.focus-mode #progress-bar::after {
      display: none !important;
      opacity: 0 !important;
    }

    body.focus-mode #progress-bar::before {
      display: none !important;
    }

    /* ===== MISC ===== */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

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

    .section-sub {
      font-size: 11px;
      color: var(--text-m);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 12px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 520px) {
      .card {
        padding: 24px 16px;
      }

      .nav-dropdown-trigger {
        padding: 12px 14px;
        font-size: 14px;
      }

      .tabs.nav-dropdown-menu {
        left: 0;
        right: 0;
        max-height: 60vh;
      }

      .nav-dropdown-menu .tab {
        font-size: 14px;
        padding: 12px 12px;
      }

      .cd-quick {
        gap: 8px;
      }

      .sw-controls {
        gap: 8px;
      }

      .header-actions {
        gap: 6px;
      }

      .icon-btn {
        padding: 8px 10px;
        font-size: 12px;
      }
    }

    @media (max-width: 380px) {
      .icon-btn span {
        display: none;
      }

      /* show only icon on very small */
    }

    /* Odak modunda sınav bitiş bilgisi animasyonu */
    #focus-exam-status {
      animation: fadeIn 0.4s ease;
    }

    /* Odak modunda bar rengini zorla gri yap */
    body.focus-mode #progress-bar {
      background-color: #4a5568 !important;
      /* Koyu gri */
      box-shadow: none !important;
      transition: background-color 0.5s ease;
    }