/* ═══════════════════════════════════════════════════════
   Thumb — Device Mockup Frames CSS
   CSS-based device chrome for laptops, desktops, browsers, watches
   ═══════════════════════════════════════════════════════ */

/* ─── COMMON ─────────────────────────────────────────── */

.device-asset-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── DEVICE CATEGORY: TABLET ────────────────────────── */

.mockup-module.tablet .devices {
  --aspect-ratio: 1032/1376;
  --shadow-inset: 0.5%;
  --shadow-radius: 2em;
  --drop-padding: 0%;
  --drop-radius: 0;
  --device-asset-scale: 1.12;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  transform: translateZ(0);
  will-change: contents, transform, opacity;
}

.mockup-module.tablet .devices {
  will-change: transform;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio);
  transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
  transform-origin: center center;
}

.mockup-module.tablet .layouts.lay-1-items {
  aspect-ratio: 1 / 1.15;
}

.mockup-module.tablet .layouts.lay-2-items {
  aspect-ratio: 1 / 0.85;
}


/* ─── DEVICE CATEGORY: LAPTOP ────────────────────────── */

/* MacBook frame built entirely with CSS */
.device-frame-macbook {
  --device-color: #1d1d1f;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.device-frame-macbook::before {
  content: '';
  position: absolute;
  inset: -4.5% -3.5% -12% -3.5%;
  background: var(--device-color);
  border-radius: 12px 12px 0 0;
  z-index: -1;
}

/* MacBook bottom lid/hinge */
.device-frame-macbook::after {
  content: '';
  position: absolute;
  bottom: -14%;
  left: -6%;
  right: -6%;
  height: 3%;
  background: linear-gradient(180deg, var(--device-color) 0%, color-mix(in srgb, var(--device-color) 80%, #000) 100%);
  border-radius: 0 0 8px 8px;
  z-index: -1;
}

/* MacBook notch/camera */
.mockup-module.laptop .item-container::before {
  content: '';
  position: absolute;
  top: -3.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 2%;
  background: var(--device-color, #1d1d1f);
  border-radius: 0 0 6px 6px;
  z-index: 91;
}

.mockup-module.laptop .devices {
  --shadow-inset: 0;
  --shadow-radius: 1em;
  --drop-padding: 0%;
  --drop-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  will-change: transform;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio, 1728/1117);
  transform: perspective(400em) translate(0%, 0%) scale(1);
  transform-origin: center center;
}

.mockup-module.laptop .layouts.lay-1-items {
  aspect-ratio: 1 / 0.72;
}

/* MacBook preview thumbnail */
.device-frame-macbook-preview {
  --device-color: #1d1d1f;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-frame-macbook-preview::before {
  content: '';
  position: absolute;
  inset: 5% 8%;
  background: var(--device-color);
  border-radius: 4px 4px 0 0;
  z-index: 0;
}

.device-frame-macbook-preview::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: 4%;
  right: 4%;
  height: 4%;
  background: var(--device-color);
  border-radius: 0 0 3px 3px;
}

/* ─── DEVICE CATEGORY: DESKTOP ───────────────────────── */

/* iMac frame */
.device-frame-imac {
  --device-color: #e3e4e5;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.device-frame-imac::before {
  content: '';
  position: absolute;
  inset: -3% -2.5% -22% -2.5%;
  background: var(--device-color);
  border-radius: 14px 14px 0 0;
  z-index: -1;
}

/* iMac chin */
.device-frame-imac::after {
  content: '';
  position: absolute;
  bottom: -22%;
  left: -2.5%;
  right: -2.5%;
  height: 14%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--device-color) 90%, #fff) 0%, var(--device-color) 100%);
  border-radius: 0 0 14px 14px;
  z-index: -1;
}

/* iMac stand */
.mockup-module.desktop .item-container::after {
  content: '';
  position: absolute;
  bottom: -34%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 14%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--device-color, #e3e4e5) 90%, #aaa) 0%, color-mix(in srgb, var(--device-color, #e3e4e5) 70%, #999) 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

.mockup-module.desktop .devices {
  --shadow-inset: 0;
  --shadow-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  will-change: transform;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio, 4480/2520);
  transform: perspective(400em) translate(0%, 0%) scale(1);
  transform-origin: center center;
}

.mockup-module.desktop .layouts.lay-1-items {
  aspect-ratio: 1 / 0.75;
}

/* Studio Display frame */
.device-frame-studio-display {
  --device-color: #e3e4e5;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.device-frame-studio-display::before {
  content: '';
  position: absolute;
  inset: -2.5% -1.8% -8% -1.8%;
  background: var(--device-color);
  border-radius: 10px;
  z-index: -1;
}

