/* apps.css
   Overrides loaded only for /apps/* pages (see _top.php).
   Fixes: ensure hero background and page text colors match the homepage
*/

/* Hero / top slider background: use the same gradient as the homepage */
#bg {
  background: linear-gradient(0deg, #ffffff, #edf5ff) !important;
}

/* Ensure large hero titles are dark and readable */
#pc .swiper-slide .s1_title,
#pc .swiper-slide .s2_title {
  color: #121d2d !important;
  text-shadow: none !important;
}

/* Page content in /apps should use dark text on white for readability */
.page-body {
  color: #121d2d !important;
  background: #ffffff !important;
}
.page-body p,
.page-body li,
.page-body span,
.page-body div,
.page-body td,
.page-body th {
  color: #121d2d !important;
}
.page-body a { color: #1e90ff !important; }

/* Small utility: ensure quick-actions buttons remain visible */
#quick-actions .qa-btn { color: #fff !important; }

/* If further color conflicts appear, refine selectors instead of using !important. */
:root {
  --bg:            #eae5de;
  --bg-card:       #1a273c;
  --bg-panel:      #22324c;
  --bg-input:      #132238;
  --line:          rgba(173,198,232,0.28);
  --line-soft:     rgba(173,198,232,0.14);
  --text:          #e6edf3;
  --text-muted:    #8b949e;
  --muted:         #8b949e;
  --text-dim:      #7e90aa;
  --accent:        #58a6ff;
  --accent-glow:   rgba(88,166,255,0.22);
  --accent-dim:    rgba(88,166,255,0.12);
  --accent2:       #3fb950;  /* green – play */
  --accent2-glow:  rgba(63,185,80,0.22);
  --danger:        #f85149;
  --danger-dim:    rgba(248,81,73,0.14);
  --radius:        14px;
  --radius-sm:     8px;
  --shadow-card:   0 0 0 1px rgba(173,198,232,0.22), 0 22px 60px rgba(2,8,20,0.56);
  --shadow-panel:  0 0 0 1px rgba(173,198,232,0.18), 0 10px 24px rgba(2,8,20,0.40);
  --shadow-btn:    0 2px 10px rgba(0,0,0,0.45);
  --head-grad-1:   #1a2940;
  --head-grad-2:   #243755;
  --logo-grad-1:   #1f6feb;
  --logo-grad-2:   #388bfd;
  --logo-shadow:   0 4px 16px rgba(31,111,235,0.45);
  --btn-grad-1:    #1f6feb;
  --btn-grad-2:    #388bfd;
  --file-grad-1:   #1a3a5c;
  --file-grad-2:   #1d4ed8;
  --help-grad-1:   #1f6feb;
  --help-grad-2:   #388bfd;
  --input-stroke:  rgba(255,255,255,0.74);
  --chip-stroke:   rgba(255,255,255,0.82);
  --chip-bg:       rgba(255,255,255,0.05);
  --file-item-bg:  rgba(17,31,52,0.62);
  --file-item-line: rgba(183,208,242,0.32);
  --helpbox-bg:    rgba(15,27,44,0.97);
  --helpbox-border: rgba(88,166,255,0.52);
  --player-line:   rgba(154,201,255,0.58);
  --player-outline: rgba(88,166,255,0.24);
  --player-shadow: 0 14px 34px rgba(0,0,0,0.62), 0 0 0 1px rgba(154,201,255,0.22), 0 0 0 3px rgba(88,166,255,0.14);
  --controls-grad-1: #1a2a41;
  --controls-grad-2: #152338;
  --status-stroke: rgba(255,255,255,0.70);
  --modal-overlay:  rgba(7,14,24,0.68);
  --modal-bg:       #1d2d46;
  --modal-border:   rgba(255,255,255,0.28);
  --modal-outline:  rgba(88,166,255,0.48);
  --modal-shadow:   0 20px 56px rgba(0,0,0,0.68);
  --modal-muted:    #b7c0cc;
  --modal-code-bg:  rgba(88,166,255,0.16);
  --modal-code-text:#b9ddff;
  --trans:         0.15s cubic-bezier(.4,0,.2,1);
}

:root[data-theme="light"] {
  --bg:            #f6f2e8;
  --bg-card:       #fffdf8;
  --bg-panel:      #fff7e9;
  --bg-input:      #fffdf7;
  --line:          rgba(181,138,62,0.30);
  --line-soft:     rgba(181,138,62,0.18);
  --text:          #3e3020;
  --text-muted:    #7d6843;
  --muted:         #7d6843;
  --text-dim:      #8e7a58;
  --accent:        #b68b2d;
  --accent-glow:   rgba(182,139,45,0.24);
  --accent-dim:    rgba(182,139,45,0.14);
  --accent2:       #8f7a33;
  --accent2-glow:  rgba(143,122,51,0.22);
  --danger:        #b74f3b;
  --danger-dim:    rgba(183,79,59,0.16);
  --shadow-card:   0 0 0 1px rgba(181,138,62,0.18), 0 20px 40px rgba(84,64,24,0.12);
  --shadow-panel:  0 0 0 1px rgba(181,138,62,0.12), 0 8px 20px rgba(84,64,24,0.10);
  --shadow-btn:    0 2px 8px rgba(84,64,24,0.15);
  --head-grad-1:   #fffaf1;
  --head-grad-2:   #f8efd8;
  --logo-grad-1:   #c49b45;
  --logo-grad-2:   #e2c47b;
  --logo-shadow:   0 4px 14px rgba(182,139,45,0.28);
  --btn-grad-1:    #bb933f;
  --btn-grad-2:    #e1c37c;
  --file-grad-1:   #b08a39;
  --file-grad-2:   #d9b763;
  --help-grad-1:   #b58a34;
  --help-grad-2:   #dfbe70;
  --input-stroke:  rgba(168,128,58,0.68);
  --chip-stroke:   rgba(168,128,58,0.72);
  --chip-bg:       rgba(255,248,232,0.85);
  --file-item-bg:  rgba(255,248,233,0.92);
  --file-item-line: rgba(168,128,58,0.38);
  --helpbox-bg:    rgba(255,249,237,0.98);
  --helpbox-border: rgba(182,139,45,0.42);
  --player-line:   rgba(162,125,53,0.68);
  --player-outline: rgba(57,86,140,0.24);
  --player-shadow: 0 12px 26px rgba(110,82,25,0.22), 0 0 0 1px rgba(162,125,53,0.28), 0 0 0 3px rgba(57,86,140,0.10);
  --controls-grad-1: #fffaf0;
  --controls-grad-2: #f7edd9;
  --status-stroke: rgba(168,128,58,0.65);
  --modal-overlay:  rgba(104,82,39,0.30);
  --modal-bg:       #fffaf1;
  --modal-border:   rgba(168,128,58,0.52);
  --modal-outline:  rgba(196,152,66,0.46);
  --modal-shadow:   0 18px 44px rgba(110,82,25,0.22);
  --modal-muted:    #6e5b3a;
  --modal-code-bg:  rgba(182,139,45,0.16);
  --modal-code-text:#745722;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Shared UI preferences (applied via html data attributes) */
html[data-font-size="small"] body { font-size: 14px; }
html[data-font-size="large"] body { font-size: 16px; }

html[data-density="compact"] .wrap { padding: 14px 12px; }
html[data-density="compact"] .head { padding: 10px 14px; }
html[data-density="compact"] .controls { padding: 12px; gap: 9px; }
html[data-density="compact"] .box { padding: 10px; }
html[data-density="compact"] .group { gap: 6px; }
html[data-density="compact"] .controls button,
html[data-density="compact"] .btn-accent,
html[data-density="compact"] .small-btn { padding-top: 8px; padding-bottom: 8px; }

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Layout */
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.card { background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }

/* Dark-mode frame contrast and blue-toned atmosphere */
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(1200px 680px at 12% -8%, rgba(86, 146, 220, 0.18), transparent 62%),
    radial-gradient(980px 540px at 86% 0%, rgba(71, 116, 191, 0.12), transparent 64%),
    var(--bg);
}
:root:not([data-theme="light"]) .app-hub-title {
  border-color: rgba(184, 210, 246, 0.34);
  background: linear-gradient(180deg, rgba(34, 50, 76, 0.96), rgba(23, 37, 58, 0.96));
}
:root:not([data-theme="light"]) .card {
  border: 1px solid rgba(184, 210, 246, 0.26);
  box-shadow:
    0 0 0 1px rgba(132, 170, 224, 0.20),
    0 28px 62px rgba(3, 10, 22, 0.62);
}
:root:not([data-theme="light"]) .controls {
  border-top-color: rgba(184, 210, 246, 0.26);
  box-shadow: inset 0 1px 0 rgba(204, 224, 250, 0.10);
}
:root:not([data-theme="light"]) .box {
  border-color: rgba(184, 210, 246, 0.30);
  background: linear-gradient(180deg, rgba(36, 53, 82, 0.96), rgba(27, 41, 64, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(224, 236, 255, 0.06),
    0 0 0 1px rgba(132, 170, 224, 0.12),
    0 9px 24px rgba(2, 8, 20, 0.44);
}
:root:not([data-theme="light"]) .box .group {
  border: 1px solid rgba(177, 204, 238, 0.26);
  border-radius: 10px;
  padding: 9px;
  background: linear-gradient(180deg, rgba(20, 33, 53, 0.64), rgba(14, 25, 40, 0.58));
}

/* Header */
.head { padding: 14px 18px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--head-grad-1) 0%, var(--head-grad-2) 100%); border-bottom: 1px solid var(--line); }
.title-wrapper { display: flex; align-items: center; gap: 14px; }
.title-wrapper .logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--logo-grad-1) 0%, var(--logo-grad-2) 100%); box-shadow: var(--logo-shadow); }
.title-main { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.title-sub  { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; letter-spacing: 0.2px; }
.head .right-badge { margin-left: auto; }

/* theme switch */
.theme-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.theme-btn { border-radius: 999px; padding: 6px 10px; font-size: 0.76rem; min-width: 86px; border: 1px solid transparent; background: transparent; color: var(--text-muted); box-shadow: none; transform: none; }
.theme-btn:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); transform: none; box-shadow: none; }
.theme-btn.is-active { color: #ffffff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 64%, #ffffff 36%)); border-color: color-mix(in srgb, var(--accent) 75%, #ffffff 25%); box-shadow: 0 2px 10px var(--accent-glow); }
:root[data-theme="light"] .theme-btn.is-active { color: #2f2312; }
.badge { font-size: 0.72rem; font-weight: 700; color: #cae8ff; background: rgba(88,166,255,0.15); border: 1px solid rgba(88,166,255,0.3); border-radius: 999px; padding: 3px 10px; }

/* Player */
.player { position: relative; width: calc(100% - 20px); margin: 10px 10px 0; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--player-line); box-shadow: var(--player-shadow); }
.player::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--player-outline); z-index: 1; }
video { width: 100%; height: min(56.25vw, 68vh); max-height: 68vh; display: block; background: #000; }

/* Controls panel */
.controls { padding: 16px; display: grid; gap: 12px; background: linear-gradient(180deg, var(--controls-grad-1) 0%, var(--controls-grad-2) 100%); border-top: 1px solid var(--line); }

/* Box */
.box { border-radius: var(--radius-sm); padding: 14px; background: var(--bg-panel); border: 1px solid var(--line); box-shadow: var(--shadow-panel); margin-bottom: 0; }

/* Buttons, inputs, form controls */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 8px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--btn-grad-1) 0%, var(--btn-grad-2) 100%);
  border: 1px solid color-mix(in srgb, var(--btn-grad-2) 60%, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-btn); cursor: pointer;
}
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

