/* =====================================================
   SAATDURUM — COMPONENTS STYLES
   Clock, Countdown, Stopwatch, Reminders, Online, Studio & Plan
===================================================== */

/* ===== TIME DISPLAY ===== */
    .time-display {
      text-align: center;
      margin-bottom: 32px;
    }

    .time-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2.5px;
      color: var(--text-m);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    /*
  LARGE TIME — colons are static (no blink)
  font-variant-numeric: tabular-nums prevents digit-width jitter
*/
    .time-big {
      font-family: var(--mono);
      font-size: clamp(72px, 18vw, 130px);
      font-weight: 700;
      letter-spacing: -4px;
      line-height: 1;
      color: var(--text-p);
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 80px rgba(0, 229, 176, 0.08);
    }

    /* Colons — solid, no animation */
    .time-big .sep {
      color: var(--text-m);
    }

    .time-date {
      font-size: 14px;
      color: var(--text-s);
      margin-top: 14px;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    /* ===== EXAM END TIME RESULT ===== */
    .exam-result {
      background: rgba(0, 229, 176, 0.07);
      border: 1px solid rgba(0, 229, 176, 0.2);
      border-radius: var(--radius-sm);
      padding: 20px 24px;
      text-align: center;
      margin-top: 24px;
      animation: fadeIn 0.35s ease;
    }

    .exam-result-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .exam-result-time {
      font-family: var(--mono);
      font-size: clamp(40px, 10vw, 64px);
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -2px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .exam-result-info {
      font-size: 12px;
      color: var(--text-s);
      margin-top: 8px;
    }

    /* ===== EXAM QUICK PRESET GRID & CONTROLS ===== */
    .exam-presets-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .preset-card-wrap {
      position: relative;
      flex: 1;
      min-width: 130px;
    }

    .preset-card-wrap .btn-preset {
      width: 100%;
      padding: 14px 16px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: var(--radius-sm);
      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .preset-remove-btn {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      background: var(--danger);
      color: var(--accent-text);
      border: none;
      border-radius: 50%;
      font-size: 13px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      z-index: 10;
    }

    .preset-card-wrap:hover .preset-remove-btn {
      opacity: 1;
      transform: scale(1);
    }

    .btn-add-preset {
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.08);
      border: 1px dashed var(--border-hv);
      color: var(--text-p);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
      flex-shrink: 0;
    }

    .btn-add-preset:hover {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--accent);
      transform: scale(1.05);
    }

    /* ===== ADD PRESET FORM ===== */
    .add-preset-form {
      background: var(--bg-card, rgba(0, 0, 0, 0.25));
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 18px;
      margin-top: 14px;
      animation: fadeIn 0.3s ease;
    }

    .add-preset-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
    }

    .add-preset-inputs {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
    }

    .add-preset-inputs input {
      flex: 1;
      background: var(--bg-mid, rgba(0, 0, 0, 0.2));
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 13.5px;
      padding: 10px 14px;
      outline: none;
      transition: all 0.25s ease;
    }

    .add-preset-inputs input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .add-preset-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .btn-pause {
      background: rgba(239, 68, 68, 0.14) !important;
      border-color: rgba(239, 68, 68, 0.4) !important;
      color: #ef4444 !important;
    }

    .btn-pause:hover {
      background: rgba(239, 68, 68, 0.22) !important;
      border-color: rgba(239, 68, 68, 0.6) !important;
      color: #f87171 !important;
    }

    /* ===== STOPWATCH ===== */
    .sw-display {
      text-align: center;
      margin-bottom: 28px;
    }

    .sw-time {
      font-family: var(--mono);
      font-size: clamp(58px, 14vw, 110px);
      font-weight: 700;
      letter-spacing: -3px;
      font-variant-numeric: tabular-nums;
      color: var(--text-p);
      line-height: 1;
    }

    .sw-ms {
      font-size: clamp(32px, 8vw, 58px);
      color: var(--text-s);
      font-weight: 400;
    }

    .sw-controls {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }

    /* ===== LAP LIST ===== */
    .lap-list {
      max-height: 220px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .lap-list::-webkit-scrollbar {
      width: 4px;
    }

    .lap-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .lap-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }

    .lap-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      animation: fadeIn 0.2s ease;
    }

    .lap-item:last-child {
      border-bottom: none;
    }

    .lap-num {
      color: var(--text-m);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.5px;
      min-width: 52px;
    }

    .lap-time {
      font-family: var(--mono);
      color: var(--text-p);
      font-size: 15px;
      font-variant-numeric: tabular-nums;
    }

    .lap-split {
      font-family: var(--mono);
      color: var(--text-s);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .lap-item.best .lap-time {
      color: var(--accent);
    }

    .lap-item.worst .lap-time {
      color: var(--danger);
    }

    .lap-empty {
      text-align: center;
      color: var(--text-m);
      font-size: 14px;
      padding: 20px 0;
    }

    /* ===== COUNTDOWN TIME (no ring, big digits) ===== */
    .cd-time-wrap {
      text-align: center;
      margin-bottom: 24px;
      padding: 28px 0;
    }

    .cd-time {
      font-family: var(--mono);
      font-size: clamp(68px, 17vw, 128px);
      font-weight: 700;
      letter-spacing: -4px;
      font-variant-numeric: tabular-nums;
      color: var(--text-p);
      line-height: 1;
      transition: color 0.5s ease;
    }

    .cd-time .sep {
      color: var(--text-m);
    }

    .cd-time.warning {
      color: var(--warn);
    }

    .cd-time.warning .sep {
      color: var(--warn);
      opacity: 0.5;
    }

    .cd-time.danger {
      color: var(--danger);
    }

    .cd-time.danger .sep {
      color: var(--danger);
      opacity: 0.5;
    }

    .cd-pct {
      font-size: 13px;
      color: var(--text-s);
      margin-top: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    /* ===== COUNTDOWN QUICK PRESETS & STEPPER ===== */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    .manual-input-wrapper {
      margin-bottom: 14px;
    }

    .manual-stepper-row {
      display: flex;
      gap: 10px;
      align-items: center;
      width: 100%;
    }

    .stepper-box {
      flex: 1;
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 4px;
      gap: 4px;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      transition: all 0.3s;
    }

    .stepper-box:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .step-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--text-p);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      flex-shrink: 0;
    }

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

    .step-btn:active {
      transform: scale(0.93) translateY(0);
      background: rgba(255, 255, 255, 0.05);
    }

    .stepper-box input#cd-input {
      flex: 1;
      min-width: 44px;
      background: transparent;
      border: none;
      border-radius: 0;
      color: var(--text-p);
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      outline: none;
      box-shadow: none;
      padding: 4px 0;
      font-variant-numeric: tabular-nums;
    }

    .cd-set-btn {
      white-space: nowrap;
      padding: 12px 22px;
      height: 48px;
      flex-shrink: 0;
    }

    .subject-input-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .subject-input-row input {
      flex: 1;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 13px;
      padding: 10px 14px;
      outline: none;
      transition: all 0.3s;
    }

    .subject-input-row input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .sound-toggle-btn {
      padding: 8px 14px;
      height: 38px;
      font-size: 12px;
      flex-shrink: 0;
    }

    .cd-quick-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .chip-btn {
      flex: 1;
      min-width: 65px;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 10px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
      text-align: center;
      white-space: nowrap;
    }

    .chip-btn:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: var(--border-hv);
      transform: translateY(-1px);
    }

    .chip-btn:active {
      transform: scale(0.96);
    }

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

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

    .cd-subject-tag {
      display: inline-block;
      background: var(--accent-dim);
      border: 1px solid rgba(0, 229, 176, 0.25);
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      padding: 4px 14px;
      border-radius: 50px;
      margin-top: 8px;
      animation: fadeIn 0.3s ease;
    }

    .cd-live-adjust {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      animation: fadeIn 0.3s ease;
    }

    .cd-live-adjust .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 50px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--border);
      color: var(--text-p);
    }

    .cd-controls {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 10px;
    }

    /* ===== THEME OVERRIDES FOR STEPPER & PRESET CONTROLS ===== */
    body.light-theme .stepper-box,
    body.theme-light .stepper-box,
    [data-theme="light"] .stepper-box,
    body.litewhite-theme .stepper-box,
    body.theme-litewhite .stepper-box,
    [data-theme="litewhite"] .stepper-box {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    body.light-theme .step-btn,
    body.theme-light .step-btn,
    [data-theme="light"] .step-btn,
    body.litewhite-theme .step-btn,
    body.theme-litewhite .step-btn,
    [data-theme="litewhite"] .step-btn {
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.12);
      color: var(--text-p);
    }

    body.light-theme .step-btn:hover,
    body.theme-light .step-btn:hover,
    [data-theme="light"] .step-btn:hover,
    body.litewhite-theme .step-btn:hover,
    body.theme-litewhite .step-btn:hover,
    [data-theme="litewhite"] .step-btn:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    body.light-theme .chip-btn,
    body.theme-light .chip-btn,
    [data-theme="light"] .chip-btn,
    body.litewhite-theme .chip-btn,
    body.theme-litewhite .chip-btn,
    [data-theme="litewhite"] .chip-btn {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.15);
      color: var(--text-p);
    }

    body.pink-theme .stepper-box {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 77, 109, 0.2);
    }

    body.pink-theme .step-btn {
      background: rgba(255, 77, 109, 0.08);
      border: 1px solid rgba(255, 77, 109, 0.15);
      color: var(--text-p);
    }

    body.pink-theme .step-btn:hover {
      background: rgba(255, 77, 109, 0.18);
    }

    body.pink-theme .chip-btn {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 77, 109, 0.2);
      color: var(--text-p);
    }

    body.theme-aero .stepper-box,
    body.aero-theme .stepper-box,
    [data-theme="aero"] .stepper-box {
      background: rgba(4, 20, 48, 0.85);
      border: 1px solid rgba(0, 168, 255, 0.25);
      border-radius: 8px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
    }

    body.theme-aero .step-btn,
    body.aero-theme .step-btn,
    [data-theme="aero"] .step-btn {
      background: rgba(0, 168, 255, 0.12);
      border: 1px solid rgba(0, 168, 255, 0.25);
      color: #ffffff;
      border-radius: 6px;
    }

    body.theme-aero .step-btn:hover,
    body.aero-theme .step-btn:hover,
    [data-theme="aero"] .step-btn:hover {
      background: rgba(0, 168, 255, 0.25);
      border-color: #00a8ff;
      color: #ffffff;
      box-shadow: 0 0 8px rgba(0, 168, 255, 0.4);
    }

    body.theme-aero .chip-btn,
    body.aero-theme .chip-btn,
    [data-theme="aero"] .chip-btn {
      background: rgba(0, 168, 255, 0.1);
      border: 1px solid rgba(0, 168, 255, 0.25);
      color: #ffffff;
    }

    body.purple-theme .stepper-box {
      background: rgba(15, 2, 25, 0.5);
      border: 1px solid rgba(168, 85, 247, 0.3);
    }

    body.purple-theme .step-btn {
      background: rgba(126, 34, 206, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.3);
      color: var(--text-p);
    }

    body.ios27-theme .stepper-box {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(25px) saturate(210%);
      -webkit-backdrop-filter: blur(25px) saturate(210%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-top-color: rgba(255, 255, 255, 0.32);
      border-radius: 20px;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    body.ios27-theme .step-btn {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-top-color: rgba(255, 255, 255, 0.4);
      border-radius: 12px;
      color: var(--text-p);
    }

    /* ===== MONO TEMA ÖZEL MİMARİSİ VE ÖZEL DİNAMİK AYARLARI ===== */
    body.mono-theme {
      --bg-deep: #000000;
      --bg-mid: #0a0a0a;
      --bg-card: #111111;
      --bg-card-hv: #1a1a1a;
      --border: #282828;
      --border-hv: #444444;
      --text-p: #ffffff;
      --text-s: #888888;
      --text-m: #555555;
      --accent: #ffffff;
      --accent-soft: rgba(255, 255, 255, 0.15);
      --accent-text: #000000;
      --radius: 0px;
      --radius-sm: 0px;
      --shadow: none;
      background: #000000 !important;
    }

    body.mono-theme::before,
    body.mono-theme::after,
    body.mono-theme .card::before,
    body.mono-theme .card::after {
      display: none !important;
      background: none !important;
      content: none !important;
    }

    /* ═════════════════════════════════════════════════════════════════════
   MONOCHROME // SURREAL — EDITORIAL EXHIBITION THEME CONCEPT
   ═════════════════════════════════════════════════════════════════════ */

    /* 1. Arkaplan Radyal Gradyanı & Temel Renkler */
    body.mono-theme {
      background-color: #050507 !important;
    }

    body.mono-theme::before {
      content: '' !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: radial-gradient(circle at 50% 40%, #1d1d21 0%, #0c0c0f 55%, #050507 100%) !important;
      z-index: -2 !important;
      pointer-events: none !important;
    }

    /* Köşe Editoryal Metinleri (Micro-Labels) */
    .mono-editorial-label {
      display: none;
      position: fixed;
      font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
      font-size: 0.65rem;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.35);
      text-transform: uppercase;
      z-index: 10;
      pointer-events: none;
      user-select: none;
    }

    body.mono-theme .mono-editorial-label {
      display: block;
    }

    .mono-editorial-tl {
      top: 20px;
      left: 24px;
    }

    .mono-editorial-tr {
      top: 20px;
      right: 24px;
    }

    .mono-editorial-bl {
      bottom: 22px;
      left: 80px;
    }

    /* 2. Logo ve Üst Header Bar */
    body.mono-theme .logo {
      font-family: 'Playfair Display', 'Cinzel', serif !important;
      font-size: 1.25rem !important;
      font-weight: 500 !important;
      letter-spacing: 4px !important;
      color: #ffffff !important;
      text-transform: uppercase !important;
      background: none !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    body.mono-theme .logo span {
      font-weight: 300 !important;
      opacity: 0.85 !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      letter-spacing: 4px !important;
    }

    body.mono-theme .header-actions .icon-btn {
      background: rgba(255, 255, 255, 0.04) !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      border-radius: 4px !important;
      color: #ffffff !important;
      font-family: 'Space Grotesk', sans-serif !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      padding: 6px 12px !important;
      transition: all 0.18s ease !important;
    }

    body.mono-theme .header-actions .icon-btn:hover {
      background: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
    }

    body.mono-theme .header-actions .icon-btn:hover svg {
      stroke: #000000 !important;
    }

    /* 3. Sekmeler (Tabs - Editoryal Yapı) */
    body.mono-theme .tabs {
      background: rgba(0, 0, 0, 0.4) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 4px !important;
      padding: 4px !important;
      max-width: 580px !important;
      margin: 0 auto 20px auto !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.mono-theme .tab {
      background: transparent !important;
      border: 1px solid transparent !important;
      border-radius: 2px !important;
      color: rgba(255, 255, 255, 0.5) !important;
      font-family: 'Space Grotesk', sans-serif !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      transition: all 0.18s ease !important;
    }

    body.mono-theme .tab:not(.active):hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: #ffffff !important;
    }

    body.mono-theme .tab.active {
      background: #ffffff !important;
      color: #000000 !important;
      border: 1px solid #ffffff !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    body.mono-theme .tab.active svg {
      stroke: #000000 !important;
      color: #000000 !important;
    }

    body.mono-theme .tab:not(.active) svg {
      stroke: rgba(255, 255, 255, 0.5) !important;
    }

    body.mono-theme .tab:not(.active):hover svg {
      stroke: #ffffff !important;
    }

    /* 4. Ana Kart (#main-card) & Sergileme Etiketleri */
    body.mono-theme .card,
    body.mono-theme.card-frame-default .card,
    body.mono-theme:not([class*="card-frame-"]) .card {
      background: #0d0d10 !important;
      border: 1px solid #222228 !important;
      border-radius: 6px !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      padding-top: 48px !important;
      position: relative !important;
    }

    body.mono-theme .card::before {
      content: 'TEMPORAL EXHIBITION // N° 01' !important;
      position: absolute !important;
      top: 18px !important;
      left: 24px !important;
      font-family: 'JetBrains Mono', 'Space Grotesk', monospace !important;
      font-size: 9px !important;
      letter-spacing: 2px !important;
      color: rgba(255, 255, 255, 0.35) !important;
      text-transform: uppercase !important;
      display: block !important;
    }

    body.mono-theme .card::after {
      content: '' !important;
      position: absolute !important;
      top: 20px !important;
      right: 24px !important;
      width: 7px !important;
      height: 7px !important;
      background: rgba(255, 255, 255, 0.7) !important;
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.3) !important;
      display: block !important;
    }

    /* Şehir Etiketi */
    body.mono-theme .time-label {
      font-family: 'Space Grotesk', sans-serif !important;
      font-size: 10px !important;
      letter-spacing: 4px !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.5) !important;
      font-weight: 500 !important;
      margin-bottom: 12px !important;
      text-align: center !important;
    }

    /* Tarih Metni */
    body.mono-theme #clock-date {
      font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
      font-style: italic !important;
      font-size: 1.25rem !important;
      font-weight: 400 !important;
      letter-spacing: 1px !important;
      color: rgba(255, 255, 255, 0.75) !important;
      margin-top: 14px !important;
      text-align: center !important;
    }

    /* 5. Saat Rakamları ve Kolonlar (:) */
    body.mono-theme .time-big,
    body.mono-theme .sw-time,
    body.mono-theme .cd-time {
      font-family: var(--font-clock, 'Syne', sans-serif) !important;
      font-weight: var(--clock-active-weight, 800) !important;
      font-size: calc(var(--clock-scale-pct, 100) * 0.01 * clamp(36px, 7.5vw, 84px)) !important;
      letter-spacing: var(--clock-active-spacing, 0px) !important;
      white-space: nowrap !important;
      color: #ffffff !important;
      background: none !important;
      -webkit-text-fill-color: #ffffff !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-align: center !important;
      justify-content: center !important;
      align-items: center !important;
      box-sizing: border-box !important;
      margin: 0 auto !important;
    }

    body.mono-theme.focus-mode .time-big,
    body.mono-theme.focus-mode .sw-time,
    body.mono-theme.focus-mode .cd-time {
      font-size: min(calc(clamp(1.8rem, 10.5vw, 8rem) * (var(--focus-clock-scale, 100) / 100) * (var(--clock-scale-pct, 100) / 100)), 11.5vw, 18vh) !important;
      white-space: nowrap !important;
    }

    body.mono-theme .sep,
    body.mono-theme .clock-colon {
      display: inline-flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 7px !important;
      vertical-align: middle !important;
      margin: 0 6px !important;
      width: 12px !important;
      height: 0.8em !important;
      font-size: 0 !important;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      background: none !important;
      flex-shrink: 0 !important;
    }

    body.mono-theme .sep::before,
    body.mono-theme .sep::after,
    body.mono-theme .clock-colon::before,
    body.mono-theme .clock-colon::after {
      content: '' !important;
      width: 7px !important;
      height: 7px !important;
      background: var(--clock-colon-color, rgba(255, 255, 255, 0.35)) !important;
      border-radius: 1px !important;
      display: block !important;
      flex-shrink: 0 !important;
    }

    /* 6. Sınav Bitiş Hesaplayıcı ve Preset Butonları */
    body.mono-theme .section-sub {
      font-family: 'Space Grotesk', sans-serif !important;
      font-size: 11px !important;
      letter-spacing: 2px !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.6) !important;
      font-weight: 600 !important;
    }

    body.mono-theme #exam-calc-section p {
      font-family: 'Inter', sans-serif !important;
      font-size: 12px !important;
      color: rgba(255, 255, 255, 0.4) !important;
    }

    body.mono-theme .preset-card-wrap:first-child .btn-preset {
      background: #ffffff !important;
      color: #000000 !important;
      border: 1px solid #ffffff !important;
      font-weight: 800 !important;
      font-family: 'Space Grotesk', sans-serif !important;
      border-radius: 4px !important;
    }

    body.mono-theme .preset-card-wrap:first-child .btn-preset svg {
      stroke: #000000 !important;
      color: #000000 !important;
    }

    body.mono-theme .preset-card-wrap:first-child .btn-preset small {
      color: #000000 !important;
      opacity: 0.8 !important;
      font-weight: 700 !important;
    }

    body.mono-theme .preset-card-wrap:not(:first-child) .btn-preset {
      background: #222226 !important;
      border: 1px solid #33333e !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-family: 'Space Grotesk', sans-serif !important;
      border-radius: 4px !important;
    }

    body.mono-theme .preset-card-wrap:not(:first-child) .btn-preset svg {
      stroke: #ffffff !important;
      color: #ffffff !important;
    }

    body.mono-theme .preset-card-wrap:not(:first-child) .btn-preset small {
      color: #ffffff !important;
      opacity: 0.7 !important;
    }

    body.mono-theme .btn-add-preset {
      background: #222226 !important;
      border: 1px solid #33333e !important;
      color: #ffffff !important;
      border-radius: 4px !important;
      width: 44px !important;
      height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 16px !important;
    }

    body.mono-theme .btn-add-preset:hover {
      background: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
    }

    body.mono-theme .stepper-box {
      background: #0d0d10 !important;
      border: 1px solid #222228 !important;
      border-radius: 4px !important;
    }

    body.mono-theme .step-btn {
      background: #222226 !important;
      border: 1px solid #33333e !important;
      border-radius: 2px !important;
      color: #ffffff !important;
    }

    body.mono-theme .step-btn:hover {
      background: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
    }

    body.mono-theme .chip-btn {
      background: #222226 !important;
      border: 1px solid #33333e !important;
      border-radius: 4px !important;
      color: #ffffff !important;
      font-family: 'Space Grotesk', sans-serif !important;
      text-transform: uppercase;
    }

    body.mono-theme .chip-btn:hover {
      background: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
    }

    /* ===== FOCUS MODE ===== */
    /* ===== FOCUS MODE ===== */
    body.focus-mode header,
    body.focus-mode .tabs,
    body.focus-mode .nav-dropdown,
    body.focus-mode .floating-controls-wrapper,
    body.focus-mode .theme-wrapper,
    body.focus-mode .card>.panel.active .exam-btns,
    body.focus-mode .card>.panel.active .exam-presets-container,
    body.focus-mode .card>.panel.active #exam-presets-grid,
    body.focus-mode .card>.panel.active #add-preset-form,
    body.focus-mode .card>.panel.active .add-preset-form,
    body.focus-mode .card>.panel.active .btn-add-preset,
    body.focus-mode .card>.panel.active .preset-card-wrap,
    body.focus-mode .card>.panel.active .exam-result,
    body.focus-mode .card>.panel.active .divider,
    body.focus-mode .card>.panel.active .section-sub,
    body.focus-mode .card>.panel.active .sw-controls,
    body.focus-mode .card>.panel.active .lap-list,
    body.focus-mode .card>.panel.active .cd-quick,
    body.focus-mode .card>.panel.active .cd-quick-chips,
    body.focus-mode .card>.panel.active .manual-input-row,
    body.focus-mode .card>.panel.active .manual-input-wrapper,
    body.focus-mode .card>.panel.active #cd-live-adjust,
    body.focus-mode .card>.panel.active #cd-subject-tag,
    body.focus-mode .card>.panel.active .cd-controls,
    body.focus-mode .card>.panel.active #cd-label,
    body.focus-mode .card>.panel.active #cd-pct,
    body.focus-mode .card>.panel.active .time-date,
    body.focus-mode .card>.panel.active .time-label,
    body.focus-mode .card>.panel.active .sw-display>.time-label,
    body.focus-mode .card>.panel.active p {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease;
    }

    body.focus-mode .card,
    body.focus-mode #main-card,
    body.focus-mode.studio-customized .card,
    body.focus-mode.studio-customized #main-card,
    body.focus-mode.aero-theme .card,
    body.focus-mode.purple-theme .card,
    body.focus-mode.mono-theme .card,
    body.focus-mode.pink-theme .card,
    body.focus-mode.light-theme .card,
    body.focus-mode [class*="card"] {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 auto !important;
      min-height: auto !important;
      max-width: none !important;
      width: 100% !important;
    }

    body.focus-mode .card::before,
    body.focus-mode .card::after,
    body.focus-mode #main-card::before,
    body.focus-mode #main-card::after,
    body.focus-mode [class*="card"]::before,
    body.focus-mode [class*="card"]::after,
    body.focus-mode::before,
    body.focus-mode::after,
    body.focus-mode #app::before,
    body.focus-mode #app::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    body.focus-mode #progress-bar-wrap,
    body.focus-mode #progress-bar,
    body.focus-mode .ambient-glow-layer,
    body.focus-mode .mobile-bottom-nav,
    body.focus-mode #mobile-bottom-nav {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    body.focus-mode #app {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 100vh !important;
      min-height: 100dvh !important;
      height: 100vh !important;
      height: 100dvh !important;
      padding: 0 !important;
      margin: 0 auto !important;
      box-sizing: border-box;
      overflow: hidden !important;
    }

    /* Dynamic Theme Studio Scalable Clock in Focus Mode */
    body.focus-mode .time-big,
    body.focus-mode .sw-time,
    body.focus-mode .cd-time {
      opacity: 1 !important;
      pointer-events: auto;
      font-family: var(--clock-font, var(--font-clock, inherit)) !important;
      font-size: min(calc(clamp(1.8rem, 10.5vw, 8rem) * (var(--focus-clock-scale, 100) / 100) * (var(--clock-scale-pct, 100) / 100)), 11.5vw, 18vh) !important;
      line-height: 1.05 !important;
      color: var(--clock-render-color, var(--text-p, #ffffff)) !important;
      text-shadow: none !important;
      filter: none !important;
      box-shadow: none !important;
      white-space: nowrap !important;
      letter-spacing: -0.02em;
      margin: 0 auto !important;
      text-align: center !important;
      max-width: 95vw !important;
      box-sizing: border-box !important;
      transition: font-size 0.2s ease, color 0.2s ease;
    }

    body.focus-mode .sw-ms {
      font-size: 0.55em !important;
      opacity: 0.8 !important;
    }

    body.focus-mode .time-big .clock-colon,
    body.focus-mode .sw-time .clock-colon,
    body.focus-mode .cd-time .clock-colon {
      color: var(--clock-colon-color, var(--clock-render-color, var(--text-p))) !important;
    }

    body.focus-mode {
      background: #000000 !important;
      background-image: none !important;
    }

    body.theme-light.focus-mode,
    body.light-theme.focus-mode,
    [data-theme="light"].focus-mode,
    body.theme-litewhite.focus-mode,
    body.litewhite-theme.focus-mode,
    [data-theme="litewhite"].focus-mode {
      background: #f8fafc !important;
    }

    body.focus-mode::before,
    body.focus-mode::after {
      display: none !important;
    }

    /* ── FOCUS TOP EXIT BUTTON CONTAINER ── */
    .focus-top-bar {
      position: fixed;
      top: 20px;
      right: 20px;
      left: auto;
      width: auto;
      height: auto;
      z-index: 1200;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0;
      padding: 0;
      margin: 0;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      pointer-events: auto;
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.theme-light .focus-top-bar,
    body.light-theme .focus-top-bar,
    [data-theme="light"] .focus-top-bar,
    body.theme-litewhite .focus-top-bar,
    body.litewhite-theme .focus-top-bar,
    [data-theme="litewhite"] .focus-top-bar {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .focus-bar-left,
    .focus-bar-center,
    #focus-btn-settings {
      display: none !important;
    }

    body.focus-mode.cursor-hidden .focus-top-bar,
    body.focus-mode.cursor-hidden #focus-exit {
      opacity: 0 !important;
      transform: translateY(-12px) !important;
      pointer-events: none !important;
    }

    .focus-top-bar:hover,
    .focus-top-bar:hover #focus-exit {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }

    .focus-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .focus-mode-indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent, #0bd6a8);
      box-shadow: 0 0 10px var(--accent, #0bd6a8);
      flex-shrink: 0;
    }

    .focus-bar-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-p, #ffffff);
      white-space: nowrap;
      letter-spacing: 0.2px;
    }

    .focus-bar-center {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      flex-wrap: wrap;
    }

    .focus-bar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .focus-bar-btn {
      background: var(--bg-card, rgba(255, 255, 255, 0.06));
      border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
      border-radius: var(--radius-button, 8px);
      color: var(--text-p, #ffffff);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.18s ease;
      outline: none;
      white-space: nowrap;
      user-select: none;
    }

    body.theme-light .focus-bar-btn,
    body.light-theme .focus-bar-btn,
    [data-theme="light"] .focus-bar-btn,
    body.theme-litewhite .focus-bar-btn,
    body.litewhite-theme .focus-bar-btn,
    [data-theme="litewhite"] .focus-bar-btn {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.12);
      color: #0f172a;
    }

    .focus-bar-btn:hover {
      background: var(--bg-card-hv, rgba(255, 255, 255, 0.12));
      border-color: var(--accent, #0bd6a8);
      color: var(--accent, #0bd6a8);
    }

    .focus-bar-btn.is-start {
      background: rgba(16, 185, 129, 0.15);
      border-color: rgba(16, 185, 129, 0.4);
      color: #10b981;
    }

    .focus-bar-btn.is-running {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.4);
      color: #ef4444;
    }

    .focus-bar-btn.active {
      background: var(--accent, #0bd6a8);
      color: var(--accent-text, #000000);
      border-color: var(--accent, #0bd6a8);
      font-weight: 700;
    }

    .focus-bar-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .focus-bar-chip {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 11.5px;
      color: var(--text-s, rgba(255, 255, 255, 0.7));
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .focus-bar-chip.highlight {
      background: var(--accent-dim, rgba(11, 214, 168, 0.12));
      border-color: var(--accent, #0bd6a8);
      color: var(--text-p, #ffffff);
    }

    body.theme-light .focus-bar-chip.highlight,
    body.light-theme .focus-bar-chip.highlight,
    [data-theme="light"] .focus-bar-chip.highlight,
    body.theme-litewhite .focus-bar-chip.highlight,
    body.litewhite-theme .focus-bar-chip.highlight,
    [data-theme="litewhite"] .focus-bar-chip.highlight {
      color: #0f172a;
    }

    .focus-btn-action {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
      border-radius: var(--radius-button, 8px);
      color: var(--text-p, #ffffff);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.18s ease;
      white-space: nowrap;
    }

    body.theme-light .focus-btn-action,
    body.light-theme .focus-btn-action,
    [data-theme="light"] .focus-btn-action,
    body.theme-litewhite .focus-btn-action,
    body.litewhite-theme .focus-btn-action,
    [data-theme="litewhite"] .focus-btn-action {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.12);
      color: #0f172a;
    }

    .focus-btn-action:hover {
      background: var(--bg-card-hv, rgba(255, 255, 255, 0.14));
      border-color: var(--accent, #0bd6a8);
      color: var(--accent, #0bd6a8);
    }

    .focus-btn-exit {
      background: rgba(18, 18, 24, 0.82) !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 24px !important;
      color: #ffffff !important;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 16px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      user-select: none;
    }

    body.theme-light .focus-btn-exit,
    body.light-theme .focus-btn-exit,
    [data-theme="light"] .focus-btn-exit,
    body.theme-litewhite .focus-btn-exit,
    body.litewhite-theme .focus-btn-exit,
    [data-theme="litewhite"] .focus-btn-exit {
      background: rgba(255, 255, 255, 0.9) !important;
      border: 1px solid rgba(0, 0, 0, 0.12) !important;
      color: #0f172a !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .focus-btn-exit:hover {
      background: #ef4444 !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;
      transform: translateY(-1px) scale(1.03);
      box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45);
    }

    /* Hide cursor in focus mode after inactivity */
    body.focus-mode.cursor-hidden * {
      cursor: none !important;
    }

    @media (max-width: 768px) {
      .focus-top-bar {
        top: 14px;
        right: 14px;
        padding: 0;
      }
      body.focus-mode #app {
        padding: 0 !important;
      }
      body.focus-mode .time-big,
      body.focus-mode .sw-time,
      body.focus-mode .cd-time {
        font-size: min(calc(clamp(1.6rem, 10vw, 5rem) * (var(--focus-clock-scale, 100) / 100) * (var(--clock-scale-pct, 100) / 100)), 11vw, 16vh) !important;
      }
    }

    @media (max-width: 480px) {
      body.focus-mode .time-big,
      body.focus-mode .sw-time,
      body.focus-mode .cd-time {
        font-size: min(calc(clamp(1.4rem, 9.5vw, 3.6rem) * (var(--focus-clock-scale, 100) / 100) * (var(--clock-scale-pct, 100) / 100)), 10.5vw, 14vh) !important;
      }
    }

    /* ===== REMINDERS (HATIRLATICILAR) COMPONENT STYLES ===== */
    #panel-reminders {
      animation: fadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .reminders-header {
      text-align: center;
      margin-bottom: 22px;
    }

    .reminders-title-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .reminders-eyebrow {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text-s);
      font-weight: 600;
      margin-bottom: 0 !important;
    }

    .reminders-mono-tag {
      display: none;
    }

    body.mono-theme .reminders-mono-tag {
      display: inline-block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 10px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1px 6px;
      border-radius: 2px;
    }

    .reminders-desc {
      font-size: 13px;
      color: var(--text-s);
      line-height: 1.5;
      margin: 0;
    }

    /* ── 1. YKS 2027 PINNED CARD ── */
    .yks-pinned-card {
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 24px 20px;
      margin-bottom: 20px;
      text-align: center;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .yks-pinned-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
      opacity: 0.8;
    }

    .yks-pinned-card:hover {
      border-color: var(--border-hv);
      transform: translateY(-2px);
    }

    .yks-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 50px;
      margin-bottom: 12px;
    }

    .yks-card-badge svg {
      stroke: var(--accent);
    }

    .yks-card-header {
      margin-bottom: 10px;
    }

    .yks-title {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: var(--text-p);
      margin-bottom: 2px;
    }

    .yks-subtitle {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-m);
    }

    .yks-counter-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      margin: 14px 0 10px 0;
    }

    .yks-counter-number {
      font-family: var(--font-clock, var(--mono));
      font-size: clamp(44px, 10vw, 68px);
      font-weight: 800;
      line-height: 1;
      color: var(--accent);
      letter-spacing: -1px;
      text-shadow: 0 0 30px var(--accent-dim);
    }

    .yks-counter-unit {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--text-s);
      text-transform: uppercase;
    }

    .yks-detail-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px;
      color: var(--text-s);
      margin-top: 8px;
    }

    .yks-detail-sep {
      opacity: 0.4;
    }

    .yks-target-date {
      font-weight: 600;
      color: var(--text-p);
    }

    /* ── 2. ACTION BAR & ADD BUTTON ── */
    .reminders-action-bar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 18px;
    }

    .btn-add-reminder {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    /* ── 3. EXPANDABLE INLINE REMINDER FORM ── */
    .reminder-form-box {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 20px;
      margin-bottom: 24px;
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      animation: fadeIn 0.25s ease;
    }

    .reminder-form-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-p);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .reminder-field {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .reminder-form-row {
      display: flex;
      gap: 12px;
    }

    .reminder-form-row .flex-1 {
      flex: 1;
      min-width: 0;
    }

    .reminder-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-s);
      letter-spacing: 0.3px;
    }

    .required-star {
      color: var(--danger, #ff453a);
    }

    .opt-hint {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-m);
    }

    .reminder-input,
    .reminder-select,
    .reminder-textarea {
      width: 100%;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text-p);
      font-family: var(--sans);
      font-size: 13.5px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      box-sizing: border-box;
    }

    .reminder-input:focus,
    .reminder-select:focus,
    .reminder-textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      background: rgba(0, 0, 0, 0.35);
    }

    .reminder-select option {
      background: var(--bg-mid, #111116);
      color: var(--text-p);
    }

    .reminder-textarea {
      resize: vertical;
      min-height: 56px;
      line-height: 1.4;
    }

    .reminder-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    /* ── 4. REMINDERS GRID & SECTIONS ── */
    .reminders-sections-wrap {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .reminders-group {
      display: flex;
      flex-direction: column;
    }

    .reminders-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .reminder-card {
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s, box-shadow 0.2s;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-sizing: border-box;
      min-width: 0;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .reminder-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-hv);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .reminder-card-top {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .reminder-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .reminder-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .reminder-card-title {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--text-p);
      line-height: 1.35;
      word-break: break-word;
    }

    .reminder-countdown-box {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin: 4px 0 2px 0;
    }

    .reminder-count-big {
      font-family: var(--font-clock, var(--mono));
      font-size: 26px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
    }

    .reminder-count-unit {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--text-s);
      text-transform: uppercase;
    }

    .reminder-badge-today {
      display: inline-block;
      background: var(--accent);
      color: var(--accent-text, #000);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 4px 10px;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .reminder-badge-past {
      display: inline-block;
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-m);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .reminder-date-info {
      font-size: 12px;
      color: var(--text-s);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .reminder-card-note {
      font-size: 12.5px;
      color: var(--text-s);
      line-height: 1.45;
      background: rgba(0, 0, 0, 0.15);
      border-left: 2px solid var(--accent);
      padding: 6px 10px;
      border-radius: 0 6px 6px 0;
      margin-top: 2px;
      word-break: break-word;
    }

    .reminder-card-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      margin-top: 4px;
    }

    .btn-reminder-action {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-s);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
    }

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

    .btn-reminder-action.btn-action-open {
      color: var(--accent);
      background: var(--accent-dim);
      border-color: rgba(255, 255, 255, 0.06);
    }

    .btn-reminder-action.btn-action-open:hover {
      background: var(--accent);
      color: var(--accent-text, #000);
    }

    .btn-reminder-action.btn-action-delete:hover {
      color: var(--danger, #ff453a);
      background: rgba(255, 69, 58, 0.12);
      border-color: rgba(255, 69, 58, 0.25);
    }

    /* Past reminders subtle appearance */
    .reminders-grid-past .reminder-card {
      opacity: 0.65;
    }

    .reminders-grid-past .reminder-card:hover {
      opacity: 1;
    }

    /* ── 5. EMPTY STATE ── */
    .reminders-empty-box {
      text-align: center;
      padding: 36px 20px;
      background: var(--bg-card);
      border: 1px dashed var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .reminders-empty-icon {
      color: var(--text-m);
      margin-bottom: 4px;
    }

    .reminders-empty-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-s);
    }

    .reminders-empty-desc {
      font-size: 12.5px;
      color: var(--text-m);
      max-width: 320px;
      margin: 0 0 8px 0;
    }

    /* ── MONO THEME OVERRIDES FOR REMINDERS ── */
    body.mono-theme #panel-reminders .yks-pinned-card {
      background: #0d0d10 !important;
      border: 1px solid #33333e !important;
      border-radius: 4px !important;
      box-shadow: none !important;
    }

    body.mono-theme #panel-reminders .yks-pinned-card::before {
      background: #ffffff !important;
    }

    body.mono-theme #panel-reminders .yks-card-badge {
      background: #ffffff !important;
      color: #000000 !important;
      border-radius: 2px !important;
      font-family: 'Space Grotesk', sans-serif !important;
    }

    body.mono-theme #panel-reminders .yks-card-badge svg {
      stroke: #000000 !important;
    }

    body.mono-theme #panel-reminders .yks-title {
      font-family: 'Space Grotesk', sans-serif !important;
      letter-spacing: 1px !important;
    }

    body.mono-theme #panel-reminders .yks-subtitle {
      font-family: 'Space Grotesk', sans-serif !important;
    }

    body.mono-theme #panel-reminders .yks-counter-number {
      color: #ffffff !important;
      font-family: var(--font-clock, 'Syne', sans-serif) !important;
      text-shadow: none !important;
    }

    body.mono-theme #panel-reminders .reminder-card {
      background: #15151a !important;
      border: 1px solid #282830 !important;
      border-radius: 4px !important;
      box-shadow: none !important;
    }

    body.mono-theme #panel-reminders .reminder-badge {
      background: #222228 !important;
      color: #ffffff !important;
      border-radius: 2px !important;
      font-family: 'Space Grotesk', sans-serif !important;
    }

    body.mono-theme #panel-reminders .reminder-count-big {
      color: #ffffff !important;
      font-family: var(--font-clock, 'Syne', sans-serif) !important;
    }

    body.mono-theme #panel-reminders .reminder-badge-today {
      background: #ffffff !important;
      color: #000000 !important;
      border-radius: 2px !important;
    }

    body.mono-theme #panel-reminders .reminder-input,
    body.mono-theme #panel-reminders .reminder-select,
    body.mono-theme #panel-reminders .reminder-textarea {
      background: #0d0d10 !important;
      border: 1px solid #33333e !important;
      border-radius: 4px !important;
      color: #ffffff !important;
    }

    body.mono-theme #panel-reminders .reminder-form-box {
      background: #0d0d10 !important;
      border: 1px solid #33333e !important;
      border-radius: 4px !important;
      box-shadow: none !important;
    }

    body.mono-theme #panel-reminders .reminder-card-note {
      background: #0d0d10 !important;
      border-left-color: #ffffff !important;
    }

    body.mono-theme #panel-reminders .btn-reminder-action.btn-action-open {
      background: #ffffff !important;
      color: #000000 !important;
      border-radius: 2px !important;
    }

    /* ── LIGHT & LITEWHITE THEME ADJUSTMENTS ── */
    body.light-theme #panel-reminders .reminder-input,
    body.theme-light #panel-reminders .reminder-input,
    [data-theme="light"] #panel-reminders .reminder-input,
    body.litewhite-theme #panel-reminders .reminder-input,
    body.theme-litewhite #panel-reminders .reminder-input,
    [data-theme="litewhite"] #panel-reminders .reminder-input,
    body.light-theme #panel-reminders .reminder-select,
    body.theme-light #panel-reminders .reminder-select,
    [data-theme="light"] #panel-reminders .reminder-select,
    body.litewhite-theme #panel-reminders .reminder-select,
    body.theme-litewhite #panel-reminders .reminder-select,
    [data-theme="litewhite"] #panel-reminders .reminder-select,
    body.light-theme #panel-reminders .reminder-textarea,
    body.theme-light #panel-reminders .reminder-textarea,
    [data-theme="light"] #panel-reminders .reminder-textarea,
    body.litewhite-theme #panel-reminders .reminder-textarea,
    body.theme-litewhite #panel-reminders .reminder-textarea,
    [data-theme="litewhite"] #panel-reminders .reminder-textarea {
      background: #ffffff;
      color: #1d1d1f;
      border-color: rgba(0, 0, 0, 0.15);
    }

    body.light-theme #panel-reminders .reminder-card-note,
    body.theme-light #panel-reminders .reminder-card-note,
    [data-theme="light"] #panel-reminders .reminder-card-note,
    body.litewhite-theme #panel-reminders .reminder-card-note,
    body.theme-litewhite #panel-reminders .reminder-card-note,
    [data-theme="litewhite"] #panel-reminders .reminder-card-note {
      background: rgba(0, 0, 0, 0.04);
      color: #1d1d1f;
    }

    body.light-theme #panel-reminders .reminder-badge-past,
    body.theme-light #panel-reminders .reminder-badge-past,
    [data-theme="light"] #panel-reminders .reminder-badge-past,
    body.litewhite-theme #panel-reminders .reminder-badge-past,
    body.theme-litewhite #panel-reminders .reminder-badge-past,
    [data-theme="litewhite"] #panel-reminders .reminder-badge-past {
      background: rgba(0, 0, 0, 0.06);
      color: #6e6e73;
    }

    /* ── FOCUS MODE HIDE CONTROLS FOR REMINDERS ── */
    body.focus-mode .card>.panel.active .reminders-action-bar,
    body.focus-mode .card>.panel.active .reminder-form-box,
    body.focus-mode .card>.panel.active .reminders-sections-wrap,
    body.focus-mode .card>.panel.active .reminders-header,
    body.focus-mode .card>.panel.active .yks-card-badge,
    body.focus-mode .card>.panel.active .yks-detail-row {
      display: none !important;
    }

    /* ── RESPONSIVE BREAKPOINTS FOR REMINDERS ── */
    @media (max-width: 600px) {
      .reminders-grid {
        grid-template-columns: 1fr;
      }

      .reminder-form-row {
        flex-direction: column;
        gap: 14px;
      }
    }

    @media (max-width: 440px) {
      .yks-pinned-card {
        padding: 18px 14px;
      }

      .tabs .tab span {
        font-size: 11.5px;
      }

      .tab {
        padding: 10px 3px;
      }
    }

    /* ===== ONLINE STUDY PLATFORM (ÇEVRİMİÇİ) COMPONENT STYLES ===== */
    #panel-online {
      animation: fadeIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .online-header {
      text-align: center;
      margin-bottom: 16px;
      position: relative;
    }

    .online-title-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .online-eyebrow {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text-s);
      font-weight: 600;
      margin-bottom: 0 !important;
    }

    .online-mono-tag {
      display: none;
    }
    body.mono-theme .online-mono-tag {
      display: inline-block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 10px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1px 6px;
      border-radius: 2px;
    }

    .online-desc {
      font-size: 13px;
      color: var(--text-s);
      line-height: 1.5;
      margin: 0;
    }

    /* ── SECONDARY SPA SUB-NAVIGATION BAR (9 SEGMENTS) ── */
    .online-sub-nav {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 12px);
      padding: 6px;
      margin-bottom: 18px;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    .online-sub-nav::-webkit-scrollbar {
      display: none;
    }

    .online-sub-tab-btn {
      flex: 1;
      min-width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-s);
      font-size: 12px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      user-select: none;
    }

    .online-sub-tab-btn:hover {
      color: var(--text-p);
      background: var(--bg-card-hv);
    }

    .online-sub-tab-btn.active {
      background: var(--accent-dim);
      color: var(--accent);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* ── DASHBOARD GREETING & HERO SECTION ── */
    .online-dash-greeting-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 22px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .online-dash-user-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .online-dash-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 2px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      box-shadow: 0 0 20px var(--accent-dim);
      flex-shrink: 0;
    }

    .online-dash-user-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .online-dash-hello {
      font-size: 19px;
      font-weight: 800;
      color: var(--text-p);
      margin: 0;
      letter-spacing: -0.3px;
    }

    .online-dash-motto {
      font-size: 13px;
      color: var(--text-s);
      margin: 0;
    }

    /* 4 Mini Stat Cards */
    .online-dash-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .online-dash-stat-box {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: all 0.2s;
    }

    .online-dash-stat-box:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
      transform: translateY(-1px);
    }

    .online-dash-stat-icon {
      font-size: 18px;
      line-height: 1;
      margin-bottom: 2px;
    }

    .online-dash-stat-val {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 15px;
      font-weight: 800;
      color: var(--text-p);
    }

    .online-dash-stat-lbl {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-m);
    }

    /* 3 CTAs */
    .online-dash-cta-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 10px;
      margin-top: 4px;
    }

    .online-dash-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      white-space: nowrap;
    }

    /* ── STUDY (SAATDURUM) STYLE TIMER SUB-TAB ── */
    .sd-timer-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 22px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      margin-bottom: 20px;
    }

    .sd-hero-card {
      text-align: center;
      padding: 12px 10px 18px 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
      position: relative;
    }

    .sd-hero-date {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-s);
      margin-bottom: 4px;
    }

    .sd-hero-big-timer {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: clamp(44px, 10vw, 70px);
      font-weight: 800;
      color: var(--text-p);
      line-height: 1.05;
      letter-spacing: -2px;
      margin-bottom: 10px;
      text-shadow: 0 0 35px var(--accent-dim);
      transition: color 0.3s;
    }

    .sd-hero-big-timer.active-study {
      color: var(--accent);
    }

    .sd-hero-status-row {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
    }

    .sd-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-s);
      transition: all 0.25s ease;
    }

    .sd-status-pill.sd-status-studying {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 700;
    }

    .sd-status-pill.sd-status-break {
      background: rgba(255, 159, 10, 0.15);
      color: var(--warn, #ff9f0a);
      border: 1px solid rgba(255, 159, 10, 0.35);
      font-weight: 700;
    }

    /* STUDY Category Filters & Plus Button */
    .sd-filter-bar-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 14px;
    }

    .sd-filter-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex: 1;
      min-width: 0;
    }
    .sd-filter-bar::-webkit-scrollbar {
      display: none;
    }

    .sd-cat-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-s);
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

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

    .sd-cat-btn.active {
      background: var(--accent);
      color: #000000;
      border-color: var(--accent);
      font-weight: 700;
      box-shadow: 0 2px 8px var(--accent-dim);
    }

    .sd-add-subj-chip-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--text-s);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      flex-shrink: 0;
    }

    .sd-add-subj-chip-btn:hover {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--accent);
      transform: scale(1.08);
      box-shadow: 0 0 10px var(--accent-dim);
    }

    /* STUDY Subject Rows List */
    .sd-subjects-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
    }

    .sd-subject-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 14px;
      gap: 12px;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .sd-subject-row:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
      transform: translateY(-1px);
    }

    .sd-subject-row.active-studying {
      border-color: var(--subj-color, var(--accent));
      background: rgba(255, 255, 255, 0.07);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }

    .sd-play-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--subj-color, var(--accent));
      background: rgba(0, 0, 0, 0.3);
      color: var(--subj-color, var(--accent));
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      flex-shrink: 0;
    }

    .sd-play-btn:hover {
      transform: scale(1.08);
      background: var(--subj-color, var(--accent));
      color: var(--accent-text);
    }

    .sd-subject-row.active-studying .sd-play-btn {
      background: var(--subj-color, var(--accent));
      color: var(--accent-text);
      animation: sdPulse 2s infinite;
    }

    .sd-subject-row.active-paused .sd-play-btn {
      background: var(--warn, #ff9f0a);
      border-color: var(--warn, #ff9f0a);
      color: var(--accent-text);
      animation: none;
    }

    .sd-play-icon { display: block; }
    .sd-pause-icon { display: none; }
    .sd-subject-row.active-studying .sd-play-icon { display: none; }
    .sd-subject-row.active-studying .sd-pause-icon { display: block; }
    .sd-subject-row.active-paused .sd-play-icon { display: block; }
    .sd-subject-row.active-paused .sd-pause-icon { display: none; }

    .sd-subject-info {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .sd-subject-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .sd-subject-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-p);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sd-star-btn {
      background: transparent;
      border: none;
      font-size: 16px;
      color: var(--text-m);
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
      transition: color 0.15s, transform 0.15s;
    }

    .sd-star-btn:hover {
      transform: scale(1.2);
    }

    .sd-star-btn.active {
      color: #f59e0b;
    }

    .sd-subject-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .sd-subject-time {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text-p);
    }

    .sd-subject-row.active-studying .sd-subject-time {
      color: var(--subj-color, var(--accent));
      font-weight: 800;
    }

    @keyframes sdPulse {
      0% { box-shadow: 0 0 0 0 rgba(11, 214, 168, 0.6); }
      70% { box-shadow: 0 0 0 10px rgba(11, 214, 168, 0); }
      100% { box-shadow: 0 0 0 0 rgba(11, 214, 168, 0); }
    }

    /* STUDY Last 7 Days Mini Dashboard */
    .sd-weekly-mini-dashboard {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      margin-top: 14px;
    }

    .sd-weekly-mini-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-m);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sd-weekly-mini-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .sd-mini-day-box {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: all 0.2s;
    }

    .sd-mini-day-box.today {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 14px var(--accent-dim);
    }

    .sd-mini-day-name {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-s);
    }

    .sd-mini-day-time {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-p);
    }

    .sd-mini-day-box.today .sd-mini-day-time {
      color: var(--accent);
      font-weight: 800;
    }

    /* ── CANLI ÇALIŞANLAR (LIVE STUDY FEED) ── */
    .online-live-search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .online-search-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 8px 16px;
      font-size: 13px;
      color: var(--text-p);
      outline: none;
      transition: border-color 0.2s;
    }
    .online-search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 10px var(--accent-dim);
    }

    .online-live-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .online-live-user-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .online-live-user-card:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .online-live-user-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .online-live-user-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .online-live-user-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-p);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .online-live-user-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-s);
    }

    .online-live-subject-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 8px 12px;
    }

    .online-live-subj-tag {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--accent);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .online-live-time-ticker {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text-p);
    }

    .online-live-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-s);
    }

    .online-live-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }

    .online-live-card-actions .btn {
      flex: 1;
      padding: 6px 10px;
      font-size: 11.5px;
      border-radius: 6px;
    }

    /* ── GROUPS SECTION (EXPANDED SOCIAL COMMUNITY) ── */
    .online-groups-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .online-rich-group-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .online-rich-group-card:hover {
      border-color: var(--border-hv);
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .online-group-card-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .online-group-name {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-p);
      letter-spacing: -0.2px;
    }

    .online-group-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .online-group-chip {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-s);
      white-space: nowrap;
    }
    .online-group-chip.active-workers {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-weight: 700;
    }

    .online-group-desc {
      font-size: 12.5px;
      color: var(--text-s);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .online-group-goal-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .online-group-goal-head {
      display: flex;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-s);
      font-weight: 600;
    }

    .online-group-goal-bar-wrap {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      height: 6px;
      overflow: hidden;
    }

    .online-group-goal-bar {
      height: 100%;
      background: var(--accent);
      border-radius: 4px;
      transition: width 0.3s;
    }

    /* ── STUDY STYLE STUDY ROOMS & GROUPS (SADE & ŞIK) ── */
    .sd-group-hero-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .sd-group-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .sd-group-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .sd-group-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-p);
      margin: 0;
      letter-spacing: -0.3px;
    }

    .sd-group-desc {
      font-size: 13px;
      color: var(--text-s);
      margin: 0;
      line-height: 1.45;
      max-width: 580px;
    }

    .sd-group-meta-chips {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .sd-group-actions-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    /* 3 Clean STUDY Group Tabs */
    .sd-group-nav-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 16px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .sd-group-nav-bar::-webkit-scrollbar { display: none; }

    .sd-group-tab-btn {
      flex: 1;
      min-width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 16px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      color: var(--text-s);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .sd-group-tab-btn:hover {
      background: var(--bg-card-hv);
      color: var(--text-p);
    }
    .sd-group-tab-btn.active {
      background: var(--accent-dim);
      color: var(--accent);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    /* Live Room Member Cards */
    .sd-room-live-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }

    .sd-room-member-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s;
    }
    .sd-room-member-card:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
      transform: translateY(-2px);
    }

    .sd-room-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .sd-room-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .sd-room-subject-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      padding: 8px 12px;
    }

    .sd-room-notice-box {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 14px;
    }

    .sd-room-member-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
    }
    .sd-room-member-item:last-child { border-bottom: none; }


    /* ── REAL DATA GLOBAL & GROUP LEADERBOARD ── */
    .online-leaderboard-hero {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 18px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .online-lb-type-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px;
    }

    .online-lb-type-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      font-size: 12.5px;
      font-weight: 700;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--text-s);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .online-lb-type-btn:hover { color: var(--text-p); }
    .online-lb-type-btn.active {
      background: var(--accent-dim);
      color: var(--accent);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Personal Rank Pinned Box */
    .online-my-rank-banner {
      background: rgba(11, 214, 168, 0.08);
      border: 1px solid rgba(11, 214, 168, 0.3);
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      animation: fadeIn 0.25s ease;
    }

    .online-my-rank-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .online-my-rank-badge {
      font-family: var(--font-clock, var(--mono));
      font-size: 16px;
      font-weight: 800;
      color: var(--accent);
      background: var(--accent-dim);
      border-radius: 8px;
      padding: 4px 10px;
    }

    .online-podium-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr 1fr;
      gap: 12px;
      align-items: flex-end;
      margin: 14px 0 20px 0;
    }

    .online-podium-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 14px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      transition: transform 0.2s, border-color 0.2s;
    }

    .online-podium-card.first {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, 0.08);
      box-shadow: 0 0 30px rgba(245, 158, 11, 0.25);
      transform: translateY(-8px);
    }

    .online-podium-card.second {
      border-color: #94a3b8;
      background: rgba(148, 163, 184, 0.08);
    }

    .online-podium-card.third {
      border-color: #d97706;
      background: rgba(217, 119, 6, 0.08);
    }

    .online-podium-rank-badge {
      position: absolute;
      top: -12px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .online-podium-card.first .online-podium-rank-badge { background: #f59e0b; color: #000; }
    .online-podium-card.second .online-podium-rank-badge { background: #94a3b8; color: #000; }
    .online-podium-card.third .online-podium-rank-badge { background: #d97706; color: #fff; }

    .online-podium-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 2px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      margin: 4px 0;
    }
    .online-podium-card.first .online-podium-avatar {
      width: 54px;
      height: 54px;
      font-size: 22px;
      background: #f59e0b;
      color: #000000;
      border-color: #fcd34d;
    }

    .online-podium-time {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 15px;
      font-weight: 800;
      color: var(--accent);
    }
    .online-podium-card.first .online-podium-time {
      color: #f59e0b;
      font-size: 17px;
    }

    /* Leaderboard Table / Rows */
    .online-rank-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      transition: all 0.15s;
    }
    .online-rank-row:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
    }
    .online-rank-row.current-user {
      border-color: var(--accent);
      background: var(--accent-dim);
      font-weight: 700;
      box-shadow: 0 0 16px var(--accent-dim);
    }


    /* ── UNIFIED LUXURY PROFILE & 10-TIER ACHIEVEMENTS CSS ── */
    .online-profile-hero-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 22px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      margin-bottom: 16px;
      position: relative;
    }

    .online-profile-avatar-large {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 2px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .online-profile-stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      margin-top: 6px;
    }

    .online-profile-stat-item {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 6px;
      text-align: center;
    }

    .online-profile-stat-val {
      font-family: var(--font-clock, var(--mono));
      font-size: 15px;
      font-weight: 800;
      color: var(--accent);
    }

    .online-profile-stat-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-m);
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* 10-Tier Achievements Hub */
    .online-achievements-grid-10 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .online-badge-card-adv {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: all 0.2s;
      position: relative;
    }

    .online-badge-card-adv:hover {
      border-color: var(--border-hv);
      transform: translateY(-2px);
    }

    .online-badge-card-adv.unlocked {
      background: rgba(11, 214, 168, 0.07);
      border-color: rgba(11, 214, 168, 0.4);
      box-shadow: 0 4px 16px rgba(11, 214, 168, 0.1);
    }

    .online-badge-card-adv.locked {
      opacity: 0.55;
    }

    .online-badge-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .online-badge-icon-wrap {
      font-size: 22px;
      line-height: 1;
    }

    .online-badge-status-pill {
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .online-badge-card-adv.unlocked .online-badge-status-pill {
      background: var(--accent);
      color: #000000;
    }

    .online-badge-card-adv.locked .online-badge-status-pill {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-m);
    }

    .online-badge-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-p);
      margin: 0;
    }

    .online-badge-desc {
      font-size: 11px;
      color: var(--text-s);
      margin: 0;
      line-height: 1.35;
    }

    /* Settings Form Grid */
    .online-settings-section-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 14px;
    }

    .online-username-change-box {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }


    /* ── REAL DATA GLOBAL & GROUP LEADERBOARD ── */
    .online-leaderboard-hero {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 18px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .online-lb-type-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px;
    }

    .online-lb-type-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      font-size: 12.5px;
      font-weight: 700;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--text-s);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .online-lb-type-btn:hover { color: var(--text-p); }
    .online-lb-type-btn.active {
      background: var(--accent-dim);
      color: var(--accent);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Personal Rank Pinned Box */
    .online-my-rank-banner {
      background: rgba(11, 214, 168, 0.08);
      border: 1px solid rgba(11, 214, 168, 0.3);
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      animation: fadeIn 0.25s ease;
    }

    .online-my-rank-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .online-my-rank-badge {
      font-family: var(--font-clock, var(--mono));
      font-size: 16px;
      font-weight: 800;
      color: var(--accent);
      background: var(--accent-dim);
      border-radius: 8px;
      padding: 4px 10px;
    }

    .online-podium-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr 1fr;
      gap: 12px;
      align-items: flex-end;
      margin: 14px 0 20px 0;
    }

    .online-podium-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 14px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
      transition: transform 0.2s, border-color 0.2s;
    }

    .online-podium-card.first {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, 0.08);
      box-shadow: 0 0 30px rgba(245, 158, 11, 0.25);
      transform: translateY(-8px);
    }

    .online-podium-card.second {
      border-color: #94a3b8;
      background: rgba(148, 163, 184, 0.08);
    }

    .online-podium-card.third {
      border-color: #d97706;
      background: rgba(217, 119, 6, 0.08);
    }

    .online-podium-rank-badge {
      position: absolute;
      top: -12px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .online-podium-card.first .online-podium-rank-badge { background: #f59e0b; color: #000; }
    .online-podium-card.second .online-podium-rank-badge { background: #94a3b8; color: #000; }
    .online-podium-card.third .online-podium-rank-badge { background: #d97706; color: #fff; }

    .online-podium-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 2px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      margin: 4px 0;
    }
    .online-podium-card.first .online-podium-avatar {
      width: 54px;
      height: 54px;
      font-size: 22px;
      background: #f59e0b;
      color: #000000;
      border-color: #fcd34d;
    }

    .online-podium-time {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 15px;
      font-weight: 800;
      color: var(--accent);
    }
    .online-podium-card.first .online-podium-time {
      color: #f59e0b;
      font-size: 17px;
    }

    /* Leaderboard Table / Rows */
    .online-rank-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      transition: all 0.15s;
    }
    .online-rank-row:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
    }
    .online-rank-row.current-user {
      border-color: var(--accent);
      background: var(--accent-dim);
      font-weight: 700;
      box-shadow: 0 0 16px var(--accent-dim);
    }


    /* ── ACHIEVEMENTS / BADGES GRID (PROFILE) ── */
    .online-achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .online-badge-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .online-badge-card.unlocked {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .online-badge-icon { font-size: 22px; margin-bottom: 2px; }
    .online-badge-name { font-size: 12px; font-weight: 700; color: var(--text-p); }
    .online-badge-desc { font-size: 10px; color: var(--text-s); }

    /* ── ADVANCED STUDY REAL-DATA STATISTICS UI ── */
    .online-stats-hero-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .online-stats-metric-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: transform 0.2s, border-color 0.2s;
    }
    .online-stats-metric-card:hover {
      border-color: var(--border-hv);
      transform: translateY(-1px);
    }

    .online-stats-metric-icon {
      font-size: 20px;
      line-height: 1;
      margin-bottom: 2px;
    }

    .online-stats-metric-val {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 15.5px;
      font-weight: 800;
      color: var(--text-p);
    }

    .online-stats-metric-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-m);
    }

    /* Weekly Proportional Bar Chart */
    .online-weekly-chart-wrap {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      height: 160px;
      padding: 14px 6px 6px 6px;
      margin-top: 10px;
    }

    .online-chart-bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      justify-content: flex-end;
    }

    .online-chart-bar-val-top {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-s);
      white-space: nowrap;
    }

    .online-chart-bar-track {
      width: 100%;
      max-width: 38px;
      flex: 1;
      display: flex;
      align-items: flex-end;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 6px;
      overflow: hidden;
    }

    .online-chart-bar-fill {
      width: 100%;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 6px 6px 0 0;
      transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      min-height: 4px;
    }

    .online-chart-bar-col.today .online-chart-bar-fill {
      background: var(--accent);
      box-shadow: 0 0 16px var(--accent-dim);
    }
    .online-chart-bar-col.today .online-chart-bar-val-top {
      color: var(--accent);
      font-weight: 800;
    }

    .online-chart-day-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-s);
    }
    .online-chart-bar-col.today .online-chart-day-label {
      color: var(--accent);
      font-weight: 800;
    }

    /* Monthly Calendar Heatmap with ON-CELL TIME */
    .online-heatmap-nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .online-heatmap-nav-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .online-heatmap-grid-7 {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }

    .online-heatmap-weekday-lbl {
      text-align: center;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--text-m);
      padding-bottom: 4px;
    }

    .online-heatmap-day-cell {
      min-height: 50px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 5px 3px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
    }

    .online-heatmap-day-cell:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      z-index: 5;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    }

    .online-heatmap-day-cell.selected {
      border-color: var(--text-p);
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
    }

    .online-heatmap-cell-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-s);
      line-height: 1;
    }

    .online-heatmap-cell-time {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 9.5px;
      font-weight: 800;
      color: var(--text-m);
      white-space: nowrap;
      text-align: center;
      line-height: 1;
      padding: 2px 3px;
      border-radius: 4px;
    }

    .online-heatmap-day-cell.lvl-0 { background: rgba(255, 255, 255, 0.02); }
    .online-heatmap-day-cell.lvl-1 { background: rgba(11, 214, 168, 0.16); border-color: rgba(11, 214, 168, 0.3); }
    .online-heatmap-day-cell.lvl-1 .online-heatmap-cell-time { color: var(--accent); }

    .online-heatmap-day-cell.lvl-2 { background: rgba(11, 214, 168, 0.38); border-color: rgba(11, 214, 168, 0.5); }
    .online-heatmap-day-cell.lvl-2 .online-heatmap-cell-num { color: #ffffff; }
    .online-heatmap-day-cell.lvl-2 .online-heatmap-cell-time { color: #ffffff; }

    .online-heatmap-day-cell.lvl-3 { background: rgba(11, 214, 168, 0.70); border-color: var(--accent); }
    .online-heatmap-day-cell.lvl-3 .online-heatmap-cell-num { color: #000000; font-weight: 800; }
    .online-heatmap-day-cell.lvl-3 .online-heatmap-cell-time { color: #000000; font-weight: 800; }

    .online-heatmap-day-cell.lvl-4 { background: var(--accent); border-color: #ffffff; box-shadow: 0 0 14px var(--accent-dim); }
    .online-heatmap-day-cell.lvl-4 .online-heatmap-cell-num { color: #000000; font-weight: 900; }
    .online-heatmap-day-cell.lvl-4 .online-heatmap-cell-time { color: #000000; font-weight: 900; }

    .online-heatmap-day-cell.today {
      border: 2px solid var(--accent);
    }

    body.light-theme .online-heatmap-day-cell.lvl-0,
    body.theme-light .online-heatmap-day-cell.lvl-0,
    [data-theme="light"] .online-heatmap-day-cell.lvl-0,
    body.litewhite-theme .online-heatmap-day-cell.lvl-0,
    body.theme-litewhite .online-heatmap-day-cell.lvl-0,
    [data-theme="litewhite"] .online-heatmap-day-cell.lvl-0 {
      background: #f1f5f9;
      border-color: #e2e8f0;
    }

    body.light-theme .online-heatmap-day-cell.selected,
    body.theme-light .online-heatmap-day-cell.selected,
    [data-theme="light"] .online-heatmap-day-cell.selected,
    body.litewhite-theme .online-heatmap-day-cell.selected,
    body.theme-litewhite .online-heatmap-day-cell.selected,
    [data-theme="litewhite"] .online-heatmap-day-cell.selected {
      border-color: var(--accent);
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
    }

    /* Day Inspector Popover / Card */
    .online-day-inspector-card {
      background: rgba(11, 214, 168, 0.06);
      border: 1px solid rgba(11, 214, 168, 0.25);
      border-radius: 12px;
      padding: 14px 16px;
      margin-top: 14px;
      animation: fadeIn 0.25s ease;
    }

    .online-day-inspector-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .online-day-inspector-subjects {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .online-day-inspector-subj-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
    }

    .online-heatmap-legend {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 12px;
      font-size: 11px;
      color: var(--text-m);
    }
    .online-heatmap-legend-cell {
      width: 13px;
      height: 13px;
      border-radius: 3px;
    }

    /* Hourly Distribution Quadrants */
    .online-hourly-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .online-hourly-box {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .online-hourly-box-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: var(--text-s);
      font-weight: 700;
    }

    .online-hourly-box-val {
      font-family: var(--font-clock, var(--mono));
      font-size: 14px;
      font-weight: 800;
      color: var(--accent);
    }

    /* Subject Breakdown List */
    .online-subject-row-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
    }

    .online-subject-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }

    .online-subject-row-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: var(--text-p);
    }

    .online-subject-row-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .online-subject-row-time {
      font-family: var(--font-clock, var(--mono));
      font-weight: 700;
      color: var(--text-p);
      font-size: 13px;
    }

    .online-subject-pct-pill {
      font-size: 10.5px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-s);
    }

    /* Recent Sessions Log */
    .online-session-log-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      transition: all 0.15s;
    }
    .online-session-log-card:hover {
      background: rgba(255, 255, 255, 0.045);
      border-color: var(--border-hv);
    }


    /* ── PROFILE & SETTINGS ── */
    .online-profile-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 24px 20px;
      margin-bottom: 18px;
      backdrop-filter: blur(20px);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .online-profile-avatar-big {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 2px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 800;
      box-shadow: 0 0 20px var(--accent-dim);
    }

    .online-settings-section {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 20px 18px;
      margin-bottom: 16px;
      backdrop-filter: blur(20px);
    }

    .online-settings-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }

    /* Color picker chips */
    .sd-color-picker-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .sd-color-radio {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .sd-color-radio:hover {
      transform: scale(1.1);
    }

    .sd-color-radio.selected {
      border-color: var(--text-p);
      transform: scale(1.15);
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    }

    /* ── MODALS (FIXED VIEWPORT CENTERING & HIGH Z-INDEX) ── */
    .online-modal-backdrop {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: rgba(0, 0, 0, 0.75) !important;
      backdrop-filter: blur(25px) !important;
      -webkit-backdrop-filter: blur(25px) !important;
      z-index: 5000 !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
      box-sizing: border-box !important;
      animation: fadeIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .online-modal-box {
      background: var(--bg-card, #111116) !important;
      border: 1px solid var(--border-hv, rgba(255, 255, 255, 0.16)) !important;
      border-radius: var(--radius-sm, 14px) !important;
      padding: 24px !important;
      width: 100% !important;
      max-width: 440px !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border, rgba(255, 255, 255, 0.08)) !important;
      animation: fadeIn 0.25s ease;
      position: relative !important;
      box-sizing: border-box !important;
      margin: auto !important;
      backdrop-filter: blur(30px) !important;
      -webkit-backdrop-filter: blur(30px) !important;
    }

    .online-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    }

    .online-modal-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-p);
      letter-spacing: -0.2px;
    }

    .online-modal-close-btn {
      background: transparent;
      border: none;
      color: var(--text-m);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: color 0.15s, background 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .online-modal-close-btn:hover {
      color: var(--text-p);
      background: rgba(255, 255, 255, 0.08);
    }

    .online-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 42px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
      font-size: 13px;
      color: var(--text-s);
      gap: 14px;
    }

    .online-toggle-row:last-of-type {
      border-bottom: none;
    }

    
    /* ── FRIENDS & ADD FRIENDS MODULE STYLES ── */
    .online-friends-hero-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 18px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .online-friends-hero-left {
      flex: 1;
      min-width: 200px;
    }

    .online-friends-hero-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-p);
      margin: 0 0 4px 0;
      letter-spacing: -0.2px;
    }

    .online-friends-hero-desc {
      font-size: 12.5px;
      color: var(--text-s);
      margin: 0;
      line-height: 1.45;
    }

    .online-friends-hero-stats {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .online-friends-stat-pill {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 14px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s;
      min-width: 68px;
    }

    .online-friends-stat-pill.active-workers {
      border-color: rgba(11, 214, 168, 0.35);
      background: rgba(11, 214, 168, 0.08);
    }
    .online-friends-stat-pill.active-workers .online-friends-stat-num {
      color: var(--accent);
    }

    .online-friends-stat-pill.has-requests {
      border-color: rgba(245, 158, 11, 0.35);
      background: rgba(245, 158, 11, 0.08);
      cursor: pointer;
    }
    .online-friends-stat-pill.has-requests .online-friends-stat-num {
      color: var(--warn, #ff9f0a);
    }

    .online-friends-stat-num {
      font-family: var(--font-clock, var(--mono));
      font-variant-numeric: tabular-nums;
      font-size: 16px;
      font-weight: 800;
      color: var(--text-p);
    }

    .online-friends-stat-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-m);
    }

    .online-count-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 10px;
      background: var(--warn, #ff9f0a);
      color: #000000;
      margin-left: 4px;
      display: inline-block;
    }

    /* Friends Grid & Cards */
    .online-friends-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .online-friend-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
    }

    .online-friend-card:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    }

    .online-friend-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .online-friend-card-user {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .online-friend-avatar-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .online-friend-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1.5px solid var(--border-hv);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
    }

    .online-friend-status-dot-pos {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid var(--bg-card, #111116);
    }

    .online-friend-name-col {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .online-friend-username {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-p);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .online-friend-displayname {
      font-size: 11.5px;
      color: var(--text-s);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .online-friend-status-badge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
    }

    .online-friend-actions-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }

    .online-friend-actions-row .btn {
      flex: 1;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 8px;
    }

    /* ── ADD FRIEND SEARCH HERO & PREVIEW ── */
    .online-add-friend-box {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 14px);
      padding: 22px 20px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
      margin-bottom: 20px;
    }

    .online-search-form-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 4px 6px 4px 14px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .online-search-form-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 16px var(--accent-dim);
    }

    .online-search-at-prefix {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
    }

    .online-friend-search-inp {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-size: 14px;
      color: var(--text-p);
      padding: 8px 0;
    }

    .online-search-preview-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 16px;
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      box-shadow: 0 0 24px var(--accent-dim);
      animation: fadeIn 0.2s ease;
    }

    .online-suggested-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .online-suggested-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.2s;
    }

    .online-suggested-card:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
    }

    /* Requests Cards */
    .online-req-card {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      transition: all 0.2s;
    }

    .online-req-card:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-hv);
    }


    /* ── MONO THEME OVERRIDES ── */
    body.mono-theme #panel-online .online-sub-nav,
    body.mono-theme #panel-online .online-dash-greeting-card,
    body.mono-theme #panel-online .sd-timer-card,
    body.mono-theme #panel-online .online-rich-group-card,
    body.mono-theme #panel-online .online-group-detail-header,
    body.mono-theme #panel-online .online-settings-section,
    body.mono-theme #panel-online .online-profile-card,
    body.mono-theme .online-modal-box {
      background: #0d0d10 !important;
      border: 1px solid #33333e !important;
      border-radius: 4px !important;
      box-shadow: none !important;
    }

    body.mono-theme #panel-online .online-sub-tab-btn.active,
    body.mono-theme #panel-online .sd-cat-btn.active {
      background: #ffffff !important;
      color: #000000 !important;
      border-radius: 2px !important;
    }

    body.mono-theme #panel-online .sd-hero-big-timer {
      color: #ffffff !important;
      font-family: var(--font-clock, 'Syne', sans-serif) !important;
      text-shadow: none !important;
    }

    /* ── RESPONSIVE BREAKPOINTS ── */
    @media (max-width: 768px) {
      .online-dash-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .online-dash-cta-row {
        grid-template-columns: 1fr;
      }
      .online-live-grid,
      .online-groups-grid {
        grid-template-columns: 1fr;
      }
      .online-podium-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .online-podium-card.first {
        transform: none;
      }
    }

    @media (max-width: 480px) {
      .sd-weekly-mini-grid {
        gap: 3px;
      }
      .sd-mini-day-box {
        padding: 6px 2px;
      }
      .sd-mini-day-name {
        font-size: 9px;
      }
      .sd-mini-day-time {
        font-size: 9.5px;
      }
      .online-modal-box {
        padding: 18px !important;
      }
    }


    /* SADECE ODAK MODUNDA VE YATAYDA ÇALIŞAN ÖZEL AYARLAR */
    @media (max-height: 500px) and (orientation: landscape) {

      body.focus-mode {
        overflow: hidden !important;
        height: 100vh !important;
        position: fixed;
        width: 100%;
      }

      body.focus-mode #app {
        justify-content: center !important;
        padding: 0 !important;
        height: 100vh;
        display: flex;
        align-items: center;
      }

      body.focus-mode .card {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
      }

      /* Saati ekrana göre dengeli yap ve dikey/yatay tam ortala */
      body.focus-mode .time-big,
      body.focus-mode .sw-time,
      body.focus-mode .cd-time {
        font-size: min(calc(clamp(2rem, 11vw, 8rem) * (var(--focus-clock-scale, 100) / 100) * (var(--clock-scale-pct, 100) / 100)), 12vw, 24vh) !important;
        line-height: 1 !important;
        margin: 0 auto !important;
        display: block;
        text-align: center;
        white-space: nowrap !important;
        text-shadow: none !important;
        filter: none !important;
      }

      /* Yatay odakta dikkat dağıtan her şeyi tamamen temizle */
      body.focus-mode #focus-exam-status,
      body.focus-mode .time-label,
      body.focus-mode .time-date,
      body.focus-mode .divider,
      body.focus-mode .section-sub {
        display: none !important;
      }

      /* Çıkış butonu konumu */
      body.focus-mode #focus-exit {
        top: 15px !important;
        right: 15px !important;
      }
    }

    /* 2. Pastel Pembe Tema Değişkenlerinin Yenilenmesi */
    body.pink-theme {
      --bg-deep: #ffd6e0;
      --bg-mid: #ffeaee;
      --bg-card: rgba(255, 255, 255, 0.7);
      --bg-card-hv: rgba(255, 255, 255, 0.85);
      --border: rgba(255, 255, 255, 0.6);
      --border-hv: rgba(255, 255, 255, 0.8);
      --text-p: #4c2f35;
      --text-s: #8a636c;
      --text-m: #b8979f;
      /* --accent artık sabit değil: Theme Studio'da seçilen vurgu rengi devralınır (JS --accent) */
      --accent-dim: rgba(255, 77, 109, 0.1);
      --accent2: #ff758f;
      --danger: #c9184a;
      --warn: #ffb3c1;
      --shadow: 0 30px 60px rgba(255, 77, 109, 0.15), 0 4px 12px rgba(255, 77, 109, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      /* Smart Action Bar */
      --bar-idle: #ff4d6d;
      --bar-running: #ff758f;
      --bar-paused: #ffb3c1;
    }

    /* Pembe Tema Arka Plan Gradyanı */
    body.pink-theme::before {
      background:
        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(255, 192, 203, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 80% 90%, rgba(255, 133, 161, 0.2) 0%, transparent 55%);
    }

    /* Pembe Tema Saat Fontu Değişimi */
    body.pink-theme .time-big,
    body.pink-theme .sw-time,
    body.pink-theme .cd-time {
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      letter-spacing: -2px;
      text-shadow: 0 0 40px rgba(255, 133, 161, 0.2);
    }

    /* Pembe Tema Odak Modu */
    body.pink-theme.focus-mode {
      background: #fff0f3 !important;
    }

    body.pink-theme.focus-mode .time-big,
    body.pink-theme.focus-mode .sw-time,
    body.pink-theme.focus-mode .cd-time {
      color: #ff85a1 !important;
    }

    /* ══════════════════════════════════════════════════════════════
   🌊 WINDOWS XP & VISTA AERO GLASS TEMA — Modern Kristal Cam
   Translucent Sapphire Glass, Cyan Glow & Crisp Refraction
   ══════════════════════════════════════════════════════════════ */

    body.aero-theme,
    body.theme-aero,
    [data-theme="aero"] {
      --bg-deep: #020914;
      --bg-mid: #051429;
      --bg-card: rgba(4, 20, 48, 0.75);
      --bg-card-hv: rgba(0, 168, 255, 0.15);
      --bg-glass: rgba(4, 20, 48, 0.72);
      --border: rgba(0, 168, 255, 0.22);
      --border-hv: rgba(0, 168, 255, 0.45);
      --text-p: #ffffff;
      --text-s: #93c5fd;
      --text-m: #60a5fa;
      --accent: #00a8ff;
      --accent-rgb: 0, 168, 255;
      --accent-glow: rgba(0, 168, 255, 0.35);
      --accent-dim: rgba(0, 168, 255, 0.15);
      --accent2: #0284c7;
      --danger: #ef4444;
      --warn: #f59e0b;
      --sans: 'Outfit', 'Segoe UI', system-ui, sans-serif;
      --mono: 'JetBrains Mono', 'SF Mono', monospace;
      --radius: 16px;
      --radius-sm: 8px;
      --shadow: 0 12px 36px rgba(0, 10, 30, 0.6);

      /* Smart Action Bar */
      --bar-idle: #10b981;
      --bar-running: #00a8ff;
      --bar-paused: #f59e0b;

      background: var(--bg-deep);
      color: var(--text-p);
      font-family: var(--sans);
    }

    /* Windows Aero Bliss & Aurora Arka Plan Hissiyatı */
    body.aero-theme::before,
    body.theme-aero::before,
    [data-theme="aero"]::before {
      content: '';
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(0, 168, 255, 0.18) 0%, rgba(2, 9, 20, 0.95) 75%),
                  linear-gradient(to bottom, #020b18 0%, #041630 45%, #020914 100%);
      background-attachment: fixed;
      opacity: var(--ambient-opacity, 1);
      filter: blur(var(--ambient-blur, 0px));
      display: block;
      z-index: 0;
      pointer-events: none;
    }

    body.aero-theme::after,
    body.theme-aero::after,
    [data-theme="aero"]::after {
      display: none;
    }

    /* Genel Aero Glass Kart Yapısı */
    body.aero-theme .card,
    body.theme-aero .card,
    [data-theme="aero"] .card {
      background: rgba(4, 20, 48, 0.72) !important;
      border: 1px solid rgba(0, 168, 255, 0.22) !important;
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 0 12px 36px rgba(0, 10, 30, 0.55);
      color: #ffffff;
      border-radius: var(--radius, 16px);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Yalnızca Masaüstünde ve Yalnızca Ana Saat Penceresi Seçildiğinde Klasik XP Çerçevesi */
    @media (min-width: 769px) {
      body.aero-theme.card-frame-default #panel-clock > .card,
      body.aero-theme:not([class*="card-frame-"]) #panel-clock > .card {
        padding-top: 48px !important;
        position: relative !important;
        border: 2px solid rgba(0, 168, 255, 0.5) !important;
        border-radius: 12px !important;
      }

      body.aero-theme.card-frame-default #panel-clock > .card::before,
      body.aero-theme:not([class*="card-frame-"]) #panel-clock > .card::before {
        content: 'SaatDurum — Zaman Yönetimi';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 32px;
        background: linear-gradient(to right, #0058e6 0%, #0a6cff 12%, #0058e6 50%, #002e9b 100%) !important;
        color: #ffffff !important;
        font-family: 'Segoe UI', 'Tahoma', sans-serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
        line-height: 32px !important;
        padding-left: 14px !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
        border-bottom: 1px solid #002e9b !important;
        border-radius: 10px 10px 0 0;
        z-index: 10 !important;
        display: block !important;
      }

      body.aero-theme.card-frame-default #panel-clock > .card::after,
      body.aero-theme:not([class*="card-frame-"]) #panel-clock > .card::after {
        content: '✕';
        position: absolute;
        top: 6px;
        right: 8px;
        width: 20px;
        height: 20px;
        background: linear-gradient(to bottom, #ff7d63 0%, #e04324 50%, #8c1000 100%) !important;
        border: 1px solid #7a0000 !important;
        border-radius: 3px !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: bold !important;
        text-align: center !important;
        line-height: 18px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        z-index: 11 !important;
        display: block !important;
        pointer-events: none !important;
      }
    }

    /* ── Logo Tasarımı ── */
    body.aero-theme .logo,
    body.theme-aero .logo,
    [data-theme="aero"] .logo {
      font-size: 22px;
      font-weight: 800;
      color: #ffffff;
      text-shadow: 0 0 16px rgba(0, 168, 255, 0.4);
      letter-spacing: -0.5px;
    }

    body.aero-theme .logo span,
    body.theme-aero .logo span,
    [data-theme="aero"] .logo span {
      color: var(--accent, #00a8ff);
    }

    /* ── Sekmeler (Tabs) ── */
    body.aero-theme .tabs,
    body.theme-aero .tabs,
    [data-theme="aero"] .tabs {
      background: rgba(4, 20, 48, 0.65);
      border: 1px solid rgba(0, 168, 255, 0.2);
      border-radius: 12px;
      padding: 4px;
      gap: 4px;
      backdrop-filter: blur(12px);
    }

    body.aero-theme .tab,
    body.theme-aero .tab,
    [data-theme="aero"] .tab {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #93c5fd;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    body.aero-theme .tab.active,
    body.theme-aero .tab.active,
    [data-theme="aero"] .tab.active {
      background: linear-gradient(135deg, rgba(0, 168, 255, 0.28) 0%, rgba(2, 132, 199, 0.35) 100%);
      border: 1px solid rgba(0, 168, 255, 0.45);
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 0 12px rgba(0, 168, 255, 0.3);
    }

    body.aero-theme .tab:not(.active):hover,
    body.theme-aero .tab:not(.active):hover,
    [data-theme="aero"] .tab:not(.active):hover {
      background: rgba(0, 168, 255, 0.12);
      color: #ffffff;
    }

    /* ── Buton Stilleri ── */
    body.aero-theme .btn,
    body.theme-aero .btn,
    [data-theme="aero"] .btn,
    body.aero-theme .icon-btn,
    body.theme-aero .icon-btn,
    [data-theme="aero"] .icon-btn {
      background: linear-gradient(135deg, rgba(0, 168, 255, 0.18) 0%, rgba(2, 132, 199, 0.12) 100%);
      border: 1px solid rgba(0, 168, 255, 0.3);
      border-radius: 10px;
      color: #ffffff;
      font-weight: 600;
      transition: all 0.2s ease;
      backdrop-filter: blur(8px);
    }

    body.aero-theme .btn:hover,
    body.theme-aero .btn:hover,
    [data-theme="aero"] .btn:hover,
    body.aero-theme .icon-btn:hover,
    body.theme-aero .icon-btn:hover,
    [data-theme="aero"] .icon-btn:hover {
      background: linear-gradient(135deg, rgba(0, 168, 255, 0.32) 0%, rgba(2, 132, 199, 0.25) 100%);
      border-color: #00a8ff;
      box-shadow: 0 0 14px rgba(0, 168, 255, 0.35);
      color: #ffffff;
    }

    body.aero-theme .btn-accent,
    body.theme-aero .btn-accent,
    [data-theme="aero"] .btn-accent {
      background: linear-gradient(135deg, #00a8ff 0%, #0284c7 100%) !important;
      border: 1px solid #00a8ff !important;
      color: #ffffff !important;
      box-shadow: 0 4px 16px rgba(0, 168, 255, 0.4) !important;
    }

    body.aero-theme .btn-accent:hover,
    body.theme-aero .btn-accent:hover,
    [data-theme="aero"] .btn-accent:hover {
      background: linear-gradient(135deg, #38bdf8 0%, #00a8ff 100%) !important;
      box-shadow: 0 0 20px rgba(0, 168, 255, 0.6) !important;
    }

    body.aero-theme .btn-clear,
    body.theme-aero .btn-clear,
    [data-theme="aero"] .btn-clear {
      background: rgba(239, 68, 68, 0.15) !important;
      border: 1px solid rgba(239, 68, 68, 0.35) !important;
      color: #fca5a5 !important;
    }

    body.aero-theme .btn-clear:hover,
    body.theme-aero .btn-clear:hover,
    [data-theme="aero"] .btn-clear:hover {
      background: rgba(239, 68, 68, 0.25) !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;
      box-shadow: 0 0 14px rgba(239, 68, 68, 0.4) !important;
    }

    /* ── Zaman Göstergeleri ve Saatler ── */
    body.aero-theme .time-big,
    body.aero-theme .sw-time,
    body.aero-theme .cd-time,
    body.theme-aero .time-big,
    body.theme-aero .sw-time,
    body.theme-aero .cd-time,
    [data-theme="aero"] .time-big,
    [data-theme="aero"] .sw-time,
    [data-theme="aero"] .cd-time {
      color: #ffffff;
      text-shadow: 0 0 24px rgba(0, 168, 255, 0.4);
      font-weight: 800;
    }

    body.aero-theme .time-label,
    body.theme-aero .time-label,
    [data-theme="aero"] .time-label {
      color: #93c5fd;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    body.aero-theme .time-date,
    body.theme-aero .time-date,
    [data-theme="aero"] .time-date {
      color: #60a5fa;
    }

    /* ── Listeler ve Tur Öğeleri ── */
    body.aero-theme .lap-item,
    body.theme-aero .lap-item,
    [data-theme="aero"] .lap-item {
      border-bottom-color: rgba(0, 168, 255, 0.15);
      color: #ffffff;
      padding: 10px 8px;
    }

    body.aero-theme .lap-item:hover,
    body.theme-aero .lap-item:hover,
    [data-theme="aero"] .lap-item:hover {
      background-color: rgba(0, 168, 255, 0.12);
    }

    body.aero-theme .lap-num,
    body.theme-aero .lap-num,
    [data-theme="aero"] .lap-num {
      color: #60a5fa;
    }

    body.aero-theme .lap-time,
    body.theme-aero .lap-time,
    [data-theme="aero"] .lap-time {
      color: #ffffff;
    }

    body.aero-theme .lap-split,
    body.theme-aero .lap-split,
    [data-theme="aero"] .lap-split {
      color: #93c5fd;
    }

    body.aero-theme .lap-item.best .lap-time,
    body.theme-aero .lap-item.best .lap-time,
    [data-theme="aero"] .lap-item.best .lap-time {
      color: #34d399;
      font-weight: bold;
    }

    body.aero-theme .lap-item.worst .lap-time,
    body.theme-aero .lap-item.worst .lap-time,
    [data-theme="aero"] .lap-item.worst .lap-time {
      color: #f87171;
    }

    body.aero-theme .lap-empty,
    body.theme-aero .lap-empty,
    [data-theme="aero"] .lap-empty {
      color: #60a5fa;
    }

    /* ── Manuel Giriş Kutuları ── */
    body.aero-theme .manual-input-row input,
    body.theme-aero .manual-input-row input,
    [data-theme="aero"] .manual-input-row input {
      background: rgba(0, 168, 255, 0.08);
      border: 1px solid rgba(0, 168, 255, 0.25);
      border-radius: 8px;
      color: #ffffff;
      padding: 8px 12px;
    }

    body.aero-theme .manual-input-row input:focus,
    body.theme-aero .manual-input-row input:focus,
    [data-theme="aero"] .manual-input-row input:focus {
      border-color: #00a8ff;
      box-shadow: 0 0 10px rgba(0, 168, 255, 0.4);
    }

    /* ── Sınav Sonuç Alanı ── */
    body.aero-theme .exam-result,
    body.theme-aero .exam-result,
    [data-theme="aero"] .exam-result {
      background: rgba(4, 20, 48, 0.85);
      border: 1px solid rgba(0, 168, 255, 0.3);
      border-radius: 12px;
      color: #ffffff;
      box-shadow: 0 8px 24px rgba(0, 10, 30, 0.4);
    }

    body.aero-theme .exam-result-label,
    body.theme-aero .exam-result-label,
    [data-theme="aero"] .exam-result-label {
      color: #60a5fa;
      font-weight: bold;
    }

    body.aero-theme .exam-result-time,
    body.theme-aero .exam-result-time,
    [data-theme="aero"] .exam-result-time {
      color: #ffffff;
    }

    body.aero-theme .exam-result-info,
    body.theme-aero .exam-result-info,
    [data-theme="aero"] .exam-result-info {
      color: #93c5fd;
    }

    /* ── Ayırıcı Çizgiler ── */
    body.aero-theme .divider,
    body.theme-aero .divider,
    [data-theme="aero"] .divider {
      border: none;
      border-top: 1px solid rgba(0, 168, 255, 0.18);
      margin: 20px 0;
    }

    body.aero-theme .section-sub,
    body.theme-aero .section-sub,
    [data-theme="aero"] .section-sub {
      color: var(--text-p, #ffffff);
    }

    body.aero-theme p,
    body.theme-aero p,
    [data-theme="aero"] p {
      color: var(--text-s, #93c5fd);
    }

    body.aero-theme .cd-pct,
    body.theme-aero .cd-pct,
    [data-theme="aero"] .cd-pct {
      color: var(--text-s, #93c5fd);
    }

    body.aero-theme .cd-time.warning,
    body.theme-aero .cd-time.warning,
    [data-theme="aero"] .cd-time.warning {
      color: var(--warn, #f59e0b);
      text-shadow: none;
    }

    body.aero-theme .cd-time.danger,
    body.theme-aero .cd-time.danger,
    [data-theme="aero"] .cd-time.danger {
      color: var(--danger, #ef4444);
      text-shadow: none;
    }

    /* ── Ekran Altı İlerleme Çubuğu (Progress Bar) ── */
    body.aero-theme #progress-bar-wrap,
    body.theme-aero #progress-bar-wrap,
    [data-theme="aero"] #progress-bar-wrap {
      height: 10px;
      background: rgba(0, 168, 255, 0.1);
      border-top: 1px solid rgba(0, 168, 255, 0.2);
    }

    body.aero-theme #progress-bar,
    body.theme-aero #progress-bar,
    [data-theme="aero"] #progress-bar {
      box-shadow: 0 0 12px rgba(0, 168, 255, 0.5);
      border-radius: 4px;
      transition: width 0.1s linear, background-color 0.5s ease;
    }

    /* ── Odak Modu Ayarları ── */
    body.aero-theme.focus-mode,
    body.theme-aero.focus-mode,
    [data-theme="aero"].focus-mode {
      background: #020914;
    }

    body.aero-theme.focus-mode::before,
    body.theme-aero.focus-mode::before,
    [data-theme="aero"].focus-mode::before,
    body.aero-theme.focus-mode::after,
    body.theme-aero.focus-mode::after,
    [data-theme="aero"].focus-mode::after {
      display: none;
    }

    body.aero-theme.focus-mode .card,
    body.theme-aero.focus-mode .card,
    [data-theme="aero"].focus-mode .card {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    body.aero-theme.focus-mode .card::before,
    body.aero-theme.focus-mode .card::after,
    body.theme-aero.focus-mode .card::before,
    body.theme-aero.focus-mode .card::after,
    [data-theme="aero"].focus-mode .card::before,
    [data-theme="aero"].focus-mode .card::after {
      display: none !important;
    }

    body.aero-theme.focus-mode .time-big,
    body.aero-theme.focus-mode .sw-time,
    body.aero-theme.focus-mode .cd-time,
    body.theme-aero.focus-mode .time-big,
    body.theme-aero.focus-mode .sw-time,
    body.theme-aero.focus-mode .cd-time,
    [data-theme="aero"].focus-mode .time-big,
    [data-theme="aero"].focus-mode .sw-time,
    [data-theme="aero"].focus-mode .cd-time {
      color: #ffffff;
      text-shadow: 0 0 32px rgba(0, 168, 255, 0.5);
    }

    body.aero-theme #focus-exit,
    body.theme-aero #focus-exit,
    [data-theme="aero"] #focus-exit {
      background: rgba(4, 20, 48, 0.85);
      border: 1px solid rgba(0, 168, 255, 0.35);
      border-radius: 10px;
      color: #ffffff;
    }

    body.aero-theme #focus-exit:hover,
    body.theme-aero #focus-exit:hover,
    [data-theme="aero"] #focus-exit:hover {
      background: rgba(0, 168, 255, 0.25) !important;
      border-color: #00a8ff !important;
      box-shadow: 0 0 14px rgba(0, 168, 255, 0.5) !important;
    }

    /* ===== DEEP PURPLE NEON TEMA (FUTURISTIC GLASS) ===== */
    body.purple-theme {
      --bg-deep: #000000;
      --bg-mid: #05000a;
      --bg-card: rgba(15, 2, 25, 0.4);
      --bg-card-hv: rgba(25, 5, 45, 0.6);
      --border: hsla(var(--accent-h, 270), var(--accent-s, 90%), 65%, 0.25);
      --border-hv: hsla(var(--accent-h, 270), var(--accent-s, 90%), 65%, 0.5);
      --text-p: #f3e8ff;
      --text-s: hsl(var(--accent-h, 270) calc(var(--accent-s, 90%) * 0.7) 82%);
      --text-m: hsl(var(--accent-h, 270) calc(var(--accent-s, 90%) * 0.5) 65%);
      --accent-dim: hsla(var(--accent-h, 270), var(--accent-s, 90%), 65%, 0.15);
      --accent2: var(--accent, #8b5cf6);
      --danger: #ff453a;
      --warn: #ff007f;
      --shadow: 0 0 40px hsla(var(--accent-h, 270), var(--accent-s, 90%), 50%, 0.25);
      /* Smart Action Bar */
      --bar-idle: var(--accent, #8b5cf6);
      --bar-running: var(--accent2, #c084fc);
      --bar-paused: #ff007f;
    }

    /* Deep Purple Teması için Genişlik ve Yerleşim Optimizasyonu */
    body.purple-theme .card {
      max-width: 1200px;
      /* Standart 680px değerinden 800px'e çıkarıldı */
      padding: 48px 42px;
      /* İçerideki yazıların nefes alması için boşluklar artırıldı */
    }

    /* Geniş fontun butonlara tam sığması için */
    body.purple-theme .btn-lg {
      padding: 20px 28px;
      min-height: 64px;
    }

    /* Sınav bitiş saati ve geri sayım butonlarının yan yana daha rahat durması için */
    body.purple-theme .exam-btns,
    body.purple-theme .cd-quick {
      gap: 16px;
    }

    /* Küçük ekranlarda yazıların taşmaması için mobil düzenleme */
    @media (max-width: 520px) {
      body.purple-theme .card {
        padding: 30px 20px;
      }

      body.purple-theme .time-big {
        font-size: clamp(60px, 15vw, 110px);
        /* Mobilde taşmayı önlemek için font biraz küçültüldü */
      }
    }

    /* Deep Purple Odak Modu: Arka plan kutusunu ve efektleri kaldırır */
    body.purple-theme.focus-mode .card {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Odak modunda gradyan metnin okunabilirliğini korumak için parlama miktarını artırır */
    body.purple-theme.focus-mode .time-big,
    body.purple-theme.focus-mode .sw-time,
    body.purple-theme.focus-mode .cd-time {
      filter: none !important;
      text-shadow: none !important;
    }

    /* Gradyan Arka Plan Işıkları — seçilen vurgu rengine göre */
    body.purple-theme::before {
      background:
        radial-gradient(circle at 15% 15%, hsl(var(--accent-h) var(--accent-s) 55% / 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 85%, hsl(var(--accent-h) var(--accent-s) 75% / 0.1) 0%, transparent 50%);
    }

    /* Cam Efekti ve Gradyan Metinler */
    body.purple-theme .card {
      backdrop-filter: blur(25px) saturate(180%);
      -webkit-backdrop-filter: blur(25px) saturate(180%);
      border: 1px solid hsl(var(--accent-h) var(--accent-s) 65% / 0.3);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), inset 0 0 15px hsl(var(--accent-h) var(--accent-s) 65% / 0.05);
    }

    /* Saat ve Başlıklara Özel Gradyan — seçilen vurgu rengine göre (saat rengi özelleştirilebilir) */
    body.purple-theme .time-big,
    body.purple-theme .sw-time,
    body.purple-theme .cd-time,
    body.purple-theme .logo {
      font-family: 'Syne', sans-serif;
      /* Fütüristik geniş font */
      font-weight: 800;
      background: var(--clock-render-gradient, linear-gradient(to bottom, #ffffff 20%, var(--accent, #8b5cf6) 100%));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 18px hsl(var(--accent-h, 270) var(--accent-s, 90%) 65% / 0.45));
    }

    body.purple-theme .sep,
    body.purple-theme .clock-colon {
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      -webkit-text-fill-color: var(--clock-colon-color, var(--clock-render-color, #ffffff)) !important;
      color: var(--clock-colon-color, var(--clock-render-color, #ffffff)) !important;
    }

    body.purple-theme .logo span {
      background: var(--clock-render-gradient, linear-gradient(to bottom, #ffffff 20%, var(--accent, #8b5cf6) 100%));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Odak Modu Ayarı */
    body.purple-theme.focus-mode {
      background: #000000 !important;
    }

    /* Buton Güzelleştirme — seçilen vurgu rengiyle uyumlu */
    body.purple-theme .btn {
      background: hsl(var(--accent-h) var(--accent-s) 45% / 0.12);
      border: 1px solid hsl(var(--accent-h) var(--accent-s) 65% / 0.25);
      color: var(--text-p);
    }

    body.purple-theme .btn:hover {
      background: hsl(var(--accent-h) var(--accent-s) 45% / 0.22);
      border-color: var(--accent, #a855f7);
    }

    /* 3. Kart Düzeni ve Işığın Sol Üstten Vurma Efekti (3D Çıkıntı Görünümü) */
    /* ===== AÇIK TEMA (LIGHT) — KÖK RENK DEĞİŞKENLERİ =====
       Önceden bu blok eksikti: sadece birkaç bileşen (kart, sekme, buton)
       elle beyazlatılmıştı, geri kalan tüm arayüz (arkaplan, metinler,
       Grup/İstatistik/Profil modülleri) koyu temada kalıyordu. Şimdi tüm
       temel değişkenler tanımlanarak site genelinde tutarlı, gerçek bir
       açık tema elde ediliyor. */
    body.light-theme {
      --bg-deep: #f4f5f7;
      --bg-mid: #e9ebef;
      --bg-card: rgba(255, 255, 255, 0.78);
      --bg-card-hv: rgba(255, 255, 255, 0.94);
      --border: rgba(15, 23, 42, 0.1);
      --border-hv: rgba(15, 23, 42, 0.18);
      --text-p: #0f172a;
      --text-s: #475569;
      --text-m: #94a3b8;
      --accent-dim: rgba(37, 99, 235, 0.1);
      --accent2: var(--accent, #2563eb);
      --danger: #dc2626;
      --warn: #d97706;
      --shadow: 0 20px 45px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.04);
      /* Smart Action Bar */
      --bar-idle: var(--accent, #2563eb);
      --bar-running: var(--accent2, #38bdf8);
      --bar-paused: #d97706;
    }

    /* Açık temada arkaplan aydınlık tonlarda kalsın (koyu tema radial glow'ları burada devre dışı) */
    body.light-theme::before {
      background:
        radial-gradient(ellipse 70% 60% at 10% 10%, rgba(37, 99, 235, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 90% 90%, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
    }

    body.light-theme::after {
      background-image: radial-gradient(circle, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    }

    body.light-theme .card,
    body.pink-theme .card {
      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      backdrop-filter: blur(35px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(35px) saturate(190%) !important;

      /* Sol ve üst kenarlar daha opak beyaz yapılarak derinlik hissi (convex) güçlendirildi */
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
      border-left: 1px solid rgba(255, 255, 255, 0.7) !important;

      box-shadow: var(--shadow) !important;
    }

    /* 4. Menü (Segmented Control) Alanının Havada Durma Moduna Uydurulması */
    body.light-theme .tabs,
    body.theme-light .tabs,
    [data-theme="light"] .tabs,
    body.pink-theme .tabs,
    body.theme-pink .tabs,
    [data-theme="pink"] .tabs {
      background: rgba(0, 0, 0, 0.03) !important;
      border: 1px solid rgba(255, 255, 255, 0.6) !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    body.light-theme .tab,
    body.theme-light .tab,
    [data-theme="light"] .tab {
      color: #475569 !important;
    }

    body.pink-theme .tab,
    body.theme-pink .tab,
    [data-theme="pink"] .tab {
      color: #8a636c !important;
    }

    body.light-theme .tab.active,
    body.theme-light .tab.active,
    [data-theme="light"] .tab.active,
    body.pink-theme .tab.active,
    body.theme-pink .tab.active,
    [data-theme="pink"] .tab.active {
      background: #ffffff !important;
      color: var(--accent) !important;
      border: 1px solid rgba(255, 255, 255, 0.9) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
      font-weight: 700 !important;
    }

    /* 5. Alt Butonların da İçe Çökük Durmaması İçin Dışa Çıkık Yapılması */
    body.light-theme .btn,
    body.pink-theme .btn {
      background: rgba(255, 255, 255, 0.65) !important;
      border: 1px solid rgba(255, 255, 255, 0.7) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
    }

    body.light-theme .btn:hover,
    body.pink-theme .btn:hover {
      background: rgba(255, 255, 255, 0.9) !important;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05) !important;
    }

    /* ====================================================================
   🎨 THEME STUDIO — UNIFIED 3-TAB ENGINE V7
   ==================================================================== */
    #studio-drawer {
      position: fixed;
      top: 16px;
      right: -440px;
      width: 390px;
      max-width: calc(100vw - 20px);
      height: calc(100vh - 32px);
      max-height: 760px;
      background: var(--theme-bg-secondary, rgba(14, 14, 18, 0.96));
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.12));
      border-radius: var(--radius-card, 20px);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      z-index: 3000;
      display: flex;
      flex-direction: column;
      transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s;
      overflow: hidden;
      color: var(--theme-text, #ffffff);
      font-family: var(--font-ui, 'Outfit', sans-serif);
    }

    #studio-drawer.open {
      right: 16px;
    }

    @media (max-width: 480px) {
      #studio-drawer {
        top: 10px;
        right: -100vw;
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
        max-height: 660px;
      }

      #studio-drawer.open {
        right: 10px;
      }
    }

    .studio-header {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: rgba(0, 0, 0, 0.15);
    }

    .studio-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .studio-title-badge {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .studio-active-theme-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent, #0bd6a8);
      box-shadow: 0 0 8px var(--accent, #0bd6a8);
      flex-shrink: 0;
    }

    .studio-title-text {
      font-size: 15px;
      font-weight: 700;
      color: var(--theme-text, #ffffff);
      line-height: 1.2;
    }

    .studio-subtitle-text {
      font-size: 10px;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.5));
    }

    .studio-status-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      background: var(--accent-soft, rgba(255, 255, 255, 0.1));
      color: var(--accent, #0bd6a8);
      border: 1px solid var(--theme-border, transparent);
    }

    .studio-close-btn {
      background: rgba(255, 255, 255, 0.08);
      border: none;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
      width: 26px;
      height: 26px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .studio-close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: var(--theme-text, #ffffff);
    }

    /* Mini Live Clock Preview */
    .studio-preview-card {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      border-radius: 10px;
      padding: 8px 12px;
      text-align: center;
      position: relative;
    }

    .studio-preview-label {
      font-size: 9px;
      letter-spacing: 1.5px;
      font-weight: 700;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.4));
      margin-bottom: 2px;
    }

    .studio-preview-time {
      font-family: var(--font-clock, 'Inter', monospace);
      font-size: 22px;
      font-weight: var(--clock-active-weight, 700);
      letter-spacing: var(--clock-active-spacing, -1px);
      color: var(--clock-render-color, #ffffff);
      line-height: 1.2;
    }

    /* Tabs Nav (STRICTLY 3 TABS: TEMA, SAAT, GÖRÜNÜM) */
    .studio-tabs {
      display: flex;
      padding: 4px 8px 0;
      gap: 4px;
      border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      background: rgba(0, 0, 0, 0.12);
    }

    .studio-tab {
      flex: 1;
      padding: 9px 0;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.6));
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }

    .studio-tab:hover {
      color: var(--theme-text, #ffffff);
    }

    .studio-tab.active {
      color: var(--accent, #0bd6a8);
      border-bottom-color: var(--accent, #0bd6a8);
    }

    /* Body Panels */
    .studio-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
    }

    .studio-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .studio-panel.active {
      display: flex;
    }

    .studio-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.06));
      border-radius: var(--radius-control, 12px);
      padding: 10px 12px;
    }

    .studio-group-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--accent, #0bd6a8);
      margin-bottom: 2px;
    }

    .studio-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: var(--theme-text, rgba(255, 255, 255, 0.9));
    }

    .studio-desc {
      font-size: 10px;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.5));
      margin-top: -4px;
      line-height: 1.3;
    }

    .studio-row-between {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: var(--theme-text, rgba(255, 255, 255, 0.9));
      min-height: 28px;
    }

    .studio-val-display {
      font-size: 11px;
      color: var(--accent, #0bd6a8);
      font-weight: 700;
    }

    /* Theme Switcher Grid inside Theme Studio */
    .studio-theme-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .studio-theme-card {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      border-radius: var(--radius-control, 8px);
      padding: 8px 10px;
      cursor: pointer;
      transition: all 0.18s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .studio-theme-card:hover {
      border-color: var(--accent, #0bd6a8);
      background: rgba(255, 255, 255, 0.06);
    }

    .studio-theme-card.active {
      border-color: var(--accent, #0bd6a8);
      background: var(--accent-soft, rgba(11, 214, 168, 0.15));
    }

    .studio-theme-card-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .studio-theme-card:hover .studio-theme-card-dot,
    .studio-theme-card.active .studio-theme-card-dot {
      transform: scale(1.2);
    }

    .studio-theme-icon {
      font-size: 13px;
      margin-right: 3px;
      display: inline-block;
      vertical-align: middle;
    }

    .studio-theme-card-name {
      font-size: 11px;
      font-weight: 700;
      color: var(--theme-text, #ffffff);
      display: flex;
      align-items: center;
    }

    /* Palette Swatches */
    .studio-palette-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 4px;
    }

    .studio-swatch-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .studio-swatch-dot:hover {
      transform: scale(1.15);
    }

    .studio-swatch-dot.active {
      transform: scale(1.15);
      box-shadow: 0 0 0 2px var(--theme-bg, #050507), 0 0 0 4px var(--accent-gradient, var(--accent, #0bd6a8));
    }

    .studio-swatch-dot.dual-swatch {
      border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .studio-swatch-dot.dual-swatch.active {
      box-shadow: 0 0 0 2px var(--theme-bg, #050507), 0 0 0 4px var(--accent-gradient, var(--accent, #0bd6a8)) !important;
    }

    .studio-swatch-dot.active::after {
      content: '✓';
      color: var(--text-p);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      font-size: 11px;
      font-weight: 800;
    }

    /* Search Input */
    .studio-search-input {
      width: 100%;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
      border-radius: var(--radius-control, 8px);
      padding: 7px 10px;
      color: var(--text-p);
      font-size: 11px;
      outline: none;
      transition: border-color 0.15s;
    }

    .studio-search-input:focus {
      border-color: var(--accent, #0bd6a8);
    }

    /* Visual Font Selector Cards */
    .studio-font-category-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.4));
      margin: 6px 0 2px;
      text-transform: uppercase;
    }

    .studio-font-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      max-height: 200px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .studio-font-card {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
      border-radius: var(--radius-control, 8px);
      padding: 8px 10px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .studio-font-card:hover {
      border-color: var(--accent, #0bd6a8);
      background: rgba(255, 255, 255, 0.05);
    }

    .studio-font-card.active {
      border-color: var(--accent, #0bd6a8);
      background: var(--accent-soft, rgba(11, 214, 168, 0.15));
    }

    .studio-font-card-sample {
      font-size: 14px;
      color: var(--accent, #0bd6a8);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .studio-font-card-name {
      font-size: 10px;
      font-weight: 600;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Continuous Range Sliders */
    .studio-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.15);
      outline: none;
      cursor: pointer;
    }

    .studio-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent, #0bd6a8);
      box-shadow: 0 0 10px var(--accent, #0bd6a8);
      transition: transform 0.15s;
    }

    .studio-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }

    /* Segmented Control Buttons */
    .studio-segmented {
      display: flex;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      border-radius: var(--radius-control, 8px);
      padding: 3px;
      gap: 4px;
    }

    .studio-seg-btn {
      flex: 1;
      padding: 6px 0;
      background: transparent;
      border: none;
      border-radius: var(--radius-control, 6px);
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }

    .studio-seg-btn:hover {
      color: var(--theme-text, #ffffff);
    }

    .studio-seg-btn.active {
      background: var(--accent, #0bd6a8);
      color: var(--accent-text, #000000);
      font-weight: 700;
    }

    /* Select Control */
    .studio-select {
      width: 100%;
      background: var(--theme-card, rgba(0, 0, 0, 0.25));
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
      border-radius: var(--radius-control, 8px);
      padding: 6px 10px;
      color: var(--theme-text, #ffffff);
      font-size: 11px;
      outline: none;
    }

    .studio-select option {
      background: var(--theme-card, #111111);
      color: var(--theme-text, #ffffff);
    }

    /* Toggle Switch */
    .studio-toggle-switch {
      position: relative;
      display: inline-block;
      width: 38px;
      height: 20px;
      flex-shrink: 0;
    }

    .studio-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .studio-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      transition: 0.25s;
    }

    .studio-toggle-slider::before {
      content: '';
      position: absolute;
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
      background: white;
      border-radius: 50%;
      transition: 0.25s;
    }

    .studio-toggle-switch input:checked+.studio-toggle-slider {
      background: var(--accent, #0bd6a8);
    }

    .studio-toggle-switch input:checked+.studio-toggle-slider::before {
      transform: translateX(18px);
    }

    /* Toast Notification */
    .studio-toast {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--accent, #0bd6a8);
      color: var(--accent-text, #000000);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
      white-space: nowrap;
    }

    .studio-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Footer */
    .studio-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
      background: rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ── Theme Studio Custom Background Uploader Component ── */
    .studio-custom-bg-group {
      gap: 10px;
    }

    .studio-bg-upload-box {
      border: 1.5px dashed var(--theme-border, rgba(255, 255, 255, 0.18));
      border-radius: var(--radius-control, 10px);
      background: rgba(0, 0, 0, 0.22);
      padding: 12px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }

    .studio-bg-upload-box:hover {
      border-color: var(--accent, #0bd6a8);
      background: var(--accent-dim, rgba(11, 214, 168, 0.08));
      transform: translateY(-1px);
    }

    .studio-bg-upload-box:active {
      transform: translateY(0);
    }

    .studio-bg-upload-icon {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      background: var(--accent-soft, rgba(11, 214, 168, 0.12));
      color: var(--accent, #0bd6a8);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .studio-bg-upload-box:hover .studio-bg-upload-icon {
      transform: scale(1.08);
      background: var(--accent, #0bd6a8);
      color: var(--accent-text, #000000);
    }

    .studio-bg-upload-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
      overflow: hidden;
    }

    .studio-bg-upload-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--theme-text, #ffffff);
      line-height: 1.2;
    }

    .studio-bg-upload-sub {
      font-size: 9.5px;
      color: var(--theme-text-secondary, rgba(255, 255, 255, 0.5));
      line-height: 1.2;
    }

    .studio-bg-preview-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0, 0, 0, 0.32);
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.12));
      border-radius: var(--radius-control, 10px);
      padding: 10px 12px;
      animation: fadeIn 0.25s ease;
    }

    .studio-bg-thumb-wrap {
      position: relative;
      width: 60px;
      height: 42px;
      border-radius: 7px;
      overflow: hidden;
      border: 1.5px solid var(--accent, #0bd6a8);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      flex-shrink: 0;
      background: #000;
    }

    .studio-bg-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }

    .studio-bg-preview-card:hover .studio-bg-thumb-img {
      transform: scale(1.06);
    }

    .studio-bg-thumb-badge {
      position: absolute;
      bottom: 2px;
      right: 2px;
      font-size: 7.5px;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: 3px;
      background: var(--accent, #0bd6a8);
      color: var(--accent-text, #000000);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1.1;
    }

    .studio-bg-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .studio-bg-filename {
      font-size: 11px;
      font-weight: 700;
      color: var(--theme-text, #ffffff);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .studio-bg-filesize {
      font-size: 9.5px;
      color: var(--accent, #0bd6a8);
      font-weight: 600;
    }

    .studio-bg-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }

    .btn-studio-bg-action {
      padding: 4px 9px;
      border-radius: 6px;
      font-size: 10.5px;
      font-weight: 700;
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.12));
      background: rgba(255, 255, 255, 0.08);
      color: var(--theme-text, #ffffff);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .btn-studio-bg-action:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: var(--accent, #0bd6a8);
    }

    .btn-studio-bg-action.danger {
      color: #ef4444;
      border-color: rgba(239, 68, 68, 0.28);
      background: rgba(239, 68, 68, 0.08);
    }

    .btn-studio-bg-action.danger:hover {
      background: rgba(239, 68, 68, 0.22);
      border-color: #ef4444;
      color: #ffffff;
    }

    /* ════════════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY, PERFECT CENTERING & CONTAINER BOUND CLOCK
   ════════════════════════════════════════════════════════════════════ */

    body {
      font-family: var(--font-ui, 'Outfit', sans-serif) !important;
    }

    .logo {
      font-family: var(--font-ui, 'Outfit', sans-serif) !important;
      font-weight: 800 !important;
      letter-spacing: -0.5px !important;
    }

    body.studio-customized {
      background: var(--theme-bg, #050507) !important;
      color: var(--theme-text, #ffffff) !important;
    }

    /* Perfect Site Centering & Dynamic Expansion */
    #app {
      width: 100% !important;
      max-width: min(calc(100vw - 20px), clamp(540px, calc(var(--card-area-scale, 100) * 8.2px), 1400px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      transition: max-width 0.3s ease !important;
    }

    /* Card Container Sizing & Fluid Expansion */
    .card {
      width: min(calc(100vw - 32px), clamp(480px, calc(var(--card-area-scale, 100) * 7.5px), 1350px)) !important;
      max-width: calc(100vw - 32px) !important;
      padding: clamp(24px, calc(var(--card-area-scale, 100) * 0.36px), 48px) clamp(24px, calc(var(--card-area-scale, 100) * 0.42px), 54px) !important;
      border-radius: var(--radius-card, 20px) !important;
      box-shadow: var(--theme-card-shadow, 0 20px 50px rgba(0, 0, 0, 0.5)) !important;
      box-sizing: border-box !important;
      transition: width 0.3s ease, padding 0.3s ease !important;
    }

    /* TYT / AYT & Preset Buttons Dynamic Theme Color Alignment */
    body.studio-customized .btn-preset,
    body.studio-customized .btn-accent,
    body.studio-customized .preset-card-wrap .btn-preset {
      background: var(--accent-soft, rgba(11, 214, 168, 0.15)) !important;
      border-color: var(--accent, #0bd6a8) !important;
      color: var(--accent, #0bd6a8) !important;
    }

    body.studio-customized .btn-preset:hover,
    body.studio-customized .btn-accent:hover,
    body.studio-customized .preset-card-wrap .btn-preset:hover {
      background: var(--accent, #0bd6a8) !important;
      color: var(--accent-text, #000000) !important;
    }

    /* Clock Alignment & Layout */
    .time-display,
    .sw-display,
    .cd-time-wrap {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }

    body.clock-align-center .time-display,
    body.clock-align-center .sw-display,
    body.clock-align-center .cd-time-wrap {
      align-items: center !important;
      justify-content: center !important;
    }

    body.clock-align-left .time-display,
    body.clock-align-left .sw-display,
    body.clock-align-left .cd-time-wrap {
      align-items: flex-start !important;
      justify-content: flex-start !important;
    }

    body.clock-align-right .time-display,
    body.clock-align-right .sw-display,
    body.clock-align-right .cd-time-wrap {
      align-items: flex-end !important;
      justify-content: flex-end !important;
    }

    /* Clock Styling & Font Size Calculation (Scales up to 160% safely) */
    .time-big,
    .sw-time,
    .cd-time {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      font-family: var(--font-clock, 'Inter', monospace) !important;
      font-weight: var(--clock-active-weight, 700) !important;
      letter-spacing: var(--clock-active-spacing, -1px) !important;
      font-size: calc(var(--clock-scale-pct, 100) * 0.01 * clamp(52px, 14vw, 140px)) !important;
      line-height: 1.12 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      color: var(--clock-render-color, #ffffff) !important;
    }

    body:not(.aero-theme):not(.mono-theme) .btn,
    body:not(.aero-theme):not(.mono-theme) .tab,
    body:not(.aero-theme):not(.mono-theme) .input {
      border-radius: var(--radius-button, 12px) !important;
    }

    /* ===== BUTON STİLLERİ: Sade / Cam / Gradyan ===== */
    /* (Aero ve Mono temalar kendi özel buton görünümlerini korur) */
    body.btn-style-flat:not(.aero-theme):not(.mono-theme) .btn {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--theme-card, rgba(255, 255, 255, 0.08)) !important;
      border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.12)) !important;
      box-shadow: none !important;
    }

    body.btn-style-flat:not(.aero-theme):not(.mono-theme) .btn:hover {
      background: var(--theme-card-hover, rgba(255, 255, 255, 0.14)) !important;
    }

    body.btn-style-glass:not(.aero-theme):not(.mono-theme) .btn {
      backdrop-filter: blur(18px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(190%) !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    body.btn-style-glass:not(.aero-theme):not(.mono-theme) .btn:hover {
      background: rgba(255, 255, 255, 0.15) !important;
    }

    body.btn-style-gradient:not(.aero-theme):not(.mono-theme) .btn {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: linear-gradient(135deg, var(--accent-soft, rgba(11, 214, 168, 0.28)) 0%, transparent 100%) !important;
      border: 1px solid var(--accent, rgba(255, 255, 255, 0.25)) !important;
      box-shadow: none !important;
    }

    body.btn-style-gradient:not(.aero-theme):not(.mono-theme) .btn:hover {
      background: linear-gradient(135deg, var(--accent, #0bd6a8) 0%, var(--accent-soft, rgba(11, 214, 168, 0.35)) 100%) !important;
      color: var(--accent-text, #000000) !important;
    }

    /* Card Frame Styles (Aero ve Mono temalarının pencere ve çerçeve kimlikleri korunur) */
    body.card-frame-borderless:not(.aero-theme):not(.mono-theme) .card {
      border-color: transparent !important;
      box-shadow: none !important;
    }

    body.card-frame-transparent:not(.aero-theme):not(.mono-theme) .card {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    body.card-frame-gradient:not(.aero-theme):not(.mono-theme) .card {
      background: linear-gradient(var(--gradient-angle, 145deg), var(--accent-soft, rgba(11, 214, 168, 0.18)) 0%, var(--theme-card, rgba(255, 255, 255, 0.03)) 55%, transparent 100%) !important;
      border-color: var(--accent, rgba(255, 255, 255, 0.15)) !important;
      box-shadow: 0 20px 50px -10px var(--accent-soft, rgba(0, 0, 0, 0.4)) !important;
    }

    body.card-frame-solid:not(.aero-theme):not(.mono-theme) .card {
      background: var(--theme-card, #14181f) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-color: var(--theme-border, rgba(255, 255, 255, 0.1)) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }

    /* Universal Colon Animation */
    @keyframes colonBlink {

      0%,
      100% {
        opacity: 1;
        visibility: visible;
      }

      50% {
        opacity: 0.12;
        visibility: visible;
      }
    }

    .sep.colon-blink,
    .clock-colon.colon-blink,
    body.studio-customized .sep.colon-blink {
      animation: colonBlink 1s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    }

    body.studio-customized .sep,
    body.studio-customized .clock-colon {
      color: var(--clock-colon-color, var(--clock-render-color, #ffffff)) !important;
    }

    /* Progress Bar Rules */
    #progress-bar-wrap {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 6px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      z-index: 1000 !important;
      pointer-events: none !important;
    }

    #progress-bar {
      height: 100% !important;
      background: var(--bar-active-color, var(--accent, #0bd6a8)) !important;
      transition: width 0.15s linear, background-color 0.3s ease !important;
      opacity: 1 !important;
      visibility: visible !important;
      box-shadow: none !important;
    }

    /* ════════════════════════════════════════════════════════════════════
   UNIVERSAL FOCUS MODE ISOLATION & SCREEN FILLING CLOCK
   ════════════════════════════════════════════════════════════════════ */
    body.focus-mode .card,
    body.focus-mode #main-card,
    body.focus-mode.studio-customized .card,
    body.focus-mode.studio-customized #main-card,
    body.focus-mode .exam-result,
    body.focus-mode .lap-list,
    body.focus-mode [class*="card"] {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      padding: 0 !important;
      margin: 0 auto !important;
      max-width: none !important;
    }

    body.focus-mode .card::before,
    body.focus-mode .card::after,
    body.focus-mode #main-card::before,
    body.focus-mode #main-card::after,
    body.focus-mode [class*="card"]::before,
    body.focus-mode [class*="card"]::after,
    body.focus-mode::before,
    body.focus-mode::after,
    body.focus-mode #app::before,
    body.focus-mode #app::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    body.focus-mode #progress-bar-wrap,
    body.focus-mode #progress-bar,
    body.focus-mode .ambient-glow-layer,
    body.focus-mode .mobile-bottom-nav,
    body.focus-mode #mobile-bottom-nav {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    body.focus-mode .time-display,
    body.focus-mode .sw-display,
    body.focus-mode .cd-time-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
    }

    /* ═════════════════════════════════════════════════════════════════════
       CUSTOM BACKGROUND LAYER (Client-Side Storage & GPU Acceleration)
       ═════════════════════════════════════════════════════════════════════ */
    .custom-bg-layer {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      z-index: -2;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
      will-change: transform, opacity;
      transform: translateZ(0);
    }

    .custom-bg-layer.active,
    body.has-custom-bg .custom-bg-layer {
      opacity: 1;
      visibility: visible;
    }

    .custom-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      filter: brightness(var(--custom-bg-brightness, 1));
      will-change: filter, transform;
      transform: translateZ(0);
      transition: filter 0.15s ease, opacity 0.3s ease;
    }

    .custom-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, var(--custom-bg-overlay-dim, 0));
      pointer-events: none;
      transition: background-color 0.15s ease;
      will-change: background-color;
    }

    body.has-custom-bg {
      background-color: transparent !important;
    }

    html.has-custom-bg,
    html {
      background-color: var(--bg-deep, #08080a);
    }

    body.has-custom-bg::before {
      opacity: 0.25 !important;
    }

    /* Lite ve Mono modlarında tema tercihi desteği */
    body.lite-theme .custom-bg-layer.theme-disabled,
    body.litewhite-theme .custom-bg-layer.theme-disabled,
    body.mono-theme .custom-bg-layer.theme-disabled {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* ═════════════════════════════════════════════════════════════════════
       DYNAMIC AMBIENT GLOW SYSTEM (GPU-Accelerated Atmospheric Light Orbs)
       ═════════════════════════════════════════════════════════════════════ */
    .ambient-glow-layer {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
      opacity: calc(var(--ambient-opacity, 0.7) * var(--ambient-master-toggle, 1));
      transition: opacity 0.5s ease;
    }

    body.glow-disabled .ambient-glow-layer,
    body.focus-mode .ambient-glow-layer {
      display: none !important;
      opacity: 0 !important;
    }

    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      -webkit-filter: blur(80px);
      will-change: transform;
      mix-blend-mode: screen;
      transition: background 0.8s ease, transform 0.8s ease;
    }

    /* Orb 1: Sol Üst - Birincil Vurgu Rengi */
    .ambient-orb.orb-1 {
      top: -12%;
      left: -12%;
      width: 55vw;
      height: 55vw;
      max-width: 750px;
      max-height: 750px;
      background: radial-gradient(circle, var(--accent, #0bd6a8) 0%, var(--accent-soft, rgba(11, 214, 168, 0.15)) 50%, rgba(0, 0, 0, 0) 75%);
      animation: ambientFloat1 22s ease-in-out infinite alternate;
    }

    /* Orb 2: Sağ Alt - İkincil Vurgu Rengi */
    .ambient-orb.orb-2 {
      bottom: -15%;
      right: -12%;
      width: 52vw;
      height: 52vw;
      max-width: 700px;
      max-height: 700px;
      background: radial-gradient(circle, var(--accent2, var(--accent, #3b82f6)) 0%, var(--accent-soft, rgba(59, 130, 246, 0.15)) 48%, rgba(0, 0, 0, 0) 75%);
      animation: ambientFloat2 26s ease-in-out infinite alternate;
    }

    /* Orb 3: Orta / Gezgin Ambiyans Işığı */
    .ambient-orb.orb-3 {
      top: 35%;
      left: 30%;
      width: 42vw;
      height: 42vw;
      max-width: 580px;
      max-height: 580px;
      background: radial-gradient(circle, var(--accent, #0bd6a8) 0%, rgba(0, 0, 0, 0) 70%);
      opacity: 0.5;
      animation: ambientFloat3 20s ease-in-out infinite alternate;
    }

    /* Mono Tema Özel Ambiyans Işıkları */
    body.mono-theme .ambient-orb.orb-1 {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0) 75%);
    }

    body.mono-theme .ambient-orb.orb-2 {
      background: radial-gradient(circle, rgba(200, 200, 210, 0.08) 0%, rgba(100, 100, 110, 0.02) 48%, rgba(0, 0, 0, 0) 75%);
    }

    body.mono-theme .ambient-orb.orb-3 {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    }

    /* GPU-Accelerated Smooth Floating Keyframes */
    @keyframes ambientFloat1 {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(6vw, 4vh, 0) scale(1.15);
      }

      100% {
        transform: translate3d(-3vw, 7vh, 0) scale(0.92);
      }
    }

    @keyframes ambientFloat2 {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(-5vw, -6vh, 0) scale(1.18);
      }

      100% {
        transform: translate3d(4vw, -2vh, 0) scale(0.95);
      }
    }

    @keyframes ambientFloat3 {
      0% {
        transform: translate3d(0, 0, 0) scale(0.9);
        opacity: 0.3;
      }

      50% {
        transform: translate3d(-7vw, 5vh, 0) scale(1.22);
        opacity: 0.65;
      }

      100% {
        transform: translate3d(5vw, -4vh, 0) scale(0.98);
        opacity: 0.4;
      }
    }

/* =====================================================
   PLAN (STUDY PLANNER / ÇALIŞMA PLANI) MODULE STYLES - MODERN GLASS V2
   Liquid Glass & Theme Studio Integrated
===================================================== */

:root {
  --plan-card-bg: var(--bg-card, rgba(255, 255, 255, 0.04));
  --plan-card-border: var(--card-border, var(--border, rgba(255, 255, 255, 0.1)));
  --plan-accent: var(--accent, #0bd6a8);
  --plan-accent-glow: var(--accent-glow, rgba(11, 214, 168, 0.25));
  --plan-text-main: var(--text-p, #ffffff);
  --plan-text-sub: var(--text-s, rgba(255, 255, 255, 0.6));
  --plan-radius: var(--card-radius, 16px);
  --plan-radius-sm: max(6px, calc(var(--card-radius, 16px) - 6px));
}

/* Dynamic Main Card Expansion when in Plan Mode */
body:has(#panel-plan.active) #main-card,
#main-card.plan-mode-active {
  max-width: min(calc(100vw - 32px), clamp(680px, 90vw, 1400px)) !important;
  width: min(calc(100vw - 32px), clamp(680px, 90vw, 1400px)) !important;
  padding: clamp(16px, 2.5vw, 32px) clamp(14px, 2.8vw, 36px) !important;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Plan Panel Container */
.plan-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. Header */
.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 4px;
}

.plan-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.plan-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plan-accent);
}

.plan-subtitle {
  font-size: 13px;
  color: var(--plan-text-sub);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.plan-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--plan-radius-sm);
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 38px;
  box-sizing: border-box;
}

.plan-btn-action:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.1));
  border-color: var(--plan-accent);
  transform: translateY(-1px);
}

.plan-btn-action.plan-btn-action-danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
}

.plan-btn-action.plan-btn-action-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.plan-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--plan-radius-sm);
  background: var(--plan-accent);
  border: 1px solid var(--plan-accent);
  color: var(--accent-text, #ffffff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 38px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px var(--plan-accent-glow);
}

.plan-btn-add:hover {
  filter: brightness(1.08);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px var(--plan-accent-glow);
}

/* 2. Month & Week Navigation Box */
.plan-nav-box {
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius);
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}

.plan-month-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.plan-month-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.plan-month-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plan-text-main);
}

.plan-week-range-label {
  font-size: 12.5px;
  color: var(--plan-text-sub);
}

.plan-nav-controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-btn-this-week {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-card, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan-btn-this-week:hover {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  border-color: var(--plan-accent);
}

.plan-nav-mini-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan-nav-mini-btn:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.12));
  border-color: var(--plan-accent);
  color: var(--plan-accent);
}

.plan-view-toggle-mini {
  display: inline-flex;
  background: var(--bg-mid, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--plan-card-border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  margin-left: 4px;
}

.plan-view-toggle-mini button {
  font-size: 11.5px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--plan-text-sub);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.plan-view-toggle-mini button.active {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  font-weight: 700;
}

/* 7-Days Ribbon */
.plan-date-ribbon {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: 100%;
}

.plan-day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: var(--plan-radius-sm);
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--plan-card-border);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
  min-height: 58px;
  box-sizing: border-box;
}

.plan-day-pill:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  border-color: var(--border-hv);
  transform: translateY(-1.5px);
}

.plan-day-pill.active {
  background: var(--plan-accent) !important;
  border-color: var(--plan-accent) !important;
  color: var(--accent-text, #ffffff) !important;
  box-shadow: 0 4px 16px var(--plan-accent-glow);
  transform: translateY(-1.5px);
}

.plan-day-pill.active .plan-day-name,
.plan-day-pill.active .plan-day-num {
  color: var(--accent-text, #ffffff) !important;
  font-weight: 800;
}

.plan-day-pill.is-today:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--plan-accent);
}

.plan-day-pill.is-past:not(.active) {
  opacity: 0.65;
}


.plan-day-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--plan-text-sub);
  margin-bottom: 2px;
}

.plan-day-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--plan-text-main);
}

.plan-day-pill-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.12));
  color: var(--plan-text-main);
  margin-top: 3px;
}

.plan-day-pill.active .plan-day-pill-badge {
  background: rgba(0, 0, 0, 0.2);
  color: var(--accent-text, #ffffff);
}

/* 3. Main 2-Column Layout */
.plan-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

.plan-main-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.plan-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: sticky;
  top: 16px;
}

/* 4. Active Day Header Bar & Actions */
.plan-active-day-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  box-shadow: var(--shadow);
}

.plan-active-date-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--plan-text-main);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-day-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-active-day-stats-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
}

.plan-btn-clear-day {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan-btn-clear-day:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* 5. Toolbar: Filters & Search */
.plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.plan-filter-group {
  display: inline-flex;
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  padding: 3px;
  gap: 3px;
}

.plan-pill-filter {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: max(4px, calc(var(--plan-radius-sm) - 3px));
  border: none;
  background: transparent;
  color: var(--plan-text-sub);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 32px;
  box-sizing: border-box;
}

.plan-pill-filter.active {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  font-weight: 700;
}

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

.plan-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.plan-search-input {
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  padding: 6px 28px 6px 12px;
  font-size: 12px;
  color: var(--plan-text-main);
  outline: none;
  min-height: 34px;
  width: 140px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.plan-search-input:focus {
  width: 180px;
  border-color: var(--plan-accent);
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
}

.plan-search-clear-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--plan-text-sub);
  font-size: 12px;
  cursor: pointer;
  display: none;
}

.plan-select-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: var(--plan-card-bg, rgba(255, 255, 255, 0.05));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: 32px !important;
  border: 1px solid var(--plan-card-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--plan-radius-sm, 8px);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--plan-text-main, #f1f5f9);
  outline: none;
  min-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.plan-select-filter:focus {
  border-color: var(--plan-accent, #f97316);
  box-shadow: 0 0 0 3px var(--plan-accent-glow, rgba(249, 115, 22, 0.2));
}

.plan-select-filter option,
.plan-select-filter optgroup {
  background-color: var(--bg-mid, #161622);
  color: var(--plan-text-main, #f8fafc);
  font-size: 13px;
  padding: 8px 12px;
}

/* 6. Section Headers */
.plan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px 0;
}

.plan-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--plan-text-sub);
}

/* 7. Task Cards - Anti-Overlap & Compact */
.plan-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.plan-task-card:hover {
  border-color: var(--border-hv);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.plan-task-card.completed {
  opacity: 0.65;
  background: var(--plan-card-bg);
}

.plan-task-card.completed .plan-task-title {
  text-decoration: line-through;
  color: var(--plan-text-sub);
}

.plan-task-left-check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  flex-shrink: 0;
}

.plan-task-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--plan-card-border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  color: transparent;
}

.plan-task-checkbox:hover {
  border-color: var(--plan-accent);
}

.plan-task-card.completed .plan-task-checkbox {
  background: var(--plan-accent);
  border-color: var(--plan-accent);
  color: var(--accent-text, #ffffff);
}

.plan-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plan-task-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}

.plan-badge-type {
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  color: var(--plan-text-main);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.plan-badge-type.type-soru { background: rgba(11, 214, 168, 0.15); color: #0bd6a8; }
.plan-badge-type.type-video { background: rgba(255, 75, 75, 0.15); color: #ff6b6b; }
.plan-badge-type.type-konu { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.plan-badge-type.type-deneme { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

/* Theme-specific high-contrast badges for Light, Litewhite & Pink */
body.light-theme .plan-badge-type.type-soru,
body.theme-light .plan-badge-type.type-soru,
[data-theme="light"] .plan-badge-type.type-soru,
body.litewhite-theme .plan-badge-type.type-soru,
body.theme-litewhite .plan-badge-type.type-soru,
[data-theme="litewhite"] .plan-badge-type.type-soru {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
body.light-theme .plan-badge-type.type-video,
body.theme-light .plan-badge-type.type-video,
[data-theme="light"] .plan-badge-type.type-video,
body.litewhite-theme .plan-badge-type.type-video,
body.theme-litewhite .plan-badge-type.type-video,
[data-theme="litewhite"] .plan-badge-type.type-video {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}
body.light-theme .plan-badge-type.type-konu,
body.theme-light .plan-badge-type.type-konu,
[data-theme="light"] .plan-badge-type.type-konu,
body.litewhite-theme .plan-badge-type.type-konu,
body.theme-litewhite .plan-badge-type.type-konu,
[data-theme="litewhite"] .plan-badge-type.type-konu {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}
body.light-theme .plan-badge-type.type-deneme,
body.theme-light .plan-badge-type.type-deneme,
[data-theme="light"] .plan-badge-type.type-deneme,
body.litewhite-theme .plan-badge-type.type-deneme,
body.theme-litewhite .plan-badge-type.type-deneme,
[data-theme="litewhite"] .plan-badge-type.type-deneme {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

body.pink-theme .plan-badge-type.type-soru,
body.theme-pink .plan-badge-type.type-soru,
[data-theme="pink"] .plan-badge-type.type-soru {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
body.pink-theme .plan-badge-type.type-video,
body.theme-pink .plan-badge-type.type-video,
[data-theme="pink"] .plan-badge-type.type-video {
  background: rgba(244, 63, 94, 0.15);
  color: #e11d48;
}
body.pink-theme .plan-badge-type.type-konu,
body.theme-pink .plan-badge-type.type-konu,
[data-theme="pink"] .plan-badge-type.type-konu {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}
body.pink-theme .plan-badge-type.type-deneme,
body.theme-pink .plan-badge-type.type-deneme,
[data-theme="pink"] .plan-badge-type.type-deneme {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

body.aero-theme .plan-badge-type.type-soru,
body.theme-aero .plan-badge-type.type-soru,
[data-theme="aero"] .plan-badge-type.type-soru {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}
body.aero-theme .plan-badge-type.type-video,
body.theme-aero .plan-badge-type.type-video,
[data-theme="aero"] .plan-badge-type.type-video {
  background: rgba(0, 168, 255, 0.18);
  border: 1px solid rgba(0, 168, 255, 0.35);
  color: #60a5fa;
}
body.aero-theme .plan-badge-type.type-konu,
body.theme-aero .plan-badge-type.type-konu,
[data-theme="aero"] .plan-badge-type.type-konu {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}
body.aero-theme .plan-badge-type.type-deneme,
body.theme-aero .plan-badge-type.type-deneme,
[data-theme="aero"] .plan-badge-type.type-deneme {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.plan-badge-subject {
  font-weight: 700;
  color: var(--plan-accent);
  background: var(--accent-dim, rgba(255, 255, 255, 0.05));
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.plan-badge-time {
  color: var(--plan-text-sub);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}

.plan-badge-priority-high {
  color: #ef4444;
  font-weight: 700;
  font-size: 10.5px;
}

.plan-task-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--plan-text-main);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
}

.plan-task-subtopic {
  font-size: 12px;
  color: var(--plan-text-sub);
  line-height: 1.3;
  word-break: break-word;
}

/* Soru Progress & Quick Counters */
.plan-task-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.plan-mini-bar-track {
  flex: 1;
  min-width: 60px;
  max-width: 140px;
  height: 6px;
  background: var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  overflow: hidden;
}

.plan-mini-bar-fill {
  height: 100%;
  background: var(--plan-accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}

.plan-task-count-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--plan-text-main);
  white-space: nowrap;
}

.plan-q-btns {
  display: inline-flex;
  gap: 3px;
}

.plan-btn-q {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
  cursor: pointer;
  transition: all 0.12s ease;
}

.plan-btn-q:hover {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  border-color: var(--plan-accent);
}

.plan-task-video-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 2px;
  transition: all 0.15s ease;
}

.plan-task-video-link:hover {
  background: rgba(239, 68, 68, 0.2);
  text-decoration: underline;
}

.plan-task-notes-snippet {
  font-size: 11.5px;
  color: var(--plan-text-sub);
  font-style: italic;
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.plan-task-actions-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 1px;
}

.plan-task-actions-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.plan-btn-card-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--plan-text-sub);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.plan-btn-card-action:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.1));
  border-color: var(--plan-card-border);
  color: var(--plan-text-main);
  transform: translateY(-1px);
}

.plan-btn-card-action.btn-del:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ── Sürükle ve Bırak Sıralama Tutamacı (İkonların Altında) ── */
.plan-task-drag-handle {
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plan-text-sub);
  opacity: 0.45;
  cursor: grab;
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  margin-top: 1px;
}

.plan-task-drag-handle:hover {
  opacity: 1;
  color: var(--plan-accent);
  background: rgba(255, 255, 255, 0.06);
}

.plan-task-drag-handle:active {
  cursor: grabbing;
  opacity: 1;
}

/* ── Sürükleme ve Sıralama Görsel Geri Bildirimleri ── */
.plan-task-card.dragging {
  opacity: 0.35 !important;
  transform: scale(0.985);
  border: 1.5px dashed var(--plan-accent) !important;
  box-shadow: 0 8px 24px var(--plan-accent-glow);
}

.plan-task-card.drag-over-top {
  border-top: 2.5px solid var(--plan-accent) !important;
  transform: translateY(2px);
}

.plan-task-card.drag-over-bottom {
  border-bottom: 2.5px solid var(--plan-accent) !important;
  transform: translateY(-2px);
}

/* ── Bağlam Menüsü (⋮ Context Menu) ── */
.plan-task-ctx-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 178px;
  background: var(--bg-mid, #12141a);
  border: 1px solid var(--plan-card-border);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 500;
  display: none;
  flex-direction: column;
  gap: 1px;
  animation: planScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-task-ctx-menu.open {
  display: flex;
}

body.light-theme .plan-task-ctx-menu,
body.theme-light .plan-task-ctx-menu,
[data-theme="light"] .plan-task-ctx-menu,
body.litewhite-theme .plan-task-ctx-menu,
body.theme-litewhite .plan-task-ctx-menu,
[data-theme="litewhite"] .plan-task-ctx-menu {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
}

body.pink-theme .plan-task-ctx-menu,
body.theme-pink .plan-task-ctx-menu,
[data-theme="pink"] .plan-task-ctx-menu {
  background: #fff5f7;
  border-color: rgba(244, 63, 94, 0.2);
}

body.aero-theme .plan-task-ctx-menu,
body.theme-aero .plan-task-ctx-menu,
[data-theme="aero"] .plan-task-ctx-menu {
  background: rgba(4, 20, 48, 0.95);
  border-color: rgba(0, 168, 255, 0.35);
  box-shadow: 0 16px 48px rgba(0, 10, 30, 0.7);
  color: #ffffff;
}

.plan-ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--plan-text-main);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
  white-space: nowrap;
}

.plan-ctx-menu-item svg {
  flex-shrink: 0;
  color: var(--plan-text-sub);
}

.plan-ctx-menu-item:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
}

.plan-ctx-menu-item.danger {
  color: #ef4444;
}

.plan-ctx-menu-item.danger svg {
  color: #ef4444;
}

.plan-ctx-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

.plan-ctx-divider {
  height: 1px;
  background: var(--plan-card-border);
  margin: 3px 8px;
}

/* ── Alt + Görev Ekle Butonu ── */
.plan-add-bottom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--plan-radius-sm);
  background: transparent;
  border: 1.5px dashed var(--plan-card-border);
  color: var(--plan-text-sub);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
  box-sizing: border-box;
}

.plan-add-bottom-btn:hover {
  border-color: var(--plan-accent);
  color: var(--plan-accent);
  background: var(--accent-dim, rgba(255, 255, 255, 0.03));
  transform: translateY(-1px);
}

.plan-add-bottom-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.plan-add-bottom-btn:hover svg {
  transform: scale(1.15);
}

/* ── Alt Görevi Yapıştır Butonu ── */
.plan-paste-bottom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--plan-radius-sm);
  background: var(--accent-dim, rgba(11, 214, 168, 0.08));
  border: 1.5px dashed var(--plan-accent);
  color: var(--plan-accent);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.plan-paste-bottom-btn:hover {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--plan-accent-glow);
}

.plan-paste-bottom-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.plan-paste-bottom-btn:hover svg {
  transform: scale(1.15);
}

/* ── Sonraki Görev Banner ── */
.plan-next-task-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--accent-dim, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--plan-card-border);
  border-left: 3px solid var(--plan-accent);
  border-radius: var(--plan-radius-sm);
  font-size: 12px;
}

.plan-next-task-bar-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--plan-accent);
  white-space: nowrap;
}

.plan-next-task-bar-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--plan-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* 8. Empty State */
.plan-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: var(--plan-card-bg);
  border: 1.5px dashed var(--plan-card-border);
  border-radius: var(--plan-radius);
  gap: 10px;
}

.plan-empty-icon {
  font-size: 32px;
  margin-bottom: 2px;
}

.plan-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--plan-text-main);
}

.plan-empty-desc {
  font-size: 12.5px;
  color: var(--plan-text-sub);
  margin: 0;
  max-width: 280px;
  line-height: 1.4;
}

.plan-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 9. Sidebar Cards */
.plan-summary-card,
.plan-quick-templates-card {
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius);
  padding: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}

.plan-summary-header,
.plan-card-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plan-text-sub);
}

.plan-summary-pct {
  font-size: 15px;
  font-weight: 800;
  color: var(--plan-accent);
}

.plan-progress-track {
  width: 100%;
  height: 8px;
  background: var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  overflow: hidden;
}

.plan-progress-fill {
  height: 100%;
  background: var(--plan-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.plan-summary-counter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.plan-counter-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: var(--plan-radius-sm);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--plan-card-border);
}

.plan-counter-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--plan-text-main);
}

.plan-counter-lbl {
  font-size: 10.5px;
  color: var(--plan-text-sub);
  margin-top: 1px;
}

.plan-counter-done .plan-counter-num { color: var(--plan-accent); }
.plan-counter-remain .plan-counter-num { color: #f59e0b; }

.plan-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--plan-card-border);
}

.plan-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-stat-icon {
  font-size: 16px;
}

.plan-stat-info {
  display: flex;
  flex-direction: column;
}

.plan-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--plan-text-main);
}

.plan-stat-tag {
  font-size: 10.5px;
  color: var(--plan-text-sub);
}

.plan-template-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-template-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--plan-radius-sm);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.plan-template-chip:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.09));
  border-color: var(--plan-accent);
  transform: translateX(2px);
}

