.jaview-opportunity { min-height:100vh; background:#000; color:#fff; }
.jaview-main-column { width:calc(100% - 4rem); margin-left:4rem; padding:1rem clamp(.75rem,1.6vw,1.5rem) 3rem; }
.jaview-content-column { width:min(1680px,100%); margin:0 auto; }
.jaview-view-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,23rem); grid-template-areas:"primary recommendations" "comparison recommendations" "related recommendations"; gap:.8rem; align-items:start; }
.jaview-view-primary { min-width:0; grid-area:primary; }
.jaview-feed { position:relative; overflow:hidden; border:1px solid var(--jv-border); border-radius:1rem; background:#000; touch-action:pan-y; }
.jaview-video-card { position:relative; display:none; width:100%; }
.jaview-video-card.is-active { display:block; }
.jaview-media { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.jaview-video,.jaview-media>img { display:block; width:100%; height:100%; border:0; object-fit:contain; background:#000; }
.jaview-video-embed { position:absolute; top:50%; left:50%; width:720px; height:480px; max-width:none; transform:translate(-50%,-50%); transform-origin:center center; }
.jaview-no-media { display:grid; width:100%; aspect-ratio:16/9; place-items:center; color:var(--jv-muted); }
.jaview-index-pill { position:absolute; z-index:5; top:.75rem; left:.75rem; padding:.28rem .55rem; border:1px solid var(--jv-border); border-radius:999px; background:rgba(15,15,17,.78); font-size:.68rem; }
.jaview-player-arrow,.jaview-enter-viewer { position:absolute; z-index:7; display:grid; place-items:center; border:1px solid var(--jv-border); border-radius:999px; color:#fff; background:rgba(20,20,22,.74); backdrop-filter:blur(18px); cursor:pointer; }
.jaview-player-arrow { top:50%; width:3rem; height:3rem; transform:translateY(-50%); }
.jaview-player-arrow-prev { left:.75rem; }
.jaview-player-arrow-next { right:.75rem; }
.jaview-enter-viewer { top:.75rem; right:.75rem; width:2.75rem; height:2.75rem; }
.jaview-fullscreen-navigation { display:none; }
.jaview-video-info { margin-top:.55rem; border:1px solid var(--jv-border); border-radius:1rem; background:var(--jv-surface); }
.jaview-title-row { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.78rem .85rem; border:0; color:#fff; text-align:left; background:transparent; cursor:pointer; }
.jaview-title-row>span:first-child { display:-webkit-box; overflow:hidden; font-size:.95rem; font-weight:700; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-title-row[aria-expanded="true"] [data-details-icon] { transform:rotate(180deg); }
.jaview-action-row { display:flex; align-items:center; justify-content:flex-end; gap:.45rem; padding:0 .75rem .75rem; }
.jaview-action-button { display:grid; width:2.65rem; height:2.65rem; flex:0 0 auto; place-items:center; padding:0; border:1px solid var(--jv-border); border-radius:.7rem; color:#fff; background:var(--jv-high); cursor:pointer; }
.jaview-action-button>span { font-size:1.35rem; }
.jaview-action-button[aria-pressed="true"] { color:#ff375f; }
.jaview-product-button { display:grid; width:5.75rem; height:2.65rem; flex:0 0 auto; place-items:center; border-radius:.7rem; color:#fff; background:var(--jv-blue); font-size:.75rem; font-weight:800; text-decoration:none; }
.jaview-details { padding:1rem; border-top:1px solid var(--jv-border); }
.jaview-details h1 { margin:0; font-size:1.2rem; line-height:1.45; }
.jaview-current-work { display:flex; flex-direction:column; gap:.3rem; margin:.75rem 0; color:var(--jv-muted); font-size:.76rem; line-height:1.5; }
.jaview-current-work strong { color:#fff; }
.jaview-condition-bar { display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 1rem; }
.jaview-tag { padding:.38rem .65rem; border:1px solid var(--jv-border); border-radius:999px; color:#fff; background:var(--jv-high); font-size:.7rem; text-decoration:none; }
.jaview-summary-content { color:rgba(255,255,255,.84); font-size:.82rem; line-height:1.8; }
.jaview-summary-content h2 { margin:1.4rem 0 .45rem; color:#fff; font-size:1.05rem; }
.jaview-work-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.2rem; }
.jaview-work-detail { display:grid; grid-template-columns:minmax(9rem,2fr) minmax(0,3fr); gap:.75rem; padding:.65rem; border:1px solid var(--jv-border); border-radius:.85rem; background:rgba(255,255,255,.04); }
.jaview-work-image { display:grid; aspect-ratio:16/9; place-items:center; overflow:hidden; border-radius:.6rem; color:var(--jv-muted); background:#202022; font-size:.65rem; text-decoration:none; }
.jaview-work-image img { width:100%; height:100%; object-fit:cover; }
.jaview-work-detail h2 { display:-webkit-box; overflow:hidden; margin:0; font-size:.78rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.jaview-work-detail h2 a { text-decoration:none; }
.jaview-work-detail p { margin:.3rem 0 0; color:var(--jv-muted); font-size:.67rem; line-height:1.45; }
.jaview-article-recommendations,.jaview-video-list { padding:.8rem; border:1px solid var(--jv-border); border-radius:1rem; background:var(--jv-surface); }
.jaview-article-recommendations { position:sticky; top:1rem; max-height:calc(100vh - 2rem); grid-area:recommendations; overflow:auto; }
.jaview-video-list { min-width:0; grid-area:comparison; }
.jaview-article-recommendations h2,.jaview-video-list h2 { margin:0 0 .55rem; font-size:.9rem; }
.jaview-recommendation-list { display:grid; gap:.65rem; }
.jaview-recommendation-card { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:.65rem; align-items:center; overflow:hidden; color:#fff; text-decoration:none; }
.jaview-recommendation-card img,.jaview-recommendation-placeholder { width:100%; aspect-ratio:16/9; border-radius:.65rem; object-fit:cover; }
.jaview-recommendation-placeholder { display:grid; place-items:center; color:var(--jv-muted); background:var(--jv-high); }
.jaview-recommendation-card strong { display:-webkit-box; overflow:hidden; font-size:.72rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-related-articles { display:flex; min-width:0; grid-area:related; gap:.45rem; overflow-x:auto; }
.jaview-related-articles a { flex:0 0 auto; padding:.55rem .75rem; border:1px solid var(--jv-border); border-radius:.75rem; color:#fff; background:var(--jv-high); font-size:.72rem; text-decoration:none; }
.jaview-video-list-grid { display:flex; gap:.6rem; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; }
.jaview-queue-item { display:grid; flex:0 0 clamp(10rem,18vw,13.5rem); grid-template-rows:auto minmax(2.15rem,auto); gap:.45rem; align-content:start; padding:.42rem; border:1px solid transparent; border-radius:.75rem; color:#fff; text-align:left; background:rgba(255,255,255,.035); cursor:pointer; scroll-snap-align:start; }
.jaview-queue-item:hover,.jaview-queue-item.is-active { border-color:var(--jv-blue); background:rgba(10,132,255,.12); }
.jaview-queue-item img,.jaview-queue-placeholder { width:100%; aspect-ratio:16/9; border-radius:.55rem; object-fit:cover; }
.jaview-queue-placeholder { display:grid; place-items:center; color:var(--jv-muted); background:var(--jv-high); }
.jaview-queue-item strong { display:-webkit-box; overflow:hidden; font-size:.69rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-feed.is-viewer-fullscreen { position:fixed; z-index:100; inset:0; width:100vw; height:100dvh; border:0; border-radius:0; background:#000; }
.jaview-feed.is-viewer-fullscreen .jaview-video-card,.jaview-feed.is-viewer-fullscreen .jaview-media { width:100vw; height:100dvh; aspect-ratio:auto; }
.jaview-feed.is-viewer-fullscreen video.jaview-video,.jaview-feed.is-viewer-fullscreen .jaview-media>img { width:100vw; height:100dvh; }
.jaview-feed.is-viewer-fullscreen .jaview-player-arrow,.jaview-feed.is-viewer-fullscreen .jaview-enter-viewer,.jaview-feed.is-viewer-fullscreen .jaview-index-pill { display:none; }
.jaview-viewer-open { overflow:hidden; }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation { position:absolute; z-index:110; inset:0; display:block; pointer-events:none; }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation button { position:absolute; left:0; display:flex; width:100%; height:16%; align-items:center; justify-content:center; border:0; color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.38),transparent); text-shadow:0 1px 8px #000; cursor:pointer; pointer-events:auto; }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation button:first-child { top:0; flex-direction:column; padding-top:env(safe-area-inset-top); }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation button:nth-child(2) { top:max(.75rem,env(safe-area-inset-top)); right:.75rem; left:auto; width:2.7rem; height:2.7rem; border-radius:999px; background:rgba(18,18,20,.72); }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation button:last-child { bottom:0; flex-direction:column; padding-bottom:env(safe-area-inset-bottom); background:linear-gradient(0deg,rgba(0,0,0,.4),transparent); }
.jaview-feed.is-viewer-fullscreen .jaview-fullscreen-navigation small { display:none; }
@media (max-width:1040px) {
  .jaview-view-layout { grid-template-columns:minmax(0,1fr) minmax(15rem,19rem); }
  .jaview-work-details { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .jaview-main-column { width:100%; margin-left:0; padding:.35rem .35rem 1.5rem; }
  .jaview-content-column { width:100%; }
  .jaview-view-layout { grid-template-columns:1fr; grid-template-areas:"primary" "comparison" "recommendations" "related"; gap:.55rem; }
  .jaview-feed { border-radius:.7rem; }
  .jaview-media { aspect-ratio:16/9; }
  .jaview-player-arrow { display:none; }
  .jaview-enter-viewer { inset:0; width:100%; height:100%; place-items:start end; padding:.55rem; border:0; border-radius:0; background:transparent; }
  .jaview-enter-viewer .material-symbols-outlined { display:grid; width:2.5rem; height:2.5rem; place-items:center; border:1px solid var(--jv-border); border-radius:999px; background:rgba(20,20,22,.74); }
  .jaview-video-info,.jaview-article-recommendations,.jaview-video-list { border-radius:.75rem; }
  .jaview-article-recommendations { position:static; max-height:none; }
  .jaview-queue-item { flex-basis:44vw; }
}
@media (max-width:520px) {
  .jaview-title-row { padding:.58rem .65rem; }
  .jaview-title-row>span:first-child { font-size:.82rem; }
  .jaview-action-row { gap:.32rem; padding:0 .55rem .48rem; }
  .jaview-action-button { width:2.05rem; height:2.05rem; border-radius:.55rem; }
  .jaview-action-button>span { font-size:1.1rem; }
  .jaview-product-button { width:4.55rem; height:2.05rem; border-radius:.55rem; font-size:.65rem; }
  .jaview-details { padding:.75rem; }
  .jaview-work-detail { grid-template-columns:minmax(7rem,2fr) minmax(0,3fr); }
  .jaview-recommendation-card { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
  .jaview-article-recommendations,.jaview-video-list { padding:.65rem; }
}