/* CASESTUDIO V376 — Futuristic Glow refined controls */
:root{
  --cs-side-width:44px;
  --cs-side-arrow-h:46px;
  --cs-side-catalog-h:58px;
  --cs-side-filter-h:40px;
  --cs-ctrl-bg:linear-gradient(180deg, rgba(28,34,66,.98), rgba(11,15,31,.98));
  --cs-ctrl-bg-soft:linear-gradient(180deg, rgba(36,45,84,.96), rgba(15,20,39,.98));
  --cs-ctrl-light:linear-gradient(180deg, rgba(250,251,255,.99), rgba(233,239,255,.98));
  --cs-ctrl-border:linear-gradient(145deg, rgba(139,92,246,.95), rgba(59,130,246,.92) 42%, rgba(34,211,238,.88));
  --cs-ctrl-shadow:0 14px 28px rgba(4,8,24,.42), 0 0 18px rgba(87,95,255,.16), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 24px rgba(0,0,0,.22);
  --cs-ctrl-shadow-hover:0 18px 34px rgba(4,8,24,.50), 0 0 20px rgba(111,92,255,.22), 0 0 26px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 26px rgba(0,0,0,.24);
  --cs-ctrl-text:#f7fbff;
  --cs-ctrl-text-light:#26365f;
}
.preview-stage > .preview-nav{gap:10px !important}
.preview-stage > .preview-nav > .side-catalog-button,
.preview-stage > .preview-nav .nav-filter-trigger,
.preview-stage > .preview-nav .nav-arrow,
.preview-stage .sticker-layer-controls .sticker-layer-number,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  transition:transform .15s cubic-bezier(.22,.9,.32,1), box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, filter .18s ease !important;
}
.preview-stage > .preview-nav > .side-catalog-button::before,
.preview-stage > .preview-nav .nav-filter-trigger::before,
.preview-stage > .preview-nav .nav-arrow::before,
.preview-stage .sticker-layer-controls .sticker-layer-number::before,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30%), radial-gradient(88% 55% at 50% 0%, rgba(129,140,248,.22), transparent 72%), radial-gradient(75% 48% at 50% 100%, rgba(56,189,248,.13), transparent 72%);
}
.preview-stage > .preview-nav > .side-catalog-button::after,
.preview-stage > .preview-nav .nav-filter-trigger::after,
.preview-stage > .preview-nav .nav-arrow::after,
.preview-stage .sticker-layer-controls .sticker-layer-number::after,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--cs-ctrl-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.88; pointer-events:none; z-index:2;
}
.preview-stage > .preview-nav > .side-catalog-button > *,
.preview-stage > .preview-nav .nav-filter-trigger > *,
.preview-stage > .preview-nav .nav-arrow > *,
.preview-stage .sticker-layer-controls .sticker-layer-number > *,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus > *{position:relative;z-index:3}