.plan-btn-text-only {
  background: none;
  border: none;
  color: var(--plan-accent);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.plan-btn-text-only:hover {
  text-decoration: underline;
}

/* 10. Modals & Dialogs System */
.plan-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 16px;
  box-sizing: border-box;
  animation: planFadeIn 0.2s ease-out;
}

body.light-theme .plan-modal-backdrop,
body.theme-light .plan-modal-backdrop,
[data-theme="light"] .plan-modal-backdrop,
body.litewhite-theme .plan-modal-backdrop,
body.theme-litewhite .plan-modal-backdrop,
[data-theme="litewhite"] .plan-modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
}

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

.plan-modal-dialog {
  background: var(--bg-mid, #12141a);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow, 0 16px 40px rgba(0, 0, 0, 0.45));
  animation: planScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

body.light-theme .plan-modal-dialog,
body.theme-light .plan-modal-dialog,
[data-theme="light"] .plan-modal-dialog,
body.litewhite-theme .plan-modal-dialog,
body.theme-litewhite .plan-modal-dialog,
[data-theme="litewhite"] .plan-modal-dialog {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

body.pink-theme .plan-modal-dialog,
body.theme-pink .plan-modal-dialog,
[data-theme="pink"] .plan-modal-dialog {
  background: #fff5f7;
  border-color: rgba(244, 63, 94, 0.25);
  box-shadow: 0 20px 60px rgba(244, 63, 94, 0.2);
}

body.aero-theme .plan-modal-dialog,
body.theme-aero .plan-modal-dialog,
[data-theme="aero"] .plan-modal-dialog {
  background: rgba(4, 20, 48, 0.94);
  border-color: rgba(0, 168, 255, 0.35);
  box-shadow: 0 24px 64px rgba(0, 10, 30, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.plan-modal-dialog.wide {
  max-width: 680px;
}

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

.plan-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--plan-card-border);
  flex-shrink: 0;
}

.plan-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--plan-text-main);
}

.plan-modal-close {
  background: transparent;
  border: none;
  color: var(--plan-text-sub);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.plan-modal-close:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.1));
  color: var(--plan-text-main);
}

