/* Design collection. Inherits Dev Fabric typography, shell and button tokens. */
.dfg-page { padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,88px); }
.dfg-page, .dfg-gallery, .dfg-frame, .dfg-heading, .dfg-thumbsection { min-width:0; }
.dfg-page [hidden], .dfg-dialog [hidden] { display:none!important; }
.dfg-intro { max-width:930px; margin-bottom:30px; }
.dfg-intro h1 { margin:16px 0 20px; max-width:900px; color:var(--text,#f6f9fc); font-size:clamp(2.25rem,5.1vw,4.5rem); line-height:1.05; letter-spacing:-.055em; text-wrap:balance; }
.dfg-lead { max-width:720px; font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.75; }
.dfg-total { margin-top:18px; font-size:.82rem; line-height:1.5; }
.dfg-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.dfg-filter { display:inline-flex; align-items:center; justify-content:center; gap:10px; max-width:100%; min-height:46px; padding:10px 15px; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:12px; background:rgba(255,255,255,.025); color:var(--text,#f6f9fc); font:inherit; font-size:.875rem; line-height:1.4; cursor:pointer; transition:background .18s,border-color .18s; }
.dfg-filter:hover { border-color:rgba(184,255,63,.5); }
.dfg-filter[aria-pressed="true"] { border-color:var(--accent,#b8ff3f); background:var(--accent-soft,rgba(184,255,63,.14)); color:var(--accent,#b8ff3f); }
.dfg-filter-count { display:inline-grid; place-items:center; min-width:24px; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.055); font-size:.75rem; font-variant-numeric:tabular-nums; }
.dfg-filter:disabled { opacity:.45; cursor:not-allowed; }
.dfg-titleline { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.dfg-category { margin:0 0 5px; font-size:.8rem; line-height:1.5; }
.dfg-heading h2 { margin:0; color:var(--text,#f6f9fc); font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.15; letter-spacing:-.04em; overflow-wrap:anywhere; }
.dfg-navigation { display:flex; flex:none; align-items:center; gap:10px; }
.dfg-page .dfg-arrow, .dfg-dialog .dfg-arrow { flex:none; width:46px; min-width:46px; min-height:46px; padding:9px; font-size:1.35rem; line-height:1; }
.dfg-page .dfg-arrow:disabled, .dfg-dialog .dfg-arrow:disabled { cursor:not-allowed; }
.dfg-counter { min-width:58px; color:var(--muted,#91a0b3); font-size:.85rem; font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; }
.dfg-frame { overflow:hidden; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:20px; background:var(--panel,#0c1724); box-shadow:0 24px 64px rgba(0,0,0,.2); }
.dfg-framebar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; min-height:54px; padding:5px 16px; border-bottom:1px solid var(--border,rgba(184,214,244,.13)); }
.dfg-badge { display:inline-flex; align-items:center; gap:8px; color:var(--muted,#91a0b3); font-size:.75rem; line-height:1.5; }
.dfg-badge > span { color:var(--accent,#b8ff3f); }
.dfg-expand { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--text,#f6f9fc); font:inherit; font-size:.8rem; cursor:pointer; }
.dfg-expand:hover { color:var(--accent,#b8ff3f); }
.dfg-expand:disabled { opacity:.45; cursor:not-allowed; }
.dfg-stage-wrap { position:relative; min-height:180px; }
.dfg-stage { display:block; width:100%; background:var(--bg-alt,#08121d); touch-action:pan-y pinch-zoom; cursor:zoom-in; }
.dfg-stage:focus-visible { outline-offset:-5px!important; }
.dfg-stage img { display:block; width:100%; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.dfg-stage[aria-busy="true"] img { opacity:.5; }
.dfg-loading { position:absolute; left:50%; top:50%; max-width:calc(100% - 32px); transform:translate(-50%,-50%); padding:12px 18px; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:12px; background:rgba(5,10,17,.92); color:var(--text,#f6f9fc); font-size:.9rem; text-align:center; pointer-events:none; }
.dfg-image-error { display:grid; justify-items:center; align-content:center; gap:18px; min-height:260px; padding:28px; text-align:center; }
.dfg-image-error p { max-width:460px; margin:0; line-height:1.7; }
.dfg-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
.dfg-actions p { max-width:520px; margin:0; font-size:.85rem; line-height:1.65; }
.dfg-page .dfg-cta, .dfg-dialog .dfg-cta { flex:none; max-width:100%; white-space:normal; }
.dfg-thumbsection { margin-top:28px; }
.dfg-rail-label { margin:0 0 12px; font-size:.8rem; line-height:1.5; }
.dfg-thumbs { display:flex; gap:10px; max-width:100%; margin:0; padding:4px 4px 12px; overflow-x:auto; overscroll-behavior-x:contain; list-style:none; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#435365 transparent; }
.dfg-thumbs li { flex:0 0 140px; min-width:0; padding:0; scroll-snap-align:start; }
.dfg-thumb { display:block; width:100%; padding:5px; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:11px; background:rgba(255,255,255,.025); color:var(--muted,#91a0b3); font:inherit; text-align:left; cursor:pointer; }
.dfg-thumb img { display:block; width:100%; height:86px; border-radius:6px; object-fit:contain; background:var(--bg-alt,#08121d); }
.dfg-thumb span { display:block; margin:8px 4px 4px; font-size:.75rem; line-height:1.4; overflow-wrap:anywhere; }
.dfg-thumb:hover { border-color:rgba(184,255,63,.5); }
.dfg-thumb[aria-pressed="true"] { border-color:var(--accent,#b8ff3f); background:var(--accent-soft,rgba(184,255,63,.14)); color:var(--text,#f6f9fc); }
.dfg-disclaimer { max-width:800px; margin-top:26px; font-size:.78rem; line-height:1.75; }
.dfg-unavailable { padding-block:28px; }
.dfg-unavailable h2 { font-size:1.6rem; line-height:1.3; }
.dfg-unavailable p { margin:14px 0 22px; max-width:600px; line-height:1.7; }
.dfg-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap!important; border:0!important; }
html.dfg-modal-open, html.dfg-modal-open body { overflow:hidden; }
.dfg-dialog { width:min(1520px,calc(100% - 32px)); height:calc(100vh - 32px); height:calc(100dvh - 32px); max-width:none; max-height:calc(100% - 32px); margin:auto; padding:0; overflow:hidden; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:18px; background:var(--bg,#050a11); color:var(--text,#f6f9fc); font:inherit; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.dfg-dialog[open] { display:flex; flex-direction:column; }
.dfg-dialog:not([open]) { display:none; }
.dfg-dialog::backdrop { background:rgba(0,4,10,.88); backdrop-filter:blur(7px); }
.dfg-dialog-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; flex:none; padding:14px 20px; }
.dfg-dialog-head h2 { margin:0; color:var(--text,#f6f9fc); font-size:1.25rem; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.dfg-dialog .dfg-close { font-size:1.8rem; }
.dfg-dialog-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; flex:none; padding:0 20px 10px; }
.dfg-zoom { display:flex; gap:4px; padding:3px; border:1px solid var(--border,rgba(184,214,244,.13)); border-radius:11px; }
.dfg-zoom button { min-width:44px; min-height:44px; padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--muted,#91a0b3); font:inherit; font-size:.8rem; cursor:pointer; }
.dfg-zoom button[aria-pressed="true"] { background:var(--accent-soft,rgba(184,255,63,.14)); color:var(--accent,#b8ff3f); }
.dfg-zoom button:disabled { opacity:.45; cursor:not-allowed; }
.dfg-dialog-hint { flex:none; margin:0; padding:0 20px 12px; font-size:.75rem; line-height:1.5; }
.dfg-dialog-viewport { flex:1; min-width:0; min-height:0; overflow:auto; background:#02060b; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; }
.dfg-dialog-viewport:focus-visible { outline-offset:-3px!important; }
.dfg-dialog-media { width:100%; height:100%; }
.dfg-dialog-media img { display:block; width:100%; max-width:none; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.dfg-dialog.is-zoom-2 .dfg-dialog-media { width:200%; height:auto; min-height:100%; }
.dfg-dialog.is-zoom-3 .dfg-dialog-media { width:300%; height:auto; min-height:100%; }
.dfg-dialog:is(.is-zoom-2,.is-zoom-3) .dfg-dialog-media img { height:auto; }
.dfg-dialog-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--border,rgba(184,214,244,.13)); }
@media (max-width:720px) {
  .dfg-intro { margin-bottom:24px; }
  .dfg-intro h1 { margin-top:14px; font-size:clamp(2rem,8.6vw,3rem); }
  .dfg-filters { gap:8px; margin-bottom:26px; }
  .dfg-filter { padding:10px 12px; font-size:.8rem; gap:8px; }
  .dfg-titleline { gap:12px; }
  .dfg-navigation { gap:6px; }
  .dfg-counter { min-width:45px; font-size:.8rem; }
  .dfg-page .dfg-arrow, .dfg-dialog .dfg-arrow { width:44px; min-width:44px; min-height:44px; }
  .dfg-frame { border-radius:14px; }
  .dfg-framebar { padding-inline:12px; }
  .dfg-badge, .dfg-expand { font-size:.7rem; }
  .dfg-actions { align-items:stretch; flex-direction:column; gap:14px; }
  .dfg-actions .dfg-cta { width:100%; }
  .dfg-thumbs li { flex-basis:116px; }
  .dfg-thumb img { height:74px; }
  .dfg-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100% - 16px); border-radius:14px; }
  .dfg-dialog-head { padding:12px; gap:12px; }
  .dfg-dialog-tools { padding:0 12px 10px; }
  .dfg-dialog-hint { padding:0 12px 10px; }
  .dfg-dialog-foot { padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
  .dfg-dialog-foot > .dfg-badge { display:none; }
  .dfg-dialog-foot .dfg-cta { width:100%; }
}
@media (max-width:380px) {
  .dfg-titleline { align-items:flex-start; flex-direction:column; }
  .dfg-titleline .dfg-navigation { align-self:flex-end; }
  .dfg-framebar { gap:0 8px; }
  .dfg-dialog-tools { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .dfg-page *, .dfg-dialog * { scroll-behavior:auto!important; transition:none!important; }
}