/* Studio Display preview */
.device-frame-studio-display-preview {
  --device-color: #e3e4e5;
  position: relative;
  width: 100%;
  height: 100%;
}

.device-frame-studio-display-preview::before {
  content: '';
  position: absolute;
  inset: 10% 12%;
  background: var(--device-color);
  border-radius: 3px;
}

/* iMac preview */
.device-frame-imac-preview {
  --device-color: #e3e4e5;
  position: relative;
  width: 100%;
  height: 100%;
}

.device-frame-imac-preview::before {
  content: '';
  position: absolute;
  inset: 8% 10%;
  background: var(--device-color);
  border-radius: 4px 4px 0 0;
}

.device-frame-imac-preview::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 40%;
  right: 40%;
  height: 12%;
  background: var(--device-color);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}


/* ─── BROWSER FRAMES ─────────────────────────────────── */
/*
 * Architecture: the frame element is positioned absolutely with `inset: 0`
 * over the content area. A `.bf-toolbar` child is injected at runtime
 * (see buildBrowserToolbar in devices-config.js) and positioned in the
 * negative-top region — the space reserved by `.item-container`'s
 * margin-top (--browser-toolbar-h). Each browser type gets its own
 * `[data-bf-type="..."]` rule set with theme variants via `[data-bf-theme]`.
 */

/* Common base for all browser frames */
.device-frame-browser-safari,
.device-frame-browser-chrome,
.device-frame-browser-arc,
.device-frame-browser-minimal,
.device-frame-browser-windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* The injected toolbar sits in the negative-top region above the content. */
.bf-toolbar {
  position: absolute;
  top: calc(-1 * var(--toolbar-height));
  left: 0;
  right: 0;
  height: var(--toolbar-height);
  background: var(--bf-bg, #f6f6f6);
  color: var(--bf-fg, rgba(0,0,0,0.72));
  border-radius: var(--bf-radius, 10px) var(--bf-radius, 10px) 0 0;
  border-bottom: 1px solid var(--bf-sep, rgba(0,0,0,0.07));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.bf-toolbar .bf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.bf-toolbar .bf-row-single {
  flex: 1;
  min-height: 0;
}

.bf-toolbar .bf-row-tabs {
  height: 32px;
  padding: 6px 8px 0 8px;
  gap: 4px;
  align-items: flex-end;
}

.bf-toolbar .bf-row-toolbar {
  flex: 1;
  min-height: 0;
  background: var(--bf-toolbar-bg, var(--bf-bg));
  border-top: 1px solid var(--bf-toolbar-sep, transparent);
}

/* Traffic lights */
.bf-toolbar .bf-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.bf-toolbar .bf-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.12);
}
.bf-toolbar .bf-dot-r { background: #FF5F56; }
.bf-toolbar .bf-dot-y { background: #FFBD2E; }
.bf-toolbar .bf-dot-g { background: #27C93F; }
.bf-toolbar .bf-dots-soft .bf-dot {
  width: 7px;
  height: 7px;
  background: var(--bf-soft-dot, rgba(0,0,0,0.18));
  box-shadow: none;
}

/* Icon row containers */
.bf-toolbar .bf-nav,
.bf-toolbar .bf-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--bf-icon, rgba(0,0,0,0.55));
}

.bf-toolbar .bf-ic {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
}
.bf-toolbar .bf-ic-sm {
  width: 10px;
  height: 10px;
}

/* URL bar (generic) */
.bf-toolbar .bf-url {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--bf-url-bg, rgba(0,0,0,0.06));
  border: 1px solid var(--bf-url-border, transparent);
  border-radius: 7px;
  color: var(--bf-url-fg, rgba(0,0,0,0.65));
  overflow: hidden;
}
.bf-toolbar .bf-url-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.bf-toolbar .bf-url-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-icon, rgba(0,0,0,0.45));
}
.bf-toolbar .bf-lock-mini {
  display: inline-flex;
  color: var(--bf-icon, rgba(0,0,0,0.5));
}

/* === SAFARI ====================================== */

.device-frame-browser-safari {
  --toolbar-height: 44px;
}
.device-frame-browser-safari .bf-toolbar {
  --bf-bg: #f3f3f3;
  --bf-fg: rgba(0,0,0,0.72);
  --bf-sep: rgba(0,0,0,0.08);
  --bf-icon: rgba(0,0,0,0.52);
  --bf-url-bg: rgba(0,0,0,0.06);
  --bf-url-fg: rgba(0,0,0,0.72);
  --bf-radius: 11px;
}
.device-frame-browser-safari .bf-url-safari {
  max-width: 56%;
  margin: 0 auto;
  background: rgba(0,0,0,0.05);
  border: 0.5px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  justify-content: center;
}
.device-frame-browser-safari .bf-url-safari .bf-url-text {
  flex: 0 1 auto;
  text-align: center;
}
.device-frame-browser-safari .bf-url-safari .bf-ic {
  width: 14px;
  height: 14px;
}
.device-frame-browser-safari .bf-row-single {
  gap: 12px;
  padding: 0 14px;
}
.device-frame-browser-safari.browser-dark .bf-toolbar {
  --bf-bg: #2a2a2c;
  --bf-fg: rgba(255,255,255,0.86);
  --bf-sep: rgba(255,255,255,0.08);
  --bf-icon: rgba(255,255,255,0.6);
  --bf-url-bg: rgba(255,255,255,0.08);
  --bf-url-fg: rgba(255,255,255,0.82);
}

