/* ============================================================
   OCULA AR Try-On — front-end studio + admin console styles.
   Scoped under .ocula-root (front) and .ocula-admin-wrap (admin)
   so a hostile theme cannot bleed in and we cannot bleed out.
   ============================================================ */

.ocula-root {
  --bg:#0a0c10; --bg2:#0e1117; --surface:#14181f; --surface2:#1a1f28;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --ink:#eef1f4; --ink2:#aeb6c0; --ink3:#6b7480;
  --accent:#2f9e63; --accent2:#3fb97a; --accentInk:#06140c;
  --gold:#d7ab63; --steel:#8fb0d4; --danger:#e26d6d;
  --glass:rgba(20,24,31,.55); --glass2:rgba(26,31,40,.72);
  --halo:rgba(47,158,99,.22);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:block;
  margin:1.25rem 0;
}
.ocula-root[data-ocula-theme="light"] {
  --bg:#e9eaec; --bg2:#dfe1e4; --surface:#f4f5f6; --surface2:#fff;
  --line:rgba(12,16,22,.1); --line2:rgba(12,16,22,.18);
  --ink:#11141a; --ink2:#424a55; --ink3:#717a86;
  --accent:#1f7a48; --accent2:#258a52; --accentInk:#f4fff7;
  --gold:#9c6f24; --steel:#3f6088; --danger:#b23a3a;
  --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.82);
  --halo:rgba(31,122,72,.18);
  --shadow:0 40px 90px -40px rgba(20,30,45,.35);
}
.ocula-root *, .ocula-root *::before, .ocula-root *::after { box-sizing:border-box; }
.ocula-root button { font:inherit; color:inherit; cursor:pointer; }
.ocula-root .oc-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---------- layout ---------- */
.ocula-studio { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:960px){ .ocula-studio { grid-template-columns:1fr 380px; } }

.ocula-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ocula-head h2 { font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0; letter-spacing:-.02em; font-weight:800; }
.ocula-head .oc-k { font-family:ui-monospace,monospace; text-transform:uppercase; letter-spacing:.28em; font-size:.66rem; color:var(--ink3); display:flex; gap:8px; align-items:center; }
.ocula-head .oc-k::before { content:""; width:22px; height:1px; background:var(--accent); }

.ocula-viewport { position:relative; width:100%; aspect-ratio:4/5; border-radius:24px; overflow:hidden; border:1px solid var(--line2); background:var(--bg2); box-shadow:var(--shadow); }
@media (min-width:640px){ .ocula-viewport{ aspect-ratio:5/4; } }
@media (min-width:960px){ .ocula-viewport{ aspect-ratio:auto; height:74vh; } }
.ocula-viewport:fullscreen { height:100vh; border-radius:0; }
.ocula-mirror { position:absolute; inset:0; transform:scaleX(-1); }
.ocula-mirror video, .ocula-mirror canvas { display:block; width:100%; height:100%; object-fit:cover; }
.ocula-mirror canvas { position:absolute; inset:0; pointer-events:none; }

/* ---------- overlays ---------- */
.oc-top { position:absolute; inset:0 0 auto 0; display:flex; justify-content:space-between; align-items:flex-start; padding:12px; pointer-events:none; }
.oc-top > * { pointer-events:auto; }
.oc-product-chip { display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:14px; background:var(--glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--line); }
.oc-product-chip b { font-weight:700; font-size:.95rem; }
.oc-product-chip small { color:var(--ink2); font-size:.72rem; }
.oc-product-chip .oc-mono { color:var(--ink3); }
.oc-round { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--line); color:var(--ink); transition:transform .2s; }
.oc-round:hover { transform:translateY(-2px); }
.oc-round.is-fav { color:var(--danger); }
.oc-vtag { position:absolute; left:0; top:50%; transform:translateY(-50%); }
.oc-vtag span { display:block; transform:rotate(-90deg) translateX(8px); transform-origin:left; white-space:nowrap; background:var(--ink); color:var(--bg); padding:3px 8px; border-radius:6px; font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.3em; text-transform:uppercase; }
.oc-hud { position:absolute; left:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.oc-hud-r { position:absolute; right:12px; bottom:12px; }
.oc-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 58%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.oc-chip .l { font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); }
.oc-chip .v { font-family:ui-monospace,monospace; font-size:11px; color:var(--ink); font-variant-numeric:tabular-nums; }
.oc-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:oc-blink 1.4s ease-in-out infinite; }
@keyframes oc-blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* reticle + load bar */
.oc-reticle { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.oc-reticle .ring { position:relative; width:170px; height:170px; display:grid; place-items:center; }
.oc-reticle .ring::before, .oc-reticle .ring::after { content:""; position:absolute; inset:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); }
.oc-reticle .ring::after { animation:oc-pulse 2s ease-out infinite; }
@keyframes oc-pulse { 0%{transform:scale(.8);opacity:.8} 100%{transform:scale(2.1);opacity:0} }
.oc-loadbar { position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,transparent,var(--accent),var(--gold),transparent); background-size:200% 100%; animation:oc-shimmer 1.4s linear infinite; }
@keyframes oc-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* start / error overlay */
.oc-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:18px; background:color-mix(in srgb,var(--bg) 60%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.oc-overlay .card { width:100%; max-width:380px; padding:22px; border-radius:22px; text-align:center; background:var(--glass2); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px); border:1px solid var(--line2); box-shadow:var(--shadow); }
.oc-overlay h3 { margin:.2em 0 0; font-size:1.2rem; font-weight:700; }
.oc-overlay p { color:var(--ink2); font-size:.85rem; margin:.6em 0 0; }
.oc-feats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:14px 0 0; text-align:left; }
.oc-feats li { list-style:none; display:flex; gap:6px; align-items:center; font-size:.72rem; color:var(--ink2); background:var(--surface); padding:7px 9px; border-radius:10px; }
.oc-feats li::before { content:"✓"; color:var(--accent2); font-weight:700; }
.oc-overlay .row { display:flex; gap:8px; margin-top:14px; }
.oc-privacy { margin-top:10px; font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); }

