/* ShotFlick LIGHT mode for the public pages (owner 16 Sep 2026) - Made by Comfort Earning (comfortearningoffice@gmail.com)
   Loaded after each page's own styles. Everything is scoped to html[data-theme="light"], so the dark site is untouched.
   Warm white paper, ink-dark text, and a deeper gold for text and lines so it keeps its contrast on white; gold FILLS
   (buttons, pills, badges) stay the bright brand gradient with dark ink on top. Videos and theme pictures keep their own colours. */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #faf8f3; --sf: #ffffff; --sf2: #f4f1e9; --sf3: #ebe6da; --card: #ffffff;
  --text: #17150f; --muted: #5d594e; --dim: #8a8577;
  --line: rgba(23, 21, 15, .09); --line2: rgba(23, 21, 15, .16);
  --gold: #9a6a06; --gold2: #b8860b; --goldHi: #ffd65c; --goldLo: #e8ae2a; --ink: #161105;
  --flash: #2f6fd6; --pro: #8a4fd8; --ultra: #b8860b;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }

/* ---- shared header, frosted white */
html[data-theme="light"] .top,
html[data-theme="light"] body > header.top { background: rgba(250, 248, 243, .86); border-bottom-color: var(--line); }
html[data-theme="light"] .brand b, html[data-theme="light"] .brand .bn { color: var(--text); }
html[data-theme="light"] .signin { color: var(--text); border-color: var(--line2); }

