@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --ink:#19202e; --muted:#7c8494; --line:#e9ebef; --panel:#ffffff; --soft:#f6f7f9;
  --accent:#645bff; --accent-2:#8b85ff; --shadow:0 12px 35px rgba(28,33,48,.08);
  --stage:#eef0f5; --topbar:rgba(255,255,255,.88); --mono:"DM Mono",monospace; --ui:"Manrope","Noto Sans SC",sans-serif;
}
body.workspace-dark { --ink:#f2f4f8; --muted:#9aa2b3; --line:#2b3240; --panel:#191e29; --soft:#222834; --stage:#111621; --topbar:rgba(25,30,41,.9); --shadow:0 12px 35px rgba(0,0,0,.25); }
* { box-sizing:border-box; }
body { margin:0; min-width:1120px; background:var(--panel); color:var(--ink); font-family:var(--ui); font-size:13px; }
button,input,select { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Top bar ---------- */
.app-shell { height:100vh; min-height:720px; overflow:hidden; background:var(--panel); }
.topbar { height:64px; display:flex; align-items:center; border-bottom:1px solid var(--line); padding:0 20px 0 24px; background:var(--topbar); backdrop-filter:blur(16px); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; letter-spacing:-.5px; width:33.33%; }
.brand-mark { position:relative; width:23px; height:23px; background:linear-gradient(135deg,#7a72ff,#4f4dd2); border-radius:7px; display:flex; align-items:center; justify-content:center; gap:2px; box-shadow:0 5px 11px rgba(100,91,255,.28); }
.brand-mark i { display:block; width:2.5px; border-radius:5px; background:#fff; }
.brand-mark i:nth-child(1){height:7px} .brand-mark i:nth-child(2){height:12px} .brand-mark i:nth-child(3){height:5px}
.beta { color:#6b7280; font:500 9px var(--mono); letter-spacing:.12em; border:1px solid var(--line); border-radius:4px; padding:2px 4px; }
.topbar-center { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; color:var(--muted); font:500 11px var(--mono); white-space:nowrap; gap:8px; }
.live-dot { width:7px;height:7px;border-radius:50%;background:#42b985;box-shadow:0 0 0 3px rgba(66,185,133,.13); }
.top-separator { height:12px;border-left:1px solid var(--line);margin:0 2px; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-button,.tool-icon { display:grid;place-items:center;border:0;background:transparent;width:32px;height:32px;border-radius:7px;cursor:pointer;color:var(--muted);font-size:18px; }
.icon-button:hover,.tool-icon:hover { background:var(--soft);color:var(--ink); }
.icon-button::after { content:"☾"; }
.workspace-dark .icon-button::after { content:"☀"; }
.button { height:32px; border-radius:7px; padding:0 12px; font-size:12px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:.18s ease; }
.button-secondary { color:var(--ink);background:var(--panel);border-color:var(--line); }
.button-secondary:hover { background:var(--soft); }
.button-primary { color:#fff;background:linear-gradient(135deg,#746bff,#5f57ea);border-color:#5d55ee; box-shadow:0 3px 8px rgba(100,91,255,.22); }
.button-primary:hover { transform:translateY(-1px);filter:brightness(1.04); }
.button-icon { font-size:16px;vertical-align:-1px;margin-right:2px; }

/* ---------- Workspace / sidebar ---------- */
.workspace { height:calc(100vh - 64px); display:grid; grid-template-columns:318px 1fr; }
.sidebar { overflow:auto; border-right:1px solid var(--line); background:var(--panel); padding:5px 0 28px; scrollbar-width:thin; }
.control-section { padding:18px 20px; border-bottom:1px solid var(--line); }
.section-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:var(--ink);font-weight:800;font-size:12px;letter-spacing:-.15px; }
.section-status { color:var(--muted);font:500 10px var(--mono); }
.small-kbd { color:var(--muted);font:10px var(--mono);border:1px solid var(--line);padding:2px 4px;border-radius:4px; }
.text-button { border:0;background:none;color:var(--accent);padding:0;cursor:pointer;font-weight:700;font-size:11px; }
.segmented { background:var(--soft);border-radius:7px;padding:3px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px; }
.segmented button { height:27px; border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer; }
.segmented button.active { color:var(--ink);background:var(--panel);box-shadow:0 1px 3px rgba(29,34,48,.09);font-weight:700; }
.source-panel { display:none; margin-top:10px; }
.source-panel.active { display:block; }
.input-label { display:block;color:var(--muted);font-size:10px;font-weight:700;margin:13px 0 6px; }
.input-label:first-child { margin-top:0; }
.url-input-row { display:flex;gap:5px; }
.url-input-row input { min-width:0;flex:1; }
.url-input-row button { border:0;border-radius:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:0 9px;cursor:pointer; }
.field-hint { margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.4; }
.file-drop { min-height:82px;border:1px dashed #c7cad3;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;background:var(--soft);gap:3px;text-align:center;padding:10px; }
.workspace-dark .file-drop { border-color:#475061; }
.file-drop:hover { border-color:var(--accent); }
.file-drop input { display:none; }
.file-drop strong { font-size:11px; }
.file-drop small { color:var(--muted);font-size:9px; }
.upload-glyph { font-size:17px;color:var(--accent);line-height:14px; }
.image-preview-card { margin-top:9px;display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--soft); }
.image-preview-card img { width:34px;height:34px;object-fit:cover;border-radius:6px;background:var(--panel);border:1px solid var(--line); }
.image-preview-card div { display:grid;gap:1px;min-width:0; }
.image-preview-card strong { font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.image-preview-card small { color:var(--muted);font-size:9px; }
.image-preview-card .text-button { margin-left:auto;flex:0 0 auto; }
.platform-switch { padding:3px;background:var(--soft);border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:3px; }
.platform-button { height:30px;border:0;background:transparent;border-radius:5px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer; }
.platform-button.active { background:var(--panel);box-shadow:0 1px 3px rgba(29,34,48,.1);color:var(--ink); }
.apple-glyph,.android-glyph { font-size:8px;margin-right:3px; }
.apple-glyph { color:#777; }
.android-glyph { color:#58b977; }
.select-wrap { position:relative; }
.select-wrap select { width:100%;height:33px;appearance:none;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);padding:0 28px 0 10px;font-size:11px;outline:0;cursor:pointer; }
.select-wrap span { position:absolute;right:10px;top:7px;pointer-events:none;font-size:14px;color:var(--muted); }
.select-wrap.small select { height:28px;font-size:10px; }
.select-wrap.small span { top:5px; }
.android-nav-style { margin-top:4px; }
.device-spec { margin-top:8px;display:flex;justify-content:space-between;gap:10px;color:var(--muted);font:10px var(--mono); }
.size-row { display:flex;align-items:center;gap:6px; }
.size-row input[type=number] { flex:1;min-width:0;height:32px; }
.size-x { color:var(--muted);font-size:11px;flex:0 0 auto; }
.size-row .text-button { flex:0 0 auto;white-space:nowrap; }
.appearance-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.appearance-option { min-height:59px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:7px;cursor:pointer;font-size:9px; }
.appearance-option.active { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--ink);font-weight:700; }
.appearance-preview { width:23px;height:15px;border-radius:4px;position:relative;overflow:hidden;border:1px solid #d7dae1;display:flex;flex-direction:column;gap:2px;padding:3px; }
.appearance-preview i { display:block;height:2px;width:100%;border-radius:3px;background:#d6dae5; }
.light-preview { background:#fff; }
.dark-preview { background:#262b38;border-color:#3b4352; }
.dark-preview i { background:#737c8f; }
.auto-preview { display:grid;place-items:center;background:linear-gradient(90deg,#fff 50%,#2a2f3c 50%);font-size:12px;padding:0;color:#555; }
.appearance-note { margin:13px 0 0; }
.color-field { height:33px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;padding:4px 8px;gap:8px;background:var(--panel); }
.color-field input[type=color] { border:0;padding:0;width:21px;height:21px;cursor:pointer;background:transparent; }
.color-field input[type=text] { border:0;background:transparent;width:100%;height:100%;color:var(--muted);font:10px var(--mono);outline:0; }
.toggle-row { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:11px 0; }
.toggle-row:first-of-type { margin-top:0; }
.toggle-row div { display:grid;gap:2px; }
.toggle-row strong,.toggle-row span { font-size:11px; }
.toggle-row small { color:var(--muted);font-size:10px; }
.toggle-row.compact { margin:12px 0 0; }
.switch { position:relative;flex:0 0 31px;width:31px;height:18px;cursor:pointer; }
.switch input { position:absolute;opacity:0; }
.switch span { position:absolute;inset:0;border-radius:20px;background:#d8dbe2;transition:.2s; }
.switch span::after { content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:white;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.2s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::after { transform:translateX(13px); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px 9px;margin-top:2px; }
.form-grid label { display:block;min-width:0; }
.form-grid label > span { display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:5px; }
.form-grid label > span b { font:500 9px var(--mono);color:var(--accent); }
input[type=text],input[type=url],input[type=number] { height:28px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:var(--panel);padding:0 8px;outline:0;font-size:10px;width:100%; }
input[type=range] { width:100%;accent-color:var(--accent);height:18px;margin:0; }
.signal-choice { display:flex;height:28px;border:1px solid var(--line);border-radius:6px;overflow:hidden; }
.signal-choice button { flex:1;border:0;border-right:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:13px;line-height:1;cursor:pointer; }
.signal-choice button:last-child { border:0; }
.signal-choice button.active { background:#ebeaff;color:var(--accent); }
.workspace-dark .signal-choice button.active { background:#393557; }

/* ---------- Font scale control ---------- */
.font-scale-row { display:flex; align-items:center; gap:10px; }
.font-scale-row input[type=range] { flex:1; }
.font-scale-value { flex:0 0 auto; font:700 11px var(--mono); color:var(--ink); min-width:36px; text-align:right; }
.font-scale-actions { margin-top:8px; }

/* ---------- Stage area ---------- */
.stage-area { min-width:0;display:grid;grid-template-rows:52px 1fr 34px;background:var(--stage);overflow:hidden; }
.stage-toolbar { display:flex;align-items:center;padding:0 23px;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:color-mix(in srgb,var(--stage) 91%,white);gap:10px; }
.toolbar-group { display:flex;align-items:center;padding:3px;background:color-mix(in srgb,var(--soft) 85%,transparent);border-radius:7px;gap:2px; }
.tool-button { height:25px;border:0;background:transparent;color:var(--muted);border-radius:5px;padding:0 8px;font:500 10px var(--mono);cursor:pointer; }
.tool-button.active { color:var(--ink);background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.06); }
.toolbar-divider { height:16px;border-left:1px solid var(--line); }
.tool-icon { width:28px;height:28px;font-size:17px; }
.tool-icon.small { width:22px;height:22px;font-size:13px;border-radius:5px; }
.zoom-group { gap:0; }
.zoom-stepper { display:flex;align-items:center;gap:1px;margin-left:2px; }
.zoom-readout { min-width:42px;height:22px;border:0;background:transparent;color:var(--ink);font:700 10px var(--mono);cursor:pointer;border-radius:5px; }
.zoom-readout:hover { background:var(--panel); }
.tool-text-button { height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap; }
.tool-text-button:hover { background:var(--soft); }
.toolbar-spacer { flex:1; }
.safe-area-key { font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px; }
.safe-area-key i { display:block;width:9px;height:9px;border:1px dashed #857fff;border-radius:2px; }

.stage-canvas {
  position:relative; min-height:0; overflow:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 28px 20px;
}
.stage-canvas.resizing { cursor:nwse-resize; }
.canvas-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(117,124,145,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(117,124,145,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse at center,black,transparent 76%); }
.device-wrap { position:relative; display:flex; flex-direction:column; align-items:center; flex:0 0 auto; margin:auto; }

/* device-frame's box is set to the already-scaled pixel size (via JS) */
.device-frame { position:relative; flex:0 0 auto; }

.device-shell {
  --screen-w:402px; --screen-h:874px;
  position:absolute; top:0; left:0;
  width:var(--screen-w); height:var(--screen-h);
  transform:scale(var(--device-scale,1)); transform-origin:top left;
  background:transparent; padding:0; border-radius:0; box-shadow:none;
  z-index:1;
  transition:width .25s,height .25s,transform .1s;
}
.device-shell.no-anim { transition:none; }

/* No bezel, no rounded corners: the stage renders exactly like a raw
   phone screenshot, only wrapped with a very soft elevation shadow. */
.device-screen {
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:0; background:var(--system-bar-bg,#fff);
  isolation:isolate;
  box-shadow:0 18px 40px rgba(20,24,34,.16), 0 2px 8px rgba(20,24,34,.08);
}

/* Pure system-UI canvas: the H5 viewport is inset below the status bar and
   above the navigation bar so neither system layer covers page content. */
.content-scale {
  position:absolute; left:0; right:0;
  top:var(--status-inset,0px);
  height:calc(100% - var(--status-inset,0px) - var(--nav-inset,0px));
  overflow:hidden;
  background:var(--system-bar-bg,#fff);
}
.content-inner {
  position:relative;
  width:calc(100% / var(--font-scale,1));
  height:calc(100% / var(--font-scale,1));
  transform:scale(var(--font-scale,1));
  transform-origin:top left;
}
.device-screen iframe { position:absolute; inset:0; width:100%;height:100%;border:0;display:block;background:transparent; }
.image-preview { position:absolute; inset:0; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; display:none; background:var(--system-bar-bg,#fff); }
.image-preview img { display:block; width:100%; height:auto; }
.device-screen.has-image .image-preview { display:block; }
.device-screen.has-image iframe,
.device-screen.has-url .image-preview { display:none; }

.empty-state {
  position:absolute; inset:0; z-index:2;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; color:var(--muted); background:var(--system-bar-bg,#fff); padding:0 30px;
}
.has-content .empty-state { display:none; }
.empty-state.show { display:flex; }
.empty-glyph { width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:16px;font-weight:700;border:1px solid var(--line); }
.empty-state strong { font-size:12px; color:var(--ink); }
.empty-state small { font-size:10px; }

/* ---------- Status bar (iOS + Android system UI) ---------- */
.status-bar {
  height:var(--status-inset,0px); position:absolute; top:0; left:0; right:0; z-index:4;
  padding:0 20px; display:flex; align-items:center; justify-content:space-between;
  color:#121521; pointer-events:none; background:var(--system-bar-bg,#fff);
}
.status-bar.status-ios { font:700 13px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif; padding:0 22px; }
.status-bar.status-android { font:500 12px "Roboto","Noto Sans SC",sans-serif; padding:0 16px; }
.status-left { padding-left:3px;min-width:50px; }
.status-right { display:flex;align-items:center;gap:6px;height:18px; }
.status-right svg { display:block; }
.network-label { font-size:9px;font-weight:700;letter-spacing:-.3px; }
.status-android .network-label { font-size:9px;font-weight:500; }
.battery-wrap { display:flex;align-items:center;gap:3px; }
.battery-pct { font:700 10px "Roboto",var(--mono); letter-spacing:-.2px; }

.safe-area { display:none;position:absolute;z-index:6;pointer-events:none;border:1px dashed rgba(120,112,255,.75);background:rgba(112,104,255,.08); }
.show-safe .safe-area { display:block; }
.safe-top { top:0;left:0;right:0;height:var(--status-inset,0px);border-width:0 0 1px; }
.safe-bottom { left:0;right:0;bottom:0;height:var(--nav-inset,0px);border-width:1px 0 0; }

/* ---------- Bottom system bar (iOS home indicator / Android gesture + 3-button) ---------- */
.bottom-system-bar {
  position:absolute; left:0; right:0; bottom:0; height:var(--nav-inset,0px); z-index:4;
  display:grid; place-items:center; pointer-events:none; color:#10131b;
  background:transparent;
}
.home-indicator { width:134px;height:5px;border-radius:5px;background:currentColor;opacity:.9; }
.ios-nav { height:34px; }
.android-nav.gesture { display:grid;place-items:center; }
.android-nav.gesture .home-indicator { width:108px;height:4px;border-radius:4px;opacity:.9; }
.android-nav.buttons { display:flex; align-items:center; justify-content:space-evenly; padding:0 54px; }
.android-nav.buttons .android-btn { width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.92; }
.android-nav.buttons svg { width:100%;height:100%; }
.status-hidden .status-bar { display:none; }
.nav-hidden .bottom-system-bar { display:none; }
.status-light .status-bar,.status-light .bottom-system-bar { color:#f9f9fb; }
.status-dark .status-bar,.status-dark .bottom-system-bar { color:#11131b; }

/* ---------- Resize handle ---------- */
.resize-handle {
  position:absolute; right:-8px; bottom:-8px; width:16px; height:16px; z-index:6;
  border-radius:50%; background:var(--accent); border:2px solid var(--panel);
  cursor:nwse-resize; box-shadow:0 2px 6px rgba(20,24,34,.3);
  transition:transform .15s;
}
.resize-handle:hover { transform:scale(1.18); }
.resize-handle[hidden] { display:none; }

.stage-footer { display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);font-size:10px;color:var(--muted);background:color-mix(in srgb,var(--stage) 93%,white); }
.stage-footer b { font:500 10px var(--mono);color:var(--ink); }
.privacy-note { color:#49ac7a; }

.toast { position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);padding:9px 13px;border-radius:7px;background:#202632;color:#fff;font-size:11px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.2); }
.toast.show { opacity:1;transform:translate(-50%,0); }

/* ---------- Custom device dialog ---------- */
dialog#custom-device-dialog { border:0;border-radius:16px;padding:0;width:360px;box-shadow:0 30px 60px rgba(20,24,34,.28);color:var(--ink);background:var(--panel); }
dialog#custom-device-dialog::backdrop { background:rgba(15,18,26,.45); }
.dialog-head { display:flex;align-items:flex-start;justify-content:space-between;padding:18px 18px 6px; }
.dialog-head h2 { margin:2px 0 0;font-size:16px; }
.eyebrow { color:var(--accent);font:800 9px var(--mono);letter-spacing:.14em; }
.dialog-close { border:0;background:none;font-size:18px;color:var(--muted);cursor:pointer;width:28px;height:28px;border-radius:6px; }
.dialog-close:hover { background:var(--soft); }
.dialog-body { padding:6px 18px 4px;display:grid;gap:12px; }
.dialog-body label { display:block; }
.dialog-body label > span { display:block;color:var(--muted);font-size:10px;font-weight:700;margin-bottom:5px; }
.dialog-body input { height:32px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);padding:0 9px;width:100%; }
.dialog-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.dialog-grid label { position:relative; }
.dialog-grid em { position:absolute;right:9px;bottom:8px;font-style:normal;color:var(--muted);font-size:10px; }
.dialog-foot { display:flex;justify-content:flex-end;gap:8px;padding:16px 18px 18px; }

@media (max-height:800px) {
  .control-section { padding-top:14px;padding-bottom:14px; }
  .form-grid { gap:7px; }
  .stage-canvas { padding:18px; }
  .device-spec { margin-top:5px; }
  .input-label { margin-top:10px; }
}