.plan-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.plan-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--plan-card-border);
  background: rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

/* Modal Form Elements */
.plan-type-selector-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.plan-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: var(--plan-radius-sm);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--plan-card-border);
  color: var(--plan-text-sub);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
  box-sizing: border-box;
}

.plan-type-btn.active {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  border-color: var(--plan-accent);
  font-weight: 700;
}

.plan-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.plan-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plan-form-group.full-width {
  grid-column: 1 / -1;
}

.plan-form-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--plan-text-sub);
}

.plan-input,
.plan-select,
.plan-textarea {
  width: 100%;
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--plan-card-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--plan-radius-sm, 10px);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--plan-text-main, #f1f5f9);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.light-theme .plan-input,
body.light-theme .plan-select,
body.light-theme .plan-textarea,
body.theme-light .plan-input,
body.theme-light .plan-select,
body.theme-light .plan-textarea,
[data-theme="light"] .plan-input,
[data-theme="light"] .plan-select,
[data-theme="light"] .plan-textarea,
body.litewhite-theme .plan-input,
body.litewhite-theme .plan-select,
body.litewhite-theme .plan-textarea,
body.theme-litewhite .plan-input,
body.theme-litewhite .plan-select,
body.theme-litewhite .plan-textarea,
[data-theme="litewhite"] .plan-input,
[data-theme="litewhite"] .plan-select,
[data-theme="litewhite"] .plan-textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