/* === CHROME ====================================== */

.device-frame-browser-chrome {
  --toolbar-height: 76px;
}
.device-frame-browser-chrome .bf-toolbar {
  --bf-bg: #dee1e6;
  --bf-toolbar-bg: #f1f3f4;
  --bf-fg: rgba(0,0,0,0.78);
  --bf-sep: rgba(0,0,0,0.08);
  --bf-icon: rgba(0,0,0,0.55);
  --bf-url-bg: #ffffff;
  --bf-url-border: rgba(0,0,0,0.06);
  --bf-url-fg: rgba(0,0,0,0.78);
  --bf-radius: 10px;
  --bf-tab-active: #f1f3f4;
  --bf-tab-inactive: rgba(0,0,0,0.04);
  --bf-tab-text: rgba(0,0,0,0.18);
  --bf-fav-bg: #8ab4f8;
}
.device-frame-browser-chrome .bf-row-tabs {
  background: var(--bf-bg);
  border-bottom: 1px solid var(--bf-sep);
}
.device-frame-browser-chrome .bf-tab {
  height: 26px;
  width: 160px;
  max-width: 22%;
  border-radius: 8px 8px 0 0;
  background: var(--bf-tab-inactive);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex: 0 1 auto;
  position: relative;
}
.device-frame-browser-chrome .bf-tab-active {
  background: var(--bf-tab-active);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.04);
}
.device-frame-browser-chrome .bf-tab-ghost {
  opacity: 0.55;
}
.device-frame-browser-chrome .bf-fav {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bf-fav-bg);
  flex: 0 0 auto;
}
.device-frame-browser-chrome .bf-tab-title {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 3px;
  background: var(--bf-tab-text);
  min-width: 0;
}
.device-frame-browser-chrome .bf-tab .bf-ic {
  width: 10px;
  height: 10px;
  color: var(--bf-icon);
  opacity: 0.6;
  flex: 0 0 auto;
}
.device-frame-browser-chrome .bf-tab:not(.bf-tab-active) .bf-ic {
  display: none;
}
.device-frame-browser-chrome .bf-tab-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-icon);
  flex: 0 0 auto;
  margin-left: 2px;
}
.device-frame-browser-chrome .bf-tab-plus .bf-ic {
  width: 12px;
  height: 12px;
}
.device-frame-browser-chrome .bf-tab-strip-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.device-frame-browser-chrome .bf-dots-tabstrip {
  display: none;
}
.device-frame-browser-chrome .bf-row-toolbar {
  padding: 0 12px;
  gap: 10px;
  background: var(--bf-toolbar-bg);
  border-top: 0;
}
.device-frame-browser-chrome .bf-url-chrome {
  flex: 1;
  height: 28px;
  border-radius: 14px;
  background: var(--bf-url-bg);
  border: 1px solid var(--bf-url-border);
  padding: 0 14px;
}
.device-frame-browser-chrome .bf-url-chrome .bf-ic {
  width: 13px;
  height: 13px;
}
.device-frame-browser-chrome.browser-dark .bf-toolbar {
  --bf-bg: #202124;
  --bf-toolbar-bg: #292a2d;
  --bf-fg: rgba(255,255,255,0.9);
  --bf-sep: rgba(255,255,255,0.06);
  --bf-icon: rgba(255,255,255,0.72);
  --bf-url-bg: rgba(255,255,255,0.08);
  --bf-url-border: rgba(255,255,255,0.04);
  --bf-url-fg: rgba(255,255,255,0.85);
  --bf-tab-active: #35363a;
  --bf-tab-inactive: rgba(255,255,255,0.04);
  --bf-tab-text: rgba(255,255,255,0.22);
  --bf-fav-bg: #8ab4f8;
}

/* === ARC ========================================= */

