.resource-detail-preview{overflow:hidden}
.resource-detail-visual{position:absolute;inset:56px 20px 86px;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.resource-detail-visual>img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.resource-detail-visual>img[src*="logo-symbol.svg"]{width:240px;height:240px}
.resource-detail-visual>img.selected-svg-preview{width:100%;height:100%;background:#fff}
.detail-resource-frame{display:block;width:100%;height:100%;border:0;border-radius:12px;background:#fff}
.detail-loading{color:var(--muted);font-size:13px}
.detail-select{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.detail-select svg,.detail-unlocked svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.detail-unlocked{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#54c9bd;font-size:12px;font-weight:700}
.detail-action-row{align-items:center}
.resource-detail-modal{max-width:1600px;width:calc(100% - 36px)}
.resource-detail-layout{grid-template-columns:minmax(0,2fr) minmax(330px,1fr);height:auto}
.resource-detail-preview{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:20px}
.detail-preview-label{position:static;align-self:flex-start;order:-1}
.resource-detail-visual{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#eaf0ff}
.resource-detail-visual>img.selected-svg-preview{object-fit:contain}
.detail-preview-note{position:static;flex:none;padding:12px 14px}
.resource-detail-modal>.close{display:grid;place-items:center;padding:0;line-height:1;font-family:Arial,sans-serif}
@media(max-width:960px){.resource-detail-layout{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr)}}
@media(max-width:760px){.resource-detail-modal{width:calc(100% - 20px)}.resource-detail-layout{display:flex;flex-direction:column}.resource-detail-preview{padding:16px}.resource-detail-visual{width:100%;height:auto;aspect-ratio:16/9}.resource-detail-visual>img[src*="logo-symbol.svg"]{max-width:170px;max-height:170px}.detail-action-row{flex-wrap:wrap}.detail-unlocked{width:100%}}
.download-warning-overlay{z-index:45;background:#101321a8}
.download-warning-dialog{position:relative;width:min(440px,calc(100vw - 32px));padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 22px 70px #07091655}
.download-warning-dialog h2{margin:0;font-size:21px}
.download-warning-dialog p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.download-warning-heading{display:flex;align-items:center;gap:13px;margin:0 34px 16px 0}
.download-warning-legal{margin-top:10px!important;color:var(--text)!important;font-weight:600}
.download-warning-icon{display:block;width:42px;height:42px}
.download-warning-icon{flex:none}
.download-warning-icon svg{display:block;width:100%;height:100%}
.download-warning-close{position:absolute;top:17px;right:17px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.download-warning-actions{display:flex;gap:10px;margin-top:24px}
.download-warning-actions .button{flex:1;margin:0;text-align:center;white-space:nowrap}
.download-progress-dialog{width:min(448px,calc(100vw - 32px))}
.download-progress-dialog h2{margin-bottom:18px}
.download-progress-track{height:14px;overflow:hidden;border-radius:999px;background:var(--line)}
.download-progress-fill{width:0;height:100%;border-radius:inherit;background:repeating-linear-gradient(120deg,#775fee 0,#775fee 10px,#a18ff9 10px,#a18ff9 20px);background-size:40px 100%;animation:download-stripes .7s linear infinite;transition:width .18s ease}
.download-progress-track.is-indeterminate .download-progress-fill{width:38%;animation:download-indeterminate 1.3s ease-in-out infinite,download-stripes .7s linear infinite}
.download-progress-message{margin-top:14px!important;text-align:center}
.download-progress-percent{min-height:20px;margin-top:3px!important;text-align:center;font-size:12px!important;letter-spacing:.12em}
@keyframes download-stripes{to{background-position:40px 0}}
@keyframes download-indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
@media(prefers-reduced-motion:reduce){.download-progress-fill,.download-progress-track.is-indeterminate .download-progress-fill{animation:none}}
@media(max-width:430px){.download-warning-dialog{padding:24px}.download-warning-actions{flex-direction:column}}

.resource-detail-visual>.detail-resource-frame{position:absolute;left:50%;top:50%;max-width:none;max-height:none;flex:none;transform-origin:center center;border-radius:0}

.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.preview-toolbar .detail-preview-label{order:0;align-self:center}
.preview-fullscreen-button,.preview-fullscreen-exit{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;color:#6095f6;background:var(--panel);font:inherit;font-size:12px;cursor:pointer;min-height:36px}
.preview-fullscreen-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.lesson-fullscreen-open{overflow:hidden}
.lesson-fullscreen-open .resource-detail-modal,.lesson-fullscreen-open .resource-detail-layout{overflow:visible;transform:none;contain:none}
.lesson-fullscreen-stage>.preview-toolbar,.lesson-fullscreen-stage>.detail-preview-note{display:none}
.lesson-fullscreen-overlay{position:fixed;inset:0;z-index:10000;background:#090d1c;color:#fff;overflow:hidden}
.lesson-fullscreen-stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:stretch;padding:8px;gap:6px;box-sizing:border-box;background:#090d1c;border:0;border-radius:0}
.preview-fullscreen-exit{align-self:flex-end;flex:none;min-height:40px;background:#1c2234;border-color:#47516a;color:#fff;z-index:2}
.lesson-fullscreen-stage>.resource-detail-visual{position:relative;inset:auto;flex:1;align-self:stretch;width:100%;height:auto;min-height:0;aspect-ratio:auto;margin:0;background:#090d1c;border-radius:0}
@media(max-width:760px){.preview-fullscreen-button{min-height:40px;font-size:11px}}
@media(orientation:portrait) and (max-width:900px){
 .lesson-fullscreen-stage{inset:auto;left:50%;top:50%;width:100dvh;height:100dvw;transform:translate(-50%,-50%) rotate(90deg)}
}

/* Keep the toolbar above the visual and isolate fullscreen from modal sizing. */
.resource-detail-preview>.preview-toolbar{order:-2;position:relative;z-index:2}
.lesson-fullscreen-open .resource-detail-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;filter:none;perspective:none;overflow:visible}
.lesson-fullscreen-open .resource-detail-modal,.lesson-fullscreen-open .resource-detail-layout{max-height:none;filter:none;perspective:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.resource-detail-preview.lesson-fullscreen-stage{position:fixed;inset:auto;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;display:block;overflow:hidden;z-index:10000}
.lesson-fullscreen-stage>.resource-detail-visual{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;align-self:auto}
.lesson-fullscreen-stage>.preview-fullscreen-exit{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:3;min-height:40px;background:#1c2234dc}