body.pink-theme .plan-input,
body.pink-theme .plan-select,
body.pink-theme .plan-textarea,
body.theme-pink .plan-input,
body.theme-pink .plan-select,
body.theme-pink .plan-textarea,
[data-theme="pink"] .plan-input,
[data-theme="pink"] .plan-select,
[data-theme="pink"] .plan-textarea {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.25);
  color: #4c2f35;
}

body.aero-theme .plan-input,
body.aero-theme .plan-select,
body.aero-theme .plan-textarea,
body.theme-aero .plan-input,
body.theme-aero .plan-select,
body.theme-aero .plan-textarea,
[data-theme="aero"] .plan-input,
[data-theme="aero"] .plan-select,
[data-theme="aero"] .plan-textarea {
  background: rgba(0, 168, 255, 0.08);
  border-color: rgba(0, 168, 255, 0.25);
  color: #ffffff;
}

.plan-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  padding-right: 36px !important;
  cursor: pointer;
}

.plan-select option,
.plan-select optgroup {
  background-color: var(--bg-mid, #161622);
  color: var(--plan-text-main, #f8fafc);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 14px;
}

.plan-input:focus,
.plan-select:focus,
.plan-textarea:focus {
  border-color: var(--plan-accent, #f97316);
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 3px var(--plan-accent-glow, rgba(249, 115, 22, 0.2));
}

/* Template Cards Grid */
.plan-templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.plan-template-item-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.18s ease;
}

.plan-template-item-card:hover {
  border-color: var(--border-hv);
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
}

.plan-tpl-card-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-tpl-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.plan-tpl-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--plan-text-main);
}

