/* Page chrome for the standalone site. Everything inside #nt-mount is styled by
   the plugin's own scoped stylesheet (screen.html) — these rules only cover the
   page shell around it, and deliberately reuse the same palette. */

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Fallbacks only: app/theme.css sets the real palette (and its dark variant)
     for both the page shell and the plugin screen. */
  --nt-page-bg: #F4F6F9;
  --nt-page-text: #0F172A;
  --nt-page-muted: #64748B;
  --nt-page-line: #E2E8F0;
  --nt-page-accent: #00ACC1;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--nt-page-bg);
  color: var(--nt-page-text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Settings (and any tall standalone page) may need the document to scroll. */
body.nt-page-settings {
  overflow: auto;
}

.nt-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--nt-page-bg);
  border-bottom: 1px solid var(--nt-page-line);
}

.nt-boot {
  padding: 120px 20px 20px;
  text-align: center;
  color: var(--nt-page-muted);
}

.nt-boot h1 { margin: 0 0 8px; font-size: 20px; color: var(--nt-page-text); }
.nt-boot p { margin: 0; line-height: 1.6; }

/* Settings page (settings.html mounts the plugin's own settings panel). */
.nt-settings-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 100px 20px 40px;
}

.nt-back {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--nt-page-muted);
  font-size: 13px;
  text-decoration: none;
}

.nt-back:hover, .nt-back:focus-visible { color: var(--nt-page-accent); }