/* teaser */
.oc-teaser { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(120% 90% at 50% 10%,color-mix(in srgb,var(--surface2) 80%,transparent),var(--bg)); }
.oc-teaser .dots { position:absolute; inset:0; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:22px 22px; opacity:.5; }
.oc-teaser svg.mesh { position:relative; height:78%; width:auto; animation:oc-float 7s ease-in-out infinite; }
@keyframes oc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.oc-teaser .scan { position:absolute; left:18%; right:18%; top:14%; height:72%; overflow:hidden; pointer-events:none; }
.oc-teaser .scan i { display:block; height:40px; width:100%; background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent); filter:blur(2px); animation:oc-scan 3.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes oc-scan { 0%{transform:translateY(-120%);opacity:0} 20%,80%{opacity:1} 100%{transform:translateY(420%);opacity:0} }

/* filmstrip */
.oc-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.oc-strip a { flex:0 0 auto; width:64px; height:80px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.oc-strip img { width:100%; height:100%; object-fit:cover; }

/* ---------- deck ---------- */
.oc-deck { display:flex; flex-direction:column; gap:18px; padding:18px; border-radius:24px; background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--line); max-height:74vh; overflow:auto; }
@media (max-width:959px){ .oc-deck{ max-height:none; } }
.oc-deck .oc-deck-head { display:flex; align-items:center; justify-content:space-between; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3); }
.oc-deck .oc-deck-head .live { display:flex; align-items:center; gap:6px; }
.oc-deck .oc-deck-head .live i { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:oc-blink 1.4s ease-in-out infinite; }
.oc-id .name { font-size:1.4rem; font-weight:700; letter-spacing:-.01em; line-height:1.1; }
.oc-id .tag { color:var(--ink2); font-size:.82rem; margin-top:4px; }
.oc-id .price { margin-top:8px; display:flex; align-items:baseline; gap:8px; }
.oc-id .price b { font-size:1.15rem; font-weight:700; }
.oc-id .price s { color:var(--ink3); font-size:.82rem; }
.oc-id .stock { font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); text-align:right; }
.oc-id .stock .n { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:.82rem; color:var(--ink2); letter-spacing:0; text-transform:none; }
.oc-id .stock .n i { width:6px; height:6px; border-radius:50%; background:var(--accent2); }

.oc-label { font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; display:flex; justify-content:space-between; }
.oc-label span:last-child { color:var(--ink2); letter-spacing:0; text-transform:none; }

.oc-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.oc-swatch { position:relative; width:38px; height:38px; border-radius:50%; border:0; padding:0; box-shadow:inset 0 0 0 1px var(--line2); transition:transform .15s; }
.oc-swatch:hover { transform:scale(1.06); }
.oc-swatch.is-on { box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent); }
.oc-swatch.is-on svg { position:absolute; inset:0; margin:auto; }