.plan-tpl-card-desc {
  font-size: 11.5px;
  color: var(--plan-text-sub);
  line-height: 1.35;
}

.plan-tpl-card-meta {
  font-size: 11px;
  color: var(--plan-accent);
  font-weight: 600;
}

.plan-tpl-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--plan-card-border);
  flex-wrap: wrap;
}

.plan-btn-tpl-action {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--plan-card-border);
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  color: var(--plan-text-main);
  cursor: pointer;
  transition: all 0.12s ease;
}

.plan-btn-tpl-action:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.14));
}

.plan-btn-tpl-action.apply {
  background: var(--plan-accent);
  color: var(--accent-text, #ffffff);
  border-color: var(--plan-accent);
}

.plan-btn-tpl-action.del:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Weekly Grid View */
.plan-weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.plan-week-col {
  background: var(--plan-card-bg);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--plan-radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 240px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan-week-col:hover {
  border-color: var(--border-hv);
  transform: translateY(-2px);
}

.plan-week-col.is-active {
  border-color: var(--plan-accent);
  background: var(--accent-dim, rgba(11, 214, 168, 0.04));
}

.plan-week-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--plan-card-border);
}

.plan-week-col-tasks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.plan-week-mini-task {
  font-size: 10.5px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  color: var(--plan-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-week-mini-task.done {
  opacity: 0.5;
  text-decoration: line-through;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS (Mobile First)
===================================================== */
@media (max-width: 1024px) {
  .plan-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .plan-layout {
    grid-template-columns: 1fr;
  }
  .plan-sidebar {
    order: 2;
  }
  /* Sidebar içeriği yatay düzene geç */
  .plan-summary-counter-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body:has(#panel-plan.active) #main-card,
  #main-card.plan-mode-active {
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px 10px !important;
    border-radius: 0 !important;
  }

  .plan-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .plan-header-actions {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .plan-header-actions .plan-btn-action,
  .plan-header-actions .plan-btn-add {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .plan-header-actions .plan-btn-action span,
  .plan-header-actions .plan-btn-add span {
    display: none !important;
  }

  .plan-header-actions .plan-btn-action svg,
  .plan-header-actions .plan-btn-add svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  .plan-date-ribbon {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .plan-date-ribbon::-webkit-scrollbar {
    display: none;
  }

  .plan-day-pill {
    flex: 0 0 46px;
    scroll-snap-align: start;
  }

  .plan-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-filter-group {
    width: 100%;
    justify-content: space-between;
  }

  .plan-pill-filter {
    flex: 1;
    text-align: center;
  }

  .plan-toolbar-right {
    width: 100%;
  }

  .plan-search-box {
    flex: 1;
  }

  .plan-search-input {
    width: 100% !important;
  }

  .plan-select-filter {
    flex: 1;
  }

  .plan-templates-grid {
    grid-template-columns: 1fr;
  }

  .plan-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .plan-modal-dialog {
    max-height: 88dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    max-width: 100% !important;
  }

  .plan-type-selector-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-form-grid {
    grid-template-columns: 1fr;
  }

  .plan-add-bottom-btn {
    min-height: 52px;
    font-size: 13.5px;
  }

  .plan-task-ctx-menu {
    right: 0;
    left: auto;
  }
}

/* =====================================================
   SAATDURUM — ONLINE (STUDY STUDY PLATFORM) MODULE CSS V2
   Liquid Glass & Realtime Study Architecture
===================================================== */

/* 1. Header & Sub-Navigation Bar */
.online-header {
  margin-bottom: 14px;
}

.online-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.online-mono-tag {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-s);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.online-desc {
  font-size: 12.5px;
  color: var(--text-s);
  margin-top: 2px;
}

.online-sub-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: manipulation;
}

.online-sub-nav::-webkit-scrollbar {
  display: none;
}

.online-sub-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text-s);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

.online-sub-tab-btn:hover {
  color: var(--text-p);
  background: rgba(255, 255, 255, 0.05);
}

.online-sub-tab-btn.active {
  background: var(--accent);
  color: #000000;
  font-weight: 700;
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* 2. Skeleton Loader */
.online-skeleton-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius, 16px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  gap: 12px;
  text-align: center;
}

.online-skeleton-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.online-skeleton-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-p);
}

.online-skeleton-bars {
  width: 100%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-bar.short {
  width: 60%;
  margin: 0 auto;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 3. Auth Card & Form */
.online-auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius, 16px);
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 420px;
  margin: 0 auto;
}

.online-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.online-auth-tab {
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-s);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.online-auth-tab.active {
  background: var(--accent);
  color: #000;
}

.online-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.online-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.online-input-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-s);
  text-transform: uppercase;
}