.device-frame-browser-arc {
  --toolbar-height: 46px;
}
.device-frame-browser-arc .bf-toolbar {
  --bf-bg: #ffffff;
  --bf-fg: rgba(0,0,0,0.7);
  --bf-sep: rgba(0,0,0,0.05);
  --bf-icon: rgba(0,0,0,0.5);
  --bf-url-bg: rgba(0,0,0,0.04);
  --bf-url-fg: rgba(0,0,0,0.72);
  --bf-radius: 14px;
}
.device-frame-browser-arc .bf-row-single {
  padding: 0 16px;
  gap: 14px;
}
.device-frame-browser-arc .bf-arc-pill {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 28px;
  min-width: 220px;
  max-width: 44%;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--bf-url-fg);
  justify-content: center;
}
.device-frame-browser-arc .bf-arc-pill .bf-ic {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.device-frame-browser-arc .bf-arc-pill .bf-url-text {
  font-size: 11px;
  font-weight: 500;
}
.device-frame-browser-arc.browser-dark .bf-toolbar {
  --bf-bg: #1a1a1e;
  --bf-fg: rgba(255,255,255,0.86);
  --bf-sep: rgba(255,255,255,0.06);
  --bf-icon: rgba(255,255,255,0.6);
}
.device-frame-browser-arc.browser-dark .bf-arc-pill {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
}

/* === MINIMAL ===================================== */

.device-frame-browser-minimal {
  --toolbar-height: 36px;
}
.device-frame-browser-minimal .bf-toolbar {
  --bf-bg: #fafafa;
  --bf-fg: rgba(0,0,0,0.6);
  --bf-sep: rgba(0,0,0,0.05);
  --bf-soft-dot: rgba(0,0,0,0.22);
  --bf-radius: 8px;
}
.device-frame-browser-minimal .bf-row-single {
  padding: 0 12px;
  gap: 10px;
}
.device-frame-browser-minimal .bf-url-minimal {
  margin: 0 auto;
  height: 18px;
  padding: 0 10px;
  max-width: 38%;
  min-width: 120px;
  background: rgba(0,0,0,0.05);
  border-radius: 9px;
  justify-content: center;
}
.device-frame-browser-minimal .bf-url-minimal .bf-url-text {
  font-size: 10px;
  opacity: 0.55;
}
.device-frame-browser-minimal .bf-actions-soft {
  width: 36px;
  flex: 0 0 auto;
}
.device-frame-browser-minimal.browser-dark .bf-toolbar {
  --bf-bg: #1c1c1e;
  --bf-fg: rgba(255,255,255,0.7);
  --bf-sep: rgba(255,255,255,0.06);
  --bf-soft-dot: rgba(255,255,255,0.28);
}
.device-frame-browser-minimal.browser-dark .bf-url-minimal {
  background: rgba(255,255,255,0.08);
}
.device-frame-browser-minimal.browser-dark .bf-url-minimal .bf-url-text {
  color: rgba(255,255,255,0.55);
}

/* === WINDOWS / EDGE ============================== */

.device-frame-browser-windows {
  --toolbar-height: 76px;
}
.device-frame-browser-windows .bf-toolbar {
  --bf-bg: #e9eaee;
  --bf-toolbar-bg: #f3f3f3;
  --bf-fg: rgba(0,0,0,0.8);
  --bf-sep: rgba(0,0,0,0.07);
  --bf-icon: rgba(0,0,0,0.55);
  --bf-url-bg: #ffffff;
  --bf-url-border: rgba(0,0,0,0.07);
  --bf-url-fg: rgba(0,0,0,0.78);
  --bf-radius: 8px;
  --bf-tab-active: #f3f3f3;
  --bf-tab-inactive: rgba(0,0,0,0.04);
  --bf-tab-text: rgba(0,0,0,0.2);
  --bf-fav-bg: #0078d4;
}
.device-frame-browser-windows .bf-row-tabs {
  background: var(--bf-bg);
}
.device-frame-browser-windows .bf-tab-win {
  height: 26px;
  width: 180px;
  max-width: 24%;
  border-radius: 8px 8px 0 0;
  background: var(--bf-tab-inactive);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  flex: 0 1 auto;
}
.device-frame-browser-windows .bf-tab-win.bf-tab-active {
  background: var(--bf-tab-active);
}
.device-frame-browser-windows .bf-tab-win .bf-fav {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bf-fav-bg);
  flex: 0 0 auto;
}
.device-frame-browser-windows .bf-tab-win .bf-tab-title {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bf-tab-text);
}
.device-frame-browser-windows .bf-tab-win .bf-ic {
  width: 10px;
  height: 10px;
  color: var(--bf-icon);
  opacity: 0.6;
}
.device-frame-browser-windows .bf-tab-win:not(.bf-tab-active) .bf-ic {
  display: none;
}
.device-frame-browser-windows .bf-tab-plus {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-icon);
  flex: 0 0 auto;
}
.device-frame-browser-windows .bf-tab-plus .bf-ic {
  width: 12px;
  height: 12px;
}
.device-frame-browser-windows .bf-tab-strip-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.device-frame-browser-windows .bf-win-controls {
  display: inline-flex;
  align-items: stretch;
  height: 100%;
  margin: 0 -8px 0 0;
  align-self: stretch;
  flex: 0 0 auto;
}
.device-frame-browser-windows .bf-win-btn {
  width: 38px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-icon);
}
.device-frame-browser-windows .bf-win-btn .bf-ic {
  width: 10px;
  height: 10px;
}
.device-frame-browser-windows .bf-row-toolbar {
  padding: 0 12px;
  gap: 10px;
  background: var(--bf-toolbar-bg);
}
.device-frame-browser-windows .bf-url-win {
  flex: 1;
  height: 28px;
  border-radius: 6px;
  background: var(--bf-url-bg);
  border: 1px solid var(--bf-url-border);
  padding: 0 12px;
}
.device-frame-browser-windows .bf-url-win .bf-ic {
  width: 13px;
  height: 13px;
}
.device-frame-browser-windows.browser-dark .bf-toolbar {
  --bf-bg: #2b2b2b;
  --bf-toolbar-bg: #1f1f1f;
  --bf-fg: rgba(255,255,255,0.88);
  --bf-sep: rgba(255,255,255,0.06);
  --bf-icon: rgba(255,255,255,0.7);
  --bf-url-bg: rgba(255,255,255,0.06);
  --bf-url-border: rgba(255,255,255,0.05);
  --bf-url-fg: rgba(255,255,255,0.85);
  --bf-tab-active: #1f1f1f;
  --bf-tab-inactive: rgba(255,255,255,0.04);
  --bf-tab-text: rgba(255,255,255,0.22);
  --bf-fav-bg: #4cc2ff;
}
.device-frame-browser-windows.browser-dark .bf-win-close-btn {
  /* close stays subtle; hover-red would be nice but the chrome is non-interactive */
}


