:root {
  --vt-bg: rgba(20, 20, 24, 0.92);
  --vt-fg: #f0f0f3;
  --vt-fg-dim: #b3b3b8;
  --vt-border: rgba(255, 255, 255, 0.08);
  --vt-hover: rgba(255, 255, 255, 0.07);
  --vt-active: rgba(255, 255, 255, 0.14);
  --vt-accent: #ffffff;
  --vt-h: 44px;
}

html, body { margin: 0; padding: 0; height: 100%; background: #1a1a1d; }

/* The `hidden` attribute must always win over our display:flex/inline-flex rules below.
   Without this, #vt-picker-panel would show on page load despite hidden="true". */
[hidden] { display: none !important; }

#viewo-toolbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--vt-h);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--vt-bg); color: var(--vt-fg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--vt-border);
  font: 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  z-index: 2147483646;
  padding: 0 10px;
  user-select: none;
  transition: transform .18s ease;
}
#viewo-toolbar[data-collapsed="true"] { transform: translateY(-100%); }

.vt-left, .vt-center, .vt-right { display: flex; align-items: center; gap: 6px; }
.vt-left { flex: 1 1 0; min-width: 0; }
.vt-center { flex: 0 0 auto; }
.vt-right { flex: 1 1 0; justify-content: flex-end; }

.vt-project {
  font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--vt-fg-dim);
  padding-left: 4px;
}

.vt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent; color: var(--vt-fg);
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; text-decoration: none;
  transition: background .1s, border-color .1s;
}
.vt-btn:hover { background: var(--vt-hover); }
.vt-btn:active { background: var(--vt-active); }
.vt-btn:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 1px; }

.vt-picker {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  background: var(--vt-hover); color: var(--vt-fg);
  border: 1px solid var(--vt-border); border-radius: 6px;
  cursor: pointer;
  font: inherit;
  min-width: 220px; max-width: 360px;
}
.vt-picker:hover { background: var(--vt-active); }
.vt-picker[aria-expanded="true"] { background: var(--vt-active); }
.vt-picker-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; text-align: left; }
.vt-picker-counter { color: var(--vt-fg-dim); font-variant-numeric: tabular-nums; font-size: 12px; }

.vt-viewports {
  display: inline-flex; padding: 2px;
  background: rgba(255,255,255,0.06); border-radius: 7px;
  margin-right: 4px;
}
.vt-vp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px;
  background: transparent; color: var(--vt-fg-dim);
  border: 0; border-radius: 5px;
  cursor: pointer;
}
.vt-vp:hover { color: var(--vt-fg); }
.vt-vp-active { background: rgba(255,255,255,0.16); color: var(--vt-fg); }

/* Stage + iframe */
#vt-stage {
  position: fixed; top: var(--vt-h); left: 0; right: 0; bottom: 0;
  background: #1a1a1d;
  overflow: auto;
  transition: top .18s ease;
}
#viewo-toolbar[data-collapsed="true"] ~ #vt-stage { top: 0; }
#vt-frame {
  display: block; border: 0; background: #fff;
  width: 100%; height: 100%;
  transition: width .18s ease, margin .18s ease, box-shadow .18s ease;
}
#vt-stage.vp-mobile #vt-frame,
#vt-stage.vp-tablet #vt-frame {
  margin: 24px auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  height: calc(100% - 48px);
  border-radius: 8px;
}
#vt-stage.vp-mobile #vt-frame { width: 375px; }
#vt-stage.vp-tablet #vt-frame { width: 768px; }

/* Collapsed handle */
.vt-handle {
  position: fixed; top: 8px; left: 8px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vt-bg); color: var(--vt-fg);
  border: 1px solid var(--vt-border); border-radius: 8px;
  cursor: pointer; z-index: 2147483647;
  backdrop-filter: saturate(180%) blur(16px);
}
.vt-handle:hover { background: rgba(40, 40, 44, 0.94); }

/* Picker panel */
#vt-picker-panel {
  position: fixed; top: calc(var(--vt-h) + 4px); left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  max-height: min(60vh, 480px);
  display: flex; flex-direction: column;
  background: rgba(28, 28, 32, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  z-index: 2147483647;
  overflow: hidden;
}
#vt-search {
  appearance: none;
  background: transparent;
  color: var(--vt-fg);
  border: 0; border-bottom: 1px solid var(--vt-border);
  padding: 12px 14px;
  font: 14px/1.4 inherit;
  outline: none;
}
#vt-search::placeholder { color: var(--vt-fg-dim); }
#vt-list {
  list-style: none; margin: 0; padding: 4px;
  overflow-y: auto;
}
#vt-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  color: var(--vt-fg);
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}
#vt-list li:hover, #vt-list li.vt-li-active { background: var(--vt-hover); }
#vt-list li.vt-li-current { color: var(--vt-accent); }
#vt-list li .vt-li-num { color: var(--vt-fg-dim); font-variant-numeric: tabular-nums; font-size: 11px; min-width: 22px; }
#vt-list li .vt-li-title { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vt-list li .vt-li-check { color: var(--vt-accent); }

/* Print fallback.
   Normal printing goes through the iframe's own window, so the toolbar is never
   part of it. This only covers the case where the parent document gets printed
   anyway (browser menu, an extension, Ctrl+P that we failed to intercept):
   drop viewo's chrome and let the frame take the full page. */
@media print {
  #viewo-toolbar, .vt-handle, #vt-picker-panel, .vt-toast { display: none !important; }
  #vt-stage { position: static; overflow: visible; top: 0; }
  #vt-stage #vt-frame {
    width: 100% !important; height: auto; min-height: 100vh;
    margin: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }
}

/* Toast */
.vt-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--vt-bg); color: var(--vt-fg);
  border: 1px solid var(--vt-border);
  padding: 10px 16px; border-radius: 8px;
  font: 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 2147483647;
}
.vt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }