/* The key vault, framed inside the Gemini Grounding Gap Checker. It copies the
   checker's own form styles and tokens (src/styles/global.css and
   src/styles/query-coverage.css) so the frame reads as part of the page; the
   page tells it which theme is showing. System font, no web fonts, nothing
   loaded from anywhere else. */
:root{
  --ink:#141413; --body:#2a2a28; --muted:#61615c; --line:#e4e4df; --accent:#2456f5;
  --btn:#141413; --btn-ink:#ffffff; --field:#ffffff; --field-line:#d9d9d3; --danger:#b42318; --ok:#1f7a3f;
  --font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#f2f2ee; --body:#d3d3cd; --muted:#9b9b94; --line:#2c2c29; --accent:#7c9cff;
  --btn:#f2f2ee; --btn-ink:#131312; --field:#1b1b19; --field-line:#3a3a36; --danger:#ff8f80; --ok:#7fd49b; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2f2ee; --body:#d3d3cd; --muted:#9b9b94; --line:#2c2c29; --accent:#7c9cff;
    --btn:#f2f2ee; --btn-ink:#131312; --field:#1b1b19; --field-line:#3a3a36; --danger:#ff8f80; --ok:#7fd49b; color-scheme:dark;
  }
}
html, body{ margin:0; padding:0; background:transparent; }
body{ font-family:var(--font); font-size:16px; line-height:1.5; color:var(--body); -webkit-font-smoothing:antialiased; }
[hidden]{ display:none !important; }
/* Room for the focus ring; the page widens the frame by the same amount so the fields line up with its own. */
.vault{ padding:4px; }
label[for="key"]{ display:block; margin:0 0 8px; font-size:16px; font-weight:600; color:var(--ink); }
.row{ display:flex; gap:10px; align-items:stretch; }
#key{ flex:1; min-width:0; box-sizing:border-box; min-height:52px; margin:0; padding:13px 16px; border:1px solid var(--field-line); border-radius:10px; background:var(--field); font:inherit; font-size:16.5px; line-height:1.5; color:var(--ink); }
#key::placeholder{ color:var(--muted); }
:is(#key, button, input[type="checkbox"]):focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border:1px solid var(--btn); border-radius:9px; background:var(--btn); color:var(--btn-ink); font:inherit; font-size:16px; font-weight:560; white-space:nowrap; cursor:pointer; }
.btn:hover{ opacity:.88; }
.remember{ display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:14.5px; color:var(--muted); cursor:pointer; }
.remember input{ width:18px; height:18px; margin:0; accent-color:var(--accent); }
.saved-line{ display:flex; align-items:center; gap:10px; margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.actions{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:10px 0 0; }
.linkish{ padding:0; min-height:32px; border:0; background:none; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:4px; }
.linkish:hover{ color:var(--accent); }
.status{ margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); }
.status:empty{ display:none; }
.status[data-kind="error"]{ color:var(--danger); }
.note{ margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); }
@media (max-width:520px){
  .row{ flex-direction:column; }
  .btn{ width:100%; }
}