.small-btn {
  padding: 8px 10px; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--text); font-weight:700; cursor:pointer;
}
.small-btn.disabled, .small-btn[disabled] { opacity:0.5; cursor:not-allowed; }

/* Tip percent button selected state */
.tip-btn {
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans);
}
.tip-btn.active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--btn-grad-2) 70%, #ffffff 30%);
  background: linear-gradient(135deg, var(--btn-grad-1), var(--btn-grad-2));
  box-shadow: 0 6px 16px var(--accent-glow);
  transform: translateY(-1px);
}
:root[data-theme="light"] .tip-btn.active {
  color: #2f2312;
}

.btn-fixed { flex: 0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.btn-file { padding:10px 12px; border-radius:8px; border:1px solid var(--line); background: linear-gradient(135deg, var(--file-grad-1), var(--file-grad-2)); color:#fff; font-weight:700; }

.help-btn { width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--bg-input);color:var(--text);font-weight:800;cursor:pointer }

/* Inputs / selects */
input[type="text"], input[type="url"], input[type="number"], input[type="range"], select, textarea {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--input-stroke); background: var(--bg-input); color: var(--text); outline: none; font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 6px 18px var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 60%, var(--input-stroke) 40%); }

.box-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.box-row.url-row { align-items:center; }
.box-row.file-row { align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
.box-row.file-row .btn-file { white-space: nowrap; }

/* Player control groups */
.group { display: grid; gap: 8px; }
.group-caption {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.group-caption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.group-caption-row .help-btn {
  width: 30px;
  height: 30px;
  font-size: 0.82rem;
  flex: 0 0 auto;
}
.group.grid-2,
.group.grid-3 {
  display: grid;
  gap: 8px;
  width: 100%;
}
.group.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group.grid-2 > button,
.group.grid-3 > button,
.chapter-action-row > button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

/* Chapter box alignment */
.box-title { font-weight: 800; color: var(--text); }
.chapter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.chapter-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.chapter-top-row .fancy-checkbox {
  justify-self: start;
  justify-content: flex-start;
  text-align: left;
  gap: 4px;
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
}
.chapter-top-row .fancy-checkbox .chk-label { white-space: nowrap; font-size: inherit; line-height: inherit; }
.chapter-top-row .fancy-checkbox input[type="checkbox"] {
  width: 13px;
  height: 13px;
  transform: translateY(0.5px);
}
.chapter-top-row > button {
  justify-self: end;
}
.chapter-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

/* Checkbox + tertiary button visuals */
.fancy-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.fancy-checkbox input { margin: 0; }
.chapter-row input,
.chapter-top-row input,
.chapter-row select,
.chapter-top-row select {
  width: 100%;
  min-width: 0;
}
.third-btn {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight: 700;
}

/* File list and playlist helpers */
.file-item { padding:8px; border-radius:8px; border:1px solid var(--file-item-line); background:var(--file-item-bg); margin-bottom:6px; }

/* Spa index visual (used by JEE2Weather) */
.spa-index { display:block; width:100%; }
.spa-index .bar { height:12px; border-radius:8px; transition:width 600ms ease; }


/* Inputs, buttons and other utilities are retained here... */
/* For brevity, remaining styles are identical to original JEE2Player inline CSS and have been preserved. */

/* Prevent unexpected horizontal overflow inside controls */
.controls * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.btn-fixed, .btn-file { min-width: 0; }
@media(min-width:900px){ .file-row { flex-wrap: wrap; } }

/* Responsive tweaks */
@media (max-width:520px){ .primary-controls { flex-wrap: wrap; } .controls { padding: 12px; } .box { padding: 12px; } video { height: 42vw; } }

/* Mobile overflow guards for utility forms */
@media (max-width: 600px) {
  .controls, .box, .box-row { min-width: 0; }
  .box-row { flex-wrap: wrap; }
  .box-row > * { min-width: 0; max-width: 100%; }

  .url-row {
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .url-row #videoUrl {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .url-row #loadUrlBtn {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .file-row {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .file-row #loadFileBtn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  /* Exchange + Player form controls */
  #vndAmount,
  #targetCurrency,
  #totalAmount,
  #totalCurrency,
  #videoUrl,
  #chapterTime,
  #chapterTitle {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .group.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group.grid-3 > button {
    white-space: nowrap;
    padding: 8px 6px;
    font-size: 0.8rem;
  }
  .chapter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-top-row { grid-template-columns: minmax(0, 1fr) auto; }
  .chapter-action-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapter-action-row .third-btn {
    padding: 8px 6px;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .chapter-top-row button,
  .chapter-top-row .small-btn {
    min-width: 58px;
    padding: 7px 8px;
    font-size: 0.78rem;
  }

  #banknotePreview {
    width: 100% !important;
    max-width: 320px !important;
  }

  /* Prevent media from causing horizontal overflow */
  .controls img,
  .controls video,
  .controls canvas,
  .controls svg {
    max-width: 100%;
  }
}

/* Utility hub navigation (toolbar style) */
.app-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 14px;
  position: relative;
  z-index: 12;
}
.app-hub-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.app-hub-head .app-home-link { justify-self: start; }
.app-hub-head .app-hub-pagename { justify-self: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-hub-head .app-hub-title { justify-self: end; }
.app-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  color: var(--text);
  font-weight: 800;
  font-size: 0.8rem;
  text-decoration: none;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
}
.app-home-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--line) 56%, #ffffff 44%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}
.app-hub-title {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: transparent;
  white-space: nowrap;
}
.app-hub-pagename {
  font-weight: 800;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  line-height: 1;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.app-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, #ffffff 12%), color-mix(in srgb, var(--bg-panel) 92%, #ffffff 8%));
  box-shadow: var(--shadow-panel);
}
.app-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.81rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans), color var(--trans);
}
.app-tab::before {
  content: '→';
  font-size: 0.74rem;
  opacity: 0.72;
}
.app-tab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--line) 56%, #ffffff 44%);
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
/* Gentle, non-dominant highlight for news tab when present across pages. */
.app-tab.news-highlight:not(.active) {
  background: linear-gradient(90deg, rgba(255,224,130,0.20), rgba(255,213,79,0.14));
  color: inherit;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--btn-grad-2) 14%, var(--line) 86%);
}