.oc-pills { display:flex; flex-wrap:wrap; gap:8px; }
.oc-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink2); font-size:.82rem; transition:all .2s; }
.oc-pill:hover { border-color:var(--line2); }
.oc-pill.is-on { border-color:var(--ink); background:var(--surface2); color:var(--ink); }
.oc-pill .sw { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line2); position:relative; display:grid; place-items:center; }
.oc-pill .sw.clear { background:transparent; }
.oc-pill .sw.clear i { width:16px; height:1px; background:var(--ink3); transform:rotate(45deg); }

.oc-rail { display:flex; gap:8px; overflow-x:auto; padding:2px; margin:0 -2px; }
.oc-rail button { flex:0 0 auto; width:108px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border-radius:14px; border:1px solid var(--line); background:var(--surface); transition:all .2s; }
.oc-rail button:hover { border-color:var(--line2); }
.oc-rail button.is-on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.oc-rail .frame { height:46px; width:100%; display:grid; place-items:center; }
.oc-rail .frame svg { width:100%; height:38px; }
.oc-rail .n { font-size:.68rem; color:var(--ink2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.oc-adjust { display:grid; gap:10px; padding:12px; border-radius:14px; background:var(--surface); }
.oc-adjust .segrow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.oc-seg { display:flex; gap:4px; background:var(--surface2); padding:3px; border-radius:999px; }
.oc-seg button { padding:4px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); border:0; background:transparent; }
.oc-seg button.is-on { background:var(--ink); color:var(--bg); }
.oc-slider { display:block; }
.oc-slider .t { display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink2); margin-bottom:4px; }
.oc-slider .t .v { font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.oc-range { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:var(--line2); outline:none; }
.oc-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--ink); border:3px solid var(--accent); cursor:pointer; }
.oc-range::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--ink); border:3px solid var(--accent); cursor:pointer; }

.oc-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.oc-act { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink2); font-size:10px; text-transform:uppercase; letter-spacing:.04em; transition:all .2s; }
.oc-act:hover { transform:translateY(-2px); color:var(--ink); }
.oc-act.accent { background:var(--ink); color:var(--bg); border-color:transparent; }
.oc-act.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--ink); }

.oc-bag { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; border-radius:16px; background:var(--accent); color:var(--accentInk); font-weight:600; border:0; box-shadow:0 16px 40px -16px var(--halo); transition:transform .2s; }
.oc-bag:hover { transform:translateY(-2px); }
.oc-fine { text-align:center; font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); }

/* buttons */
.oc-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1; padding:12px 16px; border-radius:999px; background:var(--accent); color:var(--accentInk); font-weight:600; border:0; transition:transform .2s; }
.oc-btn-primary:hover { transform:translateY(-2px); }
.oc-btn-ghost { padding:12px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink2); }

/* toast */
.oc-toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:2147483000; padding:12px 18px; border-radius:999px; background:var(--glass2); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--line2); box-shadow:var(--shadow); font-size:.85rem; display:flex; align-items:center; gap:8px; }
.oc-toast i { color:var(--accent2); }

/* icons */
.oc-ico { width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   Admin console
   ============================================================ */
.ocula-admin-wrap { --bg:#0e1117; --surface:#161b22; --surface2:#1d242d; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --ink:#eef1f4; --ink2:#aeb6c0; --ink3:#6b7480; --accent:#2f9e63; --accent2:#3fb97a; --gold:#d7ab63; color:var(--ink); }
.ocula-admin-wrap h1 { color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.ocula-admin-wrap .ocula-sub { color:var(--ink2); margin:.2em 0 0; }
.ocula-dash-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin:14px 0; }
.ocula-dash-actions { display:flex; gap:8px; }
.ocula-admin-wrap .ocula-btn.button { background:var(--surface2); color:var(--ink); border:1px solid var(--line2); border-radius:999px; padding:6px 14px; height:auto; line-height:1.4; }
.ocula-admin-wrap .ocula-btn.button-primary { background:var(--accent); color:#06140c; border-color:transparent; }
.ocula-admin-wrap .ocula-btn:hover { transform:translateY(-1px); }
.ocula-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:700px){ .ocula-kpis { grid-template-columns:repeat(4,1fr); } }
.ocula-kpi { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; }
.ocula-kpi-v { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.ocula-kpi-l { margin-top:6px; font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); }
.ocula-grid { display:grid; gap:12px; margin-top:12px; grid-template-columns:1fr; }
@media (min-width:860px){ .ocula-grid { grid-template-columns:1.3fr 1fr; } }
.ocula-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; margin-top:12px; }
.ocula-card h2 { margin:0 0 12px; font-size:1.05rem; font-weight:700; color:var(--ink); }
.ocula-empty { color:var(--ink3); }
.ocula-bars, .ocula-funnel { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ocula-bars li, .ocula-funnel li { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; font-size:.82rem; color:var(--ink2); }
.ocula-bars-id { font-family:ui-monospace,monospace; font-size:.72rem; color:var(--ink3); }
.ocula-bars-track, .ocula-funnel-track { grid-column:1 / -1; height:8px; border-radius:999px; background:var(--line2); overflow:hidden; }
.ocula-bars-track span, .ocula-funnel-track span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--gold))); transition:width .7s ease; }
.ocula-funnel li { grid-template-columns:90px 1fr 40px; }
.ocula-funnel li .ocula-funnel-track { grid-column:auto; }
.ocula-bars-n { font-family:ui-monospace,monospace; color:var(--ink2); }
.ocula-note { color:var(--ink3); font-size:.78rem; margin-top:10px; }
.ocula-code { background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-family:ui-monospace,monospace; font-size:.8rem; color:var(--accent2); overflow:auto; }

