/* VideoShark identity. Provider authentication and API naming remain VIDEOAPI. */
:root {
  --shark-blue: #5b7cff;
  --shark-highlight: #8aa2ff;
  --shark-ink: #090e22;
  --shark-heading: #3e5fe0;
}
html:root[data-theme="dark"] { --shark-heading: #8aa2ff; }
.section-title em, .poster-index, .docs-sidebar-title, .app-nav-title, .login-index { color: var(--shark-heading); }
html:root :focus-visible { outline-color: var(--shark-blue); }
html:root .brand-logo, html:root .topbar .brand-logo, html:root .sf-brand .brand-logo,
html:root .site-drawer .brand-logo { width: 174px; height: auto; filter: none; }
html:root[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .studio-brand img,
html[data-theme="dark"] .partner-nav img { filter: none; }
html[data-theme="light"] img[data-shark-logo] { content: url('/brand/logo-light.svg'); }
.studio-brand img { width: 173px; height: 33px; object-fit: contain; }
.partner-nav img { width: 180px; }
.mobile-brand img { width: 150px; height: auto; display: block; }
.brand-logo { transition: opacity .2s; }
.brand:hover .brand-logo { opacity: .85; }
.hero-neon .btn-primary, .hx-badge b, .hx-send,
.btn-primary, .primary-button, .new-scene { color: var(--shark-ink); }
html[data-theme="light"] .studio-body .primary-button,
html[data-theme="light"] .studio-body .new-scene { color: #fff; }
.hero-neon .hx-title em { color: var(--shark-blue); }
.hx-word::after { color: #b6c7ff; }
.hero-v2 { background: #0a0a0f; }
.hx-bar { background: #111623; }
.hx-bar-title { display: inline-flex; align-items: center; gap: 7px; }
.hx-bar-title img { width: 20px; height: 20px; }
.hx-window { border-color: rgba(138,162,255,.24); }
.hx-window::after { content: ''; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; box-shadow: inset 0 1px rgba(184,202,255,.13); }
.hx-lead { color: #b9bfcd; }
.hx-brandline { display: inline-flex; align-items: center; gap: 8px; color: #9aaeea; font: 10px var(--mono); letter-spacing: .14em; margin: 0 0 16px; }
.hx-brandline i { width: 5px; height: 5px; border-radius: 50%; background: var(--shark-highlight); box-shadow: 0 0 12px rgba(91,124,255,.5); }
.local-reference-note { background: #0b0e17; color: #8b94aa; }
.local-reference-note a { color: #8aa2ff; }
.shark-signature { margin: 0; padding: 58px 0 22px; }
.shark-cinema { position: relative; min-height: 420px; border: 1px solid rgba(138,162,255,.23); border-radius: 24px; overflow: hidden; background: #0d1428; isolation: isolate; }
.shark-cinema::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5,11,27,.97) 5%,rgba(5,11,27,.8) 45%,rgba(8,15,35,.18)), url('/showcase/22674e22-935d-4c7d-8e6f-4559916918c3.webp') center/cover; }
.shark-cinema::after { content: ''; position: absolute; z-index: -1; width: 650px; height: 650px; left: -260px; bottom: -500px; border: 1px solid rgba(138,162,255,.15); border-radius: 50%; box-shadow: 0 0 0 55px rgba(91,124,255,.03),0 0 0 110px rgba(91,124,255,.025); }
.shark-cinema-copy { padding: 48px 52px; max-width: 620px; }
.shark-cinema-copy .shark-signature-logo { width: 176px; height: auto; margin-bottom: 30px; }
.shark-cinema h2 { margin: 0 0 16px; color: #f7f9ff; font-family: var(--font-display); font-size: clamp(30px,3.5vw,46px); line-height: 1.08; letter-spacing: -.035em; }
.shark-cinema h2 em { color: #8aa2ff; font-style: normal; }
.shark-cinema-copy p { color: #b0bdd4; max-width: 360px; font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.shark-cinema-copy a { display: inline-flex; align-items: center; gap: 13px; color: #b8c9ff; font-size: 13px; font-weight: 600; padding-bottom: 5px; border-bottom: 1px solid rgba(138,162,255,.4); }
.shark-cinema-stamp { position: absolute; right: 30px; bottom: 27px; display: inline-flex; gap: 9px; align-items: center; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,15,35,.5); backdrop-filter: blur(8px); border-radius: 8px; color: #e8efff; font: 10px var(--mono); }
.shark-cinema-stamp i { width: 6px; height: 6px; border-radius: 50%; background: #8aa2ff; }
.shark-process { display: flex; align-items: center; gap: 22px; margin: 30px 0; padding: 25px 30px; background: linear-gradient(115deg,rgba(91,124,255,.1),transparent),var(--card); border: 1px solid var(--line); border-radius: 16px; }
.shark-process>img { width: 46px; height: 46px; flex: none; }
.shark-process ol { display: flex; gap: 32px; justify-content: space-between; width: 100%; list-style: none; margin: 0; padding: 0; }
.shark-process li { display: flex; align-items: center; gap: 12px; }
.shark-process b { font: 11px var(--mono); color: var(--shark-highlight); }
.shark-process strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.shark-process span { color: var(--ink-secondary); font-size: 11px; }
.avatar.shark-avatar { background: transparent; border: 0; }
.avatar.shark-avatar img { width: 30px; height: 30px; }
.shark-mobile-links { display: none; }
/* Keep the three-column navigation inside narrow tablets, without clipping actions. */
@media(min-width:761px) and (max-width:960px){
  html:root .topbar-inner { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:0 20px; }
  html:root .topbar .brand-logo { width:144px; }
  html:root .topbar .nav-links { justify-self:center; min-width:0; }
  html:root .topbar .nav-link { padding:0 10px; font-size:13px; }
  html:root .topbar-right .btn { padding:0 10px; font-size:13px; }
  html:root .topbar .theme-toggle { width:32px; height:32px; }
}
@media(max-width:760px){
  html:root .topbar .brand-logo { width: 148px; }
  .hx-brandline { display: none; }
  .shark-signature { padding-top: 22px; }
  .shark-cinema { min-height: 390px; border-radius: 17px; }
  .shark-cinema-copy { padding: 30px 25px 70px; }
  .shark-cinema-copy .shark-signature-logo { margin-bottom: 24px; width: 155px; }
  .shark-cinema::before { background-position: 60% center; }
  .shark-cinema-stamp { right: auto; left: 25px; bottom: 22px; font-size: 9px; }
  .shark-process { padding: 20px; gap: 18px; align-items: flex-start; }
  .shark-process ol { flex-direction: column; gap: 17px; }
}
@media(max-width:650px){
  .shark-mobile-links { display: flex; gap: 18px; margin: 0 0 22px; border-bottom: 1px solid var(--line); padding-bottom: 13px; font-size: 11px; color: var(--muted); }
  .shark-mobile-links a:first-child { color: var(--accent); }
}