.app-tab.active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--btn-grad-2) 72%, #ffffff 28%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-grad-1) 82%, #ffffff 18%), color-mix(in srgb, var(--btn-grad-2) 82%, #ffffff 18%));
  box-shadow: 0 6px 16px var(--accent-glow);
}
.app-tab.active::before {
  content: '•';
  font-size: 0.9rem;
  opacity: 0.96;
  transform: translateY(-0.5px);
}

/* Subtle entrance animation for active tab to indicate current page */
@keyframes tab-pop {
  0% { transform: translateY(6px) scale(0.995); opacity: 0.92; }
  60% { transform: translateY(-2px) scale(1.015); opacity: 1; }
 100% { transform: translateY(0) scale(1); opacity: 1; }
}
.app-tab.active {
  animation: tab-pop 420ms cubic-bezier(0.2,0.8,0.2,1) both, tab-pulse 1600ms 420ms ease-in-out 2 both;
}
@keyframes tab-pulse {
  0% {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-glow) 60%, rgba(0,0,0,0.06));
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-glow) 80%, rgba(0,0,0,0.08));
    transform: translateY(-1px) scale(1.006);
  }
  100% {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-glow) 60%, rgba(0,0,0,0.06));
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-tab.active { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .app-tab.active { animation: none !important; }
}