/* ─── BROWSER COMMON LAYOUT ──────────────────────────── */

/* Container reserves space for toolbar via margin-top.
   --browser-toolbar-h is set by JS per browser type. */
.mockup-module.browser .item-container {
  margin-top: var(--browser-toolbar-h, 52px);
  height: calc(100% - var(--browser-toolbar-h, 52px)) !important;
  overflow: visible;
  position: relative;
}

/* Content area clips to bottom-only border-radius.
   --browser-bottom-radius is controlled via sidebar (default 10px). */
.mockup-module.browser .interface {
  overflow: hidden;
  border-radius: 0 0 var(--browser-bottom-radius, 15px) var(--browser-bottom-radius, 15px);
}

/* Force NO top border-radius on all browser items — toolbar sits above.
   Bottom radius is controllable from the sidebar. */
.mockup-module.browser .item {
  border-radius: 0 0 var(--browser-bottom-radius, 15px) var(--browser-bottom-radius, 15px) !important;
}
.mockup-module.browser .item .item-container {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Style overlays (glass, outline, etc.) inside .interface also get 0 top corners */
.mockup-module.browser .interface > div {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Images inside browser have NO border-radius — the container clips them */
.mockup-module.browser .dropzone img,
.mockup-module.browser .dropzone .output {
  border-radius: 0 !important;
}

/* Optional URL bar element (created via JS) */
.browser-url-bar {
  position: absolute;
  top: calc(-1 * var(--toolbar-height, 40px) + 8px);
  left: 70px;
  right: 14px;
  height: 24px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.browser-url-bar::before {
  content: attr(data-url);
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}


.mockup-module.browser .layouts {
  position: absolute;
  inset: 0;
  max-height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  transform: translateZ(0);
  will-change: contents, transform, opacity;
  user-select: none;
  border: none !important;
  outline: none !important;
}

.mockup-module.browser .layouts .layouts-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: all;
  border: none !important;
  outline: none !important;
}

.mockup-module.browser .devices {
  --shadow-inset: 0;
  --shadow-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  will-change: transform;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio, 16/10);
  transform: perspective(400em) translate(0%, 0%) scale(1);
  transform-origin: center center;
}

.mockup-module.browser .layouts.lay-1-items {
  aspect-ratio: 1 / 0.68;
}

/* item-container inherits width:100%; height:100% from the general rule.
   margin-top + height:calc are set above via --browser-toolbar-h;
   this rule must NOT override them with margin:auto / height:max-content,
   otherwise the toolbar margin is lost and the circular height dependency
   collapses the container to zero. */


/* ─── Browser Preview Thumbnails (Rich HTML-based) ──────────── */

/* Common base for all browser previews */
.browser-preview-themed {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.08);
}

/* Remove old pseudo-element approach */
.browser-preview-themed::before,
.browser-preview-themed::after {
  display: none;
}