.online-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-p);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.online-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

/* 4. Toast Notification */
.online-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid var(--border);
  color: var(--text-p);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.online-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.online-toast.success { border-color: #10b981; }
.online-toast.error { border-color: #f43f5e; }
.online-toast.info { border-color: var(--accent); }
.online-toast.warning { border-color: #f59e0b; }

/* 5. STUDY Hero Box & Dynamic Visual States */
.sd-hero-box {
  border-radius: var(--card-radius, 16px);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* Idle State: Crisp, Glass Glowing */
.sd-hero-box.is-idle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Running State: Muted Stealth Gray, Low-Distraction Focus Mode */
.sd-hero-box.is-running {
  background: rgba(26, 29, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.sd-hero-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sd-hero-status-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.sd-break-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  animation: pulseBreak 2s infinite;
}

@keyframes pulseBreak {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.sd-hero-digits {
  font-size: clamp(38px, 8vw, 56px);
  font-weight: 800;
  font-family: var(--font-clock, inherit);
  color: var(--text-p);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 6px 0 12px 0;
}

.sd-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 6. STUDY Subject Rows */
.sd-subjects-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sd-subject-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.sd-subject-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(2px);
}

.sd-subject-row.selected {
  border-color: var(--accent);
  background: rgba(11, 214, 168, 0.05);
}

.sd-subj-color-bar {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sd-subj-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.sd-subj-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sd-subj-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-p);
}

.sd-row-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.sd-row-badge.running { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.sd-row-badge.break { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.sd-subj-time {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-s);
}

.sd-subj-play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-p);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.sd-subj-play-btn.running {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* 7. Heatmap Calendar */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-s);
  cursor: pointer;
  transition: all 0.15s ease;
}

.heatmap-cell.empty {
  visibility: hidden;
}

.heatmap-cell:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.heatmap-cell.level-1 { background: rgba(11, 214, 168, 0.18); color: var(--text-p); }
.heatmap-cell.level-2 { background: rgba(11, 214, 168, 0.4); color: #000; font-weight: 700; }
.heatmap-cell.level-3 { background: var(--accent); color: #000; font-weight: 800; box-shadow: 0 0 10px var(--accent-glow); }

.heatmap-cell.selected {
  border: 2px solid #ffffff !important;
}

/* 8. Column / Bar Charts */
.stats-column-chart-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 160px;
  padding: 12px 6px 6px 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.stats-col-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}

.stats-col-bar-track {
  width: 100%;
  max-width: 24px;
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.stats-col-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-col-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-s);
}

.stats-col-val {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent);
}

/* 9. Profile 10 Badges Grid */
.profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.profile-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  text-align: center;
  gap: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.profile-badge-card.unlocked {
  border-color: var(--accent);
  background: rgba(11, 214, 168, 0.06);
  box-shadow: 0 0 14px var(--accent-glow);
}

.profile-badge-card.locked {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.badge-icon-wrap {
  font-size: 24px;
}

.badge-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-p);
}

.badge-status-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-s);
}

