:root {
  --navy: #111a4d;
  --navy-2: #1b275f;
  --teal: #08aebc;
  --teal-2: #19c6d3;
  --ink: #f7f9ff;
  --muted: #b8c1df;
  --panel: rgba(10, 17, 52, 0.88);
  --panel-border: rgba(255, 255, 255, 0.13);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(8, 174, 188, 0.18), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(73, 102, 196, 0.24), transparent 36%),
    #080d28;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, select, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  background: rgba(6, 10, 31, 0.82);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  z-index: 50;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.brand img { width: 118px; height: auto; display: block; filter: brightness(0) invert(1); }
.brand-text { font-size: 12px; color: var(--muted); white-space: nowrap; }

.toolbar-actions { display: flex; align-items: center; gap: 8px; }

.control, .language-select, .cta {
  min-height: 38px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
  text-decoration: none;
}
.control:hover, .language-select:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.control:active, .cta:active { transform: translateY(1px); }
.control[aria-pressed="true"] { background: rgba(8, 174, 188, 0.2); border-color: rgba(8, 174, 188, 0.65); }
.control svg, .cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control-label { font-size: 12px; }
.language-select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, #dce4ff 50%), linear-gradient(135deg, #dce4ff 50%, transparent 50%); background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.language-select option { color: #11162f; background: #fff; }
.cta { border-color: transparent; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #06102d; font-weight: 800; box-shadow: 0 8px 24px rgba(8, 174, 188, 0.25); }
.cta:hover { transform: translateY(-1px); }

.stage-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px 60px 10px;
  overflow: hidden;
}

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 128px) * 16 / 9));
  max-height: calc(100vh - 128px);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  outline: none;
  isolation: isolate;
}

.slide-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.006);
  transition: opacity 220ms ease, transform 220ms ease;
}
.slide-layer.is-visible { opacity: 1; transform: scale(1); }
.slide-image { width: 100%; height: 100%; display: block; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.video-overlay {
  position: absolute;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
.video-overlay video { width: 100%; height: 100%; display: block; object-fit: fill; background: transparent; }
.video-overlay .video-hit {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.video-state {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(7, 12, 38, 0.74);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.video-overlay:hover .video-state, .video-overlay.is-paused .video-state { opacity: 1; }
.video-state svg { width: 14px; height: 14px; fill: currentColor; }

.nav-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 64px;
  margin-top: -32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  background: rgba(6, 10, 31, 0.58);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  cursor: pointer;
  z-index: 30;
  opacity: 0.72;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.nav-button:hover { opacity: 1; background: rgba(6, 10, 31, 0.88); transform: translateY(-1px); }
.nav-button:disabled { opacity: 0.18; cursor: default; transform: none; }
.nav-button.prev { left: 8px; }
.nav-button.next { right: 8px; }
.nav-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }

.footer-bar {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 6px 18px 10px;
  color: var(--muted);
}
.slide-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter { font-size: 12px; letter-spacing: 0.08em; color: #edf2ff; }
.progress-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #7de3ec); transition: width 220ms ease; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.thumbs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(410px, 92vw);
  z-index: 70;
  transform: translateX(102%);
  transition: transform 220ms ease;
  background: #0b1236;
  border-left: 1px solid var(--panel-border);
  box-shadow: -24px 0 70px rgba(0,0,0,0.45);
  display: grid;
  grid-template-rows: auto 1fr;
}
.thumbs-drawer.is-open { transform: translateX(0); }
.drawer-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--panel-border); }
.drawer-title { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.thumb-grid { overflow: auto; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 12px; }
.thumb {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.thumb:hover { transform: translateY(-1px); border-color: rgba(8,174,188,0.72); }
.thumb.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(8,174,188,0.22); }
.thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.thumb-number { position: absolute; left: 6px; bottom: 6px; min-width: 24px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: rgba(6,10,31,0.78); font-size: 11px; font-weight: 800; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translate(-50%, 16px);
  z-index: 100;
  background: rgba(7,12,38,0.94);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #0b1236;
  transition: opacity 260ms ease, visibility 260ms ease;
}
.loading-screen.is-hidden { opacity: 0; visibility: hidden; }
.loader { display: grid; justify-items: center; gap: 18px; }
.loader img { width: min(270px, 62vw); height: auto; filter: brightness(0) invert(1); }
.loader-line { width: 180px; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.loader-line::after { content: ""; display: block; width: 45%; height: 100%; background: var(--teal); animation: load 1s ease-in-out infinite alternate; }
@keyframes load { from { transform: translateX(-40%); } to { transform: translateX(160%); } }

:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }

body.fullscreen .toolbar,
body.fullscreen .footer-bar { opacity: 0; pointer-events: none; position: fixed; }
body.fullscreen .stage-shell { padding: 0; }
body.fullscreen .stage { width: min(100vw, calc(100vh * 16 / 9)); max-height: 100vh; }
body.fullscreen .nav-button { opacity: 0.25; }
body.fullscreen:hover .nav-button { opacity: 0.72; }

@media (max-width: 900px) {
  .brand-text, .control-label, .cta span { display: none; }
  .toolbar { padding-inline: 10px; gap: 8px; }
  .brand img { width: 102px; }
  .control, .cta { width: 38px; padding: 0; }
  .language-select { width: 74px; padding-left: 8px; }
  .stage-shell { padding-inline: 42px; }
  .nav-button { width: 38px; height: 54px; margin-top: -27px; border-radius: 12px; }
  .nav-button.prev { left: 2px; }
  .nav-button.next { right: 2px; }
  .footer-bar { grid-template-columns: 1fr auto; padding-inline: 10px; }
  .slide-title { display: none; }
  .progress-track { grid-column: 1 / -1; grid-row: 1; }
  .counter { grid-column: 2; grid-row: 1; background: rgba(7,12,38,.72); border-radius: 999px; padding: 4px 8px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  .toolbar { min-height: 50px; }
  .stage-shell { padding: 8px 0 6px; }
  .stage { width: 100vw; max-height: none; }
  .nav-button { top: auto; bottom: 10px; margin-top: 0; width: 42px; height: 42px; border-radius: 999px; }
  .nav-button.prev { left: 10px; }
  .nav-button.next { right: 10px; }
  .footer-bar { min-height: 42px; }
  .thumb-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}