:root {
    --bg: #ffffff; --bar: #f4f5f7; --line: #d9dce1; --text: #1f2328;
    --muted: #6b7280; --accent: #0b5cad; --warn-bg: #fff7e6; --warn: #8a5a00;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
    font: 13px/1.3 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }
  #app { display: flex; flex-direction: column; height: 100%; }

  #bar { display: flex; gap: 6px; align-items: center; padding: 6px; background: var(--bar);
    border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  #bar input[type=url] { flex: 1 1 220px; min-width: 120px; padding: 5px 8px; border: 1px solid var(--line);
    border-radius: 4px; font: inherit; }
  #bar select, #bar button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px;
    background: #fff; font: inherit; color: var(--text); cursor: pointer; }
  #bar button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  #bar label { color: var(--muted); display: flex; align-items: center; gap: 4px; }

  #msg { display: none; padding: 6px 10px; background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid var(--line); }
  #msg.show { display: block; }

  #stage { position: relative; flex: 1; overflow: hidden; }
  #frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
  #empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; color: var(--muted); text-align: center; padding: 20px; }
  #empty strong { color: var(--text); font-size: 15px; }

  #reveal { position: absolute; top: 6px; right: 6px; z-index: 5; display: none; opacity: 0;
    transition: opacity .15s; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;
    background: rgba(255,255,255,.95); font: inherit; cursor: pointer; }
  body.locked #bar { display: none; }
  body.locked #reveal { display: block; }
  body.locked #stage:hover #reveal { opacity: 1; }
  body.show-mode #bar, body.show-mode #msg, body.show-mode #reveal { display: none !important; }