/* admin form controls */
.ocula-admin-wrap .form-table th { color:var(--ink2); }
.ocula-admin-wrap .ocula-card { background:var(--surface); }
.ocula-admin-wrap input.regular-text, .ocula-admin-wrap .ocula-select { background:var(--surface2); border:1px solid var(--line2); color:var(--ink); border-radius:8px; padding:6px 10px; }
.ocula-admin-wrap .ocula-select { min-width:180px; }
.ocula-switch { position:relative; display:inline-block; width:42px; height:22px; }
.ocula-switch input { opacity:0; width:0; height:0; }
.ocula-switch span { position:absolute; inset:0; background:var(--line2); border-radius:999px; transition:.25s; cursor:pointer; }
.ocula-switch span::before { content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; }
.ocula-switch input:checked + span { background:var(--accent); }
.ocula-switch input:checked + span::before { transform:translateX(20px); }
.ocula-range { width:200px; vertical-align:middle; }
.ocula-range-out { margin-left:10px; font-family:ui-monospace,monospace; color:var(--ink2); }
.ocula-admin-wrap .button-primary { background:var(--accent); border-color:transparent; }

/* ---------- launcher button (server-rendered; visible even without JS) ---------- */
.ocula-launch-wrap { margin: 1.25rem 0; }
.ocula-launch {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent, #2f9e63); color: var(--accent-ink, #06140c);
  font: inherit; text-align: left; box-shadow: 0 16px 40px -16px var(--halo, rgba(47,158,99,.45));
  transition: transform .2s ease, box-shadow .2s ease;
}
.ocula-launch:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -16px var(--halo, rgba(47,158,99,.55)); }
.ocula-launch:active { transform: translateY(0); }
.ocula-launch-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent-ink, #06140c) 14%, transparent);
}
.ocula-launch-ico svg { width: 20px; height: 20px; }
.ocula-launch-txt { display: block; font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: -.01em; }
.ocula-launch-sub { display: block; margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.ocula-launch::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  animation: ocula-launch-ring 2.6s ease-out infinite;
}
@keyframes ocula-launch-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #2f9e63) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 16px transparent; }
}

/* ---------- fullscreen lightbox ---------- */
.ocula-overlay { position: fixed; inset: 0; z-index: 2147483000; }
.ocula-overlay[hidden] { display: none !important; }
.ocula-overlay[open] { display: block; }
.ocula-overlay-back { position: absolute; inset: 0; background: rgba(6,8,12,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ocula-fade .25s ease; }
@keyframes ocula-fade { from { opacity: 0; } to { opacity: 1; } }
.ocula-overlay-panel {
  position: absolute; inset: 16px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg, #0a0c10); border: 1px solid var(--line2, rgba(255,255,255,.16));
  border-radius: 24px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.8);
  animation: ocula-pop .32s cubic-bezier(.16,1,.3,1);
}
@keyframes ocula-pop { from { opacity: 0; transform: scale(.97) translateY(10px); } to { opacity: 1; transform: none; } }
.ocula-overlay-x {
  position: absolute; top: 12px; right: 12px; z-index: 6; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; color: var(--ink, #eef1f4);
  background: var(--glass, rgba(20,24,31,.6)); border: 1px solid var(--line, rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s ease;
}
.ocula-overlay-x:hover { transform: rotate(90deg); }
.ocula-overlay .ocula-root { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ocula-overlay .ocula-studio { min-height: 100%; }
@media (max-width: 640px) { .ocula-overlay-panel { inset: 0; border-radius: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ocula-root * { animation:none !important; }
  .ocula-launch::after { animation: none !important; }
}