.course-viewer { background: #bcd2d9; }
#course-world { display:block; width:100vw; height:100dvh; touch-action:none; }
.viewer-top { position:fixed; inset: max(20px,env(safe-area-inset-top)) 24px auto; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.viewer-brand { display:flex; align-items:center; gap:14px; background:#fffffff0; padding:12px 16px; border-radius:7px; text-decoration:none; }
.viewer-brand img { width:205px; height:auto; }
.viewer-back { min-height:44px; display:flex; align-items:center; color:var(--ink); background:#fffffff0; border-radius:6px; padding:10px 17px; text-decoration:none; font-weight:600; font-size:13px; }
.viewer-caption { position:fixed; top:120px; left:32px; padding:14px 18px; background:#fffffff0; border-left:3px solid var(--brand-green); border-radius:5px; pointer-events:none; }
.viewer-caption>span { color:var(--action); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.viewer-caption h1 { font:800 25px 'Manrope',sans-serif; margin:6px 0; }
.viewer-caption p { font-size:12px; margin:0; }
.viewer-controls { position:fixed; bottom:calc(58px + var(--safe-bottom)); right:24px; width:340px; padding:16px; background:#ffffffed; border:1px solid #d8e3d1; border-radius:9px; box-shadow:0 8px 35px #123b2822; }
.viewer-selects { display:grid; grid-template-columns:1fr 90px; gap:12px; }
.viewer-views { display:flex; gap:6px; margin-top:14px; }
.viewer-views button { flex:1; min-height:44px; padding:7px 4px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font-weight:600; font-size:12px; }
.viewer-views button[aria-pressed=true] { border-color:var(--brand-green); background:#eaf3e3; color:var(--action); }
.viewer-controls>p { display:flex; align-items:center; justify-content:space-between; gap:4px; margin:10px 0 0; font-size:10px; color:var(--muted); }
.viewer-controls>p button { min-width:44px; min-height:44px; border:0; border-radius:4px; background:#eef3e9; color:var(--action); font-size:22px; }
#viewer-error { position:fixed; inset:40% 20px auto; padding:24px; background:#fff; color:var(--ink); text-align:center; }
@media(max-width:700px) {
 .viewer-top { inset: max(12px,env(safe-area-inset-top)) 12px auto; gap:8px; }
 .viewer-brand { padding:8px 10px; gap:9px; }
 .viewer-brand img { width:146px; }
 .viewer-brand .brand-open { font-size:15px; padding-left:9px; }
 .viewer-back { font-size:11px; padding:8px; }
 .viewer-caption { top:83px; left:12px; padding:10px 13px; }
 .viewer-caption h1 { font-size:21px; }
 .viewer-controls { right:12px; left:12px; width:auto; padding:12px; }
 .viewer-controls>p { margin-top:5px; }
 .viewer-views { margin-top:9px; }
}
@media(max-width:350px) { .viewer-brand img { width:122px; } .viewer-brand .brand-open { font-size:13px; } }
@media(max-height:500px) and (min-width:500px) {
 .viewer-caption { top:86px; }
 .viewer-controls { width:285px; bottom:48px; padding:10px; }
 .viewer-controls>p { margin:3px 0 0; }
 .viewer-top { top:10px; }
}