/* Light/dark differentiation for parent-level hub */
:root[data-theme="light"] .app-tabs {
  border-color: rgba(166,126,52,0.34);
  background: linear-gradient(180deg, rgba(255,251,242,0.97), rgba(251,243,225,0.93));
  box-shadow: 0 8px 20px rgba(110,82,25,0.16);
}
:root[data-theme="light"] .app-home-link {
  border-color: rgba(166,126,52,0.36);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,245,221,0.66));
  color: #5a4625;
}
:root[data-theme="light"] .app-tab {
  border-color: rgba(166,126,52,0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,246,225,0.62));
  color: #6a5636;
}
:root[data-theme="light"] .app-tab:hover {
  color: #3e3020;
  border-color: rgba(166,126,52,0.54);
}

:root:not([data-theme="light"]) .app-tabs {
  border-color: rgba(170,201,239,0.36);
  background: linear-gradient(180deg, rgba(25,42,66,0.93), rgba(18,30,47,0.95));
  box-shadow: 0 10px 24px rgba(2,9,22,0.40);
}
:root:not([data-theme="light"]) .app-home-link {
  border-color: rgba(170,201,239,0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  color: #d7e6f7;
}
:root:not([data-theme="light"]) .app-tab {
  border-color: rgba(170,201,239,0.32);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  color: #d7e6f7;
}

@media (max-width: 899px) {
  .app-hub {
    gap: 8px;
  }
  .app-hub-title { justify-self: end; margin-left: 0; }
  .app-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }
  .app-tab {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 0.72rem;
  }
}

