/* FlowArrow light/dark theme overrides. Loaded after each page's inline styles.
   Dark is the base look defined in the pages; this file adds the light palette
   and the toggle button. Selected theme is stored in localStorage ("fa-theme"). */

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

html[data-theme="light"] {
  --bg:#f5f6f8; --panel:#ffffff; --line:#d9dee7; --txt:#1b2330; --muted:#5b6575; --accent:#2f6fe0;
}

html[data-theme="light"] .canvas-box {
  background-image:
    linear-gradient(45deg,#e4e8ef 25%,transparent 25%),
    linear-gradient(-45deg,#e4e8ef 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e4e8ef 75%),
    linear-gradient(-45deg,transparent 75%,#e4e8ef 75%);
  background-color:#fbfcfe;
}
html[data-theme="light"] select,
html[data-theme="light"] input[type=color],
html[data-theme="light"] input[type=number] { background:#ffffff; }
html[data-theme="light"] button { background:#eef1f6; }
html[data-theme="light"] button.primary,
html[data-theme="light"] .seg button.on { background:var(--accent); color:#fff; }
html[data-theme="light"] .content p,
html[data-theme="light"] .content li,
html[data-theme="light"] .tip { color:#3c4657; }
html[data-theme="light"] .content h3,
html[data-theme="light"] .content .faq dt { color:#1b2330; }
html[data-theme="light"] .content .faq dd { color:#596373; }
html[data-theme="light"] .adslot { color:#9aa3b2; border-color:#d9dee7; }
html[data-theme="light"] .export-bar { box-shadow:0 -8px 16px rgba(20,30,50,.12); }

/* unified header (same one-line brand + nav on every page) */
header h1 a { color:var(--txt); text-decoration:none; }

/* unified header nav (same links & behavior on every page) */
.gnav { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; }
.gnav a { color:var(--muted); text-decoration:none; }
.gnav a:hover { color:var(--accent); }
.gnav a.cur { color:var(--accent); font-weight:600; }
@media (max-width:700px){
  .gnav { margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding-bottom:2px; }
  .gnav a { flex:0 0 auto; }
}

/* toggle button (injected into .gnav by theme.js) */
.theme-toggle {
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:2px 10px; cursor:pointer; font-size:14px; line-height:1.5; color:var(--muted);
  flex:0 0 auto;
}
.theme-toggle:hover { border-color:var(--accent); }
html[data-theme="light"] .theme-toggle { background:none; }
.theme-toggle-fixed { position:fixed; top:10px; right:10px; z-index:50; background:var(--panel); }