/* ── Toolbar (shared) ── */
.browser-preview-themed .bp-toolbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 5px;
  position: relative;
  z-index: 2;
}

/* ── Traffic-light dots (Safari, Arc, Minimal) ── */
.browser-preview-themed .bp-dots {
  display: flex;
  align-items: center;
  gap: 2.5px;
  flex-shrink: 0;
}
.browser-preview-themed .bp-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* ── URL bar ── */
.browser-preview-themed .bp-urlbar {
  height: 7px;
  border-radius: 4px;
  flex: 1;
}

/* ── Content area ── */
.browser-preview-themed .bp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 7px 4px;
  position: relative;
  z-index: 1;
}

.browser-preview-themed .bp-line {
  height: 3px;
  border-radius: 2px;
}
.browser-preview-themed .bp-line:nth-child(1) { width: 75%; }
.browser-preview-themed .bp-line:nth-child(2) { width: 55%; }
.browser-preview-themed .bp-line:nth-child(3) { width: 65%; }
.browser-preview-themed .bp-line:nth-child(4) { width: 40%; }


/* ═══════════════════════════════════════════════════════
   SAFARI
   ═══════════════════════════════════════════════════════ */

/* Safari Light */
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] {
  background: #f6f6f6;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-toolbar {
  height: 18px;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-dot:nth-child(1) { background: #FF5F56; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-dot:nth-child(2) { background: #FFBD2E; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-dot:nth-child(3) { background: #27C93F; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-urlbar {
  background: rgba(0,0,0,0.06);
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-content {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="light"] .bp-line {
  background: #e5e7eb;
}

/* Safari Dark */
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] {
  background: #28282a;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-toolbar {
  height: 18px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-dot:nth-child(1) { background: #FF5F56; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-dot:nth-child(2) { background: #FFBD2E; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-dot:nth-child(3) { background: #27C93F; }
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-urlbar {
  background: rgba(255,255,255,0.08);
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-content {
  background: #1c1c1e;
}
.browser-preview-themed[data-browser-type="safari"][data-browser-theme="dark"] .bp-line {
  background: rgba(255,255,255,0.07);
}


/* ═══════════════════════════════════════════════════════
   CHROME
   ═══════════════════════════════════════════════════════ */

/* Chrome toolbar has tab strip + URL row */
.browser-preview-themed[data-browser-type="chrome"] .bp-toolbar {
  flex-direction: column;
  padding: 0;
  gap: 0;
}

.browser-preview-themed[data-browser-type="chrome"] .bp-tab-strip {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
  height: 11px;
  padding: 0 4px;
}
.browser-preview-themed[data-browser-type="chrome"] .bp-tab {
  height: 8px;
  width: 32px;
  border-radius: 3px 3px 0 0;
}
.browser-preview-themed[data-browser-type="chrome"] .bp-url-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 12px;
  padding: 0 5px;
}
.browser-preview-themed[data-browser-type="chrome"] .bp-urlbar {
  height: 7px;
  border-radius: 4px;
  flex: 1;
}

/* Chrome Light */
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-tab-strip {
  background: #dee1e6;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-tab.bp-tab-active {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-tab:not(.bp-tab-active) {
  background: transparent;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-url-row {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-urlbar {
  background: #f1f3f4;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-content {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="light"] .bp-line {
  background: #e5e7eb;
}

/* Chrome Dark */
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] {
  background: #292a2d;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-tab-strip {
  background: #202124;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-tab.bp-tab-active {
  background: #35363a;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-tab:not(.bp-tab-active) {
  background: transparent;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-url-row {
  background: #292a2d;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-urlbar {
  background: rgba(255,255,255,0.1);
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-content {
  background: #202124;
}
.browser-preview-themed[data-browser-type="chrome"][data-browser-theme="dark"] .bp-line {
  background: rgba(255,255,255,0.07);
}


/* ═══════════════════════════════════════════════════════
   ARC
   ═══════════════════════════════════════════════════════ */

/* Arc Light */
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] {
  background: #ffffff;
  border-radius: 7px;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-toolbar {
  height: 16px;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-dot:nth-child(1) { background: #FF5F56; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-dot:nth-child(2) { background: #FFBD2E; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-dot:nth-child(3) { background: #27C93F; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-urlbar {
  background: rgba(0,0,0,0.04);
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-content {
  background: #f8f9fa;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="light"] .bp-line {
  background: #e2e5e9;
}

/* Arc Dark */
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] {
  background: #1a1a1e;
  border-radius: 7px;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-toolbar {
  height: 16px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-dot:nth-child(1) { background: #FF5F56; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-dot:nth-child(2) { background: #FFBD2E; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-dot:nth-child(3) { background: #27C93F; }
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-urlbar {
  background: rgba(255,255,255,0.08);
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-content {
  background: #111114;
}
.browser-preview-themed[data-browser-type="arc"][data-browser-theme="dark"] .bp-line {
  background: rgba(255,255,255,0.07);
}


/* ═══════════════════════════════════════════════════════
   MINIMAL
   ═══════════════════════════════════════════════════════ */

/* Minimal Light */
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] {
  background: #fafafa;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] .bp-toolbar {
  height: 14px;
  gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] .bp-dot {
  width: 3px;
  height: 3px;
  background: #c0c0c0;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] .bp-urlbar {
  background: rgba(0,0,0,0.04);
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
  height: 6px;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] .bp-content {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="light"] .bp-line {
  background: #ebebeb;
}

/* Minimal Dark */
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] {
  background: #1e1e1e;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] .bp-toolbar {
  height: 14px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] .bp-dot {
  width: 3px;
  height: 3px;
  background: #555;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] .bp-urlbar {
  background: rgba(255,255,255,0.08);
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
  height: 6px;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] .bp-content {
  background: #161618;
}
.browser-preview-themed[data-browser-type="minimal"][data-browser-theme="dark"] .bp-line {
  background: rgba(255,255,255,0.07);
}


/* ═══════════════════════════════════════════════════════
   WINDOWS
   ═══════════════════════════════════════════════════════ */

/* Windows toolbar layout */
.browser-preview-themed[data-browser-type="windows"] .bp-toolbar {
  justify-content: space-between;
}
.browser-preview-themed[data-browser-type="windows"] .bp-win-title {
  flex: 1;
}
.browser-preview-themed[data-browser-type="windows"] .bp-win-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}
.browser-preview-themed[data-browser-type="windows"] .bp-win-min,
.browser-preview-themed[data-browser-type="windows"] .bp-win-max,
.browser-preview-themed[data-browser-type="windows"] .bp-win-close {
  width: 6px;
  height: 6px;
  position: relative;
}
/* Minimize: horizontal line */
.browser-preview-themed[data-browser-type="windows"] .bp-win-min::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}
/* Maximize: square outline */
.browser-preview-themed[data-browser-type="windows"] .bp-win-max::after {
  content: '';
  position: absolute;
  inset: 0.5px;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5px;
}
/* Close: X via two rotated lines */
.browser-preview-themed[data-browser-type="windows"] .bp-win-close::before,
.browser-preview-themed[data-browser-type="windows"] .bp-win-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}
.browser-preview-themed[data-browser-type="windows"] .bp-win-close::before {
  transform: rotate(45deg);
}
.browser-preview-themed[data-browser-type="windows"] .bp-win-close::after {
  transform: rotate(-45deg);
}

/* Windows Light */
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] {
  background: #f3f3f3;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-toolbar {
  height: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-win-min::after {
  background: #888;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-win-max::after {
  border-color: #888;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-win-close::before,
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-win-close::after {
  background: #888;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-content {
  background: #ffffff;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="light"] .bp-line {
  background: #e5e7eb;
}

/* Windows Dark */
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] {
  background: #1f1f1f;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-toolbar {
  height: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-win-min::after {
  background: #999;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-win-max::after {
  border-color: #999;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-win-close::before,
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-win-close::after {
  background: #999;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-content {
  background: #161618;
}
.browser-preview-themed[data-browser-type="windows"][data-browser-theme="dark"] .bp-line {
  background: rgba(255,255,255,0.07);
}


/* ─── WATCH ──────────────────────────────────────────── */

.mockup-module.watch .devices {
  --shadow-inset: 1%;
  --shadow-radius: 8em;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  will-change: transform;
  width: 40% !important;
  max-width: 240px !important;
  height: auto !important;
  aspect-ratio: var(--aspect-ratio, 410/502) !important;
  transform: perspective(400em) translate(0%, 0%) scale(1);
  transform-origin: center center;
}

.mockup-module.watch .item {
  aspect-ratio: var(--aspect-ratio, 410/502) !important;
  width: 100% !important;
  height: auto !important;
  position: relative;
}

.mockup-module.watch .layouts.lay-1-items {
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-module.watch .layouts.lay-2-items {
  aspect-ratio: 1 / 0.7;
}

.mockup-module.watch .layouts.lay-3-items {
  aspect-ratio: 1.2 / 0.7;
}

.mockup-module.watch .layouts .layouts-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* ─── DEVICE COLOR PICKER ────────────────────────────── */

.device-color-picker {
  display: flex;
  gap: 6px;
  padding: 8px 0;
}

.device-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}

.device-color-swatch:hover {
  transform: scale(1.15);
}

.device-color-swatch.active {
  border-color: var(--color-brand, #CAFC00);
}

.device-color-swatch::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}


/* ─── CATEGORY TABS (new selector) ───────────────────── */

.device-category-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.device-category-tabs::-webkit-scrollbar {
  display: none;
}

.device-category-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-icons-tertiary, #888);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.device-category-tab:hover {
  color: var(--color-text-secondary, #aaa);
  background: rgba(255, 255, 255, 0.04);
}

.device-category-tab.active {
  color: var(--color-gray-50, #F5F5F7);
  background: var(--bg-hover, #2E2E34);
  box-shadow: none;
}

.device-category-tab svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.device-category-tab.active svg {
  opacity: 1;
}

/* Browser grid: 2 columns so light/dark pairs sit side-by-side */
#device-grid-browser {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#device-grid-browser .device-grid-item {
  height: 88px;
  padding: 6px 6px 5px;
}
#device-grid-browser .device-preview-area {
  border-radius: 5px;
  overflow: hidden;
}

/* ── Panels wrapper: stacks all panels in the same grid cell ── */
.device-panels-wrapper {
  display: grid;
  grid-template: 1fr / 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.device-panels-wrapper > * {
  grid-area: 1 / 1;
}

/* Screenshot panel (tabs-segment-1) transition inside wrapper */
.device-panels-wrapper > #tabs-segment-1 {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.device-panels-wrapper > #tabs-segment-1.hidden {
  display: flex !important; /* Override Tailwind .hidden {display:none} so transitions work */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.device-panels-wrapper > #tabs-segment-1:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Device grid inside each category panel */
.device-category-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.device-category-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.device-grid-item {
  position: relative;
  height: 110px;
  border-radius: 10px;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  background: var(--bg-elevated, #222226);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.device-grid-item:hover {
  border-color: var(--border-strong, rgba(255, 255, 255, 0.16));
  background: var(--bg-hover, #2E2E34);
}

.device-grid-item.active {
  border-color: var(--color-brand, #CAFC00);
  box-shadow: 0 0 0 1px var(--color-brand, #CAFC00);
}

.device-grid-item .device-preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.device-grid-item .device-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-400, #8E8E99);
  text-align: center;
  line-height: 1.2;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.device-grid-item.active .device-name {
  color: var(--color-gray-200, #D1D1D6);
}


/* ─── DEFAULT LAYOUT RULES FOR ALL DEVICE CATEGORIES ── */

/* Ensure items in all device categories display correctly */
.mockup-module.tablet .item,
.mockup-module.laptop .item,
.mockup-module.desktop .item,
.mockup-module.browser .item,
.mockup-module.tablet .devices,
.mockup-module.laptop .devices,
.mockup-module.desktop .devices,
.mockup-module.browser .devices {
  aspect-ratio: unset !important;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

/* Device preview frames in grid should be smaller */
.device-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Browser preview frames override: use column layout for toolbar + content */
.device-preview-frame.browser-preview-themed {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.device-preview-frame svg {
  width: 60%;
  height: auto;
}

.device-preview-frame img {
  width: 60%;
  height: auto;
  object-fit: contain;
}

/* Category panel transitions are now handled above via opacity/visibility */


/* ─── DEVICE SEARCH ─────────────────────────────────── */

.device-search-wrap {
  margin-top: 2px;
}

#device-search-results {
  display: none;
}

#device-search-results.active {
  display: block;
}


/* ─── DEVICE ORIENTATION TOGGLE ─────────────────────── */

.device-orientation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.10));
  background: var(--bg-elevated, #222226);
  color: var(--color-gray-400, #8E8E99);
  cursor: pointer;
  transition: all 0.15s ease;
}

.device-orientation-btn:hover {
  border-color: var(--border-strong, rgba(255, 255, 255, 0.16));
  color: var(--color-gray-200, #D1D1D6);
}

.device-orientation-btn.active {
  border-color: var(--color-brand, #CAFC00);
  box-shadow: 0 0 0 1px var(--color-brand, #CAFC00);
  color: var(--color-gray-100, #EDEDF0);
}


/* ─── LANDSCAPE PHONE ORIENTATION ─────────────────── */

.mockup-module.orientation-landscape .devices {
  aspect-ratio: var(--aspect-ratio) !important;
}

.mockup-module.orientation-landscape .item .device-asset {
  transform: scale(var(--device-asset-scale)) rotate(-90deg);
}

.mockup-module.orientation-landscape .item .device-asset-image {
  transform: none; /* let parent handle rotation */
}

.mockup-module.orientation-landscape .layouts.lay-1-items {
  aspect-ratio: 1 / 0.7 !important;
}


/* ─── RESPONSIVE: hide text on small widths ──────────── */

@media (max-width: 340px) {
  .device-category-tab {
    padding: 6px 6px;
  }
  .device-category-tab span {
    display: none;
  }
}