@media (min-width: 900px) {
  .app-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

  /* Seek overlay buttons */
  .seek-overlay { position: absolute; left:0; right:0; top:0; bottom:0; pointer-events: none; z-index: 20; }
  .seek-corner {
    position: absolute; pointer-events: auto;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0; border-radius: 999px;
    font-weight: 800; font-size: 0.78rem;
    min-width: 46px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5); z-index: 21;
  }
  .seek-corner:hover:not(:disabled) { background: rgba(0,0,0,0.72); border-color: rgba(255,255,255,0.22); }
  .seek-top-left  { left: 10px; top: 10px; }
  .seek-top-right { right: 10px; top: 10px; }
  .seek-bottom-left  { left: 10px; bottom: 10px; }
  .seek-bottom-right { right: 10px; bottom: 10px; }
  @media (min-width:760px){ .seek-bottom-left, .seek-bottom-right { bottom: 60px; } }

  /* Progress bar */
  #progressBar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 0; position: relative; overflow: hidden; }

  /* Controls and general action buttons inside controls */
  .controls button { padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,0.02); color: var(--text); font-weight:700; cursor:pointer; }
  .controls button { 
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 4px rgba(0,0,0,0.15);
  }
  .controls button:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border-color: color-mix(in srgb, var(--line) 70%, #fff 30%);
  }
  .controls button.btn-accent { background: linear-gradient(135deg, var(--btn-grad-1), var(--btn-grad-2)); color:#fff; border-color: color-mix(in srgb, var(--btn-grad-2) 60%, rgba(255,255,255,0.08)); box-shadow: var(--shadow-btn); }
  .controls button.small-btn { padding:8px 10px; font-size:0.92rem; }
  .controls button.control-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--btn-grad-1) 78%, transparent 22%), color-mix(in srgb, var(--btn-grad-2) 78%, transparent 22%));
    color: #fff;
    border-color: color-mix(in srgb, var(--btn-grad-2) 65%, #fff 35%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-grad-2) 35%, transparent 65%), 0 8px 18px var(--accent-glow);
    transform: translateY(-1px);
  }

  /* Dark-mode clarity: button states (default / hover / pressed / selected / disabled) */
  :root:not([data-theme="light"]) .controls button {
    border-color: rgba(203, 213, 225, 0.34);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
    color: #e5edf6;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.32);
  }
  :root:not([data-theme="light"]) .controls button:hover:not(:disabled) {
    border-color: rgba(226, 232, 240, 0.52);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    color: #f8fbff;
  }
  :root:not([data-theme="light"]) .controls button:active:not(:disabled) {
    transform: translateY(1px);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.42);
  }
  :root:not([data-theme="light"]) .controls button.control-active {
    border-color: rgba(186, 230, 253, 0.82);
    background: linear-gradient(180deg, rgba(14, 116, 144, 0.98), rgba(3, 105, 161, 0.98));
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35), 0 8px 20px rgba(14, 165, 233, 0.30);
  }
  :root:not([data-theme="light"]) .controls button:disabled,
  :root:not([data-theme="light"]) .controls button.disabled,
  :root:not([data-theme="light"]) .controls button[disabled] {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.46), rgba(15, 23, 42, 0.46));
    color: rgba(148, 163, 184, 0.80);
    box-shadow: none;
    opacity: 1;
  }

  /* Dark-mode clarity: non-selected tabs should still look like tabs */
  :root:not([data-theme="light"]) .app-tab {
    border-color: rgba(148, 163, 184, 0.52);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.90), rgba(30, 41, 59, 0.88));
    color: #dbe7f3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
  }
  :root:not([data-theme="light"]) .app-tab:not(.active):hover {
    border-color: rgba(186, 230, 253, 0.62);
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.96), rgba(51, 65, 85, 0.94));
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .app-tab.active {
    border-color: rgba(186, 230, 253, 0.92);
    box-shadow: 0 8px 22px rgba(14,165,233,0.28);
  }

  /* Modal styles (used for help/settings) */
  .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
  .modal.active { display: flex; }
  .modal-bg { position: absolute; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .modal-content { position: relative; z-index: 1; background: var(--modal-bg); border: 1px solid var(--modal-border); padding: 22px 24px; border-radius: var(--radius); width: calc(100% - 40px); max-width: 680px; box-shadow: 0 0 0 1px var(--modal-outline), var(--modal-shadow); color: var(--text); max-height: 82vh; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 0.92rem; line-height: 1.55; }
  .modal-content h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
  .modal-content h4 { font-size: 0.88rem; font-weight: 700; color: var(--accent); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
  .modal-content p  { color: var(--modal-muted); margin-bottom: 8px; }
  .modal-content code { background: var(--modal-code-bg); color: var(--modal-code-text); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
  .modal-close { position: absolute; right: 14px; top: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--text-muted); font-size: 16px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; padding: 0; cursor: pointer; }
  .modal-close:hover { background: rgba(248,81,73,0.18); color: #fca5a5; border-color: rgba(248,81,73,0.3); }

  /* Modern settings controls */
  .native-setting-input {
    display: none !important;
  }
  .settings-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }
  .settings-choice-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 86%, #ffffff 14%), var(--bg-panel));
    color: var(--text);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans), color var(--trans);
  }
  .settings-choice-btn:hover {
    border-color: color-mix(in srgb, var(--line) 60%, #ffffff 40%);
    transform: translateY(-1px);
  }
  .settings-choice-btn.is-active {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--btn-grad-2) 70%, #ffffff 30%);
    background: linear-gradient(135deg, var(--btn-grad-1), var(--btn-grad-2));
    box-shadow: 0 6px 14px var(--accent-glow);
  }
  :root[data-theme="light"] .settings-choice-btn.is-active {
    color: #2f2312;
  }
  .settings-toggle-btn {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 86%, #ffffff 14%), var(--bg-panel));
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans), color var(--trans);
  }
  .settings-toggle-btn:hover {
    border-color: color-mix(in srgb, var(--line) 60%, #ffffff 40%);
    transform: translateY(-1px);
  }
  .settings-toggle-btn.is-active {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--btn-grad-2) 70%, #ffffff 30%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--btn-grad-1) 88%, transparent 12%), color-mix(in srgb, var(--btn-grad-2) 88%, transparent 12%));
    box-shadow: 0 6px 14px var(--accent-glow);
  }
  :root[data-theme="light"] .settings-toggle-btn.is-active {
    color: #2f2312;
  }