.preview-stage > .preview-nav .nav-arrow,
.preview-stage > .preview-nav > .side-catalog-button,
.preview-stage > .preview-nav .nav-filter-trigger,
.preview-stage .sticker-layer-controls .sticker-layer-number,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  border:1px solid rgba(146,160,255,.18) !important;
  backdrop-filter:blur(16px) saturate(148%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(148%) !important;
  box-shadow:var(--cs-ctrl-shadow) !important;
}
.preview-stage > .preview-nav .nav-arrow,
.preview-stage > .preview-nav > .side-catalog-button,
.preview-stage > .preview-nav .nav-filter-trigger{
  background:var(--cs-ctrl-bg) !important;
  color:var(--cs-ctrl-text) !important;
}
.preview-stage > .preview-nav .nav-arrow{
  width:var(--cs-side-width) !important; min-width:var(--cs-side-width) !important;
  height:var(--cs-side-arrow-h) !important; min-height:var(--cs-side-arrow-h) !important;
  border-radius:16px !important;
  padding:0 !important;
}
.preview-stage > .preview-nav .nav-arrow .nav-arrow-glyph,
.preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon{
  display:grid !important; place-items:center !important;
}
.preview-stage > .preview-nav .nav-arrow .nav-arrow-glyph svg,
.preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon svg{
  width:20px; height:20px; display:block;
}
.preview-stage > .preview-nav .nav-arrow .nav-arrow-glyph svg{
  width:18px; height:18px;
}
.preview-stage > .preview-nav .nav-arrow .nav-arrow-glyph svg path,
.preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg path,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon svg path{
  fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.preview-stage > .preview-nav > .side-catalog-button{
  width:var(--cs-side-width) !important; min-width:var(--cs-side-width) !important;
  min-height:var(--cs-side-catalog-h) !important; padding:7px 2px !important;
  border-radius:17px !important;
}
.preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core{
  width:100%; min-height:40px;
}
.preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg{width:22px;height:22px}
.preview-stage > .preview-nav .nav-filter-trigger{
  width:var(--cs-side-width) !important; min-width:var(--cs-side-width) !important;
  height:var(--cs-side-filter-h) !important; min-height:var(--cs-side-filter-h) !important; padding:0 !important;
  border-radius:15px !important;
}
.preview-stage > .preview-nav .nav-filter-trigger .nav-filter-trigger-icon{
  width:18px !important; height:18px !important; flex-basis:18px !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 0 14px rgba(96,165,250,.28), inset 2px 2px 4px rgba(255,255,255,.38), inset -2px -2px 4px rgba(0,0,0,.22) !important;
}
.preview-stage > .preview-nav > .side-catalog-button:hover,
.preview-stage > .preview-nav .nav-filter-trigger:hover,
.preview-stage > .preview-nav .nav-arrow:hover,
.preview-stage > .preview-nav > .side-catalog-button:focus-visible,
.preview-stage > .preview-nav .nav-filter-trigger:focus-visible,
.preview-stage > .preview-nav .nav-arrow:focus-visible,
.preview-stage .sticker-layer-controls .sticker-layer-number:hover,
.preview-stage .sticker-layer-controls .sticker-layer-number:focus-visible,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:hover,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:focus-visible{
  transform:translateY(-2px) scale(1.018) !important;
  border-color:rgba(165,180,252,.40) !important;
  box-shadow:var(--cs-ctrl-shadow-hover) !important;
  filter:saturate(1.05) brightness(1.02) !important;
}
.preview-stage > .preview-nav > .side-catalog-button:active,
.preview-stage > .preview-nav .nav-filter-trigger:active,
.preview-stage > .preview-nav .nav-arrow:active,
.preview-stage .sticker-layer-controls .sticker-layer-number:active,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:active{
  transform:translateY(1px) scale(.955) !important;
  box-shadow:0 0 0 1px rgba(165,180,252,.10), 0 4px 11px rgba(4,8,24,.28), inset 0 0 24px rgba(56,189,248,.12), inset 0 6px 11px rgba(0,0,0,.34) !important;
  filter:saturate(1.08) brightness(.98) !important;
}
.preview-stage > .preview-nav > .side-catalog-button:focus-visible,
.preview-stage > .preview-nav .nav-filter-trigger:focus-visible,
.preview-stage > .preview-nav .nav-arrow:focus-visible,
.preview-stage .sticker-layer-controls .sticker-layer-number:focus-visible,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:focus-visible{outline:2px solid rgba(165,180,252,.92) !important; outline-offset:2px !important;}
.preview-stage > .preview-nav .nav-filter-trigger[aria-expanded="true"],
.preview-stage .sticker-layer-controls .sticker-layer-number.active{
  background:var(--cs-ctrl-bg-soft) !important;
  border-color:rgba(167,139,250,.40) !important;
  box-shadow:0 18px 34px rgba(4,8,24,.48), 0 0 18px rgba(99,102,241,.20), 0 0 24px rgba(56,189,248,.15), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 26px rgba(0,0,0,.24) !important;
}
.preview-stage > .preview-nav > .side-catalog-button:disabled,
.preview-stage > .preview-nav .nav-arrow:disabled,
.preview-stage > .preview-nav .nav-filter-trigger:disabled{opacity:.46 !important; transform:none !important; filter:saturate(.55) !important; box-shadow:none !important}

.preview-stage .sticker-layer-controls .sticker-layer-number,
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important;
  border-radius:12px !important;
  background:var(--cs-ctrl-bg) !important;
  color:var(--cs-ctrl-text) !important;
  font-size:12px !important; font-weight:800 !important;
}
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:0 !important;
}
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-icon{width:16px;height:16px}
.preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus .layer-plus-cap{
  position:absolute; bottom:3px; right:4px; min-width:10px; height:10px; display:grid; place-items:center;
  font-size:7px; font-weight:900; line-height:1; color:#fff; border-radius:999px; padding:1px 2px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 3px 8px rgba(37,99,235,.35);
}
.preview-stage .sticker-layer-controls .sticker-layer-remove{
  background:linear-gradient(145deg, rgba(251,113,133,.92), rgba(190,24,93,.88)) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(78,4,31,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.preview-stage .sticker-layer-controls .sticker-layer-remove:hover{ transform:translateY(-1px) scale(1.04) !important; }

html[data-theme="light"] .preview-stage > .preview-nav .nav-arrow,
body[data-theme="light"] .preview-stage > .preview-nav .nav-arrow,
html[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button,
body[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button,
html[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger,
body[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger,
html[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number,
body[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number,
html[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus,
body[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{
  background:var(--cs-ctrl-light) !important;
  color:var(--cs-ctrl-text-light) !important;
  border-color:rgba(129,140,248,.18) !important;
  box-shadow:0 14px 26px rgba(85,101,162,.16), 0 0 16px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -8px 18px rgba(196,205,255,.18) !important;
}
html[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button:hover,
body[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button:hover,
html[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger:hover,
body[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger:hover,
html[data-theme="light"] .preview-stage > .preview-nav .nav-arrow:hover,
body[data-theme="light"] .preview-stage > .preview-nav .nav-arrow:hover,
html[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button:focus-visible,
body[data-theme="light"] .preview-stage > .preview-nav > .side-catalog-button:focus-visible,
html[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger:focus-visible,
body[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger:focus-visible,
html[data-theme="light"] .preview-stage > .preview-nav .nav-arrow:focus-visible,
body[data-theme="light"] .preview-stage > .preview-nav .nav-arrow:focus-visible,
html[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number:hover,
body[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number:hover,
html[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number:focus-visible,
body[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number:focus-visible,
html[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:hover,
body[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:hover,
html[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:focus-visible,
body[data-theme="light"] .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus:focus-visible{ box-shadow:0 16px 30px rgba(85,101,162,.18), 0 0 18px rgba(99,102,241,.10), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -10px 20px rgba(196,205,255,.20) !important; }
html[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger[aria-expanded="true"],
body[data-theme="light"] .preview-stage > .preview-nav .nav-filter-trigger[aria-expanded="true"],
html[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number.active,
body[data-theme="light"] .preview-stage .sticker-layer-controls .sticker-layer-number.active{
  background:linear-gradient(180deg, rgba(240,245,255,.99), rgba(222,233,255,.98)) !important;
  color:#1f3466 !important;
}
@media (max-width:700px){
  :root{ --cs-side-width:36px; --cs-side-arrow-h:42px; --cs-side-catalog-h:52px; --cs-side-filter-h:36px; }
  .preview-stage > .preview-nav{ gap:7px !important; }
  .preview-stage > .preview-nav > .side-catalog-button{ padding:5px 2px !important; border-radius:15px !important; }
  .preview-stage > .preview-nav .nav-arrow{ border-radius:14px !important; }
  .preview-stage > .preview-nav .nav-filter-trigger{ border-radius:14px !important; }
  .preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg{width:19px;height:19px}
  .preview-stage .sticker-layer-controls .sticker-layer-number,
  .preview-stage .sticker-layer-controls .add-sticker-layer.add-sticker-plus{ width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; }
}
@media (max-width:390px){
  :root{ --cs-side-width:32px; --cs-side-arrow-h:38px; --cs-side-catalog-h:48px; --cs-side-filter-h:33px; }
  .preview-stage > .preview-nav{ gap:6px !important; }
  .preview-stage > .preview-nav > .side-catalog-button .catalog-icon-core svg{width:17px;height:17px}
  .preview-stage > .preview-nav .nav-arrow .nav-arrow-glyph svg{width:16px;height:16px}
  .preview-stage > .preview-nav .nav-filter-trigger .nav-filter-trigger-icon{ width:16px !important; height:16px !important; flex-basis:16px !important; }
}