/* ShotFlick ONE LOOK across every public page (owner 16 Sep 2026: "all the themes must match - one ecosystem").
   Loaded after each page's own styles and before light.css. The dark tokens here are the homepage / app tokens, so Pricing and
   Themes (which carried slightly different greys) now share exactly the same colours, header height and "Go to app" button.
   Made by Comfort Earning (comfortearningoffice@gmail.com) */
:root {
  --bg: #09090b; --sf: #131317; --sf2: #1a1a20; --sf3: #22222a; --card: #131317;
  --text: #f7f5ef; --muted: #a9a69c; --dim: #7c7a72;
  --line: rgba(255, 255, 255, .07); --line2: rgba(255, 255, 255, .13);
  --gold: #f5c542; --gold2: #d99a1e; --goldHi: #ffd65c; --goldLo: #f0b72e; --ink: #161105;
}
/* the same header everywhere: 64 px tall, brand block, gold-outline "Go to app" */
body > header.top:not(:has(> .wrap)) { min-height: 64px; padding-top: 0 !important; padding-bottom: 0 !important; }
header.top + .wrap { margin-top: 30px; }
.top .signin, .top .login-btn { color: var(--gold) !important; border: 1px solid rgba(245, 197, 66, .55) !important; background: transparent; font-weight: 600; font-size: 14px; }
.top .signin:hover, .top .login-btn:hover { background: rgba(245, 197, 66, .08); }
html[data-theme="light"] .top .signin, html[data-theme="light"] .top .login-btn { border-color: rgba(154, 106, 6, .5) !important; }
html[data-theme="light"] .top .signin:hover, html[data-theme="light"] .top .login-btn:hover { background: rgba(232, 174, 42, .1); }
/* one header width on every page: the brand and the last button sit on the same 1080 px content edges */
.top .wrap { max-width: 1120px !important; margin-inline: auto; padding-inline: 20px !important; }
body > header.top:not(:has(> .wrap)) { padding-inline: max(20px, calc((100vw - 1080px) / 2)) !important; }
/* the same Themes · Pricing links on every page (homepage markup; added by sf-theme.js where a page has none) */
.topnav { display: none; margin-left: auto; gap: 28px; align-items: center; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; height: 40px; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text); }
@media (min-width: 900px) { .topnav { display: flex; } }
.top .wrap { height: 62px !important; }
body > header.top:not(:has(> .wrap)) { min-height: 63px; }