.profile-badge-card.unlocked .badge-status-pill {
  background: var(--accent);
  color: #000;
}

/* 10. Group Studicons */
.grp-studicons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.grp-studicon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  text-align: center;
  gap: 4px;
}

.grp-studicon-avatar-wrap {
  position: relative;
  display: inline-flex;
}

.grp-studicon-avatar {
  font-size: 28px;
}

.grp-studicon-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  border: 1px solid #000;
}

.grp-studicon-dot.active {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.grp-studicon-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-p);
}

.grp-studicon-status {
  font-size: 11px;
  color: var(--text-s);
}

.grp-studicon-time {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--accent);
}

/* Responsive Overrides */
@media (max-width: 640px) {
  .profile-badges-grid {
    grid-template-columns: 1fr 1fr;
  }

  .grp-studicons-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═════════════════════════════════════════════════════
   SAATDURUM — ÇEVRİMİÇİ ÜST SEKME SEÇİCİ (PC GLASSMORPHISM NAV)
═════════════════════════════════════════════════════ */

.online-top-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto 22px auto;
  padding: 6px;
  background: var(--bg-glass, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 20;
  overflow-x: auto;
  scrollbar-width: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.online-top-tabs-nav::-webkit-scrollbar {
  display: none;
}

.online-top-tab {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 9px 16px;
  font-family: var(--sans, inherit);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--text-s, rgba(255, 255, 255, 0.65));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.online-top-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2.2;
  transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), stroke 0.2s ease;
}

.online-top-tab:hover:not(.active) {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  color: var(--text-p, #ffffff);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.online-top-tab:hover:not(.active) svg {
  transform: scale(1.08);
}

.online-top-tab:active {
  transform: scale(0.96) translateY(0);
}

.online-top-tab.active {
  background: var(--accent, #0bd6a8);
  color: var(--accent-text, #ffffff);
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px var(--accent-glow, rgba(11, 214, 168, 0.38)), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.online-top-tab.active svg {
  color: var(--accent-text, #ffffff);
  stroke: currentColor;
  transform: scale(1.05);
}

/* Canlı Sayaç / Bildirim Noktası */
.online-top-tab .nav-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  margin-left: 3px;
  flex-shrink: 0;
  animation: sdLivePulse 1.8s infinite ease-in-out;
}

@keyframes sdLivePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}

/* Study Timer Header Bar */
.ypt-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.ypt-dday-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.ypt-dday-badge:hover {
  background: rgba(239, 68, 68, 0.22);
}

.ypt-dday-count {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
}

.ypt-date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  padding: 2px 6px;
}

.ypt-date-arrow-btn {
  background: transparent;
  border: none;
  color: var(--text-s, #94a3b8);
  font-size: 16px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ypt-date-arrow-btn:hover {
  color: var(--text-p);
}

.ypt-date-center-btn {
  background: transparent;
  border: none;
  color: var(--text-p, #ffffff);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ypt-date-today-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.ypt-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ypt-icon-btn {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-s, #94a3b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

/* ══════════════════════════════════════════════════════════════
   ÇEVRİMİÇİ ZAMANLAYICI — KUTU İÇİ GLASSMORPHISM PARLAMA SİSTEMİ
   Internal Specular Aura, Inset Lighting & Zero Outside Bleed
   ══════════════════════════════════════════════════════════════ */

/* Total Time Hero Card (Kutucuk) */
.ypt-hero-card {
  background: var(--bg-card, rgba(18, 18, 24, 0.85));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius, 20px);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.25));
  position: relative;
  overflow: hidden; /* DIŞARIYA PARLAMA TAŞMASINI KESİN OLARAK ENGELLER */
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  z-index: 1;
}

.ypt-hero-card:hover {
  border-color: var(--border-hv, rgba(255, 255, 255, 0.15));
}

/* Kutucuk İçi Katmanlar — Z-Index Düzeni */
.ypt-hero-top-row,
.ypt-hero-main-row {
  position: relative;
  z-index: 2;
}

/* KUTUCUK İÇİ ORTAM IŞIĞI (Internal Glassmorphism Glow Aura — ::before) */
.ypt-hero-card::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 110%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--timer-glow-rgb, 34, 197, 94), 0.25) 0%, rgba(var(--timer-glow-rgb, 34, 197, 94), 0.08) 45%, rgba(var(--timer-glow-rgb, 34, 197, 94), 0) 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s ease;
  will-change: opacity, transform;
}

/* KUTUCUK İÇİ ÜST CAM YANSIMASI (Top Specular Highlight — ::after) */
.ypt-hero-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--timer-glow-rgb, 34, 197, 94), 0.75) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}

/* AKTİF ÇALIŞMA DURUMU — Sadece Kutu İçinde Glassmorphism Parlama */
.ypt-hero-card.is-studying {
  /* Dışarıya renk taşması YAPILMAZ; sadece kutu içine inset ışık ve üst cam çizgisi uygulanır */
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.25)),
              inset 0 0 35px -5px rgba(var(--timer-glow-rgb, 34, 197, 94), 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(var(--timer-glow-rgb, 34, 197, 94), 0.4) !important;
  border-top-color: rgba(var(--timer-glow-rgb, 34, 197, 94), 0.65) !important;
  animation: sdInnerCardBreath 3.6s ease-in-out infinite alternate;
}

.ypt-hero-card.is-studying::before {
  opacity: 1;
  animation: sdInnerGlassAuraPulse 3.6s ease-in-out infinite alternate;
}

.ypt-hero-card.is-studying::after {
  opacity: 1;
}

@keyframes sdInnerGlassAuraPulse {
  0% {
    opacity: 0.65;
    transform: translate3d(-50%, 0, 0) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1.05);
  }
}

@keyframes sdInnerCardBreath {
  0% {
    box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.25)),
                inset 0 0 25px -5px rgba(var(--timer-glow-rgb, 34, 197, 94), 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(var(--timer-glow-rgb, 34, 197, 94), 0.35);
  }
  100% {
    box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.25)),
                inset 0 0 40px -4px rgba(var(--timer-glow-rgb, 34, 197, 94), 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(var(--timer-glow-rgb, 34, 197, 94), 0.55);
  }
}

.ypt-hero-card.is-studying .ypt-hero-digits {
  text-shadow: 0 0 16px rgba(var(--timer-glow-rgb, 34, 197, 94), 0.25);
}

/* Temalara Özel Kutu İçi Glassmorphism İnce Ayarları */
body.theme-light .ypt-hero-card.is-studying,
body.light-theme .ypt-hero-card.is-studying,
[data-theme="light"] .ypt-hero-card.is-studying {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
              inset 0 0 35px -5px rgba(34, 197, 94, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
  border-top-color: rgba(22, 163, 74, 0.55) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

body.theme-light .ypt-hero-card.is-studying::before,
body.light-theme .ypt-hero-card.is-studying::before,
[data-theme="light"] .ypt-hero-card.is-studying::before {
  background: radial-gradient(ellipse at 50% 30%, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0.05) 50%, rgba(34, 197, 94, 0) 80%);
}

body.theme-pink .ypt-hero-card.is-studying,
body.pink-theme .ypt-hero-card.is-studying,
[data-theme="pink"] .ypt-hero-card.is-studying {
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.08),
              inset 0 0 35px -5px rgba(244, 63, 94, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  border-top-color: rgba(244, 63, 94, 0.65) !important;
}

body.theme-aero .ypt-hero-card.is-studying,
body.aero-theme .ypt-hero-card.is-studying,
[data-theme="aero"] .ypt-hero-card.is-studying {
  box-shadow: 0 10px 30px rgba(0, 10, 30, 0.4),
              inset 0 0 35px -5px rgba(0, 168, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(0, 168, 255, 0.38) !important;
  border-top-color: rgba(0, 168, 255, 0.75) !important;
}

body.theme-purple .ypt-hero-card.is-studying,
body.purple-theme .ypt-hero-card.is-studying,
[data-theme="purple"] .ypt-hero-card.is-studying {
  box-shadow: 0 10px 30px rgba(10, 0, 20, 0.4),
              inset 0 0 35px -5px rgba(139, 92, 246, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.38) !important;
  border-top-color: rgba(139, 92, 246, 0.75) !important;
}

body.theme-mono .ypt-hero-card.is-studying,
body.mono-theme .ypt-hero-card.is-studying,
[data-theme="mono"] .ypt-hero-card.is-studying {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              inset 0 0 35px -5px rgba(255, 255, 255, 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.65) !important;
}

/* ── LİTE VE LİTE BEYAZ (PERFORMANS) TEMALARI — ALTERNATİF YÖNTEM ──
   Ağır blur/gölge yerine:
   1. Üst kenarda şık, net 3.5px aktif vurgu çizgisi (Top Accent Indicator)
   2. Net 1.5px kenarlık ve sade kart arka plan tonu */
body.lite-theme .ypt-hero-card.is-studying,
body.theme-lite .ypt-hero-card.is-studying,
[data-theme="lite"] .ypt-hero-card.is-studying {
  border: 1.5px solid var(--accent, #3b82f6) !important;
  box-shadow: none !important;
  background: #202026 !important;
}

body.litewhite-theme .ypt-hero-card.is-studying,
body.theme-litewhite .ypt-hero-card.is-studying,
[data-theme="litewhite"] .ypt-hero-card.is-studying {
  border: 1.5px solid var(--accent, #3b82f6) !important;
  box-shadow: none !important;
  background: #f8fafc !important;
}

body.lite-theme .ypt-hero-card.is-studying::before,
body.theme-lite .ypt-hero-card.is-studying::before,
[data-theme="lite"] .ypt-hero-card.is-studying::before,
body.litewhite-theme .ypt-hero-card.is-studying::before,
body.theme-litewhite .ypt-hero-card.is-studying::before,
[data-theme="litewhite"] .ypt-hero-card.is-studying::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3.5px;
  border-radius: 0;
  background: var(--accent, #3b82f6);
  opacity: 1;
  filter: none !important;
  transform: none !important;
  animation: sdLiteTopBarPulse 2.5s ease-in-out infinite alternate !important;
}

body.lite-theme .ypt-hero-card.is-studying::after,
body.theme-lite .ypt-hero-card.is-studying::after,
[data-theme="lite"] .ypt-hero-card.is-studying::after,
body.litewhite-theme .ypt-hero-card.is-studying::after,
body.theme-litewhite .ypt-hero-card.is-studying::after,
[data-theme="litewhite"] .ypt-hero-card.is-studying::after {
  display: none !important;
}

@keyframes sdLiteTopBarPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

body.lite-theme .ypt-hero-card.is-studying .ypt-hero-digits,
body.theme-lite .ypt-hero-card.is-studying .ypt-hero-digits,
[data-theme="lite"] .ypt-hero-card.is-studying .ypt-hero-digits,
body.litewhite-theme .ypt-hero-card.is-studying .ypt-hero-digits,
body.theme-litewhite .ypt-hero-card.is-studying .ypt-hero-digits,
[data-theme="litewhite"] .ypt-hero-card.is-studying .ypt-hero-digits {
  text-shadow: none !important;
}

body.lite-theme .ypt-subject-item.is-active,
body.theme-lite .ypt-subject-item.is-active,
[data-theme="lite"] .ypt-subject-item.is-active,
body.litewhite-theme .ypt-subject-item.is-active,
body.theme-litewhite .ypt-subject-item.is-active,
[data-theme="litewhite"] .ypt-subject-item.is-active {
  border: 1.5px solid var(--accent, #3b82f6) !important;
  box-shadow: none !important;
}

.ypt-hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ypt-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-s, #94a3b8);
  text-transform: uppercase;
}

.ypt-info-btn {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  color: var(--text-s, #94a3b8);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.ypt-info-btn:hover {
  color: var(--text-p);
  background: var(--bg-card);
  transform: scale(1.08);
}

.ypt-hero-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.ypt-hero-info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.ypt-hero-digits {
  font-family: var(--font-mono, monospace);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-p, #ffffff);
  line-height: 1.1;
}

.ypt-hero-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-s, #94a3b8);
  line-height: 1.2;
}

.ypt-hero-status-row.is-studying {
  color: #22c55e;
  font-weight: 700;
}

/* Session Timer Pill (Küçük Oturum Süresi) */
.ypt-hero-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 20px;
  padding: 2.5px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #22c55e;
  margin-top: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  animation: fadeInSessionPill 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.2s ease;
}

.ypt-hero-session-pill .ypt-session-icon {
  font-size: 11px;
  line-height: 1;
  display: inline-block;
}

.ypt-hero-session-pill .ypt-session-text {
  font-family: var(--font-sans, inherit);
  letter-spacing: 0.1px;
}

.ypt-hero-session-pill .ypt-session-text strong {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.4px;
}

@keyframes fadeInSessionPill {
  from { opacity: 0; transform: translateY(3px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Light & Custom Themes for Session Pill */
body.theme-light .ypt-hero-session-pill,
body.light-theme .ypt-hero-session-pill,
[data-theme="light"] .ypt-hero-session-pill,
body.litewhite-theme .ypt-hero-session-pill,
body.theme-litewhite .ypt-hero-session-pill,
[data-theme="litewhite"] .ypt-hero-session-pill {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}

/* Break Timer Pill (Mola Sayacı) */
.ypt-hero-break-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-s, #94a3b8);
  margin-top: 2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeInBreakPill 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.ypt-break-icon {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  animation: gentleCoffeeWobble 4s ease-in-out infinite;
}

.ypt-break-text {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-p, #ffffff);
  opacity: 0.9;
  letter-spacing: -0.1px;
}

@keyframes fadeInBreakPill {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gentleCoffeeWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg) scale(1.05); }
  75% { transform: rotate(6deg) scale(1.05); }
}

/* Quick Start Action Column & Play/Pause Button */
.ypt-hero-action-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.ypt-hero-quick-btn {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  border-radius: 50%;
  background: var(--accent, #f97316);
  border: none;
  color: var(--accent-text, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 18px var(--accent-glow, rgba(249, 115, 22, 0.4));
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.15s ease, background 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ypt-hero-quick-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
  box-shadow: 0 6px 24px var(--accent-glow, rgba(249, 115, 22, 0.55));
}

.ypt-hero-quick-btn:active {
  transform: scale(0.93);
}

.ypt-quick-btn-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.2s ease;
}

.ypt-hero-quick-btn:hover .ypt-quick-btn-icon-wrap {
  transform: scale(1.05);
}

/* Running (Active Timer) State */
.ypt-hero-quick-btn.is-running {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7), 0 4px 18px rgba(239, 68, 68, 0.4);
  animation: quickPulseRunning 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

.ypt-hero-quick-btn.is-running:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.55);
}

@keyframes quickPulseRunning {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6), 0 4px 18px rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0), 0 4px 18px rgba(239, 68, 68, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 4px 18px rgba(239, 68, 68, 0.4);
  }
}

/* Dynamic Target Subject Micro-Badge */
.ypt-hero-quick-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-p, #ffffff);
  max-width: 140px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  user-select: none;
  touch-action: manipulation;
}

.ypt-hero-quick-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent, #f97316);
  transform: translateY(-1px);
}

.ypt-hero-quick-badge:active {
  transform: scale(0.96);
}

.ypt-quick-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #f97316);
  flex-shrink: 0;
}

.ypt-quick-badge-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Category Filter Bar */
.ypt-cat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

.ypt-cat-bar::-webkit-scrollbar {
  display: none;
}

.ypt-cat-pill {
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-s, #94a3b8);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.ypt-cat-pill:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
  color: var(--text-p);
  border-color: var(--border-hv);
}

