/* OVERLAY COMPOSER MODAL HOTFIX — 2026-03-07 | FILE: assets/css/modules/overlay-composer.css */
#overlayComposerModal,
#overlayComposerModal * { box-sizing:border-box; }
#overlayComposerModal {
  position:fixed !important; inset:0 !important; z-index:2147483000 !important;
  display:none; margin:0 !important; padding:0 !important;
  background:rgba(5,8,14,.92) !important; backdrop-filter:blur(8px) !important;
  overflow:hidden !important; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}
#overlayComposerModal.show,
#overlayComposerModal.active,
#overlayComposerModal[aria-hidden="false"] { display:flex !important; align-items:stretch !important; justify-content:stretch !important; }
#overlayComposerModal[aria-hidden="true"] { display:none !important; }
body.oc-composer-open { overflow:hidden !important; }
#overlayComposerModal .ocShell {
  position:relative !important; display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
  min-width:0 !important; min-height:0 !important; margin:14px !important; border-radius:18px !important; overflow:hidden !important;
  background:radial-gradient(circle at 20% 8%, rgba(33,56,96,.22), transparent 28%), linear-gradient(180deg, #0c121a, #070b11) !important;
  border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 30px 90px rgba(0,0,0,.48) !important;
}
#overlayComposerModal .chromeCard { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.24) !important; }
#overlayComposerModal .ocHeader { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:14px 18px !important; border-bottom:1px solid rgba(255,255,255,.07) !important; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important; flex:0 0 auto !important; flex-wrap:wrap !important; }
#overlayComposerModal .ocEyebrow{ font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:#9cb2d1 !important; opacity:.82 !important; }
#overlayComposerModal .ocTitleRow{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; font-size:20px !important; color:#f1f5fb !important; }
#overlayComposerModal .ocTitleRow b{ font-weight:800 !important; }
#overlayComposerModal .ocSub{ font-size:12px !important; color:#a8b4c5 !important; }
#overlayComposerModal .ocHeaderActions{ display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
#overlayComposerModal #ocSceneName{ width:260px !important; max-width:42vw !important; min-height:38px !important; padding:9px 10px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,.12) !important; background:rgba(10,14,20,.92) !important; color:#fff !important; }
#overlayComposerModal button,
#overlayComposerModal .miniBtn{ appearance:none !important; background:linear-gradient(180deg, #283241, #121823) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff !important; border-radius:999px !important; padding:8px 14px !important; font-weight:800 !important; font-size:12px !important; letter-spacing:.04em !important; line-height:1.15 !important; cursor:pointer !important; white-space:nowrap !important; }
#overlayComposerModal .miniBtn.ok{ background:linear-gradient(180deg, #0f7543, #0a4326) !important; }
#overlayComposerModal .miniBtn.danger{ background:linear-gradient(180deg, #6a2520, #381411) !important; }
#overlayComposerModal .ocToolbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:10px 18px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important; flex:0 0 auto !important; flex-wrap:wrap !important; }
#overlayComposerModal .ocToolbarGroup{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
#overlayComposerModal .ocToolbarRight{ margin-left:auto !important; }
#overlayComposerModal .ocTemplateBtn{ min-width:132px !important; min-height:52px !important; padding:9px 12px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,.14) !important; background:linear-gradient(180deg, #1a2230, #0f151e) !important; color:#fff !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; cursor:pointer !important; }
#overlayComposerModal .ocTemplateBtn span{ display:block !important; font-weight:800 !important; line-height:1.1 !important; }
#overlayComposerModal .ocTemplateBtn small{ display:block !important; margin-top:4px !important; font-size:11px !important; opacity:.72 !important; }
#overlayComposerModal .ocToggle{ display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 10px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.1) !important; background:rgba(255,255,255,.03) !important; color:#d7e2f0 !important; font-size:12px !important; }
#overlayComposerModal .ocBody{ display:grid !important; grid-template-columns:260px minmax(0,1fr) 320px !important; gap:0 !important; flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; }
#overlayComposerModal .ocPanel{ padding:14px !important; overflow:auto !important; min-width:0 !important; min-height:0 !important; }
#overlayComposerModal .ocLeft{ border-right:1px solid rgba(255,255,255,.06) !important; }
#overlayComposerModal .ocRight{ border-left:1px solid rgba(255,255,255,.06) !important; }
#overlayComposerModal .ocCenter{ display:grid !important; grid-template-rows:auto minmax(0,1fr) 220px !important; gap:12px !important; padding:14px !important; min-width:0 !important; min-height:0 !important; }
#overlayComposerModal .ocPanelTitle{ margin:0 0 10px 0 !important; font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:#a6b0bf !important; }
#overlayComposerModal .ocSceneList, #overlayComposerModal .ocLayerList{ display:grid !important; gap:8px !important; }
#overlayComposerModal .ocSceneItem, #overlayComposerModal .ocLayerItem{ padding:11px 12px !important; border-radius:12px !important; border:1px solid rgba(255,255,255,.08) !important; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important; cursor:pointer !important; }
#overlayComposerModal .ocSceneItem.active, #overlayComposerModal .ocLayerItem.active{ border-color:rgba(255,181,0,.72) !important; box-shadow:0 0 0 1px rgba(255,181,0,.18) inset !important; }
#overlayComposerModal .ocSceneMeta, #overlayComposerModal .ocLayerMeta{ font-size:12px !important; color:#a6b0bf !important; margin-top:4px !important; }
#overlayComposerModal .ocCanvasTools{ display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
#overlayComposerModal .ocStageWrap{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:0 !important; overflow:hidden !important; }
#overlayComposerModal .ocStage{ position:relative !important; width:min(100%, 1120px) !important; aspect-ratio:16/9 !important; overflow:hidden !important; background:#02050b !important; border-radius:14px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; }
#overlayComposerModal .ocStageGrid, #overlayComposerModal .ocSafeArea{ position:absolute !important; inset:0 !important; pointer-events:none !important; }
#overlayComposerModal .ocStage.show-grid .ocStageGrid{ background-image:linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px) !important; background-size:5% 5% !important; }
#overlayComposerModal .ocStage.show-safe .ocSafeArea::before, #overlayComposerModal .ocStage.show-safe .ocSafeArea::after{ content:"" !important; position:absolute !important; border:1px dashed rgba(255,191,0,.45) !important; }
#overlayComposerModal .ocStage.show-safe .ocSafeArea::before{ inset:5% !important; }
#overlayComposerModal .ocStage.show-safe .ocSafeArea::after{ inset:10% !important; }
#overlayComposerModal .ocEl{ position:absolute !important; transform-origin:center center !important; user-select:none !important; touch-action:none !important; }
#overlayComposerModal .ocEl.selected{ outline:2px solid rgba(255,191,0,.9) !important; outline-offset:2px !important; }
#overlayComposerModal .ocElText{ font-weight:800 !important; color:#fff !important; text-shadow:0 3px 14px rgba(0,0,0,.5) !important; }
#overlayComposerModal .ocElPanel{ border:1px solid rgba(255,255,255,.08) !important; }
#overlayComposerModal .ocElImage img{ width:100% !important; height:100% !important; display:block !important; object-fit:contain !important; }
#overlayComposerModal .ocTimeline{ padding:12px !important; min-height:0 !important; overflow:auto !important; }
#overlayComposerModal .ocTimelineHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin-bottom:10px !important; }
#overlayComposerModal .ocTimelineLegend{ font-size:12px !important; color:#a6b0bf !important; }
#overlayComposerModal .ocTimelineRows{ display:grid !important; gap:10px !important; max-height:145px !important; overflow:auto !important; }
#overlayComposerModal .ocTimelineRow{ display:grid !important; grid-template-columns:130px 1fr !important; gap:10px !important; align-items:center !important; }
#overlayComposerModal .ocTimelineName{ font-size:12px !important; color:#dce6f4 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#overlayComposerModal .ocTimelineBars{ position:relative !important; height:38px !important; border-radius:999px !important; background:rgba(255,255,255,.04) !important; overflow:hidden !important; }
#overlayComposerModal .ocBar{ position:absolute !important; top:7px !important; bottom:7px !important; border-radius:999px !important; }
#overlayComposerModal .ocBar.in{ background:linear-gradient(90deg,#138bff,#1ec8ff) !important; }
#overlayComposerModal .ocBar.loop{ background:linear-gradient(90deg,#17b36c,#2ee495) !important; }
#overlayComposerModal .ocBar.out{ background:linear-gradient(90deg,#ff8c38,#ffb13b) !important; }
#overlayComposerModal .ocInspector{ display:grid !important; gap:10px !important; }
#overlayComposerModal .ocField{ display:grid !important; gap:6px !important; }
#overlayComposerModal .ocField label{ font-size:12px !important; color:#a6b0bf !important; }
#overlayComposerModal .ocField input, #overlayComposerModal .ocField select, #overlayComposerModal .ocField textarea{ width:100% !important; max-width:100% !important; min-height:36px !important; padding:8px 10px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,.1) !important; background:#0d131b !important; color:#fff !important; }
#overlayComposerModal .ocGrid2{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; }
.ocComposerTile{ min-height:146px !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; border:1px dashed rgba(255,255,255,.2) !important; background:linear-gradient(180deg,#101720,#070c12) !important; }
.ocComposerTile:hover{ border-color:rgba(255,181,0,.8) !important; }
.ocLauncherArt{ height:88px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(90deg, rgba(255,179,0,.22), transparent 30%), radial-gradient(circle at 30% 45%, rgba(255,255,255,.12), transparent 24%), linear-gradient(180deg,#121a25,#060a10) !important; }
.ocLauncherLabel{ padding:10px 12px !important; }
.ocLauncherTitle{ font-size:26px !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#cfd8e6 !important; opacity:.85 !important; }
.ocLauncherSub{ font-weight:700 !important; color:#fff !important; margin-top:6px !important; }
@media (max-width:1200px){ #overlayComposerModal .ocBody{ grid-template-columns:220px minmax(0,1fr) 280px !important; } }
@media (max-width:980px){ #overlayComposerModal .ocShell{ margin:8px !important; } #overlayComposerModal .ocBody{ grid-template-columns:1fr !important; grid-template-rows:220px minmax(0,1fr) 280px !important; } #overlayComposerModal .ocLeft, #overlayComposerModal .ocRight{ border:none !important; border-top:1px solid rgba(255,255,255,.06) !important; } }