/* ---- landing.css: glow, buttons, cards */
html[data-theme="light"] body::before { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(232, 174, 42, .18), transparent); }
html[data-theme="light"] .btn-gold { box-shadow: 0 10px 26px rgba(184, 134, 11, .22); }
html[data-theme="light"] .btn-line { color: var(--text); background: #fff; border-color: rgba(154, 106, 6, .45); }
html[data-theme="light"] .btn-line:hover, html[data-theme="light"] .login-btn:hover { background: rgba(232, 174, 42, .1); }
html[data-theme="light"] .login-btn { color: var(--gold); border-color: rgba(154, 106, 6, .5); }
html[data-theme="light"] .login .panel, html[data-theme="light"] .panel { background: #fff; border-color: var(--line2); box-shadow: 0 24px 60px rgba(23, 21, 15, .14); }
html[data-theme="light"] .card, html[data-theme="light"] .sx-card { background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(23, 21, 15, .04), 0 10px 30px rgba(23, 21, 15, .05); }
html[data-theme="light"] .tile { background: rgba(232, 174, 42, .12); border-color: rgba(184, 134, 11, .25); color: var(--gold); }
html[data-theme="light"] .badge { color: var(--gold); background: rgba(232, 174, 42, .12); border-color: rgba(154, 106, 6, .35); }
html[data-theme="light"] .badge.live { color: #15803d; background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .3); }
html[data-theme="light"] .trust { background: #fff; }
html[data-theme="light"] .jobcard { background: radial-gradient(120% 70% at 50% 0%, rgba(232, 174, 42, .12), transparent 60%), #fff; box-shadow: 0 30px 80px rgba(23, 21, 15, .1); border-color: rgba(154, 106, 6, .3); }
html[data-theme="light"] .jc-steps i { color: #15803d; background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); }
html[data-theme="light"] .phone, html[data-theme="light"] .cf-item { box-shadow: 0 24px 60px rgba(23, 21, 15, .18); }
html[data-theme="light"] .cf-item[data-o="0"] { box-shadow: 0 0 0 1px rgba(184, 134, 11, .25), 0 28px 70px rgba(184, 134, 11, .22); }
html[data-theme="light"] .draft { color: #7a5304; background: rgba(232, 174, 42, .1); border-color: rgba(154, 106, 6, .35); }
html[data-theme="light"] .legal blockquote { background: rgba(232, 174, 42, .08); border-color: rgba(154, 106, 6, .3); }
html[data-theme="light"] .legal table th, html[data-theme="light"] .legal table td { border-color: var(--line2); }
html[data-theme="light"] .flow .fs, html[data-theme="light"] .fs { background: #fff; border-color: var(--line2); color: var(--text); }
html[data-theme="light"] .fs-free { color: var(--ink); }
html[data-theme="light"] .fs .ai, html[data-theme="light"] .ai { color: var(--gold); border-color: rgba(154, 106, 6, .45); background: rgba(232, 174, 42, .1); }
html[data-theme="light"] .freeline { background: #fff; border-color: rgba(154, 106, 6, .3); color: var(--text); }
html[data-theme="light"] .speedband, html[data-theme="light"] section.band { background: radial-gradient(70% 120px at 50% 0, rgba(232, 174, 42, .1), transparent), linear-gradient(180deg, #f6f3ec, #f1ede3); border-color: var(--line); }
html[data-theme="light"] .stat-flash, html[data-theme="light"] .pill-flash { color: #1d4ed8; background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .3); }
html[data-theme="light"] .cmp-us { background-color: rgba(232, 174, 42, .1); border-left-color: rgba(154, 106, 6, .3); }
html[data-theme="light"] .cmp-row { border-color: var(--line); }

/* progress frame on the live card */
html[data-theme="light"] .pframe { border-color: var(--line2); }
html[data-theme="light"] .pf-track { stroke: rgba(184, 134, 11, .18); }
html[data-theme="light"] .pf-bar { stroke: #d99a1e; filter: none; }
html[data-theme="light"] .pf-head { stroke: #b8860b; filter: none; }
html[data-theme="light"] .pf-badge, html[data-theme="light"] .pf-pct, html[data-theme="light"] .pf-step .ai { color: var(--gold); }
html[data-theme="light"] .pf-step { background: var(--sf2); border-color: var(--line); }
html[data-theme="light"] .pf-name { color: var(--text); }
html[data-theme="light"] .pf-dots i { background: rgba(23, 21, 15, .1); }
html[data-theme="light"] .pf-dots i.on { background: rgba(232, 174, 42, .8); }
html[data-theme="light"] .pf-dots i.now { background: #d99a1e; }

/* phone menu */
@media (max-width: 899px) {
  html[data-theme="light"] .mbtn { border-color: rgba(154, 106, 6, .45); }
  html[data-theme="light"] .mmenu:not([hidden]) { background: #fff; box-shadow: 0 30px 80px rgba(23, 21, 15, .18); }
  html[data-theme="light"] body::after { background: rgba(250, 248, 243, .5); }
}

/* ---- premium-page.css */
html[data-theme="light"] .pp-cap::before { background: linear-gradient(90deg, transparent, rgba(154, 106, 6, .8)); }
html[data-theme="light"] .pp-cap::after { background: linear-gradient(90deg, rgba(154, 106, 6, .8), transparent); }
html[data-theme="light"] .pp-shine::before { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); }
html[data-theme="light"] .sx-head .cap::before { background: linear-gradient(90deg, transparent, rgba(154, 106, 6, .8)); }
html[data-theme="light"] .sx-head .cap::after { background: linear-gradient(90deg, rgba(154, 106, 6, .8), transparent); }

/* ---- themes page */
html[data-theme="light"] .look { box-shadow: 0 8px 22px rgba(23, 21, 15, .08); }
html[data-theme="light"] .look span { color: #fff; }
html[data-theme="light"] .veiltext .n { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
html[data-theme="light"] .veiltext p { color: #fff; }
html[data-theme="light"] .veil { background: #17150f; }
html[data-theme="light"] .skel { background: var(--sf2); }

/* ---- pricing page */
html[data-theme="light"] .plan, html[data-theme="light"] .model, html[data-theme="light"] .top-card, html[data-theme="light"] .free,
html[data-theme="light"] .ent, html[data-theme="light"] .theme {
  background: #fff; box-shadow: 0 1px 2px rgba(23, 21, 15, .04), 0 10px 30px rgba(23, 21, 15, .05); }
html[data-theme="light"] .free { border-color: rgba(154, 106, 6, .35); }
html[data-theme="light"] .top-card .bon, html[data-theme="light"] .soon { color: var(--gold); border-color: rgba(154, 106, 6, .35); background: rgba(232, 174, 42, .1); }
html[data-theme="light"] .top-card.best { border-color: rgba(154, 106, 6, .45); background: linear-gradient(180deg, rgba(232, 174, 42, .1), #fff 55%); }
html[data-theme="light"] button.top-card:hover, html[data-theme="light"] button.top-card:focus-visible { border-color: rgba(154, 106, 6, .6); }
html[data-theme="light"] .dots i:not(.f):not(.p):not(.u) { background: rgba(23, 21, 15, .14); }   /* the model colours stay */
/* only the pricing page's link/button .cta - on the homepage .cta is the row that holds Auto Edit + Advanced Editor */
html[data-theme="light"] a.cta, html[data-theme="light"] button.cta { color: var(--text); border-color: var(--line2); background: #fff; }
html[data-theme="light"] .free .cta, html[data-theme="light"] .amtrow .cta, html[data-theme="light"] .openapp { background: linear-gradient(180deg, #ffd65c, #e8ae2a); color: var(--ink); border-color: transparent; }
html[data-theme="light"] .ent .cta { background: var(--text); color: #fff; }
html[data-theme="light"] .ent { background: radial-gradient(90% 140% at 100% 0%, rgba(232, 174, 42, .14), transparent 55%), #fff; }
html[data-theme="light"] .amtrow { background: #fff; }
html[data-theme="light"] table { background: #fff; }
html[data-theme="light"] tr.grp td { background: var(--sf2); }
html[data-theme="light"] .paynote.ok { color: #15803d; border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .06); }
html[data-theme="light"] .paynote.bad { color: #b91c1c; border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .05); }

/* the gold word in headings: a deeper gold reads on white */
html[data-theme="light"] .gold, html[data-theme="light"] h1 .g, html[data-theme="light"] h2 .g, html[data-theme="light"] .g { color: var(--gold); }

/* the switch in light mode */
html[data-theme="light"] .sfmode .sfm-t { background: rgba(23, 21, 15, .12); border-color: rgba(23, 21, 15, .18); }

/* homepage: every other section band (dark lifted surface in dark mode) */
html[data-theme="light"] main > section.sec:nth-of-type(even), html[data-theme="light"] body > section.sec:nth-of-type(even) {
  background: radial-gradient(70% 120px at 50% 0, rgba(232, 174, 42, .1), transparent), linear-gradient(180deg, #f3efe5, #efeadf);
  border-top-color: rgba(154, 106, 6, .16); border-bottom-color: var(--line); }
html[data-theme="light"] .foot { color: var(--dim); border-top-color: var(--line); }

/* pricing questions: plain rows on the page, like dark mode (a white box per row looked like a stripe) */
html[data-theme="light"] .faq details { background: transparent; box-shadow: none; border-color: var(--line2); }