.ypt-cat-pill.active {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
  color: var(--accent-text, #ffffff);
}

.ypt-cat-count {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 5px;
  border-radius: 6px;
}

/* Subjects List */
.ypt-subject-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ypt-subject-item {
  background: var(--bg-card, rgba(18, 18, 24, 0.85));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ypt-subject-item:hover {
  border-color: var(--border-hv, rgba(255, 255, 255, 0.18));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.ypt-subject-item.is-active {
  border-color: var(--accent, #f97316);
  background: var(--accent-dim, rgba(249, 115, 22, 0.06));
}

.ypt-subj-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  color: var(--text-p);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ypt-subj-play-btn:hover {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
  color: var(--accent-text, #ffffff);
}

.ypt-subj-play-btn.is-running {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.ypt-subj-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.ypt-subj-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ypt-subj-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ypt-subj-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-p);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ypt-subj-category {
  font-size: 11px;
  color: var(--text-s, #94a3b8);
}

.ypt-subj-time {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent, #f97316);
  margin-left: auto;
}

.ypt-subj-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-s, #94a3b8);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
}

.ypt-subj-menu-btn:hover {
  color: var(--text-p);
}

.ypt-btn-add-subject {
  width: 100%;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px dashed var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  padding: 12px;
  color: var(--text-s, #94a3b8);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ypt-btn-add-subject:hover {
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  color: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
}

.ypt-return-banner {
  background: var(--accent-dim, rgba(249, 115, 22, 0.15));
  border: 1px solid var(--accent, rgba(249, 115, 22, 0.3));
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-p);
  font-weight: 700;
}

.ypt-return-today-btn {
  background: var(--accent, #f97316);
  border: none;
  border-radius: 6px;
  color: var(--accent-text, #ffffff);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ypt-return-today-btn:hover {
  filter: brightness(1.1);
}

/* =====================================================
   BELİRLİ SÜRE (ZAMANLAYICI MODU / GERİ SAYIM)
   Ders Ekleme & Düzenleme Modalları + Ders Kartı + Hero Alanı
===================================================== */

/* Toggle Row (Belirli Süre açma/kapama satırı) */
.sd-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.sd-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.sd-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sd-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.12));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  transition: 0.25s;
}

.sd-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  transition: 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sd-toggle-switch input:checked + .sd-toggle-slider {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
}

.sd-toggle-switch input:checked + .sd-toggle-slider::before {
  transform: translateX(18px);
}

.sd-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-p, #ffffff);
  cursor: pointer;
  user-select: none;
}

/* Fixed Duration (Belirli Süre) Input Wrap — collapsed by default */
.sd-duration-wrap {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  animation: fadeInDurationWrap 0.2s ease;
}

.sd-duration-wrap.is-visible {
  display: flex;
}

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

.sd-duration-inputs {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.sd-duration-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sd-duration-field input {
  width: 64px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-p, #ffffff);
  background: var(--bg-card, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 6px 4px;
  -moz-appearance: textfield;
}

.sd-duration-field input::-webkit-outer-spin-button,
.sd-duration-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sd-duration-field input:focus {
  outline: none;
  border-color: var(--accent, #f97316);
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(249, 115, 22, 0.18));
}

.sd-duration-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-s, #94a3b8);
}

.sd-duration-sep {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-s, #94a3b8);
  padding-bottom: 20px;
}

.sd-duration-total {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-s, #94a3b8);
}

.sd-duration-total strong {
  color: var(--accent, #f97316);
  font-family: var(--font-mono, monospace);
}

.sd-duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.sd-duration-preset-btn {
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-p, #ffffff);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sd-duration-preset-btn:hover {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
  color: var(--accent-text, #ffffff);
}

/* Ders Kartındaki Geri Sayım Rozeti (Belirli Süre) */
.ypt-subj-countdown-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-s, #94a3b8);
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  letter-spacing: -0.2px;
  vertical-align: middle;
}

.ypt-subj-countdown-badge.is-critical {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  animation: countdownBadgePulse 1s ease-in-out infinite;
}

@keyframes countdownBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Hero Alanı — Hedef Süre Geri Sayım Pill */
.ypt-hero-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 20px;
  padding: 2.5px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent, #f97316);
  margin-top: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  animation: fadeInSessionPill 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.2s ease;
}

.ypt-hero-countdown-pill.is-critical {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  animation: countdownPillCritical 1s ease-in-out infinite;
}

@keyframes countdownPillCritical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.ypt-hero-countdown-label {
  font-family: var(--font-sans, inherit);
}

.ypt-hero-countdown-time {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ypt-hero-countdown-track {
  width: 34px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-left: 4px;
  flex-shrink: 0;
}

.ypt-hero-countdown-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: currentColor;
  border-radius: 3px;
  transition: width 0.5s linear;
}

/* Light & Custom Themes for Countdown Pill */
body.theme-light .ypt-hero-countdown-pill,
body.light-theme .ypt-hero-countdown-pill,
[data-theme="light"] .ypt-hero-countdown-pill,
body.litewhite-theme .ypt-hero-countdown-pill,
body.theme-litewhite .ypt-hero-countdown-pill,
[data-theme="litewhite"] .ypt-hero-countdown-pill {
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.35);
  color: #c2410c;
}

/* =====================================================
   CUSTOM SELECT DROPDOWN COMPONENT
===================================================== */

.sd-custom-select-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Hide native select without breaking form logic / accessibility */
.sd-native-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  top: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sd-custom-select-trigger {
  width: 100%;
  min-height: 38px;
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 10px);
  padding: 8px 12px;
  color: var(--text-p, #f1f5f9);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.sd-custom-select-trigger:hover {
  border-color: var(--border-hv, rgba(255, 255, 255, 0.25));
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.08));
}

.sd-custom-select-wrapper.is-open .sd-custom-select-trigger {
  border-color: var(--accent, #f97316);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(249, 115, 22, 0.22));
  background: var(--bg-card-hv, rgba(255, 255, 255, 0.09));
}

.sd-custom-select-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sd-custom-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-s, #94a3b8);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease;
  flex-shrink: 0;
}

.sd-custom-select-wrapper.is-open .sd-custom-select-arrow {
  transform: rotate(180deg);
  color: var(--accent, #f97316);
}

/* Dropdown Floating Menu */
.sd-custom-select-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.18s;
}

.sd-custom-select-wrapper.drop-up .sd-custom-select-dropdown {
  top: auto;
  bottom: calc(100% + 5px);
  transform: translateY(6px) scale(0.98);
}

.sd-custom-select-wrapper.is-open .sd-custom-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sd-custom-select-dropdown::-webkit-scrollbar {
  width: 5px;
}
.sd-custom-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.sd-custom-select-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.sd-custom-select-option {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.sd-custom-select-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sd-custom-select-option.is-selected {
  background: rgba(249, 115, 22, 0.18);
  color: var(--accent, #f97316);
  font-weight: 700;
}

.sd-custom-opt-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-custom-opt-check {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--accent, #f97316);
  flex-shrink: 0;
}

.sd-custom-select-option.is-selected .sd-custom-opt-check {
  display: inline-flex;
}

/* ── Theme Adaptations for Custom Select ── */

/* Light & Litewhite Themes */
body.theme-light .sd-custom-select-trigger,
body.light-theme .sd-custom-select-trigger,
[data-theme="light"] .sd-custom-select-trigger,
body.theme-litewhite .sd-custom-select-trigger,
body.litewhite-theme .sd-custom-select-trigger,
[data-theme="litewhite"] .sd-custom-select-trigger {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}
body.theme-light .sd-custom-select-trigger:hover,
body.light-theme .sd-custom-select-trigger:hover,
[data-theme="light"] .sd-custom-select-trigger:hover,
body.theme-litewhite .sd-custom-select-trigger:hover,
body.litewhite-theme .sd-custom-select-trigger:hover,
[data-theme="litewhite"] .sd-custom-select-trigger:hover {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.3);
}
body.theme-light .sd-custom-select-dropdown,
body.light-theme .sd-custom-select-dropdown,
[data-theme="light"] .sd-custom-select-dropdown,
body.theme-litewhite .sd-custom-select-dropdown,
body.litewhite-theme .sd-custom-select-dropdown,
[data-theme="litewhite"] .sd-custom-select-dropdown {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}
body.theme-light .sd-custom-select-option,
body.light-theme .sd-custom-select-option,
[data-theme="light"] .sd-custom-select-option,
body.theme-litewhite .sd-custom-select-option,
body.litewhite-theme .sd-custom-select-option,
[data-theme="litewhite"] .sd-custom-select-option {
  color: #0f172a;
}
body.theme-light .sd-custom-select-option:hover,
body.light-theme .sd-custom-select-option:hover,
[data-theme="light"] .sd-custom-select-option:hover,
body.theme-litewhite .sd-custom-select-option:hover,
body.litewhite-theme .sd-custom-select-option:hover,
[data-theme="litewhite"] .sd-custom-select-option:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #000000;
}
body.theme-light .sd-custom-select-option.is-selected,
body.light-theme .sd-custom-select-option.is-selected,
[data-theme="light"] .sd-custom-select-option.is-selected,
body.theme-litewhite .sd-custom-select-option.is-selected,
body.litewhite-theme .sd-custom-select-option.is-selected,
[data-theme="litewhite"] .sd-custom-select-option.is-selected {
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent, #2563eb);
}
body.theme-light .sd-custom-opt-check,
body.light-theme .sd-custom-opt-check,
[data-theme="light"] .sd-custom-opt-check,
body.theme-litewhite .sd-custom-opt-check,
body.litewhite-theme .sd-custom-opt-check,
[data-theme="litewhite"] .sd-custom-opt-check {
  color: var(--accent, #2563eb);
}

/* Pink Theme */
body.theme-pink .sd-custom-select-trigger,
body.pink-theme .sd-custom-select-trigger,
[data-theme="pink"] .sd-custom-select-trigger {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.25);
  color: #4c2f35;
}
body.theme-pink .sd-custom-select-trigger:hover,
body.pink-theme .sd-custom-select-trigger:hover,
[data-theme="pink"] .sd-custom-select-trigger:hover {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.45);
}
body.theme-pink .sd-custom-select-dropdown,
body.pink-theme .sd-custom-select-dropdown,
[data-theme="pink"] .sd-custom-select-dropdown {
  background: #ffffff;
  border-color: rgba(244, 63, 94, 0.25);
  box-shadow: 0 16px 36px rgba(244, 63, 94, 0.15), 0 4px 12px rgba(244, 63, 94, 0.08);
}
body.theme-pink .sd-custom-select-option,
body.pink-theme .sd-custom-select-option,
[data-theme="pink"] .sd-custom-select-option {
  color: #4c2f35;
}
body.theme-pink .sd-custom-select-option:hover,
body.pink-theme .sd-custom-select-option:hover,
[data-theme="pink"] .sd-custom-select-option:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #000000;
}
body.theme-pink .sd-custom-select-option.is-selected,
body.pink-theme .sd-custom-select-option.is-selected,
[data-theme="pink"] .sd-custom-select-option.is-selected {
  background: rgba(244, 63, 94, 0.18);
  color: #f43f5e;
}
body.theme-pink .sd-custom-opt-check,
body.pink-theme .sd-custom-opt-check,
[data-theme="pink"] .sd-custom-opt-check {
  color: #f43f5e;
}

/* Aero Theme */
body.theme-aero .sd-custom-select-trigger,
body.aero-theme .sd-custom-select-trigger,
[data-theme="aero"] .sd-custom-select-trigger {
  background: rgba(0, 168, 255, 0.08);
  border-color: rgba(0, 168, 255, 0.25);
  color: #ffffff;
}
body.theme-aero .sd-custom-select-trigger:hover,
body.aero-theme .sd-custom-select-trigger:hover,
[data-theme="aero"] .sd-custom-select-trigger:hover {
  background: rgba(0, 168, 255, 0.15);
  border-color: #00a8ff;
}
body.theme-aero .sd-custom-select-dropdown,
body.aero-theme .sd-custom-select-dropdown,
[data-theme="aero"] .sd-custom-select-dropdown {
  background: rgba(4, 20, 48, 0.95);
  border-color: rgba(0, 168, 255, 0.35);
  box-shadow: 0 16px 48px rgba(0, 10, 30, 0.7);
  backdrop-filter: blur(20px);
}
body.theme-aero .sd-custom-select-option,
body.aero-theme .sd-custom-select-option,
[data-theme="aero"] .sd-custom-select-option {
  color: #e0f2fe;
}
body.theme-aero .sd-custom-select-option:hover,
body.aero-theme .sd-custom-select-option:hover,
[data-theme="aero"] .sd-custom-select-option:hover {
  background: rgba(0, 168, 255, 0.16);
  color: #ffffff;
}
body.theme-aero .sd-custom-select-option.is-selected,
body.aero-theme .sd-custom-select-option.is-selected,
[data-theme="aero"] .sd-custom-select-option.is-selected {
  background: rgba(0, 168, 255, 0.28);
  color: #00a8ff;
  font-weight: bold;
}
body.theme-aero .sd-custom-opt-check,
body.aero-theme .sd-custom-opt-check,
[data-theme="aero"] .sd-custom-opt-check {
  color: #00a8ff;
}

/* Purple Theme */
body.theme-purple .sd-custom-select-dropdown,
body.purple-theme .sd-custom-select-dropdown {
  background: #140b24;
  border-color: rgba(139, 92, 246, 0.25);
}
body.theme-purple .sd-custom-select-option,
body.purple-theme .sd-custom-select-option {
  color: #f3e8ff;
}
body.theme-purple .sd-custom-select-option:hover,
body.purple-theme .sd-custom-select-option:hover {
  background: rgba(139, 92, 246, 0.12);
  color: #ffffff;
}
body.theme-purple .sd-custom-select-option.is-selected,
body.purple-theme .sd-custom-select-option.is-selected {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}
body.theme-purple .sd-custom-opt-check,
body.purple-theme .sd-custom-opt-check {
  color: #8b5cf6;
}

/* Mono Theme */
body.theme-mono .sd-custom-select-dropdown,
body.mono-theme .sd-custom-select-dropdown {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.25);
  border-radius: 0;
}
body.theme-mono .sd-custom-select-trigger,
body.mono-theme .sd-custom-select-trigger {
  border-radius: 0;
}
body.theme-mono .sd-custom-select-option,
body.mono-theme .sd-custom-select-option {
  border-radius: 0;
  color: #ffffff;
}
body.theme-mono .sd-custom-select-option:hover,
body.mono-theme .sd-custom-select-option:hover {
  background: rgba(255, 255, 255, 0.15);
}
body.theme-mono .sd-custom-select-option.is-selected,
body.mono-theme .sd-custom-select-option.is-selected {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
body.theme-mono .sd-custom-opt-check,
body.mono-theme .sd-custom-opt-check {
  color: #ffffff;
}

/* =====================================================
   THEME-AWARE VECTOR ICONS
===================================================== */

.sd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.sd-icon-inline {
  margin-right: 6px;
  vertical-align: -2px;
}

.plan-type-btn .sd-icon,
.plan-template-chip .sd-icon,
.plan-pill-filter .sd-icon,
.studio-tab .sd-icon {
  margin-right: 6px;
}

.studio-theme-card .studio-theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.studio-theme-card .studio-theme-icon svg {
  width: 20px;
  height: 20px;
}

/* =====================================================
   OFFLINE MODE & SYNC UI STYLES
   ===================================================== */
.offline-status-badge {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 158, 11, 0.15);
  border-radius: 999px;
  padding: 6px 16px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s, border-color 0.25s;
  pointer-events: none;
  max-width: 90vw;
}

.offline-status-badge.offline-active {
  display: flex !important;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.offline-status-badge.syncing {
  display: flex !important;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  background: rgba(14, 28, 48, 0.92);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.offline-status-badge.online-restored {
  display: flex !important;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  background: rgba(6, 32, 22, 0.92);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.offline-badge-content {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.offline-badge-icon {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: pulseOffline 2s infinite ease-in-out;
}

.offline-status-badge.syncing .offline-badge-icon {
  animation: spinSync 1s infinite linear;
}

.offline-badge-count {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
}

.group-offline-notice-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-card, 14px);
  padding: 12px 16px;
  margin-bottom: 14px;
  color: var(--text-p, #f8fafc);
  font-size: 12.5px;
  line-height: 1.5;
  animation: fadeIn 0.2s ease;
}

.group-offline-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 14px;
  flex-shrink: 0;
}

.group-offline-info strong {
  color: #fbbf24;
  font-weight: 700;
}

@keyframes pulseOffline {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
}

@keyframes spinSync {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =====================================================
   DESKTOP NAVIGATION ACCORDION & THEME STUDIO STYLES
===================================================== */
@media (min-width: 768px) {
  .nav-category-item:hover .nav-sub-menu {
    max-height: 280px;
    opacity: 1;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .nav-category-item:hover .nav-category-chevron {
    transform: rotate(180deg);
    color: var(--accent);
  }
}

/* Light & Litewhite Theme Navigation Accordion */
body.light-theme .nav-category-header,
body.theme-light .nav-category-header,
[data-theme="light"] .nav-category-header,
body.litewhite-theme .nav-category-header,
body.theme-litewhite .nav-category-header,
[data-theme="litewhite"] .nav-category-header {
  color: #475569;
}
body.light-theme .nav-category-header:hover,
body.theme-light .nav-category-header:hover,
[data-theme="light"] .nav-category-header:hover,
body.litewhite-theme .nav-category-header:hover,
body.theme-litewhite .nav-category-header:hover,
[data-theme="litewhite"] .nav-category-header:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}
body.light-theme .nav-category-item.open .nav-category-header,
body.theme-light .nav-category-item.open .nav-category-header,
[data-theme="light"] .nav-category-item.open .nav-category-header,
body.litewhite-theme .nav-category-item.open .nav-category-header,
body.theme-litewhite .nav-category-item.open .nav-category-header,
[data-theme="litewhite"] .nav-category-item.open .nav-category-header {
  color: #0f172a;
}
body.light-theme .nav-sub-menu,
body.theme-light .nav-sub-menu,
[data-theme="light"] .nav-sub-menu,
body.litewhite-theme .nav-sub-menu,
body.theme-litewhite .nav-sub-menu,
[data-theme="litewhite"] .nav-sub-menu {
  border-left-color: rgba(15, 23, 42, 0.12);
}

/* Pink Theme Navigation Accordion */
body.pink-theme .nav-category-header,
body.theme-pink .nav-category-header,
[data-theme="pink"] .nav-category-header {
  color: #8a636c;
}
body.pink-theme .nav-category-header:hover,
body.theme-pink .nav-category-header:hover,
[data-theme="pink"] .nav-category-header:hover {
  background: rgba(244, 63, 94, 0.08);
  color: #881337;
}
body.pink-theme .nav-category-item.open .nav-category-header,
body.theme-pink .nav-category-item.open .nav-category-header,
[data-theme="pink"] .nav-category-item.open .nav-category-header {
  color: #881337;
}
body.pink-theme .nav-sub-menu,
body.theme-pink .nav-sub-menu,
[data-theme="pink"] .nav-sub-menu {
  border-left-color: rgba(244, 63, 94, 0.2);
}

/* Mono Theme Navigation Accordion */
body.mono-theme .nav-category-header {
  color: #a0a0a0;
}
body.mono-theme .nav-category-header:hover,
body.mono-theme .nav-category-item.open .nav-category-header {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.mono-theme .nav-sub-menu {
  border-left-color: rgba(255, 255, 255, 0.15);
}

/* Aero Theme Navigation Accordion */
body.aero-theme .nav-category-header,
body.theme-aero .nav-category-header,
[data-theme="aero"] .nav-category-header {
  color: #93c5fd;
}
body.aero-theme .nav-category-header:hover,
body.aero-theme .nav-category-item.open .nav-category-header,
body.theme-aero .nav-category-header:hover,
body.theme-aero .nav-category-item.open .nav-category-header,
[data-theme="aero"] .nav-category-header:hover,
[data-theme="aero"] .nav-category-item.open .nav-category-header {
  background: rgba(0, 168, 255, 0.14);
  color: #ffffff;
}
body.aero-theme .nav-sub-menu,
body.theme-aero .nav-sub-menu,
[data-theme="aero"] .nav-sub-menu {
  border-left-color: rgba(0, 168, 255, 0.25);
}

/* =====================================================
   IN-APP TOAST NOTIFICATION BANNER (iOS & Instagram Style)
===================================================== */
.in-app-toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: calc(env(safe-area-inset-top, 12px) + 8px) 16px 0;
  gap: 10px;
}

.in-app-toast-banner {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  animation: sdToastSlideDown 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, box-shadow 0.2s ease;
  touch-action: pan-y;
}

.in-app-toast-banner:hover {
  transform: translateY(2px) scale(1.008);
  box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.in-app-toast-banner.is-dismissing {
  animation: sdToastSlideUp 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.in-app-toast-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #00e5b0), #38bdf8, #818cf8);
}

.in-app-toast-content-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.in-app-toast-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-surface, #1e293b);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.in-app-toast-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim, rgba(0, 229, 176, 0.12));
  border: 1px solid rgba(0, 229, 176, 0.25);
  font-size: 22px;
}

.in-app-toast-text-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.in-app-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 1px;
}

.in-app-toast-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent, #00e5b0);
  background: rgba(0, 229, 176, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.in-app-toast-time {
  font-size: 10.5px;
  color: var(--text-m, #64748b);
  font-weight: 500;
}

.in-app-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-p, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.in-app-toast-body {
  font-size: 12px;
  color: var(--text-s, #94a3b8);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.in-app-toast-close {
  background: transparent;
  border: none;
  color: var(--text-m, #64748b);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.in-app-toast-close:hover {
  color: var(--text-p, #f8fafc);
  background: rgba(255, 255, 255, 0.1);
}

/* Light & Litewhite Theme Support for In-App Toast */
body.light-theme .in-app-toast-banner,
body.theme-light .in-app-toast-banner,
[data-theme="light"] .in-app-toast-banner,
body.litewhite-theme .in-app-toast-banner,
body.theme-litewhite .in-app-toast-banner,
[data-theme="litewhite"] .in-app-toast-banner {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
body.light-theme .in-app-toast-title,
body.theme-light .in-app-toast-title,
[data-theme="light"] .in-app-toast-title,
body.litewhite-theme .in-app-toast-title,
body.theme-litewhite .in-app-toast-title,
[data-theme="litewhite"] .in-app-toast-title {
  color: #0f172a;
}
body.light-theme .in-app-toast-body,
body.theme-light .in-app-toast-body,
[data-theme="light"] .in-app-toast-body,
body.litewhite-theme .in-app-toast-body,
body.theme-litewhite .in-app-toast-body,
[data-theme="litewhite"] .in-app-toast-body {
  color: #475569;
}
body.light-theme .in-app-toast-close:hover,
body.theme-light .in-app-toast-close:hover,
[data-theme="light"] .in-app-toast-close:hover,
body.litewhite-theme .in-app-toast-close:hover,
body.theme-litewhite .in-app-toast-close:hover,
[data-theme="litewhite"] .in-app-toast-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Notification Permission Button State Helpers */
.btn-notification-toggle.perm-granted,
#notif-settings-toggle-btn.perm-granted {
  background: rgba(0, 229, 176, 0.12) !important;
  color: var(--accent, #00e5b0) !important;
  border-color: rgba(0, 229, 176, 0.35) !important;
}

.btn-notification-toggle.perm-denied,
#notif-settings-toggle-btn.perm-denied {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.btn-notification-toggle.perm-ios-pwa,
#notif-settings-toggle-btn.perm-ios-pwa {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

@keyframes sdToastSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sdToastSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(0.95);
  }
}

/* =====================================================
   NOTIFICATION MODAL, STATUS PILL & PERMISSION BANNER
===================================================== */
.notif-header-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-dim, rgba(0, 229, 176, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-unread-count-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--accent, #00e5b0);
  color: #08080a;
  letter-spacing: 0.3px;
  margin-left: 4px;
}

.notif-perm-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.notif-perm-pill.perm-granted {
  background: rgba(0, 229, 176, 0.12);
  color: var(--accent, #00e5b0);
  border-color: rgba(0, 229, 176, 0.3);
}

.notif-perm-pill.perm-denied {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.notif-perm-pill.perm-ios-pwa {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.notif-perm-pill.perm-default {
  background: var(--bg-surface, rgba(255, 255, 255, 0.06));
  color: var(--text-s, #94a3b8);
  border-color: var(--border, rgba(255, 255, 255, 0.1));
}

.notif-perm-banner {
  background: linear-gradient(135deg, rgba(0, 229, 176, 0.08) 0%, rgba(56, 189, 248, 0.05) 100%);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notif-perm-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notif-perm-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.35;
}

.notif-perm-banner-text strong {
  font-size: 12.5px;
  color: var(--text-p, #f8fafc);
}

.notif-perm-banner-text span {
  color: var(--text-s, #94a3b8);
  font-size: 11px;
}

.notif-perm-allow-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}

.notif-test-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--bg-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  color: var(--text-p, #f8fafc);
  cursor: pointer;
  transition: all 0.18s ease;
}

.notif-test-btn:hover {
  background: var(--bg-mid, rgba(255, 255, 255, 0.12));
  border-color: var(--accent, #00e5b0);
  color: var(--accent, #00e5b0);
}

@media (max-width: 480px) {
  .notif-perm-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .notif-perm-allow-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}